Merge pull request jeedom#2241 from BadWolf42/update-icon-selector

Update icon selector (fixes)
BadWolf42 · Jul 10, 2023 · 138d560 · 138d560
2 parents 1b4403a + 1656400
commit 138d560
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 32 deletions.
diff --git a/desktop/js/scenario.js b/desktop/js/scenario.js
@@ -2049,7 +2049,6 @@ document.getElementById('generaltab').addEventListener('click', function(event)
     var _icon = false
     if (document.querySelector('div[data-l2key="icon"] > i') != null) {
       _icon = document.querySelector('div[data-l2key="icon"] > i').getAttribute('class')
-      _icon = '.' + _icon.replace(' ', '.')
     }
     jeedomUtils.chooseIcon(function(_icon) {
       document.querySelector('.scenarioAttr[data-l1key="display"][data-l2key="icon"]').innerHTML = _icon

diff --git a/desktop/js/widgets.js b/desktop/js/widgets.js
@@ -699,21 +699,23 @@ document.getElementById('div_conf').addEventListener('click', function(event) {
   }
 
   if (_target = event.target.closest('#div_templateReplace .chooseIcon')) {
+    var params = {img: true};
+    let input = _target.closest('div').querySelector('input').value;
+    if (input.startsWith('<i class=')) params.icon = input.substring(10, input.length - 6);
     jeedomUtils.chooseIcon(function(_icon) {
       _target.closest('.form-group').querySelector('.widgetsAttr[data-l1key="replace"]').jeeValue(_icon)
-    }, {
-      img: true
-    })
+    }, params)
     jeeFrontEnd.modifyWithoutSave = true
     return
   }
 
   if (_target = event.target.closest('#div_templateTest .chooseIcon')) {
+    var params = {img: true};
+    let input = _target.closest('div').querySelector('input').value;
+    if (input.startsWith('<i class=')) params.icon = input.substring(10, input.length - 6);
     jeedomUtils.chooseIcon(function(_icon) {
       _target.closest('.input-group').querySelector('.testAttr').jeeValue(_icon)
-    }, {
-      img: true
-    })
+    }, params)
     jeeFrontEnd.modifyWithoutSave = true
     return
   }

diff --git a/desktop/modal/cmd.configure.php b/desktop/modal/cmd.configure.php
@@ -1222,10 +1222,13 @@
     document.getElementById('cmd_information')?.addEventListener('click', function(event) {
       var _target = null
       if (_target = event.target.closest('#bt_cmdConfigureChooseIcon')) {
-        var displayIconParent = _target.closest('.displayIconParent')
+        let displayIconParent = _target.closest('.displayIconParent')
+        let icon = displayIconParent.querySelector('[data-l2key="icon"] > i')
+        let params = {}
+        if (icon) params.icon = icon.attributes.class.value
         jeedomUtils.chooseIcon(function(_icon) {
           displayIconParent.querySelector('.cmdAttr[data-l1key="display"][data-l2key="icon"]').empty().innerHTML = _icon
-        })
+        }, params)
         return
       }
 

