grayishスキンのアップデート v1.0.12

xserver-inc · Apr 19, 2024 · 7782f1d · 7782f1d
1 parent 6e6b1be
commit 7782f1d
Show file tree

Hide file tree

Showing 3 changed files with 340 additions and 87 deletions.
diff --git a/skins/skin-grayish-topfull/functions.php b/skins/skin-grayish-topfull/functions.php
@@ -1994,7 +1994,7 @@ function skin_grayish_mobile_footerbg()
         --mobileFooterBgColor: <?php echo $style_rgba ?>;
       }
     </style>
-<?php
+    <?php
 
   }
 endif;
@@ -2146,3 +2146,31 @@ function wp_enqueue_scrollhint_skinadd()
     return $content;
   }
 });
+
+// mobile-header-menu-buttons 
+add_action(
+  "cocoon_part_after__tmp/mobile-header-menu-buttons",
+  "mobile_header_buttons_set"
+);
+
+if (!function_exists('mobile_header_buttons_set')) :
+  function mobile_header_buttons_set()
+  {
+    if (is_front_top_page()) {
+
+      // frontのみ　JSを実行
+    ?>
+      <script>
+        const mobileHeaderMenuChild_top = document.querySelectorAll('.skin-grayish.front-top-page .mobile-header-menu-buttons > li:not(:first-child)');
+        if (mobileHeaderMenuChild_remove_flg === 'on') {
+          if (mobileHeaderMenuChild_top.length > 0) {
+            mobileHeaderMenuChild_top.forEach(liItem => {
+              liItem.remove();
+            });
+          }
+        }
+      </script>
+<?php
+    }
+  }
+endif;
diff --git a/skins/skin-grayish-topfull/javascript.js b/skins/skin-grayish-topfull/javascript.js
@@ -181,77 +181,6 @@ if (footerOffItem) {
   footerOffChange(mediaQueryList1400);
 }
 
-// ---------------------------------------------
-// 画面幅1023px以下のモバイルヘッダーメニュー
-// カスタマイザーでFrontのみメニューボタンのみにするとき、
-// その他の子要素を削除（検索ボタン対策）
-// ---------------------------------------------
-const mobileHeaderMenu = document.querySelector('.skin-grayish .mobile-header-menu-buttons');
-
-const mobileHeaderMenuFront = document.querySelector('.skin-grayish.front-top-page .mobile-header-menu-buttons');
-// to functions.php
-const mobileHeaderMenuChild = document.querySelectorAll('.skin-grayish.front-top-page .mobile-header-menu-buttons > li:not(:first-child)');
-
-// for front-page
-const mobileHeaderMenu_onlymenu = () => {
-  if (mobileHeaderMenuChild_remove_flg === 'on') {
-    mobileHeaderMenuChild.forEach(liItem => {
-      liItem.remove();
-    });
-    document.documentElement.style.setProperty('--mobileHeaderMenuBtn_width', `70px`);
-
-  } else if (mobileHeaderMenuChild_remove_flg === 'off') {
-    if (mobileHeaderMenuChild.length < 1) {
-      document.documentElement.style.setProperty('--mobileHeaderMenuOtherBtn_width', `70px`);
-    } else {
-      document.documentElement.style.setProperty('--mobileHeaderMenuOtherBtn_width', `100%`);
-    }
-  }
-};
-if (mobileHeaderMenuFront) {
-  mobileHeaderMenu_onlymenu();
-}
-// for other-page menu-num
-const mobileHeaderMenuOther = document.querySelector('.skin-grayish:not(.front-top-page) .mobile-header-menu-buttons');
-const mobileHeaderMenuChildOther = document.querySelectorAll('.skin-grayish:not(.front-top-page) .mobile-header-menu-buttons > li');
-const mobileHeaderMenuChildOther_num = mobileHeaderMenuChildOther.length;
-
-const mobileHeaderMenuOther_onlyone = () => {
-  if (mobileHeaderMenuOther) {
-    if (mobileHeaderMenuChildOther_num < 2) {
-      document.documentElement.style.setProperty('--mobileHeaderMenuOtherBtn_width', `70px`);
-    } else {
-      document.documentElement.style.setProperty('--mobileHeaderMenuOtherBtn_width', `100%`);
-    }
-  }
-};
-if (mobileHeaderMenuOther) {
-  mobileHeaderMenuOther_onlyone();
-}
-// ---------------------------------------------
-// 画面幅1023px以下のモバイルヘッダーメニュー
-// メニューが一つだけの場合は左端に表示flex-start
-// 2つ以上はspace-aroundに変える（親テーマの設定）
-// ---------------------------------------------
-const mobileHeaderMenu_justifySet = () => {
-
-  if (mobileHeaderMenu) {
-    const mobileHeaderMenuCount = mobileHeaderMenu.childElementCount;
-
-    if (mobileHeaderMenuCount < 2) {
-      document.documentElement.style.setProperty('--mobileHeaderMenu_justifySet', `flex-start`);
-    } else {
-      document.documentElement.style.setProperty('--mobileHeaderMenu_justifySet', `space-around`);
-
-    }
-  } else { //モバイルメニューない時デフォルト
-    document.documentElement.style.setProperty('--mobileHeaderMenu_justifySet', `space-around`);
-  }
-
-};
-
-mobileHeaderMenu_justifySet();
-
 // ---------------------------------------------
 // breadcrumb 画面幅834px　〜　1400px以下
 // ---------------------------------------------
@@ -416,24 +345,33 @@ if (menuOpen) {
 const closeMenu = () => {
   menuContent.close();
 };
-menuClose.addEventListener("click", closeMenu);
-menuCloseBack.addEventListener("click", closeMenu);
-
-menuContent.addEventListener("close", async (e) => {
-  await waitDialogAnimation(e.target)
-  menuContent.style.display = "none";
-})
+if (menuClose) {
+  menuClose.addEventListener("click", closeMenu);
+}
+if (menuCloseBack) {
+  menuCloseBack.addEventListener("click", closeMenu);
+}
+if (menuContent) {
+  menuContent.addEventListener("close", async (e) => {
+    await waitDialogAnimation(e.target)
+    menuContent.style.display = "none";
+  })
+}
 
 const waitDialogAnimation = (dialog) => Promise.allSettled(
   Array.from(dialog.getAnimations()).map(animation => animation.finished)
 );
-menuContentSearch.addEventListener('click', (event) => {
-  event.stopPropagation();
-});
+if (menuContentSearch) {
+  menuContentSearch.addEventListener('click', (event) => {
+    event.stopPropagation();
+  });
+}
 
 mediaQueryList1023.addEventListener('change', (e) => {
   if (e.matches) {
     // 画面幅が1023px以下になったときにmenuContentを閉じる
-    menuContent.close();
+    if (menuContent) {
+      menuContent.close();
+    }
   }
 });