administrate-materialize-theme 0.1.0

data/app/assets/javascripts/administrate-materialize-theme/modal.js

@@ -0,0 +1,382 @@
+(function($, anim) {
+  'use strict';
+
+  let _defaults = {
+    opacity: 0.5,
+    inDuration: 250,
+    outDuration: 250,
+    onOpenStart: null,
+    onOpenEnd: null,
+    onCloseStart: null,
+    onCloseEnd: null,
+    preventScrolling: true,
+    dismissible: true,
+    startingTop: '4%',
+    endingTop: '10%'
+  };
+
+  /**
+   * @class
+   *
+   */
+  class Modal extends Component {
+    /**
+     * Construct Modal instance and set up overlay
+     * @constructor
+     * @param {Element} el
+     * @param {Object} options
+     */
+    constructor(el, options) {
+      super(Modal, el, options);
+
+      this.el.M_Modal = this;
+
+      /**
+       * Options for the modal
+       * @member Modal#options
+       * @prop {Number} [opacity=0.5] - Opacity of the modal overlay
+       * @prop {Number} [inDuration=250] - Length in ms of enter transition
+       * @prop {Number} [outDuration=250] - Length in ms of exit transition
+       * @prop {Function} onOpenStart - Callback function called before modal is opened
+       * @prop {Function} onOpenEnd - Callback function called after modal is opened
+       * @prop {Function} onCloseStart - Callback function called before modal is closed
+       * @prop {Function} onCloseEnd - Callback function called after modal is closed
+       * @prop {Boolean} [dismissible=true] - Allow modal to be dismissed by keyboard or overlay click
+       * @prop {String} [startingTop='4%'] - startingTop
+       * @prop {String} [endingTop='10%'] - endingTop
+       */
+      this.options = $.extend({}, Modal.defaults, options);
+
+      /**
+       * Describes open/close state of modal
+       * @type {Boolean}
+       */
+      this.isOpen = false;
+
+      this.id = this.$el.attr('id');
+      this._openingTrigger = undefined;
+      this.$overlay = $('<div class="modal-overlay"></div>');
+      this.el.tabIndex = 0;
+      this._nthModalOpened = 0;
+
+      Modal._count++;
+      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_Modal;
+    }
+
+    /**
+     * Teardown component
+     */
+    destroy() {
+      Modal._count--;
+      this._removeEventHandlers();
+      this.el.removeAttribute('style');
+      this.$overlay.remove();
+      this.el.M_Modal = undefined;
+    }
+
+    /**
+     * Setup Event Handlers
+     */
+    _setupEventHandlers() {
+      this._handleOverlayClickBound = this._handleOverlayClick.bind(this);
+      this._handleModalCloseClickBound = this._handleModalCloseClick.bind(this);
+
+      if (Modal._count === 1) {
+        document.body.addEventListener('click', this._handleTriggerClick);
+      }
+      this.$overlay[0].addEventListener('click', this._handleOverlayClickBound);
+      this.el.addEventListener('click', this._handleModalCloseClickBound);
+    }
+
+    /**
+     * Remove Event Handlers
+     */
+    _removeEventHandlers() {
+      if (Modal._count === 0) {
+        document.body.removeEventListener('click', this._handleTriggerClick);
+      }
+      this.$overlay[0].removeEventListener('click', this._handleOverlayClickBound);
+      this.el.removeEventListener('click', this._handleModalCloseClickBound);
+    }
+
+    /**
+     * Handle Trigger Click
+     * @param {Event} e
+     */
+    _handleTriggerClick(e) {
+      let $trigger = $(e.target).closest('.modal-trigger');
+      if ($trigger.length) {
+        let modalId = M.getIdFromTrigger($trigger[0]);
+        let modalInstance = document.getElementById(modalId).M_Modal;
+        if (modalInstance) {
+          modalInstance.open($trigger);
+        }
+        e.preventDefault();
+      }
+    }
+
+    /**
+     * Handle Overlay Click
+     */
+    _handleOverlayClick() {
+      if (this.options.dismissible) {
+        this.close();
+      }
+    }
+
+    /**
+     * Handle Modal Close Click
+     * @param {Event} e
+     */
+    _handleModalCloseClick(e) {
+      let $closeTrigger = $(e.target).closest('.modal-close');
+      if ($closeTrigger.length) {
+        this.close();
+      }
+    }
+
+    /**
+     * Handle Keydown
+     * @param {Event} e
+     */
+    _handleKeydown(e) {
+      // ESC key
+      if (e.keyCode === 27 && this.options.dismissible) {
+        this.close();
+      }
+    }
+
+    /**
+     * Handle Focus
+     * @param {Event} e
+     */
+    _handleFocus(e) {
+      // Only trap focus if this modal is the last model opened (prevents loops in nested modals).
+      if (!this.el.contains(e.target) && this._nthModalOpened === Modal._modalsOpen) {
+        this.el.focus();
+      }
+    }
+
+    /**
+     * Animate in modal
+     */
+    _animateIn() {
+      // Set initial styles
+      $.extend(this.el.style, {
+        display: 'block',
+        opacity: 0
+      });
+      $.extend(this.$overlay[0].style, {
+        display: 'block',
+        opacity: 0
+      });
+
+      // Animate overlay
+      anim({
+        targets: this.$overlay[0],
+        opacity: this.options.opacity,
+        duration: this.options.inDuration,
+        easing: 'easeOutQuad'
+      });
+
+      // Define modal animation options
+      let enterAnimOptions = {
+        targets: this.el,
+        duration: this.options.inDuration,
+        easing: 'easeOutCubic',
+        // Handle modal onOpenEnd callback
+        complete: () => {
+          if (typeof this.options.onOpenEnd === 'function') {
+            this.options.onOpenEnd.call(this, this.el, this._openingTrigger);
+          }
+        }
+      };
+
+      // Bottom sheet animation
+      if (this.el.classList.contains('bottom-sheet')) {
+        $.extend(enterAnimOptions, {
+          bottom: 0,
+          opacity: 1
+        });
+        anim(enterAnimOptions);
+
+        // Normal modal animation
+      } else {
+        $.extend(enterAnimOptions, {
+          top: [this.options.startingTop, this.options.endingTop],
+          opacity: 1,
+          scaleX: [0.8, 1],
+          scaleY: [0.8, 1]
+        });
+        anim(enterAnimOptions);
+      }
+    }
+
+    /**
+     * Animate out modal
+     */
+    _animateOut() {
+      // Animate overlay
+      anim({
+        targets: this.$overlay[0],
+        opacity: 0,
+        duration: this.options.outDuration,
+        easing: 'easeOutQuart'
+      });
+
+      // Define modal animation options
+      let exitAnimOptions = {
+        targets: this.el,
+        duration: this.options.outDuration,
+        easing: 'easeOutCubic',
+        // Handle modal ready callback
+        complete: () => {
+          this.el.style.display = 'none';
+          this.$overlay.remove();
+
+          // Call onCloseEnd callback
+          if (typeof this.options.onCloseEnd === 'function') {
+            this.options.onCloseEnd.call(this, this.el);
+          }
+        }
+      };
+
+      // Bottom sheet animation
+      if (this.el.classList.contains('bottom-sheet')) {
+        $.extend(exitAnimOptions, {
+          bottom: '-100%',
+          opacity: 0
+        });
+        anim(exitAnimOptions);
+
+        // Normal modal animation
+      } else {
+        $.extend(exitAnimOptions, {
+          top: [this.options.endingTop, this.options.startingTop],
+          opacity: 0,
+          scaleX: 0.8,
+          scaleY: 0.8
+        });
+        anim(exitAnimOptions);
+      }
+    }
+
+    /**
+     * Open Modal
+     * @param {cash} [$trigger]
+     */
+    open($trigger) {
+      if (this.isOpen) {
+        return;
+      }
+
+      this.isOpen = true;
+      Modal._modalsOpen++;
+      this._nthModalOpened = Modal._modalsOpen;
+
+      // Set Z-Index based on number of currently open modals
+      this.$overlay[0].style.zIndex = 1000 + Modal._modalsOpen * 2;
+      this.el.style.zIndex = 1000 + Modal._modalsOpen * 2 + 1;
+
+      // Set opening trigger, undefined indicates modal was opened by javascript
+      this._openingTrigger = !!$trigger ? $trigger[0] : undefined;
+
+      // onOpenStart callback
+      if (typeof this.options.onOpenStart === 'function') {
+        this.options.onOpenStart.call(this, this.el, this._openingTrigger);
+      }
+
+      if (this.options.preventScrolling) {
+        document.body.style.overflow = 'hidden';
+      }
+
+      this.el.classList.add('open');
+      this.el.insertAdjacentElement('afterend', this.$overlay[0]);
+
+      if (this.options.dismissible) {
+        this._handleKeydownBound = this._handleKeydown.bind(this);
+        this._handleFocusBound = this._handleFocus.bind(this);
+        document.addEventListener('keydown', this._handleKeydownBound);
+        document.addEventListener('focus', this._handleFocusBound, true);
+      }
+
+      anim.remove(this.el);
+      anim.remove(this.$overlay[0]);
+      this._animateIn();
+
+      // Focus modal
+      this.el.focus();
+
+      return this;
+    }
+
+    /**
+     * Close Modal
+     */
+    close() {
+      if (!this.isOpen) {
+        return;
+      }
+
+      this.isOpen = false;
+      Modal._modalsOpen--;
+      this._nthModalOpened = 0;
+
+      // Call onCloseStart callback
+      if (typeof this.options.onCloseStart === 'function') {
+        this.options.onCloseStart.call(this, this.el);
+      }
+
+      this.el.classList.remove('open');
+
+      // Enable body scrolling only if there are no more modals open.
+      if (Modal._modalsOpen === 0) {
+        document.body.style.overflow = '';
+      }
+
+      if (this.options.dismissible) {
+        document.removeEventListener('keydown', this._handleKeydownBound);
+        document.removeEventListener('focus', this._handleFocusBound, true);
+      }
+
+      anim.remove(this.el);
+      anim.remove(this.$overlay[0]);
+      this._animateOut();
+      return this;
+    }
+  }
+
+  /**
+   * @static
+   * @memberof Modal
+   */
+  Modal._modalsOpen = 0;
+
+  /**
+   * @static
+   * @memberof Modal
+   */
+  Modal._count = 0;
+
+  M.Modal = Modal;
+
+  if (M.jQueryLoaded) {
+    M.initializeJqueryWrapper(Modal, 'modal', 'M_Modal');
+  }
+})(cash, M.anime);

