j1-template 2020.0.19 → 2020.0.25

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

@@ -0,0 +1,409 @@
+(function($, anim) {
+  'use strict';
+
+  let _defaults = {
+    direction: 'top',
+    hoverEnabled: true,
+    toolbarEnabled: false
+  };
+
+  $.fn.reverse = [].reverse;
+
+  // jadams, 2020-10-10, added class from main (materialize.js)
+  //
+  class Component {
+    /**
+     * Generic constructor for all components
+     * @constructor
+     * @param {Element} el
+     * @param {Object} options
+     */
+    constructor(classDef, el, options) {
+      // Display error if el is valid HTML Element
+      if (!(el instanceof Element)) {
+        console.error(Error(el + ' is not an HTML Element'));
+      }
+
+      // If exists, destroy and reinitialize in child
+      let ins = classDef.getInstance(el);
+      if (!!ins) {
+        ins.destroy();
+      }
+
+      this.el = el;
+      this.$el = cash(el);
+    }
+
+    /**
+     * Initializes components
+     * @param {class} classDef
+     * @param {Element | NodeList | jQuery} els
+     * @param {Object} options
+     */
+    static init(classDef, els, options) {
+      let instances = null;
+      if (els instanceof Element) {
+        instances = new classDef(els, options);
+      } else if (!!els && (els.jquery || els.cash || els instanceof NodeList)) {
+        let instancesArr = [];
+        for (let i = 0; i < els.length; i++) {
+          instancesArr.push(new classDef(els[i], options));
+        }
+        instances = instancesArr;
+      }
+      return instances;
+    }
+  }
+
+  /**
+   * @class
+   *
+   */
+  class FloatingActionButton extends Component {
+    /**
+     * Construct FloatingActionButton instance
+     * @constructor
+     * @param {Element} el
+     * @param {Object} options
+     */
+    constructor(el, options) {
+      super(FloatingActionButton, el, options);
+      this.el.M_FloatingActionButton = this;
+
+      /**
+       * Options for the fab
+       * @member FloatingActionButton#options
+       * @prop {Boolean} [direction] - Direction fab menu opens
+       * @prop {Boolean} [hoverEnabled=true] - Enable hover vs click
+       * @prop {Boolean} [toolbarEnabled=false] - Enable toolbar transition
+       */
+      this.options = $.extend({}, FloatingActionButton.defaults, options);
+
+      this.isOpen               = false;
+      this.$anchor              = this.$el.children('a').first();
+      this.$menu                = this.$el.children('ul').first();
+      this.$floatingBtns        = this.$el.find('ul .btn-floating');
+      this.$floatingBtnsReverse = this.$el.find('ul .btn-floating').reverse();
+      this.offsetY = 0;
+      this.offsetX = 0;
+
+      this.$el.addClass(`direction-${this.options.direction}`);
+      if (this.options.direction === 'top') {
+        this.offsetY = 40;
+      } else if (this.options.direction === 'right') {
+        this.offsetX = -40;
+      } else if (this.options.direction === 'bottom') {
+        this.offsetY = -40;
+      } else {
+        this.offsetX = 40;
+      }
+      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_FloatingActionButton;
+    }
+
+    /**
+     * Teardown component
+     */
+    destroy() {
+      this._removeEventHandlers();
+      this.el.M_FloatingActionButton = undefined;
+    }
+
+    /**
+     * Setup Event Handlers
+     */
+    _setupEventHandlers() {
+      this._handleFABClickBound   = this._handleFABClick.bind(this);
+      this._handleOpenBound       = this.open.bind(this);
+      this._handleCloseBound      = this.close.bind(this);
+
+      if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
+        this.el.addEventListener('mouseenter', this._handleOpenBound);
+        this.el.addEventListener('mouseleave', this._handleCloseBound);
+      } else {
+        this.el.addEventListener('click', this._handleFABClickBound);
+      }
+    }
+
+    /**
+     * Remove Event Handlers
+     */
+    _removeEventHandlers() {
+      if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
+        this.el.removeEventListener('mouseenter', this._handleOpenBound);
+        this.el.removeEventListener('mouseleave', this._handleCloseBound);
+      } else {
+        this.el.removeEventListener('click', this._handleFABClickBound);
+      }
+    }
+
+    /**
+     * Handle FAB Click
+     */
+    _handleFABClick() {
+      if (this.isOpen) {
+        this.close();
+      } else {
+        this.open();
+      }
+    }
+
+    /**
+     * Handle Document Click
+     * @param {Event} e
+     */
+    _handleDocumentClick(e) {
+      if (!$(e.target).closest(this.$menu).length) {
+        this.close();
+      }
+    }
+
+    /**
+     * Open FAB
+     */
+    open() {
+      if (this.isOpen) {
+        return;
+      }
+
+      if (this.options.toolbarEnabled) {
+        this._animateInToolbar();
+      } else {
+        this._animateInFAB();
+      }
+      this.isOpen = true;
+    }
+
+    /**
+     * Close FAB
+     */
+    close() {
+      if (!this.isOpen) {
+        return;
+      }
+
+      if (this.options.toolbarEnabled) {
+        window.removeEventListener('scroll', this._handleCloseBound, true);
+        document.body.removeEventListener('click', this._handleDocumentClickBound, true);
+        this._animateOutToolbar();
+      } else {
+        this._animateOutFAB();
+      }
+      this.isOpen = false;
+    }
+
+    /**
+     * Classic FAB Menu open
+     */
+    _animateInFAB() {
+      this.$el.addClass('active');
+
+      let time = 0;
+      this.$floatingBtnsReverse.each((el) => {
+        anim({
+          targets: el,
+          opacity: 1,
+          scale: [0.4, 1],
+          translateY: [this.offsetY, 0],
+          translateX: [this.offsetX, 0],
+          duration: 275,
+          delay: time,
+          easing: 'easeInOutQuad'
+        });
+        time += 40;
+      });
+    }
+
+    /**
+     * Classic FAB Menu close
+     */
+    _animateOutFAB() {
+      this.$floatingBtnsReverse.each((el) => {
+        anim.remove(el);
+        anim({
+          targets: el,
+          opacity: 0,
+          scale: 0.4,
+          translateY: this.offsetY,
+          translateX: this.offsetX,
+          duration: 175,
+          easing: 'easeOutQuad',
+          complete: () => {
+            this.$el.removeClass('active');
+          }
+        });
+      });
+    }
+
+    /**
+     * Toolbar transition Menu open
+     */
+    _animateInToolbar() {
+      let scaleFactor;
+      let windowWidth     = window.innerWidth;
+      let windowHeight    = window.innerHeight;
+      let btnRect         = this.el.getBoundingClientRect();
+      let backdrop        = $('<div class="fab-backdrop"></div>');
+      let fabColor        = this.$anchor.css('background-color');
+
+      this.$anchor.append(backdrop);
+
+      this.offsetX    = btnRect.left - windowWidth / 2 + btnRect.width / 2;
+      this.offsetY    = windowHeight - btnRect.bottom;
+      scaleFactor     = windowWidth / backdrop[0].clientWidth;
+      this.btnBottom  = btnRect.bottom;
+      this.btnLeft    = btnRect.left;
+      this.btnWidth   = btnRect.width;
+
+      // Set initial state
+      this.$el.addClass('active');
+      this.$el.css({
+        'text-align': 'center',
+        width: '100%',
+        bottom: 0,
+        left: 0,
+        transform: 'translateX(' + this.offsetX + 'px)',
+        transition: 'none'
+      });
+      this.$anchor.css({
+        transform: 'translateY(' + -this.offsetY + 'px)',
+        transition: 'none'
+      });
+      backdrop.css({
+        'background-color': fabColor
+      });
+
+      setTimeout(() => {
+        this.$el.css({
+          transform: '',
+          transition:
+            'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s'
+        });
+        this.$anchor.css({
+          overflow: 'visible',
+          transform: '',
+          transition: 'transform .2s'
+        });
+
+        setTimeout(() => {
+          this.$el.css({
+            overflow: 'hidden',
+            'background-color': fabColor
+          });
+          backdrop.css({
+            transform: 'scale(' + scaleFactor + ')',
+            transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
+          });
+          this.$menu
+            .children('li')
+            .children('a')
+            .css({
+              opacity: 1
+            });
+
+          // Scroll to close
+          this._handleDocumentClickBound = this._handleDocumentClick.bind(this);
+          window.addEventListener('scroll', this._handleCloseBound, true);
+          document.body.addEventListener('click', this._handleDocumentClickBound, true);
+        }, 100);
+      }, 0);
+    }
+
+    /**
+     * Toolbar transition Menu close
+     */
+    _animateOutToolbar() {
+      let windowWidth   = window.innerWidth;
+      let windowHeight  = window.innerHeight;
+      let backdrop      = this.$el.find('.fab-backdrop');
+      let fabColor      = this.$anchor.css('background-color');
+
+      this.offsetX      = this.btnLeft - windowWidth / 2 + this.btnWidth / 2;
+      this.offsetY      = windowHeight - this.btnBottom;
+
+      // Hide backdrop
+      this.$el.removeClass('active');
+      this.$el.css({
+        'background-color': 'transparent',
+        transition: 'none'
+      });
+      this.$anchor.css({
+        transition: 'none'
+      });
+      backdrop.css({
+        transform: 'scale(0)',
+        'background-color': fabColor
+      });
+      this.$menu
+        .children('li')
+        .children('a')
+        .css({
+          opacity: ''
+        });
+
+      setTimeout(() => {
+        backdrop.remove();
+
+        // Set initial state.
+        this.$el.css({
+          'text-align': '',
+          width: '',
+          bottom: '',
+          left: '',
+          overflow: '',
+          'background-color': '',
+          transform: 'translate3d(' + -this.offsetX + 'px,0,0)'
+        });
+        this.$anchor.css({
+          overflow: '',
+          transform: 'translate3d(0,' + this.offsetY + 'px,0)'
+        });
+
+        setTimeout(() => {
+          this.$el.css({
+            transform: 'translate3d(0,0,0)',
+            transition: 'transform .2s'
+          });
+          this.$anchor.css({
+            transform: 'translate3d(0,0,0)',
+            transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
+          });
+        }, 20);
+      }, 200);
+    }
+  }
+
+  // jadams, 2020-10-10: moved to j1 name space
+  //
+  // M.FloatingActionButton = FloatingActionButton;
+  j1.FloatingActionButton = FloatingActionButton;
+
+  // jadams, 2020-10-10: check how to transform function to jQuery
+  //
+  // if (M.jQueryLoaded) {
+  //   M.initializeJqueryWrapper(
+  //     FloatingActionButton,
+  //     'floatingActionButton',
+  //     'M_FloatingActionButton'
+  //   );
+  // }
+
+  //  jadams, 2020-10-10: TODO: check if anime could be a replacement
+  //  for (huge) animate.css
+
+})(cash, j1.anime);

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

