Sha256: 3a9593391697e56d4dafdf42bee73ae919ac5b0a4c71650b8b2db7fb96fd515c

Contents?: true

Size: 1.67 KB

Versions: 16

Compression:

Stored size: 1.67 KB

Contents

mumuki.ModalCarrousel = (() => {

  class MuModalCarrousel {
    constructor(containerSelector, onShow = () => {}) {
      this.$container = $(containerSelector);
      this.onShow = onShow;
    }

    show() {
      this.onShow();
      this._showFirstSlide();
    }

    nextSlide() {
      this._clickButton('next');
    }

    prevSlide() {
      this._clickButton('prev');
    }

    _activeSlide() {
      return this.$container.find('.active');
    }

    _clickButton(prevOrNext) {
      this._activeSlide().removeClass('active')[prevOrNext]().addClass('active');
      this.showNextOrCloseButton();
      this._hidePreviousButtonIfFirstSlide();
    }

    showNextOrCloseButton() {
      const $next = $('.mu-kids-modal-button.mu-next');
      const $close = $('.mu-kids-modal-button.mu-close');
      const $footer = $('.modal-footer');
      const isLastChild = this._activeSlide().is(':last-child');
      this._addClassIf($next, 'hidden', () => isLastChild);
      this._addClassIf($close, 'hidden', () => !isLastChild);
      this._addClassIf($footer, 'hidden', () => !isLastChild);
    }

    _hidePreviousButtonIfFirstSlide() {
      const $prev = $('.mu-kids-modal-button.mu-previous');
      this._addClassIf($prev, 'hidden', () => this._activeSlide().is(':first-child'));
    }

    _showFirstSlide() {
      this.$container.children().each((i, el) => this._addClassIf($(el), 'active', () => i === 0));
      this.showNextOrCloseButton();
      this._hidePreviousButtonIfFirstSlide();
    }

    _addClassIf(element, clazz, criteria) {
      if (criteria()) {
        element.addClass(clazz);
      } else {
        element.removeClass(clazz);
      }
    }
  }

  return MuModalCarrousel;
})();

Version data entries

16 entries across 16 versions & 1 rubygems

Version Path
mumuki-laboratory-9.0.6 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.0.5 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.0.4 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.0.3 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.0.2 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.0.1 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.0.0 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-8.6.1 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-8.6.0 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-8.5.0 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-8.4.0 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-8.3.0 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-8.2.1 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-8.2.0 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-8.1.3 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-8.1.2 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js