Refractor

Move JS at assets, rename class names
carolinerusso · Oct 14, 2019 · de269c0 · de269c0
1 parent 71fbff0
commit de269c0
Showing 1 changed file with 22 additions and 174 deletions.
diff --git a/FAQ/sections/faq.liquid b/FAQ/sections/faq.liquid
@@ -1,20 +1,19 @@
-<!-- sections/faq.liquid --> 
 {%- comment -%} ---------------- THE CSS ---------------- {%- endcomment -%}
 
 <style>
-  .collapsible__title {
+  .faq-title {
     display: block;
     margin: 0;
     padding: .6em 0;
     cursor: pointer;
     border-bottom: 1px solid {{ section.settings.border_color }};
   }
   
-  .collapsible__title:first-child {
+  .faq-title:first-child {
     border-top: 1px solid {{ section.settings.border_color }};
   }
   
-  .collapsible__button {
+  .faq-button {
     all: inherit;
     cursor: pointer;
     background: transparent;
@@ -23,46 +22,45 @@
     position: relative;
   }
   
-  .collapsible__button span,
-  .collapsible__button svg {
+  .faq-button span,
+  .faq-button svg {
     vertical-align: middle;
   }
   
-  .collapsible-icon {
+  .faq-icon {
     width: 0.6em;
     height: 0.6em;
     margin-right: .6em;
   }
   
-  .collapsible-icon-minus {
+  .faq-icon-minus {
     transition: transform 240ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transform-origin: 50% 50%;
   }
   
-  .collapsible__button[aria-expanded="true"] .collapsible-icon-minus {
+  .faq-button[aria-expanded="true"] .faq-icon-minus {
     transform: rotate(90deg);
   }
   
-  .collapsible__panel {
+  .faq-panel {
     overflow: hidden;
     border-bottom: 1px solid {{ section.settings.border_color }};
     {%- if section.settings.panel_color  -%}
     background-color: {{ section.settings.panel_color }};
     {%- endif -%}
   }
   
-  .collapsible__panel p {
+  .faq-panel p {
     margin-top: 0;
   }
   
-  .collapsible__panel[data-is-animating] {
+  .faq-panel[data-is-animating] {
     display: block!important;
   }
   
-  .collapsible-wrap {
+  .faq-wrap {
     padding: 1em;
   }
-  
 </style>
 
 
@@ -80,17 +78,17 @@
       {%- assign hidden = 'hidden' -%}
     {%- endif -%}
 
-    <h2 class="collapsible__title" data-faq-trigger="{{ block.id }}" {{ block.shopify_attributes }}>
-      <button class="collapsible__button" data-faq-button="{{ block.id }}" aria-expanded="{{ expanded }}">
-        <svg class="collapsible-icon" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-          <path class="collapsible-icon-minus" fill="currentColor" d="M8 0v14H6V0z"></path>
+    <h2 class="faq-title" data-faq-trigger="{{ block.id }}" {{ block.shopify_attributes }}>
+      <button class="faq-button" data-faq-button="{{ block.id }}" aria-expanded="{{ expanded }}">
+        <svg class="faq-icon" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+          <path class="faq-icon-minus" fill="currentColor" d="M8 0v14H6V0z"></path>
           <path fill="currentColor" d="M0 6h14v2H0z"></path>
         </svg><span>{{ block.settings.title }}</span>
       </button>
     </h2>
 
-    <div class="collapsible__panel" data-faq-panel="{{ block.id }}" {{ hidden }}>
-      <div class="collapsible-wrap">{{ block.settings.content }}</div>
+    <div class="faq-panel" data-faq-panel="{{ block.id }}" {{ hidden }}>
+      <div class="faq-wrap">{{ block.settings.content }}</div>
     </div>
 
   {%- endif -%}
@@ -191,165 +189,15 @@
 
 {%- comment -%} ------------------ THE JS ----------------- {%- endcomment -%}
 
-{% javascript %}
-
-(function FAQ(SD) {
-  'use strict';
-
-  var support = getSupport();
-  var sectionsIds = getSectionIds('data-faq-config');
-  var sectionInit = compose(publicAPI, setEvents, getBlocks, getConfig);
-  var sections = sectionsIds.map(sectionInit);
-
-  SD.faq = zipObj(sectionsIds, sections);
-
-  function publicAPI(config) {
-    return {
-      id: config.sectionId,
-      config: config,
-      blocks: zipObj(config.blockIds, config.blocks),
-      init: sectionInit
-    }
-  }
-
-  //**************************
-
-
-  function blockEvents(block) {
-    block.trigger.addEventListener('click', function triggerClick() { toggle(block) });
-  }
-
-  function toggle(block) {
-    block.collapsed ? expand(block) : collapse(block);
-  }
-
-  function expand(block) {
-    block.button.setAttribute('aria-expanded', true);
-    block.panel.removeAttribute('hidden');
-    animate(block.panel, 'normal');
-    return block;
-  }
-
-  function collapse(block) {
-    block.button.setAttribute('aria-expanded', false);
-    block.panel.setAttribute('hidden', '');
-    animate(block.panel, 'reverse');
-    return block;
-  }
-
-  function isCollapsed(block) {
-    return (attr('aria-expanded', block.button) === 'false');
-  }
-
-  function animate(element, direction) { 
-    if (!support.WebAnimations) return;
-
-    element.setAttribute('data-is-animating', true);
-
-    element.animate([
-      { height: 0 },
-      { height: element.offsetHeight + 'px' }],
-
-      { duration: 240,
-        fill: 'both',
-        easing: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
-        direction: direction
-      }
-
-    ).onfinish = function() {
-      element.removeAttribute('data-is-animating');
-      this.cancel();
-    };
-  }
-
-  //**************************
-
-
-  function getBlocks(config) {
-    config.blocks = config.blockIds.map(block);
-    return config;
-  }
-
-  function block(blockId) {
-    return {
-      trigger: document.querySelector('[data-faq-trigger="' + blockId + '"]'),
-      button: document.querySelector('[data-faq-button="' + blockId + '"]'),
-      panel: document.querySelector('[data-faq-panel="' + blockId + '"]'),
-
-      get collapsed() { return isCollapsed(this) },
-      select: function select() { return expand(this) },
-      deselect: function deselect() { return collapse(this) }
-    }
-  }
-
-  function setEvents(config) {
-    config.blocks.forEach(blockEvents);
-    return config;
-  }
-
-  function getSectionIds(sectionAttr) {
-    var sectionConfigAttr = ['[',sectionAttr,']'].join('');
-
-    return nodeList(sectionConfigAttr).map(
-      function sectionId(element) {
-        return element.getAttribute(sectionAttr);
-      }
-    );
-  }
-
-  function getConfig(sectionId) {
-    return JSON.parse(document.querySelector('[data-faq-config="' + sectionId + '"]').innerHTML);
-  }
-
-  //**************************
-
-
-  function nodeList(str, root) {
-    if (!root) root = document;
-    var nodeList = root.querySelectorAll(str);
-    return Array.prototype.slice.call(nodeList);
-  }
-
-  function attr(str, element) {
-    return element.getAttribute(str);
-  }
-
-  function zipObj(keys, values) {
-    return keys.reduce(
-      function zipObj(acc, key, idx) {
-        acc[key] = values[idx];
-        return acc;
-      }, {}
-    )
-  }
-
-  function compose() {
-    var funcs = Array.prototype.slice.call(arguments).reverse();
-    return function() {
-      return funcs.slice(1).reduce(function(res, fn) {
-        return fn(res);
-      }, funcs[0].apply(undefined, arguments));
-    };
-  }
-
-  function getSupport() {
-    return {
-      WebAnimations: (typeof Element.prototype.animate === 'function')
-    }
-  }
-
-})(window.SectionsDesign = window.SectionsDesign || {})
-
-{% endjavascript %}
+<script src="{{ 'faq.js' | asset_url }}" defer></script>
 
 
 {%- comment -%} ---------------- THE NO-JS ---------------- {%- endcomment -%}
 
 <noscript>
   <style>
-    #shopify-section-{{ section.id }} [hidden] {
-      display: block;
-    }
+    #shopify-section-{{ section.id }} [hidden] { display: block }
+    .faq-icon { display: none }
   </style>
 </noscript>
 
@@ -382,7 +230,7 @@
       
       (evt.type === 'shopify:block:select')
       ? block.select() 
-      : block.deselect()
+      : block.deselect();
     }
       
   })(window.SectionsDesign = window.SectionsDesign || {});