j1-template 2020.0.18 → 2020.0.24

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

@@ -0,0 +1,145 @@
+(function($) {
+  'use strict';
+
+  let _defaults = {
+    top: 0,
+    bottom: Infinity,
+    offset: 0,
+    onPositionChange: null
+  };
+
+  /**
+   * @class
+   *
+   */
+  class Pushpin extends Component {
+    /**
+     * Construct Pushpin instance
+     * @constructor
+     * @param {Element} el
+     * @param {Object} options
+     */
+    constructor(el, options) {
+      super(Pushpin, el, options);
+
+      this.el.M_Pushpin = this;
+
+      /**
+       * Options for the modal
+       * @member Pushpin#options
+       */
+      this.options = $.extend({}, Pushpin.defaults, options);
+
+      this.originalOffset = this.el.offsetTop;
+      Pushpin._pushpins.push(this);
+      this._setupEventHandlers();
+      this._updatePosition();
+    }
+
+    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_Pushpin;
+    }
+
+    /**
+     * Teardown component
+     */
+    destroy() {
+      this.el.style.top = null;
+      this._removePinClasses();
+      this._removeEventHandlers();
+
+      // Remove pushpin Inst
+      let index = Pushpin._pushpins.indexOf(this);
+      Pushpin._pushpins.splice(index, 1);
+    }
+
+    static _updateElements() {
+      for (let elIndex in Pushpin._pushpins) {
+        let pInstance = Pushpin._pushpins[elIndex];
+        pInstance._updatePosition();
+      }
+    }
+
+    _setupEventHandlers() {
+      document.addEventListener('scroll', Pushpin._updateElements);
+    }
+
+    _removeEventHandlers() {
+      document.removeEventListener('scroll', Pushpin._updateElements);
+    }
+
+    _updatePosition() {
+      let scrolled = M.getDocumentScrollTop() + this.options.offset;
+
+      if (
+        this.options.top <= scrolled &&
+        this.options.bottom >= scrolled &&
+        !this.el.classList.contains('pinned')
+      ) {
+        this._removePinClasses();
+        this.el.style.top = `${this.options.offset}px`;
+        this.el.classList.add('pinned');
+
+        // onPositionChange callback
+        if (typeof this.options.onPositionChange === 'function') {
+          this.options.onPositionChange.call(this, 'pinned');
+        }
+      }
+
+      // Add pin-top (when scrolled position is above top)
+      if (scrolled < this.options.top && !this.el.classList.contains('pin-top')) {
+        this._removePinClasses();
+        this.el.style.top = 0;
+        this.el.classList.add('pin-top');
+
+        // onPositionChange callback
+        if (typeof this.options.onPositionChange === 'function') {
+          this.options.onPositionChange.call(this, 'pin-top');
+        }
+      }
+
+      // Add pin-bottom (when scrolled position is below bottom)
+      if (scrolled > this.options.bottom && !this.el.classList.contains('pin-bottom')) {
+        this._removePinClasses();
+        this.el.classList.add('pin-bottom');
+        this.el.style.top = `${this.options.bottom - this.originalOffset}px`;
+
+        // onPositionChange callback
+        if (typeof this.options.onPositionChange === 'function') {
+          this.options.onPositionChange.call(this, 'pin-bottom');
+        }
+      }
+    }
+
+    _removePinClasses() {
+      // IE 11 bug (can't remove multiple classes in one line)
+      this.el.classList.remove('pin-top');
+      this.el.classList.remove('pinned');
+      this.el.classList.remove('pin-bottom');
+    }
+  }
+
+  /**
+   * @static
+   * @memberof Pushpin
+   */
+  Pushpin._pushpins = [];
+
+  M.Pushpin = Pushpin;
+
+  if (M.jQueryLoaded) {
+    M.initializeJqueryWrapper(Pushpin, 'pushpin', 'M_Pushpin');
+  }
+})(cash);

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

