j1-template 2020.0.22 → 2020.0.24

data/assets/themes/j1/modules/materialize/js/scrollspy.js

@@ -0,0 +1,295 @@
+(function($, anim) {
+  'use strict';
+
+  let _defaults = {
+    throttle: 100,
+    scrollOffset: 200, // offset - 200 allows elements near bottom of page to scroll
+    activeClass: 'active',
+    getActiveElement: function(id) {
+      return 'a[href="#' + id + '"]';
+    }
+  };
+
+  /**
+   * @class
+   *
+   */
+  class ScrollSpy extends Component {
+    /**
+     * Construct ScrollSpy instance
+     * @constructor
+     * @param {Element} el
+     * @param {Object} options
+     */
+    constructor(el, options) {
+      super(ScrollSpy, el, options);
+
+      this.el.M_ScrollSpy = this;
+
+      /**
+       * Options for the modal
+       * @member Modal#options
+       * @prop {Number} [throttle=100] - Throttle of scroll handler
+       * @prop {Number} [scrollOffset=200] - Offset for centering element when scrolled to
+       * @prop {String} [activeClass='active'] - Class applied to active elements
+       * @prop {Function} [getActiveElement] - Used to find active element
+       */
+      this.options = $.extend({}, ScrollSpy.defaults, options);
+
+      // setup
+      ScrollSpy._elements.push(this);
+      ScrollSpy._count++;
+      ScrollSpy._increment++;
+      this.tickId = -1;
+      this.id = ScrollSpy._increment;
+      this._setupEventHandlers();
+      this._handleWindowScroll();
+    }
+
+    static get defaults() {
+      return _defaults;
+    }
+
+    static init(els, options) {
+      return super.init(this, els, options);
+    }
+
+    /**
+     * Get Instance
+     */
+    static getInstance(el) {
+      let domElem = !!el.jquery ? el[0] : el;
+      return domElem.M_ScrollSpy;
+    }
+
+    /**
+     * Teardown component
+     */
+    destroy() {
+      ScrollSpy._elements.splice(ScrollSpy._elements.indexOf(this), 1);
+      ScrollSpy._elementsInView.splice(ScrollSpy._elementsInView.indexOf(this), 1);
+      ScrollSpy._visibleElements.splice(ScrollSpy._visibleElements.indexOf(this.$el), 1);
+      ScrollSpy._count--;
+      this._removeEventHandlers();
+      $(this.options.getActiveElement(this.$el.attr('id'))).removeClass(this.options.activeClass);
+      this.el.M_ScrollSpy = undefined;
+    }
+
+    /**
+     * Setup Event Handlers
+     */
+    _setupEventHandlers() {
+      let throttledResize = M.throttle(this._handleWindowScroll, 200);
+      this._handleThrottledResizeBound = throttledResize.bind(this);
+      this._handleWindowScrollBound = this._handleWindowScroll.bind(this);
+      if (ScrollSpy._count === 1) {
+        window.addEventListener('scroll', this._handleWindowScrollBound);
+        window.addEventListener('resize', this._handleThrottledResizeBound);
+        document.body.addEventListener('click', this._handleTriggerClick);
+      }
+    }
+
+    /**
+     * Remove Event Handlers
+     */
+    _removeEventHandlers() {
+      if (ScrollSpy._count === 0) {
+        window.removeEventListener('scroll', this._handleWindowScrollBound);
+        window.removeEventListener('resize', this._handleThrottledResizeBound);
+        document.body.removeEventListener('click', this._handleTriggerClick);
+      }
+    }
+
+    /**
+     * Handle Trigger Click
+     * @param {Event} e
+     */
+    _handleTriggerClick(e) {
+      let $trigger = $(e.target);
+      for (let i = ScrollSpy._elements.length - 1; i >= 0; i--) {
+        let scrollspy = ScrollSpy._elements[i];
+        if ($trigger.is('a[href="#' + scrollspy.$el.attr('id') + '"]')) {
+          e.preventDefault();
+          let offset = scrollspy.$el.offset().top + 1;
+
+          anim({
+            targets: [document.documentElement, document.body],
+            scrollTop: offset - scrollspy.options.scrollOffset,
+            duration: 400,
+            easing: 'easeOutCubic'
+          });
+          break;
+        }
+      }
+    }
+
+    /**
+     * Handle Window Scroll
+     */
+    _handleWindowScroll() {
+      // unique tick id
+      ScrollSpy._ticks++;
+
+      // viewport rectangle
+      let top = M.getDocumentScrollTop(),
+        left = M.getDocumentScrollLeft(),
+        right = left + window.innerWidth,
+        bottom = top + window.innerHeight;
+
+      // determine which elements are in view
+      let intersections = ScrollSpy._findElements(top, right, bottom, left);
+      for (let i = 0; i < intersections.length; i++) {
+        let scrollspy = intersections[i];
+        let lastTick = scrollspy.tickId;
+        if (lastTick < 0) {
+          // entered into view
+          scrollspy._enter();
+        }
+
+        // update tick id
+        scrollspy.tickId = ScrollSpy._ticks;
+      }
+
+      for (let i = 0; i < ScrollSpy._elementsInView.length; i++) {
+        let scrollspy = ScrollSpy._elementsInView[i];
+        let lastTick = scrollspy.tickId;
+        if (lastTick >= 0 && lastTick !== ScrollSpy._ticks) {
+          // exited from view
+          scrollspy._exit();
+          scrollspy.tickId = -1;
+        }
+      }
+
+      // remember elements in view for next tick
+      ScrollSpy._elementsInView = intersections;
+    }
+
+    /**
+     * Find elements that are within the boundary
+     * @param {number} top
+     * @param {number} right
+     * @param {number} bottom
+     * @param {number} left
+     * @return {Array.<ScrollSpy>}   A collection of elements
+     */
+    static _findElements(top, right, bottom, left) {
+      let hits = [];
+      for (let i = 0; i < ScrollSpy._elements.length; i++) {
+        let scrollspy = ScrollSpy._elements[i];
+        let currTop = top + scrollspy.options.scrollOffset || 200;
+
+        if (scrollspy.$el.height() > 0) {
+          let elTop = scrollspy.$el.offset().top,
+            elLeft = scrollspy.$el.offset().left,
+            elRight = elLeft + scrollspy.$el.width(),
+            elBottom = elTop + scrollspy.$el.height();
+
+          let isIntersect = !(
+            elLeft > right ||
+            elRight < left ||
+            elTop > bottom ||
+            elBottom < currTop
+          );
+
+          if (isIntersect) {
+            hits.push(scrollspy);
+          }
+        }
+      }
+      return hits;
+    }
+
+    _enter() {
+      ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(function(value) {
+        return value.height() != 0;
+      });
+
+      if (ScrollSpy._visibleElements[0]) {
+        $(this.options.getActiveElement(ScrollSpy._visibleElements[0].attr('id'))).removeClass(
+          this.options.activeClass
+        );
+        if (
+          ScrollSpy._visibleElements[0][0].M_ScrollSpy &&
+          this.id < ScrollSpy._visibleElements[0][0].M_ScrollSpy.id
+        ) {
+          ScrollSpy._visibleElements.unshift(this.$el);
+        } else {
+          ScrollSpy._visibleElements.push(this.$el);
+        }
+      } else {
+        ScrollSpy._visibleElements.push(this.$el);
+      }
+
+      $(this.options.getActiveElement(ScrollSpy._visibleElements[0].attr('id'))).addClass(
+        this.options.activeClass
+      );
+    }
+
+    _exit() {
+      ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(function(value) {
+        return value.height() != 0;
+      });
+
+      if (ScrollSpy._visibleElements[0]) {
+        $(this.options.getActiveElement(ScrollSpy._visibleElements[0].attr('id'))).removeClass(
+          this.options.activeClass
+        );
+
+        ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter((el) => {
+          return el.attr('id') != this.$el.attr('id');
+        });
+        if (ScrollSpy._visibleElements[0]) {
+          // Check if empty
+          $(this.options.getActiveElement(ScrollSpy._visibleElements[0].attr('id'))).addClass(
+            this.options.activeClass
+          );
+        }
+      }
+    }
+  }
+
+  /**
+   * @static
+   * @memberof ScrollSpy
+   * @type {Array.<ScrollSpy>}
+   */
+  ScrollSpy._elements = [];
+
+  /**
+   * @static
+   * @memberof ScrollSpy
+   * @type {Array.<ScrollSpy>}
+   */
+  ScrollSpy._elementsInView = [];
+
+  /**
+   * @static
+   * @memberof ScrollSpy
+   * @type {Array.<cash>}
+   */
+  ScrollSpy._visibleElements = [];
+
+  /**
+   * @static
+   * @memberof ScrollSpy
+   */
+  ScrollSpy._count = 0;
+
+  /**
+   * @static
+   * @memberof ScrollSpy
+   */
+  ScrollSpy._increment = 0;
+
+  /**
+   * @static
+   * @memberof ScrollSpy
+   */
+  ScrollSpy._ticks = 0;
+
+  M.ScrollSpy = ScrollSpy;
+
+  if (M.jQueryLoaded) {
+    M.initializeJqueryWrapper(ScrollSpy, 'scrollSpy', 'M_ScrollSpy');
+  }
+})(cash, M.anime);

