webpack-bootstrap-ui-kit/src/js_old/_components/_ui.carousel.js

"use strict";

import $ from "jquery";

import "hammerjs/hammer";
import "jquery-hammerjs/jquery.hammer";

import Events from "../_events";

const CarouselUI = (($) => {
  // Constants
  const NAME = "CarouselUI";

  class CarouselUI {
    // Static methods

    static each(callback) {
      $(`js${NAME}, .js-carousel`).each((i, e) => {
        callback(i, $(e));
      });
    }

    static init() {
      this.dispose();
      console.log(`${NAME}: init`);

      this.each((i, e) => {
        const $e = $(e),
          id = `Carousel${i}`;

        $e.attr("id", id);
        $e.data("id", i);

        const $items = $(e).find(".carousel-item"),
          count = $items.length;
        if (!count) {
          return;
        }

        // create carousel-controls
        if ($e.data("indicators")) {
          const $indicators = $('<ol class="carousel-indicators"></ol>');
          $indicators.append(
            `<li data-target="#${id}" data-slide-to="0" class="active"></li>`
          );
          for (let i = 1; i < count; i++) {
            $indicators.append(
              `<li data-target="#${id}" data-slide-to="${i}"></li>`
            );
          }
          $e.prepend($indicators);
        }

        // create arrows
        if ($e.data("arrows")) {
          $e.prepend(
            `<i class="carousel-control-prev" data-target="#${id}" role="button" data-slide="prev"><i class="fas fa-chevron-left" aria-hidden="true"></i><i class="sr-only">Previous</i></i>`
          );
          $e.prepend(
            `<i class="carousel-control-next" data-target="#${id}" role="button" data-slide="next"><i class="fas fa-chevron-right" aria-hidden="true"></i><i class="sr-only">Next</i></i>`
          );
        }

        // init carousel
        $e.carousel();

        const $youtubeSlides = $e.find(
          'iframe[src^="https://www.youtube.com/embed/"]'
        );

        $e.on("slide.bs.carousel", () => {
          if ($youtubeSlides.length) {
            $youtubeSlides.each((i, e) => {
              const $e = $(e);
              try {
                $e.data(
                  "player",
                  new YT.Player(e, {
                    events: {
                      onReady: () => {
                        $e.data("player").pauseVideo();
                      },
                    },
                  })
                );

                $e.data("player").pauseVideo();
              } catch (e) {}
            });
          }
        });

        $e.find(".carousel-control-prev").on("click", (e) => {
          e.preventDefault();
          $e.carousel("prev");
        });

        $e.find(".carousel-control-next").on("click", (e) => {
          e.preventDefault();
          $e.carousel("next");
        });

        // init touch swipes
        $e.hammer().bind(Events.SWIPELEFT, (e) => {
          $(event.target).carousel("next");
        });

        $e.hammer().bind(Events.SWIPERIGHT, (e) => {
          $(event.target).carousel("prev");
        });

        /*$e.find('.carousel-item').hammer().bind('tap', (event) => {
          $(event.target).carousel('next');
        });*/

        $e.addClass(`js${NAME}-active`);
        $e.trigger(Events.CAROUSEL_READY);
      });
    }

    static dispose() {
      this.each((i, e) => {
        $(e).carousel("dispose");
      });
    }
  }

  $(window).on(`${Events.LODEDANDREADY}`, () => {
    CarouselUI.init();
  });

  return CarouselUI;
})($);

export default CarouselUI;