@@ -0,0 +1,263 @@
+(function($, anim) {
+  'use strict';
+
+  let _defaults = {};
+
+  /**
+   * @class
+   *
+   */
+  class Range extends Component {
+    /**
+     * Construct Range instance
+     * @constructor
+     * @param {Element} el
+     * @param {Object} options
+     */
+    constructor(el, options) {
+      super(Range, el, options);
+
+      this.el.M_Range = this;
+
+      /**
+       * Options for the range
+       * @member Range#options
+       */
+      this.options = $.extend({}, Range.defaults, options);
+
+      this._mousedown = false;
+
+      // Setup
+      this._setupThumb();
+
+      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_Range;
+    }
+
+    /**
+     * Teardown component
+     */
+    destroy() {
+      this._removeEventHandlers();
+      this._removeThumb();
+      this.el.M_Range = undefined;
+    }
+
+    /**
+     * Setup Event Handlers
+     */
+    _setupEventHandlers() {
+      this._handleRangeChangeBound = this._handleRangeChange.bind(this);
+      this._handleRangeMousedownTouchstartBound = this._handleRangeMousedownTouchstart.bind(this);
+      this._handleRangeInputMousemoveTouchmoveBound = this._handleRangeInputMousemoveTouchmove.bind(
+        this
+      );
+      this._handleRangeMouseupTouchendBound = this._handleRangeMouseupTouchend.bind(this);
+      this._handleRangeBlurMouseoutTouchleaveBound = this._handleRangeBlurMouseoutTouchleave.bind(
+        this
+      );
+
+      this.el.addEventListener('change', this._handleRangeChangeBound);
+
+      this.el.addEventListener('mousedown', this._handleRangeMousedownTouchstartBound);
+      this.el.addEventListener('touchstart', this._handleRangeMousedownTouchstartBound);
+
+      this.el.addEventListener('input', this._handleRangeInputMousemoveTouchmoveBound);
+      this.el.addEventListener('mousemove', this._handleRangeInputMousemoveTouchmoveBound);
+      this.el.addEventListener('touchmove', this._handleRangeInputMousemoveTouchmoveBound);
+
+      this.el.addEventListener('mouseup', this._handleRangeMouseupTouchendBound);
+      this.el.addEventListener('touchend', this._handleRangeMouseupTouchendBound);
+
+      this.el.addEventListener('blur', this._handleRangeBlurMouseoutTouchleaveBound);
+      this.el.addEventListener('mouseout', this._handleRangeBlurMouseoutTouchleaveBound);
+      this.el.addEventListener('touchleave', this._handleRangeBlurMouseoutTouchleaveBound);
+    }
+
+    /**
+     * Remove Event Handlers
+     */
+    _removeEventHandlers() {
+      this.el.removeEventListener('change', this._handleRangeChangeBound);
+
+      this.el.removeEventListener('mousedown', this._handleRangeMousedownTouchstartBound);
+      this.el.removeEventListener('touchstart', this._handleRangeMousedownTouchstartBound);
+
+      this.el.removeEventListener('input', this._handleRangeInputMousemoveTouchmoveBound);
+      this.el.removeEventListener('mousemove', this._handleRangeInputMousemoveTouchmoveBound);
+      this.el.removeEventListener('touchmove', this._handleRangeInputMousemoveTouchmoveBound);
+
+      this.el.removeEventListener('mouseup', this._handleRangeMouseupTouchendBound);
+      this.el.removeEventListener('touchend', this._handleRangeMouseupTouchendBound);
+
+      this.el.removeEventListener('blur', this._handleRangeBlurMouseoutTouchleaveBound);
+      this.el.removeEventListener('mouseout', this._handleRangeBlurMouseoutTouchleaveBound);
+      this.el.removeEventListener('touchleave', this._handleRangeBlurMouseoutTouchleaveBound);
+    }
+
+    /**
+     * Handle Range Change
+     * @param {Event} e
+     */
+    _handleRangeChange() {
+      $(this.value).html(this.$el.val());
+
+      if (!$(this.thumb).hasClass('active')) {
+        this._showRangeBubble();
+      }
+
+      let offsetLeft = this._calcRangeOffset();
+      $(this.thumb)
+        .addClass('active')
+        .css('left', offsetLeft + 'px');
+    }
+
+    /**
+     * Handle Range Mousedown and Touchstart
+     * @param {Event} e
+     */
+    _handleRangeMousedownTouchstart(e) {
+      // Set indicator value
+      $(this.value).html(this.$el.val());
+
+      this._mousedown = true;
+      this.$el.addClass('active');
+
+      if (!$(this.thumb).hasClass('active')) {
+        this._showRangeBubble();
+      }
+
+      if (e.type !== 'input') {
+        let offsetLeft = this._calcRangeOffset();
+        $(this.thumb)
+          .addClass('active')
+          .css('left', offsetLeft + 'px');
+      }
+    }
+
+    /**
+     * Handle Range Input, Mousemove and Touchmove
+     */
+    _handleRangeInputMousemoveTouchmove() {
+      if (this._mousedown) {
+        if (!$(this.thumb).hasClass('active')) {
+          this._showRangeBubble();
+        }
+
+        let offsetLeft = this._calcRangeOffset();
+        $(this.thumb)
+          .addClass('active')
+          .css('left', offsetLeft + 'px');
+        $(this.value).html(this.$el.val());
+      }
+    }
+
+    /**
+     * Handle Range Mouseup and Touchend
+     */
+    _handleRangeMouseupTouchend() {
+      this._mousedown = false;
+      this.$el.removeClass('active');
+    }
+
+    /**
+     * Handle Range Blur, Mouseout and Touchleave
+     */
+    _handleRangeBlurMouseoutTouchleave() {
+      if (!this._mousedown) {
+        let paddingLeft = parseInt(this.$el.css('padding-left'));
+        let marginLeft = 7 + paddingLeft + 'px';
+
+        if ($(this.thumb).hasClass('active')) {
+          anim.remove(this.thumb);
+          anim({
+            targets: this.thumb,
+            height: 0,
+            width: 0,
+            top: 10,
+            easing: 'easeOutQuad',
+            marginLeft: marginLeft,
+            duration: 100
+          });
+        }
+        $(this.thumb).removeClass('active');
+      }
+    }
+
+    /**
+     * Setup dropdown
+     */
+    _setupThumb() {
+      this.thumb = document.createElement('span');
+      this.value = document.createElement('span');
+      $(this.thumb).addClass('thumb');
+      $(this.value).addClass('value');
+      $(this.thumb).append(this.value);
+      this.$el.after(this.thumb);
+    }
+
+    /**
+     * Remove dropdown
+     */
+    _removeThumb() {
+      $(this.thumb).remove();
+    }
+
+    /**
+     * morph thumb into bubble
+     */
+    _showRangeBubble() {
+      let paddingLeft = parseInt(
+        $(this.thumb)
+          .parent()
+          .css('padding-left')
+      );
+      let marginLeft = -7 + paddingLeft + 'px'; // TODO: fix magic number?
+      anim.remove(this.thumb);
+      anim({
+        targets: this.thumb,
+        height: 30,
+        width: 30,
+        top: -30,
+        marginLeft: marginLeft,
+        duration: 300,
+        easing: 'easeOutQuint'
+      });
+    }
+
+    /**
+     * Calculate the offset of the thumb
+     * @return {Number}  offset in pixels
+     */
+    _calcRangeOffset() {
+      let width = this.$el.width() - 15;
+      let max = parseFloat(this.$el.attr('max')) || 100; // Range default max
+      let min = parseFloat(this.$el.attr('min')) || 0; // Range default min
+      let percent = (parseFloat(this.$el.val()) - min) / (max - min);
+      return percent * width;
+    }
+  }
+
+  M.Range = Range;
+
+  if (M.jQueryLoaded) {
+    M.initializeJqueryWrapper(Range, 'range', 'M_Range');
+  }
+
+  Range.init($('input[type=range]'));
+})(cash, M.anime);

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

