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

Tidy things up to get project example working again #4

Draft
grahamalama wants to merge 8 commits into
base: master
Choose a base branch
from
Draft

Tidy things up to get project example working again #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 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
35f01b2
element.width is undefined -- use clientWidth instead
grahamalama Feb 10, 2019
66bcc59
Tidy up HTML
grahamalama Feb 10, 2019
0d7d1ae
Add more styling to images to make the appear correctly
grahamalama Feb 10, 2019
b8f6c6c
Save example images in repo. Old link doesn't work.
grahamalama Feb 10, 2019
2eb9877
Remove empty style
grahamalama Feb 10, 2019
8d9f23c
clipPath wasn't working. Use clip.
grahamalama Feb 10, 2019
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
Binary file added assets/hiding_daddy.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/surprise_daddy.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 24 additions & 17 deletions example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
<html>
<head>
<meta charset="UTF-8">
<title>SplitPic Example</title>
<link rel="stylesheet" type="text/css" href="splitpic.css" />
<style>
.container {
width: 600px;
margin: 0 auto;
}
img{
height: auto;
width: 600px;
}
</style>
</head>
<body>
Expand All @@ -15,14 +20,14 @@ <h1>Please Enjoy This Humorous Example Page</h1>
<div class="splitpic splitpic-horizontal" data-orientation="horizontal">
<h3>Oh, no! Daddy keeps disappearing.</h3>
<div class="splitpic-images" data-start-percent="0">
<div class="splitpic-image splitpic-right-image">
<div class="splitpic-image splitpic-left-image">
<div>
<img src="http://chimg.onionstatic.com/5747/original/600.jpg">
<img src="./assets/surprise_daddy.jpg">
</div>
</div>
<div class="splitpic-image splitpic-left-image">
<div class="splitpic-image splitpic-right-image">
<div>
<img src="http://chimg.onionstatic.com/5746/original/600.jpg">
<img src="./assets/hiding_daddy.jpg">
</div>
</div>
<div class="splitpic-bar"></div>
Expand All @@ -38,14 +43,14 @@ <h3>Oh, no! Daddy keeps disappearing.</h3>
<div class="splitpic splitpic-vertical" data-orientation="vertical">
<h3>Oh, no! Daddy keeps disappearing.</h3>
<div class="splitpic-images" data-start-percent="0">
<div class="splitpic-image splitpic-right-image">
<div class="splitpic-image splitpic-left-image">
<div>
<img src="http://chimg.onionstatic.com/5745/original/600.jpg">
<img src="./assets/hiding_daddy.jpg">
</div>
</div>
<div class="splitpic-image splitpic-left-image">
<div class="splitpic-image splitpic-right-image">
<div>
<img src="http://chimg.onionstatic.com/5744/original/600.jpg">
<img src="./assets/surprise_daddy.jpg">
</div>
</div>
<div class="splitpic-bar"></div>
Expand All @@ -61,16 +66,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>
12 changes: 8 additions & 4 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 @@ -14,8 +14,7 @@
width: 100%;
height: 100%;
}
.splitpic-right-image {
}

.splitpic-info {
top: 45%;
width: 100%;
Expand All @@ -24,6 +23,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.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.clientWidth * 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.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;
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