ver. 0.274 - ShopProduct mass_edit + tree UI cleanup

admin/templates/pages/pages-list.php

@@ -15,7 +15,9 @@ foreach ($menus as $menu):
     <ol class="sortable" id="sortable_<?= $menuId; ?>" menu-id="<?= $menuId; ?>">
       <li id="list_<?= $menuId; ?>" class="menu_<?= $menuId; ?>" menu="<?= $menuId; ?>">
         <div class="context_0 content content_menu">
-          <span class="disclose"><span></span></span>
+          <button type="button" class="disclose layout-tree-toggle" aria-expanded="false" title="Rozwin / zwin">
+            <i class="fa fa-caret-right"></i>
+          </button>
           <?php if ($menuStatus !== 1): ?><i class="fa fa-ban fa-lg text-danger" title="Menu nieaktywne"></i><?php endif; ?>
           <b>Menu: <?= htmlspecialchars($menuName, ENT_QUOTES, 'UTF-8'); ?></b>
           <div class="btn-group ml20 pull-right">
@@ -61,6 +63,31 @@ echo $grid->draw();
 ?>
 <script type="text/javascript" src="/libraries/jquery-nested-sortable/jquery.mjs.nestedSortable.js"></script>
 <style type="text/css">
+  .layout-tree-toggle {
+    width: 18px;
+    height: 18px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    margin-right: 4px;
+    color: #666;
+    cursor: pointer;
+  }
+
+  .layout-tree-toggle:focus,
+  .layout-tree-toggle:active,
+  .layout-tree-toggle:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+
+  li.sort-expanded > div .layout-tree-toggle i {
+    transform: rotate(90deg);
+  }
+
   .jconfirm.table-list-confirm-dialog .jconfirm-row {
     min-height: 100vh;
     display: flex;
@@ -86,6 +113,28 @@ echo $grid->draw();
   var cookieMenus = <?= json_encode($cookieMenus, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); ?>;
 
   $(document).ready(function() {
+    function refreshTreeDisclosureState() {
+      $('ol.sortable li').each(function() {
+        var $li = $(this);
+        var hasChildren = $li.children('ol').children('li').length > 0;
+        var $disclose = $li.children('div').children('.disclose');
+
+        if (hasChildren) {
+          $li.removeClass('sort-leaf');
+          if (!$li.hasClass('sort-collapsed') && !$li.hasClass('sort-expanded')) {
+            $li.addClass('sort-collapsed');
+          }
+          $li.addClass('sort-branch');
+          $disclose.attr('aria-expanded', $li.hasClass('sort-expanded') ? 'true' : 'false');
+          $disclose.show();
+        } else {
+          $li.removeClass('sort-branch sort-collapsed sort-expanded').addClass('sort-leaf');
+          $disclose.attr('aria-expanded', 'false');
+          $disclose.hide();
+        }
+      });
+    }
+
     function confirmDialog(message, onConfirm) {
       if (typeof $.confirm === 'function') {
         $.confirm({
@@ -167,12 +216,22 @@ echo $grid->draw();
       isTree: true,
       expandOnHover: 700,
       stop: function() {
+        refreshTreeDisclosureState();
         save_pages_order();
       }
     });
 
+    refreshTreeDisclosureState();
+
     $('.disclose').on('click', function() {
-      $(this).closest('li').toggleClass('sort-collapsed').toggleClass('sort-expanded');
+      var $li = $(this).closest('li');
+      if (!$li.hasClass('sort-branch')) {
+        return;
+      }
+
+      $li.toggleClass('sort-collapsed').toggleClass('sort-expanded');
+      $(this).attr('aria-expanded', $li.hasClass('sort-expanded') ? 'true' : 'false');
+      this.blur();
     });
 
     $('.sortable *').mousedown(function() {
@@ -205,13 +264,13 @@ echo $grid->draw();
 
     Object.keys(cookiePages || {}).forEach(function(key) {
       if (String(cookiePages[key]) === '1') {
-        $('.list_' + key).children('div').children('span.disclose').click();
+        $('.list_' + key).children('div').children('.disclose').click();
       }
     });
 
     Object.keys(cookieMenus || {}).forEach(function(key) {
       if (String(cookieMenus[key]) === '1') {
-        $('.menu_' + key).children('div').children('span.disclose').click();
+        $('.menu_' + key).children('div').children('.disclose').click();
       }
     });
   });