From ceaa1cf1e21ea4d8a99e6f60385edebf79af3786 Mon Sep 17 00:00:00 2001 From: Thibault Duplessis Date: Thu, 10 Sep 2020 09:24:37 +0200 Subject: [PATCH] range slider migration WIP --- app/views/setup/bits.scala | 16 ++++--- ui/lobby/src/form.ts | 4 +- ui/lobby/src/setup.ts | 96 +++++++++++++++++++------------------- 3 files changed, 60 insertions(+), 56 deletions(-) diff --git a/app/views/setup/bits.scala b/app/views/setup/bits.scala index 3ebf2f2d9b..bd24fc24a7 100644 --- a/app/views/setup/bits.scala +++ b/app/views/setup/bits.scala @@ -1,13 +1,12 @@ package views.html.setup +import controllers.routes import play.api.data.{ Field, Form } import lila.api.Context import lila.app.templating.Environment._ import lila.app.ui.ScalatagsTemplate._ -import controllers.routes - private object bits { val prefix = "sf_" @@ -87,8 +86,11 @@ private object bits { def renderInput(field: Field) = input(name := field.name, value := field.value, tpe := "hidden") - def renderRange(field: Field) = - input(name := field.name, value := field.value, tpe := "range") + def renderDissociatedRange(field: Field) = + frag( + renderInput(field)(cls := "range-value"), + input(name := s"${field.name}_range", tpe := "range")(cls := "range-slider") + ) def renderLabel(field: Field, content: Frag) = label(`for` := s"$prefix${field.id}")(content) @@ -116,13 +118,13 @@ private object bits { trans.minutesPerSide(), ": ", span(chess.Clock.Config(~form("time").value.map(x => (x.toDouble * 60).toInt), 0).limitString), - renderRange(form("time"))(min := 0) + renderDissociatedRange(form("time")) ), div(cls := "increment_choice range")( trans.incrementInSeconds(), ": ", span(form("increment").value), - renderRange(form("increment"))(min := 0) + renderDissociatedRange(form("increment")) ) ), div(cls := "correspondence")( @@ -136,7 +138,7 @@ private object bits { trans.daysPerTurn(), ": ", span(form("days").value), - renderRange(form("days"))(min := 1) + renderDissociatedRange(form("days")) ) ) ) diff --git a/ui/lobby/src/form.ts b/ui/lobby/src/form.ts index 29987957f7..d66921beca 100644 --- a/ui/lobby/src/form.ts +++ b/ui/lobby/src/form.ts @@ -10,7 +10,9 @@ export interface FormStore { } export const toFormLines = (form: HTMLFormElement): FormLines => - Array.from(new FormData(form).entries()).reduce((o,[k,v]) => ({...o, [k]: v}), {}); + Array.from(new FormData(form).entries()) + .filter(([k, _]) => !k.includes('_range')) + .reduce((o,[k,v]) => ({...o, [k]: v}), {}); export const toFormObject = (lines: FormLines): FormObject => Object.keys(lines).reduce((o, k) => { diff --git a/ui/lobby/src/setup.ts b/ui/lobby/src/setup.ts index 9fd82b3510..64bd23f2b0 100644 --- a/ui/lobby/src/setup.ts +++ b/ui/lobby/src/setup.ts @@ -24,9 +24,8 @@ export default class Setup { }; } - private save = (form: HTMLFormElement) => { + private save = (form: HTMLFormElement) => this.stores[form.getAttribute('data-type')!].set(toFormLines(form)); - } private sliderTimes = [ 0, 1 / 4, 1 / 2, 3 / 4, 1, 3 / 2, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, @@ -106,14 +105,14 @@ export default class Setup { $fenPosition = $form.find(".fen_position"), $fenInput = $fenPosition.find('input'), forceFormPosition = !!$fenInput.val(), - $timeInput = $form.find('.time_choice input'), - $incrementInput = $form.find('.increment_choice input'), - $daysInput = $form.find('.days_choice input'), + $timeInput = $form.find('.time_choice [name=time]'), + $incrementInput = $form.find('.increment_choice [name=increment]'), + $daysInput = $form.find('.days_choice [name=days]'), typ = $form.data('type'), $ratings = $modal.find('.ratings > div'), randomColorVariants = $form.data('random-color-variants').split(','), $submits = $form.find('.color-submits__button'), - toggleButtons = function() { + toggleButtons = () => { const variantId = $variantSelect.val(), timeMode = $timeModeSelect.val(), rated = $rated.prop('checked'), @@ -234,8 +233,10 @@ export default class Setup { }); } else { $timeInput.add($incrementInput).each(function(this: HTMLInputElement) { - const input = this, $input = $(input), + const $input = $(this), $value = $input.siblings('span'), + $range = $input.siblings('.range-slider'), + range = $range[0] as HTMLInputElement, isTimeSlider = $input.parent().hasClass('time_choice'), showTime = (v: number) => { if (v == 1 / 4) return '¼'; @@ -245,57 +246,56 @@ export default class Setup { }, valueToTime = (v: number) => (isTimeSlider ? self.sliderTime : self.sliderIncrement)(v), show = (time: number) => $value.text(isTimeSlider ? showTime(time) : '' + time); - show(parseFloat(input.value)); - input.value = '' + self.sliderInitVal(parseFloat(input.value), isTimeSlider ? self.sliderTime : self.sliderIncrement, 100); - input.max = '' + (isTimeSlider ? 38 : 30); - $input.on('input', () => { - const time = valueToTime(parseInt(input.value)); + show(parseFloat($input.val() as string)); + range.min = '0'; + range.max = '' + (isTimeSlider ? 38 : 30); + range.value = '' + self.sliderInitVal(parseFloat($input.val() as string), isTimeSlider ? self.sliderTime : self.sliderIncrement, 100); + $range.on('input', () => { + const time = valueToTime(parseInt(range.value)); show(time); - /* input.value = '' + time; */ + $input.val('' + time); showRating(); toggleButtons(); }); }); - $daysInput.each(function(this: HTMLElement) { + $daysInput.each(function(this: HTMLInputElement) { var $input = $(this), - $value = $input.siblings('span'); + $value = $input.siblings('span'), + $range = $input.siblings('.range-slider'), + range = $range[0] as HTMLInputElement; $value.text($input.val() as string); - /* $input.after($('
').slider({ */ - /* value: self.sliderInitVal(parseInt($input.val() as string), self.sliderDays, 20), */ - /* min: 1, */ - /* max: 7, */ - /* range: 'min', */ - /* step: 1, */ - /* slide(_: any, ui: { value: number }) { */ - /* const days = self.sliderDays(ui.value); */ - /* $value.text('' + days); */ - /* $input.val('' + days); */ + range.min = '1'; + range.max = '7'; + range.value = '' + self.sliderInitVal(parseInt($input.val() as string), self.sliderDays, 20); + $range.on('input', () => { + const days = self.sliderDays(parseInt(range.value)); + $value.text('' + days); + $input.val('' + days); + save(); + }); + }); + $form.find('.rating-range').each(function(this: HTMLElement) { + const $this = $(this), + $input = $this.find("input"), + $span = $this.siblings("span.range"), + min = $input.data("min"), + max = $input.data("max"), + values = $input.val() ? ($input.val() as string).split("-") : [min, max]; + + $span.text(values.join('–')); + /* $this.slider({ */ + /* range: true, */ + /* min: min, */ + /* max: max, */ + /* values: values, */ + /* step: 50, */ + /* slide(_: any, ui: { values: [number, number] }) { */ + /* $input.val(ui.values[0] + "-" + ui.values[1]); */ + /* $span.text(ui.values[0] + "–" + ui.values[1]); */ /* save(); */ /* } */ - /* })); */ + /* }); */ }); - /* $form.find('.rating-range').each(function(this: HTMLElement) { */ - /* const $this = $(this), */ - /* $input = $this.find("input"), */ - /* $span = $this.siblings("span.range"), */ - /* min = $input.data("min"), */ - /* max = $input.data("max"), */ - /* values = $input.val() ? ($input.val() as string).split("-") : [min, max]; */ - - /* $span.text(values.join('–')); */ - /* $this.slider({ */ - /* range: true, */ - /* min: min, */ - /* max: max, */ - /* values: values, */ - /* step: 50, */ - /* slide(_: any, ui: { values: [number, number] }) { */ - /* $input.val(ui.values[0] + "-" + ui.values[1]); */ - /* $span.text(ui.values[0] + "–" + ui.values[1]); */ - /* save(); */ - /* } */ - /* }); */ - /* }); */ } $timeModeSelect.on('change', function(this: HTMLElement) { var timeMode = $(this).val();