Skip to content
This repository has been archived by the owner on Feb 13, 2019. It is now read-only.

Refactored to remove jquery dependency #1

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+47 −52
Open

Refactored to remove jquery dependency #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a83cb77
Refactored to remove jquery dependency
Haroenv Dec 4, 2015
06e0b11
chore: use clipPath
Haroenv Jan 8, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,16 +61,18 @@ <h3>Oh, no! Daddy keeps disappearing.</h3>
</div>

<script type="text/javascript" src="splitpic.js" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.splitpic-horizontal .splitpic-images').each(function (i, v) {
var sp = new SplitPic(v);
});
$('.splitpic-vertical .splitpic-images').each(function (i, v) {
var sp = new SplitPicVertical(v);
});
});
NodeList.prototype.forEach = Array.prototype.forEach;
(function() {
var horizontal = document.querySelectorAll('.splitpic-horizontal .splitpic-images');
for (var i = 0; i < horizontal.length; ++i) {
var sp = new SplitPic(horizontal[i]);
}
var vertical = document.querySelectorAll('.splitpic-vertical .splitpic-images');
for (var i = 0; i < vertical.length; ++i) {
var sp = new SplitPicVertical(vertical[i]);
}
})();
</script>
</body>
</html>
9 changes: 7 additions & 2 deletions splitpic.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.splitpic .splitpic-images {
position: relative;
overflow: hidden;
position: relative;
overflow: hidden;
}

.splitpic-image {
Expand All @@ -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;
Expand Down
70 changes: 29 additions & 41 deletions splitpic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.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
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;
Expand Down Expand Up @@ -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.clipPath = '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;
Expand Down Expand Up @@ -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;
Expand Down