https://bitport.hu/js/layout.js

1var Layout = function () {
2
3     // IE mode
4    var isRTL = false;
5    var isIE8 = false;
6    var isIE9 = false;
7    var isIE10 = false;
8    var isIE11 = false;
9
10    var responsive = true;
11
12    var responsiveHandlers = [];
13
14    var handleInit = function() {
15
16        if ($('body').css('direction') === 'rtl') {
17            isRTL = true;
18        }
19
20        isIE8 = !! navigator.userAgent.match(/MSIE 8.0/);
21        isIE9 = !! navigator.userAgent.match(/MSIE 9.0/);
22        isIE10 = !! navigator.userAgent.match(/MSIE 10.0/);
23        isIE11 = !! navigator.userAgent.match(/MSIE 11.0/);
24        
25        if (isIE10) {
26            jQuery('html').addClass('ie10'); // detect IE10 version
27        }
28        if (isIE11) {
29            jQuery('html').addClass('ie11'); // detect IE11 version
30        }
31    }
32
33    // runs callback functions set by App.addResponsiveHandler().
34    var runResponsiveHandlers = function () {
35        // reinitialize other subscribed elements
36        for (var i in responsiveHandlers) {
37            var each = responsiveHandlers[i];
38            each.call();
39        }
40    }
41
42    // handle the layout reinitialization on window resize
43    var handleResponsiveOnResize = function () {
44        var resize;
45        if (isIE8) {
46            var currheight;
47            $(window).resize(function () {
48                if (currheight == document.documentElement.clientHeight) {
49                    return; //quite event since only body resized not window.
50                }
51                if (resize) {
52                    clearTimeout(resize);
53                }
54                resize = setTimeout(function () {
55                    runResponsiveHandlers();
56                }, 50); // wait 50ms until window resize finishes.                
57                currheight = document.documentElement.clientHeight; // store last body client height
58            });
59        } else {
60            $(window).resize(function () {
61                if (resize) {
62                    clearTimeout(resize);
63                }
64                resize = setTimeout(function () {
65                    runResponsiveHandlers();
66                }, 50); // wait 50ms until window resize finishes.
67            });
68        }
69    }
70
71    var handleIEFixes = function() {
72        //fix html5 placeholder attribute for ie7 & ie8
73        if (isIE8 || isIE9) { // ie8 & ie9
74            // this is html5 placeholder fix for inputs, inputs with placeholder-no-fix class will be skipped(e.g: we need this for password fields)
75            jQuery('input[placeholder]:not(.placeholder-no-fix), textarea[placeholder]:not(.placeholder-no-fix)').each(function () {
76
77                var input = jQuery(this);
78
79                if (input.val() == '' && input.attr("placeholder") != '') {
80                    input.addClass("placeholder").val(input.attr('placeholder'));
81                }
82
83                input.focus(function () {
84                    if (input.val() == input.attr('placeholder')) {
85                        input.val('');
86                    }
87                });
88
89                input.blur(function () {
90                    if (input.val() == '' || input.val() == input.attr('placeholder')) {
91                        input.val(input.attr('placeholder'));
92                    }
93                });
94            });
95        }
96    }
97
98    // Handles scrollable contents using jQuery SlimScroll plugin.
99    var handleScrollers = function () {
100        $('.scroller').each(function () {
101            var height;
102            if ($(this).attr("data-height")) {
103                height = $(this).attr("data-height");
104            } else {
105                height = $(this).css('height');
106            }
107            $(this).slimScroll({
108                allowPageScroll: true, // allow page scroll when the element scroll is ended
109                size: '7px',
110                color: ($(this).attr("data-handle-color")  ? $(this).attr("data-handle-color") : '#bbb'),
111                railColor: ($(this).attr("data-rail-color")  ? $(this).attr("data-rail-color") : '#eaeaea'),
112                position: isRTL ? 'left' : 'right',
113                height: height,
114                alwaysVisible: ($(this).attr("data-always-visible") == "1" ? true : false),
115                railVisible: ($(this).attr("data-rail-visible") == "1" ? true : false),
116                disableFadeOut: true
117            });
118        });
119    }
120
121    var handleSearch = function() {    
122        $('.search-btn').click(function () {            
123            if($('.search-btn').hasClass('show-search-icon')){
124                if ($(window).width()>767) {
125                    $('.search-box').fadeOut(300);
126                } else {
127                    $('.search-box').fadeOut(0);
128                }
129                $('.search-btn').removeClass('show-search-icon');
130            } else {
131                if ($(window).width()>767) {
132                    $('.search-box').fadeIn(300);
133                } else {
134                    $('.search-box').fadeIn(0);
135                }
136                $('.search-btn').addClass('show-search-icon');
137            } 
138        }); 
139
140        // close search box on body click
141        if($('.search-btn').size() != 0) {
142            $('.search-box, .search-btn').on('click', function(e){
143                e.stopPropagation();
144            });
145
146            $('body').on('click', function() {
147                if ($('.search-btn').hasClass('show-search-icon')) {
148                    $('.search-btn').removeClass("show-search-icon");
149                    $('.search-box').fadeOut(300);
150                }
151            });
152        }
153    }
154
155    var handleMenu = function() {

156        $(".header .navbar-toggle").click(function () {
157            if ($(".header .navbar-collapse").hasClass("open")) {
158                $(".header .navbar-collapse").slideDown(300)
159                .removeClass("open");
160            } else {             
161                $(".header .navbar-collapse").slideDown(300)
162                .addClass("open");
163            }
164        });
165    }
166    var handleSubMenuExt = function() {
167        $(".header-navigation .dropdown").on("hover", function() {
168            if ($(this).children(".header-navigation-content-ext").show()) {
169                if ($(".header-navigation-content-ext").height()>=$(".header-navigation-description").height()) {
170                    $(".header-navigation-description").css("height", $(".header-navigation-content-ext").height()+22);
171                }
172            }
173        });        
174    }
175
176    var handleSidebarMenu = function () {
177        $(".sidebar .dropdown > a").click(function (event) {
178            if ($(this).next().hasClass('dropdown-menu')) {
179                event.preventDefault();
180                if ($(this).hasClass("collapsed") == false) {
181                    $(this).addClass("collapsed");
182                    $(this).siblings(".dropdown-menu").slideDown(300);
183                } else {
184                    $(this).removeClass("collapsed");
185                    $(this).siblings(".dropdown-menu").slideUp(300);
186                }
187            } 
188        });
189    }
190
191    function handleDifInits() { 
192        $(".header .navbar-toggle span:nth-child(2)").addClass("short-icon-bar");
193        $(".header .navbar-toggle span:nth-child(4)").addClass("short-icon-bar");
194    }
195
196    function handleUniform() {
197        if (!jQuery().uniform) {
198            return;
199        }
200        var test = $("input[type=checkbox]:not(.toggle), input[type=radio]:not(.toggle, .star)");
201        if (test.size() > 0) {
202            test.each(function () {
203                    if ($(this).parents(".checker").size() == 0) {
204                        $(this).show();
205                        $(this).uniform();
206                    }
207                });
208        }
209    }
210
211    var handleFancybox = function () {
212        if (!jQuery.fancybox) {
213            return;
214        }
215        
216        jQuery(".fancybox-fast-view").fancybox();
217
218        if (jQuery(".fancybox-button").size() > 0) {            
219            jQuery(".fancybox-button").fancybox({
220                groupAttr: 'data-rel',
221                prevEffect: 'none',
222                nextEffect: 'none',
223                closeBtn: true,
224                helpers: {
225                    title: {
226                        type: 'inside'
227                    }
228                }
229            });
230
231            $('.fancybox-video').fancybox({
232                type: 'iframe'
233            });
234        }
235    }
236
237    // Handles Bootstrap Accordions.
238    var handleAccordions = function () {
239       
240        jQuery('body').on('shown.bs.collapse', '.accordion.scrollable', function (e) {
241            Layout.scrollTo($(e.target), -100);
242        });
243        
244    }
245
246    // Handles Bootstrap Tabs.
247    var handleTabs = function () {
248        // fix content height on tab click
249        $('body').on('shown.bs.tab', '.nav.nav-tabs', function () {
250            handleSidebarAndContentHeight();
251        });
252
253        //activate tab if tab id provided in the URL
254        if (location.hash) {
255            var tabid = location.hash.substr(1);
256            $('a[href="#' + tabid + '"]').click();
257        }
258    }
259
260    var handleMobiToggler = function () {
261        $(".mobi-toggler").on("click", function(event) {
262            event.preventDefault();//the default action of the event will not be triggered
263            
264            $(".header-navigation-mini").toggleClass("header-navigation-mini-visible");
265            //$(".header-navigation-mini").find(".header-navigation").toggle(300);
266        });
267    }
268
269    var handleTheme = function () {
270    
271        var panel = $('.color-panel');
272    
273        // handle theme colors
274        var setColor = function (color) {
275            $('#style-color').attr("href", "../../assets/frontend/layout/css/themes/" + color + ".css");
276            $('.corporate .site-logo img').attr("src", "../../assets/frontend/layout/img/logos/logo-corp-" + color + ".png");
277            $('.ecommerce .site-logo img').attr("src", "../../assets/frontend/layout/img/logos/logo-shop-" + color + ".png");
278        }
279
280        $('.icon-color', panel).click(function () {
281            $('.color-mode').show();
282            $('.icon-color-close').show();
283        });
284
285        $('.icon-color-close', panel).click(function () {
286            $('.color-mode').hide();
287            $('.icon-color-close').hide();
288        });
289
290        $('li', panel).click(function () {
291            var color = $(this).attr("data-style");
292            setColor(color);
293            $('.inline li', panel).removeClass("current");
294            $(this).addClass("current");
295        });
296    }
297	
298    return {
299        init: function () {
300            // init core variables

301            handleTheme();
302            handleInit();
303            handleResponsiveOnResize();
304            handleIEFixes();
305            handleSearch();
306            handleFancybox();
307            handleDifInits();
308            handleSidebarMenu();
309            handleAccordions();
310            handleMenu();
311            handleScrollers();
312            handleSubMenuExt();
313            handleMobiToggler();
314        },
315
316        initUniform: function (els) {
317            if (els) {
318                jQuery(els).each(function () {
319                        if ($(this).parents(".checker").size() == 0) {
320                            $(this).show();
321                            $(this).uniform();
322                        }
323                    });
324            } else {
325                handleUniform();
326            }
327        },
328
329        initTwitter: function () {
330            !function(d,s,id){
331                var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}
332            }(document,"script","twitter-wjs");
333        },
334
335        initTouchspin: function () {
336            $(".product-quantity .form-control").TouchSpin({
337                buttondown_class: "btn quantity-down",
338                buttonup_class: "btn quantity-up"
339            });
340            $(".quantity-down").html("<i class='fa fa-angle-down'></i>");
341            $(".quantity-up").html("<i class='fa fa-angle-up'></i>");
342        },
343
344        initFixHeaderWithPreHeader: function () {
345            jQuery(window).scroll(function() {                
346                if (jQuery(window).scrollTop()>37){
347                    jQuery("body").addClass("page-header-fixed");
348                }
349                else {
350                    jQuery("body").removeClass("page-header-fixed");
351                }
352            });
353        },
354
355        initNavScrolling: function () {
356            function NavScrolling () {
357                if (jQuery(window).scrollTop()>60){
358                    jQuery(".header").addClass("reduce-header");
359                }
360                else {
361                    jQuery(".header").removeClass("reduce-header");
362                }
363            }
364            
365            NavScrolling();
366            
367            jQuery(window).scroll(function() {
368                NavScrolling ();
369            });
370        },
371
372        initOWL: function () {
373            $(".owl-carousel6-brands").owlCarousel({
374                pagination: false,
375                navigation: true,
376                items: 6,
377                addClassActive: true,
378                itemsCustom : [
379                    [0, 1],
380                    [320, 1],
381                    [480, 2],
382                    [700, 3],
383                    [975, 5],
384                    [1200, 6],
385                    [1400, 6],
386                    [1600, 6]
387                ],
388            });
389
390            $(".owl-carousel5").owlCarousel({
391                pagination: false,
392                navigation: true,
393                items: 5,
394                addClassActive: true,
395                itemsCustom : [
396                    [0, 1],
397                    [320, 1],
398                    [480, 2],
399                    [660, 2],
400                    [700, 3],
401                    [768, 3],
402                    [992, 4],
403                    [1024, 4],
404                    [1200, 5],
405                    [1400, 5],
406                    [1600, 5]
407                ],
408            });
409
410            $(".owl-carousel4").owlCarousel({
411                pagination: false,
412                navigation: true,
413                items: 4,
414                addClassActive: true,
415            });
416
417            $(".owl-carousel3").owlCarousel({
418                pagination: false,
419                navigation: true,
420                items: 3,
421                addClassActive: true,
422                itemsCustom : [
423                    [0, 1],
424                    [320, 1],
425                    [480, 2],
426                    [700, 3],
427                    [768, 2],
428                    [1024, 3],
429                    [1200, 3],
430                    [1400, 3],
431                    [1600, 3]
432                ],
433            });
434
435            $(".owl-carousel2").owlCarousel({
436                pagination: false,
437                navigation: true,
438                items: 2,
439                addClassActive: true,
440                itemsCustom : [
441                    [0, 1],
442                    [320, 1],
443                    [480, 2],
444                    [700, 3],
445                    [975, 2],
446                    [1200, 2],
447                    [1400, 2],
448                    [1600, 2]
449                ],
450            });
451        },
452
453        initImageZoom: function () {
454            $('.product-main-image').zoom({url: $('.product-main-image img').attr('data-BigImgSrc')});
455        },
456
457        initSliderRange: function () {
458            $( "#slider-range" ).slider({
459              range: true,
460              min: 0,
461              max: 500,
462              values: [ 50, 250 ],
463              slide: function( event, ui ) {
464                $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
465              }
466            });
467            $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
468            " - $" + $( "#slider-range" ).slider( "values", 1 ) );
469        },
470
471        // wrapper function to scroll(focus) to an element
472        scrollTo: function (el, offeset) {
473            var pos = (el && el.size() > 0) ? el.offset().top : 0;
474            if (el) {
475                if ($('body').hasClass('page-header-fixed')) {
476                    pos = pos - $('.header').height(); 
477                }            
478                pos = pos + (offeset ? offeset : -1 * el.height());
479            }
480
481            jQuery('html,body').animate({
482                scrollTop: pos
483            }, 'slow');
484        },
485
486        //public function to add callback a function which will be called on window resize
487        addResponsiveHandler: function (func) {
488            responsiveHandlers.push(func);
489        },
490
491        scrollTop: function () {
492            App.scrollTo();
493        },
494
495        gridOption1: function () {
496            $(function(){
497                $('.grid-v1').mixitup();
498            });    
499        }
500
501    };
502}();