Sha256: 4aa848780bb81976389dc22039f6d315cde5d82df69d426703f20a942134c880

Contents?: true

Size: 1.67 KB

Versions: 39

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, 'd-none', () => isLastChild);
      this._addClassIf($close, 'd-none', () => !isLastChild);
      this._addClassIf($footer, 'd-none', () => !isLastChild);
    }

    _hidePreviousButtonIfFirstSlide() {
      const $prev = $('.mu-kids-modal-button.mu-previous');
      this._addClassIf($prev, 'd-none', () => 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

39 entries across 39 versions & 1 rubygems

Version Path
mumuki-laboratory-9.23.0 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.22.0 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.21.0 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.20.1 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.20.0 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.19.0 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.18.1 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.18.0 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.17.0 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.16.0 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.15.0 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.14.1 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.14.0 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.13.2 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.13.1 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.13.0 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.12.1 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.12.0 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.11.0 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js
mumuki-laboratory-9.10.0 app/assets/javascripts/mumuki_laboratory/application/mu-modal-carrousel.js