1 | "use strict";
|
2 | var __assign = (this && this.__assign) || function () {
|
3 | __assign = Object.assign || function(t) {
|
4 | for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5 | s = arguments[i];
|
6 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7 | t[p] = s[p];
|
8 | }
|
9 | return t;
|
10 | };
|
11 | return __assign.apply(this, arguments);
|
12 | };
|
13 | Object.defineProperty(exports, "__esModule", { value: true });
|
14 | var lg_events_1 = require("../../lg-events");
|
15 | var lg_pager_settings_1 = require("./lg-pager-settings");
|
16 | var Pager = (function () {
|
17 | function Pager(instance, $LG) {
|
18 |
|
19 | this.core = instance;
|
20 | this.$LG = $LG;
|
21 |
|
22 | this.settings = __assign(__assign({}, lg_pager_settings_1.pagerSettings), this.core.settings);
|
23 | return this;
|
24 | }
|
25 | Pager.prototype.getPagerHtml = function (items) {
|
26 | var pagerList = '';
|
27 | for (var i = 0; i < items.length; i++) {
|
28 | 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>";
|
29 | }
|
30 | return pagerList;
|
31 | };
|
32 | Pager.prototype.init = function () {
|
33 | var _this = this;
|
34 | if (!this.settings.pager) {
|
35 | return;
|
36 | }
|
37 | var timeout;
|
38 | this.core.$lgComponents.prepend('<div class="lg-pager-outer"></div>');
|
39 | var $pagerOuter = this.core.outer.find('.lg-pager-outer');
|
40 | $pagerOuter.html(this.getPagerHtml(this.core.galleryItems));
|
41 |
|
42 | $pagerOuter.first().on('click.lg touchend.lg', function (event) {
|
43 | var $target = _this.$LG(event.target);
|
44 | if (!$target.hasAttribute('data-lg-item-id')) {
|
45 | return;
|
46 | }
|
47 | var index = parseInt($target.attr('data-lg-item-id'));
|
48 | _this.core.slide(index, false, true, false);
|
49 | });
|
50 | $pagerOuter.first().on('mouseover.lg', function () {
|
51 | clearTimeout(timeout);
|
52 | $pagerOuter.addClass('lg-pager-hover');
|
53 | });
|
54 | $pagerOuter.first().on('mouseout.lg', function () {
|
55 | timeout = setTimeout(function () {
|
56 | $pagerOuter.removeClass('lg-pager-hover');
|
57 | });
|
58 | });
|
59 | this.core.LGel.on(lg_events_1.lGEvents.beforeSlide + ".pager", function (event) {
|
60 | var index = event.detail.index;
|
61 | _this.manageActiveClass.call(_this, index);
|
62 | });
|
63 | this.core.LGel.on(lg_events_1.lGEvents.updateSlides + ".pager", function () {
|
64 | $pagerOuter.empty();
|
65 | $pagerOuter.html(_this.getPagerHtml(_this.core.galleryItems));
|
66 | _this.manageActiveClass(_this.core.index);
|
67 | });
|
68 | };
|
69 | Pager.prototype.manageActiveClass = function (index) {
|
70 | var $pagerCont = this.core.outer.find('.lg-pager-cont');
|
71 | $pagerCont.removeClass('lg-pager-active');
|
72 | $pagerCont.eq(index).addClass('lg-pager-active');
|
73 | };
|
74 | Pager.prototype.destroy = function () {
|
75 | this.core.outer.find('.lg-pager-outer').remove();
|
76 | this.core.LGel.off('.lg.pager');
|
77 | this.core.LGel.off('.pager');
|
78 | };
|
79 | return Pager;
|
80 | }());
|
81 | exports.default = Pager;
|
82 |
|
\ | No newline at end of file |