@@ -0,0 +1,40 @@
+(function($, anim) {
+  $(document).on('click', '.card', function(e) {
+    if ($(this).children('.card-reveal').length) {
+      var $card = $(e.target).closest('.card');
+      if ($card.data('initialOverflow') === undefined) {
+        $card.data(
+          'initialOverflow',
+          $card.css('overflow') === undefined ? '' : $card.css('overflow')
+        );
+      }
+      let $cardReveal = $(this).find('.card-reveal');
+      if (
+        $(e.target).is($('.card-reveal .card-title')) ||
+        $(e.target).is($('.card-reveal .card-title i'))
+      ) {
+        // Make Reveal animate down and display none
+        anim({
+          targets: $cardReveal[0],
+          translateY: 0,
+          duration: 225,
+          easing: 'easeInOutQuad',
+          complete: function(anim) {
+            let el = anim.animatables[0].target;
+            $(el).css({ display: 'none' });
+            $card.css('overflow', $card.data('initialOverflow'));
+          }
+        });
+      } else if ($(e.target).is($('.card .activator')) || $(e.target).is($('.card .activator i'))) {
+        $card.css('overflow', 'hidden');
+        $cardReveal.css({ display: 'block' });
+        anim({
+          targets: $cardReveal[0],
+          translateY: '-100%',
+          duration: 300,
+          easing: 'easeInOutQuad'
+        });
+      }
+    }
+  });
+})(cash, M.anime);

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

