lightgallery 2.3.0 → 2.4.0-beta.0

package/scss/lightgallery-core.scss

@@ -158,7 +158,6 @@
             background: url('#{$lg-path-images}/loading.gif') no-repeat scroll
                 center center transparent;
         }
-        will-change: transform, opacity;
         display: none !important;
     }
     &.lg-css3 {

package/vue/LightGallery.vue.d.ts

@@ -1,7 +1,7 @@
 import { Vue } from 'vue-class-component';
 import { LightGallery as LGPlugin } from '../lightgallery';
 import { LightGallerySettings } from '../lg-settings';
-import { AfterAppendSubHtmlDetail, AfterCloseDetail, AfterOpenDetail, AfterSlideDetail, BeforeCloseDetail, BeforeNextSlideDetail, BeforeOpenDetail, BeforePrevSlideDetail, BeforeSlideDetail, ContainerResizeDetail, DragEndDetail, DragMoveDetail, DragStartDetail, InitDetail, PosterClickDetail, SlideItemLoadDetail } from '../lg-events';
+import { AfterAppendSubHtmlDetail, AfterCloseDetail, RotateLeftDetail, RotateRightDetail, FlipHorizontalDetail, FlipVerticalDetail, AfterOpenDetail, AfterSlideDetail, BeforeCloseDetail, BeforeNextSlideDetail, BeforeOpenDetail, BeforePrevSlideDetail, BeforeSlideDetail, ContainerResizeDetail, DragEndDetail, DragMoveDetail, DragStartDetail, InitDetail, PosterClickDetail, SlideItemLoadDetail } from '../lg-events';
 export default class Lightgallery extends Vue {
     $refs: {
         container: HTMLElement;
@@ -25,6 +25,10 @@ export default class Lightgallery extends Vue {
     onBeforePrevSlide: (detail: BeforePrevSlideDetail) => void;
     onBeforeClose: (detail: BeforeCloseDetail) => void;
     onAfterClose: (detail: AfterCloseDetail) => void;
+    onRotateLeft?: (detail: RotateLeftDetail) => void;
+    onRotateRight?: (detail: RotateRightDetail) => void;
+    onFlipHorizontal?: (detail: FlipHorizontalDetail) => void;
+    onFlipVertical?: (detail: FlipVerticalDetail) => void;
     LG: LGPlugin;
     mounted(): void;
     unmounted(): void;

package/vue/LightGalleryVue.common.js

@@ -4850,7 +4850,7 @@ if (typeof window !== 'undefined') {
 // EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./src/components/LightGallery.vue?vue&type=template&id=b7aaf09c
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./src/components/LightGallery.vue?vue&type=template&id=47173610
 
 var _hoisted_1 = {
   ref: "container",
@@ -4859,7 +4859,7 @@ var _hoisted_1 = {
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", _hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderSlot"])(_ctx.$slots, "default")], 512);
 }
-// CONCATENATED MODULE: ./src/components/LightGallery.vue?vue&type=template&id=b7aaf09c
+// CONCATENATED MODULE: ./src/components/LightGallery.vue?vue&type=template&id=47173610
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.keys.js
 var es_object_keys = __webpack_require__("b64b");
@@ -5805,6 +5805,116 @@ var es_array_concat = __webpack_require__("99af");
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.find.js
 var es_array_find = __webpack_require__("7db0");
 
+// CONCATENATED MODULE: ../src/lg-events.ts
+/**
+ * List of lightGallery events
+ * All events should be documented here
+ * Below interfaces are used to build the website documentations
+ * */
+var lGEvents = {
+  afterAppendSlide: 'lgAfterAppendSlide',
+  init: 'lgInit',
+  hasVideo: 'lgHasVideo',
+  containerResize: 'lgContainerResize',
+  updateSlides: 'lgUpdateSlides',
+  afterAppendSubHtml: 'lgAfterAppendSubHtml',
+  beforeOpen: 'lgBeforeOpen',
+  afterOpen: 'lgAfterOpen',
+  slideItemLoad: 'lgSlideItemLoad',
+  beforeSlide: 'lgBeforeSlide',
+  afterSlide: 'lgAfterSlide',
+  posterClick: 'lgPosterClick',
+  dragStart: 'lgDragStart',
+  dragMove: 'lgDragMove',
+  dragEnd: 'lgDragEnd',
+  beforeNextSlide: 'lgBeforeNextSlide',
+  beforePrevSlide: 'lgBeforePrevSlide',
+  beforeClose: 'lgBeforeClose',
+  afterClose: 'lgAfterClose',
+  rotateLeft: 'lgRotateLeft',
+  rotateRight: 'lgRotateRight',
+  flipHorizontal: 'lgFlipHorizontal',
+  flipVertical: 'lgFlipVertical',
+  autoplay: 'lgAutoplay',
+  autoplayStart: 'lgAutoplayStart',
+  autoplayStop: 'lgAutoplayStop'
+};
+// CONCATENATED MODULE: ../src/lg-settings.ts
+var lightGalleryCoreSettings = {
+  mode: 'lg-slide',
+  easing: 'ease',
+  speed: 400,
+  licenseKey: '0000-0000-000-0000',
+  height: '100%',
+  width: '100%',
+  addClass: '',
+  startClass: 'lg-start-zoom',
+  backdropDuration: 300,
+  container: '',
+  startAnimationDuration: 400,
+  zoomFromOrigin: true,
+  hideBarsDelay: 0,
+  showBarsAfter: 10000,
+  slideDelay: 0,
+  supportLegacyBrowser: true,
+  allowMediaOverlap: false,
+  videoMaxSize: '1280-720',
+  loadYouTubePoster: true,
+  defaultCaptionHeight: 0,
+  ariaLabelledby: '',
+  ariaDescribedby: '',
+  closable: true,
+  swipeToClose: true,
+  closeOnTap: true,
+  showCloseIcon: true,
+  showMaximizeIcon: false,
+  loop: true,
+  escKey: true,
+  keyPress: true,
+  controls: true,
+  slideEndAnimation: true,
+  hideControlOnEnd: false,
+  mousewheel: false,
+  getCaptionFromTitleOrAlt: true,
+  appendSubHtmlTo: '.lg-sub-html',
+  subHtmlSelectorRelative: false,
+  preload: 2,
+  numberOfSlideItemsInDom: 10,
+  selector: '',
+  selectWithin: '',
+  nextHtml: '',
+  prevHtml: '',
+  index: 0,
+  iframeWidth: '100%',
+  iframeHeight: '100%',
+  iframeMaxWidth: '100%',
+  iframeMaxHeight: '100%',
+  download: true,
+  counter: true,
+  appendCounterTo: '.lg-toolbar',
+  swipeThreshold: 50,
+  enableSwipe: true,
+  enableDrag: true,
+  dynamic: false,
+  dynamicEl: [],
+  extraProps: [],
+  exThumbImage: '',
+  isMobile: undefined,
+  mobileSettings: {
+    controls: false,
+    showCloseIcon: false,
+    download: false
+  },
+  plugins: [],
+  strings: {
+    closeGallery: 'Close gallery',
+    toggleMaximize: 'Toggle maximize',
+    previousSlide: 'Previous slide',
+    nextSlide: 'Next slide',
+    download: 'Download',
+    playVideo: 'Play video'
+  }
+};
 // CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js
 function arrayLikeToArray_arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
@@ -6563,7 +6673,7 @@ var utils = {
 
     return true;
   },
-  getVideoPosterMarkup: function getVideoPosterMarkup(_poster, dummyImg, videoContStyle, _isVideo) {
+  getVideoPosterMarkup: function getVideoPosterMarkup(_poster, dummyImg, videoContStyle, playVideoString, _isVideo) {
     var videoClass = '';
 
     if (_isVideo && _isVideo.youtube) {
@@ -6574,7 +6684,7 @@ var utils = {
       videoClass = 'lg-has-html5';
     }
 
-    return "<div class=\"lg-video-cont ".concat(videoClass, "\" style=\"").concat(videoContStyle, "\">\n                <div class=\"lg-video-play-button\">\n                <svg\n                    viewBox=\"0 0 20 20\"\n                    preserveAspectRatio=\"xMidYMid\"\n                    focusable=\"false\"\n                    aria-labelledby=\"Play video\"\n                    role=\"img\"\n                    class=\"lg-video-play-icon\"\n                >\n                    <title>Play video</title>\n                    <polygon class=\"lg-video-play-icon-inner\" points=\"1,0 20,10 1,20\"></polygon>\n                </svg>\n                <svg class=\"lg-video-play-icon-bg\" viewBox=\"0 0 50 50\" focusable=\"false\">\n                    <circle cx=\"50%\" cy=\"50%\" r=\"20\"></circle></svg>\n                <svg class=\"lg-video-play-icon-circle\" viewBox=\"0 0 50 50\" focusable=\"false\">\n                    <circle cx=\"50%\" cy=\"50%\" r=\"20\"></circle>\n                </svg>\n            </div>\n            ").concat(dummyImg || '', "\n            <img class=\"lg-object lg-video-poster\" src=\"").concat(_poster, "\" />\n        </div>");
+    return "<div class=\"lg-video-cont ".concat(videoClass, "\" style=\"").concat(videoContStyle, "\">\n                <div class=\"lg-video-play-button\">\n                <svg\n                    viewBox=\"0 0 20 20\"\n                    preserveAspectRatio=\"xMidYMid\"\n                    focusable=\"false\"\n                    aria-labelledby=\"").concat(playVideoString, "\"\n                    role=\"img\"\n                    class=\"lg-video-play-icon\"\n                >\n                    <title>").concat(playVideoString, "</title>\n                    <polygon class=\"lg-video-play-icon-inner\" points=\"1,0 20,10 1,20\"></polygon>\n                </svg>\n                <svg class=\"lg-video-play-icon-bg\" viewBox=\"0 0 50 50\" focusable=\"false\">\n                    <circle cx=\"50%\" cy=\"50%\" r=\"20\"></circle></svg>\n                <svg class=\"lg-video-play-icon-circle\" viewBox=\"0 0 50 50\" focusable=\"false\">\n                    <circle cx=\"50%\" cy=\"50%\" r=\"20\"></circle>\n                </svg>\n            </div>\n            ").concat(dummyImg || '', "\n            <img class=\"lg-object lg-video-poster\" src=\"").concat(_poster, "\" />\n        </div>");
   },
 
   /**
@@ -6666,105 +6776,6 @@ var utils = {
   }
 };
 /* harmony default export */ var lg_utils = (utils);
-// CONCATENATED MODULE: ../src/lg-settings.ts
-var lightGalleryCoreSettings = {
-  mode: 'lg-slide',
-  easing: 'ease',
-  speed: 400,
-  licenseKey: '0000-0000-000-0000',
-  height: '100%',
-  width: '100%',
-  addClass: '',
-  startClass: 'lg-start-zoom',
-  backdropDuration: 300,
-  container: '',
-  startAnimationDuration: 400,
-  zoomFromOrigin: true,
-  hideBarsDelay: 0,
-  showBarsAfter: 10000,
-  slideDelay: 0,
-  supportLegacyBrowser: true,
-  allowMediaOverlap: false,
-  videoMaxSize: '1280-720',
-  loadYouTubePoster: true,
-  defaultCaptionHeight: 0,
-  ariaLabelledby: '',
-  ariaDescribedby: '',
-  closable: true,
-  swipeToClose: true,
-  closeOnTap: true,
-  showCloseIcon: true,
-  showMaximizeIcon: false,
-  loop: true,
-  escKey: true,
-  keyPress: true,
-  controls: true,
-  slideEndAnimation: true,
-  hideControlOnEnd: false,
-  mousewheel: false,
-  getCaptionFromTitleOrAlt: true,
-  appendSubHtmlTo: '.lg-sub-html',
-  subHtmlSelectorRelative: false,
-  preload: 2,
-  numberOfSlideItemsInDom: 10,
-  selector: '',
-  selectWithin: '',
-  nextHtml: '',
-  prevHtml: '',
-  index: 0,
-  iframeWidth: '100%',
-  iframeHeight: '100%',
-  iframeMaxWidth: '100%',
-  iframeMaxHeight: '100%',
-  download: true,
-  counter: true,
-  appendCounterTo: '.lg-toolbar',
-  swipeThreshold: 50,
-  enableSwipe: true,
-  enableDrag: true,
-  dynamic: false,
-  dynamicEl: [],
-  extraProps: [],
-  exThumbImage: '',
-  isMobile: undefined,
-  mobileSettings: {
-    controls: false,
-    showCloseIcon: false,
-    download: false
-  },
-  plugins: []
-};
-// CONCATENATED MODULE: ../src/lg-events.ts
-/**
- * List of lightGallery events
- * All events should be documented here
- * Below interfaces are used to build the website documentations
- * */
-var lGEvents = {
-  afterAppendSlide: 'lgAfterAppendSlide',
-  init: 'lgInit',
-  hasVideo: 'lgHasVideo',
-  containerResize: 'lgContainerResize',
-  updateSlides: 'lgUpdateSlides',
-  afterAppendSubHtml: 'lgAfterAppendSubHtml',
-  beforeOpen: 'lgBeforeOpen',
-  afterOpen: 'lgAfterOpen',
-  slideItemLoad: 'lgSlideItemLoad',
-  beforeSlide: 'lgBeforeSlide',
-  afterSlide: 'lgAfterSlide',
-  posterClick: 'lgPosterClick',
-  dragStart: 'lgDragStart',
-  dragMove: 'lgDragMove',
-  dragEnd: 'lgDragEnd',
-  beforeNextSlide: 'lgBeforeNextSlide',
-  beforePrevSlide: 'lgBeforePrevSlide',
-  beforeClose: 'lgBeforeClose',
-  afterClose: 'lgAfterClose',
-  rotateLeft: 'lgRotateLeft',
-  rotateRight: 'lgRotateRight',
-  flipHorizontal: 'lgFlipHorizontal',
-  flipVertical: 'lgFlipVertical'
-};
 // CONCATENATED MODULE: ../src/lightgallery.ts
 
 
@@ -6990,7 +7001,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
       var subHtmlCont = ''; // Create controls
 
       if (this.settings.controls) {
-        controls = "<button type=\"button\" id=\"".concat(this.getIdName('lg-prev'), "\" aria-label=\"Previous slide\" class=\"lg-prev lg-icon\"> ").concat(this.settings.prevHtml, " </button>\n                <button type=\"button\" id=\"").concat(this.getIdName('lg-next'), "\" aria-label=\"Next slide\" class=\"lg-next lg-icon\"> ").concat(this.settings.nextHtml, " </button>");
+        controls = "<button type=\"button\" id=\"".concat(this.getIdName('lg-prev'), "\" aria-label=\"").concat(this.settings.strings['previousSlide'], "\" class=\"lg-prev lg-icon\"> ").concat(this.settings.prevHtml, " </button>\n                <button type=\"button\" id=\"").concat(this.getIdName('lg-next'), "\" aria-label=\"").concat(this.settings.strings['nextSlide'], "\" class=\"lg-next lg-icon\"> ").concat(this.settings.nextHtml, " </button>");
       }
 
       if (this.settings.appendSubHtmlTo !== '.lg-item') {
@@ -7007,10 +7018,15 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
       var ariaLabelledby = this.settings.ariaLabelledby ? 'aria-labelledby="' + this.settings.ariaLabelledby + '"' : '';
       var ariaDescribedby = this.settings.ariaDescribedby ? 'aria-describedby="' + this.settings.ariaDescribedby + '"' : '';
       var containerClassName = "lg-container ".concat(this.settings.addClass, " ").concat(document.body !== this.settings.container ? 'lg-inline' : '');
-      var closeIcon = this.settings.closable && this.settings.showCloseIcon ? "<button type=\"button\" aria-label=\"Close gallery\" id=\"".concat(this.getIdName('lg-close'), "\" class=\"lg-close lg-icon\"></button>") : '';
-      var maximizeIcon = this.settings.showMaximizeIcon ? "<button type=\"button\" aria-label=\"Toggle maximize\" id=\"".concat(this.getIdName('lg-maximize'), "\" class=\"lg-maximize lg-icon\"></button>") : '';
+      var closeIcon = this.settings.closable && this.settings.showCloseIcon ? "<button type=\"button\" aria-label=\"".concat(this.settings.strings['closeGallery'], "\" id=\"").concat(this.getIdName('lg-close'), "\" class=\"lg-close lg-icon\"></button>") : '';
+      var maximizeIcon = this.settings.showMaximizeIcon ? "<button type=\"button\" aria-label=\"".concat(this.settings.strings['toggleMaximize'], "\" id=\"").concat(this.getIdName('lg-maximize'), "\" class=\"lg-maximize lg-icon\"></button>") : '';
       var template = "\n        <div class=\"".concat(containerClassName, "\" id=\"").concat(this.getIdName('lg-container'), "\" tabindex=\"-1\" aria-modal=\"true\" ").concat(ariaLabelledby, " ").concat(ariaDescribedby, " role=\"dialog\"\n        >\n            <div id=\"").concat(this.getIdName('lg-backdrop'), "\" class=\"lg-backdrop\"></div>\n\n            <div id=\"").concat(this.getIdName('lg-outer'), "\" class=\"lg-outer lg-use-css3 lg-css3 lg-hide-items ").concat(addClasses, " \">\n\n              <div id=\"").concat(this.getIdName('lg-content'), "\" class=\"lg-content\">\n                <div id=\"").concat(this.getIdName('lg-inner'), "\" class=\"lg-inner\">\n                </div>\n                ").concat(controls, "\n              </div>\n                <div id=\"").concat(this.getIdName('lg-toolbar'), "\" class=\"lg-toolbar lg-group\">\n                    ").concat(maximizeIcon, "\n                    ").concat(closeIcon, "\n                    </div>\n                    ").concat(this.settings.appendSubHtmlTo === '.lg-outer' ? subHtmlCont : '', "\n                <div id=\"").concat(this.getIdName('lg-components'), "\" class=\"lg-components\">\n                    ").concat(this.settings.appendSubHtmlTo === '.lg-sub-html' ? subHtmlCont : '', "\n                </div>\n            </div>\n        </div>\n        ");
-      $LG(this.settings.container).css('position', 'relative').append(template);
+      $LG(this.settings.container).append(template);
+
+      if (document.body !== this.settings.container) {
+        $LG(this.settings.container).css('position', 'relative');
+      }
+
       this.outer = this.getElementById('lg-outer');
       this.$lgComponents = this.getElementById('lg-components');
       this.$backdrop = this.getElementById('lg-backdrop');
@@ -7031,7 +7047,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
       this.$inner.css('transition-duration', this.settings.speed + 'ms');
 
       if (this.settings.download) {
-        this.$toolbar.append("<a id=\"".concat(this.getIdName('lg-download'), "\" target=\"_blank\" rel=\"noopener\" aria-label=\"Download\" download class=\"lg-download lg-icon\"></a>"));
+        this.$toolbar.append("<a id=\"".concat(this.getIdName('lg-download'), "\" target=\"_blank\" rel=\"noopener\" aria-label=\"").concat(this.settings.strings['download'], "\" download class=\"lg-download lg-icon\"></a>"));
       }
 
       this.counter();
@@ -7683,7 +7699,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
             dummyImg = this.getDummyImageContent($currentSlide, index, '');
           }
 
-          var _markup = lg_utils.getVideoPosterMarkup(poster, dummyImg || '', lgVideoStyle, videoInfo);
+          var _markup = lg_utils.getVideoPosterMarkup(poster, dummyImg || '', lgVideoStyle, this.settings.strings['playVideo'], videoInfo);
 
           $currentSlide.prepend(_markup);
         } else if (videoInfo) {
@@ -8984,6 +9000,18 @@ LightGalleryvue_type_script_lang_ts_Lightgallery = __decorate([Options({
     },
     onAfterClose: {
       type: Function
+    },
+    onRotateLeft: {
+      type: Function
+    },
+    onRotateRight: {
+      type: Function
+    },
+    onFlipHorizontal: {
+      type: Function
+    },
+    onFlipVertical: {
+      type: Function
     }
   }
 })], LightGalleryvue_type_script_lang_ts_Lightgallery);