1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | (function (global, factory) {
|
9 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
10 | typeof define === 'function' && define.amd ? define(factory) :
|
11 | (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgRelativeCaption = factory());
|
12 | }(this, (function () { 'use strict';
|
13 |
|
14 | |
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 | var __assign = function() {
|
30 | __assign = Object.assign || function __assign(t) {
|
31 | for (var s, i = 1, n = arguments.length; i < n; i++) {
|
32 | s = arguments[i];
|
33 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
34 | }
|
35 | return t;
|
36 | };
|
37 | return __assign.apply(this, arguments);
|
38 | };
|
39 |
|
40 | |
41 |
|
42 |
|
43 |
|
44 |
|
45 | var lGEvents = {
|
46 | afterAppendSlide: 'lgAfterAppendSlide',
|
47 | init: 'lgInit',
|
48 | hasVideo: 'lgHasVideo',
|
49 | containerResize: 'lgContainerResize',
|
50 | updateSlides: 'lgUpdateSlides',
|
51 | afterAppendSubHtml: 'lgAfterAppendSubHtml',
|
52 | beforeOpen: 'lgBeforeOpen',
|
53 | afterOpen: 'lgAfterOpen',
|
54 | slideItemLoad: 'lgSlideItemLoad',
|
55 | beforeSlide: 'lgBeforeSlide',
|
56 | afterSlide: 'lgAfterSlide',
|
57 | posterClick: 'lgPosterClick',
|
58 | dragStart: 'lgDragStart',
|
59 | dragMove: 'lgDragMove',
|
60 | dragEnd: 'lgDragEnd',
|
61 | beforeNextSlide: 'lgBeforeNextSlide',
|
62 | beforePrevSlide: 'lgBeforePrevSlide',
|
63 | beforeClose: 'lgBeforeClose',
|
64 | afterClose: 'lgAfterClose',
|
65 | rotateLeft: 'lgRotateLeft',
|
66 | rotateRight: 'lgRotateRight',
|
67 | flipHorizontal: 'lgFlipHorizontal',
|
68 | flipVertical: 'lgFlipVertical',
|
69 | autoplay: 'lgAutoplay',
|
70 | autoplayStart: 'lgAutoplayStart',
|
71 | autoplayStop: 'lgAutoplayStop',
|
72 | };
|
73 |
|
74 | var relativeCaptionSettings = {
|
75 | relativeCaption: false,
|
76 | };
|
77 |
|
78 | |
79 |
|
80 |
|
81 | var RelativeCaption = (function () {
|
82 | function RelativeCaption(instance) {
|
83 |
|
84 | this.core = instance;
|
85 |
|
86 | var defaultSettings = {
|
87 | addClass: this.core.settings.addClass + ' lg-relative-caption',
|
88 | };
|
89 | this.core.settings = __assign(__assign({}, this.core.settings), defaultSettings);
|
90 |
|
91 | this.settings = __assign(__assign(__assign({}, relativeCaptionSettings), this.core.settings), defaultSettings);
|
92 | return this;
|
93 | }
|
94 | RelativeCaption.prototype.init = function () {
|
95 | var _this = this;
|
96 | if (!this.settings.relativeCaption) {
|
97 | return;
|
98 | }
|
99 | this.core.LGel.on(lGEvents.slideItemLoad + ".caption", function (event) {
|
100 | var _a = event.detail, index = _a.index, delay = _a.delay;
|
101 | setTimeout(function () {
|
102 | if (index === _this.core.index) {
|
103 | _this.setRelativeCaption(index);
|
104 | }
|
105 | }, delay);
|
106 | });
|
107 | this.core.LGel.on(lGEvents.afterSlide + ".caption", function (event) {
|
108 | var index = event.detail.index;
|
109 | setTimeout(function () {
|
110 | var slide = _this.core.getSlideItem(index);
|
111 | if (slide.hasClass('lg-complete')) {
|
112 | _this.setRelativeCaption(index);
|
113 | }
|
114 | });
|
115 | });
|
116 | this.core.LGel.on(lGEvents.beforeSlide + ".caption", function (event) {
|
117 | var index = event.detail.index;
|
118 | setTimeout(function () {
|
119 | var slide = _this.core.getSlideItem(index);
|
120 | slide.removeClass('lg-show-caption');
|
121 | });
|
122 | });
|
123 | this.core.LGel.on(lGEvents.containerResize + ".caption", function (event) {
|
124 | _this.setRelativeCaption(_this.core.index);
|
125 | });
|
126 | };
|
127 | RelativeCaption.prototype.setCaptionStyle = function (index, rect, slideWrapRect) {
|
128 | var $subHtmlInner = this.core
|
129 | .getSlideItem(index)
|
130 | .find('.lg-relative-caption-item');
|
131 | var $subHtml = this.core.getSlideItem(index).find('.lg-sub-html');
|
132 | $subHtml.css('width', rect.width + "px").css('left', rect.left + "px");
|
133 | var subHtmlRect = $subHtmlInner.get().getBoundingClientRect();
|
134 | var bottom = slideWrapRect.bottom - rect.bottom - subHtmlRect.height;
|
135 | $subHtml.css('top', "auto").css('bottom', Math.max(bottom, 0) + "px");
|
136 | };
|
137 | RelativeCaption.prototype.setRelativeCaption = function (index) {
|
138 | var slide = this.core.getSlideItem(index);
|
139 | if (slide.hasClass('lg-current')) {
|
140 | var rect = this.core
|
141 | .getSlideItem(index)
|
142 | .find('.lg-object')
|
143 | .get()
|
144 | .getBoundingClientRect();
|
145 | var slideWrapRect = this.core
|
146 | .getSlideItem(index)
|
147 | .get()
|
148 | .getBoundingClientRect();
|
149 | this.setCaptionStyle(index, rect, slideWrapRect);
|
150 | slide.addClass('lg-show-caption');
|
151 | }
|
152 | };
|
153 | RelativeCaption.prototype.destroy = function () {
|
154 | this.core.LGel.off('.caption');
|
155 | };
|
156 | return RelativeCaption;
|
157 | }());
|
158 |
|
159 | return RelativeCaption;
|
160 |
|
161 | })));
|
162 |
|