フリーランスの忘備録

(function(){
  const flexboxs = document.querySelectorAll('.flexbox');
  const changeFlexEvent = new Event("changeFlex");
  const mediaQueryData = {
    'xl':{
      'breakpoint':1024,
      'gutter':30,
      'space':30
    },
    'lg':{
      'breakpoint':900,
      'gutter':20,
      'space':20
    },
    'md':{
      'breakpoint':750,
      'gutter':15,
      'space':15
    },
    'sm':{
      'breakpoint':600,
      'gutter':10,
      'space':10
    },
    'xs':{
      'breakpoint':450,
      'gutter':5,
      'space':5
    },
    'base':{
      'gutter':2,
      'space':2
    }
  };
  let currentSuffix = '';

  const getCurrentSuffix = ()=>{
    let suffix = 'base'
    for( let $key in mediaQueryData ){
      if( $key != 'base' ){
        if( mediaQueryData[$key]['breakpoint'] < window.innerWidth){
          suffix = $key;
          break;
        }        
      }
    }
    return suffix;
  }
  
  window.addEventListener('resize',()=>{
    if( currentSuffix != getCurrentSuffix() ){
      currentSuffix = getCurrentSuffix();
      window.dispatchEvent(changeFlexEvent);
    }
  });  
    
  const setFlexboxItems = ()=>{
    for( let i = 0 ; i < flexboxs.length ; i++ ){
      const flexbox = flexboxs[i];
      const flexitems = flexbox.children;
      const gutter = Number((flexbox.dataset[currentSuffix+'Gutter']?flexbox.dataset[currentSuffix+'Gutter']:mediaQueryData[currentSuffix]['gutter']))*0.5;
      const space = Number((flexbox.dataset[currentSuffix+'Space']?flexbox.dataset[currentSuffix+'Space']:mediaQueryData[currentSuffix]['space']));
      flexbox.style.margin = `-${space}px -${gutter}px 0`;
      for( let n = 0 ; n < flexitems.length ;n++ ){
        flexitems[n].style.padding = `${space}px ${gutter}px 0`;
      }
    }
  }
  
  
  window.addEventListener('load',()=>{
    currentSuffix = getCurrentSuffix();
    if( flexboxs.length ){
      setFlexboxItems();
    }
  });

  window.addEventListener('changeFlex',()=>{
    if( flexboxs.length ){
      setFlexboxItems();
    }
  });  
})();