Fire real click/change events when toggling checkboxes via the context menu

desktop/common/js/utils.js

@@ -1130,7 +1130,7 @@ jeedomUtils.initTableSorter = function(filter) {
   }).css('width', '')
 }
 
-jeedomUtils.initDataTables = function(_selector, _paging, _searching,_init) {
+jeedomUtils.initDataTables = function(_selector, _paging, _searching, _init) {
   if (!isset(_selector)) _selector = 'body'
   if (!_paging) _paging = false
   if (!_searching) _searching = false
@@ -1148,72 +1148,72 @@ jeedomUtils.initDataTables = function(_selector, _paging, _searching,_init) {
 
 jeedomUtils.resizableTable = function(table) {
   var row = table.getElementsByTagName('tr')[0],
-  cols = row ? row.children : undefined;
-  if (!cols) return;
-  table.style.overflow = 'hidden';
-  var tableHeight = table.offsetHeight;
-  for (var i=0;i<cols.length;i++){
-   var div = createDiv(tableHeight);
-   cols[i].appendChild(div);
-   cols[i].style.position = 'relative';
-   setListeners(div);
-  }
-  function setListeners(div){
-   var pageX,curCol,nxtCol,curColWidth,nxtColWidth;
-   div.addEventListener('mousedown', function (e) {
-    curCol = e.target.parentElement;
-    nxtCol = curCol.nextElementSibling;
-     pageX = e.pageX;
-    var padding = paddingDiff(curCol);
-    curColWidth = curCol.offsetWidth - padding;
-    if (nxtCol)
-     nxtColWidth = nxtCol.offsetWidth - padding;
-   });
-   div.addEventListener('mouseover', function (e) {
-    e.target.style.borderRight = '2px solid var(--logo-primary-color)';
-   })
-   div.addEventListener('mouseout', function (e) {
-    e.target.style.borderRight = '';
-   })
-   document.addEventListener('mousemove', function (e) {
-    if (curCol) {
-     var diffX = e.pageX - pageX;
-     if (nxtCol)
-      nxtCol.style.width = (nxtColWidth - (diffX))+'px';
-     curCol.style.width = (curColWidth + diffX)+'px';
-    }
-   });
-    document.addEventListener('mouseup', function (e) {
-    curCol = undefined;
-    nxtCol = undefined;
-    pageX = undefined;
-    nxtColWidth = undefined;
-    curColWidth = undefined
-   });
-  }
-  function createDiv(height){
-   var div = document.createElement('div');
-   div.style.top = 0;
-   div.style.right = 0;
-   div.style.width = '5px';
-   div.style.position = 'absolute';
-   div.style.cursor = 'col-resize';
-   div.style.userSelect = 'none';
-   div.style.height = height + 'px';
-   return div;
-  }
-  function paddingDiff(col){
-   if (getStyleVal(col,'box-sizing') == 'border-box'){
-    return 0;
-   }
-   var padLeft = getStyleVal(col,'padding-left');
-   var padRight = getStyleVal(col,'padding-right');
-   return (parseInt(padLeft) + parseInt(padRight));
-  }
-  function getStyleVal(elm,css){
-   return (window.getComputedStyle(elm, null).getPropertyValue(css))
-  }
-};
+    cols = row ? row.children : undefined
+  if (!cols) return
+  table.style.overflow = 'hidden'
+  var tableHeight = table.offsetHeight
+  for (var i = 0; i < cols.length; i++) {
+    var div = createDiv(tableHeight)
+    cols[i].appendChild(div)
+    cols[i].style.position = 'relative'
+    setListeners(div)
+  }
+  function setListeners(div) {
+    var pageX, curCol, nxtCol, curColWidth, nxtColWidth
+    div.addEventListener('mousedown', function(e) {
+      curCol = e.target.parentElement
+      nxtCol = curCol.nextElementSibling
+      pageX = e.pageX
+      var padding = paddingDiff(curCol)
+      curColWidth = curCol.offsetWidth - padding
+      if (nxtCol)
+        nxtColWidth = nxtCol.offsetWidth - padding
+    })
+    div.addEventListener('mouseover', function(e) {
+      e.target.style.borderRight = '2px solid var(--logo-primary-color)'
+    })
+    div.addEventListener('mouseout', function(e) {
+      e.target.style.borderRight = ''
+    })
+    document.addEventListener('mousemove', function(e) {
+      if (curCol) {
+        var diffX = e.pageX - pageX
+        if (nxtCol)
+          nxtCol.style.width = (nxtColWidth - (diffX)) + 'px'
+        curCol.style.width = (curColWidth + diffX) + 'px'
+      }
+    })
+    document.addEventListener('mouseup', function(e) {
+      curCol = undefined
+      nxtCol = undefined
+      pageX = undefined
+      nxtColWidth = undefined
+      curColWidth = undefined
+    })
+  }
+  function createDiv(height) {
+    var div = document.createElement('div')
+    div.style.top = 0
+    div.style.right = 0
+    div.style.width = '5px'
+    div.style.position = 'absolute'
+    div.style.cursor = 'col-resize'
+    div.style.userSelect = 'none'
+    div.style.height = height + 'px'
+    return div
+  }
+  function paddingDiff(col) {
+    if (getStyleVal(col, 'box-sizing') == 'border-box') {
+      return 0
+    }
+    var padLeft = getStyleVal(col, 'padding-left')
+    var padRight = getStyleVal(col, 'padding-right')
+    return (parseInt(padLeft) + parseInt(padRight))
+  }
+  function getStyleVal(elm, css) {
+    return (window.getComputedStyle(elm, null).getPropertyValue(css))
+  }
+}
 
 
 jeedomUtils.initHelp = function() {
@@ -1681,9 +1681,9 @@ jeedomUtils.chooseIcon = function(_callback, _params) {
             if (icon == undefined) {
               icon = ''
             }
-            if(icon.indexOf('<img') === 0){
+            if (icon.indexOf('<img') === 0) {
               let height = document.getElementById('mod_selectIcon').querySelector('.iconSelected .iconSel img').naturalHeight
-              icon = icon.replace(/\<img/g, "<img style=\"height:"+height+"px\" ")
+              icon = icon.replace(/\<img/g, "<img style=\"height:" + height + "px\" ")
             }
             icon = icon.replace(/"/g, "'")
             _callback(icon)
@@ -1752,26 +1752,14 @@ jeedomUtils.cleanModals = function(_modals = '') {
 }
 
 //Context menu on checkbox
-jeedomUtils.setCheckboxStateByType = function(_type, _state, _callback) {
+jeedomUtils.setCheckboxStateByType = function(_type, _state) {
   if (!isset(_type)) return false
   if (!isset(_state)) _state = -1
   var checkboxes = document.querySelectorAll(_type)
   if (checkboxes == null) return
-  var isCallback = (isset(_callback) && typeof _callback === 'function') ? true : false
-  var execCallback = false
   checkboxes.forEach(function(checkbox) {
-    execCallback = false
-    if (_state == -1) {
-      checkbox.checked = !checkbox.checked
-      execCallback = true
-    } else {
-      if (checkbox.checked != _state) {
-        checkbox.checked = _state
-        execCallback = true
-      }
-    }
-    if (isCallback && execCallback) {
-      _callback(checkbox)
+    if (_state == -1 || checkbox.checked != _state) {
+      checkbox.click()
     }
   })
 }
@@ -1791,7 +1779,7 @@ jeedomUtils.getElementType = function(_el) {
   }
   return thisType
 }
-jeedomUtils.setCheckContextMenu = function(_callback) {
+jeedomUtils.setCheckContextMenu = function() {
   let ctxSelector = 'input[type="checkbox"].checkContext, input[type="radio"].checkContext'
   try {
     document.querySelector('.contextmenu-checkbox')._jeeCtxMenu.destroy()
@@ -1807,36 +1795,33 @@ jeedomUtils.setCheckContextMenu = function(_callback) {
       all: {
         name: "{{Sélectionner tout}}",
         callback: function(key, opt) {
-          let thisType = jeedomUtils.getElementType(opt.trigger)
-          jeedomUtils.setCheckboxStateByType(thisType, 1, _callback)
+          jeedomUtils.setCheckboxStateByType(jeedomUtils.getElementType(opt.trigger), 1)
         }
       },
       none: {
         name: "{{Désélectionner tout}}",
         callback: function(key, opt) {
-          let thisType = jeedomUtils.getElementType(opt.trigger)
-          jeedomUtils.setCheckboxStateByType(thisType, 0, _callback)
+          jeedomUtils.setCheckboxStateByType(jeedomUtils.getElementType(opt.trigger), 0)
         }
       },
       invert: {
         name: "{{Inverser la sélection}}",
         callback: function(key, opt) {
-          let thisType = jeedomUtils.getElementType(opt.trigger)
-          jeedomUtils.setCheckboxStateByType(thisType, -1, _callback)
+          jeedomUtils.setCheckboxStateByType(jeedomUtils.getElementType(opt.trigger), -1)
         }
       }
     }
   })
 }
 
 jeedomUtils.readableFileSize = function(size) {
-  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-  let i = 0;
+  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+  let i = 0
   while (size >= 1024 && i < units.length - 1) {
-      size /= 1024;
-      ++i;
+    size /= 1024
+    ++i
   }
-  return size.toFixed(1) + ' ' + units[i];
+  return size.toFixed(1) + ' ' + units[i]
 }
 
 //Need jQuery and jQuery UI plugin loaded:

desktop/js/display.js

@@ -27,10 +27,7 @@ if (!jeeFrontEnd.display) {
       this.tableRemoveHistory = document.getElementById('table_removeHistory')
 
       this.setSortables()
-      var checkContextMenuCallback = function(_el) {
-        _el.triggerEvent('change')
-      }
-      jeedomUtils.setCheckContextMenu(checkContextMenuCallback)
+      jeedomUtils.setCheckContextMenu()
     },
     setSortables: function() {
       //Accordion set objects order: