diff --git a/assets/javascript/frontend/scripts.js b/assets/javascript/frontend/scripts.js index 70c658e..0c081b3 100644 --- a/assets/javascript/frontend/scripts.js +++ b/assets/javascript/frontend/scripts.js @@ -1,350 +1,350 @@ import 'jquery'; import 'bootstrap'; import 'bootstrap-dropdown-hover'; -import { WOW } from 'wow.js'; -import { echo } from 'echo-js'; -import 'jquery.rateit'; +//import { WOW } from 'wow.js'; +//import { echo } from 'echo-js'; +//import 'jquery.rateit'; import 'jquery.easing'; import '../../../public/assets/js/owl.carousel.min.js'; -jQuery(document).ready(function() { +jQuery(document).ready(function () { "use strict"; -/*===================================================================================*/ -/* OWL CAROUSEL -/*===================================================================================*/ -jQuery(function () { - var dragging = true; - var owlElementID = "#owl-main"; + /*===================================================================================*/ + /* OWL CAROUSEL + /*===================================================================================*/ + jQuery(function () { + var dragging = true; + var owlElementID = "#owl-main"; - function fadeInReset() { - if (!dragging) { - jQuery(owlElementID + " .caption .fadeIn-1, " + owlElementID + " .caption .fadeIn-2, " + owlElementID + " .caption .fadeIn-3").stop().delay(800).animate({ opacity: 0 }, { duration: 400, easing: "easeInCubic" }); + function fadeInReset() { + if (!dragging) { + jQuery(owlElementID + " .caption .fadeIn-1, " + owlElementID + " .caption .fadeIn-2, " + owlElementID + " .caption .fadeIn-3").stop().delay(800).animate({ opacity: 0 }, { duration: 400, easing: "easeInCubic" }); + } + else { + jQuery(owlElementID + " .caption .fadeIn-1, " + owlElementID + " .caption .fadeIn-2, " + owlElementID + " .caption .fadeIn-3").css({ opacity: 0 }); + } } - else { - jQuery(owlElementID + " .caption .fadeIn-1, " + owlElementID + " .caption .fadeIn-2, " + owlElementID + " .caption .fadeIn-3").css({ opacity: 0 }); + + function fadeInDownReset() { + if (!dragging) { + jQuery(owlElementID + " .caption .fadeInDown-1, " + owlElementID + " .caption .fadeInDown-2, " + owlElementID + " .caption .fadeInDown-3").stop().delay(800).animate({ opacity: 0, top: "-15px" }, { duration: 400, easing: "easeInCubic" }); + } + else { + jQuery(owlElementID + " .caption .fadeInDown-1, " + owlElementID + " .caption .fadeInDown-2, " + owlElementID + " .caption .fadeInDown-3").css({ opacity: 0, top: "-15px" }); + } } - } - function fadeInDownReset() { - if (!dragging) { - jQuery(owlElementID + " .caption .fadeInDown-1, " + owlElementID + " .caption .fadeInDown-2, " + owlElementID + " .caption .fadeInDown-3").stop().delay(800).animate({ opacity: 0, top: "-15px" }, { duration: 400, easing: "easeInCubic" }); + function fadeInUpReset() { + if (!dragging) { + jQuery(owlElementID + " .caption .fadeInUp-1, " + owlElementID + " .caption .fadeInUp-2, " + owlElementID + " .caption .fadeInUp-3").stop().delay(800).animate({ opacity: 0, top: "15px" }, { duration: 400, easing: "easeInCubic" }); + } + else { + $(owlElementID + " .caption .fadeInUp-1, " + owlElementID + " .caption .fadeInUp-2, " + owlElementID + " .caption .fadeInUp-3").css({ opacity: 0, top: "15px" }); + } } - else { - jQuery(owlElementID + " .caption .fadeInDown-1, " + owlElementID + " .caption .fadeInDown-2, " + owlElementID + " .caption .fadeInDown-3").css({ opacity: 0, top: "-15px" }); + + function fadeInLeftReset() { + if (!dragging) { + jQuery(owlElementID + " .caption .fadeInLeft-1, " + owlElementID + " .caption .fadeInLeft-2, " + owlElementID + " .caption .fadeInLeft-3").stop().delay(800).animate({ opacity: 0, left: "15px" }, { duration: 400, easing: "easeInCubic" }); + } + else { + jQuery(owlElementID + " .caption .fadeInLeft-1, " + owlElementID + " .caption .fadeInLeft-2, " + owlElementID + " .caption .fadeInLeft-3").css({ opacity: 0, left: "15px" }); + } } - } - function fadeInUpReset() { - if (!dragging) { - jQuery(owlElementID + " .caption .fadeInUp-1, " + owlElementID + " .caption .fadeInUp-2, " + owlElementID + " .caption .fadeInUp-3").stop().delay(800).animate({ opacity: 0, top: "15px" }, { duration: 400, easing: "easeInCubic" }); + function fadeInRightReset() { + if (!dragging) { + jQuery(owlElementID + " .caption .fadeInRight-1, " + owlElementID + " .caption .fadeInRight-2, " + owlElementID + " .caption .fadeInRight-3").stop().delay(800).animate({ opacity: 0, left: "-15px" }, { duration: 400, easing: "easeInCubic" }); + } + else { + jQuery(owlElementID + " .caption .fadeInRight-1, " + owlElementID + " .caption .fadeInRight-2, " + owlElementID + " .caption .fadeInRight-3").css({ opacity: 0, left: "-15px" }); + } } - else { - $(owlElementID + " .caption .fadeInUp-1, " + owlElementID + " .caption .fadeInUp-2, " + owlElementID + " .caption .fadeInUp-3").css({ opacity: 0, top: "15px" }); + + function fadeIn() { + jQuery(owlElementID + " .active .caption .fadeIn-1").stop().delay(500).animate({ opacity: 1 }, { duration: 800, easing: "easeOutCubic" }); + jQuery(owlElementID + " .active .caption .fadeIn-2").stop().delay(700).animate({ opacity: 1 }, { duration: 800, easing: "easeOutCubic" }); + jQuery(owlElementID + " .active .caption .fadeIn-3").stop().delay(1000).animate({ opacity: 1 }, { duration: 800, easing: "easeOutCubic" }); } - } - function fadeInLeftReset() { - if (!dragging) { - jQuery(owlElementID + " .caption .fadeInLeft-1, " + owlElementID + " .caption .fadeInLeft-2, " + owlElementID + " .caption .fadeInLeft-3").stop().delay(800).animate({ opacity: 0, left: "15px" }, { duration: 400, easing: "easeInCubic" }); + function fadeInDown() { + jQuery(owlElementID + " .active .caption .fadeInDown-1").stop().delay(500).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" }); + jQuery(owlElementID + " .active .caption .fadeInDown-2").stop().delay(700).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" }); + jQuery(owlElementID + " .active .caption .fadeInDown-3").stop().delay(1000).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" }); } - else { - jQuery(owlElementID + " .caption .fadeInLeft-1, " + owlElementID + " .caption .fadeInLeft-2, " + owlElementID + " .caption .fadeInLeft-3").css({ opacity: 0, left: "15px" }); + + function fadeInUp() { + jQuery(owlElementID + " .active .caption .fadeInUp-1").stop().delay(500).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" }); + jQuery(owlElementID + " .active .caption .fadeInUp-2").stop().delay(700).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" }); + jQuery(owlElementID + " .active .caption .fadeInUp-3").stop().delay(1000).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" }); } - } - function fadeInRightReset() { - if (!dragging) { - jQuery(owlElementID + " .caption .fadeInRight-1, " + owlElementID + " .caption .fadeInRight-2, " + owlElementID + " .caption .fadeInRight-3").stop().delay(800).animate({ opacity: 0, left: "-15px" }, { duration: 400, easing: "easeInCubic" }); + function fadeInLeft() { + jQuery(owlElementID + " .active .caption .fadeInLeft-1").stop().delay(500).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" }); + jQuery(owlElementID + " .active .caption .fadeInLeft-2").stop().delay(700).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" }); + jQuery(owlElementID + " .active .caption .fadeInLeft-3").stop().delay(1000).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" }); } - else { - jQuery(owlElementID + " .caption .fadeInRight-1, " + owlElementID + " .caption .fadeInRight-2, " + owlElementID + " .caption .fadeInRight-3").css({ opacity: 0, left: "-15px" }); + + function fadeInRight() { + jQuery(owlElementID + " .active .caption .fadeInRight-1").stop().delay(500).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" }); + jQuery(owlElementID + " .active .caption .fadeInRight-2").stop().delay(700).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" }); + jQuery(owlElementID + " .active .caption .fadeInRight-3").stop().delay(1000).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" }); } - } - function fadeIn() { - jQuery(owlElementID + " .active .caption .fadeIn-1").stop().delay(500).animate({ opacity: 1 }, { duration: 800, easing: "easeOutCubic" }); - jQuery(owlElementID + " .active .caption .fadeIn-2").stop().delay(700).animate({ opacity: 1 }, { duration: 800, easing: "easeOutCubic" }); - jQuery(owlElementID + " .active .caption .fadeIn-3").stop().delay(1000).animate({ opacity: 1 }, { duration: 800, easing: "easeOutCubic" }); - } + jQuery(owlElementID).owlCarousel({ - function fadeInDown() { - jQuery(owlElementID + " .active .caption .fadeInDown-1").stop().delay(500).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" }); - jQuery(owlElementID + " .active .caption .fadeInDown-2").stop().delay(700).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" }); - jQuery(owlElementID + " .active .caption .fadeInDown-3").stop().delay(1000).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" }); - } + autoPlay: 5000, + stopOnHover: true, + navigation: true, + pagination: true, + singleItem: true, + addClassActive: true, + transitionStyle: "fade", + navigationText: ["", ""], - function fadeInUp() { - jQuery(owlElementID + " .active .caption .fadeInUp-1").stop().delay(500).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" }); - jQuery(owlElementID + " .active .caption .fadeInUp-2").stop().delay(700).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" }); - jQuery(owlElementID + " .active .caption .fadeInUp-3").stop().delay(1000).animate({ opacity: 1, top: "0" }, { duration: 800, easing: "easeOutCubic" }); - } + afterInit: function () { + fadeIn(); + fadeInDown(); + fadeInUp(); + fadeInLeft(); + fadeInRight(); + }, - function fadeInLeft() { - jQuery(owlElementID + " .active .caption .fadeInLeft-1").stop().delay(500).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" }); - jQuery(owlElementID + " .active .caption .fadeInLeft-2").stop().delay(700).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" }); - jQuery(owlElementID + " .active .caption .fadeInLeft-3").stop().delay(1000).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" }); - } + afterMove: function () { + fadeIn(); + fadeInDown(); + fadeInUp(); + fadeInLeft(); + fadeInRight(); + }, - function fadeInRight() { - jQuery(owlElementID + " .active .caption .fadeInRight-1").stop().delay(500).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" }); - jQuery(owlElementID + " .active .caption .fadeInRight-2").stop().delay(700).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" }); - jQuery(owlElementID + " .active .caption .fadeInRight-3").stop().delay(1000).animate({ opacity: 1, left: "0" }, { duration: 800, easing: "easeOutCubic" }); - } + afterUpdate: function () { + fadeIn(); + fadeInDown(); + fadeInUp(); + fadeInLeft(); + fadeInRight(); + }, - jQuery(owlElementID).owlCarousel({ + startDragging: function () { + dragging = true; + }, - autoPlay: 5000, - stopOnHover: true, - navigation: true, - pagination: true, - singleItem: true, - addClassActive: true, - transitionStyle: "fade", - navigationText: ["", ""], + afterAction: function () { + fadeInReset(); + fadeInDownReset(); + fadeInUpReset(); + fadeInLeftReset(); + fadeInRightReset(); + dragging = false; + } - afterInit: function() { - fadeIn(); - fadeInDown(); - fadeInUp(); - fadeInLeft(); - fadeInRight(); - }, + }); - afterMove: function() { - fadeIn(); - fadeInDown(); - fadeInUp(); - fadeInLeft(); - fadeInRight(); - }, - - afterUpdate: function() { - fadeIn(); - fadeInDown(); - fadeInUp(); - fadeInLeft(); - fadeInRight(); - }, - - startDragging: function() { - dragging = true; - }, - - afterAction: function() { - fadeInReset(); - fadeInDownReset(); - fadeInUpReset(); - fadeInLeftReset(); - fadeInRightReset(); - dragging = false; + if (jQuery(owlElementID).hasClass("owl-one-item")) { + jQuery(owlElementID + ".owl-one-item").data('owlCarousel').destroy(); } + jQuery(owlElementID + ".owl-one-item").owlCarousel({ + singleItem: true, + navigation: false, + pagination: false + }); + + + + + jQuery('.home-owl-carousel').each(function () { + + var owl = $(this); + var itemPerLine = owl.data('item'); + if (!itemPerLine) { + itemPerLine = 5; + } + owl.owlCarousel({ + items: itemPerLine, + itemsDesktop: [1199, 3], + itemsTablet: [991, 2], + navigation: true, + pagination: false, + + navigationText: ["", ""] + }); + }); + + jQuery('.homepage-owl-carousel').each(function () { + + var owl = $(this); + var itemPerLine = owl.data('item'); + if (!itemPerLine) { + itemPerLine = 4; + } + owl.owlCarousel({ + items: itemPerLine, + itemsTablet: [991, 2], + itemsDesktop: [1199, 3], + navigation: true, + pagination: false, + + navigationText: ["", ""] + }); + }); + + jQuery(".blog-slider").owlCarousel({ + items: 3, + itemsDesktopSmall: [979, 2], + itemsDesktop: [1199, 3], + navigation: true, + slideSpeed: 300, + pagination: false, + navigationText: ["", ""] + }); + + jQuery(".best-seller").owlCarousel({ + items: 3, + navigation: true, + itemsDesktopSmall: [979, 2], + itemsDesktop: [1199, 2], + slideSpeed: 300, + pagination: false, + paginationSpeed: 400, + navigationText: ["", ""] + }); + + jQuery(".sidebar-carousel").owlCarousel({ + items: 1, + itemsTablet: [978, 1], + itemsDesktopSmall: [979, 2], + itemsDesktop: [1199, 1], + navigation: true, + slideSpeed: 300, + pagination: false, + paginationSpeed: 400, + navigationText: ["", ""] + }); + + jQuery(".brand-slider").owlCarousel({ + items: 6, + navigation: true, + slideSpeed: 300, + pagination: false, + paginationSpeed: 400, + navigationText: ["", ""] + }); + jQuery("#advertisement").owlCarousel({ + items: 1, + itemsTablet: [978, 1], + itemsDesktopSmall: [979, 1], + itemsDesktop: [1199, 1], + navigation: true, + slideSpeed: 300, + pagination: true, + paginationSpeed: 400, + navigationText: ["", ""] + }); + + + }); -if (jQuery(owlElementID).hasClass("owl-one-item")) { - jQuery(owlElementID + ".owl-one-item").data('owlCarousel').destroy(); -} -jQuery(owlElementID + ".owl-one-item").owlCarousel({ - singleItem: true, - navigation: false, - pagination: false -}); + $(window).on('load', function () { + + /*===================================================================================*/ + /* LAZY LOAD IMAGES USING ECHO + /*===================================================================================*/ + + //echo.init({ + // offset: 100, + // throttle: 250, + // unload: false + //}); + + + /*===================================================================================*/ + /* RATING + /*===================================================================================*/ + //jQuery('.rating').rateit({ max: 5, step: 1, value: 4, resetable: false, readonly: true }); + /*===================================================================================*/ + /* WOW + /*===================================================================================*/ -jQuery('.home-owl-carousel').each(function(){ + //WOW.init(); - var owl = $(this); - var itemPerLine = owl.data('item'); - if(!itemPerLine){ - itemPerLine = 5; - } - owl.owlCarousel({ - items : itemPerLine, - itemsDesktop : [1199,3], - itemsTablet:[991,2], - navigation : true, - pagination : false, - navigationText: ["", ""] + /*===================================================================================*/ + /* TOOLTIP + /*===================================================================================*/ + jQuery("[data-toggle='tooltip']").tooltip(); + }); -}); - -jQuery('.homepage-owl-carousel').each(function(){ - - var owl = $(this); - var itemPerLine = owl.data('item'); - if(!itemPerLine){ - itemPerLine = 4; - } - owl.owlCarousel({ - items : itemPerLine, - itemsTablet:[991,2], - itemsDesktop : [1199,3], - navigation : true, - pagination : false, - - navigationText: ["", ""] - }); -}); - -jQuery(".blog-slider").owlCarousel({ - items : 3, - itemsDesktopSmall :[979,2], - itemsDesktop : [1199,3], - navigation : true, - slideSpeed : 300, - pagination: false, - navigationText: ["", ""] -}); - -jQuery(".best-seller").owlCarousel({ - items : 3, - navigation : true, - itemsDesktopSmall :[979,2], - itemsDesktop : [1199,2], - slideSpeed : 300, - pagination: false, - paginationSpeed : 400, - navigationText: ["", ""] -}); - -jQuery(".sidebar-carousel").owlCarousel({ - items : 1, - itemsTablet:[978,1], - itemsDesktopSmall :[979,2], - itemsDesktop : [1199,1], - navigation : true, - slideSpeed : 300, - pagination: false, - paginationSpeed : 400, - navigationText: ["", ""] -}); - -jQuery(".brand-slider").owlCarousel({ - items :6, - navigation : true, - slideSpeed : 300, - pagination: false, - paginationSpeed : 400, - navigationText: ["", ""] -}); -jQuery("#advertisement").owlCarousel({ - items : 1, - itemsTablet:[978,1], - itemsDesktopSmall :[979,1], - itemsDesktop : [1199,1], - navigation : true, - slideSpeed : 300, - pagination: true, - paginationSpeed : 400, - navigationText: ["", ""] -}); - - - -}); - - -$(window).on('load', function(){ /*===================================================================================*/ - /* LAZY LOAD IMAGES USING ECHO + /* PRICE SLIDER /*===================================================================================*/ + jQuery(function () { + + // Price Slider + if (jQuery('.price-slider').length > 0) { + jQuery('.price-slider').slider({ + min: 100, + max: 700, + step: 10, + value: [200, 500], + handle: "square" + + }); + + } - echo.init({ - offset: 100, - throttle: 250, - unload: false }); /*===================================================================================*/ - /* RATING + /* SINGLE PRODUCT GALLERY /*===================================================================================*/ - jQuery('.rating').rateit({max: 5, step: 1, value : 4, resetable : false , readonly : true}); + jQuery(function () { + jQuery('#owl-single-product').owlCarousel({ + items: 1, + itemsTablet: [768, 3], + itemsDesktop: [1199, 1], + itemsTablet: [992, 1], + itemsDesktopSmall: [768, 3] + }); + jQuery('#owl-single-product-thumbnails').owlCarousel({ + items: 4, + pagination: true, + rewindNav: true, + itemsTablet: [992, 4], + itemsDesktopSmall: [768, 4], + itemsDesktop: [992, 1] + }); - /*===================================================================================*/ - /* WOW - /*===================================================================================*/ + jQuery('#owl-single-product2-thumbnails').owlCarousel({ + items: 6, + pagination: true, + rewindNav: true, + itemsTablet: [768, 4], + itemsDesktop: [1199, 3] + }); - WOW.init(); + jQuery('.single-product-slider').owlCarousel({ + stopOnHover: true, + rewindNav: true, + singleItem: true, + pagination: true + }); - /*===================================================================================*/ - /* TOOLTIP - /*===================================================================================*/ - jQuery("[data-toggle='tooltip']").tooltip(); - -}); - -/*===================================================================================*/ -/* PRICE SLIDER -/*===================================================================================*/ -jQuery(function () { - -// Price Slider -if (jQuery('.price-slider').length > 0) { - jQuery('.price-slider').slider({ - min: 100, - max: 700, - step: 10, - value: [200, 500], - handle: "square" - }); -} - -}); - - -/*===================================================================================*/ -/* SINGLE PRODUCT GALLERY -/*===================================================================================*/ -jQuery(function(){ - jQuery('#owl-single-product').owlCarousel({ - items:1, - itemsTablet:[768,3], - itemsDesktop : [1199,1], - itemsTablet : [992,1], - itemsDesktopSmall : [768,3] - - }); - - jQuery('#owl-single-product-thumbnails').owlCarousel({ - items: 4, - pagination: true, - rewindNav: true, - itemsTablet : [992,4], - itemsDesktopSmall :[768,4], - itemsDesktop : [992,1] - }); - - jQuery('#owl-single-product2-thumbnails').owlCarousel({ - items: 6, - pagination: true, - rewindNav: true, - itemsTablet : [768, 4], - itemsDesktop : [1199,3] - }); - - jQuery('.single-product-slider').owlCarousel({ - stopOnHover: true, - rewindNav: true, - singleItem: true, - pagination: true - }); - - -}); - diff --git a/assets/styles/app_frontend.scss b/assets/styles/app_frontend.scss index 5b7f39c..fc32da4 100755 --- a/assets/styles/app_frontend.scss +++ b/assets/styles/app_frontend.scss @@ -1,10 +1,10 @@ -@import 'custom'; +@import 'frontend/rateit.scss'; @import '../../public/assets/css/bootstrap.min.css'; @import 'frontend/main.scss'; @import 'frontend/blue.scss'; -@import 'frontend/rateit.scss'; + @import '../../node_modules/animate.css/animate.css';