range slider migration WIP

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) =
+  def renderDissociatedRange(field: Field) =
-    input(name := field.name, value := field.value, tpe := "range")
+    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"))
           )
       )
     )

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) => {

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'),
+      $timeInput = $form.find('.time_choice [name=time]'),
-      $incrementInput = $form.find('.increment_choice input'),
+      $incrementInput = $form.find('.increment_choice [name=increment]'),
-      $daysInput = $form.find('.days_choice input'),
+      $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));
+        show(parseFloat($input.val() as string));
-        input.value = '' + self.sliderInitVal(parseFloat(input.value), isTimeSlider ? self.sliderTime : self.sliderIncrement, 100);
+        range.min = '0';
-        input.max = '' + (isTimeSlider ? 38 : 30);
+        range.max = '' + (isTimeSlider ? 38 : 30);
-        $input.on('input', () => {
+        range.value = '' + self.sliderInitVal(parseFloat($input.val() as string), isTimeSlider ? self.sliderTime : self.sliderIncrement, 100);
-          const time = valueToTime(parseInt(input.value));
+        $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($('<div>').slider({ */
+        range.min = '1';
-        /*   value: self.sliderInitVal(parseInt($input.val() as string), self.sliderDays, 20), */
+        range.max = '7';
-        /*   min: 1, */
+        range.value = '' + self.sliderInitVal(parseInt($input.val() as string), self.sliderDays, 20);
-        /*   max: 7, */
+        $range.on('input', () => {
-        /*   range: 'min', */
+          const days = self.sliderDays(parseInt(range.value));
-        /*   step: 1, */
+          $value.text('' + days);
-        /*   slide(_: any, ui: { value: number }) { */
+          $input.val('' + days);
-        /*     const days = self.sliderDays(ui.value); */
+          save();
-        /*     $value.text('' + days); */
+        });
-        /*     $input.val('' + days); */
+      });
+      $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();