473 lines
15 KiB
JavaScript
473 lines
15 KiB
JavaScript
|
var Layout = function () {
|
||
|
|
|
||
|
|
// IE mode
|
||
|
|
var isRTL = false;
|
||
|
|
var isIE8 = false;
|
||
|
|
var isIE9 = false;
|
||
|
|
var isIE10 = false;
|
||
|
|
var isIE11 = false;
|
||
|
|
|
||
|
|
var responsive = true;
|
||
|
|
|
||
|
|
var responsiveHandlers = [];
|
||
|
|
|
||
|
|
var handleInit = function() {
|
||
|
|
|
||
|
|
if ($('body').css('direction') === 'rtl') {
|
||
|
|
isRTL = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
isIE8 = !! navigator.userAgent.match(/MSIE 8.0/);
|
||
|
|
isIE9 = !! navigator.userAgent.match(/MSIE 9.0/);
|
||
|
|
isIE10 = !! navigator.userAgent.match(/MSIE 10.0/);
|
||
|
|
isIE11 = !! navigator.userAgent.match(/MSIE 11.0/);
|
||
|
|
|
||
|
|
if (isIE10) {
|
||
|
|
jQuery('html').addClass('ie10'); // detect IE10 version
|
||
|
|
}
|
||
|
|
if (isIE11) {
|
||
|
|
jQuery('html').addClass('ie11'); // detect IE11 version
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// runs callback functions set by App.addResponsiveHandler().
|
||
|
|
var runResponsiveHandlers = function () {
|
||
|
|
// reinitialize other subscribed elements
|
||
|
|
for (var i in responsiveHandlers) {
|
||
|
|
var each = responsiveHandlers[i];
|
||
|
|
each.call();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// handle the layout reinitialization on window resize
|
||
|
|
var handleResponsiveOnResize = function () {
|
||
|
|
var resize;
|
||
|
|
if (isIE8) {
|
||
|
|
var currheight;
|
||
|
|
$(window).resize(function () {
|
||
|
|
if (currheight == document.documentElement.clientHeight) {
|
||
|
|
return; //quite event since only body resized not window.
|
||
|
|
}
|
||
|
|
if (resize) {
|
||
|
|
clearTimeout(resize);
|
||
|
|
}
|
||
|
|
resize = setTimeout(function () {
|
||
|
|
runResponsiveHandlers();
|
||
|
|
}, 50); // wait 50ms until window resize finishes.
|
||
|
|
currheight = document.documentElement.clientHeight; // store last body client height
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
$(window).resize(function () {
|
||
|
|
if (resize) {
|
||
|
|
clearTimeout(resize);
|
||
|
|
}
|
||
|
|
resize = setTimeout(function () {
|
||
|
|
runResponsiveHandlers();
|
||
|
|
}, 50); // wait 50ms until window resize finishes.
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var handleIEFixes = function() {
|
||
|
|
//fix html5 placeholder attribute for ie7 & ie8
|
||
|
|
if (isIE8 || isIE9) { // ie8 & ie9
|
||
|
|
// this is html5 placeholder fix for inputs, inputs with placeholder-no-fix class will be skipped(e.g: we need this for password fields)
|
||
|
|
jQuery('input[placeholder]:not(.placeholder-no-fix), textarea[placeholder]:not(.placeholder-no-fix)').each(function () {
|
||
|
|
|
||
|
|
var input = jQuery(this);
|
||
|
|
|
||
|
|
if (input.val() == '' && input.attr("placeholder") != '') {
|
||
|
|
input.addClass("placeholder").val(input.attr('placeholder'));
|
||
|
|
}
|
||
|
|
|
||
|
|
input.focus(function () {
|
||
|
|
if (input.val() == input.attr('placeholder')) {
|
||
|
|
input.val('');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
input.blur(function () {
|
||
|
|
if (input.val() == '' || input.val() == input.attr('placeholder')) {
|
||
|
|
input.val(input.attr('placeholder'));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Handles scrollable contents using jQuery SlimScroll plugin.
|
||
|
|
var handleScrollers = function () {
|
||
|
|
$('.scroller').each(function () {
|
||
|
|
var height;
|
||
|
|
if ($(this).attr("data-height")) {
|
||
|
|
height = $(this).attr("data-height");
|
||
|
|
} else {
|
||
|
|
height = $(this).css('height');
|
||
|
|
}
|
||
|
|
$(this).slimScroll({
|
||
|
|
allowPageScroll: true, // allow page scroll when the element scroll is ended
|
||
|
|
size: '7px',
|
||
|
|
color: ($(this).attr("data-handle-color") ? $(this).attr("data-handle-color") : '#bbb'),
|
||
|
|
railColor: ($(this).attr("data-rail-color") ? $(this).attr("data-rail-color") : '#eaeaea'),
|
||
|
|
position: isRTL ? 'left' : 'right',
|
||
|
|
height: height,
|
||
|
|
alwaysVisible: ($(this).attr("data-always-visible") == "1" ? true : false),
|
||
|
|
railVisible: ($(this).attr("data-rail-visible") == "1" ? true : false),
|
||
|
|
disableFadeOut: true
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
var handleSearch = function() {
|
||
|
|
$('.search-btn').click(function () {
|
||
|
|
if($('.search-btn').hasClass('show-search-icon')){
|
||
|
|
if ($(window).width()>767) {
|
||
|
|
$('.search-box').fadeOut(300);
|
||
|
|
} else {
|
||
|
|
$('.search-box').fadeOut(0);
|
||
|
|
}
|
||
|
|
$('.search-btn').removeClass('show-search-icon');
|
||
|
|
} else {
|
||
|
|
if ($(window).width()>767) {
|
||
|
|
$('.search-box').fadeIn(300);
|
||
|
|
} else {
|
||
|
|
$('.search-box').fadeIn(0);
|
||
|
|
}
|
||
|
|
$('.search-btn').addClass('show-search-icon');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// close search box on body click
|
||
|
|
if($('.search-btn').size() != 0) {
|
||
|
|
$('.search-box, .search-btn').on('click', function(e){
|
||
|
|
e.stopPropagation();
|
||
|
|
});
|
||
|
|
|
||
|
|
$('body').on('click', function() {
|
||
|
|
if ($('.search-btn').hasClass('show-search-icon')) {
|
||
|
|
$('.search-btn').removeClass("show-search-icon");
|
||
|
|
$('.search-box').fadeOut(300);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var handleMenu = function() {
|
||
|
|
$(".header .navbar-toggle").click(function () {
|
||
|
|
if ($(".header .navbar-collapse").hasClass("open")) {
|
||
|
|
$(".header .navbar-collapse").slideDown(300)
|
||
|
|
.removeClass("open");
|
||
|
|
} else {
|
||
|
|
$(".header .navbar-collapse").slideDown(300)
|
||
|
|
.addClass("open");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
var handleSubMenuExt = function() {
|
||
|
|
$(".header-navigation .dropdown").on("hover", function() {
|
||
|
|
if ($(this).children(".header-navigation-content-ext").show()) {
|
||
|
|
if ($(".header-navigation-content-ext").height()>=$(".header-navigation-description").height()) {
|
||
|
|
$(".header-navigation-description").css("height", $(".header-navigation-content-ext").height()+22);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
var handleSidebarMenu = function () {
|
||
|
|
$(".sidebar .dropdown > a").click(function (event) {
|
||
|
|
if ($(this).next().hasClass('dropdown-menu')) {
|
||
|
|
event.preventDefault();
|
||
|
|
if ($(this).hasClass("collapsed") == false) {
|
||
|
|
$(this).addClass("collapsed");
|
||
|
|
$(this).siblings(".dropdown-menu").slideDown(300);
|
||
|
|
} else {
|
||
|
|
$(this).removeClass("collapsed");
|
||
|
|
$(this).siblings(".dropdown-menu").slideUp(300);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleDifInits() {
|
||
|
|
$(".header .navbar-toggle span:nth-child(2)").addClass("short-icon-bar");
|
||
|
|
$(".header .navbar-toggle span:nth-child(4)").addClass("short-icon-bar");
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleUniform() {
|
||
|
|
if (!jQuery().uniform) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var test = $("input[type=checkbox]:not(.toggle), input[type=radio]:not(.toggle, .star)");
|
||
|
|
if (test.size() > 0) {
|
||
|
|
test.each(function () {
|
||
|
|
if ($(this).parents(".checker").size() == 0) {
|
||
|
|
$(this).show();
|
||
|
|
$(this).uniform();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var handleFancybox = function () {
|
||
|
|
if (!jQuery.fancybox) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
jQuery(".fancybox-fast-view").fancybox();
|
||
|
|
|
||
|
|
if (jQuery(".fancybox-button").size() > 0) {
|
||
|
|
jQuery(".fancybox-button").fancybox({
|
||
|
|
groupAttr: 'data-rel',
|
||
|
|
prevEffect: 'none',
|
||
|
|
nextEffect: 'none',
|
||
|
|
closeBtn: true,
|
||
|
|
helpers: {
|
||
|
|
title: {
|
||
|
|
type: 'inside'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.fancybox-video').fancybox({
|
||
|
|
type: 'iframe'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Handles Bootstrap Accordions.
|
||
|
|
var handleAccordions = function () {
|
||
|
|
|
||
|
|
jQuery('body').on('shown.bs.collapse', '.accordion.scrollable', function (e) {
|
||
|
|
Layout.scrollTo($(e.target), -100);
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
// Handles Bootstrap Tabs.
|
||
|
|
var handleTabs = function () {
|
||
|
|
// fix content height on tab click
|
||
|
|
$('body').on('shown.bs.tab', '.nav.nav-tabs', function () {
|
||
|
|
handleSidebarAndContentHeight();
|
||
|
|
});
|
||
|
|
|
||
|
|
//activate tab if tab id provided in the URL
|
||
|
|
if (location.hash) {
|
||
|
|
var tabid = location.hash.substr(1);
|
||
|
|
$('a[href="#' + tabid + '"]').click();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var handleMobiToggler = function () {
|
||
|
|
$(".mobi-toggler").on("click", function(event) {
|
||
|
|
event.preventDefault();//the default action of the event will not be triggered
|
||
|
|
|
||
|
|
$(".header").toggleClass("menuOpened");
|
||
|
|
$(".header").find(".header-navigation").toggle(300);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
init: function () {
|
||
|
|
// init core variables
|
||
|
|
handleInit();
|
||
|
|
handleResponsiveOnResize();
|
||
|
|
handleIEFixes();
|
||
|
|
handleSearch();
|
||
|
|
handleFancybox();
|
||
|
|
handleDifInits();
|
||
|
|
handleSidebarMenu();
|
||
|
|
handleAccordions();
|
||
|
|
handleMenu();
|
||
|
|
handleScrollers();
|
||
|
|
handleSubMenuExt();
|
||
|
|
handleMobiToggler();
|
||
|
|
},
|
||
|
|
|
||
|
|
initUniform: function (els) {
|
||
|
|
if (els) {
|
||
|
|
jQuery(els).each(function () {
|
||
|
|
if ($(this).parents(".checker").size() == 0) {
|
||
|
|
$(this).show();
|
||
|
|
$(this).uniform();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
handleUniform();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
initTwitter: function () {
|
||
|
|
!function(d,s,id){
|
||
|
|
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);}
|
||
|
|
}(document,"script","twitter-wjs");
|
||
|
|
},
|
||
|
|
|
||
|
|
initTouchspin: function () {
|
||
|
|
$(".product-quantity .form-control").TouchSpin({
|
||
|
|
buttondown_class: "btn quantity-down",
|
||
|
|
buttonup_class: "btn quantity-up"
|
||
|
|
});
|
||
|
|
$(".quantity-down").html("<i class='fa fa-angle-down'></i>");
|
||
|
|
$(".quantity-up").html("<i class='fa fa-angle-up'></i>");
|
||
|
|
},
|
||
|
|
|
||
|
|
initFixHeaderWithPreHeader: function () {
|
||
|
|
jQuery(window).scroll(function() {
|
||
|
|
if (jQuery(window).scrollTop()>37){
|
||
|
|
jQuery("body").addClass("page-header-fixed");
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
jQuery("body").removeClass("page-header-fixed");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
initNavScrolling: function () {
|
||
|
|
function NavScrolling () {
|
||
|
|
if (jQuery(window).scrollTop()>60){
|
||
|
|
jQuery(".header").addClass("reduce-header");
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
jQuery(".header").removeClass("reduce-header");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
NavScrolling();
|
||
|
|
|
||
|
|
jQuery(window).scroll(function() {
|
||
|
|
NavScrolling ();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
initOWL: function () {
|
||
|
|
$(".owl-carousel6-brands").owlCarousel({
|
||
|
|
pagination: false,
|
||
|
|
navigation: true,
|
||
|
|
items: 6,
|
||
|
|
addClassActive: true,
|
||
|
|
itemsCustom : [
|
||
|
|
[0, 1],
|
||
|
|
[320, 1],
|
||
|
|
[480, 2],
|
||
|
|
[700, 3],
|
||
|
|
[975, 5],
|
||
|
|
[1200, 6],
|
||
|
|
[1400, 6],
|
||
|
|
[1600, 6]
|
||
|
|
],
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".owl-carousel5").owlCarousel({
|
||
|
|
pagination: false,
|
||
|
|
navigation: true,
|
||
|
|
items: 5,
|
||
|
|
addClassActive: true,
|
||
|
|
itemsCustom : [
|
||
|
|
[0, 1],
|
||
|
|
[320, 1],
|
||
|
|
[480, 2],
|
||
|
|
[660, 2],
|
||
|
|
[700, 3],
|
||
|
|
[768, 3],
|
||
|
|
[992, 4],
|
||
|
|
[1024, 4],
|
||
|
|
[1200, 5],
|
||
|
|
[1400, 5],
|
||
|
|
[1600, 5]
|
||
|
|
],
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".owl-carousel4").owlCarousel({
|
||
|
|
pagination: false,
|
||
|
|
navigation: true,
|
||
|
|
items: 4,
|
||
|
|
addClassActive: true,
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".owl-carousel3").owlCarousel({
|
||
|
|
pagination: false,
|
||
|
|
navigation: true,
|
||
|
|
items: 3,
|
||
|
|
addClassActive: true,
|
||
|
|
itemsCustom : [
|
||
|
|
[0, 1],
|
||
|
|
[320, 1],
|
||
|
|
[480, 2],
|
||
|
|
[700, 3],
|
||
|
|
[768, 2],
|
||
|
|
[1024, 3],
|
||
|
|
[1200, 3],
|
||
|
|
[1400, 3],
|
||
|
|
[1600, 3]
|
||
|
|
],
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".owl-carousel2").owlCarousel({
|
||
|
|
pagination: false,
|
||
|
|
navigation: true,
|
||
|
|
items: 2,
|
||
|
|
addClassActive: true,
|
||
|
|
itemsCustom : [
|
||
|
|
[0, 1],
|
||
|
|
[320, 1],
|
||
|
|
[480, 2],
|
||
|
|
[700, 3],
|
||
|
|
[975, 2],
|
||
|
|
[1200, 2],
|
||
|
|
[1400, 2],
|
||
|
|
[1600, 2]
|
||
|
|
],
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
initImageZoom: function () {
|
||
|
|
$('.product-main-image').zoom({url: $('.product-main-image img').attr('data-BigImgSrc')});
|
||
|
|
},
|
||
|
|
|
||
|
|
initSliderRange: function () {
|
||
|
|
$( "#slider-range" ).slider({
|
||
|
|
range: true,
|
||
|
|
min: 0,
|
||
|
|
max: 500,
|
||
|
|
values: [ 50, 250 ],
|
||
|
|
slide: function( event, ui ) {
|
||
|
|
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
|
||
|
|
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
|
||
|
|
},
|
||
|
|
|
||
|
|
// wrapper function to scroll(focus) to an element
|
||
|
|
scrollTo: function (el, offeset) {
|
||
|
|
var pos = (el && el.size() > 0) ? el.offset().top : 0;
|
||
|
|
if (el) {
|
||
|
|
if ($('body').hasClass('page-header-fixed')) {
|
||
|
|
pos = pos - $('.header').height();
|
||
|
|
}
|
||
|
|
pos = pos + (offeset ? offeset : -1 * el.height());
|
||
|
|
}
|
||
|
|
|
||
|
|
jQuery('html,body').animate({
|
||
|
|
scrollTop: pos
|
||
|
|
}, 'slow');
|
||
|
|
},
|
||
|
|
|
||
|
|
//public function to add callback a function which will be called on window resize
|
||
|
|
addResponsiveHandler: function (func) {
|
||
|
|
responsiveHandlers.push(func);
|
||
|
|
},
|
||
|
|
|
||
|
|
scrollTop: function () {
|
||
|
|
App.scrollTo();
|
||
|
|
},
|
||
|
|
|
||
|
|
gridOption1: function () {
|
||
|
|
$(function(){
|
||
|
|
$('.grid-v1').mixitup();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
}();
|