success to show log

src/client/js/components/PageAccessoriesModal.jsx

@@ -49,8 +49,9 @@ const PageAccessoriesModal = (props) => {
   }
 
   function navSlider(menu, callback) { // ok
-    const menuWidth = menu.offsetWidth; // not ok
-    console.log(`menu = ${menu}, menu.offsetWidth =${menu.offsetWidth}, menuWidth = ${menuWidth} `);
+    const arrayMenu1 = Array.from(menu);
+    const menuWidth = arrayMenu1.offsetWidth; // not ok
+    console.log(`arrayMenu1 = ${arrayMenu1}, menu.offsetWidth =${menu.offsetWidth}, menuWidth = ${menuWidth} `);
     // We only want the <li> </li> tags
     const navTabs = document.querySelectorAll('li.nav-link');
 
@@ -80,15 +81,14 @@ const PageAccessoriesModal = (props) => {
     const menuSliderClick = document.getElementById('nav_slide_click');
     console.log('menu clicked');
     if (menuSliderClick) {
-      console.log('これはif文の中');
       console.log(`menu = ${menu}`);
       const arrayMenu = Array.from(menu); // 変換してみた
-      // console.log(`arrayMenu = ${arrayMenu}, el = ${el}, width = ${width}, tempMarginLeft = ${tempMarginLeft} `);
+      console.log(`arrayMenu = ${arrayMenu}`);
+      console.log(`arrayMenu.length = ${arrayMenu.length}`);
 
-      // ↓ここをどうにかする必要がある
-      navSlider(arrayMenu[1], (el, width, tempMarginLeft) => {
+      navSlider(arrayMenu, (el, width, tempMarginLeft) => {
         console.log('navSlider functionが実行されようとしている');
-        el.onclick = () => { // このonClickは使えるのか?
+        el.onclick = () => {
           console.log('el がクリックされた');
           menuSliderClick.style.width = `${width}%`;
           menuSliderClick.style.marginLeft = `${tempMarginLeft}%`;

src/client/js/services/PageAccessoriesContainer.js

@@ -48,74 +48,7 @@ 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
-
-
 }