data/app/assets/javascripts/administrate-materialize-theme/parallax.js

@@ -0,0 +1,138 @@
+(function($) {
+  'use strict';
+
+  let _defaults = {
+    responsiveThreshold: 0 // breakpoint for swipeable
+  };
+
+  class Parallax extends Component {
+    constructor(el, options) {
+      super(Parallax, el, options);
+
+      this.el.M_Parallax = this;
+
+      /**
+       * Options for the Parallax
+       * @member Parallax#options
+       * @prop {Number} responsiveThreshold
+       */
+      this.options = $.extend({}, Parallax.defaults, options);
+      this._enabled = window.innerWidth > this.options.responsiveThreshold;
+
+      this.$img = this.$el.find('img').first();
+      this.$img.each(function() {
+        let el = this;
+        if (el.complete) $(el).trigger('load');
+      });
+
+      this._updateParallax();
+      this._setupEventHandlers();
+      this._setupStyles();
+
+      Parallax._parallaxes.push(this);
+    }
+
+    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_Parallax;
+    }
+
+    /**
+     * Teardown component
+     */
+    destroy() {
+      Parallax._parallaxes.splice(Parallax._parallaxes.indexOf(this), 1);
+      this.$img[0].style.transform = '';
+      this._removeEventHandlers();
+
+      this.$el[0].M_Parallax = undefined;
+    }
+
+    static _handleScroll() {
+      for (let i = 0; i < Parallax._parallaxes.length; i++) {
+        let parallaxInstance = Parallax._parallaxes[i];
+        parallaxInstance._updateParallax.call(parallaxInstance);
+      }
+    }
+
+    static _handleWindowResize() {
+      for (let i = 0; i < Parallax._parallaxes.length; i++) {
+        let parallaxInstance = Parallax._parallaxes[i];
+        parallaxInstance._enabled =
+          window.innerWidth > parallaxInstance.options.responsiveThreshold;
+      }
+    }
+
+    _setupEventHandlers() {
+      this._handleImageLoadBound = this._handleImageLoad.bind(this);
+      this.$img[0].addEventListener('load', this._handleImageLoadBound);
+
+      if (Parallax._parallaxes.length === 0) {
+        Parallax._handleScrollThrottled = M.throttle(Parallax._handleScroll, 5);
+        window.addEventListener('scroll', Parallax._handleScrollThrottled);
+
+        Parallax._handleWindowResizeThrottled = M.throttle(Parallax._handleWindowResize, 5);
+        window.addEventListener('resize', Parallax._handleWindowResizeThrottled);
+      }
+    }
+
+    _removeEventHandlers() {
+      this.$img[0].removeEventListener('load', this._handleImageLoadBound);
+
+      if (Parallax._parallaxes.length === 0) {
+        window.removeEventListener('scroll', Parallax._handleScrollThrottled);
+        window.removeEventListener('resize', Parallax._handleWindowResizeThrottled);
+      }
+    }
+
+    _setupStyles() {
+      this.$img[0].style.opacity = 1;
+    }
+
+    _handleImageLoad() {
+      this._updateParallax();
+    }
+
+    _updateParallax() {
+      let containerHeight = this.$el.height() > 0 ? this.el.parentNode.offsetHeight : 500;
+      let imgHeight = this.$img[0].offsetHeight;
+      let parallaxDist = imgHeight - containerHeight;
+      let bottom = this.$el.offset().top + containerHeight;
+      let top = this.$el.offset().top;
+      let scrollTop = M.getDocumentScrollTop();
+      let windowHeight = window.innerHeight;
+      let windowBottom = scrollTop + windowHeight;
+      let percentScrolled = (windowBottom - top) / (containerHeight + windowHeight);
+      let parallax = parallaxDist * percentScrolled;
+
+      if (!this._enabled) {
+        this.$img[0].style.transform = '';
+      } else if (bottom > scrollTop && top < scrollTop + windowHeight) {
+        this.$img[0].style.transform = `translate3D(-50%, ${parallax}px, 0)`;
+      }
+    }
+  }
+
+  /**
+   * @static
+   * @memberof Parallax
+   */
+  Parallax._parallaxes = [];
+
+  M.Parallax = Parallax;
+
+  if (M.jQueryLoaded) {
+    M.initializeJqueryWrapper(Parallax, 'parallax', 'M_Parallax');
+  }
+})(cash);