@@ -0,0 +1,335 @@
+/*!
+ * Waves v0.6.4
+ * http://fian.my.id/Waves
+ *
+ * Copyright 2014 Alfiana E. Sibuea and other contributors
+ * Released under the MIT license
+ * https://github.com/fians/Waves/blob/master/LICENSE
+ */
+
+;(function(window) {
+    'use strict';
+
+    var Waves = Waves || {};
+    var $$ = document.querySelectorAll.bind(document);
+
+    // Find exact position of element
+    function isWindow(obj) {
+        return obj !== null && obj === obj.window;
+    }
+
+    function getWindow(elem) {
+        return isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView;
+    }
+
+    function offset(elem) {
+        var docElem, win,
+            box = {top: 0, left: 0},
+            doc = elem && elem.ownerDocument;
+
+        docElem = doc.documentElement;
+
+        if (typeof elem.getBoundingClientRect !== typeof undefined) {
+            box = elem.getBoundingClientRect();
+        }
+        win = getWindow(doc);
+        return {
+            top: box.top + win.pageYOffset - docElem.clientTop,
+            left: box.left + win.pageXOffset - docElem.clientLeft
+        };
+    }
+
+    function convertStyle(obj) {
+        var style = '';
+
+        for (var a in obj) {
+            if (obj.hasOwnProperty(a)) {
+                style += (a + ':' + obj[a] + ';');
+            }
+        }
+
+        return style;
+    }
+
+    var Effect = {
+
+        // Effect delay
+        duration: 750,
+
+        show: function(e, element) {
+
+            // Disable right click
+            if (e.button === 2) {
+                return false;
+            }
+
+            var el = element || this;
+
+            // Create ripple
+            var ripple = document.createElement('div');
+            ripple.className = 'waves-ripple';
+            el.appendChild(ripple);
+
+            // Get click coordinate and element witdh
+            var pos         = offset(el);
+            var relativeY   = (e.pageY - pos.top);
+            var relativeX   = (e.pageX - pos.left);
+            var scale       = 'scale('+((el.clientWidth / 100) * 10)+')';
+
+            // Support for touch devices
+            if ('touches' in e) {
+              relativeY   = (e.touches[0].pageY - pos.top);
+              relativeX   = (e.touches[0].pageX - pos.left);
+            }
+
+            // Attach data to element
+            ripple.setAttribute('data-hold', Date.now());
+            ripple.setAttribute('data-scale', scale);
+            ripple.setAttribute('data-x', relativeX);
+            ripple.setAttribute('data-y', relativeY);
+
+            // Set ripple position
+            var rippleStyle = {
+                'top': relativeY+'px',
+                'left': relativeX+'px'
+            };
+
+            ripple.className = ripple.className + ' waves-notransition';
+            ripple.setAttribute('style', convertStyle(rippleStyle));
+            ripple.className = ripple.className.replace('waves-notransition', '');
+
+            // Scale the ripple
+            rippleStyle['-webkit-transform'] = scale;
+            rippleStyle['-moz-transform'] = scale;
+            rippleStyle['-ms-transform'] = scale;
+            rippleStyle['-o-transform'] = scale;
+            rippleStyle.transform = scale;
+            rippleStyle.opacity   = '1';
+
+            rippleStyle['-webkit-transition-duration'] = Effect.duration + 'ms';
+            rippleStyle['-moz-transition-duration']    = Effect.duration + 'ms';
+            rippleStyle['-o-transition-duration']      = Effect.duration + 'ms';
+            rippleStyle['transition-duration']         = Effect.duration + 'ms';
+
+            rippleStyle['-webkit-transition-timing-function'] = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
+            rippleStyle['-moz-transition-timing-function']    = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
+            rippleStyle['-o-transition-timing-function']      = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
+            rippleStyle['transition-timing-function']         = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
+
+            ripple.setAttribute('style', convertStyle(rippleStyle));
+        },
+
+        hide: function(e) {
+            TouchHandler.touchup(e);
+
+            var el = this;
+            var width = el.clientWidth * 1.4;
+
+            // Get first ripple
+            var ripple = null;
+            var ripples = el.getElementsByClassName('waves-ripple');
+            if (ripples.length > 0) {
+                ripple = ripples[ripples.length - 1];
+            } else {
+                return false;
+            }
+
+            var relativeX   = ripple.getAttribute('data-x');
+            var relativeY   = ripple.getAttribute('data-y');
+            var scale       = ripple.getAttribute('data-scale');
+
+            // Get delay beetween mousedown and mouse leave
+            var diff = Date.now() - Number(ripple.getAttribute('data-hold'));
+            var delay = 350 - diff;
+
+            if (delay < 0) {
+                delay = 0;
+            }
+
+            // Fade out ripple after delay
+            setTimeout(function() {
+                var style = {
+                    'top': relativeY+'px',
+                    'left': relativeX+'px',
+                    'opacity': '0',
+
+                    // Duration
+                    '-webkit-transition-duration': Effect.duration + 'ms',
+                    '-moz-transition-duration': Effect.duration + 'ms',
+                    '-o-transition-duration': Effect.duration + 'ms',
+                    'transition-duration': Effect.duration + 'ms',
+                    '-webkit-transform': scale,
+                    '-moz-transform': scale,
+                    '-ms-transform': scale,
+                    '-o-transform': scale,
+                    'transform': scale,
+                };
+
+                ripple.setAttribute('style', convertStyle(style));
+
+                setTimeout(function() {
+                    try {
+                        el.removeChild(ripple);
+                    } catch(e) {
+                        return false;
+                    }
+                }, Effect.duration);
+            }, delay);
+        },
+
+        // Little hack to make <input> can perform waves effect
+        wrapInput: function(elements) {
+            for (var a = 0; a < elements.length; a++) {
+                var el = elements[a];
+
+                if (el.tagName.toLowerCase() === 'input') {
+                    var parent = el.parentNode;
+
+                    // If input already have parent just pass through
+                    if (parent.tagName.toLowerCase() === 'i' && parent.className.indexOf('waves-effect') !== -1) {
+                        continue;
+                    }
+
+                    // Put element class and style to the specified parent
+                    var wrapper = document.createElement('i');
+                    wrapper.className = el.className + ' waves-input-wrapper';
+
+                    var elementStyle = el.getAttribute('style');
+
+                    if (!elementStyle) {
+                        elementStyle = '';
+                    }
+
+                    wrapper.setAttribute('style', elementStyle);
+
+                    el.className = 'waves-button-input';
+                    el.removeAttribute('style');
+
+                    // Put element as child
+                    parent.replaceChild(wrapper, el);
+                    wrapper.appendChild(el);
+                }
+            }
+        }
+    };
+
+
+    /**
+     * Disable mousedown event for 500ms during and after touch
+     */
+    var TouchHandler = {
+        /* uses an integer rather than bool so there's no issues with
+         * needing to clear timeouts if another touch event occurred
+         * within the 500ms. Cannot mouseup between touchstart and
+         * touchend, nor in the 500ms after touchend. */
+        touches: 0,
+        allowEvent: function(e) {
+            var allow = true;
+
+            if (e.type === 'touchstart') {
+                TouchHandler.touches += 1; //push
+            } else if (e.type === 'touchend' || e.type === 'touchcancel') {
+                setTimeout(function() {
+                    if (TouchHandler.touches > 0) {
+                        TouchHandler.touches -= 1; //pop after 500ms
+                    }
+                }, 500);
+            } else if (e.type === 'mousedown' && TouchHandler.touches > 0) {
+                allow = false;
+            }
+
+            return allow;
+        },
+        touchup: function(e) {
+            TouchHandler.allowEvent(e);
+        }
+    };
+
+
+    /**
+     * Delegated click handler for .waves-effect element.
+     * returns null when .waves-effect element not in "click tree"
+     */
+    function getWavesEffectElement(e) {
+        if (TouchHandler.allowEvent(e) === false) {
+            return null;
+        }
+
+        var element = null;
+        var target = e.target || e.srcElement;
+
+        while (target.parentNode !== null) {
+            if (!(target instanceof SVGElement) && target.className.indexOf('waves-effect') !== -1) {
+                element = target;
+                break;
+            }
+            target = target.parentNode;
+        }
+        return element;
+    }
+
+    /**
+     * Bubble the click and show effect if .waves-effect elem was found
+     */
+    function showEffect(e) {
+        var element = getWavesEffectElement(e);
+
+        if (element !== null) {
+            Effect.show(e, element);
+
+            if ('ontouchstart' in window) {
+                element.addEventListener('touchend', Effect.hide, false);
+                element.addEventListener('touchcancel', Effect.hide, false);
+            }
+
+            element.addEventListener('mouseup', Effect.hide, false);
+            element.addEventListener('mouseleave', Effect.hide, false);
+            element.addEventListener('dragend', Effect.hide, false);
+        }
+    }
+
+    Waves.displayEffect = function(options) {
+        options = options || {};
+
+        if ('duration' in options) {
+            Effect.duration = options.duration;
+        }
+
+        //Wrap input inside <i> tag
+        Effect.wrapInput($$('.waves-effect'));
+
+        if ('ontouchstart' in window) {
+            document.body.addEventListener('touchstart', showEffect, false);
+        }
+
+        document.body.addEventListener('mousedown', showEffect, false);
+    };
+
+    /**
+     * Attach Waves to an input element (or any element which doesn't
+     * bubble mouseup/mousedown events).
+     *   Intended to be used with dynamically loaded forms/inputs, or
+     * where the user doesn't want a delegated click handler.
+     */
+    Waves.attach = function(element) {
+        //FUTURE: automatically add waves classes and allow users
+        // to specify them with an options param? Eg. light/classic/button
+        if (element.tagName.toLowerCase() === 'input') {
+            Effect.wrapInput([element]);
+            element = element.parentNode;
+        }
+
+        if ('ontouchstart' in window) {
+            element.addEventListener('touchstart', showEffect, false);
+        }
+
+        element.addEventListener('mousedown', showEffect, false);
+    };
+
+    window.Waves = Waves;
+
+    document.addEventListener('DOMContentLoaded', function() {
+        Waves.displayEffect();
+    }, false);
+
+})(window);