https://www.reichertspr.com/-/media/themes/ameteksxa/basesite/base…/scripts/component-overlay.js?thm=1

1XA.component.overlay = function ($) {
2
3    var api = {},
4        href = window.location.href,
5        host = location.host,
6        label,
7        overlayPlaceholder = false,
8        marginTop = 100;
9
10    function isPreviewMode()
11    {
12        if (href.indexOf("sc_mode=preview") > -1)
13            return true;
14
15        var $hdPageMode = $('#hdPageMode');
16
17        return $hdPageMode.length > 0 && $hdPageMode.attr('value') == 'preview';
18    }
19
20    function isEditMode() {
21        if (href.indexOf("sc_mode=edit") > -1)
22            return true;
23
24        var $hdPageMode = $('#hdPageMode');
25
26        return $hdPageMode.length > 0 && $hdPageMode.attr('value') == 'edit';
27    }
28
29    function isOverlayPage() {
30        return $('#wrapper').hasClass('overlay-page');
31    }
32
33    function hasOverlayContent() {
34        return $(".overlay-source").length;
35    }
36
37    function resizeOverlay(inner, content, options) {
38        var unit = "px";
39        var css = {
40            "width" : "",
41            "height" : ""
42        };
43        var wh = $(window).height();
44
45        if (options.percent) {
46            unit = "%";
47            inner.addClass("overlay-percent");
48            if(isEditMode()){
49                inner.addClass("edit")
50            }
51        } else {
52            inner.removeClass("overlay-percent");
53            if(isEditMode()){
54                inner.removeClass("edit")
55            }
56        }
57
58        if (options.width) {
59            css["width"] = options.width + unit;
60        }
61        if (options.height) {
62            css["height"] = options.height + unit;
63        }
64
65        css["max-height"] = (wh - marginTop - 0.1 * wh) + "px";
66        
67        content.css(css);
68    }
69
70    function getUrlVariables(url) {
71        var q = url.split('?')[1],
72            vars = [],
73            hash;
74
75        if (q != undefined) {
76            q = q.split('&');
77            for (var i = 0; i < q.length; i++) {
78                hash = q[i].split('=');
79                vars.push(hash[1]);
80                vars[hash[0]] = hash[1];
81            }
82        }
83
84        return vars;
85    }
86
87    function getSize(vars){
88        var obj = {};
89
90        if(vars["width"] !== null) {
91            obj["width"] = vars["width"];
92        }
93
94        if(vars["height"] !== null) {
95            obj["height"] = vars["height"];
96        }
97
98        return obj;
99    }
100
101    function checkInternal(url){
102        if(url.indexOf(host) > -1){
103            return true;
104        }
105        return false;
106    }
107
108    function  checkImage(url){
109        var ext = url.split("?")[0].split('.').pop();
110        if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) > -1) {
111            return true;
112        }
113
114        return false;
115    }
116
117
118    function loadOverlay(url, overlay) {
119        var host = location.host,
120            content = overlay.find(".overlay-inner"),
121            overlayContent = overlay.find(".component-content"),
122            vars = getUrlVariables(url),
123            internalLink = checkInternal(url),
124            overlaySize = getSize(vars),
125            suffix;
126
127        content.removeAttr('style');
128
129        if(internalLink){
130            if (checkImage(url)) {
131                content.empty().append($("<img>", { src: url }));
132                content.css(overlaySize);
133                showOverlay(overlay);
134            }
135            else if (url.indexOf("overlaytype=iframe") > -1) {
136                content.empty().append($("<iframe>", { src: url, style: "width: 100%; height: 100%" }));
137                content.css(overlaySize);
138                showOverlay(overlay);
139            }
140            else {
141                //suffix = "sc_device=overlay";
142                //url += (url.indexOf("?") == -1 ? "?" : "&") + suffix;
143
144                if (isPreviewMode()) {
145                    suffix = "cf_overlay=1";
146                    url = url.replace("sitecore/shell/");
147                    url += (url.indexOf("?") == -1 ? "?" : "&") + suffix
148                }
149
150                $.get(url, function(data) {
151                    var overlayData = $(data).before().first();
152
153                    resizeOverlay(content, overlayContent, {
154                        width: overlayData.attr("data-width"),
155                        height: overlayData.data("height"),
156                        percent: overlayData.data("percent")
157                    });
158
159                    content.empty().append(data);
160                    XA.init();
161                    showOverlay(overlay);
162                });
163            }
164        }
165        else {
166            if(checkImage(url)) {
167                content.empty().append($("<img>", { src: url }));
168            }
169            else {
170                content.empty().append($("<iframe >", { src: url, style: "width: 100%; height: 100%" }));
171            }
172            content.css(overlaySize);
173            showOverlay(overlay);
174        }
175
176    };
177
178    function preShowOverlay(overlay, overlayContent) {
179        overlay.css({
180            "opacity": 1
181        }).show();
182    }
183
184    function showOverlay(overlay) {
185        var i,q,links,close,content;
186        overlay.show().animate({
187            opacity: 1
188        });
189
190        close = overlay.find(".overlay-close-link");
191        setTimeout(function(){close.focus();}

191,0);
192        links = overlay.find("a:not(.overlay-close-link)");
193        i = 2;
194        for(q=0;q<links.length;q++){
195            $(links[q]).attr("tabIndex",i++);
196        }
197        content = overlay.find(".overlay-inner");
198        content.attr("tabIndex",i);
199        content.blur(function(args){
200            args.preventDefault();
201            args.stopPropagation();
202            setTimeout(function(){close.focus()},0);
203        });
204
205        XAContext.Tracking.track(
206            XAContext.Domain.TrackingTypes().event,
207            {
208                category: "Overlay",
209                event: "open",
210                label: label,
211                data: 0
212            },
213            "sync"
214        );
215        return overlay;
216    };
217
218    function hideOverlay(overlay) {
219        var content = overlay.find(".overlay-inner");
220
221        overlay.animate(
222            { opacity: 0 },
223            function () {
224                overlay.hide();
225                content.empty();
226
227                if (mejs) {
228                    for (var p in mejs.players) {
229                        if ($("#" + mejs.players[p].id).parents(".overlay").length == 1) {
230                            $("#" + mejs.players[p].id + ' video').attr('src', '');
231                            mejs.players[p].remove();
232                            mejs.players.splice(p, 1);
233                        }
234                    }
235                }
236            }
237        );
238
239        XAContext.Tracking.track(
240            XAContext.Domain.TrackingTypes().event,
241            {
242                category: "Overlay",
243                event: "close",
244                label: label,
245                data: 0
246            },
247            "sync"
248        );
249        return overlay;
250    };
251
252    function createOverlay() {
253        var overlay = "<div class='overlay-wrapper'>" +
254                        "<div class='overlay component'>" +
255                            "<div class='component-content'>" +
256                                "<div class='overlay-close'><a tabIndex='1' class='overlay-close-link' href='#'>×</a></div>" +
257                                "<div class='overlay-inner' tabIndex='2'></div>" +
258                            "</div>" +
259                         "</div>"+
260                        "</div>";
261
262        $("body").append(overlay);
263    }
264
265    api.init = function () {
266
267        if(!overlayPlaceholder && hasOverlayContent()){
268            createOverlay();
269        }
270
271        if (isOverlayPage()) {
272            var page = $(".overlay-page"),
273                overlay = $("#spnOverlay"),
274                overlayContent = page.children(".component-content"),
275                content = overlayContent.children(".overlay-inner");
276            
277            resizeOverlay(content, overlayContent, {
278                width: overlay.data("width"),
279                height: overlay.data("height"),
280                percent: overlay.data("percent")
281            });
282            overlayContent.on("click", function(event){
283                 event.stopPropagation();
284            });
285            page.on("click", function (event) {
286                if (isPreviewMode()) {
287                    location = location.href.replace("sc_mode=preview","sc_mode=edit")
288                }             
289            });     
290        }
291
292        var overlay = $(".overlay-wrapper > .overlay"),
293            overlayContent = overlay.find(".component-content"),
294            overlayClose = overlay.find(".overlay-close"),
295            overlaySource = $(".overlay-source a:not(.initialized), a.overlay-source:not(.initialized)"),
296            overlayInner = $(".overlay-inner"),
297            overlayCloseLink = overlay.find(".overlay-close-link"),
298            closeAction,
299            overlayClickSource;
300
301        closeAction = function(){
302            hideOverlay(overlay);
303            overlayInner.off("blur");
304            setTimeout(function(){
305                if(overlayClickSource != null){
306                    overlayClickSource.focus();
307                }
308            },0);
309        };
310
311        if(!overlayPlaceholder){
312            overlayContent.on("click", function(event){
313                event.stopPropagation();
314            });
315
316            overlay.on("click", function (event) {
317                closeAction();
318            });
319            
320            $("body").keyup(function(args){
321                args.stopPropagation();
322                if(args.which == 27){
323                    closeAction();
324                }
325            });
326

327            overlayCloseLink.on("click", function(args){
328                args.preventDefault();
329                closeAction();
330            });
331
332            $(window).on("resize", function(){
333                var height = $(window).height();
334                height = height - marginTop - 0.1 * height;
335                overlayContent.css("max-height", height + "px");
336            });
337
338            overlayPlaceholder = true;
339        }
340
341
342        overlaySource.each(function(){
343            if (isEditMode()) {
344                return;
345            }
346
347            $(this).on("click", function (event) {
348                overlayClickSource = event.currentTarget;
349                if (!isEditMode()) {
350                    event.preventDefault();
351                    preShowOverlay(overlay, overlayContent);
352
353                    var uri = this.href;
354                    loadOverlay(uri, overlay);
355
356                    var href = this.href.split('/');
357                    for (var i = 0; i <= href.length; i++) {
358                        label = href.pop();
359                        if (label.length == 0)
360                            continue;
361                        break;
362                    }
363                }
364            });
365
366            $(this).focus(function(args){
367                args.preventDefault();
368                if(args.currentTarget === overlayClickSource){
369                    overlayClickSource = null;
370                }
371            });
372
373            $(this).addClass("initialized");
374        });
375
376
377    };
378
379    return api;
380
381} (jQuery);
382
383XA.register("overlay", XA.component.overlay);