From f6998de6ecb7f7ccc8a4564ae85048c77101cb9b Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 8 Sep 2018 09:34:13 -0500
Subject: [PATCH] Include units in number & range variable

---
 js/usercss.js           | 12 ++++++++++--
 manage/config-dialog.js | 43 +++++++++++++++++++++++------------------
 2 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/js/usercss.js b/js/usercss.js
index 9b126f16..35067d08 100644
--- a/js/usercss.js
+++ b/js/usercss.js
@@ -222,10 +222,15 @@ var usercss = (() => {
         state.errorPrefix = 'Invalid JSON: ';
         parseJSONValue(state);
         state.errorPrefix = '';
-        // [default, start, end, step] (start, end & step are optional)
+        // [default, start, end, step, units] (start, end, step & units are optional)
         if (Array.isArray(state.value) && state.value.length) {
           result.default = state.value.shift();
-          result.range = state.value;
+          const nonDigit = /[^\d.+-]/;
+          // label may be placed anywhere after default value
+          const labelIndex = state.value.findIndex(item => nonDigit.test(item));
+          // but should not contain any numbers '4px' => 'px'
+          result.units = labelIndex < 0 ? '' : state.value.splice(labelIndex, 1)[0].toString().replace(/[\d.+-]/g, '');
+          result.range = state.value.filter(item => !nonDigit.test(item));
         } else {
           // not a range, fallback to text
           result.type = 'text';
@@ -572,6 +577,9 @@ var usercss = (() => {
       // TODO: handle customized image
       return va.options.find(o => o.name === va[prop]).value;
     }
+    if ((va.type === 'number' || va.type === 'range') && va.units) {
+      return va[prop] + va.units;
+    }
     return va[prop];
   }
 
diff --git a/manage/config-dialog.js b/manage/config-dialog.js
index 32101edd..196f6313 100644
--- a/manage/config-dialog.js
+++ b/manage/config-dialog.js
@@ -201,6 +201,27 @@ function configDialog(style) {
     return va.value === null || va.value === undefined || va.value === va.default;
   }
 
+  function handleRangeAndNumberInputs(va, options) {
+    const dataset = {};
+    options.value = va.default;
+    if (typeof va.range[0] !== 'undefined') {
+      options.min = dataset.min = va.range[0];
+    }
+    if (typeof va.range[1] !== 'undefined') {
+      options.max = dataset.max = va.range[1];
+    }
+    if (va.range[2]) {
+      options.step = va.range[2];
+    }
+    const children = va.type === 'range' ? [$create('span.current-value', {textContent: va.value + va.units})] : [];
+    children.push(
+      $create(`span.current-${va.type}`, {dataset}, [
+        va.input = $create('input.config-value', options),
+      ])
+    );
+    return children;
+  }
+
   function buildConfigForm() {
     let resetter =
       $create('a.config-reset-icon', {href: '#'}, [
@@ -266,24 +287,8 @@ function configDialog(style) {
             oninput: updateVarOnInput,
             onfocus: selectAllOnFocus,
           };
-          const dataset = {};
           if (va.type === 'range' || va.type === 'number') {
-            children = va.type === 'range' ? [$create('span.current-value', {textContent: va.value})] : [];
-            options.value = va.default;
-            if (typeof va.range[0] !== 'undefined') {
-              options.min = dataset.min = va.range[0];
-            }
-            if (typeof va.range[1] !== 'undefined') {
-              options.max = dataset.max = va.range[1];
-            }
-            if (va.range[2]) {
-              options.step = va.range[2];
-            }
-            children.push(
-              $create('span.current-range', {dataset}, [
-                va.input = $create('input.config-value', options),
-              ])
-            );
+            children = handleRangeAndNumberInputs(va, options);
           } else {
             children = [
               va.input = $create('input.config-value', options),
@@ -314,7 +319,7 @@ function configDialog(style) {
       this.value = this.va.value = clampValue(this.value, this.va.range);
     }
     if (this.type === 'range') {
-      $('.current-value', this.closest('.config-range')).textContent = this.va.value;
+      $('.current-value', this.closest('.config-range')).textContent = this.va.value + (this.va.units || '');
     }
   }
 
@@ -356,7 +361,7 @@ function configDialog(style) {
         const span = $('.current-value', va.input.closest('.config-range'));
         va.input.value = value;
         if (span) {
-          span.textContent = value;
+          span.textContent = value + (va.units || '');
         }
       } else {
         va.input.value = value;