https://tristana.com.ua/templates/garantstandart/script.responsive.js

1
2/*jshint forin:true, noarg:true, noempty:true, eqeqeq:true, bitwise:true, strict:true, undef:true, curly:false, browser:true, jquery:false */
3/*global jQuery */
4
5var responsiveDesign = {
6    isResponsive: false,
7    isDesktop: false,
8    isTablet: false,
9    isPhone: false,
10    windowWidth: 0,
11    responsive: (function ($) {
12        "use strict";
13        return function () {
14            var html = $("html");
15            this.windowWidth = $(window).width();
16            var triggerEvent = false;
17
18            var isRespVisible = $("#art-resp").is(":visible");
19            if (isRespVisible && !this.isResponsive) {
20                html.addClass("responsive").removeClass("desktop");
21                this.isResponsive = true;
22                this.isDesktop = false;
23                triggerEvent = true;
24            } else if (!isRespVisible && !this.isDesktop) {
25                html.addClass("desktop").removeClass("responsive responsive-tablet responsive-phone");
26                this.isResponsive = this.isTablet = this.isPhone = false;
27                this.isDesktop = true;
28                triggerEvent = true;
29            }
30
31            if (this.isResponsive) {
32                if ($("#art-resp-t").is(":visible") && !this.isTablet) {
33                    html.addClass("responsive-tablet").removeClass("responsive-phone");
34                    this.isTablet = true;
35                    this.isPhone = false;
36                    triggerEvent = true;
37                } else if ($("#art-resp-m").is(":visible") && !this.isPhone) {
38                    html.addClass("responsive-phone").removeClass("responsive-tablet");
39                    this.isTablet = false;
40                    this.isPhone = true;
41                    triggerEvent = true;
42                }
43            }
44
45            if (triggerEvent) {
46                $(window).trigger("responsive", this);
47            }
48
49            $(window).trigger("responsiveResize", this);
50        };
51    })(jQuery),
52    initialize: (function ($) {
53        "use strict";
54        return function () {
55            $("<div id=\"art-resp\"><div id=\"art-resp-m\"></div><div id=\"art-resp-t\"></div></div>").appendTo("body");
56            var resizeTimeout;
57            $(window).resize(function () {
58                clearTimeout(resizeTimeout);
59                resizeTimeout = setTimeout(function () { responsiveDesign.responsive(); }, 25);
60            });
61            $(window).trigger("resize");
62        };
63    })(jQuery)
64};
65
66function responsiveAbsBg(responsiveDesign, el, bg) {
67    "use strict";
68    if (bg.length === 0)
69        return;
70
71    var desktopBgTop = bg.attr("data-bg-top");
72    var desktopBgHeight = bg.attr("data-bg-height");
73
74    if (responsiveDesign.isResponsive) {
75        if (typeof desktopBgTop === "undefined" || desktopBgTop === false) {
76            bg.attr("data-bg-top", bg.css("top"));
77            bg.attr("data-bg-height", bg.css("height"));
78        }
79
80        var elTop = el.offset().top;
81        var elHeight = el.outerHeight();
82        bg.css("top", elTop + "px");
83        bg.css("height", elHeight + "px");
84    } else if (typeof desktopBgTop !== "undefined" && desktopBgTop !== false) {
85        bg.css("top", desktopBgTop);
86        bg.css("height", desktopBgHeight);
87        bg.removeAttr("data-bg-top");
88        bg.removeAttr("data-bg-height");
89    }
90}
91
92var responsiveImages = (function ($) {
93    "use strict";
94    return function (responsiveDesign) {
95        $("img[width]").each(function () {
96            var img = $(this), newWidth = "", newMaxWidth = "", newHeight = "";
97            if (responsiveDesign.isResponsive) {
98                newWidth = "auto";
99                newHeight = "auto";
100                newMaxWidth = "100%";
101
102                var widthAttr = img.attr("width");
103                if (widthAttr !== null && typeof (widthAttr) === "string" && widthAttr.indexOf("%") === -1) {
104                    newWidth = "100%";
105                    newMaxWidth = parseInt($.trim(widthAttr), 10) + "px";
106                }
107            }
108            img.css("width", newWidth).css("max-width", newMaxWidth).css("height", newHeight);
109        });
110    };
111})(jQuery);
112
113var responsiveVideos = (function ($) {
114    "use strict";
115    return function (responsiveDesign) {
116        $("iframe,object,embed").each(function () {
117            var obj = $(this);
118            var container = obj.parent(".art-responsive-embed");
119            if (responsiveDesign.isResponsive) {
120                if (container.length !== 0)
121                    return;
122                container = $("<div class=\"art-responsive-embed\">").insertBefore(obj);
123                obj.appendTo(container);
124            } else if (container.length > 0) {
125                obj.insertBefore(container);
126                container.remove();
127            }
128        });
129    };
130})(jQuery);
131
132var responsiveTextblocks = (function ($) {
133    "use strict";
134    return function (slider, responsiveDesign) {
135        slider.find(".art-textblock").each(function () {
136            if (parseInt(slider.attr("data-width"), 10) === 0) {
137                return true;
138            }
139            var tb = $(this);
140            var c = slider.width() / slider.attr("data-width");
141            tb.css({
142                "height": "",
143                "width": "",
144                "top": "",
145                "margin-left": ""
146            });
147            if (responsiveDesign.isResponsive) {
148                var tbHeight = parseInt(tb.css("height"), 10);
149                var tbWidth = parseInt(tb.css("width"), 10);
150                var tbTop = parseInt(tb.css("top"), 10);
151                var tbMargin = parseInt(tb.css("margin-left"), 10);
152                tb.add(tb.children()).css({
153                    "height": tbHeight * c,
154                    "width": tbWidth * c
155                });
156                tb.css("top", tbTop * c);
157                tb.attr("style", function (i, s) { return s + "margin-left: " + (tbMargin * c) + "px !important"; });
158            }
159        });
160    };
161})(jQuery);
162
163var responsiveSlider = (function ($) {
164    "use strict";
165    return function (responsiveDesign) {
166        $(".art-slider").each(function () {
167            var s = $(this);
168
169            responsiveTextblocks(s, responsiveDesign);
170
171            if (!responsiveDesign.isResponsive) {
172                s.removeAttr("style");
173                return;
174            }
175
176            // set size
177            var initialWidth = s.attr("data-width");
178            var initialHeight = s.attr("data-height");
179            var c = s.width() / initialWidth;
180            var h = c * initialHeight;
181            s.css("height", h + "px");
182
183            // set slider
184            var obj = s.data("slider");
185            if (obj && obj.settings.helper) {
186                var inner = s.find(".art-slider-inner");
187                obj.settings.helper.updateSize(inner, { width: initialWidth, height: initialHeight });

188            }
189        });
190    };
191})(jQuery);
192
193var responsiveCollages = (function ($) {
194    "use strict";
195    return function (responsiveDesign) {
196        $(".art-collage").each(function () {
197            var collage = $(this);
198            var parent = collage.closest(":not(.image-caption-wrapper, .art-collage)");
199            var parentWidth = parent.width();
200            var collageWidth = collage.width();
201            var sliderOriginalWidth = collage.children(".art-slider").attr("data-width");
202            if (responsiveDesign.isResponsive && collageWidth > parentWidth) {
203                collage
204                    .add(collage.find(".art-slider"))
205                    .add(collage.closest(".image-caption-wrapper"))
206                    .css("width", "100%");
207            } else if (!responsiveDesign.isResponsive || collageWidth > sliderOriginalWidth) {
208                collage
209                    .add(collage.find(".art-slider"))
210                    .add(collage.closest(".image-caption-wrapper"))
211                    .css("width", "");
212            }
213        });
214    };
215})(jQuery);
216
217var responsiveNavigator = (function ($) {
218    "use strict";
219    return function (responsiveDesign) {
220        $(".art-slider").each(function () {
221            var currentSlider = $(this);
222            var currentSliderWidth = currentSlider.width();
223            var sliderNavigator = currentSlider.siblings(".art-slidenavigator");
224            if (sliderNavigator.length) {
225                if (responsiveDesign.isResponsive) {
226                    // left offset
227                    var left = sliderNavigator.attr("data-left");
228                    var margin = currentSliderWidth - currentSliderWidth * parseFloat(left) / 100 - sliderNavigator.outerWidth(false);
229                    if (margin < 0) {
230                        sliderNavigator.css("margin-left", margin);
231                    }
232                    // top
233                    var sliderHeight = currentSlider.css("height");
234                    // reset top to original value
235                    sliderNavigator.css("top", "");
236                    // newTop = oldTop - (sliderOrinalHeight - sliderCurrentHeight)
237                    var offset = parseInt(sliderNavigator.attr("data-offset") || 0, 10);
238                    sliderNavigator.css("top", parseInt(sliderNavigator.css("top"), 10) - (currentSlider.attr("data-height") - parseInt(sliderHeight, 10)) + offset);
239                } else {
240                    sliderNavigator.removeAttr("data-offset");
241                    sliderNavigator.removeAttr("style");
242                }
243            }
244        });
245    };
246})(jQuery);
247
248jQuery(window).bind("responsive", (function ($) {
249    "use strict";
250    return function (event, responsiveDesign) {
251        responsiveImages(responsiveDesign);
252        responsiveVideos(responsiveDesign);
253
254        if ($.browser.msie && $.browser.version <= 8) return;
255
256        if (responsiveDesign.isResponsive) {
257            $(window).on("responsiveResize.slider", function () {
258                responsiveSlideshow(responsiveDesign);
259            });
260        } else {
261            $(window).trigger("responsiveResize.slider");
262            $(window).off("responsiveResize.slider");
263        }
264    };
265})(jQuery));
266
267function responsiveSlideshow(responsiveDesign) {
268    "use strict";
269    responsiveCollages(responsiveDesign); // must be first
270    responsiveSlider(responsiveDesign);
271    responsiveNavigator(responsiveDesign);
272}
273
274
275
276
277
278
279var responsiveHeader = (function ($) {
280    "use strict";
281    return function(responsiveDesign) {
282        var header = $("header.art-header");
283        var headerSlider = header.find(".art-slider");
284
285        if (headerSlider.length) {
286            var firstSlide = headerSlider.find(".art-slide-item").first();
287            var slidebg = firstSlide.css("background-image").split(",");
288            var previousSibling = headerSlider.prev();
289            var sliderNav = headerSlider.siblings(".art-slidenavigator");
290            if (slidebg.length && responsiveDesign.isResponsive) {
291                header.css("background-image", slidebg[slidebg.length - 1]);
292                header.css("min-height", "0");
293                // if prev is menu in header
294                if (previousSibling.is("nav.art-nav")) {
295                    sliderNav.attr("data-offset", previousSibling.height());
296                }
297            } else {
298                sliderNav.removeAttr("data-offset");
299                header.removeAttr("style");
300            }
301        }
302    };
303})(jQuery);
304
305jQuery(window).bind("responsiveResize", (function ($) {
306    "use strict";
307    return function (event, responsiveDesign) {
308        responsiveAbsBg(responsiveDesign, $(".art-header"), $("#art-header-bg"));
309    };
310})(jQuery));
311
312jQuery(window).bind("responsive", (function ($) {
313    "use strict";
314    return function (event, responsiveDesign) {
315        if ($.browser.msie && $.browser.version <= 8) return;
316
317        if (responsiveDesign.isResponsive) {
318            $(window).on("responsiveResize.header", function () {
319                responsiveHeader(responsiveDesign);
320            });
321        } else {
322            $(window).trigger("responsiveResize.header");
323            $(window).trigger("resize");
324            $(window).off("responsiveResize.header");
325        }
326    };
327})(jQuery));
328
329jQuery(window).bind("responsiveResize", (function ($) {
330    "use strict";
331    return function (event, responsiveDesign) {
332        responsiveAbsBg(responsiveDesign, $("nav.art-nav"), $("#art-hmenu-bg"));
333    };
334})(jQuery));
335
336
337
338
339jQuery(function ($) {
340    "use strict";
341    $(".art-hmenu a")
342        .click(function(e) {
343            var link = $(this);
344            if ($(".responsive").length === 0)
345                return;
346
347            var item = link.parent("li");
348
349            if (item.hasClass("active")) {
350                item.removeClass("active").children("a").removeClass("active");
351            } else {
352                item.addClass("active").children("a").addClass("active");
353            }
354
355            if (item.children("ul").length > 0) {
356                e.preventDefault();
357            }
358        })
359        .each(function() {
360            var link = $(this);
361            if (link.get(0).href === location.href) {
362                link.addClass("active").parents("li").addClass("active");
363                return false;
364            }
365        });
366});
367
368jQuery(function($) {
369    $("<a href=\"#\" class=\"art-menu-btn\"><span></span><span></span><span></span></a>").insertBefore(".art-hmenu").click(function(e) {
370        var menu = $(this).next();
371        if (menu.is(":visible")) {
372            menu.slideUp("fast", function() {
373                $(this).removeClass("visible").css("display", "");
374            });
375        } else {
376            menu.slideDown("fast", function() {
377                $(this).addClass("visible").css("display", "");
378            });
379        }
380        e.preventDefault();
381    });

382});
383
384jQuery(window).bind("responsiveNav", (function ($) {
385    /*global menuExtendedCreate */
386    "use strict";
387    return function (event, options) {
388        if (options.isDesktopNav && $("li.ext").length > 0) {
389            menuExtendedCreate();
390        }
391    };
392})(jQuery));
393
394/*global jQuery, responsiveDesign*/
395
396
397var responsiveLayoutCell = (function ($) {
398    "use strict";
399    return function (responsiveDesign) {
400        $(".art-content .art-content-layout-row,.art-footer .art-content-layout-row").each(function () {
401            var row = $(this);
402            var rowChildren = row.children(".art-layout-cell");
403            if (rowChildren.length > 1) {
404                if (responsiveDesign.isTablet) {
405                    rowChildren.addClass("responsive-tablet-layout-cell").each(function (i) {
406                        if ((i + 1) % 2 === 0) {
407                            $(this).after("<div class=\"cleared responsive-cleared\">");
408                        }
409                    });
410                } else {
411                    rowChildren.removeClass("responsive-tablet-layout-cell");
412                    row.children(".responsive-cleared").remove();
413                }
414            }
415        });
416    };
417})(jQuery);
418
419jQuery(window).bind("responsive", function (event, responsiveDesign) {
420    "use strict";
421    responsiveLayoutCell(responsiveDesign);
422});
423
424
425var responsiveLayoutCell = (function ($) {
426    "use strict";
427    return function (responsiveDesign) {
428        $(".art-content .art-content-layout-row,.art-footer .art-content-layout-row").each(function () {
429            var row = $(this);
430            var rowChildren = row.children(".art-layout-cell");
431            if (rowChildren.length > 1) {
432                if (responsiveDesign.isTablet) {
433                    rowChildren.addClass("responsive-tablet-layout-cell").each(function (i) {
434                        if ((i + 1) % 2 === 0) {
435                            $(this).after("<div class=\"cleared responsive-cleared\">");
436                        }
437                    });
438                } else {
439                    rowChildren.removeClass("responsive-tablet-layout-cell");
440                    row.children(".responsive-cleared").remove();
441                }
442            }
443        });
444    };
445})(jQuery);
446
447jQuery(window).bind("responsive", function (event, responsiveDesign) {
448    "use strict";
449    responsiveLayoutCell(responsiveDesign);
450});
451
452
453var responsiveLayoutCell = (function ($) {
454    "use strict";
455    return function (responsiveDesign) {
456        $(".art-content .art-content-layout-row,.art-footer .art-content-layout-row").each(function () {
457            var row = $(this);
458            var rowChildren = row.children(".art-layout-cell");
459            if (rowChildren.length > 1) {
460                if (responsiveDesign.isTablet) {
461                    rowChildren.addClass("responsive-tablet-layout-cell").each(function (i) {
462                        if ((i + 1) % 2 === 0) {
463                            $(this).after("<div class=\"cleared responsive-cleared\">");
464                        }
465                    });
466                } else {
467                    rowChildren.removeClass("responsive-tablet-layout-cell");
468                    row.children(".responsive-cleared").remove();
469                }
470            }
471        });
472    };
473})(jQuery);
474
475jQuery(window).bind("responsive", function (event, responsiveDesign) {
476    "use strict";
477    responsiveLayoutCell(responsiveDesign);
478});
479
480
481
482
483if (!jQuery.browser.msie || jQuery.browser.version > 8) {
484    jQuery(responsiveDesign.initialize);
485}