mirror of
https://bitbucket.org/bellord13/kit.git
synced 2026-11-13 19:06:11 +03:00
upLG
This commit is contained in:
Bellord
@@ -0,0 +1,38 @@
|
||||
export interface AutoplayStrings {
|
||||
toggleAutoplay: string;
|
||||
}
|
||||
export interface AutoplaySettings {
|
||||
/**
|
||||
* Enable autoplay plugin
|
||||
*/
|
||||
autoplay: boolean;
|
||||
/**
|
||||
* Enable slideshow autoplay
|
||||
*/
|
||||
slideShowAutoplay: boolean;
|
||||
/**
|
||||
* The time (in ms) between each auto transition.
|
||||
*/
|
||||
slideShowInterval: number;
|
||||
/**
|
||||
* Show autoplay progressBar
|
||||
*/
|
||||
progressBar: boolean;
|
||||
/**
|
||||
* If false autoplay will be stopped after first user action
|
||||
*/
|
||||
forceSlideShowAutoplay: boolean;
|
||||
/**
|
||||
* Show/hide autoplay controls.
|
||||
*/
|
||||
autoplayControls: boolean;
|
||||
/**
|
||||
* Specify where the autoplay controls should be appended.
|
||||
*/
|
||||
appendAutoplayControlsTo: string;
|
||||
/**
|
||||
* Custom translation strings for aria-labels
|
||||
*/
|
||||
autoplayPluginStrings: AutoplayStrings;
|
||||
}
|
||||
export declare const autoplaySettings: AutoplaySettings;
|
||||
@@ -0,0 +1,22 @@
|
||||
import { LightGallery } from '../../lightgallery';
|
||||
import { AutoplaySettings } from './lg-autoplay-settings';
|
||||
/**
|
||||
* Creates the autoplay plugin.
|
||||
* @param {object} element - lightGallery element
|
||||
*/
|
||||
export default class Autoplay {
|
||||
core: LightGallery;
|
||||
settings: AutoplaySettings;
|
||||
interval: any;
|
||||
fromAuto: boolean;
|
||||
pausedOnTouchDrag: boolean;
|
||||
pausedOnSlideChange: boolean;
|
||||
constructor(instance: LightGallery);
|
||||
init(): void;
|
||||
private showProgressBar;
|
||||
private controls;
|
||||
startAutoPlay(): void;
|
||||
stopAutoPlay(): void;
|
||||
closeGallery(): void;
|
||||
destroy(): void;
|
||||
}
|
||||
@@ -0,0 +1,250 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var autoplaySettings = {
|
||||
autoplay: true,
|
||||
slideShowAutoplay: false,
|
||||
slideShowInterval: 5000,
|
||||
progressBar: true,
|
||||
forceSlideShowAutoplay: false,
|
||||
autoplayControls: true,
|
||||
appendAutoplayControlsTo: '.lg-toolbar',
|
||||
autoplayPluginStrings: {
|
||||
toggleAutoplay: 'Toggle Autoplay',
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates the autoplay plugin.
|
||||
* @param {object} element - lightGallery element
|
||||
*/
|
||||
var Autoplay = /** @class */ (function () {
|
||||
function Autoplay(instance) {
|
||||
this.core = instance;
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign({}, autoplaySettings), this.core.settings);
|
||||
return this;
|
||||
}
|
||||
Autoplay.prototype.init = function () {
|
||||
var _this = this;
|
||||
if (!this.settings.autoplay) {
|
||||
return;
|
||||
}
|
||||
this.interval = false;
|
||||
// Identify if slide happened from autoplay
|
||||
this.fromAuto = true;
|
||||
// Identify if autoplay canceled from touch/drag
|
||||
this.pausedOnTouchDrag = false;
|
||||
this.pausedOnSlideChange = false;
|
||||
// append autoplay controls
|
||||
if (this.settings.autoplayControls) {
|
||||
this.controls();
|
||||
}
|
||||
// Create progress bar
|
||||
if (this.settings.progressBar) {
|
||||
this.core.outer.append('<div class="lg-progress-bar"><div class="lg-progress"></div></div>');
|
||||
}
|
||||
// Start autoplay
|
||||
if (this.settings.slideShowAutoplay) {
|
||||
this.core.LGel.once(lGEvents.slideItemLoad + ".autoplay", function () {
|
||||
_this.startAutoPlay();
|
||||
});
|
||||
}
|
||||
// cancel interval on touchstart and dragstart
|
||||
this.core.LGel.on(lGEvents.dragStart + ".autoplay touchstart.lg.autoplay", function () {
|
||||
if (_this.interval) {
|
||||
_this.stopAutoPlay();
|
||||
_this.pausedOnTouchDrag = true;
|
||||
}
|
||||
});
|
||||
// restore autoplay if autoplay canceled from touchstart / dragstart
|
||||
this.core.LGel.on(lGEvents.dragEnd + ".autoplay touchend.lg.autoplay", function () {
|
||||
if (!_this.interval && _this.pausedOnTouchDrag) {
|
||||
_this.startAutoPlay();
|
||||
_this.pausedOnTouchDrag = false;
|
||||
}
|
||||
});
|
||||
this.core.LGel.on(lGEvents.beforeSlide + ".autoplay", function () {
|
||||
_this.showProgressBar();
|
||||
if (!_this.fromAuto && _this.interval) {
|
||||
_this.stopAutoPlay();
|
||||
_this.pausedOnSlideChange = true;
|
||||
}
|
||||
else {
|
||||
_this.pausedOnSlideChange = false;
|
||||
}
|
||||
_this.fromAuto = false;
|
||||
});
|
||||
// restore autoplay if autoplay canceled from touchstart / dragstart
|
||||
this.core.LGel.on(lGEvents.afterSlide + ".autoplay", function () {
|
||||
if (_this.pausedOnSlideChange &&
|
||||
!_this.interval &&
|
||||
_this.settings.forceSlideShowAutoplay) {
|
||||
_this.startAutoPlay();
|
||||
_this.pausedOnSlideChange = false;
|
||||
}
|
||||
});
|
||||
// set progress
|
||||
this.showProgressBar();
|
||||
};
|
||||
Autoplay.prototype.showProgressBar = function () {
|
||||
var _this = this;
|
||||
if (this.settings.progressBar && this.fromAuto) {
|
||||
var _$progressBar_1 = this.core.outer.find('.lg-progress-bar');
|
||||
var _$progress_1 = this.core.outer.find('.lg-progress');
|
||||
if (this.interval) {
|
||||
_$progress_1.removeAttr('style');
|
||||
_$progressBar_1.removeClass('lg-start');
|
||||
setTimeout(function () {
|
||||
_$progress_1.css('transition', 'width ' +
|
||||
(_this.core.settings.speed +
|
||||
_this.settings.slideShowInterval) +
|
||||
'ms ease 0s');
|
||||
_$progressBar_1.addClass('lg-start');
|
||||
}, 20);
|
||||
}
|
||||
}
|
||||
};
|
||||
// Manage autoplay via play/stop buttons
|
||||
Autoplay.prototype.controls = function () {
|
||||
var _this = this;
|
||||
var _html = "<button aria-label=\"" + this.settings.autoplayPluginStrings['toggleAutoplay'] + "\" type=\"button\" class=\"lg-autoplay-button lg-icon\"></button>";
|
||||
// Append autoplay controls
|
||||
this.core.outer
|
||||
.find(this.settings.appendAutoplayControlsTo)
|
||||
.append(_html);
|
||||
this.core.outer
|
||||
.find('.lg-autoplay-button')
|
||||
.first()
|
||||
.on('click.lg.autoplay', function () {
|
||||
if (_this.core.outer.hasClass('lg-show-autoplay')) {
|
||||
_this.stopAutoPlay();
|
||||
}
|
||||
else {
|
||||
if (!_this.interval) {
|
||||
_this.startAutoPlay();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
// Autostart gallery
|
||||
Autoplay.prototype.startAutoPlay = function () {
|
||||
var _this = this;
|
||||
this.core.outer
|
||||
.find('.lg-progress')
|
||||
.css('transition', 'width ' +
|
||||
(this.core.settings.speed +
|
||||
this.settings.slideShowInterval) +
|
||||
'ms ease 0s');
|
||||
this.core.outer.addClass('lg-show-autoplay');
|
||||
this.core.outer.find('.lg-progress-bar').addClass('lg-start');
|
||||
this.core.LGel.trigger(lGEvents.autoplayStart, {
|
||||
index: this.core.index,
|
||||
});
|
||||
this.interval = setInterval(function () {
|
||||
if (_this.core.index + 1 < _this.core.galleryItems.length) {
|
||||
_this.core.index++;
|
||||
}
|
||||
else {
|
||||
_this.core.index = 0;
|
||||
}
|
||||
_this.core.LGel.trigger(lGEvents.autoplay, {
|
||||
index: _this.core.index,
|
||||
});
|
||||
_this.fromAuto = true;
|
||||
_this.core.slide(_this.core.index, false, false, 'next');
|
||||
}, this.core.settings.speed + this.settings.slideShowInterval);
|
||||
};
|
||||
// cancel Autostart
|
||||
Autoplay.prototype.stopAutoPlay = function () {
|
||||
if (this.interval) {
|
||||
this.core.LGel.trigger(lGEvents.autoplayStop, {
|
||||
index: this.core.index,
|
||||
});
|
||||
this.core.outer.find('.lg-progress').removeAttr('style');
|
||||
this.core.outer.removeClass('lg-show-autoplay');
|
||||
this.core.outer.find('.lg-progress-bar').removeClass('lg-start');
|
||||
}
|
||||
clearInterval(this.interval);
|
||||
this.interval = false;
|
||||
};
|
||||
Autoplay.prototype.closeGallery = function () {
|
||||
this.stopAutoPlay();
|
||||
};
|
||||
Autoplay.prototype.destroy = function () {
|
||||
if (this.settings.autoplay) {
|
||||
this.core.outer.find('.lg-progress-bar').remove();
|
||||
}
|
||||
// Remove all event listeners added by autoplay plugin
|
||||
this.core.LGel.off('.lg.autoplay');
|
||||
this.core.LGel.off('.autoplay');
|
||||
};
|
||||
return Autoplay;
|
||||
}());
|
||||
|
||||
export default Autoplay;
|
||||
//# sourceMappingURL=lg-autoplay.es5.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o():"function"==typeof define&&define.amd?define(o):(t="undefined"!=typeof globalThis?globalThis:t||self).lgAutoplay=o()}(this,(function(){"use strict";var t=function(){return(t=Object.assign||function(t){for(var o,e=1,s=arguments.length;e<s;e++)for(var r in o=arguments[e])Object.prototype.hasOwnProperty.call(o,r)&&(t[r]=o[r]);return t}).apply(this,arguments)},o="lgSlideItemLoad",e="lgBeforeSlide",s="lgAfterSlide",r="lgDragStart",i="lgDragEnd",a="lgAutoplay",l="lgAutoplayStart",n="lgAutoplayStop",u={autoplay:!0,slideShowAutoplay:!1,slideShowInterval:5e3,progressBar:!0,forceSlideShowAutoplay:!1,autoplayControls:!0,appendAutoplayControlsTo:".lg-toolbar",autoplayPluginStrings:{toggleAutoplay:"Toggle Autoplay"}};return function(){function p(o){return this.core=o,this.settings=t(t({},u),this.core.settings),this}return p.prototype.init=function(){var t=this;this.settings.autoplay&&(this.interval=!1,this.fromAuto=!0,this.pausedOnTouchDrag=!1,this.pausedOnSlideChange=!1,this.settings.autoplayControls&&this.controls(),this.settings.progressBar&&this.core.outer.append('<div class="lg-progress-bar"><div class="lg-progress"></div></div>'),this.settings.slideShowAutoplay&&this.core.LGel.once(o+".autoplay",(function(){t.startAutoPlay()})),this.core.LGel.on(r+".autoplay touchstart.lg.autoplay",(function(){t.interval&&(t.stopAutoPlay(),t.pausedOnTouchDrag=!0)})),this.core.LGel.on(i+".autoplay touchend.lg.autoplay",(function(){!t.interval&&t.pausedOnTouchDrag&&(t.startAutoPlay(),t.pausedOnTouchDrag=!1)})),this.core.LGel.on(e+".autoplay",(function(){t.showProgressBar(),!t.fromAuto&&t.interval?(t.stopAutoPlay(),t.pausedOnSlideChange=!0):t.pausedOnSlideChange=!1,t.fromAuto=!1})),this.core.LGel.on(s+".autoplay",(function(){t.pausedOnSlideChange&&!t.interval&&t.settings.forceSlideShowAutoplay&&(t.startAutoPlay(),t.pausedOnSlideChange=!1)})),this.showProgressBar())},p.prototype.showProgressBar=function(){var t=this;if(this.settings.progressBar&&this.fromAuto){var o=this.core.outer.find(".lg-progress-bar"),e=this.core.outer.find(".lg-progress");this.interval&&(e.removeAttr("style"),o.removeClass("lg-start"),setTimeout((function(){e.css("transition","width "+(t.core.settings.speed+t.settings.slideShowInterval)+"ms ease 0s"),o.addClass("lg-start")}),20))}},p.prototype.controls=function(){var t=this,o='<button aria-label="'+this.settings.autoplayPluginStrings.toggleAutoplay+'" type="button" class="lg-autoplay-button lg-icon"></button>';this.core.outer.find(this.settings.appendAutoplayControlsTo).append(o),this.core.outer.find(".lg-autoplay-button").first().on("click.lg.autoplay",(function(){t.core.outer.hasClass("lg-show-autoplay")?t.stopAutoPlay():t.interval||t.startAutoPlay()}))},p.prototype.startAutoPlay=function(){var t=this;this.core.outer.find(".lg-progress").css("transition","width "+(this.core.settings.speed+this.settings.slideShowInterval)+"ms ease 0s"),this.core.outer.addClass("lg-show-autoplay"),this.core.outer.find(".lg-progress-bar").addClass("lg-start"),this.core.LGel.trigger(l,{index:this.core.index}),this.interval=setInterval((function(){t.core.index+1<t.core.galleryItems.length?t.core.index++:t.core.index=0,t.core.LGel.trigger(a,{index:t.core.index}),t.fromAuto=!0,t.core.slide(t.core.index,!1,!1,"next")}),this.core.settings.speed+this.settings.slideShowInterval)},p.prototype.stopAutoPlay=function(){this.interval&&(this.core.LGel.trigger(n,{index:this.core.index}),this.core.outer.find(".lg-progress").removeAttr("style"),this.core.outer.removeClass("lg-show-autoplay"),this.core.outer.find(".lg-progress-bar").removeClass("lg-start")),clearInterval(this.interval),this.interval=!1},p.prototype.closeGallery=function(){this.stopAutoPlay()},p.prototype.destroy=function(){this.settings.autoplay&&this.core.outer.find(".lg-progress-bar").remove(),this.core.LGel.off(".lg.autoplay"),this.core.LGel.off(".autoplay")},p}()}));
|
||||
@@ -0,0 +1,258 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgAutoplay = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var autoplaySettings = {
|
||||
autoplay: true,
|
||||
slideShowAutoplay: false,
|
||||
slideShowInterval: 5000,
|
||||
progressBar: true,
|
||||
forceSlideShowAutoplay: false,
|
||||
autoplayControls: true,
|
||||
appendAutoplayControlsTo: '.lg-toolbar',
|
||||
autoplayPluginStrings: {
|
||||
toggleAutoplay: 'Toggle Autoplay',
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates the autoplay plugin.
|
||||
* @param {object} element - lightGallery element
|
||||
*/
|
||||
var Autoplay = /** @class */ (function () {
|
||||
function Autoplay(instance) {
|
||||
this.core = instance;
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign({}, autoplaySettings), this.core.settings);
|
||||
return this;
|
||||
}
|
||||
Autoplay.prototype.init = function () {
|
||||
var _this = this;
|
||||
if (!this.settings.autoplay) {
|
||||
return;
|
||||
}
|
||||
this.interval = false;
|
||||
// Identify if slide happened from autoplay
|
||||
this.fromAuto = true;
|
||||
// Identify if autoplay canceled from touch/drag
|
||||
this.pausedOnTouchDrag = false;
|
||||
this.pausedOnSlideChange = false;
|
||||
// append autoplay controls
|
||||
if (this.settings.autoplayControls) {
|
||||
this.controls();
|
||||
}
|
||||
// Create progress bar
|
||||
if (this.settings.progressBar) {
|
||||
this.core.outer.append('<div class="lg-progress-bar"><div class="lg-progress"></div></div>');
|
||||
}
|
||||
// Start autoplay
|
||||
if (this.settings.slideShowAutoplay) {
|
||||
this.core.LGel.once(lGEvents.slideItemLoad + ".autoplay", function () {
|
||||
_this.startAutoPlay();
|
||||
});
|
||||
}
|
||||
// cancel interval on touchstart and dragstart
|
||||
this.core.LGel.on(lGEvents.dragStart + ".autoplay touchstart.lg.autoplay", function () {
|
||||
if (_this.interval) {
|
||||
_this.stopAutoPlay();
|
||||
_this.pausedOnTouchDrag = true;
|
||||
}
|
||||
});
|
||||
// restore autoplay if autoplay canceled from touchstart / dragstart
|
||||
this.core.LGel.on(lGEvents.dragEnd + ".autoplay touchend.lg.autoplay", function () {
|
||||
if (!_this.interval && _this.pausedOnTouchDrag) {
|
||||
_this.startAutoPlay();
|
||||
_this.pausedOnTouchDrag = false;
|
||||
}
|
||||
});
|
||||
this.core.LGel.on(lGEvents.beforeSlide + ".autoplay", function () {
|
||||
_this.showProgressBar();
|
||||
if (!_this.fromAuto && _this.interval) {
|
||||
_this.stopAutoPlay();
|
||||
_this.pausedOnSlideChange = true;
|
||||
}
|
||||
else {
|
||||
_this.pausedOnSlideChange = false;
|
||||
}
|
||||
_this.fromAuto = false;
|
||||
});
|
||||
// restore autoplay if autoplay canceled from touchstart / dragstart
|
||||
this.core.LGel.on(lGEvents.afterSlide + ".autoplay", function () {
|
||||
if (_this.pausedOnSlideChange &&
|
||||
!_this.interval &&
|
||||
_this.settings.forceSlideShowAutoplay) {
|
||||
_this.startAutoPlay();
|
||||
_this.pausedOnSlideChange = false;
|
||||
}
|
||||
});
|
||||
// set progress
|
||||
this.showProgressBar();
|
||||
};
|
||||
Autoplay.prototype.showProgressBar = function () {
|
||||
var _this = this;
|
||||
if (this.settings.progressBar && this.fromAuto) {
|
||||
var _$progressBar_1 = this.core.outer.find('.lg-progress-bar');
|
||||
var _$progress_1 = this.core.outer.find('.lg-progress');
|
||||
if (this.interval) {
|
||||
_$progress_1.removeAttr('style');
|
||||
_$progressBar_1.removeClass('lg-start');
|
||||
setTimeout(function () {
|
||||
_$progress_1.css('transition', 'width ' +
|
||||
(_this.core.settings.speed +
|
||||
_this.settings.slideShowInterval) +
|
||||
'ms ease 0s');
|
||||
_$progressBar_1.addClass('lg-start');
|
||||
}, 20);
|
||||
}
|
||||
}
|
||||
};
|
||||
// Manage autoplay via play/stop buttons
|
||||
Autoplay.prototype.controls = function () {
|
||||
var _this = this;
|
||||
var _html = "<button aria-label=\"" + this.settings.autoplayPluginStrings['toggleAutoplay'] + "\" type=\"button\" class=\"lg-autoplay-button lg-icon\"></button>";
|
||||
// Append autoplay controls
|
||||
this.core.outer
|
||||
.find(this.settings.appendAutoplayControlsTo)
|
||||
.append(_html);
|
||||
this.core.outer
|
||||
.find('.lg-autoplay-button')
|
||||
.first()
|
||||
.on('click.lg.autoplay', function () {
|
||||
if (_this.core.outer.hasClass('lg-show-autoplay')) {
|
||||
_this.stopAutoPlay();
|
||||
}
|
||||
else {
|
||||
if (!_this.interval) {
|
||||
_this.startAutoPlay();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
// Autostart gallery
|
||||
Autoplay.prototype.startAutoPlay = function () {
|
||||
var _this = this;
|
||||
this.core.outer
|
||||
.find('.lg-progress')
|
||||
.css('transition', 'width ' +
|
||||
(this.core.settings.speed +
|
||||
this.settings.slideShowInterval) +
|
||||
'ms ease 0s');
|
||||
this.core.outer.addClass('lg-show-autoplay');
|
||||
this.core.outer.find('.lg-progress-bar').addClass('lg-start');
|
||||
this.core.LGel.trigger(lGEvents.autoplayStart, {
|
||||
index: this.core.index,
|
||||
});
|
||||
this.interval = setInterval(function () {
|
||||
if (_this.core.index + 1 < _this.core.galleryItems.length) {
|
||||
_this.core.index++;
|
||||
}
|
||||
else {
|
||||
_this.core.index = 0;
|
||||
}
|
||||
_this.core.LGel.trigger(lGEvents.autoplay, {
|
||||
index: _this.core.index,
|
||||
});
|
||||
_this.fromAuto = true;
|
||||
_this.core.slide(_this.core.index, false, false, 'next');
|
||||
}, this.core.settings.speed + this.settings.slideShowInterval);
|
||||
};
|
||||
// cancel Autostart
|
||||
Autoplay.prototype.stopAutoPlay = function () {
|
||||
if (this.interval) {
|
||||
this.core.LGel.trigger(lGEvents.autoplayStop, {
|
||||
index: this.core.index,
|
||||
});
|
||||
this.core.outer.find('.lg-progress').removeAttr('style');
|
||||
this.core.outer.removeClass('lg-show-autoplay');
|
||||
this.core.outer.find('.lg-progress-bar').removeClass('lg-start');
|
||||
}
|
||||
clearInterval(this.interval);
|
||||
this.interval = false;
|
||||
};
|
||||
Autoplay.prototype.closeGallery = function () {
|
||||
this.stopAutoPlay();
|
||||
};
|
||||
Autoplay.prototype.destroy = function () {
|
||||
if (this.settings.autoplay) {
|
||||
this.core.outer.find('.lg-progress-bar').remove();
|
||||
}
|
||||
// Remove all event listeners added by autoplay plugin
|
||||
this.core.LGel.off('.lg.autoplay');
|
||||
this.core.LGel.off('.autoplay');
|
||||
};
|
||||
return Autoplay;
|
||||
}());
|
||||
|
||||
return Autoplay;
|
||||
|
||||
})));
|
||||
//# sourceMappingURL=lg-autoplay.umd.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"name": "lightgallery/plugins/autoplay",
|
||||
"private": true,
|
||||
"main": "lg-autoplay.umd.js",
|
||||
"module": "lg-autoplay.es5.js",
|
||||
"typings": "lg-autoplay.d.ts"
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
export interface CommentStrings {
|
||||
toggleComments: string;
|
||||
}
|
||||
export interface CommentSettings {
|
||||
/**
|
||||
* Enable comment box
|
||||
*/
|
||||
commentBox: boolean;
|
||||
/**
|
||||
* Enable facebook comment box
|
||||
*/
|
||||
fbComments: boolean;
|
||||
/**
|
||||
* Enable disqus comment box
|
||||
*/
|
||||
disqusComments: boolean;
|
||||
/**
|
||||
* Disqus comment config
|
||||
*/
|
||||
disqusConfig: {
|
||||
title?: string;
|
||||
language: string;
|
||||
};
|
||||
/**
|
||||
* Facebook comments default markup
|
||||
*/
|
||||
commentsMarkup: string;
|
||||
/**
|
||||
* Custom translation strings for aria-labels
|
||||
*/
|
||||
commentPluginStrings: CommentStrings;
|
||||
}
|
||||
export declare const commentSettings: CommentSettings;
|
||||
@@ -0,0 +1,25 @@
|
||||
/**
|
||||
* lightGallery comments module
|
||||
* Supports facebook and disqus comments
|
||||
*
|
||||
* @ref - https://help.disqus.com/customer/portal/articles/472098-javascript-configuration-variables
|
||||
* @ref - https://github.com/disqus/DISQUS-API-Recipes/blob/master/snippets/js/disqus-reset/disqus_reset.html
|
||||
* @ref - https://css-tricks.com/lazy-loading-disqus-comments/
|
||||
* @ref - https://developers.facebook.com/docs/plugins/comments/#comments-plugin
|
||||
*
|
||||
*/
|
||||
import { LgQuery } from '../../lgQuery';
|
||||
import { LightGallery } from '../../lightgallery';
|
||||
import { CommentSettings } from './lg-comment-settings';
|
||||
export default class CommentBox {
|
||||
core: LightGallery;
|
||||
settings: CommentSettings;
|
||||
private $LG;
|
||||
constructor(instance: LightGallery, $LG: LgQuery);
|
||||
init(): void;
|
||||
private setMarkup;
|
||||
toggleCommentBox(): void;
|
||||
addFbComments(): void;
|
||||
addDisqusComments(): void;
|
||||
destroy(): void;
|
||||
}
|
||||
@@ -0,0 +1,205 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var commentSettings = {
|
||||
commentBox: false,
|
||||
fbComments: false,
|
||||
disqusComments: false,
|
||||
disqusConfig: {
|
||||
title: undefined,
|
||||
language: 'en',
|
||||
},
|
||||
commentsMarkup: '<div id="lg-comment-box" class="lg-comment-box lg-fb-comment-box"><div class="lg-comment-header"><h3 class="lg-comment-title">Leave a comment.</h3><span class="lg-comment-close lg-icon"></span></div><div class="lg-comment-body"></div></div>',
|
||||
commentPluginStrings: {
|
||||
toggleComments: 'Toggle Comments',
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* lightGallery comments module
|
||||
* Supports facebook and disqus comments
|
||||
*
|
||||
* @ref - https://help.disqus.com/customer/portal/articles/472098-javascript-configuration-variables
|
||||
* @ref - https://github.com/disqus/DISQUS-API-Recipes/blob/master/snippets/js/disqus-reset/disqus_reset.html
|
||||
* @ref - https://css-tricks.com/lazy-loading-disqus-comments/
|
||||
* @ref - https://developers.facebook.com/docs/plugins/comments/#comments-plugin
|
||||
*
|
||||
*/
|
||||
var CommentBox = /** @class */ (function () {
|
||||
function CommentBox(instance, $LG) {
|
||||
// get lightGallery core plugin instance
|
||||
this.core = instance;
|
||||
this.$LG = $LG;
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign({}, commentSettings), this.core.settings);
|
||||
return this;
|
||||
}
|
||||
CommentBox.prototype.init = function () {
|
||||
if (!this.settings.commentBox) {
|
||||
return;
|
||||
}
|
||||
this.setMarkup();
|
||||
this.toggleCommentBox();
|
||||
if (this.settings.fbComments) {
|
||||
this.addFbComments();
|
||||
}
|
||||
else if (this.settings.disqusComments) {
|
||||
this.addDisqusComments();
|
||||
}
|
||||
};
|
||||
CommentBox.prototype.setMarkup = function () {
|
||||
this.core.outer.append(this.settings.commentsMarkup +
|
||||
'<div class="lg-comment-overlay"></div>');
|
||||
var commentToggleBtn = "<button type=\"button\" aria-label=\"" + this.settings.commentPluginStrings['toggleComments'] + "\" class=\"lg-comment-toggle lg-icon\"></button>";
|
||||
this.core.$toolbar.append(commentToggleBtn);
|
||||
};
|
||||
CommentBox.prototype.toggleCommentBox = function () {
|
||||
var _this_1 = this;
|
||||
this.core.outer
|
||||
.find('.lg-comment-toggle')
|
||||
.first()
|
||||
.on('click.lg.comment', function () {
|
||||
_this_1.core.outer.toggleClass('lg-comment-active');
|
||||
});
|
||||
this.core.outer
|
||||
.find('.lg-comment-overlay')
|
||||
.first()
|
||||
.on('click.lg.comment', function () {
|
||||
_this_1.core.outer.removeClass('lg-comment-active');
|
||||
});
|
||||
this.core.outer
|
||||
.find('.lg-comment-close')
|
||||
.first()
|
||||
.on('click.lg.comment', function () {
|
||||
_this_1.core.outer.removeClass('lg-comment-active');
|
||||
});
|
||||
};
|
||||
CommentBox.prototype.addFbComments = function () {
|
||||
var _this_1 = this;
|
||||
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
||||
var _this = this;
|
||||
this.core.LGel.on(lGEvents.beforeSlide + ".comment", function (event) {
|
||||
var html = _this_1.core.galleryItems[event.detail.index].fbHtml;
|
||||
_this_1.core.outer.find('.lg-comment-body').html(html);
|
||||
});
|
||||
this.core.LGel.on(lGEvents.afterSlide + ".comment", function () {
|
||||
try {
|
||||
FB.XFBML.parse();
|
||||
}
|
||||
catch (err) {
|
||||
_this.$LG(window).on('fbAsyncInit', function () {
|
||||
FB.XFBML.parse();
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
CommentBox.prototype.addDisqusComments = function () {
|
||||
var _this_1 = this;
|
||||
var $disqusThread = this.$LG('#disqus_thread');
|
||||
$disqusThread.remove();
|
||||
this.core.outer
|
||||
.find('.lg-comment-body')
|
||||
.append('<div id="disqus_thread"></div>');
|
||||
this.core.LGel.on(lGEvents.beforeSlide + ".comment", function () {
|
||||
$disqusThread.html('');
|
||||
});
|
||||
this.core.LGel.on(lGEvents.afterSlide + ".comment", function (event) {
|
||||
var index = event.detail.index;
|
||||
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
||||
var _this = _this_1;
|
||||
// DISQUS needs sometime to intialize when lightGallery is opened from direct url(hash plugin).
|
||||
setTimeout(function () {
|
||||
try {
|
||||
DISQUS.reset({
|
||||
reload: true,
|
||||
config: function () {
|
||||
this.page.identifier =
|
||||
_this.core.galleryItems[index].disqusIdentifier;
|
||||
this.page.url =
|
||||
_this.core.galleryItems[index].disqusURL;
|
||||
this.page.title =
|
||||
_this.settings.disqusConfig.title;
|
||||
this.language =
|
||||
_this.settings.disqusConfig.language;
|
||||
},
|
||||
});
|
||||
}
|
||||
catch (err) {
|
||||
console.error('Make sure you have included disqus JavaScript code in your document. Ex - https://lg-disqus.disqus.com/admin/install/platforms/universalcode/');
|
||||
}
|
||||
}, _this.core.lGalleryOn ? 0 : 1000);
|
||||
});
|
||||
};
|
||||
CommentBox.prototype.destroy = function () {
|
||||
this.core.LGel.off('.lg.comment');
|
||||
this.core.LGel.off('.comment');
|
||||
};
|
||||
return CommentBox;
|
||||
}());
|
||||
|
||||
export default CommentBox;
|
||||
//# sourceMappingURL=lg-comment.es5.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).lgComment=e()}(this,(function(){"use strict";var t=function(){return(t=Object.assign||function(t){for(var e,o=1,n=arguments.length;o<n;o++)for(var i in e=arguments[o])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)},e="lgBeforeSlide",o="lgAfterSlide",n={commentBox:!1,fbComments:!1,disqusComments:!1,disqusConfig:{title:void 0,language:"en"},commentsMarkup:'<div id="lg-comment-box" class="lg-comment-box lg-fb-comment-box"><div class="lg-comment-header"><h3 class="lg-comment-title">Leave a comment.</h3><span class="lg-comment-close lg-icon"></span></div><div class="lg-comment-body"></div></div>',commentPluginStrings:{toggleComments:"Toggle Comments"}};return function(){function i(e,o){return this.core=e,this.$LG=o,this.settings=t(t({},n),this.core.settings),this}return i.prototype.init=function(){this.settings.commentBox&&(this.setMarkup(),this.toggleCommentBox(),this.settings.fbComments?this.addFbComments():this.settings.disqusComments&&this.addDisqusComments())},i.prototype.setMarkup=function(){this.core.outer.append(this.settings.commentsMarkup+'<div class="lg-comment-overlay"></div>');var t='<button type="button" aria-label="'+this.settings.commentPluginStrings.toggleComments+'" class="lg-comment-toggle lg-icon"></button>';this.core.$toolbar.append(t)},i.prototype.toggleCommentBox=function(){var t=this;this.core.outer.find(".lg-comment-toggle").first().on("click.lg.comment",(function(){t.core.outer.toggleClass("lg-comment-active")})),this.core.outer.find(".lg-comment-overlay").first().on("click.lg.comment",(function(){t.core.outer.removeClass("lg-comment-active")})),this.core.outer.find(".lg-comment-close").first().on("click.lg.comment",(function(){t.core.outer.removeClass("lg-comment-active")}))},i.prototype.addFbComments=function(){var t=this,n=this;this.core.LGel.on(e+".comment",(function(e){var o=t.core.galleryItems[e.detail.index].fbHtml;t.core.outer.find(".lg-comment-body").html(o)})),this.core.LGel.on(o+".comment",(function(){try{FB.XFBML.parse()}catch(t){n.$LG(window).on("fbAsyncInit",(function(){FB.XFBML.parse()}))}}))},i.prototype.addDisqusComments=function(){var t=this,n=this.$LG("#disqus_thread");n.remove(),this.core.outer.find(".lg-comment-body").append('<div id="disqus_thread"></div>'),this.core.LGel.on(e+".comment",(function(){n.html("")})),this.core.LGel.on(o+".comment",(function(e){var o=e.detail.index,n=t;setTimeout((function(){try{DISQUS.reset({reload:!0,config:function(){this.page.identifier=n.core.galleryItems[o].disqusIdentifier,this.page.url=n.core.galleryItems[o].disqusURL,this.page.title=n.settings.disqusConfig.title,this.language=n.settings.disqusConfig.language}})}catch(t){console.error("Make sure you have included disqus JavaScript code in your document. Ex - https://lg-disqus.disqus.com/admin/install/platforms/universalcode/")}}),n.core.lGalleryOn?0:1e3)}))},i.prototype.destroy=function(){this.core.LGel.off(".lg.comment"),this.core.LGel.off(".comment")},i}()}));
|
||||
@@ -0,0 +1,213 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgComment = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var commentSettings = {
|
||||
commentBox: false,
|
||||
fbComments: false,
|
||||
disqusComments: false,
|
||||
disqusConfig: {
|
||||
title: undefined,
|
||||
language: 'en',
|
||||
},
|
||||
commentsMarkup: '<div id="lg-comment-box" class="lg-comment-box lg-fb-comment-box"><div class="lg-comment-header"><h3 class="lg-comment-title">Leave a comment.</h3><span class="lg-comment-close lg-icon"></span></div><div class="lg-comment-body"></div></div>',
|
||||
commentPluginStrings: {
|
||||
toggleComments: 'Toggle Comments',
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* lightGallery comments module
|
||||
* Supports facebook and disqus comments
|
||||
*
|
||||
* @ref - https://help.disqus.com/customer/portal/articles/472098-javascript-configuration-variables
|
||||
* @ref - https://github.com/disqus/DISQUS-API-Recipes/blob/master/snippets/js/disqus-reset/disqus_reset.html
|
||||
* @ref - https://css-tricks.com/lazy-loading-disqus-comments/
|
||||
* @ref - https://developers.facebook.com/docs/plugins/comments/#comments-plugin
|
||||
*
|
||||
*/
|
||||
var CommentBox = /** @class */ (function () {
|
||||
function CommentBox(instance, $LG) {
|
||||
// get lightGallery core plugin instance
|
||||
this.core = instance;
|
||||
this.$LG = $LG;
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign({}, commentSettings), this.core.settings);
|
||||
return this;
|
||||
}
|
||||
CommentBox.prototype.init = function () {
|
||||
if (!this.settings.commentBox) {
|
||||
return;
|
||||
}
|
||||
this.setMarkup();
|
||||
this.toggleCommentBox();
|
||||
if (this.settings.fbComments) {
|
||||
this.addFbComments();
|
||||
}
|
||||
else if (this.settings.disqusComments) {
|
||||
this.addDisqusComments();
|
||||
}
|
||||
};
|
||||
CommentBox.prototype.setMarkup = function () {
|
||||
this.core.outer.append(this.settings.commentsMarkup +
|
||||
'<div class="lg-comment-overlay"></div>');
|
||||
var commentToggleBtn = "<button type=\"button\" aria-label=\"" + this.settings.commentPluginStrings['toggleComments'] + "\" class=\"lg-comment-toggle lg-icon\"></button>";
|
||||
this.core.$toolbar.append(commentToggleBtn);
|
||||
};
|
||||
CommentBox.prototype.toggleCommentBox = function () {
|
||||
var _this_1 = this;
|
||||
this.core.outer
|
||||
.find('.lg-comment-toggle')
|
||||
.first()
|
||||
.on('click.lg.comment', function () {
|
||||
_this_1.core.outer.toggleClass('lg-comment-active');
|
||||
});
|
||||
this.core.outer
|
||||
.find('.lg-comment-overlay')
|
||||
.first()
|
||||
.on('click.lg.comment', function () {
|
||||
_this_1.core.outer.removeClass('lg-comment-active');
|
||||
});
|
||||
this.core.outer
|
||||
.find('.lg-comment-close')
|
||||
.first()
|
||||
.on('click.lg.comment', function () {
|
||||
_this_1.core.outer.removeClass('lg-comment-active');
|
||||
});
|
||||
};
|
||||
CommentBox.prototype.addFbComments = function () {
|
||||
var _this_1 = this;
|
||||
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
||||
var _this = this;
|
||||
this.core.LGel.on(lGEvents.beforeSlide + ".comment", function (event) {
|
||||
var html = _this_1.core.galleryItems[event.detail.index].fbHtml;
|
||||
_this_1.core.outer.find('.lg-comment-body').html(html);
|
||||
});
|
||||
this.core.LGel.on(lGEvents.afterSlide + ".comment", function () {
|
||||
try {
|
||||
FB.XFBML.parse();
|
||||
}
|
||||
catch (err) {
|
||||
_this.$LG(window).on('fbAsyncInit', function () {
|
||||
FB.XFBML.parse();
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
CommentBox.prototype.addDisqusComments = function () {
|
||||
var _this_1 = this;
|
||||
var $disqusThread = this.$LG('#disqus_thread');
|
||||
$disqusThread.remove();
|
||||
this.core.outer
|
||||
.find('.lg-comment-body')
|
||||
.append('<div id="disqus_thread"></div>');
|
||||
this.core.LGel.on(lGEvents.beforeSlide + ".comment", function () {
|
||||
$disqusThread.html('');
|
||||
});
|
||||
this.core.LGel.on(lGEvents.afterSlide + ".comment", function (event) {
|
||||
var index = event.detail.index;
|
||||
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
||||
var _this = _this_1;
|
||||
// DISQUS needs sometime to intialize when lightGallery is opened from direct url(hash plugin).
|
||||
setTimeout(function () {
|
||||
try {
|
||||
DISQUS.reset({
|
||||
reload: true,
|
||||
config: function () {
|
||||
this.page.identifier =
|
||||
_this.core.galleryItems[index].disqusIdentifier;
|
||||
this.page.url =
|
||||
_this.core.galleryItems[index].disqusURL;
|
||||
this.page.title =
|
||||
_this.settings.disqusConfig.title;
|
||||
this.language =
|
||||
_this.settings.disqusConfig.language;
|
||||
},
|
||||
});
|
||||
}
|
||||
catch (err) {
|
||||
console.error('Make sure you have included disqus JavaScript code in your document. Ex - https://lg-disqus.disqus.com/admin/install/platforms/universalcode/');
|
||||
}
|
||||
}, _this.core.lGalleryOn ? 0 : 1000);
|
||||
});
|
||||
};
|
||||
CommentBox.prototype.destroy = function () {
|
||||
this.core.LGel.off('.lg.comment');
|
||||
this.core.LGel.off('.comment');
|
||||
};
|
||||
return CommentBox;
|
||||
}());
|
||||
|
||||
return CommentBox;
|
||||
|
||||
})));
|
||||
//# sourceMappingURL=lg-comment.umd.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"name": "lightgallery/plugins/comment",
|
||||
"private": true,
|
||||
"main": "lg-comment.umd.js",
|
||||
"module": "lg-comment.es5.js",
|
||||
"typings": "lg-comment.d.ts"
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
export interface FullscreenStrings {
|
||||
toggleFullscreen: string;
|
||||
}
|
||||
export interface FullscreenSettings {
|
||||
/**
|
||||
* Enable/Disable fullscreen option
|
||||
*/
|
||||
fullScreen: boolean;
|
||||
/**
|
||||
* Custom translation strings for aria-labels
|
||||
*/
|
||||
fullscreenPluginStrings: FullscreenStrings;
|
||||
}
|
||||
export declare const fullscreenSettings: FullscreenSettings;
|
||||
@@ -0,0 +1,16 @@
|
||||
import { LgQuery } from '../../lgQuery';
|
||||
import { LightGallery } from '../../lightgallery';
|
||||
import { FullscreenSettings } from './lg-fullscreen-settings';
|
||||
export default class FullScreen {
|
||||
core: LightGallery;
|
||||
settings: FullscreenSettings;
|
||||
private $LG;
|
||||
constructor(instance: LightGallery, $LG: LgQuery);
|
||||
init(): void;
|
||||
private isFullScreen;
|
||||
private requestFullscreen;
|
||||
private exitFullscreen;
|
||||
private fullScreen;
|
||||
closeGallery(): void;
|
||||
destroy(): void;
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
var fullscreenSettings = {
|
||||
fullScreen: true,
|
||||
fullscreenPluginStrings: {
|
||||
toggleFullscreen: 'Toggle Fullscreen',
|
||||
},
|
||||
};
|
||||
|
||||
var FullScreen = /** @class */ (function () {
|
||||
function FullScreen(instance, $LG) {
|
||||
// get lightGallery core plugin instance
|
||||
this.core = instance;
|
||||
this.$LG = $LG;
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign({}, fullscreenSettings), this.core.settings);
|
||||
return this;
|
||||
}
|
||||
FullScreen.prototype.init = function () {
|
||||
var fullScreen = '';
|
||||
if (this.settings.fullScreen) {
|
||||
// check for fullscreen browser support
|
||||
if (!document.fullscreenEnabled &&
|
||||
!document.webkitFullscreenEnabled &&
|
||||
!document.mozFullScreenEnabled &&
|
||||
!document.msFullscreenEnabled) {
|
||||
return;
|
||||
}
|
||||
else {
|
||||
fullScreen = "<button type=\"button\" aria-label=\"" + this.settings.fullscreenPluginStrings['toggleFullscreen'] + "\" class=\"lg-fullscreen lg-icon\"></button>";
|
||||
this.core.$toolbar.append(fullScreen);
|
||||
this.fullScreen();
|
||||
}
|
||||
}
|
||||
};
|
||||
FullScreen.prototype.isFullScreen = function () {
|
||||
return (document.fullscreenElement ||
|
||||
document.mozFullScreenElement ||
|
||||
document.webkitFullscreenElement ||
|
||||
document.msFullscreenElement);
|
||||
};
|
||||
FullScreen.prototype.requestFullscreen = function () {
|
||||
var el = document.documentElement;
|
||||
if (el.requestFullscreen) {
|
||||
el.requestFullscreen();
|
||||
}
|
||||
else if (el.msRequestFullscreen) {
|
||||
el.msRequestFullscreen();
|
||||
}
|
||||
else if (el.mozRequestFullScreen) {
|
||||
el.mozRequestFullScreen();
|
||||
}
|
||||
else if (el.webkitRequestFullscreen) {
|
||||
el.webkitRequestFullscreen();
|
||||
}
|
||||
};
|
||||
FullScreen.prototype.exitFullscreen = function () {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen();
|
||||
}
|
||||
else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
}
|
||||
else if (document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen();
|
||||
}
|
||||
};
|
||||
// https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
|
||||
FullScreen.prototype.fullScreen = function () {
|
||||
var _this = this;
|
||||
this.$LG(document).on("fullscreenchange.lg.global" + this.core.lgId + " \n webkitfullscreenchange.lg.global" + this.core.lgId + " \n mozfullscreenchange.lg.global" + this.core.lgId + " \n MSFullscreenChange.lg.global" + this.core.lgId, function () {
|
||||
if (!_this.core.lgOpened)
|
||||
return;
|
||||
_this.core.outer.toggleClass('lg-fullscreen-on');
|
||||
});
|
||||
this.core.outer
|
||||
.find('.lg-fullscreen')
|
||||
.first()
|
||||
.on('click.lg', function () {
|
||||
if (_this.isFullScreen()) {
|
||||
_this.exitFullscreen();
|
||||
}
|
||||
else {
|
||||
_this.requestFullscreen();
|
||||
}
|
||||
});
|
||||
};
|
||||
FullScreen.prototype.closeGallery = function () {
|
||||
// exit from fullscreen if activated
|
||||
if (this.isFullScreen()) {
|
||||
this.exitFullscreen();
|
||||
}
|
||||
};
|
||||
FullScreen.prototype.destroy = function () {
|
||||
this.$LG(document).off("fullscreenchange.lg.global" + this.core.lgId + " \n webkitfullscreenchange.lg.global" + this.core.lgId + " \n mozfullscreenchange.lg.global" + this.core.lgId + " \n MSFullscreenChange.lg.global" + this.core.lgId);
|
||||
};
|
||||
return FullScreen;
|
||||
}());
|
||||
|
||||
export default FullScreen;
|
||||
//# sourceMappingURL=lg-fullscreen.es5.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
!function(e,l){"object"==typeof exports&&"undefined"!=typeof module?module.exports=l():"function"==typeof define&&define.amd?define(l):(e="undefined"!=typeof globalThis?globalThis:e||self).lgFullscreen=l()}(this,(function(){"use strict";var e=function(){return(e=Object.assign||function(e){for(var l,n=1,t=arguments.length;n<t;n++)for(var c in l=arguments[n])Object.prototype.hasOwnProperty.call(l,c)&&(e[c]=l[c]);return e}).apply(this,arguments)},l={fullScreen:!0,fullscreenPluginStrings:{toggleFullscreen:"Toggle Fullscreen"}};return function(){function n(n,t){return this.core=n,this.$LG=t,this.settings=e(e({},l),this.core.settings),this}return n.prototype.init=function(){var e="";if(this.settings.fullScreen){if(!(document.fullscreenEnabled||document.webkitFullscreenEnabled||document.mozFullScreenEnabled||document.msFullscreenEnabled))return;e='<button type="button" aria-label="'+this.settings.fullscreenPluginStrings.toggleFullscreen+'" class="lg-fullscreen lg-icon"></button>',this.core.$toolbar.append(e),this.fullScreen()}},n.prototype.isFullScreen=function(){return document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement},n.prototype.requestFullscreen=function(){var e=document.documentElement;e.requestFullscreen?e.requestFullscreen():e.msRequestFullscreen?e.msRequestFullscreen():e.mozRequestFullScreen?e.mozRequestFullScreen():e.webkitRequestFullscreen&&e.webkitRequestFullscreen()},n.prototype.exitFullscreen=function(){document.exitFullscreen?document.exitFullscreen():document.msExitFullscreen?document.msExitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen&&document.webkitExitFullscreen()},n.prototype.fullScreen=function(){var e=this;this.$LG(document).on("fullscreenchange.lg.global"+this.core.lgId+" \n webkitfullscreenchange.lg.global"+this.core.lgId+" \n mozfullscreenchange.lg.global"+this.core.lgId+" \n MSFullscreenChange.lg.global"+this.core.lgId,(function(){e.core.lgOpened&&e.core.outer.toggleClass("lg-fullscreen-on")})),this.core.outer.find(".lg-fullscreen").first().on("click.lg",(function(){e.isFullScreen()?e.exitFullscreen():e.requestFullscreen()}))},n.prototype.closeGallery=function(){this.isFullScreen()&&this.exitFullscreen()},n.prototype.destroy=function(){this.$LG(document).off("fullscreenchange.lg.global"+this.core.lgId+" \n webkitfullscreenchange.lg.global"+this.core.lgId+" \n mozfullscreenchange.lg.global"+this.core.lgId+" \n MSFullscreenChange.lg.global"+this.core.lgId)},n}()}));
|
||||
@@ -0,0 +1,143 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgFullscreen = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
var fullscreenSettings = {
|
||||
fullScreen: true,
|
||||
fullscreenPluginStrings: {
|
||||
toggleFullscreen: 'Toggle Fullscreen',
|
||||
},
|
||||
};
|
||||
|
||||
var FullScreen = /** @class */ (function () {
|
||||
function FullScreen(instance, $LG) {
|
||||
// get lightGallery core plugin instance
|
||||
this.core = instance;
|
||||
this.$LG = $LG;
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign({}, fullscreenSettings), this.core.settings);
|
||||
return this;
|
||||
}
|
||||
FullScreen.prototype.init = function () {
|
||||
var fullScreen = '';
|
||||
if (this.settings.fullScreen) {
|
||||
// check for fullscreen browser support
|
||||
if (!document.fullscreenEnabled &&
|
||||
!document.webkitFullscreenEnabled &&
|
||||
!document.mozFullScreenEnabled &&
|
||||
!document.msFullscreenEnabled) {
|
||||
return;
|
||||
}
|
||||
else {
|
||||
fullScreen = "<button type=\"button\" aria-label=\"" + this.settings.fullscreenPluginStrings['toggleFullscreen'] + "\" class=\"lg-fullscreen lg-icon\"></button>";
|
||||
this.core.$toolbar.append(fullScreen);
|
||||
this.fullScreen();
|
||||
}
|
||||
}
|
||||
};
|
||||
FullScreen.prototype.isFullScreen = function () {
|
||||
return (document.fullscreenElement ||
|
||||
document.mozFullScreenElement ||
|
||||
document.webkitFullscreenElement ||
|
||||
document.msFullscreenElement);
|
||||
};
|
||||
FullScreen.prototype.requestFullscreen = function () {
|
||||
var el = document.documentElement;
|
||||
if (el.requestFullscreen) {
|
||||
el.requestFullscreen();
|
||||
}
|
||||
else if (el.msRequestFullscreen) {
|
||||
el.msRequestFullscreen();
|
||||
}
|
||||
else if (el.mozRequestFullScreen) {
|
||||
el.mozRequestFullScreen();
|
||||
}
|
||||
else if (el.webkitRequestFullscreen) {
|
||||
el.webkitRequestFullscreen();
|
||||
}
|
||||
};
|
||||
FullScreen.prototype.exitFullscreen = function () {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen();
|
||||
}
|
||||
else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
}
|
||||
else if (document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen();
|
||||
}
|
||||
};
|
||||
// https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
|
||||
FullScreen.prototype.fullScreen = function () {
|
||||
var _this = this;
|
||||
this.$LG(document).on("fullscreenchange.lg.global" + this.core.lgId + " \n webkitfullscreenchange.lg.global" + this.core.lgId + " \n mozfullscreenchange.lg.global" + this.core.lgId + " \n MSFullscreenChange.lg.global" + this.core.lgId, function () {
|
||||
if (!_this.core.lgOpened)
|
||||
return;
|
||||
_this.core.outer.toggleClass('lg-fullscreen-on');
|
||||
});
|
||||
this.core.outer
|
||||
.find('.lg-fullscreen')
|
||||
.first()
|
||||
.on('click.lg', function () {
|
||||
if (_this.isFullScreen()) {
|
||||
_this.exitFullscreen();
|
||||
}
|
||||
else {
|
||||
_this.requestFullscreen();
|
||||
}
|
||||
});
|
||||
};
|
||||
FullScreen.prototype.closeGallery = function () {
|
||||
// exit from fullscreen if activated
|
||||
if (this.isFullScreen()) {
|
||||
this.exitFullscreen();
|
||||
}
|
||||
};
|
||||
FullScreen.prototype.destroy = function () {
|
||||
this.$LG(document).off("fullscreenchange.lg.global" + this.core.lgId + " \n webkitfullscreenchange.lg.global" + this.core.lgId + " \n mozfullscreenchange.lg.global" + this.core.lgId + " \n MSFullscreenChange.lg.global" + this.core.lgId);
|
||||
};
|
||||
return FullScreen;
|
||||
}());
|
||||
|
||||
return FullScreen;
|
||||
|
||||
})));
|
||||
//# sourceMappingURL=lg-fullscreen.umd.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"name": "lightgallery/plugins/fullscreen",
|
||||
"private": true,
|
||||
"main": "lg-fullscreen.umd.js",
|
||||
"module": "lg-fullscreen.es5.js",
|
||||
"typings": "lg-fullscreen.d.ts"
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
export interface HashSettings {
|
||||
/**
|
||||
* Enable/Disable hash option
|
||||
*/
|
||||
hash: boolean;
|
||||
/**
|
||||
* Unique id for each gallery.
|
||||
* @description It is mandatory when you use hash plugin for multiple galleries on the same page.
|
||||
*/
|
||||
galleryId: string;
|
||||
/**
|
||||
* Custom slide name to use in the url when hash plugin is enabled
|
||||
*/
|
||||
customSlideName: boolean;
|
||||
}
|
||||
export declare const hashSettings: HashSettings;
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
import { LgQuery } from '../../lgQuery';
|
||||
import { LightGallery } from '../../lightgallery';
|
||||
import { HashSettings } from './lg-hash-settings';
|
||||
export default class Hash {
|
||||
core: LightGallery;
|
||||
settings: HashSettings;
|
||||
oldHash: string;
|
||||
private $LG;
|
||||
constructor(instance: LightGallery, $LG: LgQuery);
|
||||
init(): void;
|
||||
private onAfterSlide;
|
||||
/**
|
||||
* Get index of the slide from custom slideName. Has to be a public method. Used in hash plugin
|
||||
* @param {String} hash
|
||||
* @returns {Number} Index of the slide.
|
||||
*/
|
||||
getIndexFromUrl(hash?: string): number;
|
||||
buildFromHash(): boolean | undefined;
|
||||
private onCloseAfter;
|
||||
private onHashchange;
|
||||
closeGallery(): void;
|
||||
destroy(): void;
|
||||
}
|
||||
@@ -0,0 +1,198 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var hashSettings = {
|
||||
hash: true,
|
||||
galleryId: '1',
|
||||
customSlideName: false,
|
||||
};
|
||||
|
||||
var Hash = /** @class */ (function () {
|
||||
function Hash(instance, $LG) {
|
||||
// get lightGallery core plugin instance
|
||||
this.core = instance;
|
||||
this.$LG = $LG;
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign({}, hashSettings), this.core.settings);
|
||||
return this;
|
||||
}
|
||||
Hash.prototype.init = function () {
|
||||
var _this = this;
|
||||
if (!this.settings.hash) {
|
||||
return;
|
||||
}
|
||||
this.oldHash = window.location.hash;
|
||||
setTimeout(function () {
|
||||
_this.buildFromHash();
|
||||
}, 100);
|
||||
// Change hash value on after each slide transition
|
||||
this.core.LGel.on(lGEvents.afterSlide + ".hash", this.onAfterSlide.bind(this));
|
||||
this.core.LGel.on(lGEvents.afterClose + ".hash", this.onCloseAfter.bind(this));
|
||||
// Listen hash change and change the slide according to slide value
|
||||
this.$LG(window).on("hashchange.lg.hash.global" + this.core.lgId, this.onHashchange.bind(this));
|
||||
};
|
||||
Hash.prototype.onAfterSlide = function (event) {
|
||||
var slideName = this.core.galleryItems[event.detail.index].slideName;
|
||||
slideName = this.settings.customSlideName
|
||||
? slideName || event.detail.index
|
||||
: event.detail.index;
|
||||
if (history.replaceState) {
|
||||
history.replaceState(null, '', window.location.pathname +
|
||||
window.location.search +
|
||||
'#lg=' +
|
||||
this.settings.galleryId +
|
||||
'&slide=' +
|
||||
slideName);
|
||||
}
|
||||
else {
|
||||
window.location.hash =
|
||||
'lg=' + this.settings.galleryId + '&slide=' + slideName;
|
||||
}
|
||||
};
|
||||
/**
|
||||
* Get index of the slide from custom slideName. Has to be a public method. Used in hash plugin
|
||||
* @param {String} hash
|
||||
* @returns {Number} Index of the slide.
|
||||
*/
|
||||
Hash.prototype.getIndexFromUrl = function (hash) {
|
||||
if (hash === void 0) { hash = window.location.hash; }
|
||||
var slideName = hash.split('&slide=')[1];
|
||||
var _idx = 0;
|
||||
if (this.settings.customSlideName) {
|
||||
for (var index = 0; index < this.core.galleryItems.length; index++) {
|
||||
var dynamicEl = this.core.galleryItems[index];
|
||||
if (dynamicEl.slideName === slideName) {
|
||||
_idx = index;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
_idx = parseInt(slideName, 10);
|
||||
}
|
||||
return isNaN(_idx) ? 0 : _idx;
|
||||
};
|
||||
// Build Gallery if gallery id exist in the URL
|
||||
Hash.prototype.buildFromHash = function () {
|
||||
// if dynamic option is enabled execute immediately
|
||||
var _hash = window.location.hash;
|
||||
if (_hash.indexOf('lg=' + this.settings.galleryId) > 0) {
|
||||
// This class is used to remove the initial animation if galleryId present in the URL
|
||||
this.$LG(document.body).addClass('lg-from-hash');
|
||||
var index = this.getIndexFromUrl(_hash);
|
||||
this.core.openGallery(index);
|
||||
return true;
|
||||
}
|
||||
};
|
||||
Hash.prototype.onCloseAfter = function () {
|
||||
// Reset to old hash value
|
||||
if (this.oldHash &&
|
||||
this.oldHash.indexOf('lg=' + this.settings.galleryId) < 0) {
|
||||
if (history.replaceState) {
|
||||
history.replaceState(null, '', this.oldHash);
|
||||
}
|
||||
else {
|
||||
window.location.hash = this.oldHash;
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (history.replaceState) {
|
||||
history.replaceState(null, document.title, window.location.pathname + window.location.search);
|
||||
}
|
||||
else {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
Hash.prototype.onHashchange = function () {
|
||||
if (!this.core.lgOpened)
|
||||
return;
|
||||
var _hash = window.location.hash;
|
||||
var index = this.getIndexFromUrl(_hash);
|
||||
// it galleryId doesn't exist in the url close the gallery
|
||||
if (_hash.indexOf('lg=' + this.settings.galleryId) > -1) {
|
||||
this.core.slide(index, false, false);
|
||||
}
|
||||
else if (this.core.lGalleryOn) {
|
||||
this.core.closeGallery();
|
||||
}
|
||||
};
|
||||
Hash.prototype.closeGallery = function () {
|
||||
if (this.settings.hash) {
|
||||
this.$LG(document.body).removeClass('lg-from-hash');
|
||||
}
|
||||
};
|
||||
Hash.prototype.destroy = function () {
|
||||
this.core.LGel.off('.lg.hash');
|
||||
this.core.LGel.off('.hash');
|
||||
this.$LG(window).off("hashchange.lg.hash.global" + this.core.lgId);
|
||||
};
|
||||
return Hash;
|
||||
}());
|
||||
|
||||
export default Hash;
|
||||
//# sourceMappingURL=lg-hash.es5.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).lgHash=e()}(this,(function(){"use strict";var t=function(){return(t=Object.assign||function(t){for(var e,i=1,o=arguments.length;i<o;i++)for(var s in e=arguments[i])Object.prototype.hasOwnProperty.call(e,s)&&(t[s]=e[s]);return t}).apply(this,arguments)},e="lgAfterSlide",i="lgAfterClose",o={hash:!0,galleryId:"1",customSlideName:!1};return function(){function s(e,i){return this.core=e,this.$LG=i,this.settings=t(t({},o),this.core.settings),this}return s.prototype.init=function(){var t=this;this.settings.hash&&(this.oldHash=window.location.hash,setTimeout((function(){t.buildFromHash()}),100),this.core.LGel.on(e+".hash",this.onAfterSlide.bind(this)),this.core.LGel.on(i+".hash",this.onCloseAfter.bind(this)),this.$LG(window).on("hashchange.lg.hash.global"+this.core.lgId,this.onHashchange.bind(this)))},s.prototype.onAfterSlide=function(t){var e=this.core.galleryItems[t.detail.index].slideName;e=this.settings.customSlideName&&e||t.detail.index,history.replaceState?history.replaceState(null,"",window.location.pathname+window.location.search+"#lg="+this.settings.galleryId+"&slide="+e):window.location.hash="lg="+this.settings.galleryId+"&slide="+e},s.prototype.getIndexFromUrl=function(t){void 0===t&&(t=window.location.hash);var e=t.split("&slide=")[1],i=0;if(this.settings.customSlideName)for(var o=0;o<this.core.galleryItems.length;o++){if(this.core.galleryItems[o].slideName===e){i=o;break}}else i=parseInt(e,10);return isNaN(i)?0:i},s.prototype.buildFromHash=function(){var t=window.location.hash;if(t.indexOf("lg="+this.settings.galleryId)>0){this.$LG(document.body).addClass("lg-from-hash");var e=this.getIndexFromUrl(t);return this.core.openGallery(e),!0}},s.prototype.onCloseAfter=function(){this.oldHash&&this.oldHash.indexOf("lg="+this.settings.galleryId)<0?history.replaceState?history.replaceState(null,"",this.oldHash):window.location.hash=this.oldHash:history.replaceState?history.replaceState(null,document.title,window.location.pathname+window.location.search):window.location.hash=""},s.prototype.onHashchange=function(){if(this.core.lgOpened){var t=window.location.hash,e=this.getIndexFromUrl(t);t.indexOf("lg="+this.settings.galleryId)>-1?this.core.slide(e,!1,!1):this.core.lGalleryOn&&this.core.closeGallery()}},s.prototype.closeGallery=function(){this.settings.hash&&this.$LG(document.body).removeClass("lg-from-hash")},s.prototype.destroy=function(){this.core.LGel.off(".lg.hash"),this.core.LGel.off(".hash"),this.$LG(window).off("hashchange.lg.hash.global"+this.core.lgId)},s}()}));
|
||||
@@ -0,0 +1,206 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgHash = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var hashSettings = {
|
||||
hash: true,
|
||||
galleryId: '1',
|
||||
customSlideName: false,
|
||||
};
|
||||
|
||||
var Hash = /** @class */ (function () {
|
||||
function Hash(instance, $LG) {
|
||||
// get lightGallery core plugin instance
|
||||
this.core = instance;
|
||||
this.$LG = $LG;
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign({}, hashSettings), this.core.settings);
|
||||
return this;
|
||||
}
|
||||
Hash.prototype.init = function () {
|
||||
var _this = this;
|
||||
if (!this.settings.hash) {
|
||||
return;
|
||||
}
|
||||
this.oldHash = window.location.hash;
|
||||
setTimeout(function () {
|
||||
_this.buildFromHash();
|
||||
}, 100);
|
||||
// Change hash value on after each slide transition
|
||||
this.core.LGel.on(lGEvents.afterSlide + ".hash", this.onAfterSlide.bind(this));
|
||||
this.core.LGel.on(lGEvents.afterClose + ".hash", this.onCloseAfter.bind(this));
|
||||
// Listen hash change and change the slide according to slide value
|
||||
this.$LG(window).on("hashchange.lg.hash.global" + this.core.lgId, this.onHashchange.bind(this));
|
||||
};
|
||||
Hash.prototype.onAfterSlide = function (event) {
|
||||
var slideName = this.core.galleryItems[event.detail.index].slideName;
|
||||
slideName = this.settings.customSlideName
|
||||
? slideName || event.detail.index
|
||||
: event.detail.index;
|
||||
if (history.replaceState) {
|
||||
history.replaceState(null, '', window.location.pathname +
|
||||
window.location.search +
|
||||
'#lg=' +
|
||||
this.settings.galleryId +
|
||||
'&slide=' +
|
||||
slideName);
|
||||
}
|
||||
else {
|
||||
window.location.hash =
|
||||
'lg=' + this.settings.galleryId + '&slide=' + slideName;
|
||||
}
|
||||
};
|
||||
/**
|
||||
* Get index of the slide from custom slideName. Has to be a public method. Used in hash plugin
|
||||
* @param {String} hash
|
||||
* @returns {Number} Index of the slide.
|
||||
*/
|
||||
Hash.prototype.getIndexFromUrl = function (hash) {
|
||||
if (hash === void 0) { hash = window.location.hash; }
|
||||
var slideName = hash.split('&slide=')[1];
|
||||
var _idx = 0;
|
||||
if (this.settings.customSlideName) {
|
||||
for (var index = 0; index < this.core.galleryItems.length; index++) {
|
||||
var dynamicEl = this.core.galleryItems[index];
|
||||
if (dynamicEl.slideName === slideName) {
|
||||
_idx = index;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
_idx = parseInt(slideName, 10);
|
||||
}
|
||||
return isNaN(_idx) ? 0 : _idx;
|
||||
};
|
||||
// Build Gallery if gallery id exist in the URL
|
||||
Hash.prototype.buildFromHash = function () {
|
||||
// if dynamic option is enabled execute immediately
|
||||
var _hash = window.location.hash;
|
||||
if (_hash.indexOf('lg=' + this.settings.galleryId) > 0) {
|
||||
// This class is used to remove the initial animation if galleryId present in the URL
|
||||
this.$LG(document.body).addClass('lg-from-hash');
|
||||
var index = this.getIndexFromUrl(_hash);
|
||||
this.core.openGallery(index);
|
||||
return true;
|
||||
}
|
||||
};
|
||||
Hash.prototype.onCloseAfter = function () {
|
||||
// Reset to old hash value
|
||||
if (this.oldHash &&
|
||||
this.oldHash.indexOf('lg=' + this.settings.galleryId) < 0) {
|
||||
if (history.replaceState) {
|
||||
history.replaceState(null, '', this.oldHash);
|
||||
}
|
||||
else {
|
||||
window.location.hash = this.oldHash;
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (history.replaceState) {
|
||||
history.replaceState(null, document.title, window.location.pathname + window.location.search);
|
||||
}
|
||||
else {
|
||||
window.location.hash = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
Hash.prototype.onHashchange = function () {
|
||||
if (!this.core.lgOpened)
|
||||
return;
|
||||
var _hash = window.location.hash;
|
||||
var index = this.getIndexFromUrl(_hash);
|
||||
// it galleryId doesn't exist in the url close the gallery
|
||||
if (_hash.indexOf('lg=' + this.settings.galleryId) > -1) {
|
||||
this.core.slide(index, false, false);
|
||||
}
|
||||
else if (this.core.lGalleryOn) {
|
||||
this.core.closeGallery();
|
||||
}
|
||||
};
|
||||
Hash.prototype.closeGallery = function () {
|
||||
if (this.settings.hash) {
|
||||
this.$LG(document.body).removeClass('lg-from-hash');
|
||||
}
|
||||
};
|
||||
Hash.prototype.destroy = function () {
|
||||
this.core.LGel.off('.lg.hash');
|
||||
this.core.LGel.off('.hash');
|
||||
this.$LG(window).off("hashchange.lg.hash.global" + this.core.lgId);
|
||||
};
|
||||
return Hash;
|
||||
}());
|
||||
|
||||
return Hash;
|
||||
|
||||
})));
|
||||
//# sourceMappingURL=lg-hash.umd.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"name": "lightgallery/plugins/hash",
|
||||
"private": true,
|
||||
"main": "lg-hash.umd.js",
|
||||
"module": "lg-hash.es5.js",
|
||||
"typings": "lg-hash.d.ts"
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
export interface MediumZoomSettings {
|
||||
/**
|
||||
* Enable/Disable medium like zoom experience
|
||||
*/
|
||||
mediumZoom: boolean;
|
||||
/**
|
||||
* Space between the gallery outer area and images
|
||||
*/
|
||||
margin: number;
|
||||
/**
|
||||
* Background color for the gallery
|
||||
* This can be overwritten by passing background color via `lg-background-color` for each item
|
||||
*/
|
||||
backgroundColor: string;
|
||||
}
|
||||
export declare const mediumZoomSettings: MediumZoomSettings;
|
||||
@@ -0,0 +1,12 @@
|
||||
import { LgQuery } from '../../lgQuery';
|
||||
import { LightGallery } from '../../lightgallery';
|
||||
import { MediumZoomSettings } from './lg-medium-zoom-settings';
|
||||
export default class MediumZoom {
|
||||
core: LightGallery;
|
||||
settings: MediumZoomSettings;
|
||||
private $LG;
|
||||
constructor(instance: LightGallery, $LG: LgQuery);
|
||||
private toggleItemClass;
|
||||
init(): void;
|
||||
destroy(): void;
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var mediumZoomSettings = {
|
||||
margin: 40,
|
||||
mediumZoom: true,
|
||||
backgroundColor: '#000',
|
||||
};
|
||||
|
||||
var MediumZoom = /** @class */ (function () {
|
||||
function MediumZoom(instance, $LG) {
|
||||
var _this = this;
|
||||
// get lightGallery core plugin instance
|
||||
this.core = instance;
|
||||
this.$LG = $LG;
|
||||
// Set margin
|
||||
this.core.getMediaContainerPosition = function () {
|
||||
return {
|
||||
top: _this.settings.margin,
|
||||
bottom: _this.settings.margin,
|
||||
};
|
||||
};
|
||||
// Override some of lightGallery default settings
|
||||
var defaultSettings = {
|
||||
controls: false,
|
||||
download: false,
|
||||
counter: false,
|
||||
showCloseIcon: false,
|
||||
extraProps: ['lgBackgroundColor'],
|
||||
closeOnTap: false,
|
||||
enableSwipe: false,
|
||||
enableDrag: false,
|
||||
swipeToClose: false,
|
||||
addClass: this.core.settings.addClass + ' lg-medium-zoom',
|
||||
};
|
||||
this.core.settings = __assign(__assign({}, this.core.settings), defaultSettings);
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign(__assign({}, mediumZoomSettings), this.core.settings), defaultSettings);
|
||||
return this;
|
||||
}
|
||||
MediumZoom.prototype.toggleItemClass = function () {
|
||||
for (var index = 0; index < this.core.items.length; index++) {
|
||||
var $element = this.$LG(this.core.items[index]);
|
||||
$element.toggleClass('lg-medium-zoom-item');
|
||||
}
|
||||
};
|
||||
MediumZoom.prototype.init = function () {
|
||||
var _this = this;
|
||||
if (!this.settings.mediumZoom) {
|
||||
return;
|
||||
}
|
||||
this.core.LGel.on(lGEvents.beforeOpen + ".medium", function () {
|
||||
_this.core.$backdrop.css('background-color', _this.core.galleryItems[_this.core.index].lgBackgroundColor ||
|
||||
_this.settings.backgroundColor);
|
||||
});
|
||||
this.toggleItemClass();
|
||||
this.core.outer.on('click.lg.medium', function () {
|
||||
_this.core.closeGallery();
|
||||
});
|
||||
};
|
||||
MediumZoom.prototype.destroy = function () {
|
||||
this.toggleItemClass();
|
||||
};
|
||||
return MediumZoom;
|
||||
}());
|
||||
|
||||
export default MediumZoom;
|
||||
//# sourceMappingURL=lg-medium-zoom.es5.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
!function(o,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(o="undefined"!=typeof globalThis?globalThis:o||self).lgMediumZoom=t()}(this,(function(){"use strict";var o=function(){return(o=Object.assign||function(o){for(var t,e=1,i=arguments.length;e<i;e++)for(var n in t=arguments[e])Object.prototype.hasOwnProperty.call(t,n)&&(o[n]=t[n]);return o}).apply(this,arguments)},t="lgBeforeOpen",e={margin:40,mediumZoom:!0,backgroundColor:"#000"};return function(){function i(t,i){var n=this;this.core=t,this.$LG=i,this.core.getMediaContainerPosition=function(){return{top:n.settings.margin,bottom:n.settings.margin}};var s={controls:!1,download:!1,counter:!1,showCloseIcon:!1,extraProps:["lgBackgroundColor"],closeOnTap:!1,enableSwipe:!1,enableDrag:!1,swipeToClose:!1,addClass:this.core.settings.addClass+" lg-medium-zoom"};return this.core.settings=o(o({},this.core.settings),s),this.settings=o(o(o({},e),this.core.settings),s),this}return i.prototype.toggleItemClass=function(){for(var o=0;o<this.core.items.length;o++){this.$LG(this.core.items[o]).toggleClass("lg-medium-zoom-item")}},i.prototype.init=function(){var o=this;this.settings.mediumZoom&&(this.core.LGel.on(t+".medium",(function(){o.core.$backdrop.css("background-color",o.core.galleryItems[o.core.index].lgBackgroundColor||o.settings.backgroundColor)})),this.toggleItemClass(),this.core.outer.on("click.lg.medium",(function(){o.core.closeGallery()})))},i.prototype.destroy=function(){this.toggleItemClass()},i}()}));
|
||||
@@ -0,0 +1,140 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgMediumZoom = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var mediumZoomSettings = {
|
||||
margin: 40,
|
||||
mediumZoom: true,
|
||||
backgroundColor: '#000',
|
||||
};
|
||||
|
||||
var MediumZoom = /** @class */ (function () {
|
||||
function MediumZoom(instance, $LG) {
|
||||
var _this = this;
|
||||
// get lightGallery core plugin instance
|
||||
this.core = instance;
|
||||
this.$LG = $LG;
|
||||
// Set margin
|
||||
this.core.getMediaContainerPosition = function () {
|
||||
return {
|
||||
top: _this.settings.margin,
|
||||
bottom: _this.settings.margin,
|
||||
};
|
||||
};
|
||||
// Override some of lightGallery default settings
|
||||
var defaultSettings = {
|
||||
controls: false,
|
||||
download: false,
|
||||
counter: false,
|
||||
showCloseIcon: false,
|
||||
extraProps: ['lgBackgroundColor'],
|
||||
closeOnTap: false,
|
||||
enableSwipe: false,
|
||||
enableDrag: false,
|
||||
swipeToClose: false,
|
||||
addClass: this.core.settings.addClass + ' lg-medium-zoom',
|
||||
};
|
||||
this.core.settings = __assign(__assign({}, this.core.settings), defaultSettings);
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign(__assign({}, mediumZoomSettings), this.core.settings), defaultSettings);
|
||||
return this;
|
||||
}
|
||||
MediumZoom.prototype.toggleItemClass = function () {
|
||||
for (var index = 0; index < this.core.items.length; index++) {
|
||||
var $element = this.$LG(this.core.items[index]);
|
||||
$element.toggleClass('lg-medium-zoom-item');
|
||||
}
|
||||
};
|
||||
MediumZoom.prototype.init = function () {
|
||||
var _this = this;
|
||||
if (!this.settings.mediumZoom) {
|
||||
return;
|
||||
}
|
||||
this.core.LGel.on(lGEvents.beforeOpen + ".medium", function () {
|
||||
_this.core.$backdrop.css('background-color', _this.core.galleryItems[_this.core.index].lgBackgroundColor ||
|
||||
_this.settings.backgroundColor);
|
||||
});
|
||||
this.toggleItemClass();
|
||||
this.core.outer.on('click.lg.medium', function () {
|
||||
_this.core.closeGallery();
|
||||
});
|
||||
};
|
||||
MediumZoom.prototype.destroy = function () {
|
||||
this.toggleItemClass();
|
||||
};
|
||||
return MediumZoom;
|
||||
}());
|
||||
|
||||
return MediumZoom;
|
||||
|
||||
})));
|
||||
//# sourceMappingURL=lg-medium-zoom.umd.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"name": "lightgallery/plugins/mediumZoom",
|
||||
"private": true,
|
||||
"main": "lg-medium-zoom.umd.js",
|
||||
"module": "lg-medium-zoom.es5.js",
|
||||
"typings": "lg-medium-zoom.d.ts"
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export interface PagerSettings {
|
||||
/**
|
||||
* Enable/Disable pager option
|
||||
*/
|
||||
pager: boolean;
|
||||
}
|
||||
export declare const pagerSettings: PagerSettings;
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
import { LgQuery } from '../../lgQuery';
|
||||
import { LightGallery } from '../../lightgallery';
|
||||
import { PagerSettings } from './lg-pager-settings';
|
||||
export default class Pager {
|
||||
core: LightGallery;
|
||||
settings: PagerSettings;
|
||||
private $LG;
|
||||
constructor(instance: LightGallery, $LG: LgQuery);
|
||||
private getPagerHtml;
|
||||
init(): void;
|
||||
private manageActiveClass;
|
||||
destroy(): void;
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var pagerSettings = {
|
||||
pager: true,
|
||||
};
|
||||
|
||||
var Pager = /** @class */ (function () {
|
||||
function Pager(instance, $LG) {
|
||||
// get lightGallery core plugin instance
|
||||
this.core = instance;
|
||||
this.$LG = $LG;
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign({}, pagerSettings), this.core.settings);
|
||||
return this;
|
||||
}
|
||||
Pager.prototype.getPagerHtml = function (items) {
|
||||
var pagerList = '';
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
pagerList += "<span data-lg-item-id=\"" + i + "\" class=\"lg-pager-cont\"> \n <span data-lg-item-id=\"" + i + "\" class=\"lg-pager\"></span>\n <div class=\"lg-pager-thumb-cont\"><span class=\"lg-caret\"></span> <img src=\"" + items[i].thumb + "\" /></div>\n </span>";
|
||||
}
|
||||
return pagerList;
|
||||
};
|
||||
Pager.prototype.init = function () {
|
||||
var _this = this;
|
||||
if (!this.settings.pager) {
|
||||
return;
|
||||
}
|
||||
var timeout;
|
||||
this.core.$lgComponents.prepend('<div class="lg-pager-outer"></div>');
|
||||
var $pagerOuter = this.core.outer.find('.lg-pager-outer');
|
||||
$pagerOuter.html(this.getPagerHtml(this.core.galleryItems));
|
||||
// @todo enable click
|
||||
$pagerOuter.first().on('click.lg touchend.lg', function (event) {
|
||||
var $target = _this.$LG(event.target);
|
||||
if (!$target.hasAttribute('data-lg-item-id')) {
|
||||
return;
|
||||
}
|
||||
var index = parseInt($target.attr('data-lg-item-id'));
|
||||
_this.core.slide(index, false, true, false);
|
||||
});
|
||||
$pagerOuter.first().on('mouseover.lg', function () {
|
||||
clearTimeout(timeout);
|
||||
$pagerOuter.addClass('lg-pager-hover');
|
||||
});
|
||||
$pagerOuter.first().on('mouseout.lg', function () {
|
||||
timeout = setTimeout(function () {
|
||||
$pagerOuter.removeClass('lg-pager-hover');
|
||||
});
|
||||
});
|
||||
this.core.LGel.on(lGEvents.beforeSlide + ".pager", function (event) {
|
||||
var index = event.detail.index;
|
||||
_this.manageActiveClass.call(_this, index);
|
||||
});
|
||||
this.core.LGel.on(lGEvents.updateSlides + ".pager", function () {
|
||||
$pagerOuter.empty();
|
||||
$pagerOuter.html(_this.getPagerHtml(_this.core.galleryItems));
|
||||
_this.manageActiveClass(_this.core.index);
|
||||
});
|
||||
};
|
||||
Pager.prototype.manageActiveClass = function (index) {
|
||||
var $pagerCont = this.core.outer.find('.lg-pager-cont');
|
||||
$pagerCont.removeClass('lg-pager-active');
|
||||
$pagerCont.eq(index).addClass('lg-pager-active');
|
||||
};
|
||||
Pager.prototype.destroy = function () {
|
||||
this.core.outer.find('.lg-pager-outer').remove();
|
||||
this.core.LGel.off('.lg.pager');
|
||||
this.core.LGel.off('.pager');
|
||||
};
|
||||
return Pager;
|
||||
}());
|
||||
|
||||
export default Pager;
|
||||
//# sourceMappingURL=lg-pager.es5.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).lgPager=t()}(this,(function(){"use strict";var e=function(){return(e=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)},t="lgUpdateSlides",r="lgBeforeSlide",o={pager:!0};return function(){function i(t,r){return this.core=t,this.$LG=r,this.settings=e(e({},o),this.core.settings),this}return i.prototype.getPagerHtml=function(e){for(var t="",r=0;r<e.length;r++)t+='<span data-lg-item-id="'+r+'" class="lg-pager-cont"> \n <span data-lg-item-id="'+r+'" class="lg-pager"></span>\n <div class="lg-pager-thumb-cont"><span class="lg-caret"></span> <img src="'+e[r].thumb+'" /></div>\n </span>';return t},i.prototype.init=function(){var e=this;if(this.settings.pager){var o;this.core.$lgComponents.prepend('<div class="lg-pager-outer"></div>');var i=this.core.outer.find(".lg-pager-outer");i.html(this.getPagerHtml(this.core.galleryItems)),i.first().on("click.lg touchend.lg",(function(t){var r=e.$LG(t.target);if(r.hasAttribute("data-lg-item-id")){var o=parseInt(r.attr("data-lg-item-id"));e.core.slide(o,!1,!0,!1)}})),i.first().on("mouseover.lg",(function(){clearTimeout(o),i.addClass("lg-pager-hover")})),i.first().on("mouseout.lg",(function(){o=setTimeout((function(){i.removeClass("lg-pager-hover")}))})),this.core.LGel.on(r+".pager",(function(t){var r=t.detail.index;e.manageActiveClass.call(e,r)})),this.core.LGel.on(t+".pager",(function(){i.empty(),i.html(e.getPagerHtml(e.core.galleryItems)),e.manageActiveClass(e.core.index)}))}},i.prototype.manageActiveClass=function(e){var t=this.core.outer.find(".lg-pager-cont");t.removeClass("lg-pager-active"),t.eq(e).addClass("lg-pager-active")},i.prototype.destroy=function(){this.core.outer.find(".lg-pager-outer").remove(),this.core.LGel.off(".lg.pager"),this.core.LGel.off(".pager")},i}()}));
|
||||
@@ -0,0 +1,147 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgPager = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var pagerSettings = {
|
||||
pager: true,
|
||||
};
|
||||
|
||||
var Pager = /** @class */ (function () {
|
||||
function Pager(instance, $LG) {
|
||||
// get lightGallery core plugin instance
|
||||
this.core = instance;
|
||||
this.$LG = $LG;
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign({}, pagerSettings), this.core.settings);
|
||||
return this;
|
||||
}
|
||||
Pager.prototype.getPagerHtml = function (items) {
|
||||
var pagerList = '';
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
pagerList += "<span data-lg-item-id=\"" + i + "\" class=\"lg-pager-cont\"> \n <span data-lg-item-id=\"" + i + "\" class=\"lg-pager\"></span>\n <div class=\"lg-pager-thumb-cont\"><span class=\"lg-caret\"></span> <img src=\"" + items[i].thumb + "\" /></div>\n </span>";
|
||||
}
|
||||
return pagerList;
|
||||
};
|
||||
Pager.prototype.init = function () {
|
||||
var _this = this;
|
||||
if (!this.settings.pager) {
|
||||
return;
|
||||
}
|
||||
var timeout;
|
||||
this.core.$lgComponents.prepend('<div class="lg-pager-outer"></div>');
|
||||
var $pagerOuter = this.core.outer.find('.lg-pager-outer');
|
||||
$pagerOuter.html(this.getPagerHtml(this.core.galleryItems));
|
||||
// @todo enable click
|
||||
$pagerOuter.first().on('click.lg touchend.lg', function (event) {
|
||||
var $target = _this.$LG(event.target);
|
||||
if (!$target.hasAttribute('data-lg-item-id')) {
|
||||
return;
|
||||
}
|
||||
var index = parseInt($target.attr('data-lg-item-id'));
|
||||
_this.core.slide(index, false, true, false);
|
||||
});
|
||||
$pagerOuter.first().on('mouseover.lg', function () {
|
||||
clearTimeout(timeout);
|
||||
$pagerOuter.addClass('lg-pager-hover');
|
||||
});
|
||||
$pagerOuter.first().on('mouseout.lg', function () {
|
||||
timeout = setTimeout(function () {
|
||||
$pagerOuter.removeClass('lg-pager-hover');
|
||||
});
|
||||
});
|
||||
this.core.LGel.on(lGEvents.beforeSlide + ".pager", function (event) {
|
||||
var index = event.detail.index;
|
||||
_this.manageActiveClass.call(_this, index);
|
||||
});
|
||||
this.core.LGel.on(lGEvents.updateSlides + ".pager", function () {
|
||||
$pagerOuter.empty();
|
||||
$pagerOuter.html(_this.getPagerHtml(_this.core.galleryItems));
|
||||
_this.manageActiveClass(_this.core.index);
|
||||
});
|
||||
};
|
||||
Pager.prototype.manageActiveClass = function (index) {
|
||||
var $pagerCont = this.core.outer.find('.lg-pager-cont');
|
||||
$pagerCont.removeClass('lg-pager-active');
|
||||
$pagerCont.eq(index).addClass('lg-pager-active');
|
||||
};
|
||||
Pager.prototype.destroy = function () {
|
||||
this.core.outer.find('.lg-pager-outer').remove();
|
||||
this.core.LGel.off('.lg.pager');
|
||||
this.core.LGel.off('.pager');
|
||||
};
|
||||
return Pager;
|
||||
}());
|
||||
|
||||
return Pager;
|
||||
|
||||
})));
|
||||
//# sourceMappingURL=lg-pager.umd.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"name": "lightgallery/plugins/pager",
|
||||
"private": true,
|
||||
"main": "lg-pager.umd.js",
|
||||
"module": "lg-pager.es5.js",
|
||||
"typings": "lg-pager.d.ts"
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export interface RelativeCaptionSettings {
|
||||
/**
|
||||
* Enable/Disable relative captions
|
||||
*/
|
||||
relativeCaption: boolean;
|
||||
}
|
||||
export declare const relativeCaptionSettings: RelativeCaptionSettings;
|
||||
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
* lightGallery caption for placing captions relative to the image
|
||||
*/
|
||||
import { LightGallery } from '../../lightgallery';
|
||||
import { RelativeCaptionSettings } from './lg-relative-caption-settings';
|
||||
export default class RelativeCaption {
|
||||
core: LightGallery;
|
||||
settings: RelativeCaptionSettings;
|
||||
constructor(instance: LightGallery);
|
||||
init(): void;
|
||||
private setCaptionStyle;
|
||||
private setRelativeCaption;
|
||||
destroy(): void;
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var relativeCaptionSettings = {
|
||||
relativeCaption: false,
|
||||
};
|
||||
|
||||
/**
|
||||
* lightGallery caption for placing captions relative to the image
|
||||
*/
|
||||
var RelativeCaption = /** @class */ (function () {
|
||||
function RelativeCaption(instance) {
|
||||
// get lightGallery core plugin instance
|
||||
this.core = instance;
|
||||
// Override some of lightGallery default settings
|
||||
var defaultSettings = {
|
||||
addClass: this.core.settings.addClass + ' lg-relative-caption',
|
||||
};
|
||||
this.core.settings = __assign(__assign({}, this.core.settings), defaultSettings);
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign(__assign({}, relativeCaptionSettings), this.core.settings), defaultSettings);
|
||||
return this;
|
||||
}
|
||||
RelativeCaption.prototype.init = function () {
|
||||
var _this = this;
|
||||
if (!this.settings.relativeCaption) {
|
||||
return;
|
||||
}
|
||||
this.core.LGel.on(lGEvents.slideItemLoad + ".caption", function (event) {
|
||||
var _a = event.detail, index = _a.index, delay = _a.delay;
|
||||
setTimeout(function () {
|
||||
if (index === _this.core.index) {
|
||||
_this.setRelativeCaption(index);
|
||||
}
|
||||
}, delay);
|
||||
});
|
||||
this.core.LGel.on(lGEvents.afterSlide + ".caption", function (event) {
|
||||
var index = event.detail.index;
|
||||
setTimeout(function () {
|
||||
var slide = _this.core.getSlideItem(index);
|
||||
if (slide.hasClass('lg-complete')) {
|
||||
_this.setRelativeCaption(index);
|
||||
}
|
||||
});
|
||||
});
|
||||
this.core.LGel.on(lGEvents.beforeSlide + ".caption", function (event) {
|
||||
var index = event.detail.index;
|
||||
setTimeout(function () {
|
||||
var slide = _this.core.getSlideItem(index);
|
||||
slide.removeClass('lg-show-caption');
|
||||
});
|
||||
});
|
||||
this.core.LGel.on(lGEvents.containerResize + ".caption", function (event) {
|
||||
_this.setRelativeCaption(_this.core.index);
|
||||
});
|
||||
};
|
||||
RelativeCaption.prototype.setCaptionStyle = function (index, rect, slideWrapRect) {
|
||||
var $subHtmlInner = this.core
|
||||
.getSlideItem(index)
|
||||
.find('.lg-relative-caption-item');
|
||||
var $subHtml = this.core.getSlideItem(index).find('.lg-sub-html');
|
||||
$subHtml.css('width', rect.width + "px").css('left', rect.left + "px");
|
||||
var subHtmlRect = $subHtmlInner.get().getBoundingClientRect();
|
||||
var bottom = slideWrapRect.bottom - rect.bottom - subHtmlRect.height;
|
||||
$subHtml.css('top', "auto").css('bottom', Math.max(bottom, 0) + "px");
|
||||
};
|
||||
RelativeCaption.prototype.setRelativeCaption = function (index) {
|
||||
var slide = this.core.getSlideItem(index);
|
||||
if (slide.hasClass('lg-current')) {
|
||||
var rect = this.core
|
||||
.getSlideItem(index)
|
||||
.find('.lg-object')
|
||||
.get()
|
||||
.getBoundingClientRect();
|
||||
var slideWrapRect = this.core
|
||||
.getSlideItem(index)
|
||||
.get()
|
||||
.getBoundingClientRect();
|
||||
this.setCaptionStyle(index, rect, slideWrapRect);
|
||||
slide.addClass('lg-show-caption');
|
||||
}
|
||||
};
|
||||
RelativeCaption.prototype.destroy = function () {
|
||||
this.core.LGel.off('.caption');
|
||||
};
|
||||
return RelativeCaption;
|
||||
}());
|
||||
|
||||
export default RelativeCaption;
|
||||
//# sourceMappingURL=lg-relative-caption.es5.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).lgRelativeCaption=e()}(this,(function(){"use strict";var t=function(){return(t=Object.assign||function(t){for(var e,i=1,o=arguments.length;i<o;i++)for(var n in e=arguments[i])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t}).apply(this,arguments)},e="lgContainerResize",i="lgSlideItemLoad",o="lgBeforeSlide",n="lgAfterSlide",s={relativeCaption:!1};return function(){function l(e){this.core=e;var i={addClass:this.core.settings.addClass+" lg-relative-caption"};return this.core.settings=t(t({},this.core.settings),i),this.settings=t(t(t({},s),this.core.settings),i),this}return l.prototype.init=function(){var t=this;this.settings.relativeCaption&&(this.core.LGel.on(i+".caption",(function(e){var i=e.detail,o=i.index,n=i.delay;setTimeout((function(){o===t.core.index&&t.setRelativeCaption(o)}),n)})),this.core.LGel.on(n+".caption",(function(e){var i=e.detail.index;setTimeout((function(){t.core.getSlideItem(i).hasClass("lg-complete")&&t.setRelativeCaption(i)}))})),this.core.LGel.on(o+".caption",(function(e){var i=e.detail.index;setTimeout((function(){t.core.getSlideItem(i).removeClass("lg-show-caption")}))})),this.core.LGel.on(e+".caption",(function(e){t.setRelativeCaption(t.core.index)})))},l.prototype.setCaptionStyle=function(t,e,i){var o=this.core.getSlideItem(t).find(".lg-relative-caption-item"),n=this.core.getSlideItem(t).find(".lg-sub-html");n.css("width",e.width+"px").css("left",e.left+"px");var s=o.get().getBoundingClientRect(),l=i.bottom-e.bottom-s.height;n.css("top","auto").css("bottom",Math.max(l,0)+"px")},l.prototype.setRelativeCaption=function(t){var e=this.core.getSlideItem(t);if(e.hasClass("lg-current")){var i=this.core.getSlideItem(t).find(".lg-object").get().getBoundingClientRect(),o=this.core.getSlideItem(t).get().getBoundingClientRect();this.setCaptionStyle(t,i,o),e.addClass("lg-show-caption")}},l.prototype.destroy=function(){this.core.LGel.off(".caption")},l}()}));
|
||||
@@ -0,0 +1,162 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgRelativeCaption = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var relativeCaptionSettings = {
|
||||
relativeCaption: false,
|
||||
};
|
||||
|
||||
/**
|
||||
* lightGallery caption for placing captions relative to the image
|
||||
*/
|
||||
var RelativeCaption = /** @class */ (function () {
|
||||
function RelativeCaption(instance) {
|
||||
// get lightGallery core plugin instance
|
||||
this.core = instance;
|
||||
// Override some of lightGallery default settings
|
||||
var defaultSettings = {
|
||||
addClass: this.core.settings.addClass + ' lg-relative-caption',
|
||||
};
|
||||
this.core.settings = __assign(__assign({}, this.core.settings), defaultSettings);
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign(__assign({}, relativeCaptionSettings), this.core.settings), defaultSettings);
|
||||
return this;
|
||||
}
|
||||
RelativeCaption.prototype.init = function () {
|
||||
var _this = this;
|
||||
if (!this.settings.relativeCaption) {
|
||||
return;
|
||||
}
|
||||
this.core.LGel.on(lGEvents.slideItemLoad + ".caption", function (event) {
|
||||
var _a = event.detail, index = _a.index, delay = _a.delay;
|
||||
setTimeout(function () {
|
||||
if (index === _this.core.index) {
|
||||
_this.setRelativeCaption(index);
|
||||
}
|
||||
}, delay);
|
||||
});
|
||||
this.core.LGel.on(lGEvents.afterSlide + ".caption", function (event) {
|
||||
var index = event.detail.index;
|
||||
setTimeout(function () {
|
||||
var slide = _this.core.getSlideItem(index);
|
||||
if (slide.hasClass('lg-complete')) {
|
||||
_this.setRelativeCaption(index);
|
||||
}
|
||||
});
|
||||
});
|
||||
this.core.LGel.on(lGEvents.beforeSlide + ".caption", function (event) {
|
||||
var index = event.detail.index;
|
||||
setTimeout(function () {
|
||||
var slide = _this.core.getSlideItem(index);
|
||||
slide.removeClass('lg-show-caption');
|
||||
});
|
||||
});
|
||||
this.core.LGel.on(lGEvents.containerResize + ".caption", function (event) {
|
||||
_this.setRelativeCaption(_this.core.index);
|
||||
});
|
||||
};
|
||||
RelativeCaption.prototype.setCaptionStyle = function (index, rect, slideWrapRect) {
|
||||
var $subHtmlInner = this.core
|
||||
.getSlideItem(index)
|
||||
.find('.lg-relative-caption-item');
|
||||
var $subHtml = this.core.getSlideItem(index).find('.lg-sub-html');
|
||||
$subHtml.css('width', rect.width + "px").css('left', rect.left + "px");
|
||||
var subHtmlRect = $subHtmlInner.get().getBoundingClientRect();
|
||||
var bottom = slideWrapRect.bottom - rect.bottom - subHtmlRect.height;
|
||||
$subHtml.css('top', "auto").css('bottom', Math.max(bottom, 0) + "px");
|
||||
};
|
||||
RelativeCaption.prototype.setRelativeCaption = function (index) {
|
||||
var slide = this.core.getSlideItem(index);
|
||||
if (slide.hasClass('lg-current')) {
|
||||
var rect = this.core
|
||||
.getSlideItem(index)
|
||||
.find('.lg-object')
|
||||
.get()
|
||||
.getBoundingClientRect();
|
||||
var slideWrapRect = this.core
|
||||
.getSlideItem(index)
|
||||
.get()
|
||||
.getBoundingClientRect();
|
||||
this.setCaptionStyle(index, rect, slideWrapRect);
|
||||
slide.addClass('lg-show-caption');
|
||||
}
|
||||
};
|
||||
RelativeCaption.prototype.destroy = function () {
|
||||
this.core.LGel.off('.caption');
|
||||
};
|
||||
return RelativeCaption;
|
||||
}());
|
||||
|
||||
return RelativeCaption;
|
||||
|
||||
})));
|
||||
//# sourceMappingURL=lg-relative-caption.umd.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"name": "lightgallery/plugins/relativeCaption",
|
||||
"private": true,
|
||||
"main": "lg-relative-caption.umd.js",
|
||||
"module": "lg-relative-caption.es5.js",
|
||||
"typings": "lg-relative-caption.d.ts"
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
export interface RotateStrings {
|
||||
flipVertical: string;
|
||||
flipHorizontal: string;
|
||||
rotateLeft: string;
|
||||
rotateRight: string;
|
||||
}
|
||||
export interface RotateSettings {
|
||||
/**
|
||||
* Enable/Disable rotate option
|
||||
*/
|
||||
rotate: boolean;
|
||||
/**
|
||||
* Rotate speed in milliseconds
|
||||
*/
|
||||
rotateSpeed: number;
|
||||
/**
|
||||
* Enable rotate left.
|
||||
*/
|
||||
rotateLeft: boolean;
|
||||
/**
|
||||
* Enable rotate right.
|
||||
*/
|
||||
rotateRight: boolean;
|
||||
/**
|
||||
* Enable flip horizontal.
|
||||
*/
|
||||
flipHorizontal: boolean;
|
||||
/**
|
||||
* Enable flip vertical.
|
||||
*/
|
||||
flipVertical: boolean;
|
||||
/**
|
||||
* Custom translation strings for aria-labels
|
||||
*/
|
||||
rotatePluginStrings: RotateStrings;
|
||||
}
|
||||
export declare const rotateSettings: {
|
||||
rotate: boolean;
|
||||
rotateSpeed: number;
|
||||
rotateLeft: boolean;
|
||||
rotateRight: boolean;
|
||||
flipHorizontal: boolean;
|
||||
flipVertical: boolean;
|
||||
rotatePluginStrings: RotateStrings;
|
||||
};
|
||||
@@ -0,0 +1,24 @@
|
||||
import { LgQuery } from '../../lgQuery';
|
||||
import { LightGallery } from '../../lightgallery';
|
||||
import { RotateSettings } from './lg-rotate-settings';
|
||||
export default class Rotate {
|
||||
core: LightGallery;
|
||||
settings: RotateSettings;
|
||||
rotateValuesList: {
|
||||
[key: string]: any;
|
||||
};
|
||||
private $LG;
|
||||
constructor(instance: LightGallery, $LG: LgQuery);
|
||||
buildTemplates(): void;
|
||||
init(): void;
|
||||
applyStyles(): void;
|
||||
rotateLeft(): void;
|
||||
rotateRight(): void;
|
||||
getCurrentRotation(el: HTMLElement): number;
|
||||
flipHorizontal(): void;
|
||||
flipVertical(): void;
|
||||
triggerEvents(event: string, detail: any): void;
|
||||
isImageOrientationChanged(): boolean;
|
||||
closeGallery(): void;
|
||||
destroy(): void;
|
||||
}
|
||||
@@ -0,0 +1,274 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var rotateSettings = {
|
||||
rotate: true,
|
||||
rotateSpeed: 400,
|
||||
rotateLeft: true,
|
||||
rotateRight: true,
|
||||
flipHorizontal: true,
|
||||
flipVertical: true,
|
||||
rotatePluginStrings: {
|
||||
flipVertical: 'Flip vertical',
|
||||
flipHorizontal: 'Flip horizontal',
|
||||
rotateLeft: 'Rotate left',
|
||||
rotateRight: 'Rotate right',
|
||||
},
|
||||
};
|
||||
|
||||
var Rotate = /** @class */ (function () {
|
||||
function Rotate(instance, $LG) {
|
||||
// get lightGallery core plugin instance
|
||||
this.core = instance;
|
||||
this.$LG = $LG;
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign({}, rotateSettings), this.core.settings);
|
||||
return this;
|
||||
}
|
||||
Rotate.prototype.buildTemplates = function () {
|
||||
var rotateIcons = '';
|
||||
if (this.settings.flipVertical) {
|
||||
rotateIcons += "<button type=\"button\" id=\"lg-flip-ver\" aria-label=\"" + this.settings.rotatePluginStrings['flipVertical'] + "\" class=\"lg-flip-ver lg-icon\"></button>";
|
||||
}
|
||||
if (this.settings.flipHorizontal) {
|
||||
rotateIcons += "<button type=\"button\" id=\"lg-flip-hor\" aria-label=\"" + this.settings.rotatePluginStrings['flipHorizontal'] + "\" class=\"lg-flip-hor lg-icon\"></button>";
|
||||
}
|
||||
if (this.settings.rotateLeft) {
|
||||
rotateIcons += "<button type=\"button\" id=\"lg-rotate-left\" aria-label=\"" + this.settings.rotatePluginStrings['rotateLeft'] + "\" class=\"lg-rotate-left lg-icon\"></button>";
|
||||
}
|
||||
if (this.settings.rotateRight) {
|
||||
rotateIcons += "<button type=\"button\" id=\"lg-rotate-right\" aria-label=\"" + this.settings.rotatePluginStrings['rotateRight'] + "\" class=\"lg-rotate-right lg-icon\"></button>";
|
||||
}
|
||||
this.core.$toolbar.append(rotateIcons);
|
||||
};
|
||||
Rotate.prototype.init = function () {
|
||||
var _this = this;
|
||||
if (!this.settings.rotate) {
|
||||
return;
|
||||
}
|
||||
this.buildTemplates();
|
||||
// Save rotate config for each item to persist its rotate, flip values
|
||||
// even after navigating to diferent slides
|
||||
this.rotateValuesList = {};
|
||||
// event triggered after appending slide content
|
||||
this.core.LGel.on(lGEvents.slideItemLoad + ".rotate", function (event) {
|
||||
var index = event.detail.index;
|
||||
var rotateEl = _this.core
|
||||
.getSlideItem(index)
|
||||
.find('.lg-img-rotate')
|
||||
.get();
|
||||
if (!rotateEl) {
|
||||
var imageWrap = _this.core
|
||||
.getSlideItem(index)
|
||||
.find('.lg-object')
|
||||
.first();
|
||||
imageWrap.wrap('lg-img-rotate');
|
||||
//this.rotateValuesList[this.core.index]
|
||||
_this.core
|
||||
.getSlideItem(_this.core.index)
|
||||
.find('.lg-img-rotate')
|
||||
.css('transition-duration', _this.settings.rotateSpeed + 'ms');
|
||||
}
|
||||
});
|
||||
this.core.outer
|
||||
.find('#lg-rotate-left')
|
||||
.first()
|
||||
.on('click.lg', this.rotateLeft.bind(this));
|
||||
this.core.outer
|
||||
.find('#lg-rotate-right')
|
||||
.first()
|
||||
.on('click.lg', this.rotateRight.bind(this));
|
||||
this.core.outer
|
||||
.find('#lg-flip-hor')
|
||||
.first()
|
||||
.on('click.lg', this.flipHorizontal.bind(this));
|
||||
this.core.outer
|
||||
.find('#lg-flip-ver')
|
||||
.first()
|
||||
.on('click.lg', this.flipVertical.bind(this));
|
||||
// Reset rotate on slide change
|
||||
this.core.LGel.on(lGEvents.beforeSlide + ".rotate", function (event) {
|
||||
if (!_this.rotateValuesList[event.detail.index]) {
|
||||
_this.rotateValuesList[event.detail.index] = {
|
||||
rotate: 0,
|
||||
flipHorizontal: 1,
|
||||
flipVertical: 1,
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
Rotate.prototype.applyStyles = function () {
|
||||
var $image = this.core
|
||||
.getSlideItem(this.core.index)
|
||||
.find('.lg-img-rotate')
|
||||
.first();
|
||||
$image.css('transform', 'rotate(' +
|
||||
this.rotateValuesList[this.core.index].rotate +
|
||||
'deg)' +
|
||||
' scale3d(' +
|
||||
this.rotateValuesList[this.core.index].flipHorizontal +
|
||||
', ' +
|
||||
this.rotateValuesList[this.core.index].flipVertical +
|
||||
', 1)');
|
||||
};
|
||||
Rotate.prototype.rotateLeft = function () {
|
||||
this.rotateValuesList[this.core.index].rotate -= 90;
|
||||
this.applyStyles();
|
||||
this.triggerEvents(lGEvents.rotateLeft, {
|
||||
rotate: this.rotateValuesList[this.core.index].rotate,
|
||||
});
|
||||
};
|
||||
Rotate.prototype.rotateRight = function () {
|
||||
this.rotateValuesList[this.core.index].rotate += 90;
|
||||
this.applyStyles();
|
||||
this.triggerEvents(lGEvents.rotateRight, {
|
||||
rotate: this.rotateValuesList[this.core.index].rotate,
|
||||
});
|
||||
};
|
||||
Rotate.prototype.getCurrentRotation = function (el) {
|
||||
if (!el) {
|
||||
return 0;
|
||||
}
|
||||
var st = this.$LG(el).style();
|
||||
var tm = st.getPropertyValue('-webkit-transform') ||
|
||||
st.getPropertyValue('-moz-transform') ||
|
||||
st.getPropertyValue('-ms-transform') ||
|
||||
st.getPropertyValue('-o-transform') ||
|
||||
st.getPropertyValue('transform') ||
|
||||
'none';
|
||||
if (tm !== 'none') {
|
||||
var values = tm.split('(')[1].split(')')[0].split(',');
|
||||
if (values) {
|
||||
var angle = Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI));
|
||||
return angle < 0 ? angle + 360 : angle;
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
Rotate.prototype.flipHorizontal = function () {
|
||||
var rotateEl = this.core
|
||||
.getSlideItem(this.core.index)
|
||||
.find('.lg-img-rotate')
|
||||
.first()
|
||||
.get();
|
||||
var currentRotation = this.getCurrentRotation(rotateEl);
|
||||
var rotateAxis = 'flipHorizontal';
|
||||
if (currentRotation === 90 || currentRotation === 270) {
|
||||
rotateAxis = 'flipVertical';
|
||||
}
|
||||
this.rotateValuesList[this.core.index][rotateAxis] *= -1;
|
||||
this.applyStyles();
|
||||
this.triggerEvents(lGEvents.flipHorizontal, {
|
||||
flipHorizontal: this.rotateValuesList[this.core.index][rotateAxis],
|
||||
});
|
||||
};
|
||||
Rotate.prototype.flipVertical = function () {
|
||||
var rotateEl = this.core
|
||||
.getSlideItem(this.core.index)
|
||||
.find('.lg-img-rotate')
|
||||
.first()
|
||||
.get();
|
||||
var currentRotation = this.getCurrentRotation(rotateEl);
|
||||
var rotateAxis = 'flipVertical';
|
||||
if (currentRotation === 90 || currentRotation === 270) {
|
||||
rotateAxis = 'flipHorizontal';
|
||||
}
|
||||
this.rotateValuesList[this.core.index][rotateAxis] *= -1;
|
||||
this.applyStyles();
|
||||
this.triggerEvents(lGEvents.flipVertical, {
|
||||
flipVertical: this.rotateValuesList[this.core.index][rotateAxis],
|
||||
});
|
||||
};
|
||||
Rotate.prototype.triggerEvents = function (event, detail) {
|
||||
var _this = this;
|
||||
setTimeout(function () {
|
||||
_this.core.LGel.trigger(event, detail);
|
||||
}, this.settings.rotateSpeed + 10);
|
||||
};
|
||||
Rotate.prototype.isImageOrientationChanged = function () {
|
||||
var rotateValue = this.rotateValuesList[this.core.index];
|
||||
var isRotated = Math.abs(rotateValue.rotate) % 360 !== 0;
|
||||
var ifFlippedHor = rotateValue.flipHorizontal < 0;
|
||||
var ifFlippedVer = rotateValue.flipVertical < 0;
|
||||
return isRotated || ifFlippedHor || ifFlippedVer;
|
||||
};
|
||||
Rotate.prototype.closeGallery = function () {
|
||||
if (this.isImageOrientationChanged()) {
|
||||
this.core.getSlideItem(this.core.index).css('opacity', 0);
|
||||
}
|
||||
this.rotateValuesList = {};
|
||||
};
|
||||
Rotate.prototype.destroy = function () {
|
||||
// Unbind all events added by lightGallery rotate plugin
|
||||
this.core.LGel.off('.lg.rotate');
|
||||
this.core.LGel.off('.rotate');
|
||||
};
|
||||
return Rotate;
|
||||
}());
|
||||
|
||||
export default Rotate;
|
||||
//# sourceMappingURL=lg-rotate.es5.js.map
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,282 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgRotate = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var rotateSettings = {
|
||||
rotate: true,
|
||||
rotateSpeed: 400,
|
||||
rotateLeft: true,
|
||||
rotateRight: true,
|
||||
flipHorizontal: true,
|
||||
flipVertical: true,
|
||||
rotatePluginStrings: {
|
||||
flipVertical: 'Flip vertical',
|
||||
flipHorizontal: 'Flip horizontal',
|
||||
rotateLeft: 'Rotate left',
|
||||
rotateRight: 'Rotate right',
|
||||
},
|
||||
};
|
||||
|
||||
var Rotate = /** @class */ (function () {
|
||||
function Rotate(instance, $LG) {
|
||||
// get lightGallery core plugin instance
|
||||
this.core = instance;
|
||||
this.$LG = $LG;
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign({}, rotateSettings), this.core.settings);
|
||||
return this;
|
||||
}
|
||||
Rotate.prototype.buildTemplates = function () {
|
||||
var rotateIcons = '';
|
||||
if (this.settings.flipVertical) {
|
||||
rotateIcons += "<button type=\"button\" id=\"lg-flip-ver\" aria-label=\"" + this.settings.rotatePluginStrings['flipVertical'] + "\" class=\"lg-flip-ver lg-icon\"></button>";
|
||||
}
|
||||
if (this.settings.flipHorizontal) {
|
||||
rotateIcons += "<button type=\"button\" id=\"lg-flip-hor\" aria-label=\"" + this.settings.rotatePluginStrings['flipHorizontal'] + "\" class=\"lg-flip-hor lg-icon\"></button>";
|
||||
}
|
||||
if (this.settings.rotateLeft) {
|
||||
rotateIcons += "<button type=\"button\" id=\"lg-rotate-left\" aria-label=\"" + this.settings.rotatePluginStrings['rotateLeft'] + "\" class=\"lg-rotate-left lg-icon\"></button>";
|
||||
}
|
||||
if (this.settings.rotateRight) {
|
||||
rotateIcons += "<button type=\"button\" id=\"lg-rotate-right\" aria-label=\"" + this.settings.rotatePluginStrings['rotateRight'] + "\" class=\"lg-rotate-right lg-icon\"></button>";
|
||||
}
|
||||
this.core.$toolbar.append(rotateIcons);
|
||||
};
|
||||
Rotate.prototype.init = function () {
|
||||
var _this = this;
|
||||
if (!this.settings.rotate) {
|
||||
return;
|
||||
}
|
||||
this.buildTemplates();
|
||||
// Save rotate config for each item to persist its rotate, flip values
|
||||
// even after navigating to diferent slides
|
||||
this.rotateValuesList = {};
|
||||
// event triggered after appending slide content
|
||||
this.core.LGel.on(lGEvents.slideItemLoad + ".rotate", function (event) {
|
||||
var index = event.detail.index;
|
||||
var rotateEl = _this.core
|
||||
.getSlideItem(index)
|
||||
.find('.lg-img-rotate')
|
||||
.get();
|
||||
if (!rotateEl) {
|
||||
var imageWrap = _this.core
|
||||
.getSlideItem(index)
|
||||
.find('.lg-object')
|
||||
.first();
|
||||
imageWrap.wrap('lg-img-rotate');
|
||||
//this.rotateValuesList[this.core.index]
|
||||
_this.core
|
||||
.getSlideItem(_this.core.index)
|
||||
.find('.lg-img-rotate')
|
||||
.css('transition-duration', _this.settings.rotateSpeed + 'ms');
|
||||
}
|
||||
});
|
||||
this.core.outer
|
||||
.find('#lg-rotate-left')
|
||||
.first()
|
||||
.on('click.lg', this.rotateLeft.bind(this));
|
||||
this.core.outer
|
||||
.find('#lg-rotate-right')
|
||||
.first()
|
||||
.on('click.lg', this.rotateRight.bind(this));
|
||||
this.core.outer
|
||||
.find('#lg-flip-hor')
|
||||
.first()
|
||||
.on('click.lg', this.flipHorizontal.bind(this));
|
||||
this.core.outer
|
||||
.find('#lg-flip-ver')
|
||||
.first()
|
||||
.on('click.lg', this.flipVertical.bind(this));
|
||||
// Reset rotate on slide change
|
||||
this.core.LGel.on(lGEvents.beforeSlide + ".rotate", function (event) {
|
||||
if (!_this.rotateValuesList[event.detail.index]) {
|
||||
_this.rotateValuesList[event.detail.index] = {
|
||||
rotate: 0,
|
||||
flipHorizontal: 1,
|
||||
flipVertical: 1,
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
Rotate.prototype.applyStyles = function () {
|
||||
var $image = this.core
|
||||
.getSlideItem(this.core.index)
|
||||
.find('.lg-img-rotate')
|
||||
.first();
|
||||
$image.css('transform', 'rotate(' +
|
||||
this.rotateValuesList[this.core.index].rotate +
|
||||
'deg)' +
|
||||
' scale3d(' +
|
||||
this.rotateValuesList[this.core.index].flipHorizontal +
|
||||
', ' +
|
||||
this.rotateValuesList[this.core.index].flipVertical +
|
||||
', 1)');
|
||||
};
|
||||
Rotate.prototype.rotateLeft = function () {
|
||||
this.rotateValuesList[this.core.index].rotate -= 90;
|
||||
this.applyStyles();
|
||||
this.triggerEvents(lGEvents.rotateLeft, {
|
||||
rotate: this.rotateValuesList[this.core.index].rotate,
|
||||
});
|
||||
};
|
||||
Rotate.prototype.rotateRight = function () {
|
||||
this.rotateValuesList[this.core.index].rotate += 90;
|
||||
this.applyStyles();
|
||||
this.triggerEvents(lGEvents.rotateRight, {
|
||||
rotate: this.rotateValuesList[this.core.index].rotate,
|
||||
});
|
||||
};
|
||||
Rotate.prototype.getCurrentRotation = function (el) {
|
||||
if (!el) {
|
||||
return 0;
|
||||
}
|
||||
var st = this.$LG(el).style();
|
||||
var tm = st.getPropertyValue('-webkit-transform') ||
|
||||
st.getPropertyValue('-moz-transform') ||
|
||||
st.getPropertyValue('-ms-transform') ||
|
||||
st.getPropertyValue('-o-transform') ||
|
||||
st.getPropertyValue('transform') ||
|
||||
'none';
|
||||
if (tm !== 'none') {
|
||||
var values = tm.split('(')[1].split(')')[0].split(',');
|
||||
if (values) {
|
||||
var angle = Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI));
|
||||
return angle < 0 ? angle + 360 : angle;
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
Rotate.prototype.flipHorizontal = function () {
|
||||
var rotateEl = this.core
|
||||
.getSlideItem(this.core.index)
|
||||
.find('.lg-img-rotate')
|
||||
.first()
|
||||
.get();
|
||||
var currentRotation = this.getCurrentRotation(rotateEl);
|
||||
var rotateAxis = 'flipHorizontal';
|
||||
if (currentRotation === 90 || currentRotation === 270) {
|
||||
rotateAxis = 'flipVertical';
|
||||
}
|
||||
this.rotateValuesList[this.core.index][rotateAxis] *= -1;
|
||||
this.applyStyles();
|
||||
this.triggerEvents(lGEvents.flipHorizontal, {
|
||||
flipHorizontal: this.rotateValuesList[this.core.index][rotateAxis],
|
||||
});
|
||||
};
|
||||
Rotate.prototype.flipVertical = function () {
|
||||
var rotateEl = this.core
|
||||
.getSlideItem(this.core.index)
|
||||
.find('.lg-img-rotate')
|
||||
.first()
|
||||
.get();
|
||||
var currentRotation = this.getCurrentRotation(rotateEl);
|
||||
var rotateAxis = 'flipVertical';
|
||||
if (currentRotation === 90 || currentRotation === 270) {
|
||||
rotateAxis = 'flipHorizontal';
|
||||
}
|
||||
this.rotateValuesList[this.core.index][rotateAxis] *= -1;
|
||||
this.applyStyles();
|
||||
this.triggerEvents(lGEvents.flipVertical, {
|
||||
flipVertical: this.rotateValuesList[this.core.index][rotateAxis],
|
||||
});
|
||||
};
|
||||
Rotate.prototype.triggerEvents = function (event, detail) {
|
||||
var _this = this;
|
||||
setTimeout(function () {
|
||||
_this.core.LGel.trigger(event, detail);
|
||||
}, this.settings.rotateSpeed + 10);
|
||||
};
|
||||
Rotate.prototype.isImageOrientationChanged = function () {
|
||||
var rotateValue = this.rotateValuesList[this.core.index];
|
||||
var isRotated = Math.abs(rotateValue.rotate) % 360 !== 0;
|
||||
var ifFlippedHor = rotateValue.flipHorizontal < 0;
|
||||
var ifFlippedVer = rotateValue.flipVertical < 0;
|
||||
return isRotated || ifFlippedHor || ifFlippedVer;
|
||||
};
|
||||
Rotate.prototype.closeGallery = function () {
|
||||
if (this.isImageOrientationChanged()) {
|
||||
this.core.getSlideItem(this.core.index).css('opacity', 0);
|
||||
}
|
||||
this.rotateValuesList = {};
|
||||
};
|
||||
Rotate.prototype.destroy = function () {
|
||||
// Unbind all events added by lightGallery rotate plugin
|
||||
this.core.LGel.off('.lg.rotate');
|
||||
this.core.LGel.off('.rotate');
|
||||
};
|
||||
return Rotate;
|
||||
}());
|
||||
|
||||
return Rotate;
|
||||
|
||||
})));
|
||||
//# sourceMappingURL=lg-rotate.umd.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"name": "lightgallery/plugins/rotate",
|
||||
"private": true,
|
||||
"main": "lg-rotate.umd.js",
|
||||
"module": "lg-rotate.es5.js",
|
||||
"typings": "lg-rotate.d.ts"
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
import { GalleryItem } from '../../lg-utils';
|
||||
export declare function getFacebookShareLink(galleryItem: GalleryItem): string;
|
||||
@@ -0,0 +1,2 @@
|
||||
import { GalleryItem } from '../../lg-utils';
|
||||
export declare function getPinterestShareLink(galleryItem: GalleryItem): string;
|
||||
@@ -0,0 +1,57 @@
|
||||
import { ShareOption } from './types';
|
||||
export interface ShareStrings {
|
||||
share: string;
|
||||
}
|
||||
export interface ShareSettings {
|
||||
/**
|
||||
* Enable/Disable share options
|
||||
*/
|
||||
share: boolean;
|
||||
/**
|
||||
* Enable Facebook share.
|
||||
*/
|
||||
facebook: boolean;
|
||||
/**
|
||||
* Facebook dropdown text.
|
||||
*/
|
||||
facebookDropdownText: string;
|
||||
/**
|
||||
* Enable twitter share.
|
||||
*/
|
||||
twitter: boolean;
|
||||
/**
|
||||
* Twitter dropdown text
|
||||
*/
|
||||
twitterDropdownText: string;
|
||||
/**
|
||||
* Enable pinterest share.
|
||||
*/
|
||||
pinterest: boolean;
|
||||
/**
|
||||
* Pinterest dropdown text
|
||||
|
||||
*/
|
||||
pinterestDropdownText: string;
|
||||
/**
|
||||
* Array of additional share options
|
||||
*
|
||||
* This can be used to build additional share options.
|
||||
* <a href="/demos/share/">Demo</a>
|
||||
*/
|
||||
additionalShareOptions: ShareOption[];
|
||||
/**
|
||||
* Custom translation strings for aria-labels
|
||||
*/
|
||||
sharePluginStrings: ShareStrings;
|
||||
}
|
||||
export declare const shareSettings: {
|
||||
share: boolean;
|
||||
facebook: boolean;
|
||||
facebookDropdownText: string;
|
||||
twitter: boolean;
|
||||
twitterDropdownText: string;
|
||||
pinterest: boolean;
|
||||
pinterestDropdownText: string;
|
||||
additionalShareOptions: never[];
|
||||
sharePluginStrings: ShareStrings;
|
||||
};
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
import { ShareSettings } from './lg-share-settings';
|
||||
import { LightGallery } from '../../lightgallery';
|
||||
export default class Share {
|
||||
core: LightGallery;
|
||||
settings: ShareSettings;
|
||||
private shareOptions;
|
||||
constructor(instance: LightGallery);
|
||||
init(): void;
|
||||
private getShareListHtml;
|
||||
setLgShareMarkup(): void;
|
||||
private onAfterSlide;
|
||||
private getShareListItemHTML;
|
||||
private getDefaultShareOptions;
|
||||
destroy(): void;
|
||||
}
|
||||
@@ -0,0 +1,219 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
function __spreadArrays() {
|
||||
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
|
||||
for (var r = Array(s), k = 0, i = 0; i < il; i++)
|
||||
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
|
||||
r[k] = a[j];
|
||||
return r;
|
||||
}
|
||||
|
||||
var shareSettings = {
|
||||
share: true,
|
||||
facebook: true,
|
||||
facebookDropdownText: 'Facebook',
|
||||
twitter: true,
|
||||
twitterDropdownText: 'Twitter',
|
||||
pinterest: true,
|
||||
pinterestDropdownText: 'Pinterest',
|
||||
additionalShareOptions: [],
|
||||
sharePluginStrings: { share: 'Share' },
|
||||
};
|
||||
|
||||
function getFacebookShareLink(galleryItem) {
|
||||
var facebookBaseUrl = '//www.facebook.com/sharer/sharer.php?u=';
|
||||
return (facebookBaseUrl +
|
||||
encodeURIComponent(galleryItem.facebookShareUrl || window.location.href));
|
||||
}
|
||||
|
||||
function getTwitterShareLink(galleryItem) {
|
||||
var twitterBaseUrl = '//twitter.com/intent/tweet?text=';
|
||||
var url = encodeURIComponent(galleryItem.twitterShareUrl || window.location.href);
|
||||
var text = galleryItem.tweetText;
|
||||
return twitterBaseUrl + text + '&url=' + url;
|
||||
}
|
||||
|
||||
function getPinterestShareLink(galleryItem) {
|
||||
var pinterestBaseUrl = 'http://www.pinterest.com/pin/create/button/?url=';
|
||||
var description = galleryItem.pinterestText;
|
||||
var media = encodeURIComponent(galleryItem.src);
|
||||
var url = encodeURIComponent(galleryItem.pinterestShareUrl || window.location.href);
|
||||
return (pinterestBaseUrl +
|
||||
url +
|
||||
'&media=' +
|
||||
media +
|
||||
'&description=' +
|
||||
description);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var Share = /** @class */ (function () {
|
||||
function Share(instance) {
|
||||
this.shareOptions = [];
|
||||
// get lightGallery core plugin instance
|
||||
this.core = instance;
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign({}, shareSettings), this.core.settings);
|
||||
return this;
|
||||
}
|
||||
Share.prototype.init = function () {
|
||||
if (!this.settings.share) {
|
||||
return;
|
||||
}
|
||||
this.shareOptions = __spreadArrays(this.getDefaultShareOptions(), this.settings.additionalShareOptions);
|
||||
this.setLgShareMarkup();
|
||||
this.core.outer
|
||||
.find('.lg-share .lg-dropdown')
|
||||
.append(this.getShareListHtml());
|
||||
this.core.LGel.on(lGEvents.afterSlide + ".share", this.onAfterSlide.bind(this));
|
||||
};
|
||||
Share.prototype.getShareListHtml = function () {
|
||||
var shareHtml = '';
|
||||
this.shareOptions.forEach(function (shareOption) {
|
||||
shareHtml += shareOption.dropdownHTML;
|
||||
});
|
||||
return shareHtml;
|
||||
};
|
||||
Share.prototype.setLgShareMarkup = function () {
|
||||
var _this = this;
|
||||
this.core.$toolbar.append("<button type=\"button\" aria-label=\"" + this.settings.sharePluginStrings['share'] + "\" aria-haspopup=\"true\" aria-expanded=\"false\" class=\"lg-share lg-icon\">\n <ul class=\"lg-dropdown\" style=\"position: absolute;\"></ul></button>");
|
||||
this.core.outer.append('<div class="lg-dropdown-overlay"></div>');
|
||||
var $shareButton = this.core.outer.find('.lg-share');
|
||||
$shareButton.first().on('click.lg', function () {
|
||||
_this.core.outer.toggleClass('lg-dropdown-active');
|
||||
if (_this.core.outer.hasClass('lg-dropdown-active')) {
|
||||
_this.core.outer.attr('aria-expanded', true);
|
||||
}
|
||||
else {
|
||||
_this.core.outer.attr('aria-expanded', false);
|
||||
}
|
||||
});
|
||||
this.core.outer
|
||||
.find('.lg-dropdown-overlay')
|
||||
.first()
|
||||
.on('click.lg', function () {
|
||||
_this.core.outer.removeClass('lg-dropdown-active');
|
||||
_this.core.outer.attr('aria-expanded', false);
|
||||
});
|
||||
};
|
||||
Share.prototype.onAfterSlide = function (event) {
|
||||
var _this = this;
|
||||
var index = event.detail.index;
|
||||
var currentItem = this.core.galleryItems[index];
|
||||
setTimeout(function () {
|
||||
_this.shareOptions.forEach(function (shareOption) {
|
||||
var selector = shareOption.selector;
|
||||
_this.core.outer
|
||||
.find(selector)
|
||||
.attr('href', shareOption.generateLink(currentItem));
|
||||
});
|
||||
}, 100);
|
||||
};
|
||||
Share.prototype.getShareListItemHTML = function (type, text) {
|
||||
return "<li><a class=\"lg-share-" + type + "\" rel=\"noopener\" target=\"_blank\"><span class=\"lg-icon\"></span><span class=\"lg-dropdown-text\">" + text + "</span></a></li>";
|
||||
};
|
||||
Share.prototype.getDefaultShareOptions = function () {
|
||||
return __spreadArrays((this.settings.facebook
|
||||
? [
|
||||
{
|
||||
type: 'facebook',
|
||||
generateLink: getFacebookShareLink,
|
||||
dropdownHTML: this.getShareListItemHTML('facebook', this.settings.facebookDropdownText),
|
||||
selector: '.lg-share-facebook',
|
||||
},
|
||||
]
|
||||
: []), (this.settings.twitter
|
||||
? [
|
||||
{
|
||||
type: 'twitter',
|
||||
generateLink: getTwitterShareLink,
|
||||
dropdownHTML: this.getShareListItemHTML('twitter', this.settings.twitterDropdownText),
|
||||
selector: '.lg-share-twitter',
|
||||
},
|
||||
]
|
||||
: []), (this.settings.pinterest
|
||||
? [
|
||||
{
|
||||
type: 'pinterest',
|
||||
generateLink: getPinterestShareLink,
|
||||
dropdownHTML: this.getShareListItemHTML('pinterest', this.settings.pinterestDropdownText),
|
||||
selector: '.lg-share-pinterest',
|
||||
},
|
||||
]
|
||||
: []));
|
||||
};
|
||||
Share.prototype.destroy = function () {
|
||||
this.core.outer.find('.lg-dropdown-overlay').remove();
|
||||
this.core.outer.find('.lg-share').remove();
|
||||
this.core.LGel.off('.lg.share');
|
||||
this.core.LGel.off('.share');
|
||||
};
|
||||
return Share;
|
||||
}());
|
||||
|
||||
export default Share;
|
||||
//# sourceMappingURL=lg-share.es5.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).lgShare=e()}(this,(function(){"use strict";var t=function(){return(t=Object.assign||function(t){for(var e,r=1,o=arguments.length;r<o;r++)for(var n in e=arguments[r])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t}).apply(this,arguments)};function e(){for(var t=0,e=0,r=arguments.length;e<r;e++)t+=arguments[e].length;var o=Array(t),n=0;for(e=0;e<r;e++)for(var i=arguments[e],s=0,a=i.length;s<a;s++,n++)o[n]=i[s];return o}var r={share:!0,facebook:!0,facebookDropdownText:"Facebook",twitter:!0,twitterDropdownText:"Twitter",pinterest:!0,pinterestDropdownText:"Pinterest",additionalShareOptions:[],sharePluginStrings:{share:"Share"}};function o(t){return"//www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(t.facebookShareUrl||window.location.href)}function n(t){var e=encodeURIComponent(t.twitterShareUrl||window.location.href);return"//twitter.com/intent/tweet?text="+t.tweetText+"&url="+e}function i(t){var e=t.pinterestText,r=encodeURIComponent(t.src);return"http://www.pinterest.com/pin/create/button/?url="+encodeURIComponent(t.pinterestShareUrl||window.location.href)+"&media="+r+"&description="+e}var s="lgAfterSlide";return function(){function a(e){return this.shareOptions=[],this.core=e,this.settings=t(t({},r),this.core.settings),this}return a.prototype.init=function(){this.settings.share&&(this.shareOptions=e(this.getDefaultShareOptions(),this.settings.additionalShareOptions),this.setLgShareMarkup(),this.core.outer.find(".lg-share .lg-dropdown").append(this.getShareListHtml()),this.core.LGel.on(s+".share",this.onAfterSlide.bind(this)))},a.prototype.getShareListHtml=function(){var t="";return this.shareOptions.forEach((function(e){t+=e.dropdownHTML})),t},a.prototype.setLgShareMarkup=function(){var t=this;this.core.$toolbar.append('<button type="button" aria-label="'+this.settings.sharePluginStrings.share+'" aria-haspopup="true" aria-expanded="false" class="lg-share lg-icon">\n <ul class="lg-dropdown" style="position: absolute;"></ul></button>'),this.core.outer.append('<div class="lg-dropdown-overlay"></div>'),this.core.outer.find(".lg-share").first().on("click.lg",(function(){t.core.outer.toggleClass("lg-dropdown-active"),t.core.outer.hasClass("lg-dropdown-active")?t.core.outer.attr("aria-expanded",!0):t.core.outer.attr("aria-expanded",!1)})),this.core.outer.find(".lg-dropdown-overlay").first().on("click.lg",(function(){t.core.outer.removeClass("lg-dropdown-active"),t.core.outer.attr("aria-expanded",!1)}))},a.prototype.onAfterSlide=function(t){var e=this,r=t.detail.index,o=this.core.galleryItems[r];setTimeout((function(){e.shareOptions.forEach((function(t){var r=t.selector;e.core.outer.find(r).attr("href",t.generateLink(o))}))}),100)},a.prototype.getShareListItemHTML=function(t,e){return'<li><a class="lg-share-'+t+'" rel="noopener" target="_blank"><span class="lg-icon"></span><span class="lg-dropdown-text">'+e+"</span></a></li>"},a.prototype.getDefaultShareOptions=function(){return e(this.settings.facebook?[{type:"facebook",generateLink:o,dropdownHTML:this.getShareListItemHTML("facebook",this.settings.facebookDropdownText),selector:".lg-share-facebook"}]:[],this.settings.twitter?[{type:"twitter",generateLink:n,dropdownHTML:this.getShareListItemHTML("twitter",this.settings.twitterDropdownText),selector:".lg-share-twitter"}]:[],this.settings.pinterest?[{type:"pinterest",generateLink:i,dropdownHTML:this.getShareListItemHTML("pinterest",this.settings.pinterestDropdownText),selector:".lg-share-pinterest"}]:[])},a.prototype.destroy=function(){this.core.outer.find(".lg-dropdown-overlay").remove(),this.core.outer.find(".lg-share").remove(),this.core.LGel.off(".lg.share"),this.core.LGel.off(".share")},a}()}));
|
||||
@@ -0,0 +1,227 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgShare = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
function __spreadArrays() {
|
||||
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
|
||||
for (var r = Array(s), k = 0, i = 0; i < il; i++)
|
||||
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
|
||||
r[k] = a[j];
|
||||
return r;
|
||||
}
|
||||
|
||||
var shareSettings = {
|
||||
share: true,
|
||||
facebook: true,
|
||||
facebookDropdownText: 'Facebook',
|
||||
twitter: true,
|
||||
twitterDropdownText: 'Twitter',
|
||||
pinterest: true,
|
||||
pinterestDropdownText: 'Pinterest',
|
||||
additionalShareOptions: [],
|
||||
sharePluginStrings: { share: 'Share' },
|
||||
};
|
||||
|
||||
function getFacebookShareLink(galleryItem) {
|
||||
var facebookBaseUrl = '//www.facebook.com/sharer/sharer.php?u=';
|
||||
return (facebookBaseUrl +
|
||||
encodeURIComponent(galleryItem.facebookShareUrl || window.location.href));
|
||||
}
|
||||
|
||||
function getTwitterShareLink(galleryItem) {
|
||||
var twitterBaseUrl = '//twitter.com/intent/tweet?text=';
|
||||
var url = encodeURIComponent(galleryItem.twitterShareUrl || window.location.href);
|
||||
var text = galleryItem.tweetText;
|
||||
return twitterBaseUrl + text + '&url=' + url;
|
||||
}
|
||||
|
||||
function getPinterestShareLink(galleryItem) {
|
||||
var pinterestBaseUrl = 'http://www.pinterest.com/pin/create/button/?url=';
|
||||
var description = galleryItem.pinterestText;
|
||||
var media = encodeURIComponent(galleryItem.src);
|
||||
var url = encodeURIComponent(galleryItem.pinterestShareUrl || window.location.href);
|
||||
return (pinterestBaseUrl +
|
||||
url +
|
||||
'&media=' +
|
||||
media +
|
||||
'&description=' +
|
||||
description);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var Share = /** @class */ (function () {
|
||||
function Share(instance) {
|
||||
this.shareOptions = [];
|
||||
// get lightGallery core plugin instance
|
||||
this.core = instance;
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign({}, shareSettings), this.core.settings);
|
||||
return this;
|
||||
}
|
||||
Share.prototype.init = function () {
|
||||
if (!this.settings.share) {
|
||||
return;
|
||||
}
|
||||
this.shareOptions = __spreadArrays(this.getDefaultShareOptions(), this.settings.additionalShareOptions);
|
||||
this.setLgShareMarkup();
|
||||
this.core.outer
|
||||
.find('.lg-share .lg-dropdown')
|
||||
.append(this.getShareListHtml());
|
||||
this.core.LGel.on(lGEvents.afterSlide + ".share", this.onAfterSlide.bind(this));
|
||||
};
|
||||
Share.prototype.getShareListHtml = function () {
|
||||
var shareHtml = '';
|
||||
this.shareOptions.forEach(function (shareOption) {
|
||||
shareHtml += shareOption.dropdownHTML;
|
||||
});
|
||||
return shareHtml;
|
||||
};
|
||||
Share.prototype.setLgShareMarkup = function () {
|
||||
var _this = this;
|
||||
this.core.$toolbar.append("<button type=\"button\" aria-label=\"" + this.settings.sharePluginStrings['share'] + "\" aria-haspopup=\"true\" aria-expanded=\"false\" class=\"lg-share lg-icon\">\n <ul class=\"lg-dropdown\" style=\"position: absolute;\"></ul></button>");
|
||||
this.core.outer.append('<div class="lg-dropdown-overlay"></div>');
|
||||
var $shareButton = this.core.outer.find('.lg-share');
|
||||
$shareButton.first().on('click.lg', function () {
|
||||
_this.core.outer.toggleClass('lg-dropdown-active');
|
||||
if (_this.core.outer.hasClass('lg-dropdown-active')) {
|
||||
_this.core.outer.attr('aria-expanded', true);
|
||||
}
|
||||
else {
|
||||
_this.core.outer.attr('aria-expanded', false);
|
||||
}
|
||||
});
|
||||
this.core.outer
|
||||
.find('.lg-dropdown-overlay')
|
||||
.first()
|
||||
.on('click.lg', function () {
|
||||
_this.core.outer.removeClass('lg-dropdown-active');
|
||||
_this.core.outer.attr('aria-expanded', false);
|
||||
});
|
||||
};
|
||||
Share.prototype.onAfterSlide = function (event) {
|
||||
var _this = this;
|
||||
var index = event.detail.index;
|
||||
var currentItem = this.core.galleryItems[index];
|
||||
setTimeout(function () {
|
||||
_this.shareOptions.forEach(function (shareOption) {
|
||||
var selector = shareOption.selector;
|
||||
_this.core.outer
|
||||
.find(selector)
|
||||
.attr('href', shareOption.generateLink(currentItem));
|
||||
});
|
||||
}, 100);
|
||||
};
|
||||
Share.prototype.getShareListItemHTML = function (type, text) {
|
||||
return "<li><a class=\"lg-share-" + type + "\" rel=\"noopener\" target=\"_blank\"><span class=\"lg-icon\"></span><span class=\"lg-dropdown-text\">" + text + "</span></a></li>";
|
||||
};
|
||||
Share.prototype.getDefaultShareOptions = function () {
|
||||
return __spreadArrays((this.settings.facebook
|
||||
? [
|
||||
{
|
||||
type: 'facebook',
|
||||
generateLink: getFacebookShareLink,
|
||||
dropdownHTML: this.getShareListItemHTML('facebook', this.settings.facebookDropdownText),
|
||||
selector: '.lg-share-facebook',
|
||||
},
|
||||
]
|
||||
: []), (this.settings.twitter
|
||||
? [
|
||||
{
|
||||
type: 'twitter',
|
||||
generateLink: getTwitterShareLink,
|
||||
dropdownHTML: this.getShareListItemHTML('twitter', this.settings.twitterDropdownText),
|
||||
selector: '.lg-share-twitter',
|
||||
},
|
||||
]
|
||||
: []), (this.settings.pinterest
|
||||
? [
|
||||
{
|
||||
type: 'pinterest',
|
||||
generateLink: getPinterestShareLink,
|
||||
dropdownHTML: this.getShareListItemHTML('pinterest', this.settings.pinterestDropdownText),
|
||||
selector: '.lg-share-pinterest',
|
||||
},
|
||||
]
|
||||
: []));
|
||||
};
|
||||
Share.prototype.destroy = function () {
|
||||
this.core.outer.find('.lg-dropdown-overlay').remove();
|
||||
this.core.outer.find('.lg-share').remove();
|
||||
this.core.LGel.off('.lg.share');
|
||||
this.core.LGel.off('.share');
|
||||
};
|
||||
return Share;
|
||||
}());
|
||||
|
||||
return Share;
|
||||
|
||||
})));
|
||||
//# sourceMappingURL=lg-share.umd.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,2 @@
|
||||
import { GalleryItem } from '../../lg-utils';
|
||||
export declare function getTwitterShareLink(galleryItem: GalleryItem): string;
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"name": "lightgallery/plugins/share",
|
||||
"private": true,
|
||||
"main": "lg-share.umd.js",
|
||||
"module": "lg-share.es5.js",
|
||||
"typings": "lg-share.d.ts"
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { GalleryItem } from '../../lg-utils';
|
||||
export interface ShareOption {
|
||||
selector: string;
|
||||
dropdownHTML: string;
|
||||
generateLink: (galleryItem: GalleryItem) => string;
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
interface ThumbnailStrings {
|
||||
toggleThumbnails: string;
|
||||
}
|
||||
export interface ThumbnailsSettings {
|
||||
/**
|
||||
* Enable thumbnails for the gallery
|
||||
*/
|
||||
thumbnail: boolean;
|
||||
animateThumb: boolean;
|
||||
/**
|
||||
* Position of selected thumbnail.
|
||||
*/
|
||||
currentPagerPosition: 'left' | 'middle' | 'right';
|
||||
/**
|
||||
* Position of thumbnails when the width of all thumbnails combined is less than the gallery's width.
|
||||
*
|
||||
*/
|
||||
alignThumbnails: 'left' | 'middle' | 'right';
|
||||
/**
|
||||
* Width of each thumbnails.
|
||||
*/
|
||||
thumbWidth: number;
|
||||
/**
|
||||
* Height of each thumbnails.
|
||||
*/
|
||||
thumbHeight: string;
|
||||
/**
|
||||
* Spacing between each thumbnails
|
||||
*/
|
||||
thumbMargin: number;
|
||||
/**
|
||||
* control where the thumbnails should be appended.
|
||||
* By default, thumbnails are appended to '.lg-components' which has inbuilt open close transitions
|
||||
* If you don't want initial thumbnails transitions, or want to do more customization,
|
||||
* you can append thumbnails to the lightGalley outer div -
|
||||
* <a href="/demos/thumbnails/#static-thumbnails">Demo</a>
|
||||
*/
|
||||
appendThumbnailsTo: '.lg-outer' | '.lg-components';
|
||||
/**
|
||||
* Enable toggle captions and thumbnails.
|
||||
* @description not applicable if allowMediaOverlap is false
|
||||
*/
|
||||
toggleThumb: boolean;
|
||||
/**
|
||||
* Enables desktop mouse drag support for thumbnails.
|
||||
*/
|
||||
enableThumbDrag: boolean;
|
||||
/**
|
||||
* Enables thumbnail touch/swipe support for touch devices
|
||||
*/
|
||||
enableThumbSwipe: boolean;
|
||||
/**
|
||||
* By setting the thumbnailSwipeThreshold (in px) you can set how far the user must swipe for the next/prev slide.
|
||||
*/
|
||||
thumbnailSwipeThreshold: number;
|
||||
/**
|
||||
* You can automatically load thumbnails for YouTube videos from YouTube by setting loadYouTubeThumbnail true
|
||||
*/
|
||||
loadYouTubeThumbnail: boolean;
|
||||
/**
|
||||
* You can specify the thumbnail size by setting respective number.
|
||||
*/
|
||||
youTubeThumbSize: number;
|
||||
/**
|
||||
* Custom translation strings for aria-labels
|
||||
*/
|
||||
thumbnailPluginStrings: ThumbnailStrings;
|
||||
}
|
||||
export declare const thumbnailsSettings: ThumbnailsSettings;
|
||||
export {};
|
||||
@@ -0,0 +1,48 @@
|
||||
import { LgQuery } from '../../lgQuery';
|
||||
import { LightGallery } from '../../lightgallery';
|
||||
import { GalleryItem } from '../../lg-utils';
|
||||
interface ThumbDragUtils {
|
||||
cords: {
|
||||
startX: number;
|
||||
endX: number;
|
||||
};
|
||||
isMoved: boolean;
|
||||
newTranslateX: number;
|
||||
startTime: Date;
|
||||
endTime: Date;
|
||||
touchMoveTime: number;
|
||||
}
|
||||
interface ThumbnailGalleryItem extends GalleryItem {
|
||||
thumb: string;
|
||||
}
|
||||
export default class Thumbnail {
|
||||
private core;
|
||||
private $thumbOuter;
|
||||
private $lgThumb;
|
||||
private thumbOuterWidth;
|
||||
private thumbTotalWidth;
|
||||
private translateX;
|
||||
private thumbClickable;
|
||||
private settings;
|
||||
private $LG;
|
||||
constructor(instance: LightGallery, $LG: LgQuery);
|
||||
init(): void;
|
||||
build(): void;
|
||||
setThumbMarkup(): void;
|
||||
enableThumbDrag(): void;
|
||||
enableThumbSwipe(): void;
|
||||
rebuildThumbnails(): void;
|
||||
setTranslate(value: number): void;
|
||||
getPossibleTransformX(left: number): number;
|
||||
animateThumb(index: number): void;
|
||||
onThumbTouchMove(thumbDragUtils: ThumbDragUtils): ThumbDragUtils;
|
||||
onThumbTouchEnd(thumbDragUtils: ThumbDragUtils): ThumbDragUtils;
|
||||
getThumbHtml(thumb: string, index: number, alt?: string): HTMLElement;
|
||||
setThumbItemHtml(items: ThumbnailGalleryItem[]): void;
|
||||
setAnimateThumbStyles(): void;
|
||||
manageActiveClassOnSlideChange(): void;
|
||||
toggleThumbBar(): void;
|
||||
thumbKeyPress(): void;
|
||||
destroy(): void;
|
||||
}
|
||||
export {};
|
||||
@@ -0,0 +1,487 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
var thumbnailsSettings = {
|
||||
thumbnail: true,
|
||||
animateThumb: true,
|
||||
currentPagerPosition: 'middle',
|
||||
alignThumbnails: 'middle',
|
||||
thumbWidth: 100,
|
||||
thumbHeight: '80px',
|
||||
thumbMargin: 5,
|
||||
appendThumbnailsTo: '.lg-components',
|
||||
toggleThumb: false,
|
||||
enableThumbDrag: true,
|
||||
enableThumbSwipe: true,
|
||||
thumbnailSwipeThreshold: 10,
|
||||
loadYouTubeThumbnail: true,
|
||||
youTubeThumbSize: 1,
|
||||
thumbnailPluginStrings: {
|
||||
toggleThumbnails: 'Toggle thumbnails',
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var Thumbnail = /** @class */ (function () {
|
||||
function Thumbnail(instance, $LG) {
|
||||
this.thumbOuterWidth = 0;
|
||||
this.thumbTotalWidth = 0;
|
||||
this.translateX = 0;
|
||||
this.thumbClickable = false;
|
||||
// get lightGallery core plugin instance
|
||||
this.core = instance;
|
||||
this.$LG = $LG;
|
||||
return this;
|
||||
}
|
||||
Thumbnail.prototype.init = function () {
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign({}, thumbnailsSettings), this.core.settings);
|
||||
this.thumbOuterWidth = 0;
|
||||
this.thumbTotalWidth =
|
||||
this.core.galleryItems.length *
|
||||
(this.settings.thumbWidth + this.settings.thumbMargin);
|
||||
// Thumbnail animation value
|
||||
this.translateX = 0;
|
||||
this.setAnimateThumbStyles();
|
||||
if (!this.core.settings.allowMediaOverlap) {
|
||||
this.settings.toggleThumb = false;
|
||||
}
|
||||
if (this.settings.thumbnail) {
|
||||
this.build();
|
||||
if (this.settings.animateThumb) {
|
||||
if (this.settings.enableThumbDrag) {
|
||||
this.enableThumbDrag();
|
||||
}
|
||||
if (this.settings.enableThumbSwipe) {
|
||||
this.enableThumbSwipe();
|
||||
}
|
||||
this.thumbClickable = false;
|
||||
}
|
||||
else {
|
||||
this.thumbClickable = true;
|
||||
}
|
||||
this.toggleThumbBar();
|
||||
this.thumbKeyPress();
|
||||
}
|
||||
};
|
||||
Thumbnail.prototype.build = function () {
|
||||
var _this = this;
|
||||
this.setThumbMarkup();
|
||||
this.manageActiveClassOnSlideChange();
|
||||
this.$lgThumb.first().on('click.lg touchend.lg', function (e) {
|
||||
var $target = _this.$LG(e.target);
|
||||
if (!$target.hasAttribute('data-lg-item-id')) {
|
||||
return;
|
||||
}
|
||||
setTimeout(function () {
|
||||
// In IE9 and bellow touch does not support
|
||||
// Go to slide if browser does not support css transitions
|
||||
if (_this.thumbClickable && !_this.core.lgBusy) {
|
||||
var index = parseInt($target.attr('data-lg-item-id'));
|
||||
_this.core.slide(index, false, true, false);
|
||||
}
|
||||
}, 50);
|
||||
});
|
||||
this.core.LGel.on(lGEvents.beforeSlide + ".thumb", function (event) {
|
||||
var index = event.detail.index;
|
||||
_this.animateThumb(index);
|
||||
});
|
||||
this.core.LGel.on(lGEvents.beforeOpen + ".thumb", function () {
|
||||
_this.thumbOuterWidth = _this.core.outer.get().offsetWidth;
|
||||
});
|
||||
this.core.LGel.on(lGEvents.updateSlides + ".thumb", function () {
|
||||
_this.rebuildThumbnails();
|
||||
});
|
||||
this.core.LGel.on(lGEvents.containerResize + ".thumb", function () {
|
||||
if (!_this.core.lgOpened)
|
||||
return;
|
||||
setTimeout(function () {
|
||||
_this.thumbOuterWidth = _this.core.outer.get().offsetWidth;
|
||||
_this.animateThumb(_this.core.index);
|
||||
_this.thumbOuterWidth = _this.core.outer.get().offsetWidth;
|
||||
}, 50);
|
||||
});
|
||||
};
|
||||
Thumbnail.prototype.setThumbMarkup = function () {
|
||||
var thumbOuterClassNames = 'lg-thumb-outer ';
|
||||
if (this.settings.alignThumbnails) {
|
||||
thumbOuterClassNames += "lg-thumb-align-" + this.settings.alignThumbnails;
|
||||
}
|
||||
var html = "<div class=\"" + thumbOuterClassNames + "\">\n <div class=\"lg-thumb lg-group\">\n </div>\n </div>";
|
||||
this.core.outer.addClass('lg-has-thumb');
|
||||
if (this.settings.appendThumbnailsTo === '.lg-components') {
|
||||
this.core.$lgComponents.append(html);
|
||||
}
|
||||
else {
|
||||
this.core.outer.append(html);
|
||||
}
|
||||
this.$thumbOuter = this.core.outer.find('.lg-thumb-outer').first();
|
||||
this.$lgThumb = this.core.outer.find('.lg-thumb').first();
|
||||
if (this.settings.animateThumb) {
|
||||
this.core.outer
|
||||
.find('.lg-thumb')
|
||||
.css('transition-duration', this.core.settings.speed + 'ms')
|
||||
.css('width', this.thumbTotalWidth + 'px')
|
||||
.css('position', 'relative');
|
||||
}
|
||||
this.setThumbItemHtml(this.core.galleryItems);
|
||||
};
|
||||
Thumbnail.prototype.enableThumbDrag = function () {
|
||||
var _this = this;
|
||||
var thumbDragUtils = {
|
||||
cords: {
|
||||
startX: 0,
|
||||
endX: 0,
|
||||
},
|
||||
isMoved: false,
|
||||
newTranslateX: 0,
|
||||
startTime: new Date(),
|
||||
endTime: new Date(),
|
||||
touchMoveTime: 0,
|
||||
};
|
||||
var isDragging = false;
|
||||
this.$thumbOuter.addClass('lg-grab');
|
||||
this.core.outer
|
||||
.find('.lg-thumb')
|
||||
.first()
|
||||
.on('mousedown.lg.thumb', function (e) {
|
||||
if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
|
||||
// execute only on .lg-object
|
||||
e.preventDefault();
|
||||
thumbDragUtils.cords.startX = e.pageX;
|
||||
thumbDragUtils.startTime = new Date();
|
||||
_this.thumbClickable = false;
|
||||
isDragging = true;
|
||||
// ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
|
||||
_this.core.outer.get().scrollLeft += 1;
|
||||
_this.core.outer.get().scrollLeft -= 1;
|
||||
// *
|
||||
_this.$thumbOuter
|
||||
.removeClass('lg-grab')
|
||||
.addClass('lg-grabbing');
|
||||
}
|
||||
});
|
||||
this.$LG(window).on("mousemove.lg.thumb.global" + this.core.lgId, function (e) {
|
||||
if (!_this.core.lgOpened)
|
||||
return;
|
||||
if (isDragging) {
|
||||
thumbDragUtils.cords.endX = e.pageX;
|
||||
thumbDragUtils = _this.onThumbTouchMove(thumbDragUtils);
|
||||
}
|
||||
});
|
||||
this.$LG(window).on("mouseup.lg.thumb.global" + this.core.lgId, function () {
|
||||
if (!_this.core.lgOpened)
|
||||
return;
|
||||
if (thumbDragUtils.isMoved) {
|
||||
thumbDragUtils = _this.onThumbTouchEnd(thumbDragUtils);
|
||||
}
|
||||
else {
|
||||
_this.thumbClickable = true;
|
||||
}
|
||||
if (isDragging) {
|
||||
isDragging = false;
|
||||
_this.$thumbOuter.removeClass('lg-grabbing').addClass('lg-grab');
|
||||
}
|
||||
});
|
||||
};
|
||||
Thumbnail.prototype.enableThumbSwipe = function () {
|
||||
var _this = this;
|
||||
var thumbDragUtils = {
|
||||
cords: {
|
||||
startX: 0,
|
||||
endX: 0,
|
||||
},
|
||||
isMoved: false,
|
||||
newTranslateX: 0,
|
||||
startTime: new Date(),
|
||||
endTime: new Date(),
|
||||
touchMoveTime: 0,
|
||||
};
|
||||
this.$lgThumb.on('touchstart.lg', function (e) {
|
||||
if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
|
||||
e.preventDefault();
|
||||
thumbDragUtils.cords.startX = e.targetTouches[0].pageX;
|
||||
_this.thumbClickable = false;
|
||||
thumbDragUtils.startTime = new Date();
|
||||
}
|
||||
});
|
||||
this.$lgThumb.on('touchmove.lg', function (e) {
|
||||
if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
|
||||
e.preventDefault();
|
||||
thumbDragUtils.cords.endX = e.targetTouches[0].pageX;
|
||||
thumbDragUtils = _this.onThumbTouchMove(thumbDragUtils);
|
||||
}
|
||||
});
|
||||
this.$lgThumb.on('touchend.lg', function () {
|
||||
if (thumbDragUtils.isMoved) {
|
||||
thumbDragUtils = _this.onThumbTouchEnd(thumbDragUtils);
|
||||
}
|
||||
else {
|
||||
_this.thumbClickable = true;
|
||||
}
|
||||
});
|
||||
};
|
||||
// Rebuild thumbnails
|
||||
Thumbnail.prototype.rebuildThumbnails = function () {
|
||||
var _this = this;
|
||||
// Remove transitions
|
||||
this.$thumbOuter.addClass('lg-rebuilding-thumbnails');
|
||||
setTimeout(function () {
|
||||
_this.thumbTotalWidth =
|
||||
_this.core.galleryItems.length *
|
||||
(_this.settings.thumbWidth + _this.settings.thumbMargin);
|
||||
_this.$lgThumb.css('width', _this.thumbTotalWidth + 'px');
|
||||
_this.$lgThumb.empty();
|
||||
_this.setThumbItemHtml(_this.core.galleryItems);
|
||||
_this.animateThumb(_this.core.index);
|
||||
}, 50);
|
||||
setTimeout(function () {
|
||||
_this.$thumbOuter.removeClass('lg-rebuilding-thumbnails');
|
||||
}, 200);
|
||||
};
|
||||
// @ts-check
|
||||
Thumbnail.prototype.setTranslate = function (value) {
|
||||
this.$lgThumb.css('transform', 'translate3d(-' + value + 'px, 0px, 0px)');
|
||||
};
|
||||
Thumbnail.prototype.getPossibleTransformX = function (left) {
|
||||
if (left > this.thumbTotalWidth - this.thumbOuterWidth) {
|
||||
left = this.thumbTotalWidth - this.thumbOuterWidth;
|
||||
}
|
||||
if (left < 0) {
|
||||
left = 0;
|
||||
}
|
||||
return left;
|
||||
};
|
||||
Thumbnail.prototype.animateThumb = function (index) {
|
||||
this.$lgThumb.css('transition-duration', this.core.settings.speed + 'ms');
|
||||
if (this.settings.animateThumb) {
|
||||
var position = 0;
|
||||
switch (this.settings.currentPagerPosition) {
|
||||
case 'left':
|
||||
position = 0;
|
||||
break;
|
||||
case 'middle':
|
||||
position =
|
||||
this.thumbOuterWidth / 2 - this.settings.thumbWidth / 2;
|
||||
break;
|
||||
case 'right':
|
||||
position = this.thumbOuterWidth - this.settings.thumbWidth;
|
||||
}
|
||||
this.translateX =
|
||||
(this.settings.thumbWidth + this.settings.thumbMargin) * index -
|
||||
1 -
|
||||
position;
|
||||
if (this.translateX > this.thumbTotalWidth - this.thumbOuterWidth) {
|
||||
this.translateX = this.thumbTotalWidth - this.thumbOuterWidth;
|
||||
}
|
||||
if (this.translateX < 0) {
|
||||
this.translateX = 0;
|
||||
}
|
||||
this.setTranslate(this.translateX);
|
||||
}
|
||||
};
|
||||
Thumbnail.prototype.onThumbTouchMove = function (thumbDragUtils) {
|
||||
thumbDragUtils.newTranslateX = this.translateX;
|
||||
thumbDragUtils.isMoved = true;
|
||||
thumbDragUtils.touchMoveTime = new Date().valueOf();
|
||||
thumbDragUtils.newTranslateX -=
|
||||
thumbDragUtils.cords.endX - thumbDragUtils.cords.startX;
|
||||
thumbDragUtils.newTranslateX = this.getPossibleTransformX(thumbDragUtils.newTranslateX);
|
||||
// move current slide
|
||||
this.setTranslate(thumbDragUtils.newTranslateX);
|
||||
this.$thumbOuter.addClass('lg-dragging');
|
||||
return thumbDragUtils;
|
||||
};
|
||||
Thumbnail.prototype.onThumbTouchEnd = function (thumbDragUtils) {
|
||||
thumbDragUtils.isMoved = false;
|
||||
thumbDragUtils.endTime = new Date();
|
||||
this.$thumbOuter.removeClass('lg-dragging');
|
||||
var touchDuration = thumbDragUtils.endTime.valueOf() -
|
||||
thumbDragUtils.startTime.valueOf();
|
||||
var distanceXnew = thumbDragUtils.cords.endX - thumbDragUtils.cords.startX;
|
||||
var speedX = Math.abs(distanceXnew) / touchDuration;
|
||||
// Some magical numbers
|
||||
// Can be improved
|
||||
if (speedX > 0.15 &&
|
||||
thumbDragUtils.endTime.valueOf() - thumbDragUtils.touchMoveTime < 30) {
|
||||
speedX += 1;
|
||||
if (speedX > 2) {
|
||||
speedX += 1;
|
||||
}
|
||||
speedX =
|
||||
speedX +
|
||||
speedX * (Math.abs(distanceXnew) / this.thumbOuterWidth);
|
||||
this.$lgThumb.css('transition-duration', Math.min(speedX - 1, 2) + 'settings');
|
||||
distanceXnew = distanceXnew * speedX;
|
||||
this.translateX = this.getPossibleTransformX(this.translateX - distanceXnew);
|
||||
this.setTranslate(this.translateX);
|
||||
}
|
||||
else {
|
||||
this.translateX = thumbDragUtils.newTranslateX;
|
||||
}
|
||||
if (Math.abs(thumbDragUtils.cords.endX - thumbDragUtils.cords.startX) <
|
||||
this.settings.thumbnailSwipeThreshold) {
|
||||
this.thumbClickable = true;
|
||||
}
|
||||
return thumbDragUtils;
|
||||
};
|
||||
Thumbnail.prototype.getThumbHtml = function (thumb, index, alt) {
|
||||
var slideVideoInfo = this.core.galleryItems[index].__slideVideoInfo || {};
|
||||
var thumbImg;
|
||||
if (slideVideoInfo.youtube) {
|
||||
if (this.settings.loadYouTubeThumbnail) {
|
||||
thumbImg =
|
||||
'//img.youtube.com/vi/' +
|
||||
slideVideoInfo.youtube[1] +
|
||||
'/' +
|
||||
this.settings.youTubeThumbSize +
|
||||
'.jpg';
|
||||
}
|
||||
else {
|
||||
thumbImg = thumb;
|
||||
}
|
||||
}
|
||||
else {
|
||||
thumbImg = thumb;
|
||||
}
|
||||
var div = document.createElement('div');
|
||||
div.setAttribute('data-lg-item-id', index + '');
|
||||
div.className = "lg-thumb-item " + (index === this.core.index ? 'active' : '');
|
||||
div.style.cssText = "width: " + this.settings.thumbWidth + "px; height: " + this.settings.thumbHeight + "; margin-right: " + this.settings.thumbMargin + "px;";
|
||||
var img = document.createElement('img');
|
||||
img.alt = alt || '';
|
||||
img.setAttribute('data-lg-item-id', index + '');
|
||||
img.src = thumbImg;
|
||||
div.appendChild(img);
|
||||
return div;
|
||||
};
|
||||
Thumbnail.prototype.setThumbItemHtml = function (items) {
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
var thumb = this.getThumbHtml(items[i].thumb, i, items[i].alt);
|
||||
this.$lgThumb.append(thumb);
|
||||
}
|
||||
};
|
||||
Thumbnail.prototype.setAnimateThumbStyles = function () {
|
||||
if (this.settings.animateThumb) {
|
||||
this.core.outer.addClass('lg-animate-thumb');
|
||||
}
|
||||
};
|
||||
// Manage thumbnail active calss
|
||||
Thumbnail.prototype.manageActiveClassOnSlideChange = function () {
|
||||
var _this = this;
|
||||
// manage active class for thumbnail
|
||||
this.core.LGel.on(lGEvents.beforeSlide + ".thumb", function (event) {
|
||||
var $thumb = _this.core.outer.find('.lg-thumb-item');
|
||||
var index = event.detail.index;
|
||||
$thumb.removeClass('active');
|
||||
$thumb.eq(index).addClass('active');
|
||||
});
|
||||
};
|
||||
// Toggle thumbnail bar
|
||||
Thumbnail.prototype.toggleThumbBar = function () {
|
||||
var _this = this;
|
||||
if (this.settings.toggleThumb) {
|
||||
this.core.outer.addClass('lg-can-toggle');
|
||||
this.core.$toolbar.append('<button type="button" aria-label="' +
|
||||
this.settings.thumbnailPluginStrings['toggleThumbnails'] +
|
||||
'" class="lg-toggle-thumb lg-icon"></button>');
|
||||
this.core.outer
|
||||
.find('.lg-toggle-thumb')
|
||||
.first()
|
||||
.on('click.lg', function () {
|
||||
_this.core.outer.toggleClass('lg-components-open');
|
||||
});
|
||||
}
|
||||
};
|
||||
Thumbnail.prototype.thumbKeyPress = function () {
|
||||
var _this = this;
|
||||
this.$LG(window).on("keydown.lg.thumb.global" + this.core.lgId, function (e) {
|
||||
if (!_this.core.lgOpened || !_this.settings.toggleThumb)
|
||||
return;
|
||||
if (e.keyCode === 38) {
|
||||
e.preventDefault();
|
||||
_this.core.outer.addClass('lg-components-open');
|
||||
}
|
||||
else if (e.keyCode === 40) {
|
||||
e.preventDefault();
|
||||
_this.core.outer.removeClass('lg-components-open');
|
||||
}
|
||||
});
|
||||
};
|
||||
Thumbnail.prototype.destroy = function () {
|
||||
if (this.settings.thumbnail) {
|
||||
this.$LG(window).off(".lg.thumb.global" + this.core.lgId);
|
||||
this.core.LGel.off('.lg.thumb');
|
||||
this.core.LGel.off('.thumb');
|
||||
this.$thumbOuter.remove();
|
||||
this.core.outer.removeClass('lg-has-thumb');
|
||||
}
|
||||
};
|
||||
return Thumbnail;
|
||||
}());
|
||||
|
||||
export default Thumbnail;
|
||||
//# sourceMappingURL=lg-thumbnail.es5.js.map
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,495 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgThumbnail = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
var thumbnailsSettings = {
|
||||
thumbnail: true,
|
||||
animateThumb: true,
|
||||
currentPagerPosition: 'middle',
|
||||
alignThumbnails: 'middle',
|
||||
thumbWidth: 100,
|
||||
thumbHeight: '80px',
|
||||
thumbMargin: 5,
|
||||
appendThumbnailsTo: '.lg-components',
|
||||
toggleThumb: false,
|
||||
enableThumbDrag: true,
|
||||
enableThumbSwipe: true,
|
||||
thumbnailSwipeThreshold: 10,
|
||||
loadYouTubeThumbnail: true,
|
||||
youTubeThumbSize: 1,
|
||||
thumbnailPluginStrings: {
|
||||
toggleThumbnails: 'Toggle thumbnails',
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var Thumbnail = /** @class */ (function () {
|
||||
function Thumbnail(instance, $LG) {
|
||||
this.thumbOuterWidth = 0;
|
||||
this.thumbTotalWidth = 0;
|
||||
this.translateX = 0;
|
||||
this.thumbClickable = false;
|
||||
// get lightGallery core plugin instance
|
||||
this.core = instance;
|
||||
this.$LG = $LG;
|
||||
return this;
|
||||
}
|
||||
Thumbnail.prototype.init = function () {
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign({}, thumbnailsSettings), this.core.settings);
|
||||
this.thumbOuterWidth = 0;
|
||||
this.thumbTotalWidth =
|
||||
this.core.galleryItems.length *
|
||||
(this.settings.thumbWidth + this.settings.thumbMargin);
|
||||
// Thumbnail animation value
|
||||
this.translateX = 0;
|
||||
this.setAnimateThumbStyles();
|
||||
if (!this.core.settings.allowMediaOverlap) {
|
||||
this.settings.toggleThumb = false;
|
||||
}
|
||||
if (this.settings.thumbnail) {
|
||||
this.build();
|
||||
if (this.settings.animateThumb) {
|
||||
if (this.settings.enableThumbDrag) {
|
||||
this.enableThumbDrag();
|
||||
}
|
||||
if (this.settings.enableThumbSwipe) {
|
||||
this.enableThumbSwipe();
|
||||
}
|
||||
this.thumbClickable = false;
|
||||
}
|
||||
else {
|
||||
this.thumbClickable = true;
|
||||
}
|
||||
this.toggleThumbBar();
|
||||
this.thumbKeyPress();
|
||||
}
|
||||
};
|
||||
Thumbnail.prototype.build = function () {
|
||||
var _this = this;
|
||||
this.setThumbMarkup();
|
||||
this.manageActiveClassOnSlideChange();
|
||||
this.$lgThumb.first().on('click.lg touchend.lg', function (e) {
|
||||
var $target = _this.$LG(e.target);
|
||||
if (!$target.hasAttribute('data-lg-item-id')) {
|
||||
return;
|
||||
}
|
||||
setTimeout(function () {
|
||||
// In IE9 and bellow touch does not support
|
||||
// Go to slide if browser does not support css transitions
|
||||
if (_this.thumbClickable && !_this.core.lgBusy) {
|
||||
var index = parseInt($target.attr('data-lg-item-id'));
|
||||
_this.core.slide(index, false, true, false);
|
||||
}
|
||||
}, 50);
|
||||
});
|
||||
this.core.LGel.on(lGEvents.beforeSlide + ".thumb", function (event) {
|
||||
var index = event.detail.index;
|
||||
_this.animateThumb(index);
|
||||
});
|
||||
this.core.LGel.on(lGEvents.beforeOpen + ".thumb", function () {
|
||||
_this.thumbOuterWidth = _this.core.outer.get().offsetWidth;
|
||||
});
|
||||
this.core.LGel.on(lGEvents.updateSlides + ".thumb", function () {
|
||||
_this.rebuildThumbnails();
|
||||
});
|
||||
this.core.LGel.on(lGEvents.containerResize + ".thumb", function () {
|
||||
if (!_this.core.lgOpened)
|
||||
return;
|
||||
setTimeout(function () {
|
||||
_this.thumbOuterWidth = _this.core.outer.get().offsetWidth;
|
||||
_this.animateThumb(_this.core.index);
|
||||
_this.thumbOuterWidth = _this.core.outer.get().offsetWidth;
|
||||
}, 50);
|
||||
});
|
||||
};
|
||||
Thumbnail.prototype.setThumbMarkup = function () {
|
||||
var thumbOuterClassNames = 'lg-thumb-outer ';
|
||||
if (this.settings.alignThumbnails) {
|
||||
thumbOuterClassNames += "lg-thumb-align-" + this.settings.alignThumbnails;
|
||||
}
|
||||
var html = "<div class=\"" + thumbOuterClassNames + "\">\n <div class=\"lg-thumb lg-group\">\n </div>\n </div>";
|
||||
this.core.outer.addClass('lg-has-thumb');
|
||||
if (this.settings.appendThumbnailsTo === '.lg-components') {
|
||||
this.core.$lgComponents.append(html);
|
||||
}
|
||||
else {
|
||||
this.core.outer.append(html);
|
||||
}
|
||||
this.$thumbOuter = this.core.outer.find('.lg-thumb-outer').first();
|
||||
this.$lgThumb = this.core.outer.find('.lg-thumb').first();
|
||||
if (this.settings.animateThumb) {
|
||||
this.core.outer
|
||||
.find('.lg-thumb')
|
||||
.css('transition-duration', this.core.settings.speed + 'ms')
|
||||
.css('width', this.thumbTotalWidth + 'px')
|
||||
.css('position', 'relative');
|
||||
}
|
||||
this.setThumbItemHtml(this.core.galleryItems);
|
||||
};
|
||||
Thumbnail.prototype.enableThumbDrag = function () {
|
||||
var _this = this;
|
||||
var thumbDragUtils = {
|
||||
cords: {
|
||||
startX: 0,
|
||||
endX: 0,
|
||||
},
|
||||
isMoved: false,
|
||||
newTranslateX: 0,
|
||||
startTime: new Date(),
|
||||
endTime: new Date(),
|
||||
touchMoveTime: 0,
|
||||
};
|
||||
var isDragging = false;
|
||||
this.$thumbOuter.addClass('lg-grab');
|
||||
this.core.outer
|
||||
.find('.lg-thumb')
|
||||
.first()
|
||||
.on('mousedown.lg.thumb', function (e) {
|
||||
if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
|
||||
// execute only on .lg-object
|
||||
e.preventDefault();
|
||||
thumbDragUtils.cords.startX = e.pageX;
|
||||
thumbDragUtils.startTime = new Date();
|
||||
_this.thumbClickable = false;
|
||||
isDragging = true;
|
||||
// ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
|
||||
_this.core.outer.get().scrollLeft += 1;
|
||||
_this.core.outer.get().scrollLeft -= 1;
|
||||
// *
|
||||
_this.$thumbOuter
|
||||
.removeClass('lg-grab')
|
||||
.addClass('lg-grabbing');
|
||||
}
|
||||
});
|
||||
this.$LG(window).on("mousemove.lg.thumb.global" + this.core.lgId, function (e) {
|
||||
if (!_this.core.lgOpened)
|
||||
return;
|
||||
if (isDragging) {
|
||||
thumbDragUtils.cords.endX = e.pageX;
|
||||
thumbDragUtils = _this.onThumbTouchMove(thumbDragUtils);
|
||||
}
|
||||
});
|
||||
this.$LG(window).on("mouseup.lg.thumb.global" + this.core.lgId, function () {
|
||||
if (!_this.core.lgOpened)
|
||||
return;
|
||||
if (thumbDragUtils.isMoved) {
|
||||
thumbDragUtils = _this.onThumbTouchEnd(thumbDragUtils);
|
||||
}
|
||||
else {
|
||||
_this.thumbClickable = true;
|
||||
}
|
||||
if (isDragging) {
|
||||
isDragging = false;
|
||||
_this.$thumbOuter.removeClass('lg-grabbing').addClass('lg-grab');
|
||||
}
|
||||
});
|
||||
};
|
||||
Thumbnail.prototype.enableThumbSwipe = function () {
|
||||
var _this = this;
|
||||
var thumbDragUtils = {
|
||||
cords: {
|
||||
startX: 0,
|
||||
endX: 0,
|
||||
},
|
||||
isMoved: false,
|
||||
newTranslateX: 0,
|
||||
startTime: new Date(),
|
||||
endTime: new Date(),
|
||||
touchMoveTime: 0,
|
||||
};
|
||||
this.$lgThumb.on('touchstart.lg', function (e) {
|
||||
if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
|
||||
e.preventDefault();
|
||||
thumbDragUtils.cords.startX = e.targetTouches[0].pageX;
|
||||
_this.thumbClickable = false;
|
||||
thumbDragUtils.startTime = new Date();
|
||||
}
|
||||
});
|
||||
this.$lgThumb.on('touchmove.lg', function (e) {
|
||||
if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
|
||||
e.preventDefault();
|
||||
thumbDragUtils.cords.endX = e.targetTouches[0].pageX;
|
||||
thumbDragUtils = _this.onThumbTouchMove(thumbDragUtils);
|
||||
}
|
||||
});
|
||||
this.$lgThumb.on('touchend.lg', function () {
|
||||
if (thumbDragUtils.isMoved) {
|
||||
thumbDragUtils = _this.onThumbTouchEnd(thumbDragUtils);
|
||||
}
|
||||
else {
|
||||
_this.thumbClickable = true;
|
||||
}
|
||||
});
|
||||
};
|
||||
// Rebuild thumbnails
|
||||
Thumbnail.prototype.rebuildThumbnails = function () {
|
||||
var _this = this;
|
||||
// Remove transitions
|
||||
this.$thumbOuter.addClass('lg-rebuilding-thumbnails');
|
||||
setTimeout(function () {
|
||||
_this.thumbTotalWidth =
|
||||
_this.core.galleryItems.length *
|
||||
(_this.settings.thumbWidth + _this.settings.thumbMargin);
|
||||
_this.$lgThumb.css('width', _this.thumbTotalWidth + 'px');
|
||||
_this.$lgThumb.empty();
|
||||
_this.setThumbItemHtml(_this.core.galleryItems);
|
||||
_this.animateThumb(_this.core.index);
|
||||
}, 50);
|
||||
setTimeout(function () {
|
||||
_this.$thumbOuter.removeClass('lg-rebuilding-thumbnails');
|
||||
}, 200);
|
||||
};
|
||||
// @ts-check
|
||||
Thumbnail.prototype.setTranslate = function (value) {
|
||||
this.$lgThumb.css('transform', 'translate3d(-' + value + 'px, 0px, 0px)');
|
||||
};
|
||||
Thumbnail.prototype.getPossibleTransformX = function (left) {
|
||||
if (left > this.thumbTotalWidth - this.thumbOuterWidth) {
|
||||
left = this.thumbTotalWidth - this.thumbOuterWidth;
|
||||
}
|
||||
if (left < 0) {
|
||||
left = 0;
|
||||
}
|
||||
return left;
|
||||
};
|
||||
Thumbnail.prototype.animateThumb = function (index) {
|
||||
this.$lgThumb.css('transition-duration', this.core.settings.speed + 'ms');
|
||||
if (this.settings.animateThumb) {
|
||||
var position = 0;
|
||||
switch (this.settings.currentPagerPosition) {
|
||||
case 'left':
|
||||
position = 0;
|
||||
break;
|
||||
case 'middle':
|
||||
position =
|
||||
this.thumbOuterWidth / 2 - this.settings.thumbWidth / 2;
|
||||
break;
|
||||
case 'right':
|
||||
position = this.thumbOuterWidth - this.settings.thumbWidth;
|
||||
}
|
||||
this.translateX =
|
||||
(this.settings.thumbWidth + this.settings.thumbMargin) * index -
|
||||
1 -
|
||||
position;
|
||||
if (this.translateX > this.thumbTotalWidth - this.thumbOuterWidth) {
|
||||
this.translateX = this.thumbTotalWidth - this.thumbOuterWidth;
|
||||
}
|
||||
if (this.translateX < 0) {
|
||||
this.translateX = 0;
|
||||
}
|
||||
this.setTranslate(this.translateX);
|
||||
}
|
||||
};
|
||||
Thumbnail.prototype.onThumbTouchMove = function (thumbDragUtils) {
|
||||
thumbDragUtils.newTranslateX = this.translateX;
|
||||
thumbDragUtils.isMoved = true;
|
||||
thumbDragUtils.touchMoveTime = new Date().valueOf();
|
||||
thumbDragUtils.newTranslateX -=
|
||||
thumbDragUtils.cords.endX - thumbDragUtils.cords.startX;
|
||||
thumbDragUtils.newTranslateX = this.getPossibleTransformX(thumbDragUtils.newTranslateX);
|
||||
// move current slide
|
||||
this.setTranslate(thumbDragUtils.newTranslateX);
|
||||
this.$thumbOuter.addClass('lg-dragging');
|
||||
return thumbDragUtils;
|
||||
};
|
||||
Thumbnail.prototype.onThumbTouchEnd = function (thumbDragUtils) {
|
||||
thumbDragUtils.isMoved = false;
|
||||
thumbDragUtils.endTime = new Date();
|
||||
this.$thumbOuter.removeClass('lg-dragging');
|
||||
var touchDuration = thumbDragUtils.endTime.valueOf() -
|
||||
thumbDragUtils.startTime.valueOf();
|
||||
var distanceXnew = thumbDragUtils.cords.endX - thumbDragUtils.cords.startX;
|
||||
var speedX = Math.abs(distanceXnew) / touchDuration;
|
||||
// Some magical numbers
|
||||
// Can be improved
|
||||
if (speedX > 0.15 &&
|
||||
thumbDragUtils.endTime.valueOf() - thumbDragUtils.touchMoveTime < 30) {
|
||||
speedX += 1;
|
||||
if (speedX > 2) {
|
||||
speedX += 1;
|
||||
}
|
||||
speedX =
|
||||
speedX +
|
||||
speedX * (Math.abs(distanceXnew) / this.thumbOuterWidth);
|
||||
this.$lgThumb.css('transition-duration', Math.min(speedX - 1, 2) + 'settings');
|
||||
distanceXnew = distanceXnew * speedX;
|
||||
this.translateX = this.getPossibleTransformX(this.translateX - distanceXnew);
|
||||
this.setTranslate(this.translateX);
|
||||
}
|
||||
else {
|
||||
this.translateX = thumbDragUtils.newTranslateX;
|
||||
}
|
||||
if (Math.abs(thumbDragUtils.cords.endX - thumbDragUtils.cords.startX) <
|
||||
this.settings.thumbnailSwipeThreshold) {
|
||||
this.thumbClickable = true;
|
||||
}
|
||||
return thumbDragUtils;
|
||||
};
|
||||
Thumbnail.prototype.getThumbHtml = function (thumb, index, alt) {
|
||||
var slideVideoInfo = this.core.galleryItems[index].__slideVideoInfo || {};
|
||||
var thumbImg;
|
||||
if (slideVideoInfo.youtube) {
|
||||
if (this.settings.loadYouTubeThumbnail) {
|
||||
thumbImg =
|
||||
'//img.youtube.com/vi/' +
|
||||
slideVideoInfo.youtube[1] +
|
||||
'/' +
|
||||
this.settings.youTubeThumbSize +
|
||||
'.jpg';
|
||||
}
|
||||
else {
|
||||
thumbImg = thumb;
|
||||
}
|
||||
}
|
||||
else {
|
||||
thumbImg = thumb;
|
||||
}
|
||||
var div = document.createElement('div');
|
||||
div.setAttribute('data-lg-item-id', index + '');
|
||||
div.className = "lg-thumb-item " + (index === this.core.index ? 'active' : '');
|
||||
div.style.cssText = "width: " + this.settings.thumbWidth + "px; height: " + this.settings.thumbHeight + "; margin-right: " + this.settings.thumbMargin + "px;";
|
||||
var img = document.createElement('img');
|
||||
img.alt = alt || '';
|
||||
img.setAttribute('data-lg-item-id', index + '');
|
||||
img.src = thumbImg;
|
||||
div.appendChild(img);
|
||||
return div;
|
||||
};
|
||||
Thumbnail.prototype.setThumbItemHtml = function (items) {
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
var thumb = this.getThumbHtml(items[i].thumb, i, items[i].alt);
|
||||
this.$lgThumb.append(thumb);
|
||||
}
|
||||
};
|
||||
Thumbnail.prototype.setAnimateThumbStyles = function () {
|
||||
if (this.settings.animateThumb) {
|
||||
this.core.outer.addClass('lg-animate-thumb');
|
||||
}
|
||||
};
|
||||
// Manage thumbnail active calss
|
||||
Thumbnail.prototype.manageActiveClassOnSlideChange = function () {
|
||||
var _this = this;
|
||||
// manage active class for thumbnail
|
||||
this.core.LGel.on(lGEvents.beforeSlide + ".thumb", function (event) {
|
||||
var $thumb = _this.core.outer.find('.lg-thumb-item');
|
||||
var index = event.detail.index;
|
||||
$thumb.removeClass('active');
|
||||
$thumb.eq(index).addClass('active');
|
||||
});
|
||||
};
|
||||
// Toggle thumbnail bar
|
||||
Thumbnail.prototype.toggleThumbBar = function () {
|
||||
var _this = this;
|
||||
if (this.settings.toggleThumb) {
|
||||
this.core.outer.addClass('lg-can-toggle');
|
||||
this.core.$toolbar.append('<button type="button" aria-label="' +
|
||||
this.settings.thumbnailPluginStrings['toggleThumbnails'] +
|
||||
'" class="lg-toggle-thumb lg-icon"></button>');
|
||||
this.core.outer
|
||||
.find('.lg-toggle-thumb')
|
||||
.first()
|
||||
.on('click.lg', function () {
|
||||
_this.core.outer.toggleClass('lg-components-open');
|
||||
});
|
||||
}
|
||||
};
|
||||
Thumbnail.prototype.thumbKeyPress = function () {
|
||||
var _this = this;
|
||||
this.$LG(window).on("keydown.lg.thumb.global" + this.core.lgId, function (e) {
|
||||
if (!_this.core.lgOpened || !_this.settings.toggleThumb)
|
||||
return;
|
||||
if (e.keyCode === 38) {
|
||||
e.preventDefault();
|
||||
_this.core.outer.addClass('lg-components-open');
|
||||
}
|
||||
else if (e.keyCode === 40) {
|
||||
e.preventDefault();
|
||||
_this.core.outer.removeClass('lg-components-open');
|
||||
}
|
||||
});
|
||||
};
|
||||
Thumbnail.prototype.destroy = function () {
|
||||
if (this.settings.thumbnail) {
|
||||
this.$LG(window).off(".lg.thumb.global" + this.core.lgId);
|
||||
this.core.LGel.off('.lg.thumb');
|
||||
this.core.LGel.off('.thumb');
|
||||
this.$thumbOuter.remove();
|
||||
this.core.outer.removeClass('lg-has-thumb');
|
||||
}
|
||||
};
|
||||
return Thumbnail;
|
||||
}());
|
||||
|
||||
return Thumbnail;
|
||||
|
||||
})));
|
||||
//# sourceMappingURL=lg-thumbnail.umd.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"name": "lightgallery/plugins/thumbnail",
|
||||
"private": true,
|
||||
"main": "lg-thumbnail.umd.js",
|
||||
"module": "lg-thumbnail.es5.js",
|
||||
"typings": "lg-thumbnail.d.ts"
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import { PlayerParams } from './lg-video-utils';
|
||||
export interface VideoSettings {
|
||||
/**
|
||||
* Enable/DIsable first video autoplay.
|
||||
* @description Autoplay has to be managed using this setting.
|
||||
* Autoplay in PlayerParams doesn't have any effect.
|
||||
*/
|
||||
autoplayFirstVideo: boolean;
|
||||
/**
|
||||
* Change YouTube player parameters.
|
||||
* You can find the list of YouTube player parameters from the following link
|
||||
* <a href="https://developers.google.com/youtube/player_parameters">YouTube player parameters</a>
|
||||
* @example
|
||||
* lightGallery(document.getElementById('lightGallery'), {
|
||||
* youTubePlayerParams: {
|
||||
* modestbranding : 1,
|
||||
* showinfo : 0,
|
||||
* controls : 0
|
||||
* }
|
||||
* })
|
||||
*/
|
||||
youTubePlayerParams: any;
|
||||
/**
|
||||
* Change Vimeo player parameters.
|
||||
* You can find the list of vimeo player parameters from the following link
|
||||
* <a href="https://developer.vimeo.com/player/embedding#universal-parameters">Vimeo player parameters</a>
|
||||
* @example
|
||||
* lightGallery(document.getElementById('lightGallery'), {
|
||||
* vimeoPlayerParams: {
|
||||
* byline : 0,
|
||||
* portrait : 0,
|
||||
* color : 'CCCCCC'
|
||||
* }
|
||||
* })
|
||||
*/
|
||||
vimeoPlayerParams: PlayerParams;
|
||||
/**
|
||||
* Change Wistia player parameters.
|
||||
* You can find the list of Wistia player parameters from the following link
|
||||
* <a href="https://wistia.com/support/developers/embed-options#using-embed-options">Vimeo player parameters</a>
|
||||
*/
|
||||
wistiaPlayerParams: any;
|
||||
/**
|
||||
* Go to next slide when video is ended
|
||||
* Note - this doesn't work with YouTube videos at the moment
|
||||
*/
|
||||
gotoNextSlideOnVideoEnd: boolean;
|
||||
/**
|
||||
* Autoplay video on slide change
|
||||
* @description Make sure you set preload:"none"
|
||||
*/
|
||||
autoplayVideoOnSlide: boolean;
|
||||
/**
|
||||
* Enbale videojs custom video player
|
||||
* <div class="alert alert-info" role="alert">
|
||||
* <b>Dependency</b> - You need to include <a href="https://videojs.com/">videoJs</a> on your document to enable videojs player
|
||||
* </div>
|
||||
*/
|
||||
videojs: boolean;
|
||||
/**
|
||||
* Class name of the videojs theme
|
||||
* You need to include the theme stylesheet on your document. <a href="https://videojs.com/getting-started/#home-page-themes" target="_blank">More info</a>
|
||||
* @version V2.5.0
|
||||
*/
|
||||
videojsTheme: string;
|
||||
/**
|
||||
* Videojs player options
|
||||
*/
|
||||
videojsOptions: any;
|
||||
}
|
||||
export declare const videoSettings: VideoSettings;
|
||||
@@ -0,0 +1,10 @@
|
||||
import { VideoInfo } from '../../types';
|
||||
export declare type PlayerParams = Record<string, string | number | boolean> | boolean;
|
||||
export declare type YouTubeParams = {
|
||||
[x: string]: string | number | boolean;
|
||||
};
|
||||
export declare const param: (obj: YouTubeParams) => string;
|
||||
export declare const paramsToObject: (url: string) => YouTubeParams;
|
||||
export declare const getYouTubeParams: (videoInfo: VideoInfo, youTubePlayerParamsSettings: YouTubeParams | false) => string;
|
||||
export declare const isYouTubeNoCookie: (url: string) => boolean;
|
||||
export declare const getVimeoURLParams: (defaultParams: PlayerParams, videoInfo?: VideoInfo | undefined) => string;
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
/**
|
||||
* Video module for lightGallery
|
||||
* Supports HTML5, YouTube, Vimeo, wistia videos
|
||||
*
|
||||
*
|
||||
* @ref Wistia
|
||||
* https://wistia.com/support/integrations/wordpress(How to get url)
|
||||
* https://wistia.com/support/developers/embed-options#using-embed-options
|
||||
* https://wistia.com/support/developers/player-api
|
||||
* https://wistia.com/support/developers/construct-an-embed-code
|
||||
* http://jsfiddle.net/xvnm7xLm/
|
||||
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
|
||||
* https://wistia.com/support/embed-and-share/sharing-videos
|
||||
* https://private-sharing.wistia.com/medias/mwhrulrucj
|
||||
*
|
||||
* @ref Youtube
|
||||
* https://developers.google.com/youtube/player_parameters#enablejsapi
|
||||
* https://developers.google.com/youtube/iframe_api_reference
|
||||
* https://developer.chrome.com/blog/autoplay/#iframe-delegation
|
||||
*
|
||||
* @ref Vimeo
|
||||
* https://stackoverflow.com/questions/10488943/easy-way-to-get-vimeo-id-from-a-vimeo-url
|
||||
* https://vimeo.zendesk.com/hc/en-us/articles/360000121668-Starting-playback-at-a-specific-timecode
|
||||
* https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters
|
||||
*/
|
||||
import { LightGallery } from '../../lightgallery';
|
||||
import { lgQuery } from '../../lgQuery';
|
||||
import { CustomEventAfterSlide, CustomEventHasVideo, CustomEventSlideItemLoad } from '../../types';
|
||||
import { VideoSource } from './types';
|
||||
declare global {
|
||||
interface Window {
|
||||
_wq: any;
|
||||
Vimeo: any;
|
||||
}
|
||||
}
|
||||
export default class Video {
|
||||
private core;
|
||||
private settings;
|
||||
constructor(instance: LightGallery);
|
||||
init(): void;
|
||||
/**
|
||||
* @desc Event triggered when a slide is completely loaded
|
||||
*
|
||||
* @param {Event} event - lightGalley custom event
|
||||
*/
|
||||
onSlideItemLoad(event: CustomEventSlideItemLoad): void;
|
||||
/**
|
||||
* @desc Event triggered when video url or poster found
|
||||
* Append video HTML is poster is not given
|
||||
* Play if autoplayFirstVideo is true
|
||||
*
|
||||
* @param {Event} event - Javascript Event object.
|
||||
*/
|
||||
onHasVideo(event: CustomEventHasVideo): void;
|
||||
/**
|
||||
* @desc fired immediately before each slide transition.
|
||||
* Pause the previous video
|
||||
* Hide the download button if the slide contains YouTube, Vimeo, or Wistia videos.
|
||||
*
|
||||
* @param {Event} event - Javascript Event object.
|
||||
* @param {number} prevIndex - Previous index of the slide.
|
||||
* @param {number} index - Current index of the slide
|
||||
*/
|
||||
onBeforeSlide(event: CustomEvent): void;
|
||||
/**
|
||||
* @desc fired immediately after each slide transition.
|
||||
* Play video if autoplayVideoOnSlide option is enabled.
|
||||
*
|
||||
* @param {Event} event - Javascript Event object.
|
||||
* @param {number} prevIndex - Previous index of the slide.
|
||||
* @param {number} index - Current index of the slide
|
||||
* @todo should check on onSlideLoad as well if video is not loaded on after slide
|
||||
*/
|
||||
onAfterSlide(event: CustomEventAfterSlide): void;
|
||||
loadAndPlayVideo(index: number): void;
|
||||
/**
|
||||
* Play HTML5, Youtube, Vimeo or Wistia videos in a particular slide.
|
||||
* @param {number} index - Index of the slide
|
||||
*/
|
||||
playVideo(index: number): void;
|
||||
/**
|
||||
* Pause HTML5, Youtube, Vimeo or Wistia videos in a particular slide.
|
||||
* @param {number} index - Index of the slide
|
||||
*/
|
||||
pauseVideo(index: number): void;
|
||||
getVideoHtml(src: any, addClass: any, index: number, html5Video: VideoSource): string;
|
||||
/**
|
||||
* @desc - Append videos to the slide
|
||||
*
|
||||
* @param {HTMLElement} el - slide element
|
||||
* @param {Object} videoParams - Video parameters, Contains src, class, index, htmlVideo
|
||||
*/
|
||||
appendVideos(el: lgQuery, videoParams: {
|
||||
src: string;
|
||||
addClass: string;
|
||||
index: number;
|
||||
html5Video: any;
|
||||
}): any;
|
||||
gotoNextSlideOnVideoEnd(src: any, index: number): void;
|
||||
controlVideo(index: number, action: string): void;
|
||||
loadVideoOnPosterClick($el: lgQuery, forcePlay?: boolean): void;
|
||||
onVideoLoadAfterPosterClick($el: lgQuery, index: number): void;
|
||||
destroy(): void;
|
||||
}
|
||||
@@ -0,0 +1,545 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
var videoSettings = {
|
||||
autoplayFirstVideo: true,
|
||||
youTubePlayerParams: false,
|
||||
vimeoPlayerParams: false,
|
||||
wistiaPlayerParams: false,
|
||||
gotoNextSlideOnVideoEnd: true,
|
||||
autoplayVideoOnSlide: false,
|
||||
videojs: false,
|
||||
videojsTheme: '',
|
||||
videojsOptions: {},
|
||||
};
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var param = function (obj) {
|
||||
return Object.keys(obj)
|
||||
.map(function (k) {
|
||||
return encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]);
|
||||
})
|
||||
.join('&');
|
||||
};
|
||||
var paramsToObject = function (url) {
|
||||
var paramas = url
|
||||
.slice(1)
|
||||
.split('&')
|
||||
.map(function (p) { return p.split('='); })
|
||||
.reduce(function (obj, pair) {
|
||||
var _a = pair.map(decodeURIComponent), key = _a[0], value = _a[1];
|
||||
obj[key] = value;
|
||||
return obj;
|
||||
}, {});
|
||||
return paramas;
|
||||
};
|
||||
var getYouTubeParams = function (videoInfo, youTubePlayerParamsSettings) {
|
||||
if (!videoInfo.youtube)
|
||||
return '';
|
||||
var slideUrlParams = videoInfo.youtube[2]
|
||||
? paramsToObject(videoInfo.youtube[2])
|
||||
: '';
|
||||
// For youtube first params gets priority if duplicates found
|
||||
var defaultYouTubePlayerParams = {
|
||||
wmode: 'opaque',
|
||||
autoplay: 0,
|
||||
mute: 1,
|
||||
enablejsapi: 1,
|
||||
};
|
||||
var playerParamsSettings = youTubePlayerParamsSettings || {};
|
||||
var youTubePlayerParams = __assign(__assign(__assign({}, defaultYouTubePlayerParams), playerParamsSettings), slideUrlParams);
|
||||
var youTubeParams = "?" + param(youTubePlayerParams);
|
||||
return youTubeParams;
|
||||
};
|
||||
var isYouTubeNoCookie = function (url) {
|
||||
return url.includes('youtube-nocookie.com');
|
||||
};
|
||||
var getVimeoURLParams = function (defaultParams, videoInfo) {
|
||||
if (!videoInfo || !videoInfo.vimeo)
|
||||
return '';
|
||||
var urlParams = videoInfo.vimeo[2] || '';
|
||||
var defaultVimeoPlayerParams = Object.assign({}, {
|
||||
autoplay: 0,
|
||||
muted: 1,
|
||||
}, defaultParams);
|
||||
var defaultPlayerParams = defaultVimeoPlayerParams &&
|
||||
Object.keys(defaultVimeoPlayerParams).length !== 0
|
||||
? param(defaultVimeoPlayerParams)
|
||||
: '';
|
||||
// Support private video
|
||||
var urlWithHash = videoInfo.vimeo[0].split('/').pop() || '';
|
||||
var urlWithHashWithParams = urlWithHash.split('?')[0] || '';
|
||||
var hash = urlWithHashWithParams.split('#')[0];
|
||||
var isPrivate = videoInfo.vimeo[1] !== hash;
|
||||
if (isPrivate) {
|
||||
urlParams = urlParams.replace("/" + hash, '');
|
||||
}
|
||||
urlParams =
|
||||
urlParams[0] == '?' ? '&' + urlParams.slice(1) : urlParams || '';
|
||||
var privateUrlParams = isPrivate ? "h=" + hash : '';
|
||||
defaultPlayerParams = privateUrlParams
|
||||
? "&" + defaultPlayerParams
|
||||
: defaultPlayerParams;
|
||||
var vimeoPlayerParams = "?" + privateUrlParams + defaultPlayerParams + urlParams;
|
||||
return vimeoPlayerParams;
|
||||
};
|
||||
|
||||
/**
|
||||
* Video module for lightGallery
|
||||
* Supports HTML5, YouTube, Vimeo, wistia videos
|
||||
*
|
||||
*
|
||||
* @ref Wistia
|
||||
* https://wistia.com/support/integrations/wordpress(How to get url)
|
||||
* https://wistia.com/support/developers/embed-options#using-embed-options
|
||||
* https://wistia.com/support/developers/player-api
|
||||
* https://wistia.com/support/developers/construct-an-embed-code
|
||||
* http://jsfiddle.net/xvnm7xLm/
|
||||
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
|
||||
* https://wistia.com/support/embed-and-share/sharing-videos
|
||||
* https://private-sharing.wistia.com/medias/mwhrulrucj
|
||||
*
|
||||
* @ref Youtube
|
||||
* https://developers.google.com/youtube/player_parameters#enablejsapi
|
||||
* https://developers.google.com/youtube/iframe_api_reference
|
||||
* https://developer.chrome.com/blog/autoplay/#iframe-delegation
|
||||
*
|
||||
* @ref Vimeo
|
||||
* https://stackoverflow.com/questions/10488943/easy-way-to-get-vimeo-id-from-a-vimeo-url
|
||||
* https://vimeo.zendesk.com/hc/en-us/articles/360000121668-Starting-playback-at-a-specific-timecode
|
||||
* https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters
|
||||
*/
|
||||
var Video = /** @class */ (function () {
|
||||
function Video(instance) {
|
||||
// get lightGallery core plugin instance
|
||||
this.core = instance;
|
||||
this.settings = __assign(__assign({}, videoSettings), this.core.settings);
|
||||
return this;
|
||||
}
|
||||
Video.prototype.init = function () {
|
||||
var _this = this;
|
||||
/**
|
||||
* Event triggered when video url found without poster
|
||||
* Append video HTML
|
||||
* Play if autoplayFirstVideo is true
|
||||
*/
|
||||
this.core.LGel.on(lGEvents.hasVideo + ".video", this.onHasVideo.bind(this));
|
||||
this.core.LGel.on(lGEvents.posterClick + ".video", function () {
|
||||
var $el = _this.core.getSlideItem(_this.core.index);
|
||||
_this.loadVideoOnPosterClick($el);
|
||||
});
|
||||
this.core.LGel.on(lGEvents.slideItemLoad + ".video", this.onSlideItemLoad.bind(this));
|
||||
// @desc fired immediately before each slide transition.
|
||||
this.core.LGel.on(lGEvents.beforeSlide + ".video", this.onBeforeSlide.bind(this));
|
||||
// @desc fired immediately after each slide transition.
|
||||
this.core.LGel.on(lGEvents.afterSlide + ".video", this.onAfterSlide.bind(this));
|
||||
};
|
||||
/**
|
||||
* @desc Event triggered when a slide is completely loaded
|
||||
*
|
||||
* @param {Event} event - lightGalley custom event
|
||||
*/
|
||||
Video.prototype.onSlideItemLoad = function (event) {
|
||||
var _this = this;
|
||||
var _a = event.detail, isFirstSlide = _a.isFirstSlide, index = _a.index;
|
||||
// Should check the active slide as well as user may have moved to different slide before the first slide is loaded
|
||||
if (this.settings.autoplayFirstVideo &&
|
||||
isFirstSlide &&
|
||||
index === this.core.index) {
|
||||
// Delay is just for the transition effect on video load
|
||||
setTimeout(function () {
|
||||
_this.loadAndPlayVideo(index);
|
||||
}, 200);
|
||||
}
|
||||
// Should not call on first slide. should check only if the slide is active
|
||||
if (!isFirstSlide &&
|
||||
this.settings.autoplayVideoOnSlide &&
|
||||
index === this.core.index) {
|
||||
this.loadAndPlayVideo(index);
|
||||
}
|
||||
};
|
||||
/**
|
||||
* @desc Event triggered when video url or poster found
|
||||
* Append video HTML is poster is not given
|
||||
* Play if autoplayFirstVideo is true
|
||||
*
|
||||
* @param {Event} event - Javascript Event object.
|
||||
*/
|
||||
Video.prototype.onHasVideo = function (event) {
|
||||
var _a = event.detail, index = _a.index, src = _a.src, html5Video = _a.html5Video, hasPoster = _a.hasPoster;
|
||||
if (!hasPoster) {
|
||||
// All functions are called separately if poster exist in loadVideoOnPosterClick function
|
||||
this.appendVideos(this.core.getSlideItem(index), {
|
||||
src: src,
|
||||
addClass: 'lg-object',
|
||||
index: index,
|
||||
html5Video: html5Video,
|
||||
});
|
||||
// Automatically navigate to next slide once video reaches the end.
|
||||
this.gotoNextSlideOnVideoEnd(src, index);
|
||||
}
|
||||
};
|
||||
/**
|
||||
* @desc fired immediately before each slide transition.
|
||||
* Pause the previous video
|
||||
* Hide the download button if the slide contains YouTube, Vimeo, or Wistia videos.
|
||||
*
|
||||
* @param {Event} event - Javascript Event object.
|
||||
* @param {number} prevIndex - Previous index of the slide.
|
||||
* @param {number} index - Current index of the slide
|
||||
*/
|
||||
Video.prototype.onBeforeSlide = function (event) {
|
||||
if (this.core.lGalleryOn) {
|
||||
var prevIndex = event.detail.prevIndex;
|
||||
this.pauseVideo(prevIndex);
|
||||
}
|
||||
};
|
||||
/**
|
||||
* @desc fired immediately after each slide transition.
|
||||
* Play video if autoplayVideoOnSlide option is enabled.
|
||||
*
|
||||
* @param {Event} event - Javascript Event object.
|
||||
* @param {number} prevIndex - Previous index of the slide.
|
||||
* @param {number} index - Current index of the slide
|
||||
* @todo should check on onSlideLoad as well if video is not loaded on after slide
|
||||
*/
|
||||
Video.prototype.onAfterSlide = function (event) {
|
||||
var _this = this;
|
||||
var _a = event.detail, index = _a.index, prevIndex = _a.prevIndex;
|
||||
// Do not call on first slide
|
||||
var $slide = this.core.getSlideItem(index);
|
||||
if (this.settings.autoplayVideoOnSlide && index !== prevIndex) {
|
||||
if ($slide.hasClass('lg-complete')) {
|
||||
setTimeout(function () {
|
||||
_this.loadAndPlayVideo(index);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
};
|
||||
Video.prototype.loadAndPlayVideo = function (index) {
|
||||
var $slide = this.core.getSlideItem(index);
|
||||
var currentGalleryItem = this.core.galleryItems[index];
|
||||
if (currentGalleryItem.poster) {
|
||||
this.loadVideoOnPosterClick($slide, true);
|
||||
}
|
||||
else {
|
||||
this.playVideo(index);
|
||||
}
|
||||
};
|
||||
/**
|
||||
* Play HTML5, Youtube, Vimeo or Wistia videos in a particular slide.
|
||||
* @param {number} index - Index of the slide
|
||||
*/
|
||||
Video.prototype.playVideo = function (index) {
|
||||
this.controlVideo(index, 'play');
|
||||
};
|
||||
/**
|
||||
* Pause HTML5, Youtube, Vimeo or Wistia videos in a particular slide.
|
||||
* @param {number} index - Index of the slide
|
||||
*/
|
||||
Video.prototype.pauseVideo = function (index) {
|
||||
this.controlVideo(index, 'pause');
|
||||
};
|
||||
Video.prototype.getVideoHtml = function (src, addClass, index, html5Video) {
|
||||
var video = '';
|
||||
var videoInfo = this.core.galleryItems[index]
|
||||
.__slideVideoInfo || {};
|
||||
var currentGalleryItem = this.core.galleryItems[index];
|
||||
var videoTitle = currentGalleryItem.title || currentGalleryItem.alt;
|
||||
videoTitle = videoTitle ? 'title="' + videoTitle + '"' : '';
|
||||
var commonIframeProps = "allowtransparency=\"true\"\n frameborder=\"0\"\n scrolling=\"no\"\n allowfullscreen\n mozallowfullscreen\n webkitallowfullscreen\n oallowfullscreen\n msallowfullscreen";
|
||||
if (videoInfo.youtube) {
|
||||
var videoId = 'lg-youtube' + index;
|
||||
var youTubeParams = getYouTubeParams(videoInfo, this.settings.youTubePlayerParams);
|
||||
var isYouTubeNoCookieURL = isYouTubeNoCookie(src);
|
||||
var youtubeURL = isYouTubeNoCookieURL
|
||||
? '//www.youtube-nocookie.com/'
|
||||
: '//www.youtube.com/';
|
||||
video = "<iframe allow=\"autoplay\" id=" + videoId + " class=\"lg-video-object lg-youtube " + addClass + "\" " + videoTitle + " src=\"" + youtubeURL + "embed/" + (videoInfo.youtube[1] + youTubeParams) + "\" " + commonIframeProps + "></iframe>";
|
||||
}
|
||||
else if (videoInfo.vimeo) {
|
||||
var videoId = 'lg-vimeo' + index;
|
||||
var playerParams = getVimeoURLParams(this.settings.vimeoPlayerParams, videoInfo);
|
||||
video = "<iframe allow=\"autoplay\" id=" + videoId + " class=\"lg-video-object lg-vimeo " + addClass + "\" " + videoTitle + " src=\"//player.vimeo.com/video/" + (videoInfo.vimeo[1] + playerParams) + "\" " + commonIframeProps + "></iframe>";
|
||||
}
|
||||
else if (videoInfo.wistia) {
|
||||
var wistiaId = 'lg-wistia' + index;
|
||||
var playerParams = param(this.settings.wistiaPlayerParams);
|
||||
playerParams = playerParams ? '?' + playerParams : '';
|
||||
video = "<iframe allow=\"autoplay\" id=\"" + wistiaId + "\" src=\"//fast.wistia.net/embed/iframe/" + (videoInfo.wistia[4] + playerParams) + "\" " + videoTitle + " class=\"wistia_embed lg-video-object lg-wistia " + addClass + "\" name=\"wistia_embed\" " + commonIframeProps + "></iframe>";
|
||||
}
|
||||
else if (videoInfo.html5) {
|
||||
var html5VideoMarkup = '';
|
||||
for (var i = 0; i < html5Video.source.length; i++) {
|
||||
var type = html5Video.source[i].type;
|
||||
var typeAttr = type ? "type=\"" + type + "\"" : '';
|
||||
html5VideoMarkup += "<source src=\"" + html5Video.source[i].src + "\" " + typeAttr + ">";
|
||||
}
|
||||
if (html5Video.tracks) {
|
||||
var _loop_1 = function (i) {
|
||||
var trackAttributes = '';
|
||||
var track = html5Video.tracks[i];
|
||||
Object.keys(track || {}).forEach(function (key) {
|
||||
trackAttributes += key + "=\"" + track[key] + "\" ";
|
||||
});
|
||||
html5VideoMarkup += "<track " + trackAttributes + ">";
|
||||
};
|
||||
for (var i = 0; i < html5Video.tracks.length; i++) {
|
||||
_loop_1(i);
|
||||
}
|
||||
}
|
||||
var html5VideoAttrs_1 = '';
|
||||
var videoAttributes_1 = html5Video.attributes || {};
|
||||
Object.keys(videoAttributes_1 || {}).forEach(function (key) {
|
||||
html5VideoAttrs_1 += key + "=\"" + videoAttributes_1[key] + "\" ";
|
||||
});
|
||||
video = "<video class=\"lg-video-object lg-html5 " + (this.settings.videojs && this.settings.videojsTheme
|
||||
? this.settings.videojsTheme + ' '
|
||||
: '') + " " + (this.settings.videojs ? ' video-js' : '') + "\" " + html5VideoAttrs_1 + ">\n " + html5VideoMarkup + "\n Your browser does not support HTML5 video.\n </video>";
|
||||
}
|
||||
return video;
|
||||
};
|
||||
/**
|
||||
* @desc - Append videos to the slide
|
||||
*
|
||||
* @param {HTMLElement} el - slide element
|
||||
* @param {Object} videoParams - Video parameters, Contains src, class, index, htmlVideo
|
||||
*/
|
||||
Video.prototype.appendVideos = function (el, videoParams) {
|
||||
var _a;
|
||||
var videoHtml = this.getVideoHtml(videoParams.src, videoParams.addClass, videoParams.index, videoParams.html5Video);
|
||||
el.find('.lg-video-cont').append(videoHtml);
|
||||
var $videoElement = el.find('.lg-video-object').first();
|
||||
if (videoParams.html5Video) {
|
||||
$videoElement.on('mousedown.lg.video', function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
if (this.settings.videojs && ((_a = this.core.galleryItems[videoParams.index].__slideVideoInfo) === null || _a === void 0 ? void 0 : _a.html5)) {
|
||||
try {
|
||||
return videojs($videoElement.get(), this.settings.videojsOptions);
|
||||
}
|
||||
catch (e) {
|
||||
console.error('lightGallery:- Make sure you have included videojs');
|
||||
}
|
||||
}
|
||||
};
|
||||
Video.prototype.gotoNextSlideOnVideoEnd = function (src, index) {
|
||||
var _this = this;
|
||||
var $videoElement = this.core
|
||||
.getSlideItem(index)
|
||||
.find('.lg-video-object')
|
||||
.first();
|
||||
var videoInfo = this.core.galleryItems[index].__slideVideoInfo || {};
|
||||
if (this.settings.gotoNextSlideOnVideoEnd) {
|
||||
if (videoInfo.html5) {
|
||||
$videoElement.on('ended', function () {
|
||||
_this.core.goToNextSlide();
|
||||
});
|
||||
}
|
||||
else if (videoInfo.vimeo) {
|
||||
try {
|
||||
// https://github.com/vimeo/player.js/#ended
|
||||
new Vimeo.Player($videoElement.get()).on('ended', function () {
|
||||
_this.core.goToNextSlide();
|
||||
});
|
||||
}
|
||||
catch (e) {
|
||||
console.error('lightGallery:- Make sure you have included //github.com/vimeo/player.js');
|
||||
}
|
||||
}
|
||||
else if (videoInfo.wistia) {
|
||||
try {
|
||||
window._wq = window._wq || [];
|
||||
// @todo Event is gettign triggered multiple times
|
||||
window._wq.push({
|
||||
id: $videoElement.attr('id'),
|
||||
onReady: function (video) {
|
||||
video.bind('end', function () {
|
||||
_this.core.goToNextSlide();
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
catch (e) {
|
||||
console.error('lightGallery:- Make sure you have included //fast.wistia.com/assets/external/E-v1.js');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
Video.prototype.controlVideo = function (index, action) {
|
||||
var $videoElement = this.core
|
||||
.getSlideItem(index)
|
||||
.find('.lg-video-object')
|
||||
.first();
|
||||
var videoInfo = this.core.galleryItems[index].__slideVideoInfo || {};
|
||||
if (!$videoElement.get())
|
||||
return;
|
||||
if (videoInfo.youtube) {
|
||||
try {
|
||||
$videoElement.get().contentWindow.postMessage("{\"event\":\"command\",\"func\":\"" + action + "Video\",\"args\":\"\"}", '*');
|
||||
}
|
||||
catch (e) {
|
||||
console.error("lightGallery:- " + e);
|
||||
}
|
||||
}
|
||||
else if (videoInfo.vimeo) {
|
||||
try {
|
||||
new Vimeo.Player($videoElement.get())[action]();
|
||||
}
|
||||
catch (e) {
|
||||
console.error('lightGallery:- Make sure you have included //github.com/vimeo/player.js');
|
||||
}
|
||||
}
|
||||
else if (videoInfo.html5) {
|
||||
if (this.settings.videojs) {
|
||||
try {
|
||||
videojs($videoElement.get())[action]();
|
||||
}
|
||||
catch (e) {
|
||||
console.error('lightGallery:- Make sure you have included videojs');
|
||||
}
|
||||
}
|
||||
else {
|
||||
$videoElement.get()[action]();
|
||||
}
|
||||
}
|
||||
else if (videoInfo.wistia) {
|
||||
try {
|
||||
window._wq = window._wq || [];
|
||||
// @todo Find a way to destroy wistia player instance
|
||||
window._wq.push({
|
||||
id: $videoElement.attr('id'),
|
||||
onReady: function (video) {
|
||||
video[action]();
|
||||
},
|
||||
});
|
||||
}
|
||||
catch (e) {
|
||||
console.error('lightGallery:- Make sure you have included //fast.wistia.com/assets/external/E-v1.js');
|
||||
}
|
||||
}
|
||||
};
|
||||
Video.prototype.loadVideoOnPosterClick = function ($el, forcePlay) {
|
||||
var _this = this;
|
||||
// check slide has poster
|
||||
if (!$el.hasClass('lg-video-loaded')) {
|
||||
// check already video element present
|
||||
if (!$el.hasClass('lg-has-video')) {
|
||||
$el.addClass('lg-has-video');
|
||||
var _html = void 0;
|
||||
var _src = this.core.galleryItems[this.core.index].src;
|
||||
var video = this.core.galleryItems[this.core.index].video;
|
||||
if (video) {
|
||||
_html =
|
||||
typeof video === 'string' ? JSON.parse(video) : video;
|
||||
}
|
||||
var videoJsPlayer_1 = this.appendVideos($el, {
|
||||
src: _src,
|
||||
addClass: '',
|
||||
index: this.core.index,
|
||||
html5Video: _html,
|
||||
});
|
||||
this.gotoNextSlideOnVideoEnd(_src, this.core.index);
|
||||
var $tempImg = $el.find('.lg-object').first().get();
|
||||
// @todo make sure it is working
|
||||
$el.find('.lg-video-cont').first().append($tempImg);
|
||||
$el.addClass('lg-video-loading');
|
||||
videoJsPlayer_1 &&
|
||||
videoJsPlayer_1.ready(function () {
|
||||
videoJsPlayer_1.on('loadedmetadata', function () {
|
||||
_this.onVideoLoadAfterPosterClick($el, _this.core.index);
|
||||
});
|
||||
});
|
||||
$el.find('.lg-video-object')
|
||||
.first()
|
||||
.on('load.lg error.lg loadedmetadata.lg', function () {
|
||||
setTimeout(function () {
|
||||
_this.onVideoLoadAfterPosterClick($el, _this.core.index);
|
||||
}, 50);
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.playVideo(this.core.index);
|
||||
}
|
||||
}
|
||||
else if (forcePlay) {
|
||||
this.playVideo(this.core.index);
|
||||
}
|
||||
};
|
||||
Video.prototype.onVideoLoadAfterPosterClick = function ($el, index) {
|
||||
$el.addClass('lg-video-loaded');
|
||||
this.playVideo(index);
|
||||
};
|
||||
Video.prototype.destroy = function () {
|
||||
this.core.LGel.off('.lg.video');
|
||||
this.core.LGel.off('.video');
|
||||
};
|
||||
return Video;
|
||||
}());
|
||||
|
||||
export default Video;
|
||||
//# sourceMappingURL=lg-video.es5.js.map
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,553 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgVideo = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
var videoSettings = {
|
||||
autoplayFirstVideo: true,
|
||||
youTubePlayerParams: false,
|
||||
vimeoPlayerParams: false,
|
||||
wistiaPlayerParams: false,
|
||||
gotoNextSlideOnVideoEnd: true,
|
||||
autoplayVideoOnSlide: false,
|
||||
videojs: false,
|
||||
videojsTheme: '',
|
||||
videojsOptions: {},
|
||||
};
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var param = function (obj) {
|
||||
return Object.keys(obj)
|
||||
.map(function (k) {
|
||||
return encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]);
|
||||
})
|
||||
.join('&');
|
||||
};
|
||||
var paramsToObject = function (url) {
|
||||
var paramas = url
|
||||
.slice(1)
|
||||
.split('&')
|
||||
.map(function (p) { return p.split('='); })
|
||||
.reduce(function (obj, pair) {
|
||||
var _a = pair.map(decodeURIComponent), key = _a[0], value = _a[1];
|
||||
obj[key] = value;
|
||||
return obj;
|
||||
}, {});
|
||||
return paramas;
|
||||
};
|
||||
var getYouTubeParams = function (videoInfo, youTubePlayerParamsSettings) {
|
||||
if (!videoInfo.youtube)
|
||||
return '';
|
||||
var slideUrlParams = videoInfo.youtube[2]
|
||||
? paramsToObject(videoInfo.youtube[2])
|
||||
: '';
|
||||
// For youtube first params gets priority if duplicates found
|
||||
var defaultYouTubePlayerParams = {
|
||||
wmode: 'opaque',
|
||||
autoplay: 0,
|
||||
mute: 1,
|
||||
enablejsapi: 1,
|
||||
};
|
||||
var playerParamsSettings = youTubePlayerParamsSettings || {};
|
||||
var youTubePlayerParams = __assign(__assign(__assign({}, defaultYouTubePlayerParams), playerParamsSettings), slideUrlParams);
|
||||
var youTubeParams = "?" + param(youTubePlayerParams);
|
||||
return youTubeParams;
|
||||
};
|
||||
var isYouTubeNoCookie = function (url) {
|
||||
return url.includes('youtube-nocookie.com');
|
||||
};
|
||||
var getVimeoURLParams = function (defaultParams, videoInfo) {
|
||||
if (!videoInfo || !videoInfo.vimeo)
|
||||
return '';
|
||||
var urlParams = videoInfo.vimeo[2] || '';
|
||||
var defaultVimeoPlayerParams = Object.assign({}, {
|
||||
autoplay: 0,
|
||||
muted: 1,
|
||||
}, defaultParams);
|
||||
var defaultPlayerParams = defaultVimeoPlayerParams &&
|
||||
Object.keys(defaultVimeoPlayerParams).length !== 0
|
||||
? param(defaultVimeoPlayerParams)
|
||||
: '';
|
||||
// Support private video
|
||||
var urlWithHash = videoInfo.vimeo[0].split('/').pop() || '';
|
||||
var urlWithHashWithParams = urlWithHash.split('?')[0] || '';
|
||||
var hash = urlWithHashWithParams.split('#')[0];
|
||||
var isPrivate = videoInfo.vimeo[1] !== hash;
|
||||
if (isPrivate) {
|
||||
urlParams = urlParams.replace("/" + hash, '');
|
||||
}
|
||||
urlParams =
|
||||
urlParams[0] == '?' ? '&' + urlParams.slice(1) : urlParams || '';
|
||||
var privateUrlParams = isPrivate ? "h=" + hash : '';
|
||||
defaultPlayerParams = privateUrlParams
|
||||
? "&" + defaultPlayerParams
|
||||
: defaultPlayerParams;
|
||||
var vimeoPlayerParams = "?" + privateUrlParams + defaultPlayerParams + urlParams;
|
||||
return vimeoPlayerParams;
|
||||
};
|
||||
|
||||
/**
|
||||
* Video module for lightGallery
|
||||
* Supports HTML5, YouTube, Vimeo, wistia videos
|
||||
*
|
||||
*
|
||||
* @ref Wistia
|
||||
* https://wistia.com/support/integrations/wordpress(How to get url)
|
||||
* https://wistia.com/support/developers/embed-options#using-embed-options
|
||||
* https://wistia.com/support/developers/player-api
|
||||
* https://wistia.com/support/developers/construct-an-embed-code
|
||||
* http://jsfiddle.net/xvnm7xLm/
|
||||
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
|
||||
* https://wistia.com/support/embed-and-share/sharing-videos
|
||||
* https://private-sharing.wistia.com/medias/mwhrulrucj
|
||||
*
|
||||
* @ref Youtube
|
||||
* https://developers.google.com/youtube/player_parameters#enablejsapi
|
||||
* https://developers.google.com/youtube/iframe_api_reference
|
||||
* https://developer.chrome.com/blog/autoplay/#iframe-delegation
|
||||
*
|
||||
* @ref Vimeo
|
||||
* https://stackoverflow.com/questions/10488943/easy-way-to-get-vimeo-id-from-a-vimeo-url
|
||||
* https://vimeo.zendesk.com/hc/en-us/articles/360000121668-Starting-playback-at-a-specific-timecode
|
||||
* https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters
|
||||
*/
|
||||
var Video = /** @class */ (function () {
|
||||
function Video(instance) {
|
||||
// get lightGallery core plugin instance
|
||||
this.core = instance;
|
||||
this.settings = __assign(__assign({}, videoSettings), this.core.settings);
|
||||
return this;
|
||||
}
|
||||
Video.prototype.init = function () {
|
||||
var _this = this;
|
||||
/**
|
||||
* Event triggered when video url found without poster
|
||||
* Append video HTML
|
||||
* Play if autoplayFirstVideo is true
|
||||
*/
|
||||
this.core.LGel.on(lGEvents.hasVideo + ".video", this.onHasVideo.bind(this));
|
||||
this.core.LGel.on(lGEvents.posterClick + ".video", function () {
|
||||
var $el = _this.core.getSlideItem(_this.core.index);
|
||||
_this.loadVideoOnPosterClick($el);
|
||||
});
|
||||
this.core.LGel.on(lGEvents.slideItemLoad + ".video", this.onSlideItemLoad.bind(this));
|
||||
// @desc fired immediately before each slide transition.
|
||||
this.core.LGel.on(lGEvents.beforeSlide + ".video", this.onBeforeSlide.bind(this));
|
||||
// @desc fired immediately after each slide transition.
|
||||
this.core.LGel.on(lGEvents.afterSlide + ".video", this.onAfterSlide.bind(this));
|
||||
};
|
||||
/**
|
||||
* @desc Event triggered when a slide is completely loaded
|
||||
*
|
||||
* @param {Event} event - lightGalley custom event
|
||||
*/
|
||||
Video.prototype.onSlideItemLoad = function (event) {
|
||||
var _this = this;
|
||||
var _a = event.detail, isFirstSlide = _a.isFirstSlide, index = _a.index;
|
||||
// Should check the active slide as well as user may have moved to different slide before the first slide is loaded
|
||||
if (this.settings.autoplayFirstVideo &&
|
||||
isFirstSlide &&
|
||||
index === this.core.index) {
|
||||
// Delay is just for the transition effect on video load
|
||||
setTimeout(function () {
|
||||
_this.loadAndPlayVideo(index);
|
||||
}, 200);
|
||||
}
|
||||
// Should not call on first slide. should check only if the slide is active
|
||||
if (!isFirstSlide &&
|
||||
this.settings.autoplayVideoOnSlide &&
|
||||
index === this.core.index) {
|
||||
this.loadAndPlayVideo(index);
|
||||
}
|
||||
};
|
||||
/**
|
||||
* @desc Event triggered when video url or poster found
|
||||
* Append video HTML is poster is not given
|
||||
* Play if autoplayFirstVideo is true
|
||||
*
|
||||
* @param {Event} event - Javascript Event object.
|
||||
*/
|
||||
Video.prototype.onHasVideo = function (event) {
|
||||
var _a = event.detail, index = _a.index, src = _a.src, html5Video = _a.html5Video, hasPoster = _a.hasPoster;
|
||||
if (!hasPoster) {
|
||||
// All functions are called separately if poster exist in loadVideoOnPosterClick function
|
||||
this.appendVideos(this.core.getSlideItem(index), {
|
||||
src: src,
|
||||
addClass: 'lg-object',
|
||||
index: index,
|
||||
html5Video: html5Video,
|
||||
});
|
||||
// Automatically navigate to next slide once video reaches the end.
|
||||
this.gotoNextSlideOnVideoEnd(src, index);
|
||||
}
|
||||
};
|
||||
/**
|
||||
* @desc fired immediately before each slide transition.
|
||||
* Pause the previous video
|
||||
* Hide the download button if the slide contains YouTube, Vimeo, or Wistia videos.
|
||||
*
|
||||
* @param {Event} event - Javascript Event object.
|
||||
* @param {number} prevIndex - Previous index of the slide.
|
||||
* @param {number} index - Current index of the slide
|
||||
*/
|
||||
Video.prototype.onBeforeSlide = function (event) {
|
||||
if (this.core.lGalleryOn) {
|
||||
var prevIndex = event.detail.prevIndex;
|
||||
this.pauseVideo(prevIndex);
|
||||
}
|
||||
};
|
||||
/**
|
||||
* @desc fired immediately after each slide transition.
|
||||
* Play video if autoplayVideoOnSlide option is enabled.
|
||||
*
|
||||
* @param {Event} event - Javascript Event object.
|
||||
* @param {number} prevIndex - Previous index of the slide.
|
||||
* @param {number} index - Current index of the slide
|
||||
* @todo should check on onSlideLoad as well if video is not loaded on after slide
|
||||
*/
|
||||
Video.prototype.onAfterSlide = function (event) {
|
||||
var _this = this;
|
||||
var _a = event.detail, index = _a.index, prevIndex = _a.prevIndex;
|
||||
// Do not call on first slide
|
||||
var $slide = this.core.getSlideItem(index);
|
||||
if (this.settings.autoplayVideoOnSlide && index !== prevIndex) {
|
||||
if ($slide.hasClass('lg-complete')) {
|
||||
setTimeout(function () {
|
||||
_this.loadAndPlayVideo(index);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
};
|
||||
Video.prototype.loadAndPlayVideo = function (index) {
|
||||
var $slide = this.core.getSlideItem(index);
|
||||
var currentGalleryItem = this.core.galleryItems[index];
|
||||
if (currentGalleryItem.poster) {
|
||||
this.loadVideoOnPosterClick($slide, true);
|
||||
}
|
||||
else {
|
||||
this.playVideo(index);
|
||||
}
|
||||
};
|
||||
/**
|
||||
* Play HTML5, Youtube, Vimeo or Wistia videos in a particular slide.
|
||||
* @param {number} index - Index of the slide
|
||||
*/
|
||||
Video.prototype.playVideo = function (index) {
|
||||
this.controlVideo(index, 'play');
|
||||
};
|
||||
/**
|
||||
* Pause HTML5, Youtube, Vimeo or Wistia videos in a particular slide.
|
||||
* @param {number} index - Index of the slide
|
||||
*/
|
||||
Video.prototype.pauseVideo = function (index) {
|
||||
this.controlVideo(index, 'pause');
|
||||
};
|
||||
Video.prototype.getVideoHtml = function (src, addClass, index, html5Video) {
|
||||
var video = '';
|
||||
var videoInfo = this.core.galleryItems[index]
|
||||
.__slideVideoInfo || {};
|
||||
var currentGalleryItem = this.core.galleryItems[index];
|
||||
var videoTitle = currentGalleryItem.title || currentGalleryItem.alt;
|
||||
videoTitle = videoTitle ? 'title="' + videoTitle + '"' : '';
|
||||
var commonIframeProps = "allowtransparency=\"true\"\n frameborder=\"0\"\n scrolling=\"no\"\n allowfullscreen\n mozallowfullscreen\n webkitallowfullscreen\n oallowfullscreen\n msallowfullscreen";
|
||||
if (videoInfo.youtube) {
|
||||
var videoId = 'lg-youtube' + index;
|
||||
var youTubeParams = getYouTubeParams(videoInfo, this.settings.youTubePlayerParams);
|
||||
var isYouTubeNoCookieURL = isYouTubeNoCookie(src);
|
||||
var youtubeURL = isYouTubeNoCookieURL
|
||||
? '//www.youtube-nocookie.com/'
|
||||
: '//www.youtube.com/';
|
||||
video = "<iframe allow=\"autoplay\" id=" + videoId + " class=\"lg-video-object lg-youtube " + addClass + "\" " + videoTitle + " src=\"" + youtubeURL + "embed/" + (videoInfo.youtube[1] + youTubeParams) + "\" " + commonIframeProps + "></iframe>";
|
||||
}
|
||||
else if (videoInfo.vimeo) {
|
||||
var videoId = 'lg-vimeo' + index;
|
||||
var playerParams = getVimeoURLParams(this.settings.vimeoPlayerParams, videoInfo);
|
||||
video = "<iframe allow=\"autoplay\" id=" + videoId + " class=\"lg-video-object lg-vimeo " + addClass + "\" " + videoTitle + " src=\"//player.vimeo.com/video/" + (videoInfo.vimeo[1] + playerParams) + "\" " + commonIframeProps + "></iframe>";
|
||||
}
|
||||
else if (videoInfo.wistia) {
|
||||
var wistiaId = 'lg-wistia' + index;
|
||||
var playerParams = param(this.settings.wistiaPlayerParams);
|
||||
playerParams = playerParams ? '?' + playerParams : '';
|
||||
video = "<iframe allow=\"autoplay\" id=\"" + wistiaId + "\" src=\"//fast.wistia.net/embed/iframe/" + (videoInfo.wistia[4] + playerParams) + "\" " + videoTitle + " class=\"wistia_embed lg-video-object lg-wistia " + addClass + "\" name=\"wistia_embed\" " + commonIframeProps + "></iframe>";
|
||||
}
|
||||
else if (videoInfo.html5) {
|
||||
var html5VideoMarkup = '';
|
||||
for (var i = 0; i < html5Video.source.length; i++) {
|
||||
var type = html5Video.source[i].type;
|
||||
var typeAttr = type ? "type=\"" + type + "\"" : '';
|
||||
html5VideoMarkup += "<source src=\"" + html5Video.source[i].src + "\" " + typeAttr + ">";
|
||||
}
|
||||
if (html5Video.tracks) {
|
||||
var _loop_1 = function (i) {
|
||||
var trackAttributes = '';
|
||||
var track = html5Video.tracks[i];
|
||||
Object.keys(track || {}).forEach(function (key) {
|
||||
trackAttributes += key + "=\"" + track[key] + "\" ";
|
||||
});
|
||||
html5VideoMarkup += "<track " + trackAttributes + ">";
|
||||
};
|
||||
for (var i = 0; i < html5Video.tracks.length; i++) {
|
||||
_loop_1(i);
|
||||
}
|
||||
}
|
||||
var html5VideoAttrs_1 = '';
|
||||
var videoAttributes_1 = html5Video.attributes || {};
|
||||
Object.keys(videoAttributes_1 || {}).forEach(function (key) {
|
||||
html5VideoAttrs_1 += key + "=\"" + videoAttributes_1[key] + "\" ";
|
||||
});
|
||||
video = "<video class=\"lg-video-object lg-html5 " + (this.settings.videojs && this.settings.videojsTheme
|
||||
? this.settings.videojsTheme + ' '
|
||||
: '') + " " + (this.settings.videojs ? ' video-js' : '') + "\" " + html5VideoAttrs_1 + ">\n " + html5VideoMarkup + "\n Your browser does not support HTML5 video.\n </video>";
|
||||
}
|
||||
return video;
|
||||
};
|
||||
/**
|
||||
* @desc - Append videos to the slide
|
||||
*
|
||||
* @param {HTMLElement} el - slide element
|
||||
* @param {Object} videoParams - Video parameters, Contains src, class, index, htmlVideo
|
||||
*/
|
||||
Video.prototype.appendVideos = function (el, videoParams) {
|
||||
var _a;
|
||||
var videoHtml = this.getVideoHtml(videoParams.src, videoParams.addClass, videoParams.index, videoParams.html5Video);
|
||||
el.find('.lg-video-cont').append(videoHtml);
|
||||
var $videoElement = el.find('.lg-video-object').first();
|
||||
if (videoParams.html5Video) {
|
||||
$videoElement.on('mousedown.lg.video', function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
if (this.settings.videojs && ((_a = this.core.galleryItems[videoParams.index].__slideVideoInfo) === null || _a === void 0 ? void 0 : _a.html5)) {
|
||||
try {
|
||||
return videojs($videoElement.get(), this.settings.videojsOptions);
|
||||
}
|
||||
catch (e) {
|
||||
console.error('lightGallery:- Make sure you have included videojs');
|
||||
}
|
||||
}
|
||||
};
|
||||
Video.prototype.gotoNextSlideOnVideoEnd = function (src, index) {
|
||||
var _this = this;
|
||||
var $videoElement = this.core
|
||||
.getSlideItem(index)
|
||||
.find('.lg-video-object')
|
||||
.first();
|
||||
var videoInfo = this.core.galleryItems[index].__slideVideoInfo || {};
|
||||
if (this.settings.gotoNextSlideOnVideoEnd) {
|
||||
if (videoInfo.html5) {
|
||||
$videoElement.on('ended', function () {
|
||||
_this.core.goToNextSlide();
|
||||
});
|
||||
}
|
||||
else if (videoInfo.vimeo) {
|
||||
try {
|
||||
// https://github.com/vimeo/player.js/#ended
|
||||
new Vimeo.Player($videoElement.get()).on('ended', function () {
|
||||
_this.core.goToNextSlide();
|
||||
});
|
||||
}
|
||||
catch (e) {
|
||||
console.error('lightGallery:- Make sure you have included //github.com/vimeo/player.js');
|
||||
}
|
||||
}
|
||||
else if (videoInfo.wistia) {
|
||||
try {
|
||||
window._wq = window._wq || [];
|
||||
// @todo Event is gettign triggered multiple times
|
||||
window._wq.push({
|
||||
id: $videoElement.attr('id'),
|
||||
onReady: function (video) {
|
||||
video.bind('end', function () {
|
||||
_this.core.goToNextSlide();
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
catch (e) {
|
||||
console.error('lightGallery:- Make sure you have included //fast.wistia.com/assets/external/E-v1.js');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
Video.prototype.controlVideo = function (index, action) {
|
||||
var $videoElement = this.core
|
||||
.getSlideItem(index)
|
||||
.find('.lg-video-object')
|
||||
.first();
|
||||
var videoInfo = this.core.galleryItems[index].__slideVideoInfo || {};
|
||||
if (!$videoElement.get())
|
||||
return;
|
||||
if (videoInfo.youtube) {
|
||||
try {
|
||||
$videoElement.get().contentWindow.postMessage("{\"event\":\"command\",\"func\":\"" + action + "Video\",\"args\":\"\"}", '*');
|
||||
}
|
||||
catch (e) {
|
||||
console.error("lightGallery:- " + e);
|
||||
}
|
||||
}
|
||||
else if (videoInfo.vimeo) {
|
||||
try {
|
||||
new Vimeo.Player($videoElement.get())[action]();
|
||||
}
|
||||
catch (e) {
|
||||
console.error('lightGallery:- Make sure you have included //github.com/vimeo/player.js');
|
||||
}
|
||||
}
|
||||
else if (videoInfo.html5) {
|
||||
if (this.settings.videojs) {
|
||||
try {
|
||||
videojs($videoElement.get())[action]();
|
||||
}
|
||||
catch (e) {
|
||||
console.error('lightGallery:- Make sure you have included videojs');
|
||||
}
|
||||
}
|
||||
else {
|
||||
$videoElement.get()[action]();
|
||||
}
|
||||
}
|
||||
else if (videoInfo.wistia) {
|
||||
try {
|
||||
window._wq = window._wq || [];
|
||||
// @todo Find a way to destroy wistia player instance
|
||||
window._wq.push({
|
||||
id: $videoElement.attr('id'),
|
||||
onReady: function (video) {
|
||||
video[action]();
|
||||
},
|
||||
});
|
||||
}
|
||||
catch (e) {
|
||||
console.error('lightGallery:- Make sure you have included //fast.wistia.com/assets/external/E-v1.js');
|
||||
}
|
||||
}
|
||||
};
|
||||
Video.prototype.loadVideoOnPosterClick = function ($el, forcePlay) {
|
||||
var _this = this;
|
||||
// check slide has poster
|
||||
if (!$el.hasClass('lg-video-loaded')) {
|
||||
// check already video element present
|
||||
if (!$el.hasClass('lg-has-video')) {
|
||||
$el.addClass('lg-has-video');
|
||||
var _html = void 0;
|
||||
var _src = this.core.galleryItems[this.core.index].src;
|
||||
var video = this.core.galleryItems[this.core.index].video;
|
||||
if (video) {
|
||||
_html =
|
||||
typeof video === 'string' ? JSON.parse(video) : video;
|
||||
}
|
||||
var videoJsPlayer_1 = this.appendVideos($el, {
|
||||
src: _src,
|
||||
addClass: '',
|
||||
index: this.core.index,
|
||||
html5Video: _html,
|
||||
});
|
||||
this.gotoNextSlideOnVideoEnd(_src, this.core.index);
|
||||
var $tempImg = $el.find('.lg-object').first().get();
|
||||
// @todo make sure it is working
|
||||
$el.find('.lg-video-cont').first().append($tempImg);
|
||||
$el.addClass('lg-video-loading');
|
||||
videoJsPlayer_1 &&
|
||||
videoJsPlayer_1.ready(function () {
|
||||
videoJsPlayer_1.on('loadedmetadata', function () {
|
||||
_this.onVideoLoadAfterPosterClick($el, _this.core.index);
|
||||
});
|
||||
});
|
||||
$el.find('.lg-video-object')
|
||||
.first()
|
||||
.on('load.lg error.lg loadedmetadata.lg', function () {
|
||||
setTimeout(function () {
|
||||
_this.onVideoLoadAfterPosterClick($el, _this.core.index);
|
||||
}, 50);
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.playVideo(this.core.index);
|
||||
}
|
||||
}
|
||||
else if (forcePlay) {
|
||||
this.playVideo(this.core.index);
|
||||
}
|
||||
};
|
||||
Video.prototype.onVideoLoadAfterPosterClick = function ($el, index) {
|
||||
$el.addClass('lg-video-loaded');
|
||||
this.playVideo(index);
|
||||
};
|
||||
Video.prototype.destroy = function () {
|
||||
this.core.LGel.off('.lg.video');
|
||||
this.core.LGel.off('.video');
|
||||
};
|
||||
return Video;
|
||||
}());
|
||||
|
||||
return Video;
|
||||
|
||||
})));
|
||||
//# sourceMappingURL=lg-video.umd.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"name": "lightgallery/plugins/video",
|
||||
"private": true,
|
||||
"main": "lg-video.umd.js",
|
||||
"module": "lg-video.es5.js",
|
||||
"typings": "lg-video.d.ts"
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
export interface VideoSource {
|
||||
source: {
|
||||
src: string;
|
||||
type: string;
|
||||
}[];
|
||||
tracks: HTMLTrackElement[];
|
||||
attributes: HTMLVideoElement;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
export interface VimeoThumbnailSettings {
|
||||
/**
|
||||
* Auto load thumbnails for Vimeo videos
|
||||
*/
|
||||
showVimeoThumbnails: boolean;
|
||||
/**
|
||||
* Show thumbnails with play button
|
||||
*/
|
||||
showThumbnailWithPlayButton: boolean;
|
||||
}
|
||||
export declare const vimeoSettings: VimeoThumbnailSettings;
|
||||
@@ -0,0 +1,14 @@
|
||||
import { LightGallery } from '../../lightgallery';
|
||||
import { VimeoThumbnailSettings } from './lg-vimeo-thumbnail-settings';
|
||||
/**
|
||||
* Creates the vimeo thumbnails plugin.
|
||||
* @param {object} element - lightGallery element
|
||||
*/
|
||||
export default class VimeoThumbnail {
|
||||
core: LightGallery;
|
||||
settings: VimeoThumbnailSettings;
|
||||
constructor(instance: LightGallery);
|
||||
init(): void;
|
||||
setVimeoThumbnails(dynamicGallery: LightGallery): Promise<void>;
|
||||
destroy(): void;
|
||||
}
|
||||
@@ -0,0 +1,182 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
function __awaiter(thisArg, _arguments, P, generator) {
|
||||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
||||
return new (P || (P = Promise))(function (resolve, reject) {
|
||||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
||||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
||||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
||||
});
|
||||
}
|
||||
|
||||
function __generator(thisArg, body) {
|
||||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
||||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
||||
function verb(n) { return function (v) { return step([n, v]); }; }
|
||||
function step(op) {
|
||||
if (f) throw new TypeError("Generator is already executing.");
|
||||
while (_) try {
|
||||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
||||
if (y = 0, t) op = [op[0] & 2, t.value];
|
||||
switch (op[0]) {
|
||||
case 0: case 1: t = op; break;
|
||||
case 4: _.label++; return { value: op[1], done: false };
|
||||
case 5: _.label++; y = op[1]; op = [0]; continue;
|
||||
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
||||
default:
|
||||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
||||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
||||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
||||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
||||
if (t[2]) _.ops.pop();
|
||||
_.trys.pop(); continue;
|
||||
}
|
||||
op = body.call(thisArg, _);
|
||||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
||||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var vimeoSettings = {
|
||||
showVimeoThumbnails: true,
|
||||
showThumbnailWithPlayButton: false,
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates the vimeo thumbnails plugin.
|
||||
* @param {object} element - lightGallery element
|
||||
*/
|
||||
var VimeoThumbnail = /** @class */ (function () {
|
||||
function VimeoThumbnail(instance) {
|
||||
this.core = instance;
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign({}, vimeoSettings), this.core.settings);
|
||||
return this;
|
||||
}
|
||||
VimeoThumbnail.prototype.init = function () {
|
||||
var _this = this;
|
||||
if (!this.settings.showVimeoThumbnails) {
|
||||
return;
|
||||
}
|
||||
this.core.LGel.on(lGEvents.init + ".vimeothumbnails", function (event) {
|
||||
var pluginInstance = event.detail.instance;
|
||||
var thumbCont = pluginInstance.$container
|
||||
.find('.lg-thumb-outer')
|
||||
.get();
|
||||
if (thumbCont) {
|
||||
_this.setVimeoThumbnails(pluginInstance);
|
||||
}
|
||||
});
|
||||
};
|
||||
VimeoThumbnail.prototype.setVimeoThumbnails = function (dynamicGallery) {
|
||||
return __awaiter(this, void 0, void 0, function () {
|
||||
var i, item, slideVideoInfo, response, vimeoInfo;
|
||||
return __generator(this, function (_a) {
|
||||
switch (_a.label) {
|
||||
case 0:
|
||||
i = 0;
|
||||
_a.label = 1;
|
||||
case 1:
|
||||
if (!(i < dynamicGallery.galleryItems.length)) return [3 /*break*/, 5];
|
||||
item = dynamicGallery.galleryItems[i];
|
||||
slideVideoInfo = item.__slideVideoInfo || {};
|
||||
if (!slideVideoInfo.vimeo) return [3 /*break*/, 4];
|
||||
return [4 /*yield*/, fetch('https://vimeo.com/api/oembed.json?url=' +
|
||||
encodeURIComponent(item.src))];
|
||||
case 2:
|
||||
response = _a.sent();
|
||||
return [4 /*yield*/, response.json()];
|
||||
case 3:
|
||||
vimeoInfo = _a.sent();
|
||||
dynamicGallery.$container
|
||||
.find('.lg-thumb-item')
|
||||
.eq(i)
|
||||
.find('img')
|
||||
.attr('src', this.settings.showThumbnailWithPlayButton
|
||||
? vimeoInfo.thumbnail_url_with_play_button
|
||||
: vimeoInfo.thumbnail_url);
|
||||
_a.label = 4;
|
||||
case 4:
|
||||
i++;
|
||||
return [3 /*break*/, 1];
|
||||
case 5: return [2 /*return*/];
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
VimeoThumbnail.prototype.destroy = function () {
|
||||
// Remove all event listeners added by vimeothumbnails plugin
|
||||
this.core.LGel.off('.lg.vimeothumbnails');
|
||||
this.core.LGel.off('.vimeothumbnails');
|
||||
};
|
||||
return VimeoThumbnail;
|
||||
}());
|
||||
|
||||
export default VimeoThumbnail;
|
||||
//# sourceMappingURL=lg-vimeo-thumbnail.es5.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).lgVimeoThumbnail=e()}(this,(function(){"use strict";var t=function(){return(t=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)};function e(t,e,n,o){return new(n||(n=Promise))((function(i,r){function u(t){try{a(o.next(t))}catch(t){r(t)}}function l(t){try{a(o.throw(t))}catch(t){r(t)}}function a(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(u,l)}a((o=o.apply(t,e||[])).next())}))}function n(t,e){var n,o,i,r,u={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function l(r){return function(l){return function(r){if(n)throw new TypeError("Generator is already executing.");for(;u;)try{if(n=1,o&&(i=2&r[0]?o.return:r[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,r[1])).done)return i;switch(o=0,i&&(r=[2&r[0],i.value]),r[0]){case 0:case 1:i=r;break;case 4:return u.label++,{value:r[1],done:!1};case 5:u.label++,o=r[1],r=[0];continue;case 7:r=u.ops.pop(),u.trys.pop();continue;default:if(!(i=u.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){u=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){u.label=r[1];break}if(6===r[0]&&u.label<i[1]){u.label=i[1],i=r;break}if(i&&u.label<i[2]){u.label=i[2],u.ops.push(r);break}i[2]&&u.ops.pop(),u.trys.pop();continue}r=e.call(t,u)}catch(t){r=[6,t],o=0}finally{n=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,l])}}}var o="lgInit",i={showVimeoThumbnails:!0,showThumbnailWithPlayButton:!1};return function(){function r(e){return this.core=e,this.settings=t(t({},i),this.core.settings),this}return r.prototype.init=function(){var t=this;this.settings.showVimeoThumbnails&&this.core.LGel.on(o+".vimeothumbnails",(function(e){var n=e.detail.instance;n.$container.find(".lg-thumb-outer").get()&&t.setVimeoThumbnails(n)}))},r.prototype.setVimeoThumbnails=function(t){return e(this,void 0,void 0,(function(){var e,o,i;return n(this,(function(n){switch(n.label){case 0:e=0,n.label=1;case 1:return e<t.galleryItems.length?(o=t.galleryItems[e],(o.__slideVideoInfo||{}).vimeo?[4,fetch("https://vimeo.com/api/oembed.json?url="+encodeURIComponent(o.src))]:[3,4]):[3,5];case 2:return[4,n.sent().json()];case 3:i=n.sent(),t.$container.find(".lg-thumb-item").eq(e).find("img").attr("src",this.settings.showThumbnailWithPlayButton?i.thumbnail_url_with_play_button:i.thumbnail_url),n.label=4;case 4:return e++,[3,1];case 5:return[2]}}))}))},r.prototype.destroy=function(){this.core.LGel.off(".lg.vimeothumbnails"),this.core.LGel.off(".vimeothumbnails")},r}()}));
|
||||
@@ -0,0 +1,190 @@
|
||||
/*!
|
||||
* lightgallery | 2.9.0 | October 1st 2025
|
||||
* http://www.lightgalleryjs.com/
|
||||
* Copyright (c) 2020 Sachin Neravath;
|
||||
* @license GPLv3
|
||||
*/
|
||||
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgVimeoThumbnail = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
function __awaiter(thisArg, _arguments, P, generator) {
|
||||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
||||
return new (P || (P = Promise))(function (resolve, reject) {
|
||||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
||||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
||||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
||||
});
|
||||
}
|
||||
|
||||
function __generator(thisArg, body) {
|
||||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
||||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
||||
function verb(n) { return function (v) { return step([n, v]); }; }
|
||||
function step(op) {
|
||||
if (f) throw new TypeError("Generator is already executing.");
|
||||
while (_) try {
|
||||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
||||
if (y = 0, t) op = [op[0] & 2, t.value];
|
||||
switch (op[0]) {
|
||||
case 0: case 1: t = op; break;
|
||||
case 4: _.label++; return { value: op[1], done: false };
|
||||
case 5: _.label++; y = op[1]; op = [0]; continue;
|
||||
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
||||
default:
|
||||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
||||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
||||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
||||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
||||
if (t[2]) _.ops.pop();
|
||||
_.trys.pop(); continue;
|
||||
}
|
||||
op = body.call(thisArg, _);
|
||||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
||||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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',
|
||||
};
|
||||
|
||||
var vimeoSettings = {
|
||||
showVimeoThumbnails: true,
|
||||
showThumbnailWithPlayButton: false,
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates the vimeo thumbnails plugin.
|
||||
* @param {object} element - lightGallery element
|
||||
*/
|
||||
var VimeoThumbnail = /** @class */ (function () {
|
||||
function VimeoThumbnail(instance) {
|
||||
this.core = instance;
|
||||
// extend module default settings with lightGallery core settings
|
||||
this.settings = __assign(__assign({}, vimeoSettings), this.core.settings);
|
||||
return this;
|
||||
}
|
||||
VimeoThumbnail.prototype.init = function () {
|
||||
var _this = this;
|
||||
if (!this.settings.showVimeoThumbnails) {
|
||||
return;
|
||||
}
|
||||
this.core.LGel.on(lGEvents.init + ".vimeothumbnails", function (event) {
|
||||
var pluginInstance = event.detail.instance;
|
||||
var thumbCont = pluginInstance.$container
|
||||
.find('.lg-thumb-outer')
|
||||
.get();
|
||||
if (thumbCont) {
|
||||
_this.setVimeoThumbnails(pluginInstance);
|
||||
}
|
||||
});
|
||||
};
|
||||
VimeoThumbnail.prototype.setVimeoThumbnails = function (dynamicGallery) {
|
||||
return __awaiter(this, void 0, void 0, function () {
|
||||
var i, item, slideVideoInfo, response, vimeoInfo;
|
||||
return __generator(this, function (_a) {
|
||||
switch (_a.label) {
|
||||
case 0:
|
||||
i = 0;
|
||||
_a.label = 1;
|
||||
case 1:
|
||||
if (!(i < dynamicGallery.galleryItems.length)) return [3 /*break*/, 5];
|
||||
item = dynamicGallery.galleryItems[i];
|
||||
slideVideoInfo = item.__slideVideoInfo || {};
|
||||
if (!slideVideoInfo.vimeo) return [3 /*break*/, 4];
|
||||
return [4 /*yield*/, fetch('https://vimeo.com/api/oembed.json?url=' +
|
||||
encodeURIComponent(item.src))];
|
||||
case 2:
|
||||
response = _a.sent();
|
||||
return [4 /*yield*/, response.json()];
|
||||
case 3:
|
||||
vimeoInfo = _a.sent();
|
||||
dynamicGallery.$container
|
||||
.find('.lg-thumb-item')
|
||||
.eq(i)
|
||||
.find('img')
|
||||
.attr('src', this.settings.showThumbnailWithPlayButton
|
||||
? vimeoInfo.thumbnail_url_with_play_button
|
||||
: vimeoInfo.thumbnail_url);
|
||||
_a.label = 4;
|
||||
case 4:
|
||||
i++;
|
||||
return [3 /*break*/, 1];
|
||||
case 5: return [2 /*return*/];
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
VimeoThumbnail.prototype.destroy = function () {
|
||||
// Remove all event listeners added by vimeothumbnails plugin
|
||||
this.core.LGel.off('.lg.vimeothumbnails');
|
||||
this.core.LGel.off('.vimeothumbnails');
|
||||
};
|
||||
return VimeoThumbnail;
|
||||
}());
|
||||
|
||||
return VimeoThumbnail;
|
||||
|
||||
})));
|
||||
//# sourceMappingURL=lg-vimeo-thumbnail.umd.js.map
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user