From a83cb770bb7a9d12689e1c86f64c5c535f2e6250 Mon Sep 17 00:00:00 2001 From: Haroen Viaene Date: Fri, 4 Dec 2015 19:41:10 +0100 Subject: [PATCH 1/2] Refactored to remove jquery dependency Reason: I don't like jquery Validation that this was good: ![](https://i.imgur.com/bCv94yJ.png) where: the first part is after my refactor, the second before, both moving as fast. --- example.html | 20 ++++++++------- splitpic.css | 9 +++++-- splitpic.js | 70 ++++++++++++++++++++++------------------------------ 3 files changed, 47 insertions(+), 52 deletions(-) diff --git a/example.html b/example.html index 90d88e2..63fef8b 100644 --- a/example.html +++ b/example.html @@ -61,16 +61,18 @@

Oh, no! Daddy keeps disappearing.

- diff --git a/splitpic.css b/splitpic.css index 8167474..f69b3c6 100644 --- a/splitpic.css +++ b/splitpic.css @@ -1,6 +1,6 @@ .splitpic .splitpic-images { - position: relative; - overflow: hidden; + position: relative; + overflow: hidden; } .splitpic-image { @@ -24,6 +24,11 @@ position: absolute; text-align: center; background-color: rgba(0, 0, 0, 0.50); + -webkit-transition: all .2s ease-out; + -moz-transition: all .2s ease-out; + -o-transition: all .2s ease-out; + -ms-transition: all .2s ease-out; + transition: all .2s ease-out; } .splitpic-bar { position: absolute; diff --git a/splitpic.js b/splitpic.js index babf784..c307179 100644 --- a/splitpic.js +++ b/splitpic.js @@ -1,38 +1,33 @@ (function (window) { function SplitPic(element) { - var el = $(element); - var leftPane = $('.splitpic-left-image', el); - var rightPane = $('.splitpic-right-image', el); - var bar = $('.splitpic-bar', el); + var leftPane = element.querySelector('.splitpic-left-image'); + var bar = element.querySelector('.splitpic-bar'); var infoHidden = false; // split the image at the cursor function updateSplit(x, isRelative) { var relativeX; if (!isRelative) { - var elOffset = el.offset(); - relativeX = x - elOffset.left; + relativeX = x - element.offsetLeft; } else { relativeX = x; } - leftPane.css( - 'clip', 'rect(0px, ' + relativeX + 'px, auto, 0px)' - ); - bar.css('left', relativeX - bar.width() / 2 + 'px'); + leftPane.style.clip = 'rect(0px, ' + relativeX + 'px, auto, 0px)'; + bar.style.left = relativeX + 'px'; }; // how much of the left image should we show at start? 50% if not specified - var startPercentage = parseInt(el.attr('data-start-percent')); + var startPercentage = parseInt(element.getAttribute('data-start-percent')); if (isNaN(startPercentage)) { startPercentage = 50; } startPercentage /= 100; - updateSplit(el.width() * startPercentage, true); + updateSplit(element.width * startPercentage, true); var isMoving = false; var lastX = 0, lastY = 0; - el.on('touchmove touchstart', function (event) { + element.addEventListener('touchmove', function (event) { if (!infoHidden) { - $('.splitpic-info', el).fadeOut(200); + element.querySelector('.splitpic-info').style.opacity = 0; infoHidden = true; } var touches; @@ -60,65 +55,58 @@ function SplitPic(element) { lastY = touch.pageY; } }); - el.on('touchend', function (event) { + element.addEventListener('touchend', function (event) { isMoving = false; }); - el.on('mouseenter mousemove mouseleave', function (event) { + element.addEventListener('mousemove', function (event) { if (!infoHidden) { - $('.splitpic-info', el).fadeOut(200); + element.querySelector('.splitpic-info').style.opacity = 0; infoHidden = true; } updateSplit(event.pageX); }); - + }; window.SplitPic = SplitPic; function SplitPicVertical(element) { - var el = $(element); - var overPane = $('.splitpic-left-image', el); - var underPane = $('.splitpic-right-image', el); - var bar = $('.splitpic-bar', el); + var overPane = element.querySelector('.splitpic-left-image'); + var bar = element.querySelector('.splitpic-bar'); var infoHidden = false; // split the image at the cursor function updateSplit(y, isRelative) { var relativeY; if (!isRelative) { - var elOffset = el.offset(); - relativeY = y - elOffset.top; + relativeY = y - element.offsetTop; } else { relativeY = y; } - overPane.css( - 'clip', 'rect(' + relativeY + 'px, auto, auto, 0px)' - ); - bar.css('top', relativeY - bar.height() / 2 + 'px'); + overPane.style.clip = 'rect(' + relativeY + 'px, auto, auto, 0px)'; + bar.style.top = relativeY + 'px'; }; // this is necessary since we're using original crops and therefore the // image height won't be known until it's loaded. function setInitialPosition() { // how much of the left image should we show at start? 50% if not specified - var startPercentage = parseInt(el.attr('data-start-percent')); + var startPercentage = parseInt(element.getAttribute('data-start-percent')); if (isNaN(startPercentage)) { startPercentage = 50; } startPercentage /= 100; - updateSplit(el.height() * startPercentage, true); + updateSplit(element.clientHeight * startPercentage, true); } - var img = $('.splitpic-left-image img', element); - if (img[0].complete) { + var img = element.querySelector('.splitpic-left-image img'); + img.addEventListener('load',function(){ setInitialPosition(); - } else { - img.load(setInitialPosition.bind(this)); - } + }); var isMoving = false; var lastX = 0, lastY = 0; - el.on('touchmove touchstart', function (event) { + element.addEventListener('touchmove', function (event) { if (!infoHidden) { - $('.splitpic-info', el).fadeOut(200); + element.querySelector('.splitpic-info').style.opacity = 0; infoHidden = true; } var touches; @@ -148,17 +136,17 @@ function SplitPicVertical(element) { lastY = touch.pageY; } }); - el.on('touchend', function (event) { + element.addEventListener('touchend', function (event) { isMoving = false; }); - el.on('mouseenter mousemove mouseleave', function (event) { + element.addEventListener('mousemove', function (event) { if (!infoHidden) { - $('.splitpic-info', el).fadeOut(200); + element.querySelector('.splitpic-info').style.opacity = 0; infoHidden = true; } updateSplit(event.pageY); }); - + }; window.SplitPic = SplitPic; From 06e0b11920e5cdf289b7c7a2f4c542cb80c5da54 Mon Sep 17 00:00:00 2001 From: Haroen Viaene Date: Mon, 8 Jan 2018 16:06:44 +0100 Subject: [PATCH 2/2] chore: use clipPath --- splitpic.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/splitpic.js b/splitpic.js index c307179..fe60610 100644 --- a/splitpic.js +++ b/splitpic.js @@ -12,7 +12,7 @@ function SplitPic(element) { } else { relativeX = x; } - leftPane.style.clip = 'rect(0px, ' + relativeX + 'px, auto, 0px)'; + leftPane.style.clipPath = 'rect(0px, ' + relativeX + 'px, auto, 0px)'; bar.style.left = relativeX + 'px'; }; // how much of the left image should we show at start? 50% if not specified @@ -83,7 +83,7 @@ function SplitPicVertical(element) { } else { relativeY = y; } - overPane.style.clip = 'rect(' + relativeY + 'px, auto, auto, 0px)'; + overPane.style.clipPath = 'rect(' + relativeY + 'px, auto, auto, 0px)'; bar.style.top = relativeY + 'px'; }; // this is necessary since we're using original crops and therefore the