@@ -0,0 +1,717 @@
+(function($) {
+  'use strict';
+
+  let _defaults = {
+    duration: 200, // ms
+    dist: -100, // zoom scale TODO: make this more intuitive as an option
+    shift: 0, // spacing for center image
+    padding: 0, // Padding between non center items
+    numVisible: 5, // Number of visible items in carousel
+    fullWidth: false, // Change to full width styles
+    indicators: false, // Toggle indicators
+    noWrap: false, // Don't wrap around and cycle through items.
+    onCycleTo: null // Callback for when a new slide is cycled to.
+  };
+
+  /**
+   * @class
+   *
+   */
+  class Carousel extends Component {
+    /**
+     * Construct Carousel instance
+     * @constructor
+     * @param {Element} el
+     * @param {Object} options
+     */
+    constructor(el, options) {
+      super(Carousel, el, options);
+
+      this.el.M_Carousel = this;
+
+      /**
+       * Options for the carousel
+       * @member Carousel#options
+       * @prop {Number} duration
+       * @prop {Number} dist
+       * @prop {Number} shift
+       * @prop {Number} padding
+       * @prop {Number} numVisible
+       * @prop {Boolean} fullWidth
+       * @prop {Boolean} indicators
+       * @prop {Boolean} noWrap
+       * @prop {Function} onCycleTo
+       */
+      this.options = $.extend({}, Carousel.defaults, options);
+
+      // Setup
+      this.hasMultipleSlides = this.$el.find('.carousel-item').length > 1;
+      this.showIndicators = this.options.indicators && this.hasMultipleSlides;
+      this.noWrap = this.options.noWrap || !this.hasMultipleSlides;
+      this.pressed = false;
+      this.dragged = false;
+      this.offset = this.target = 0;
+      this.images = [];
+      this.itemWidth = this.$el
+        .find('.carousel-item')
+        .first()
+        .innerWidth();
+      this.itemHeight = this.$el
+        .find('.carousel-item')
+        .first()
+        .innerHeight();
+      this.dim = this.itemWidth * 2 + this.options.padding || 1; // Make sure dim is non zero for divisions.
+      this._autoScrollBound = this._autoScroll.bind(this);
+      this._trackBound = this._track.bind(this);
+
+      // Full Width carousel setup
+      if (this.options.fullWidth) {
+        this.options.dist = 0;
+        this._setCarouselHeight();
+
+        // Offset fixed items when indicators.
+        if (this.showIndicators) {
+          this.$el.find('.carousel-fixed-item').addClass('with-indicators');
+        }
+      }
+
+      // Iterate through slides
+      this.$indicators = $('<ul class="indicators"></ul>');
+      this.$el.find('.carousel-item').each((el, i) => {
+        this.images.push(el);
+        if (this.showIndicators) {
+          let $indicator = $('<li class="indicator-item"></li>');
+
+          // Add active to first by default.
+          if (i === 0) {
+            $indicator[0].classList.add('active');
+          }
+
+          this.$indicators.append($indicator);
+        }
+      });
+      if (this.showIndicators) {
+        this.$el.append(this.$indicators);
+      }
+      this.count = this.images.length;
+
+      // Cap numVisible at count
+      this.options.numVisible = Math.min(this.count, this.options.numVisible);
+
+      // Setup cross browser string
+      this.xform = 'transform';
+      ['webkit', 'Moz', 'O', 'ms'].every((prefix) => {
+        var e = prefix + 'Transform';
+        if (typeof document.body.style[e] !== 'undefined') {
+          this.xform = e;
+          return false;
+        }
+        return true;
+      });
+
+      this._setupEventHandlers();
+      this._scroll(this.offset);
+    }
+
+    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_Carousel;
+    }
+
+    /**
+     * Teardown component
+     */
+    destroy() {
+      this._removeEventHandlers();
+      this.el.M_Carousel = undefined;
+    }
+
+    /**
+     * Setup Event Handlers
+     */
+    _setupEventHandlers() {
+      this._handleCarouselTapBound = this._handleCarouselTap.bind(this);
+      this._handleCarouselDragBound = this._handleCarouselDrag.bind(this);
+      this._handleCarouselReleaseBound = this._handleCarouselRelease.bind(this);
+      this._handleCarouselClickBound = this._handleCarouselClick.bind(this);
+
+      if (typeof window.ontouchstart !== 'undefined') {
+        this.el.addEventListener('touchstart', this._handleCarouselTapBound);
+        this.el.addEventListener('touchmove', this._handleCarouselDragBound);
+        this.el.addEventListener('touchend', this._handleCarouselReleaseBound);
+      }
+
+      this.el.addEventListener('mousedown', this._handleCarouselTapBound);
+      this.el.addEventListener('mousemove', this._handleCarouselDragBound);
+      this.el.addEventListener('mouseup', this._handleCarouselReleaseBound);
+      this.el.addEventListener('mouseleave', this._handleCarouselReleaseBound);
+      this.el.addEventListener('click', this._handleCarouselClickBound);
+
+      if (this.showIndicators && this.$indicators) {
+        this._handleIndicatorClickBound = this._handleIndicatorClick.bind(this);
+        this.$indicators.find('.indicator-item').each((el, i) => {
+          el.addEventListener('click', this._handleIndicatorClickBound);
+        });
+      }
+
+      // Resize
+      let throttledResize = M.throttle(this._handleResize, 200);
+      this._handleThrottledResizeBound = throttledResize.bind(this);
+
+      window.addEventListener('resize', this._handleThrottledResizeBound);
+    }
+
+    /**
+     * Remove Event Handlers
+     */
+    _removeEventHandlers() {
+      if (typeof window.ontouchstart !== 'undefined') {
+        this.el.removeEventListener('touchstart', this._handleCarouselTapBound);
+        this.el.removeEventListener('touchmove', this._handleCarouselDragBound);
+        this.el.removeEventListener('touchend', this._handleCarouselReleaseBound);
+      }
+      this.el.removeEventListener('mousedown', this._handleCarouselTapBound);
+      this.el.removeEventListener('mousemove', this._handleCarouselDragBound);
+      this.el.removeEventListener('mouseup', this._handleCarouselReleaseBound);
+      this.el.removeEventListener('mouseleave', this._handleCarouselReleaseBound);
+      this.el.removeEventListener('click', this._handleCarouselClickBound);
+
+      if (this.showIndicators && this.$indicators) {
+        this.$indicators.find('.indicator-item').each((el, i) => {
+          el.removeEventListener('click', this._handleIndicatorClickBound);
+        });
+      }
+
+      window.removeEventListener('resize', this._handleThrottledResizeBound);
+    }
+
+    /**
+     * Handle Carousel Tap
+     * @param {Event} e
+     */
+    _handleCarouselTap(e) {
+      // Fixes firefox draggable image bug
+      if (e.type === 'mousedown' && $(e.target).is('img')) {
+        e.preventDefault();
+      }
+      this.pressed = true;
+      this.dragged = false;
+      this.verticalDragged = false;
+      this.reference = this._xpos(e);
+      this.referenceY = this._ypos(e);
+
+      this.velocity = this.amplitude = 0;
+      this.frame = this.offset;
+      this.timestamp = Date.now();
+      clearInterval(this.ticker);
+      this.ticker = setInterval(this._trackBound, 100);
+    }
+
+    /**
+     * Handle Carousel Drag
+     * @param {Event} e
+     */
+    _handleCarouselDrag(e) {
+      let x, y, delta, deltaY;
+      if (this.pressed) {
+        x = this._xpos(e);
+        y = this._ypos(e);
+        delta = this.reference - x;
+        deltaY = Math.abs(this.referenceY - y);
+        if (deltaY < 30 && !this.verticalDragged) {
+          // If vertical scrolling don't allow dragging.
+          if (delta > 2 || delta < -2) {
+            this.dragged = true;
+            this.reference = x;
+            this._scroll(this.offset + delta);
+          }
+        } else if (this.dragged) {
+          // If dragging don't allow vertical scroll.
+          e.preventDefault();
+          e.stopPropagation();
+          return false;
+        } else {
+          // Vertical scrolling.
+          this.verticalDragged = true;
+        }
+      }
+
+      if (this.dragged) {
+        // If dragging don't allow vertical scroll.
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      }
+    }
+
+    /**
+     * Handle Carousel Release
+     * @param {Event} e
+     */
+    _handleCarouselRelease(e) {
+      if (this.pressed) {
+        this.pressed = false;
+      } else {
+        return;
+      }
+
+      clearInterval(this.ticker);
+      this.target = this.offset;
+      if (this.velocity > 10 || this.velocity < -10) {
+        this.amplitude = 0.9 * this.velocity;
+        this.target = this.offset + this.amplitude;
+      }
+      this.target = Math.round(this.target / this.dim) * this.dim;
+
+      // No wrap of items.
+      if (this.noWrap) {
+        if (this.target >= this.dim * (this.count - 1)) {
+          this.target = this.dim * (this.count - 1);
+        } else if (this.target < 0) {
+          this.target = 0;
+        }
+      }
+      this.amplitude = this.target - this.offset;
+      this.timestamp = Date.now();
+      requestAnimationFrame(this._autoScrollBound);
+
+      if (this.dragged) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      return false;
+    }
+
+    /**
+     * Handle Carousel CLick
+     * @param {Event} e
+     */
+    _handleCarouselClick(e) {
+      // Disable clicks if carousel was dragged.
+      if (this.dragged) {
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      } else if (!this.options.fullWidth) {
+        let clickedIndex = $(e.target)
+          .closest('.carousel-item')
+          .index();
+        let diff = this._wrap(this.center) - clickedIndex;
+
+        // Disable clicks if carousel was shifted by click
+        if (diff !== 0) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        this._cycleTo(clickedIndex);
+      }
+    }
+
+    /**
+     * Handle Indicator CLick
+     * @param {Event} e
+     */
+    _handleIndicatorClick(e) {
+      e.stopPropagation();
+
+      let indicator = $(e.target).closest('.indicator-item');
+      if (indicator.length) {
+        this._cycleTo(indicator.index());
+      }
+    }
+
+    /**
+     * Handle Throttle Resize
+     * @param {Event} e
+     */
+    _handleResize(e) {
+      if (this.options.fullWidth) {
+        this.itemWidth = this.$el
+          .find('.carousel-item')
+          .first()
+          .innerWidth();
+        this.imageHeight = this.$el.find('.carousel-item.active').height();
+        this.dim = this.itemWidth * 2 + this.options.padding;
+        this.offset = this.center * 2 * this.itemWidth;
+        this.target = this.offset;
+        this._setCarouselHeight(true);
+      } else {
+        this._scroll();
+      }
+    }
+
+    /**
+     * Set carousel height based on first slide
+     * @param {Booleam} imageOnly - true for image slides
+     */
+    _setCarouselHeight(imageOnly) {
+      let firstSlide = this.$el.find('.carousel-item.active').length
+        ? this.$el.find('.carousel-item.active').first()
+        : this.$el.find('.carousel-item').first();
+      let firstImage = firstSlide.find('img').first();
+      if (firstImage.length) {
+        if (firstImage[0].complete) {
+          // If image won't trigger the load event
+          let imageHeight = firstImage.height();
+          if (imageHeight > 0) {
+            this.$el.css('height', imageHeight + 'px');
+          } else {
+            // If image still has no height, use the natural dimensions to calculate
+            let naturalWidth = firstImage[0].naturalWidth;
+            let naturalHeight = firstImage[0].naturalHeight;
+            let adjustedHeight = this.$el.width() / naturalWidth * naturalHeight;
+            this.$el.css('height', adjustedHeight + 'px');
+          }
+        } else {
+          // Get height when image is loaded normally
+          firstImage.one('load', (el, i) => {
+            this.$el.css('height', el.offsetHeight + 'px');
+          });
+        }
+      } else if (!imageOnly) {
+        let slideHeight = firstSlide.height();
+        this.$el.css('height', slideHeight + 'px');
+      }
+    }
+
+    /**
+     * Get x position from event
+     * @param {Event} e
+     */
+    _xpos(e) {
+      // touch event
+      if (e.targetTouches && e.targetTouches.length >= 1) {
+        return e.targetTouches[0].clientX;
+      }
+
+      // mouse event
+      return e.clientX;
+    }
+
+    /**
+     * Get y position from event
+     * @param {Event} e
+     */
+    _ypos(e) {
+      // touch event
+      if (e.targetTouches && e.targetTouches.length >= 1) {
+        return e.targetTouches[0].clientY;
+      }
+
+      // mouse event
+      return e.clientY;
+    }
+
+    /**
+     * Wrap index
+     * @param {Number} x
+     */
+    _wrap(x) {
+      return x >= this.count ? x % this.count : x < 0 ? this._wrap(this.count + x % this.count) : x;
+    }
+
+    /**
+     * Tracks scrolling information
+     */
+    _track() {
+      let now, elapsed, delta, v;
+
+      now = Date.now();
+      elapsed = now - this.timestamp;
+      this.timestamp = now;
+      delta = this.offset - this.frame;
+      this.frame = this.offset;
+
+      v = 1000 * delta / (1 + elapsed);
+      this.velocity = 0.8 * v + 0.2 * this.velocity;
+    }
+
+    /**
+     * Auto scrolls to nearest carousel item.
+     */
+    _autoScroll() {
+      let elapsed, delta;
+
+      if (this.amplitude) {
+        elapsed = Date.now() - this.timestamp;
+        delta = this.amplitude * Math.exp(-elapsed / this.options.duration);
+        if (delta > 2 || delta < -2) {
+          this._scroll(this.target - delta);
+          requestAnimationFrame(this._autoScrollBound);
+        } else {
+          this._scroll(this.target);
+        }
+      }
+    }
+
+    /**
+     * Scroll to target
+     * @param {Number} x
+     */
+    _scroll(x) {
+      // Track scrolling state
+      if (!this.$el.hasClass('scrolling')) {
+        this.el.classList.add('scrolling');
+      }
+      if (this.scrollingTimeout != null) {
+        window.clearTimeout(this.scrollingTimeout);
+      }
+      this.scrollingTimeout = window.setTimeout(() => {
+        this.$el.removeClass('scrolling');
+      }, this.options.duration);
+
+      // Start actual scroll
+      let i,
+        half,
+        delta,
+        dir,
+        tween,
+        el,
+        alignment,
+        zTranslation,
+        tweenedOpacity,
+        centerTweenedOpacity;
+      let lastCenter = this.center;
+      let numVisibleOffset = 1 / this.options.numVisible;
+
+      this.offset = typeof x === 'number' ? x : this.offset;
+      this.center = Math.floor((this.offset + this.dim / 2) / this.dim);
+      delta = this.offset - this.center * this.dim;
+      dir = delta < 0 ? 1 : -1;
+      tween = -dir * delta * 2 / this.dim;
+      half = this.count >> 1;
+
+      if (this.options.fullWidth) {
+        alignment = 'translateX(0)';
+        centerTweenedOpacity = 1;
+      } else {
+        alignment = 'translateX(' + (this.el.clientWidth - this.itemWidth) / 2 + 'px) ';
+        alignment += 'translateY(' + (this.el.clientHeight - this.itemHeight) / 2 + 'px)';
+        centerTweenedOpacity = 1 - numVisibleOffset * tween;
+      }
+
+      // Set indicator active
+      if (this.showIndicators) {
+        let diff = this.center % this.count;
+        let activeIndicator = this.$indicators.find('.indicator-item.active');
+        if (activeIndicator.index() !== diff) {
+          activeIndicator.removeClass('active');
+          this.$indicators
+            .find('.indicator-item')
+            .eq(diff)[0]
+            .classList.add('active');
+        }
+      }
+
+      // center
+      // Don't show wrapped items.
+      if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
+        el = this.images[this._wrap(this.center)];
+
+        // Add active class to center item.
+        if (!$(el).hasClass('active')) {
+          this.$el.find('.carousel-item').removeClass('active');
+          el.classList.add('active');
+        }
+        let transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
+          this.options.shift *
+          tween *
+          i}px) translateZ(${this.options.dist * tween}px)`;
+        this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
+      }
+
+      for (i = 1; i <= half; ++i) {
+        // right side
+        if (this.options.fullWidth) {
+          zTranslation = this.options.dist;
+          tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
+        } else {
+          zTranslation = this.options.dist * (i * 2 + tween * dir);
+          tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
+        }
+        // Don't show wrapped items.
+        if (!this.noWrap || this.center + i < this.count) {
+          el = this.images[this._wrap(this.center + i)];
+          let transformString = `${alignment} translateX(${this.options.shift +
+            (this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+          this._updateItemStyle(el, tweenedOpacity, -i, transformString);
+        }
+
+        // left side
+        if (this.options.fullWidth) {
+          zTranslation = this.options.dist;
+          tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
+        } else {
+          zTranslation = this.options.dist * (i * 2 - tween * dir);
+          tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
+        }
+        // Don't show wrapped items.
+        if (!this.noWrap || this.center - i >= 0) {
+          el = this.images[this._wrap(this.center - i)];
+          let transformString = `${alignment} translateX(${-this.options.shift +
+            (-this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+          this._updateItemStyle(el, tweenedOpacity, -i, transformString);
+        }
+      }
+
+      // center
+      // Don't show wrapped items.
+      if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
+        el = this.images[this._wrap(this.center)];
+        let transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
+          this.options.shift *
+          tween}px) translateZ(${this.options.dist * tween}px)`;
+        this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
+      }
+
+      // onCycleTo callback
+      let $currItem = this.$el.find('.carousel-item').eq(this._wrap(this.center));
+      if (lastCenter !== this.center && typeof this.options.onCycleTo === 'function') {
+        this.options.onCycleTo.call(this, $currItem[0], this.dragged);
+      }
+
+      // One time callback
+      if (typeof this.oneTimeCallback === 'function') {
+        this.oneTimeCallback.call(this, $currItem[0], this.dragged);
+        this.oneTimeCallback = null;
+      }
+    }
+
+    /**
+     * Cycle to target
+     * @param {Element} el
+     * @param {Number} opacity
+     * @param {Number} zIndex
+     * @param {String} transform
+     */
+    _updateItemStyle(el, opacity, zIndex, transform) {
+      el.style[this.xform] = transform;
+      el.style.zIndex = zIndex;
+      el.style.opacity = opacity;
+      el.style.visibility = 'visible';
+    }
+
+    /**
+     * Cycle to target
+     * @param {Number} n
+     * @param {Function} callback
+     */
+    _cycleTo(n, callback) {
+      let diff = this.center % this.count - n;
+
+      // Account for wraparound.
+      if (!this.noWrap) {
+        if (diff < 0) {
+          if (Math.abs(diff + this.count) < Math.abs(diff)) {
+            diff += this.count;
+          }
+        } else if (diff > 0) {
+          if (Math.abs(diff - this.count) < diff) {
+            diff -= this.count;
+          }
+        }
+      }
+
+      this.target = this.dim * Math.round(this.offset / this.dim);
+      // Next
+      if (diff < 0) {
+        this.target += this.dim * Math.abs(diff);
+
+        // Prev
+      } else if (diff > 0) {
+        this.target -= this.dim * diff;
+      }
+
+      // Set one time callback
+      if (typeof callback === 'function') {
+        this.oneTimeCallback = callback;
+      }
+
+      // Scroll
+      if (this.offset !== this.target) {
+        this.amplitude = this.target - this.offset;
+        this.timestamp = Date.now();
+        requestAnimationFrame(this._autoScrollBound);
+      }
+    }
+
+    /**
+     * Cycle to next item
+     * @param {Number} [n]
+     */
+    next(n) {
+      if (n === undefined || isNaN(n)) {
+        n = 1;
+      }
+
+      let index = this.center + n;
+      if (index >= this.count || index < 0) {
+        if (this.noWrap) {
+          return;
+        }
+
+        index = this._wrap(index);
+      }
+      this._cycleTo(index);
+    }
+
+    /**
+     * Cycle to previous item
+     * @param {Number} [n]
+     */
+    prev(n) {
+      if (n === undefined || isNaN(n)) {
+        n = 1;
+      }
+
+      let index = this.center - n;
+      if (index >= this.count || index < 0) {
+        if (this.noWrap) {
+          return;
+        }
+
+        index = this._wrap(index);
+      }
+
+      this._cycleTo(index);
+    }
+
+    /**
+     * Cycle to nth item
+     * @param {Number} [n]
+     * @param {Function} callback
+     */
+    set(n, callback) {
+      if (n === undefined || isNaN(n)) {
+        n = 0;
+      }
+
+      if (n > this.count || n < 0) {
+        if (this.noWrap) {
+          return;
+        }
+
+        n = this._wrap(n);
+      }
+
+      this._cycleTo(n, callback);
+    }
+  }
+
+  M.Carousel = Carousel;
+
+  if (M.jQueryLoaded) {
+    M.initializeJqueryWrapper(Carousel, 'carousel', 'M_Carousel');
+  }
+})(cash);