Views

<div class="views-wrapper js-views-wrapper views-wrapper--default" id="example-views">
    <div class="view js-view js-view--active view--active" id="lorem">
        <p>Consectetur adipiscing elit. Aliquam vitae tellus convallis, aliquet elit id, accumsan mauris.</p>

    </div>
    <div class="view js-view view--hidden" id="ipsum">
        <p>Mauris ac lacinia nulla. Duis eleifend pulvinar lectus, quis malesuada mi sodales id. Morbi egestas enim vel nibh ullamcorper, eu volutpat ex dignissim. Sed sed ante vel nisl ornare consequat semper eu mi. Quisque eleifend diam non ex mollis,
            eu rhoncus dui mattis. Integer lobortis leo orci, euismod aliquet massa varius vel. Donec vel tristique quam, at dictum metus. In finibus elit id metus volutpat porta. Sed eleifend nec eros nec vehicula. Maecenas tempus, ex eleifend interdum
            gravida, nisl nulla auctor risus, non dignissim justo odio eget risus.</p>

    </div>
</div>
<div class="views-wrapper js-views-wrapper views-wrapper--{{_self.name}}{{#if classes}}{{#each classes}} {{this}}{{/each}}{{/if}}" id="{{id}}">
  {{#each views}}
  <div class="view js-view{{#if active}} js-view--active view--active{{else}} view--hidden{{/if}}{{#if default}} js-view--default{{/if}}{{#if classes}}{{#each classes}} {{this}}{{/each}}{{/if}}" id="{{id}}">
    {{#each children}}
      {{render (dynamicComponent component) this}}
    {{/each}}
  </div>
  {{/each}}
</div>
{
  "id": "example-views",
  "views": [
    {
      "id": "lorem",
      "variant": "lorem",
      "active": true,
      "children": [
        {
          "component": "paragraph",
          "value": "Consectetur adipiscing elit. Aliquam vitae tellus convallis, aliquet elit id, accumsan mauris."
        }
      ]
    },
    {
      "id": "ipsum",
      "variant": "ipsum",
      "children": [
        {
          "component": "paragraph",
          "value": "Mauris ac lacinia nulla. Duis eleifend pulvinar lectus, quis malesuada mi sodales id. Morbi egestas enim vel nibh ullamcorper, eu volutpat ex dignissim. Sed sed ante vel nisl ornare consequat semper eu mi. Quisque eleifend diam non ex mollis, eu rhoncus dui mattis. Integer lobortis leo orci, euismod aliquet massa varius vel. Donec vel tristique quam, at dictum metus. In finibus elit id metus volutpat porta. Sed eleifend nec eros nec vehicula. Maecenas tempus, ex eleifend interdum gravida, nisl nulla auctor risus, non dignissim justo odio eget risus."
        }
      ]
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      const activeJSViewClass = 'js-view--active';
      const activeViewClass = 'view--active';
      const hiddenViewClass = 'view--hidden';
      const nextViewClass = 'js-view--next';
    
      function initInstance(instance) {
        const views = Array.prototype.filter.call(instance.children, child => child.classList.contains('js-view'));
    
        instance.addEventListener('resetView', resetView);
    
        for (let i = 0; i < views.length; i++) {
          views[i].addEventListener('activateView', handleView);
        }
      }
    
      function resetView(e) {
        const wrapper = e.currentTarget;
        const def = Array.prototype.filter.call(wrapper.children, child => child.classList.contains('js-view--default'))[0];
    
        def.dispatchEvent(new CustomEvent('activateView', {detail: {reset: true}}));
      }
    
      function handleView(e) {
        const next = e.target;
        const instance = next.closest('.js-views-wrapper');
        const current = Array.prototype.filter.call(instance.children, child => child.classList.contains(activeJSViewClass))[0];
    
        if(e.detail !== null && e.detail.hasOwnProperty('reset') && e.detail.reset) { // If resetting views, the modal is closed so we cannot rely on transitionend events
          if(next !== current) {
            // Hide current view
            current.classList.add(hiddenViewClass);
            current.classList.remove(activeViewClass);
            current.classList.remove(activeJSViewClass);
    
            // Show next view
            next.classList.add(activeViewClass);
            next.classList.add(activeJSViewClass);
            next.classList.remove(hiddenViewClass);
    
            // Force reflow !important
            next.offsetWidth;
          }
        } else { // Otherwise, if the modal is open
          if (next !== current) { // If current and next view are not the same
            // Hide current view
            current.classList.add(hiddenViewClass);
            // Mark next view
            next.classList.add(nextViewClass);
    
            // Wait for current view to hide
            setTimeout(() => {
              switchView(next, current)
            }, 400);
          } else { // Otherwise trigger completion event
            triggerActivatedView(e);
          }
        }
      }
    
      function triggerActivatedView(e) {
        e.currentTarget.dispatchEvent(new CustomEvent('viewActivated'));
      }
    
      function switchView(next, current) {
        // Switch active view
        current.classList.remove(activeViewClass);
        current.classList.remove(activeJSViewClass);
        next.classList.add(activeViewClass);
        next.classList.add(activeJSViewClass);
    
        // Force reflow !important
        next.offsetWidth;
    
        // Animate next view and unmark it
        next.classList.remove(nextViewClass);
        next.classList.remove(hiddenViewClass);
    
    
        setTimeout(() => {
          triggerActivatedView({currentTarget: next});
        }, 400);
      }
    
      function init() {
        const instances = document.querySelectorAll('.js-views-wrapper');
    
        for (let i = 0; i < instances.length; i++) {
          if (!instances[i].classList.contains('js-component-init')) {
            initInstance(instances[i]);
    
            instances[i].classList.add('js-component-init');
          }
        }
      }
    
      // Allow application JS to reinitialize any instances added with Ajax, etc.
      if (typeof componentEvents !== 'undefined') {
        componentEvents.on('component-init', init);
      }
    
      init();
    
    })(this);
    
  • URL: /components/raw/views/views.js
  • Filesystem Path: src/components/01-elements/views/views.js
  • Size: 3.3 KB
  • Content:
    .views-wrapper {
      color: $color-darkest;
    }
    
    .view {
      display: none;
      opacity: 1;
    }
    
    .view--active {
      display: block;
    }
    
    .view--hidden {
      opacity: 0;
    }
    
  • URL: /components/raw/views/views.scss
  • Filesystem Path: src/components/01-elements/views/views.scss
  • Size: 156 Bytes

There are no notes for this item.