Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | var 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").toggleClass("menuOpened"); |
||
| 265 | $(".header").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 | }(); |