initial custom spinner implementation, needs work

css/style.css

@@ -21,20 +21,6 @@ a:hover {
 }
 input[type="number"]::-webkit-inner-spin-button {
     -webkit-appearance: none;
-    
-    display: block;
-    width: 15px;
-    
-    background-image: url('../images/arrows.png');
-    background-repeat: no-repeat;
-    
-    border-left: 1px solid silver;
-}
-input[type=number]::-webkit-inner-spin-button:before {
-    content: "";
-}
-input[type=number]::-webkit-inner-spin-button:after {
-    content: "";
 }
 .clear-both {
     clear: both;

main.js

@@ -162,4 +162,53 @@ function array_difference(firstArray, secondArray) {
     }
     
     return cloneArray;
+}
+
+function add_custom_spinners() {
+    var spinner_element = '<div class="spinner"><div class="up"></div><div class="down"></div></div>';
+    
+    $('input[type="number"]').each(function() {
+        var input = $(this);
+        var isInt =(input.prop('step') == '') ? true : false;
+        
+        // make space for spinner
+        input.width(input.width() - 16);
+        
+        // add spinner
+        input.after(spinner_element);
+        
+        // get spinner refference
+        var spinner = input.next();
+        
+        // bind UI hooks to spinner
+        $('.up', spinner).click(function() {
+            if (isInt) {
+                var current_value = parseInt(input.val());
+                input.val(current_value + 1);
+            } else {
+                var current_value = parseFloat(input.val());
+                var step = parseFloat(input.prop('step'));
+                var step_decimals = input.prop('step').length - 2;
+                
+                input.val((current_value + step).toFixed(step_decimals));
+            }
+            
+            input.change();
+        });
+        
+        $('.down', spinner).click(function() {
+            if (isInt) {
+                var current_value = parseInt(input.val());
+                input.val(current_value - 1);
+            } else {
+                var current_value = parseFloat(input.val());
+                var step = parseFloat(input.prop('step'));
+                var step_decimals = input.prop('step').length - 2;
+                
+                input.val((current_value - step).toFixed(step_decimals));
+            }
+            
+            input.change();
+        });
+    });
 }

tabs/initial_setup.css

@@ -1,5 +1,22 @@
 .tab-initial_setup {
 }
+    .tab-initial_setup .spinner {
+        float: right;
+        width: 15px;
+        height: 20px;
+        
+        background-image: url('../images/arrows.png');
+        background-repeat: no-repeat;    
+        
+        border: 1px solid silver;
+        border-left: 0;
+    }
+        .tab-initial_setup .spinner .up {
+            height: 10px;
+        }
+        .tab-initial_setup .spinner .down {
+            height: 10px;
+        }
     .tab-initial_setup .section {
         clear: both;
         padding-bottom: 8px;

tabs/initial_setup.js

@@ -2,6 +2,9 @@ function tab_initialize_initial_setup() {
     ga_tracker.sendAppView('Initial Setup');
     GUI.active_tab = 'initial_setup';
     
+    // enable custom spinners
+    add_custom_spinners();
+    
     send_message(MSP_codes.MSP_IDENT, MSP_codes.MSP_IDENT, false, function() {
         send_message(MSP_codes.MSP_ACC_TRIM, MSP_codes.MSP_ACC_TRIM, false, function() {
             send_message(MSP_codes.MSP_MISC, MSP_codes.MSP_MISC, false, function() {