From 64991923c45dd2aaf309677382ccdfd498295086 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Fri, 6 Sep 2019 17:09:26 +0200 Subject: [PATCH] wip #2747 @0.5 --- app/Models/Product.php | 2 +- resources/js/bootstrap.js | 17 --- resources/js/carrousel.js | 288 ++++++++++++++++++++++++++++++++++++++ resources/js/home.js | 2 + resources/js/mailform.js | 3 +- webpack.mix.js | 1 + 6 files changed, 294 insertions(+), 19 deletions(-) create mode 100644 resources/js/carrousel.js create mode 100644 resources/js/home.js diff --git a/app/Models/Product.php b/app/Models/Product.php index 729f937..86ae446 100644 --- a/app/Models/Product.php +++ b/app/Models/Product.php @@ -423,7 +423,7 @@ class Product extends CubistMagicPageModel foreach ($products as $product) { $v = $product->get($spec_name); - $allv[$product->id] = $v; + if (null === $v) { $v = '-'; } diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js index 4e36bfc..e455192 100644 --- a/resources/js/bootstrap.js +++ b/resources/js/bootstrap.js @@ -1,20 +1,5 @@ - window._ = require('lodash'); -/** - * We'll load jQuery and the Bootstrap jQuery plugin which provides support - * for JavaScript based Bootstrap features such as modals and tabs. This - * code may be modified to fit the specific needs of your application. - */ - -try { - //window.Popper = require('popper.js').default; - window.$ = window.jQuery = require('jquery'); - - //require('bootstrap'); -} catch (e) {} - - /** * We'll load the axios HTTP library which allows us to easily issue requests * to our Laravel back-end. This library automatically handles sending the @@ -22,7 +7,6 @@ try { */ window.axios = require('axios'); - window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; /** @@ -32,7 +16,6 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; */ let token = document.head.querySelector('meta[name="csrf-token"]'); - if (token) { window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content; } else { diff --git a/resources/js/carrousel.js b/resources/js/carrousel.js new file mode 100644 index 0000000..fc68dcc --- /dev/null +++ b/resources/js/carrousel.js @@ -0,0 +1,288 @@ +import TweenMax from "gsap/TweenMax"; + +(function ($) { + function JQPMISlide(element) { + this.element = element; + this.pmiSlider = this.element.get(0); + this.hammerSwipe = new Hammer(this.pmiSlider); + this.index = 0; + this.slideLength = this.element.find(".slide").length; + + this.prevBtn = this.element.find(".home-arrow-left"); + this.nextBtn = this.element.find(".home-arrow-right"); + this.Delay = 1; + this.getImg = new Image(); + this.getImg.src = this.element.find('.img-slider').attr("src"); + + this.img = this.element.find('.img-slider'); + this.imgWidth = this.getImg.naturalWidth; + + this.width = this.element.find('.slide-img').width(); // --> clip container width + this.height = this.element.find('.slide-img').height(); // --> clip container height + this.init = 'rect(0px '; + this.final = 'px 0px)'; + + this.container = this.element.find('.slider'); + this.hammerSwipe.get('swipe').set({ enable: true }); + this.initt(); + }; + + JQPMISlide.prototype = { + initt: function () { + this.initEvents(); + }, + + initEvents: function () { + let $this = this; + $(window).on('orientationchange', function () { + $this.resize(); + setTimeout(function () { + $this.resize(); + }, 500); + }); + $(window).on('resize', function () { + $this.resize(); + }); + + this.autoSlideDelay = 4; // automatic slideshow delay + this.slideInterval = window.setTimeout(function () { + $this.nextSlide(); + }, this.autoSlideDelay*1000); + + this.resize(); + this.initSwipeEvent(); + this.enableArrows(); + this.automaticSlideshow(); + this.indicator(); + }, + + resize: function () { + let $this = this; + this.element.find('.img-slider').each(function () { + let width = $this.element.find('.slide-img').eq($this.index).width(), + height = $this.element.find('.slide-img').eq($this.index).height(); + + let naturalHeight = $(this).prop('naturalHeight'), + naturalWidth = $(this).prop('naturalWidth'); + + let getAllImg = new Image(); + getAllImg.src = $(this).attr("src"); + + let widthFactor = width / naturalWidth, // coef multiplicateur width + heightFactor = height / naturalHeight; // coef multiplicateur height + + TweenMax.set($(this), { + width: naturalWidth * Math.max(widthFactor, heightFactor), + height: naturalHeight * Math.max(widthFactor, heightFactor) + }); + }); + + $('.slide-img').each(function () { + let width = $(this).width(), // --> container width (clip container) + height = $(this).height(); // --> container height (clip container) + + TweenMax.set($(this), {clip: $this.init + width + 'px ' + height + $this.final, ease: Power3.easeOut}); // on resize apply new width/height to clip container + }); + }, + + goToSlide: function (nextindex, direction) { + this.width = this.element.find('.slide-img').eq(this.index).width(); + this.height = this.element.find('.slide-img').eq(this.index).height(); + + this.currentSlideIndex = this.element.find('.slide').eq(this.index); + this.nextSlideIndex = this.element.find('.slide').eq(nextindex); + this.currentTextContainer = this.element.find('.slide-txt').eq(this.index); + this.nextTextContainer = this.element.find('.slide-txt').eq(nextindex); + this.currentContainerImg = this.element.find('.slide-img').eq(this.index); + this.currentIndicatorIndex = this.element.find('.slider-position').eq(this.index); + this.currentTextBlock = this.element.find('.txt').eq(this.index); + this.nextTextBlock = this.element.find('.txt').eq(nextindex); + this.nextIndicatorIndex = this.element.find('.slider-position').eq(nextindex); + this.nextContainerImg = this.element.find('.slide-img').eq(nextindex); + + this.hammerSwipe.get('swipe').set({enable: false}); // disable swipe when animation is running + let $this = this; + this.finishAnimation = function () { // when animation is finished this function will be executed + + $this.hammerSwipe.get('swipe').set({enable: true}); // swipe functionality is now reactivate + $this.currentSlideIndex.removeClass('active').eq($this.index); + + $this.slideInterval = setTimeout(function () { + $this.nextSlide(); + }, $this.autoSlideDelay*1000); + + $this.enableArrows(); // when animation is finished we reactivate click event + $this.automaticSlideshow(); + TweenMax.set($this.element.find('.slide-img'), { + clip: $this.init + $this.width + 'px ' + $this.height + $this.final, + ease: Power3.easeOut + }); + + }; + + if ($(window).outerWidth() > 768) { + TweenMax.set($this.element.find('.slide-img'), { + clip: $this.init + $this.width + 'px ' + $this.height + $this.final, + ease: Power3.easeOut + }); + + let tl = new TimelineMax({onComplete: $this.finishAnimation}); + + tl.set($this.currentSlideIndex, {zIndex: 97}); + tl.set($this.nextTextContainer, {opacity: 1, x: 0}); + tl.to($this.currentTextContainer, 0.5 * $this.Delay, { + x: -80 * direction, + opacity: 0, + ease: Power1.easeOut + }); + tl.to($this.currentContainerImg, 2 * $this.Delay, { + clip: $this.init + (direction) * -1 * $this.imgWidth + 'px,' + $this.height + 'px,' + (direction) * -1 * $this.imgWidth + 'px', + ease: Power2.easeInOut + }, "-=" + 0.8 * $this.Delay); + + tl.from($this.nextTextContainer, 0.5 * $this.Delay, { + x: 80 * direction, + opacity: 0, + ease: Power1.easeOut + }, '-=' + 1.2 * $this.Delay); + + tl.from($this.nextContainerImg, 1.5 * $this.Delay, { + x: 150 * direction, + ease: Power2.easeInOut + }, '-=' + 2.3 * $this.Delay); // initial delay value 1.5s + tl.to($this.currentContainerImg, 1.5 * $this.Delay, { + x: -250 * direction, + ease: Power2.easeInOut + }, "-=" + 1.9 * $this.Delay); // initial delay value 1.5s + tl.set($this.currentSlideIndex, {zIndex: 0}); + tl.set($this.currentContainerImg, {x: 0}); + + } + else { + let tl2 = new TimelineMax({onComplete: $this.finishAnimation}); + + $this.percent = 100 * direction; + $this.negativePercent = -100 * direction; + + tl2.set($this.currentSlideIndex, {transform: 'translateX(0px)', opacity: 1}); + tl2.set($this.nextSlideIndex, {transform: 'translateX(0px)', opacity: 1}); + tl2.set($this.currentTextContainer, {transform: 'translateX(0px)', opacity: 1}); + tl2.set($this.nextTextContainer, {transform: 'translateX(0px)', opacity: 1}); + + tl2.to($this.currentSlideIndex, 0.7, { + transform: 'translateX(' + ($this.percent + '%') + ')', + ease: Power1.easeOut + }); + tl2.to($this.currentTextBlock, 0.7, {opacity: 0}, '-=0.9'); + tl2.from($this.nextSlideIndex, 0.7, { + transform: 'translateX(' + ($this.negativePercent + '%') + ')', + ease: Power1.easeOut + }, "-=0.7"); + tl2.from($this.nextTextBlock, 0.7, {opacity: 0, x: -100 * direction}); + + // reset all block style + tl2.set($this.currentTextBlock, {opacity: 1}); + tl2.set($this.currentSlideIndex, {transform: 'translateX(0px)', opacity: 1}); + tl2.set($this.nextSlideIndex, {transform: 'translateX(0px)', opacity: 1}); + tl2.set($this.currentTextContainer, {transform: 'translateX(0px)', opacity: 1}); + tl2.set($this.nextTextContainer, {transform: 'translateX(0px)', opacity: 1}); + + } + this.nextIndicatorIndex.addClass('active-indicator').eq(nextindex); + this.currentIndicatorIndex.removeClass('active-indicator').eq(this.index); + + this.nextSlideIndex.addClass('active').eq(nextindex); + this.disableArrows(); // disable click on arrows until animation finishes + this.index = nextindex; + + }, + + nextSlide: function () { + let direction = 1; + + let nextindex = (this.index + direction + this.slideLength) % this.slideLength; + this.goToSlide(nextindex, direction); + }, + + prevSlide: function () { + let direction = -1; + + let nextindex = (this.index + direction + this.slideLength) % this.slideLength; + this.goToSlide(nextindex, direction); + }, + + indicator: function(){ + let $this= this; + $('.slider-position').on('click',function () { + let direction = 1; + let nextPosition= $(this).data('position'); + let currentPosition = $this.index; + + clearTimeout($this.slideInterval); + + if (currentPosition< nextPosition){ + direction = 1; + } + else if(currentPosition > nextPosition){ + direction = -1; + } + else if(currentPosition == nextPosition){ + return false; + } + $this.goToSlide(nextPosition,direction); + }); + }, + + automaticSlideshow:function(){ + + let $this = this; + this.element.find(".arrow").on('click',function () { + // window.clearTimeout($this.slideInterval); + window.clearTimeout($this.slideInterval); + + alert($this.slideInterval); + }); + }, + + initSwipeEvent: function (){ + let $this = this; + this.hammerSwipe.on('swiperight', function() { + $this.prevSlide(); + clearTimeout($this.slideInterval); + }); + this.hammerSwipe.on('swipeleft', function() { + $this.nextSlide(); + clearTimeout($this.slideInterval); + }); + }, + + enableArrows: function() { + let $this = this; + this.element.find(".arrow.next").on('click',function () { + $this.nextSlide(); + }); + + this.element.find(".arrow.prev").on('click',function () { + $this.prevSlide(); + }); + }, + + disableArrows: function() { + this.element.find(".arrow.next").off(); + this.element.find(".arrow.prev").off(); + } + }; + + jQuery.fn.PMISlide = function () { + return this.each(function () { + var $this = $(this); + if ($(this).data('PMISlide') === undefined) { + $(this).data('PMISlide', new JQPMISlide($this)); + } + }) + }; +})(jQuery); + +$(function () { + $(".slider-container").PMISlide(); +}); diff --git a/resources/js/home.js b/resources/js/home.js new file mode 100644 index 0000000..af762e3 --- /dev/null +++ b/resources/js/home.js @@ -0,0 +1,2 @@ +window.$ = window.jQuery = require('jquery'); +require('./carrousel'); diff --git a/resources/js/mailform.js b/resources/js/mailform.js index d480620..2ad4587 100644 --- a/resources/js/mailform.js +++ b/resources/js/mailform.js @@ -1,5 +1,6 @@ -$(function () { +window.$ = window.jQuery = require('jquery'); +$(function () { $('form.mailform').each(function () { inputs = $(this).find('label input,select'); var nb_fields = inputs.length; diff --git a/webpack.mix.js b/webpack.mix.js index f862eea..08cff73 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -26,6 +26,7 @@ mix.browserSync({ mix.js('resources/js/app.js', 'public/js') .js('resources/js/vendor/**/**/app.js','public/js/vendor.js') + .js('resources/js/home.js','public/js') .stylus('resources/styles/app.styl', 'public/css', { use: [ require('rupture')() -- 2.39.5