templates/js/library/gallery_carousel/gallery_carousel.js.twig line 1

Open in your IDE?
  1. class GalleryCarousel {
  2.     options = {
  3.         elementClickTriggerSelector: null,
  4.         slideIdAttrName: null,
  5.         dataTableInstance: null,
  6.     };
  8.     constructor(modalId, options = null) {
  9.         this.modalId = modalId;
  10.         let elementClickTriggerSelector = this.$modal.data('element-click-trigger-selector');
  11.         this.options.elementClickTriggerSelector = elementClickTriggerSelector;
  13.         if (options) {
  14.             this.options = { ...this.options, ...options };
  15.         }
  16.         this.currentGalleryIndex = 0;
  17.         this.initEvents();
  19.         if (this.options.elementClickTriggerSelector) {
  20.             $(this.options.elementClickTriggerSelector).on('click', (e) => {
  21.                 e.preventDefault();
  22.                 const index = $(e.target).data('gallery-index');
  23.                 this.open(index);
  24.             });
  25.         }
  27.         if (this.options.slideIdAttrName && this.options.dataTableInstance) {
  28.             this.setGalleryIndexRetriever((increment, slideElement, currentGalleryIndex) => {
  29.                 let tableData = this.options.dataTableInstance.getAllFilteredTableData();
  30.                 let itemIdColIndex = this.options.dataTableInstance.getColumnIndexByColumnId('id');
  31.                 if (itemIdColIndex === -1) {
  32.                     throw new Error("Item ID column not found in data table");
  33.                 }
  35.                 let curTableRowIndex = null;
  36.                 let curItemId = parseInt($(slideElement).attr(this.options.slideIdAttrName));
  38.                 for (let i = 0; i < tableData.length; i++) {
  39.                     let tableRowItemId = parseInt(tableData[i][itemIdColIndex]);
  40.                     if (tableRowItemId === curItemId) {
  41.                         curTableRowIndex = i;
  42.                         break;
  43.                     }
  44.                 }
  45.                 if (curTableRowIndex === null) {
  46.                     throw new Error("Current slide id not found in filtered table data");
  47.                 }
  49.                 //find next or prev slide index in filtered table data
  50.                 curTableRowIndex += increment;
  51.                 if (curTableRowIndex < 0) {
  52.                     curTableRowIndex = tableData.length - 1;
  53.                 } else if (curTableRowIndex >= tableData.length) {
  54.                     curTableRowIndex = 0;
  55.                 }
  56.                 let nextItemId = parseInt(tableData[curTableRowIndex][itemIdColIndex]);
  58.                 //find gallery index by item id
  59.                 for (let j = 0; j < this.$slides.length; j++) {
  60.                     let itemId = parseInt($(this.$slides[j]).attr(this.options.slideIdAttrName));
  61.                     if (itemId === nextItemId) {
  62.                         return j;
  63.                     }
  64.                 }
  65.                 return 0
  66.             });
  67.         }
  68.     }
  70.     get $modal() {
  71.         return $('#' + this.modalId);
  72.     }
  74.     get $slides() {
  75.         return this.$modal.find('.gallery-slide');
  76.     }
  78.     get $title() {
  79.         return this.$modal.find('.gallery-title');
  80.     }
  82.     get $slide() {
  83.         return this.$slides.eq(this.currentGalleryIndex);
  84.     }
  86.     initEvents() {
  87.         $(document).on('click', `#${this.modalId} .gallery-next-btn`, () => this.next());
  88.         $(document).on('click', `#${this.modalId} .gallery-prev-btn`, () => this.prev());
  90.         // Support keyboard navigation
  91.         $(document).on('keydown', `#${this.modalId}`, (e) => {
  92.             if (e.key === "ArrowRight") {
  93.                 this.next();
  94.             } else if (e.key === "ArrowLeft") {
  95.                 this.prev();
  96.             }
  97.         });
  99.         // Focus modal on show to enable keyboard events
  100.         $(document).on('shown.bs.modal', `#${this.modalId}`, () => {
  101.             this.$modal.trigger('focus');
  102.         });
  103.     }
  105.     updateGallery() {
  106.         const $slides = this.$slides;
  107.         $slides.addClass('d-none').removeClass('d-flex');
  109.         if (this.currentGalleryIndex < 0) {
  110.             this.currentGalleryIndex = $slides.length - 1;
  111.         } else if (this.currentGalleryIndex >= $slides.length) {
  112.             this.currentGalleryIndex = 0;
  113.         }
  115.         const $currentSlide = $slides.eq(this.currentGalleryIndex);
  117.         if ($currentSlide.length) {
  118.             $currentSlide.removeClass('d-none').addClass('d-flex');
  120.             // Update title
  121.             let isPermanentTitle = this.$title.hasClass('permanent');
  122.             if (!isPermanentTitle) {
  123.                 let slideText = $currentSlide.data('slide-text');
  124.                 const name = slideText || ('Изображение ' + (this.currentGalleryIndex + 1));
  125.                 this.$title.text(name);}
  126.         }
  127.     }
  129.     setGalleryIndexRetriever(callback) {
  130.         this.galleryIndexRetriever = callback;
  131.     }
  133.     open(index) {
  134.         this.currentGalleryIndex = index;
  135.         this.updateGallery();
  136.         this.$modal.modal('show');
  137.     }
  139.     next() {
  140.         if (this.$slides.length > 0) {
  141.             if (this.galleryIndexRetriever) {
  142.                 this.currentGalleryIndex = this.galleryIndexRetriever(1, this.$slide, this.currentGalleryIndex);
  143.             } else {
  144.                 this.currentGalleryIndex++;
  145.             }
  146.             this.updateGallery();
  147.         }
  148.     }
  150.     prev() {
  151.         if (this.$slides.length > 0) {
  152.             if (this.galleryIndexRetriever) {
  153.                 this.currentGalleryIndex = this.galleryIndexRetriever(-1, this.$slide, this.currentGalleryIndex);
  154.             } else {
  155.                 this.currentGalleryIndex--;
  156.             }
  157.             this.updateGallery();
  158.         }
  159.     }
  160. }