9.3.2 (#25)

- [Menu] Changed the ACF Style field from ButtonGroup to Checkbox - [Menu] Changed the mega menu class name for easier styling - [Menu] Added `h_menu_item` filter to change the markup of menu item's anchor
hrsetyono · Aug 14, 2022 · eb2b3ba · eb2b3ba
1 parent f823dbd
commit eb2b3ba
Show file tree

Hide file tree

Showing 10 changed files with 181 additions and 70 deletions.
diff --git a/dist/h-comment.asset.php b/dist/h-comment.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-polyfill'), 'version' => '0d7afdb25a3792ffb3acc3f15fcc2ca1');
+<?php return array('dependencies' => array('wp-polyfill'), 'version' => '3f9950ad03bf472fd0c2aab64f83c0d6');
diff --git a/dist/h-gutenberg.asset.php b/dist/h-gutenberg.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-polyfill'), 'version' => 'f99400b77890e6d4b2a82addacaa59af');
+<?php return array('dependencies' => array('wp-polyfill'), 'version' => 'c44c041231f027435c7c67afa5ab38c7');
diff --git a/dist/h-menu-admin.asset.php b/dist/h-menu-admin.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-polyfill'), 'version' => '21315ea9149889b027b3c9b8b1dbb72f');
+<?php return array('dependencies' => array('wp-polyfill'), 'version' => '1172b6b05d0c889d2d720446aaef14ce');
diff --git a/dist/h-menu-admin.css b/dist/h-menu-admin.css
diff --git a/edje-wp-library.php b/edje-wp-library.php
@@ -8,13 +8,13 @@
  * License: MIT
  * Author: Pixel Studio
  * Author URI: https://pixelstudio.id
- * Version: 9.3.1
+ * Version: 9.3.2
  */
 
 if (!defined('WPINC')) { die; } // exit if accessed directly
 
 // Constant
-define('H_VERSION', '9.3.1');
+define('H_VERSION', '9.3.2');
 define('H_BASE', basename(dirname(__FILE__)).'/'.basename(__FILE__));
 
 define('H_DIR', __DIR__); // for require

diff --git a/module-comment/src/h-comment.js b/module-comment/src/h-comment.js
@@ -1,5 +1,5 @@
 import hEditor from './h-editor';
-import './style.scss';
+import './h-comment.scss';
 
 /**
  * Create hEditor instance

diff --git a/module-menu/acf-json/group_62dccbc34b3e8.json b/module-menu/acf-json/group_62dccbc34b3e8.json
@@ -42,11 +42,46 @@
             "layout": "horizontal",
             "return_format": "value"
         },
+        {
+            "key": "field_62f5c35a93792",
+            "label": "Mega Menu Alignment",
+            "name": "mega_menu_alignment",
+            "type": "button_group",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_62dccbd8afe3e",
+                        "operator": "!=empty"
+                    },
+                    {
+                        "field": "field_62dccbd8afe3e",
+                        "operator": "!=",
+                        "value": "4"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "left": "Left",
+                "center": "Center",
+                "right": "Right"
+            },
+            "allow_null": 0,
+            "default_value": "center",
+            "layout": "horizontal",
+            "return_format": "value"
+        },
         {
             "key": "field_62dd53fa63c37",
             "label": "Style",
             "name": "style",
-            "type": "button_group",
+            "type": "checkbox",
             "instructions": "",
             "required": 0,
             "conditional_logic": 0,
@@ -60,10 +95,12 @@
                 "has-image": "Has Image",
                 "has-background": "Has Background"
             },
-            "allow_null": 1,
-            "default_value": "",
-            "layout": "horizontal",
-            "return_format": "value"
+            "allow_custom": 0,
+            "default_value": [],
+            "layout": "vertical",
+            "toggle": 0,
+            "return_format": "value",
+            "save_custom": 0
         },
         {
             "key": "field_62e0eebd17759",
@@ -91,11 +128,11 @@
             "esc_html": 0
         },
         {
-            "key": "field_62dd5661e8e5f",
-            "label": "",
-            "name": "",
-            "type": "message",
-            "instructions": "",
+            "key": "field_62f2680f48380",
+            "label": "Icon",
+            "name": "icon",
+            "type": "image",
+            "instructions": "<span class=\"dashicons dashicons-editor-expand\"><\/span> Max size: 100x100",
             "required": 0,
             "conditional_logic": [
                 [
@@ -111,9 +148,16 @@
                 "class": "",
                 "id": ""
             },
-            "message": "<span class=\"dashicons dashicons-editor-expand\"><\/span> Max size: 100x100",
-            "new_lines": "wpautop",
-            "esc_html": 0
+            "return_format": "array",
+            "preview_size": "thumbnail",
+            "library": "all",
+            "min_width": "",
+            "min_height": "",
+            "min_size": "",
+            "max_width": 100,
+            "max_height": 100,
+            "max_size": "",
+            "mime_types": ""
         },
         {
             "key": "field_62dcd8e12a22a",
@@ -123,13 +167,6 @@
             "instructions": "",
             "required": 0,
             "conditional_logic": [
-                [
-                    {
-                        "field": "field_62dd53fa63c37",
-                        "operator": "==",
-                        "value": "has-icon"
-                    }
-                ],
                 [
                     {
                         "field": "field_62dd53fa63c37",
@@ -197,7 +234,28 @@
             {
                 "param": "nav_menu_item",
                 "operator": "==",
-                "value": "all"
+                "value": "location\/top-menu-new"
+            }
+        ],
+        [
+            {
+                "param": "nav_menu_item",
+                "operator": "==",
+                "value": "location\/mega-menu-1"
+            }
+        ],
+        [
+            {
+                "param": "nav_menu_item",
+                "operator": "==",
+                "value": "location\/mega-menu-2"
+            }
+        ],
+        [
+            {
+                "param": "nav_menu_item",
+                "operator": "==",
+                "value": "location\/mega-menu-3"
             }
         ]
     ],
@@ -210,5 +268,5 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1659099462
+    "modified": 1660296979
 }
diff --git a/module-menu/menu-item.php b/module-menu/menu-item.php
@@ -15,18 +15,31 @@ function _h_mega_menu_classes($items) {
     // If parent item, check for mega menu ACF field
     if ($i->menu_item_parent === '0') {
       $columns = get_field('mega_menu', $i);
+      $alignment = get_field('mega_menu_alignment', $i);
 
       if ($columns) {
-        $i->classes[] = "h-mega-menu";
-        $i->classes[] = "h-mega-menu-$columns-columns";
+        $i->classes[] = "menu-item-has-mega-menu";
+        $i->classes[] = "has-{$columns}-columns";
+        $i->classes[] = "is-align-{$alignment}";
         $mega_menu_ids[] = $i->ID;
       }
 
       continue;
     }
     // Add special class if it's under mega menu
     elseif (in_array($i->menu_item_parent, $mega_menu_ids)) {
-      $i->classes[] = 'h-mega-menu__column';
+      $i->classes[] = 'mega-menu__column';
+
+      // remove unnecessary class
+      $key = array_search('menu-item', $i->classes);
+      $key2 = array_search('menu-item-has-children', $i->classes);
+
+      if ($key) {
+        $i->classes[$key] = '';
+      }
+      if ($key2) {
+        $i->classes[$key2] = '';
+      }
     }
   }
 
@@ -54,28 +67,37 @@ function _h_menu_item_classes($items) {
 
     // If title is "-", add empty class so it can be hidden
     if ($i->title === '-') {
+      $i->title = '&nbsp;';
       $i->classes[] = 'menu-item-empty-title';
     }
 
-    $is_child_item = $i->menu_item_parent !== '0' && $i->classes[1] == 'menu-item';
-    // Change the "menu-item" class into "submenu-item" if it's a child item
-    if ($is_child_item) {
-      $i->classes[1] = 'submenu-item';
+    // If a child item, change the "menu-item" class into "submenu-item"
+    $is_child = $i->menu_item_parent !== '0' && $i->classes[1] === 'menu-item';
+    if ($is_child) {
+      $key = array_search('menu-item', $i->classes);
+
+      if ($key) {
+        $i->classes[$key] = 'submenu-item';
+      }
     }
 
     // Add style as extra class
-    $style = get_field('style', $i);
-    if ($style) {
-      $i->classes[] = "menu-item-$style";
-    }
+    $styles = get_field('style', $i);
+
+    if (is_array($styles)) {
+      foreach ($styles as $s) {
+        $i->classes[] = "menu-item-$s";
+      }
 
-    // Check for background
-    if (in_array($style, ['has-background'])) {
-      $bg_color = get_field('background_color', $i);
-      $i->classes[] = "menu-background-{$bg_color}";
+      // Check for background
+      if (in_array('has-background', $styles)) {
+        $bg_color = get_field('background_color', $i);
+        $i->classes[] = "menu-background-{$bg_color}";
+      }
     }
 
-    $i->title = _h_render_menu_item($i, $style);
+    // Render it
+    $i->title = _h_render_menu_item($i, $styles);
   }
 
   return $items;
@@ -85,34 +107,49 @@ function _h_menu_item_classes($items) {
  * Change the markup of the menu item
  * 
  * @param Object $i - menu item object
- * @param string $style
+ * @param array $styles
  * 
  * @return string - the HTML markup of the menu item
  */
-function _h_render_menu_item($i, $style) {
+function _h_render_menu_item($i, $styles) {
   $title = $i->title;
   $description = H::markdown($i->post_content, true);
-  $image_src = '';
-  $image_alt = '';
-  $bg_color = '';
-
-  // Check for image
-  if (in_array($style, ['has-image', 'has-icon'])) {
-    $image = get_field('image', $i);
-
-    if ($image) {
-      $image_src = $style === 'has-image'
-        ? $image['sizes']['medium']
-        : $image['sizes']['thumbnail'];
-      $image_alt = $image['alt'];
+  $image_tag = '';
+
+  if (is_array($styles)) {
+    // Check for icon
+    if (in_array('has-icon', $styles)) {
+      $icon = get_field('icon', $i);
+
+      if ($icon) {
+        $src = $icon['sizes']['thumbnail'];
+        $image_tag = "<img src='{$src}'>";
+      }
+    }
+
+    // Check for image
+    if (in_array('has-image', $styles)) {
+      $image = get_field('image', $i);
+      if ($image) {
+        $src = $image['sizes']['medium'];
+        $alt = $image['alt'];
+        $image_tag = "<img src='{$src}' alt='{$alt}'>";
+      }
     }
   }
 
-  ob_start(); ?>
-    <?php if ($image_src): ?>
-      <img src="<?= $image_src ?>" alt="<?= $image_alt ?>">
-    <?php endif; ?>
+  $custom_render = apply_filters('h_menu_item', '', [
+    'title' => $title,
+    'description' => $description,
+    'image_tag' => $image_tag
+  ]);
+
+  if ($custom_render) {
+    return $custom_render;
+  }
 
+  ob_start(); ?>
+    <?= $image_tag ?>
     <?php if ($description): ?>
       <dt>
         <?= $title ?>

diff --git a/module-menu/src/h-menu-admin.sass b/module-menu/src/h-menu-admin.sass
@@ -32,22 +32,23 @@
   .menu-item-depth-1.menu-item-under-mega-menu &
     display: block
 
+// Hide "has image" and "has background" in parent item
 .menu-item-depth-0
   .acf-field[data-name="style"]
-    label:nth-child(2),
-    label:nth-child(3)
+    li:nth-child(2),
+    li:nth-child(3)
       display: none
 
-// Hide "has image" option in style
+// Hide "has image" if not in mega menu
 .menu-item-depth-1,
 .menu-item-depth-2:not(.menu-item-under-mega-menu)
-  .acf-field[data-name="style"] label:nth-child(2)
+  .acf-field[data-name="style"] li:nth-child(2)
     display: none
 
-// Hide "has background" option in style
+// Hide "has background" if not in mega menu
 .menu-item-depth-2,
 .menu-item-depth-1:not(.menu-item-under-mega-menu)
-  .acf-field[data-name="style"] label:nth-child(3)
+  .acf-field[data-name="style"] li:nth-child(3)
     display: none
 
 // Change the label for mega menu