diff --git a/desktop/modal/icon.selector.php b/desktop/modal/icon.selector.php
@@ -33,7 +33,7 @@
 $objectId = init('object_id');
 if (!$objectId) {
   //Build $icon_Struct for js tree:
-  $scanPaths = array(__DIR__ . '/../../core/css/icon', __DIR__ . '/../../data/fonts');
+  $scanPaths = (init('path', '') != '') ? [__DIR__ . '/../../' . init('path')] : array(__DIR__ . '/../../core/css/icon', __DIR__ . '/../../data/fonts');
   foreach ($scanPaths as $root) {
     foreach (ls($root, '*', false, array('folders')) as $dir) {
       if (!file_exists($root . '/' . $dir . 'style.css') || !file_exists($root . '/' . $dir . 'fonts/' . substr($dir, 0, -1) . '.ttf')) {
@@ -179,10 +179,14 @@
 
       if (jeephp2js.md_iconSelector_selectIcon != "0") { // Select current icon
         let icon = document.querySelector('#tabicon div.div_imageGallery span.iconSel > i.' + jeephp2js.md_iconSelector_selectIcon);
-        if (icon) icon.closest('div.divIconSel').addClass('iconSelected').scrollIntoView();
+        if (icon) icon.closest('div.divIconSel').addClass('iconSelected').scrollIntoView({block: "center"});
       } else { // Select first icon category
         document.querySelector('span.tj_description').click();
       }
+      if (jeephp2js.md_iconSelector_colorIcon != "0") { // Select current color
+        document.getElementById('sel_colorIcon').value = jeephp2js.md_iconSelector_colorIcon;
+        document.getElementById('sel_colorIcon').triggerEvent('change');
+      }
     },
     setModal: function() {
       var modal = jeeDialog.get('#sel_colorIcon', 'dialog')
@@ -256,26 +260,25 @@
       }
       document.querySelectorAll('div.divIconSel')?.seen(); // Speed up display
       this.icon_tree.reload()
-
+    },
+    iconTreeOnScroll: function() {
       var view = document.querySelector('#md_iconSelector .tab-content').getBoundingClientRect();
-      document.querySelector('#md_iconSelector .tab-content').addEventListener("scroll", function (event) {
-        var legends = document.querySelectorAll('#tabicon .imgContainer legend');
-        var i = 0;
-        while (i < legends.length && legends[i].getBoundingClientRect().bottom < view.top) {
-          document.querySelector('#treeFolder-icon .' + (legends[i].className)).parentNode.removeClass('selected');
-          i += 1;
-        }
-        if (i < legends.length && legends[i].getBoundingClientRect().bottom < view.bottom) { // In view
-          document.querySelector('#treeFolder-icon .' + (legends[i].className)).parentNode.addClass('selected');
-          i += 1;
-        } else { // Out of view, select last
-          document.querySelector('#treeFolder-icon .' + (legends[i - 1].className)).parentNode.addClass('selected');
-        }
-        while (i < legends.length) {
-          document.querySelector('#treeFolder-icon .' + (legends[i].className)).parentNode.removeClass('selected');
-          i += 1;
-        }
-      });
+      var legends = document.querySelectorAll('#tabicon .imgContainer legend');
+      var i = 0;
+      while (i < legends.length && legends[i].getBoundingClientRect().bottom < view.top) {
+        document.querySelector('#treeFolder-icon .' + (legends[i].className)).parentNode.removeClass('selected');
+        i += 1;
+      }
+      if (i < legends.length && legends[i].getBoundingClientRect().bottom < view.bottom) { // In view
+        document.querySelector('#treeFolder-icon .' + (legends[i].className)).parentNode.addClass('selected');
+        i += 1;
+      } else { // Out of view, select last
+        document.querySelector('#treeFolder-icon .' + (legends[i - 1].className)).parentNode.addClass('selected');
+      }
+      while (i < legends.length) {
+        document.querySelector('#treeFolder-icon .' + (legends[i].className)).parentNode.removeClass('selected');
+        i += 1;
+      }
     },
     setUserImgTree: function() {
       this.userImg_root = new TreeNode('icons_root', { expanded: true })
@@ -569,9 +572,9 @@
       while (k != null && !k.isVisible() && k.tagName == 'DIV') {
         k = k.nextSibling;
       }
-      if (k == null) return;
-      (k.tagName == 'LEGEND') ? _item.unseen() : _item.seen();
+      (k == null || k.tagName == 'LEGEND') ? _item.unseen() : _item.seen();
     });
+    jeeFrontEnd.md_iconSelector.iconTreeOnScroll();
   })
   document.getElementById('bt_resetIconSelectorSearch').addEventListener('click', function(event) {
     document.getElementById('in_searchIconSelector').jeeValue('').triggerEvent('keyup')
@@ -583,6 +586,8 @@
 
   /*Events delegations
   */
+  document.querySelector('#md_iconSelector .tab-content').addEventListener("scroll", jeeFrontEnd.md_iconSelector.iconTreeOnScroll);
+
   document.getElementById('md_iconSelector').addEventListener('click', function(event) {
     var _target = null
     if (_target = event.target.closest('a.bt_removeImg')) {