data/assets/themes/j1/modules/materialize/js/select.js

@@ -0,0 +1,432 @@
+(function($) {
+  'use strict';
+
+  let _defaults = {
+    classes: '',
+    dropdownOptions: {}
+  };
+
+  /**
+   * @class
+   *
+   */
+  class FormSelect extends Component {
+    /**
+     * Construct FormSelect instance
+     * @constructor
+     * @param {Element} el
+     * @param {Object} options
+     */
+    constructor(el, options) {
+      super(FormSelect, el, options);
+
+      // Don't init if browser default version
+      if (this.$el.hasClass('browser-default')) {
+        return;
+      }
+
+      this.el.M_FormSelect = this;
+
+      /**
+       * Options for the select
+       * @member FormSelect#options
+       */
+      this.options = $.extend({}, FormSelect.defaults, options);
+
+      this.isMultiple = this.$el.prop('multiple');
+
+      // Setup
+      this.el.tabIndex = -1;
+      this._keysSelected = {};
+      this._valueDict = {}; // Maps key to original and generated option element.
+      this._setupDropdown();
+
+      this._setupEventHandlers();
+    }
+
+    static get defaults() {
+      return _defaults;
+    }
+
+    static init(els, options) {
+      return super.init(this, els, options);
+    }
+
+    /**
+     * Get Instance
+     */
+    static getInstance(el) {
+      let domElem = !!el.jquery ? el[0] : el;
+      return domElem.M_FormSelect;
+    }
+
+    /**
+     * Teardown component
+     */
+    destroy() {
+      this._removeEventHandlers();
+      this._removeDropdown();
+      this.el.M_FormSelect = undefined;
+    }
+
+    /**
+     * Setup Event Handlers
+     */
+    _setupEventHandlers() {
+      this._handleSelectChangeBound = this._handleSelectChange.bind(this);
+      this._handleOptionClickBound = this._handleOptionClick.bind(this);
+      this._handleInputClickBound = this._handleInputClick.bind(this);
+
+      $(this.dropdownOptions)
+        .find('li:not(.optgroup)')
+        .each((el) => {
+          el.addEventListener('click', this._handleOptionClickBound);
+        });
+      this.el.addEventListener('change', this._handleSelectChangeBound);
+      this.input.addEventListener('click', this._handleInputClickBound);
+    }
+
+    /**
+     * Remove Event Handlers
+     */
+    _removeEventHandlers() {
+      $(this.dropdownOptions)
+        .find('li:not(.optgroup)')
+        .each((el) => {
+          el.removeEventListener('click', this._handleOptionClickBound);
+        });
+      this.el.removeEventListener('change', this._handleSelectChangeBound);
+      this.input.removeEventListener('click', this._handleInputClickBound);
+    }
+
+    /**
+     * Handle Select Change
+     * @param {Event} e
+     */
+    _handleSelectChange(e) {
+      this._setValueToInput();
+    }
+
+    /**
+     * Handle Option Click
+     * @param {Event} e
+     */
+    _handleOptionClick(e) {
+      e.preventDefault();
+      let option = $(e.target).closest('li')[0];
+      let key = option.id;
+      if (!$(option).hasClass('disabled') && !$(option).hasClass('optgroup') && key.length) {
+        let selected = true;
+
+        if (this.isMultiple) {
+          // Deselect placeholder option if still selected.
+          let placeholderOption = $(this.dropdownOptions).find('li.disabled.selected');
+          if (placeholderOption.length) {
+            placeholderOption.removeClass('selected');
+            placeholderOption.find('input[type="checkbox"]').prop('checked', false);
+            this._toggleEntryFromArray(placeholderOption[0].id);
+          }
+          selected = this._toggleEntryFromArray(key);
+        } else {
+          $(this.dropdownOptions)
+            .find('li')
+            .removeClass('selected');
+          $(option).toggleClass('selected', selected);
+        }
+
+        // Set selected on original select option
+        // Only trigger if selected state changed
+        let prevSelected = $(this._valueDict[key].el).prop('selected');
+        if (prevSelected !== selected) {
+          $(this._valueDict[key].el).prop('selected', selected);
+          this.$el.trigger('change');
+        }
+      }
+
+      e.stopPropagation();
+    }
+
+    /**
+     * Handle Input Click
+     */
+    _handleInputClick() {
+      if (this.dropdown && this.dropdown.isOpen) {
+        this._setValueToInput();
+        this._setSelectedStates();
+      }
+    }
+
+    /**
+     * Setup dropdown
+     */
+    _setupDropdown() {
+      this.wrapper = document.createElement('div');
+      $(this.wrapper).addClass('select-wrapper ' + this.options.classes);
+      this.$el.before($(this.wrapper));
+      this.wrapper.appendChild(this.el);
+
+      if (this.el.disabled) {
+        this.wrapper.classList.add('disabled');
+      }
+
+      // Create dropdown
+      this.$selectOptions = this.$el.children('option, optgroup');
+      this.dropdownOptions = document.createElement('ul');
+      this.dropdownOptions.id = `select-options-${M.guid()}`;
+      $(this.dropdownOptions).addClass(
+        'dropdown-content select-dropdown ' + (this.isMultiple ? 'multiple-select-dropdown' : '')
+      );
+
+      // Create dropdown structure.
+      if (this.$selectOptions.length) {
+        this.$selectOptions.each((el) => {
+          if ($(el).is('option')) {
+            // Direct descendant option.
+            let optionEl;
+            if (this.isMultiple) {
+              optionEl = this._appendOptionWithIcon(this.$el, el, 'multiple');
+            } else {
+              optionEl = this._appendOptionWithIcon(this.$el, el);
+            }
+
+            this._addOptionToValueDict(el, optionEl);
+          } else if ($(el).is('optgroup')) {
+            // Optgroup.
+            let selectOptions = $(el).children('option');
+            $(this.dropdownOptions).append(
+              $('<li class="optgroup"><span>' + el.getAttribute('label') + '</span></li>')[0]
+            );
+
+            selectOptions.each((el) => {
+              let optionEl = this._appendOptionWithIcon(this.$el, el, 'optgroup-option');
+              this._addOptionToValueDict(el, optionEl);
+            });
+          }
+        });
+      }
+
+      this.$el.after(this.dropdownOptions);
+
+      // Add input dropdown
+      this.input = document.createElement('input');
+      $(this.input).addClass('select-dropdown dropdown-trigger');
+      this.input.setAttribute('type', 'text');
+      this.input.setAttribute('readonly', 'true');
+      this.input.setAttribute('data-target', this.dropdownOptions.id);
+      if (this.el.disabled) {
+        $(this.input).prop('disabled', 'true');
+      }
+
+      this.$el.before(this.input);
+      this._setValueToInput();
+
+      // Add caret
+      let dropdownIcon = $(
+        '<svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'
+      );
+      this.$el.before(dropdownIcon[0]);
+
+      // Initialize dropdown
+      if (!this.el.disabled) {
+        let dropdownOptions = $.extend({}, this.options.dropdownOptions);
+
+        // Add callback for centering selected option when dropdown content is scrollable
+        dropdownOptions.onOpenEnd = (el) => {
+          let selectedOption = $(this.dropdownOptions)
+            .find('.selected')
+            .first();
+
+          if (selectedOption.length) {
+            // Focus selected option in dropdown
+            M.keyDown = true;
+            this.dropdown.focusedIndex = selectedOption.index();
+            this.dropdown._focusFocusedItem();
+            M.keyDown = false;
+
+            // Handle scrolling to selected option
+            if (this.dropdown.isScrollable) {
+              let scrollOffset =
+                selectedOption[0].getBoundingClientRect().top -
+                this.dropdownOptions.getBoundingClientRect().top; // scroll to selected option
+              scrollOffset -= this.dropdownOptions.clientHeight / 2; // center in dropdown
+              this.dropdownOptions.scrollTop = scrollOffset;
+            }
+          }
+        };
+
+        if (this.isMultiple) {
+          dropdownOptions.closeOnClick = false;
+        }
+        this.dropdown = M.Dropdown.init(this.input, dropdownOptions);
+      }
+
+      // Add initial selections
+      this._setSelectedStates();
+    }
+
+    /**
+     * Add option to value dict
+     * @param {Element} el  original option element
+     * @param {Element} optionEl  generated option element
+     */
+    _addOptionToValueDict(el, optionEl) {
+      let index = Object.keys(this._valueDict).length;
+      let key = this.dropdownOptions.id + index;
+      let obj = {};
+      optionEl.id = key;
+
+      obj.el = el;
+      obj.optionEl = optionEl;
+      this._valueDict[key] = obj;
+    }
+
+    /**
+     * Remove dropdown
+     */
+    _removeDropdown() {
+      $(this.wrapper)
+        .find('.caret')
+        .remove();
+      $(this.input).remove();
+      $(this.dropdownOptions).remove();
+      $(this.wrapper).before(this.$el);
+      $(this.wrapper).remove();
+    }
+
+    /**
+     * Setup dropdown
+     * @param {Element} select  select element
+     * @param {Element} option  option element from select
+     * @param {String} type
+     * @return {Element}  option element added
+     */
+    _appendOptionWithIcon(select, option, type) {
+      // Add disabled attr if disabled
+      let disabledClass = option.disabled ? 'disabled ' : '';
+      let optgroupClass = type === 'optgroup-option' ? 'optgroup-option ' : '';
+      let multipleCheckbox = this.isMultiple
+        ? `<label><input type="checkbox"${disabledClass}"/><span>${option.innerHTML}</span></label>`
+        : option.innerHTML;
+      let liEl = $('<li></li>');
+      let spanEl = $('<span></span>');
+      spanEl.html(multipleCheckbox);
+      liEl.addClass(`${disabledClass} ${optgroupClass}`);
+      liEl.append(spanEl);
+
+      // add icons
+      let iconUrl = option.getAttribute('data-icon');
+      if (!!iconUrl) {
+        let imgEl = $(`<img alt="" src="${iconUrl}">`);
+        liEl.prepend(imgEl);
+      }
+
+      // Check for multiple type.
+      $(this.dropdownOptions).append(liEl[0]);
+      return liEl[0];
+    }
+
+    /**
+     * Toggle entry from option
+     * @param {String} key  Option key
+     * @return {Boolean}  if entry was added or removed
+     */
+    _toggleEntryFromArray(key) {
+      let notAdded = !this._keysSelected.hasOwnProperty(key);
+      let $optionLi = $(this._valueDict[key].optionEl);
+
+      if (notAdded) {
+        this._keysSelected[key] = true;
+      } else {
+        delete this._keysSelected[key];
+      }
+
+      $optionLi.toggleClass('selected', notAdded);
+
+      // Set checkbox checked value
+      $optionLi.find('input[type="checkbox"]').prop('checked', notAdded);
+
+      // use notAdded instead of true (to detect if the option is selected or not)
+      $optionLi.prop('selected', notAdded);
+
+      return notAdded;
+    }
+
+    /**
+     * Set text value to input
+     */
+    _setValueToInput() {
+      let values = [];
+      let options = this.$el.find('option');
+
+      options.each((el) => {
+        if ($(el).prop('selected')) {
+          let text = $(el).text();
+          values.push(text);
+        }
+      });
+
+      if (!values.length) {
+        let firstDisabled = this.$el.find('option:disabled').eq(0);
+        if (firstDisabled.length && firstDisabled[0].value === '') {
+          values.push(firstDisabled.text());
+        }
+      }
+
+      this.input.value = values.join(', ');
+    }
+
+    /**
+     * Set selected state of dropdown to match actual select element
+     */
+    _setSelectedStates() {
+      this._keysSelected = {};
+
+      for (let key in this._valueDict) {
+        let option = this._valueDict[key];
+        let optionIsSelected = $(option.el).prop('selected');
+        $(option.optionEl)
+          .find('input[type="checkbox"]')
+          .prop('checked', optionIsSelected);
+        if (optionIsSelected) {
+          this._activateOption($(this.dropdownOptions), $(option.optionEl));
+          this._keysSelected[key] = true;
+        } else {
+          $(option.optionEl).removeClass('selected');
+        }
+      }
+    }
+
+    /**
+     * Make option as selected and scroll to selected position
+     * @param {jQuery} collection  Select options jQuery element
+     * @param {Element} newOption  element of the new option
+     */
+    _activateOption(collection, newOption) {
+      if (newOption) {
+        if (!this.isMultiple) {
+          collection.find('li.selected').removeClass('selected');
+        }
+        let option = $(newOption);
+        option.addClass('selected');
+      }
+    }
+
+    /**
+     * Get Selected Values
+     * @return {Array}  Array of selected values
+     */
+    getSelectedValues() {
+      let selectedValues = [];
+      for (let key in this._keysSelected) {
+        selectedValues.push(this._valueDict[key].el.value);
+      }
+      return selectedValues;
+    }
+  }
+
+  M.FormSelect = FormSelect;
+
+  if (M.jQueryLoaded) {
+    M.initializeJqueryWrapper(FormSelect, 'formSelect', 'M_FormSelect');
+  }
+})(cash);