1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 | var __assign = function() {
|
24 | __assign = Object.assign || function __assign(t) {
|
25 | for (var s, i = 1, n = arguments.length; i < n; i++) {
|
26 | s = arguments[i];
|
27 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
28 | }
|
29 | return t;
|
30 | };
|
31 | return __assign.apply(this, arguments);
|
32 | };
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 | var lGEvents = {
|
40 | afterAppendSlide: 'lgAfterAppendSlide',
|
41 | init: 'lgInit',
|
42 | hasVideo: 'lgHasVideo',
|
43 | containerResize: 'lgContainerResize',
|
44 | updateSlides: 'lgUpdateSlides',
|
45 | afterAppendSubHtml: 'lgAfterAppendSubHtml',
|
46 | beforeOpen: 'lgBeforeOpen',
|
47 | afterOpen: 'lgAfterOpen',
|
48 | slideItemLoad: 'lgSlideItemLoad',
|
49 | beforeSlide: 'lgBeforeSlide',
|
50 | afterSlide: 'lgAfterSlide',
|
51 | posterClick: 'lgPosterClick',
|
52 | dragStart: 'lgDragStart',
|
53 | dragMove: 'lgDragMove',
|
54 | dragEnd: 'lgDragEnd',
|
55 | beforeNextSlide: 'lgBeforeNextSlide',
|
56 | beforePrevSlide: 'lgBeforePrevSlide',
|
57 | beforeClose: 'lgBeforeClose',
|
58 | afterClose: 'lgAfterClose',
|
59 | rotateLeft: 'lgRotateLeft',
|
60 | rotateRight: 'lgRotateRight',
|
61 | flipHorizontal: 'lgFlipHorizontal',
|
62 | flipVertical: 'lgFlipVertical',
|
63 | autoplay: 'lgAutoplay',
|
64 | autoplayStart: 'lgAutoplayStart',
|
65 | autoplayStop: 'lgAutoplayStop',
|
66 | };
|
67 |
|
68 | var pagerSettings = {
|
69 | pager: true,
|
70 | };
|
71 |
|
72 | var Pager = (function () {
|
73 | function Pager(instance, $LG) {
|
74 |
|
75 | this.core = instance;
|
76 | this.$LG = $LG;
|
77 |
|
78 | this.settings = __assign(__assign({}, pagerSettings), this.core.settings);
|
79 | return this;
|
80 | }
|
81 | Pager.prototype.getPagerHtml = function (items) {
|
82 | var pagerList = '';
|
83 | for (var i = 0; i < items.length; i++) {
|
84 | 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>";
|
85 | }
|
86 | return pagerList;
|
87 | };
|
88 | Pager.prototype.init = function () {
|
89 | var _this = this;
|
90 | if (!this.settings.pager) {
|
91 | return;
|
92 | }
|
93 | var timeout;
|
94 | this.core.$lgComponents.prepend('<div class="lg-pager-outer"></div>');
|
95 | var $pagerOuter = this.core.outer.find('.lg-pager-outer');
|
96 | $pagerOuter.html(this.getPagerHtml(this.core.galleryItems));
|
97 |
|
98 | $pagerOuter.first().on('click.lg touchend.lg', function (event) {
|
99 | var $target = _this.$LG(event.target);
|
100 | if (!$target.hasAttribute('data-lg-item-id')) {
|
101 | return;
|
102 | }
|
103 | var index = parseInt($target.attr('data-lg-item-id'));
|
104 | _this.core.slide(index, false, true, false);
|
105 | });
|
106 | $pagerOuter.first().on('mouseover.lg', function () {
|
107 | clearTimeout(timeout);
|
108 | $pagerOuter.addClass('lg-pager-hover');
|
109 | });
|
110 | $pagerOuter.first().on('mouseout.lg', function () {
|
111 | timeout = setTimeout(function () {
|
112 | $pagerOuter.removeClass('lg-pager-hover');
|
113 | });
|
114 | });
|
115 | this.core.LGel.on(lGEvents.beforeSlide + ".pager", function (event) {
|
116 | var index = event.detail.index;
|
117 | _this.manageActiveClass.call(_this, index);
|
118 | });
|
119 | this.core.LGel.on(lGEvents.updateSlides + ".pager", function () {
|
120 | $pagerOuter.empty();
|
121 | $pagerOuter.html(_this.getPagerHtml(_this.core.galleryItems));
|
122 | _this.manageActiveClass(_this.core.index);
|
123 | });
|
124 | };
|
125 | Pager.prototype.manageActiveClass = function (index) {
|
126 | var $pagerCont = this.core.outer.find('.lg-pager-cont');
|
127 | $pagerCont.removeClass('lg-pager-active');
|
128 | $pagerCont.eq(index).addClass('lg-pager-active');
|
129 | };
|
130 | Pager.prototype.destroy = function () {
|
131 | this.core.outer.find('.lg-pager-outer').remove();
|
132 | this.core.LGel.off('.lg.pager');
|
133 | this.core.LGel.off('.pager');
|
134 | };
|
135 | return Pager;
|
136 | }());
|
137 |
|
138 | export default Pager;
|
139 |
|