Introduzione Autonumeric per la gestione JS dei campi numerici

assets/src/css/style.css

@@ -1022,3 +1022,7 @@ div.tip {
 .skin-default .nav.navbar-nav li a:hover {
     background: #222222;
 }
+
+.decimal-number {
+    text-align: right;
+}

assets/src/js/functions/functions.js

@@ -1,9 +1,18 @@
-// Modal
+/**
+ * Modal gestito da versioni precedenti.
+ * @param title
+ * @param href
+ * @param init_modal
+ */
 function launch_modal(title, href, init_modal) {
     openModal(title, href);
 }
 
-// Modal
+/**
+ * Modal.
+ * @param title
+ * @param href
+ */
 function openModal(title, href) {
     // Fix - Select2 does not function properly when I use it inside a Bootstrap modal.
     $.fn.modal.Constructor.prototype.enforceFocus = function () {
@@ -55,6 +64,11 @@ function openModal(title, href) {
     }
 }
 
+/**
+ *
+ * @param event
+ * @param link
+ */
 function openLink(event, link) {
     if (event.ctrlKey) {
         window.open(link);
@@ -85,7 +99,9 @@ function getUrlVars() {
     });
 }
 
-// Data e ora (orologio)
+/**
+ * Data e ora (orologio)
+ */
 function clock() {
     $('#datetime').html(moment().formatPHP(globals.timestamp_format));
     setTimeout('clock()', 1000);
@@ -125,33 +141,6 @@ function session_keep_alive() {
     $.get(globals.rootdir + '/core.php');
 }
 
-/**
- * Funzione per gestire i contatori testuali nel formato x/total.
- * Viene dato un id del campo da verificare come input, viene letto il testo nella forma [0-9]/[0-9] e viene fatto
- * il replate del primo numero in base a quanti elementi sono stati trovati (valore passato per parametro)
- */
-function update_counter(id, new_value) {
-    new_text = $('#' + id).html();
-
-    // Estraggo parte numerica (formato x/total)
-    pattern = /([^0-9]+)([0-9]+)\/([0-9]+)([^0-9]+)/;
-    new_text = new_text.replace(pattern, "$1" + new_value + "/$3$4");
-
-    // Estraggo totale (parte numerica dopo lo slash /)
-    matches = pattern.exec(new_text);
-    total = matches[3];
-
-    $('#' + id).html(new_text);
-
-    if (new_value == total) {
-        $('#' + id).removeClass('btn-warning').removeClass('btn-danger').addClass('btn-success');
-    } else if (new_value == 0) {
-        $('#' + id).removeClass('btn-warning').removeClass('btn-success').addClass('btn-danger');
-    } else {
-        $('#' + id).removeClass('btn-success').removeClass('btn-danger').addClass('btn-warning');
-    }
-}
-
 function setContrast(backgroundcolor) {
     var rgb = [];
     var bg = String(backgroundcolor);
@@ -219,9 +208,7 @@ function message(element) {
         confirmButtonText: button,
         confirmButtonClass: btn_class,
         onOpen: function () {
-            start_superselect();
-            start_inputmask();
-            start_datepickers();
+            restart_inputs();
         },
         preConfirm: function () {
             $form = $('#swal-form');
@@ -450,8 +437,10 @@ function prepareForm(form) {
     }
 }
 
+/**
+ * Visualizzazione dei messaggi attivi tramite toastr.
+ */
 function renderMessages() {
-    // Visualizzazione messaggi
     $.ajax({
         url: globals.rootdir + '/ajax.php',
         type: 'get',
@@ -504,14 +493,17 @@ function restart_inputs() {
     start_datepickers();
     start_inputmask();
 
+    initNumbers();
     start_superselect();
 
     // Autosize per le textarea
     autosize($('.autosize'));
 }
 
+/**
+ * Messaggio di avviso salvataggio a comparsa sulla destra solo nella versione a desktop intero
+ */
 function alertPush() {
-    // Messaggio di avviso salvataggio a comparsa sulla destra solo nella versione a desktop intero
     if ($(window).width() > 1023) {
         var i = 0;
 
@@ -541,6 +533,13 @@ function alertPush() {
     });
 }
 
+/**
+ * 
+ * @param button
+ * @param form
+ * @param data
+ * @returns {Promise<unknown>}
+ */
 function salvaForm(button, form, data = {}) {
     return new Promise(function (resolve, reject) {
         // Caricamento visibile nel pulsante

assets/src/js/functions/numbers.js

@@ -0,0 +1,30 @@
+function initNumbers() {
+    $('.decimal-number').not('.bound').each(function () {
+        let $this = $(this);
+
+        let min = $this.attr('min-value') ? $this.attr('min-value') : "-10000000000000";
+        let max = $this.attr('max-value') ? $this.attr('max-value') : "10000000000000";
+
+        let decimals = $this.attr('decimals') ? $this.attr('decimals') : globals.cifre_decimali;
+
+        let autonumeric = new AutoNumeric(this, {
+            caretPositionOnFocus: "decimalLeft",
+            allowDecimalPadding: true,
+            currencySymbolPlacement: "s",
+            negativePositiveSignPlacement: "p",
+            decimalCharacter: globals.decimals,
+            decimalCharacterAlternative: ".",
+            digitGroupSeparator: globals.thousands,
+            emptyInputBehavior: "zero",
+            modifyValueOnWheel: false,
+            outputFormat: "string",
+            unformatOnSubmit: true,
+            watchExternalChanges: true,
+            minimumValue: min,
+            maximumValue: max,
+            decimalPlaces: decimals,
+        });
+
+        $this.data("autonumeric", autonumeric);
+    }).addClass('bound');
+}

gulpfile.js

@@ -76,6 +76,7 @@ const JS = gulp.parallel(() => {
         'datatables.net-scroller/js/dataTables.scroller.js',
         'datatables.net-select/js/dataTables.select.js',
         'dropzone/dist/dropzone.js',
+        'autonumeric/dist/autoNumeric.min.js',
         'eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js',
         'fullcalendar/dist/fullcalendar.js',
         'geocomplete/jquery.geocomplete.js',

modules/impianti/modutil.php

@@ -1,18 +1,21 @@
 <?php
 
+use Util\Ini;
+
 include_once __DIR__.'/../../core.php';
 
 function crea_form_componente($contenuto)
 {
-    $fields = \Util\Ini::getFields($contenuto);
+    $fields = Ini::getFields($contenuto);
     $title = array_shift($fields);
 
     foreach ($fields as $key => $value) {
         $fields[$key] = '<div class="col-md-4">'.$value.'</div>';
     }
 
-    echo $title;
-    echo '<div class="row">';
-    echo PHP_EOL.implode(PHP_EOL, $fields).PHP_EOL.'<script>start_inputmask( "#info_componente" );</script>';
-    echo '</div>';
+    echo $title.'
+    <div class="row">
+        '.implode(PHP_EOL, $fields).'
+        <script>restart_inputs()</script>
+    </div>';
 }

package.json

@@ -3,6 +3,7 @@
     "main": "gulpfile.js",
     "dependencies": {
         "admin-lte": "^2.4.0",
+        "autonumeric": "^4.6.0",
         "autosize": "^3.0.21",
         "bootstrap": "^3.3.7",
         "bootstrap-colorpicker": "2.5.1",

src/HTMLBuilder/Handler/DefaultHandler.php

@@ -218,7 +218,7 @@ class DefaultHandler implements HandlerInterface
      */
     protected function number(&$values, &$extras)
     {
-        $values['class'][] = 'inputmask-decimal';
+        $values['class'][] = 'decimal-number';
 
         $values['value'] = !empty($values['value']) ? $values['value'] : 0;