add reference to container

src/client/js/components/PageAccessoriesModal.jsx

@@ -28,60 +28,61 @@ const PageAccessoriesModal = (props) => {
     props.onClose();
   }
 
-  const menu = document.getElementsByClassName('nav'); // 上部に持ってきた
-  // Values are set.
-
-  // Might make this dynamic for px, %, pt, em
-  function getPercentage(min, max) {
-    return min / max * 100;
-  }
-
-  // Not using reduce, because IE8 doesn't supprt it
-  function getArraySum(arr) {
-    let sum = 0;
-    [].forEach.call(arr, (el, index) => {
-      sum += el;
-    });
-    return sum;
-  }
-
-  function navSlider(menu, callback) {
-    const menuWidth = menu.offsetWidth;
-    // We only want the <li> </li> tags
-    const navTabs = document.querySelectorAll('li.nav-link');
-    console.log(navTabs);
-
-    if (menu.length > 0) {
-      const marginLeft = [];
-      // Loop through nav children i.e li
-      [].forEach.call(navTabs, (el, index) => {
-        // Dynamic width/margin calculation for hr
-        const width = getPercentage(el.offsetWidth, menuWidth);
-        let tempMarginLeft = 0;
-        // We don't want to modify first elements positioning
-        if (index !== 0) {
-          tempMarginLeft = getArraySum(marginLeft);
-        }
-        // Set mouse event  hover/click
-        callback(el, width, tempMarginLeft);
-        /* We store it in array because the later accumulated value is used for positioning */
-        marginLeft.push(width);
-      });
-    }
-  }
-
-  if (menu) {
-    // CLICK
-    const menuSliderClick = document.getElementById('nav_slide_click');
-    if (menuSliderClick) {
-      navSlider(menu[1], (el, width, tempMarginLeft) => {
-        el.onclick = () => {
-          menuSliderClick.style.width = `${width}%`;
-          menuSliderClick.style.marginLeft = `${tempMarginLeft}%`;
-        };
-      });
-    }
-  } // endif
+  // const menu = document.getElementsByClassName('nav'); // 上部に持ってきた
+  // // Values are set.
+
+  // // Might make this dynamic for px, %, pt, em
+  // function getPercentage(min, max) {
+  //   return min / max * 100;
+  // }
+
+  // // Not using reduce, because IE8 doesn't supprt it
+  // function getArraySum(arr) {
+  //   let sum = 0;
+  //   [].forEach.call(arr, (el, index) => {
+  //     sum += el;
+  //   });
+  //   return sum;
+  // }
+
+  // function navSlider(menu, callback) {
+  //   const menuWidth = menu.offsetWidth;
+  //   // We only want the <li> </li> tags
+  //   const navTabs = document.querySelectorAll('li.nav-link');
+
+  //   if (menu.length > 0) {
+  //     const marginLeft = [];
+  //     // Loop through nav children i.e li
+  //     [].forEach.call(navTabs, (el, index) => {
+  //       console.log(navTabs);
+  //       // Dynamic width/margin calculation for hr
+  //       const width = getPercentage(el.offsetWidth, menuWidth);
+  //       console.log(width);
+  //       let tempMarginLeft = 0;
+  //       // We don't want to modify first elements positioning
+  //       if (index !== 0) {
+  //         tempMarginLeft = getArraySum(marginLeft);
+  //       }
+  //       // Set mouse event  hover/click
+  //       callback(el, width, tempMarginLeft);
+  //       /* We store it in array because the later accumulated value is used for positioning */
+  //       marginLeft.push(width);
+  //     });
+  //   }
+  // }
+
+  // if (menu) {
+  //   // CLICK
+  //   const menuSliderClick = document.getElementById('nav_slide_click');
+  //   if (menuSliderClick) {
+  //     navSlider(menu[1], (el, width, tempMarginLeft) => {
+  //       el.onclick = () => {
+  //         menuSliderClick.style.width = `${width}%`;
+  //         menuSliderClick.style.marginLeft = `${tempMarginLeft}%`;
+  //       };
+  //     });
+  //   }
+  // } // endif
 
 
   return (

src/client/js/services/PageAccessoriesContainer.js

@@ -48,6 +48,74 @@ export default class PageAccessoriesContainer extends Container {
     this.setState({
       activeTab, activeComponents: this.state.activeComponents.add(activeTab),
     });
+    this.navSlider();
   }
 
+  // This is setup with bootstrap 3
+
+  /**
+  * If you have LESS than one navbar, then just do
+  * let menu = document.getElementsByClassName( 'nav' )[0];
+  */
+
+ menu = document.getElementsByClassName('nav');
+
+ // Might make this dynamic for px, %, pt, em
+ getPercentage(min, max) {
+   return min / max * 100;
+ }
+
+ // Not using reduce, because IE8 doesn't supprt it
+ getArraySum(arr) {
+   let sum = 0;
+   [].forEach.call(arr, (el, index) => {
+     sum += el;
+   });
+   return sum;
+ }
+
+
+ navSlider(menu, callback) {
+   const menuWidth = menu.offsetWidth;
+   // We only want the <li> </li> tags
+   const navTabs = menu.getElementsByTagName('li.nav-link');
+   if (menu.length > 0) {
+     const marginLeft = [];
+     // Loop through nav children i.e li
+     [].forEach.call(navTabs, (el, index) => {
+       // Dynamic width/margin calculation for hr
+       const width = this.getPercentage(el.offsetWidth, menuWidth);
+       let tempMarginLeft = 0;
+       // We don't want to modify first elements positioning
+       if (index !== 0) {
+         tempMarginLeft = this.getArraySum(marginLeft);
+       }
+       // Set mouse event  hover/click
+       callback(el, width, tempMarginLeft);
+       /* We store it in array because the later accumulated value is used for positioning */
+       marginLeft.push(width);
+     });
+   }
+ }
+
+ //  menu = document.getElementsByClassName('nav');
+
+ // Values are set.
+ if(menu) {
+   // CLICK
+   const menuSliderClick = document.getElementById('nav_slide_click');
+   if (menuSliderClick) {
+     this.navSlider(menu[1], (el, width, tempMarginLeft) => {
+       console.log(width);
+       console.log(tempMarginLeft);
+
+       el.onclick = () => {
+         menuSliderClick.style.width = `${width}%`;
+         menuSliderClick.style.marginLeft = `${tempMarginLeft}%`;
+       };
+     });
+   }
+ } // endif
+
+
 }

src/client/styles/scss/_layout_growi.scss

@@ -34,7 +34,7 @@
     #nav_slide_click {
       border-bottom: 2px solid red;
       // border: none;
-      // transition: .3s ease-in-out;
+      transition: 0.3s ease-in-out;
     }
   }
   // ~アニメションのための追加終わり~