https://www.mango-office.ru/static_files_new/js/main.js

1$(function () {
2    let jsPhotoswipeItemSelector = '.js-photoswipe-item',
3        selectors = [jsPhotoswipeItemSelector, '.resizer2fancy, [data-toggle=gallery]'],
4        appended = false;
5
6    let addScript = function (src, onload = false) {
7        let script = document.createElement("SCRIPT"),
8            head = document.getElementsByTagName("head")[0];
9        script.type = "text/javascript";
10        script.src = src;
11        if (onload) {
12            script.onload = onload;
13        }
14        head.appendChild(script);
15
16    };
17    let loadCss = function (cssPath) {
18        let head = document.getElementsByTagName('head')[0];
19        let link = document.createElement('link');
20        link.rel = 'stylesheet';
21        link.type = 'text/css';
22        link.href = cssPath;
23        link.media = 'all';
24        head.appendChild(link);
25    }
26
27    selectors.forEach(selector => {
28        if ($(selector).length) {
29            if (!appended) {
30                appended = true;
31
32                $('body').append(
33                    $('<div>').attr('tabindex', '-1').attr('role', 'dialog').attr('aria-hidden', 'true').addClass('pswp')
34                        .append(
35                            $('<div>').addClass('pswp__bg')
36                        )
37                        .append(
38                            $('<div>').addClass('pswp__scroll-wrap')
39                                .append(
40                                    $('<div>').addClass('pswp__container')
41                                        .append(
42                                            $('<div>').addClass('pswp__item')
43                                        )
44                                        .append(
45                                            $('<div>').addClass('pswp__item')
46                                        )
47                                        .append(
48                                            $('<div>').addClass('pswp__item')
49                                        )
50                                ).append(
51                                $('<div>').addClass('pswp__ui pswp__ui--hidden').append(
52                                    $('<div>').addClass('pswp__top-bar')
53                                        .append(
54                                            $('<div>').addClass('pswp__counter')
55                                        )
56                                        .append(
57                                            $('<button>').addClass('pswp__button pswp__button--close').attr('title', 'Закрыть (Esc)')
58                                        )
59                                        .append(
60                                            $('<button>').addClass('pswp__button pswp__button--share').attr('title', 'Share')
61                                        ).append(
62                                        $('<button>').addClass('pswp__button pswp__button--fs').attr('title', 'На весь экран')
63                                    ).append(
64                                        $('<button>').addClass('pswp__button pswp__button--zoom').attr('title', 'Zoom')
65                                    ).append(
66                                        $('<div>').addClass('pswp__preloader').append(
67                                            $('<div>').addClass('pswp__preloader__icn').append(
68                                                $('<div>').addClass('pswp__preloader__cut').append(
69                                                    $('<div>').addClass('pswp__preloader__donut')
70                                                )
71                                            )
72                                        )
73                                    )
74                                ).append(
75                                    $('<div>').addClass('pswp__share-modal pswp__share-modal--hidden pswp__single-tap').append(
76                                        $('<div>').addClass('pswp__share-tooltip')
77                                    )
78                                ).append(
79                                    $('<button>').addClass('pswp__button pswp__button--arrow--left').attr('title', 'Назад (arrow left)')
80                                ).append(
81                                    $('<button>').addClass('pswp__button pswp__button--arrow--right').attr('title', 'Вперед (arrow right)')
82                                ).append(
83                                    $('<div>').addClass('pswp__caption').append(
84                                        $('<div>').addClass('pswp__caption__center')
85                                    )
86                                )
87                            )
88                        )
89                );
90            }
91
92            let initPhotoSwipeFromDOM = function (gallerySelector) {
93                let items = [], allItems, loadedItems = 0, iItem = 0;
94                allItems = $(gallerySelector).each(function () {
95                    let img = new Image(), t = this;
96                    (function (i) {
97                        img.onload = function () {
98                            loadedItems++;
99                            items[i] = {
100                                src: $(t).attr('href'),
101                                w: this.width,
102                                h: this.height,
103                                title: $(t).attr('title') || ''
104                            };
105
106                            if (loadedItems === allItems) {
107                                if (selector === jsPhotoswipeItemSelector) {
108                                    init(false, false);
109                                } else {
110                                    init();
111                                }
112                                let hash = document.location.hash;
113                                if (hash.indexOf('&pid') > -1) {
114                                    $(gallerySelector).eq(0).trigger('click');
115                                }
116                            }
117                        };
118                    })(iItem);
119
120                    $(t).attr('href') && (img.src = $(t).attr('href'));
121
122                    iItem++;
123                }).size();
124
125                let init = function (arrows = true, counter = true) {
126                    $(gallerySelector).click(function (e) {
127                        let t = this;
128
129                        e.stopPropagation();
130                        e.preventDefault();
131
132                        let options = {
133
134                            galleryUID: 'gallery',
135
136                            addCaptionHTMLFn: function (item, captionEl, isFake) {
137
138                                if (!item.title) {
139                                    captionEl.children[0].innerText = '';
140                                    return false;

141                                }
142
143                                $(captionEl).children().eq(0).html(item.title);
144
145                                return true;
146                            }
147
148                        };
149
150                        options.index = 1;
151
152                        let i;
153                        for (i in items) {
154                            if (items[i]['src'] === $(t).attr('href')) options.index = parseInt(i);
155                        }
156
157                        options.mainClass = 'pswp--minimal--dark';
158                        options.barsSize = {top: 0, bottom: 0};
159                        options.captionEl = true;
160                        options.fullscreenEl = false;
161                        options.shareEl = false;
162                        options.bgOpacity = 0.85;
163                        options.tapToClose = true;
164                        options.tapToToggleControls = false;
165                        options.closeOnScroll = false;
166                        options.arrowEl = arrows;
167                        options.counterEl = counter;
168
169                        // Pass data to PhotoSwipe and initialize it
170                        let gallery = new PhotoSwipe($('.pswp').get(0), PhotoSwipeUI_Default, items, options);
171                        gallery.init();
172
173                        return false;
174                    });
175                }
176            };
177
178            addScript('/static_files_new/js/plugins/photoswipe/photoswipe.min.js', function () {
179                addScript('/static_files_new/js/plugins/photoswipe/photoswipe-ui-default.js', function () {
180                    loadCss('/static_files_new/js/plugins/photoswipe/photoswipe.css');
181                    initPhotoSwipeFromDOM(selector);
182                });
183            });
184        }
185    });
186
187    $(document).on('click', '.js-download-mt', function () {
188        mangoTrigger('mt-download');
189    });
190});
191
192$(function () {
193    let selector = '.js-image-gallery';
194
195    if ($(selector).length) {
196        let MCModalImg = function(src) {
197
198            let modalHtml = '' +
199                '    <div class="box-modal fade" id="video-modal" tabindex="-1" role="dialog"\n' +
200                '         aria-hidden="true">\n' +
201                '        <div class="modal-dialog modal-lg" role="document">\n' +
202                '            <div class="modal-content">\n' +
203                '                <div class="modal-header">\n' +
204                '                    <button type="button" class="close arcticmodal-close" data-dismiss="modal" aria-label="Close">\n' +
205                '                        <svg class="icon icon--close">\n' +
206                '                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon--close"></use>\n' +
207                '                        </svg>\n' +
208                '                    </button>\n' +
209                '                </div>\n' +
210                '                <div class="modal-body">\n' +
211                '                    <img style="-webkit-user-select: none;" src="' + src + '">' +
212                '                </div>\n' +
213                '            </div>\n' +
214                '        </div>\n' +
215                '    </div>'
216
217            let modalWindow = $(modalHtml);
218
219            modalWindow.arcticmodal({
220                'afterClose': function () {
221                    const body = document.querySelector('body')
222                    body.style.overflow = 'hidden auto'
223                    body.style.marginRight = '0'
224                }
225            });
226        }
227        $(selector).click(function (e) {
228            let t = this;
229
230            e.stopPropagation();
231            e.preventDefault();
232            let src = $(t).attr('href');
233            if (src) {
234                MCModalImg(src);
235            }
236        });
237    }
238});