Add additional transforms (#899)

2 files changed, 27 insertions, 14 deletions

diff --git a/ext/bg/js/settings/generic-setting-controller.js b/ext/bg/js/settings/generic-setting-controller.js
index de218816..aa20dbbc 100644
--- a/ext/bg/js/settings/generic-setting-controller.js
+++ b/ext/bg/js/settings/generic-setting-controller.js
@@ -34,7 +34,9 @@ class GenericSettingController {
             ['setDocumentAttribute', this._setDocumentAttribute.bind(this)],
             ['setRelativeAttribute', this._setRelativeAttribute.bind(this)],
             ['splitTags', this._splitTags.bind(this)],
-            ['joinTags', this._joinTags.bind(this)]
+            ['joinTags', this._joinTags.bind(this)],
+            ['toNumber', this._toNumber.bind(this)],
+            ['toString', this._toString.bind(this)]
         ]);
     }
 
@@ -156,4 +158,12 @@ class GenericSettingController {
         }
         return node;
     }
+
+    _toNumber(value, metadata, element) {
+        return DOMDataBinder.convertToNumber(value, element.dataset);
+    }
+
+    _toString(value) {
+        return `${value}`;
+    }
 }
diff --git a/ext/mixed/js/dom-data-binder.js b/ext/mixed/js/dom-data-binder.js
index 93fe956e..b33def8f 100644
--- a/ext/mixed/js/dom-data-binder.js
+++ b/ext/mixed/js/dom-data-binder.js
@@ -317,7 +317,7 @@ class DOMDataBinder {
                     case 'text':
                         return `${element.value}`;
                     case 'number':
-                        return this._getInputNumberValue(element);
+                        return DOMDataBinder.convertToNumber(element.value, element);
                 }
                 break;
             case 'TEXTAREA':
@@ -327,26 +327,29 @@ class DOMDataBinder {
         return null;
     }
 
-    _getInputNumberValue(element) {
-        let value = parseFloat(element.value);
+    // Utilities
+
+    static convertToNumber(value, constraints) {
+        value = parseFloat(value);
         if (!Number.isFinite(value)) { return 0; }
 
-        let {min, max, step} = element;
-        min = this._stringValueToNumberOrNull(min);
-        max = this._stringValueToNumberOrNull(max);
-        step = this._stringValueToNumberOrNull(step);
+        let {min, max, step} = constraints;
+        min = DOMDataBinder.convertToNumberOrNull(min);
+        max = DOMDataBinder.convertToNumberOrNull(max);
+        step = DOMDataBinder.convertToNumberOrNull(step);
         if (typeof min === 'number') { value = Math.max(value, min); }
         if (typeof max === 'number') { value = Math.min(value, max); }
         if (typeof step === 'number' && step !== 0) { value = Math.round(value / step) * step; }
         return value;
     }
 
-    _stringValueToNumberOrNull(value) {
-        if (typeof value !== 'string' || value.length === 0) {
-            return null;
+    static convertToNumberOrNull(value) {
+        if (typeof value !== 'number') {
+            if (typeof value !== 'string' || value.length === 0) {
+                return null;
+            }
+            value = parseFloat(value);
         }
-
-        const number = parseFloat(value);
-        return !Number.isNaN(number) ? number : null;
+        return !Number.isNaN(value) ? value : null;
     }
 }