compare-images-slider 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +67 -0
- package/dist/assets/img-alt.jpg +0 -0
- package/dist/assets/img.jpg +0 -0
- package/dist/compare-images-slider.css +57 -0
- package/dist/compare-images-slider.css.map +1 -0
- package/dist/compare-images-slider.js +132 -0
- package/dist/compare-images-slider.js.map +7 -0
- package/dist/compare-images-slider.min.css +2 -0
- package/dist/compare-images-slider.min.js +2 -0
- package/dist/site.css +7161 -0
- package/dist/site.css.map +1 -0
- package/dist/site.min.css +2 -0
- package/index.html +87 -0
- package/package.json +36 -0
- package/poops.json +62 -0
- package/script/build +3 -0
- package/script/publish +138 -0
- package/script/server +3 -0
- package/src/markup/_data/fonts.yaml +4 -0
- package/src/markup/_layouts/default.html +49 -0
- package/src/markup/index.md +34 -0
- package/src/scripts/compare-images-slider.js +134 -0
- package/src/scripts/iife.js +6 -0
- package/src/styles/_config.scss +22 -0
- package/src/styles/index.scss +61 -0
- package/src/styles/site.scss +9 -0
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>{{ page.title or site.title }}</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<meta name="description" content="{{ page.description or site.description }}">
|
|
8
|
+
<link rel="alternate" type="application/rss+xml" href="{{ site.url }}/changelog/feed.rss">
|
|
9
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
10
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
11
|
+
<link rel="stylesheet" href="{{ relativePathPrefix }}dist/site.min.css">
|
|
12
|
+
<link rel="stylesheet" href="{{ relativePathPrefix }}dist/compare-images-slider.min.css">
|
|
13
|
+
|
|
14
|
+
{% set fontparts = '' %}
|
|
15
|
+
|
|
16
|
+
{% for font in fonts %}
|
|
17
|
+
{% set name = font.name | replace(" ", "+") %}
|
|
18
|
+
{% if font.weights %}
|
|
19
|
+
{% set weights = font.weights | join(",") %}
|
|
20
|
+
{% set name = name + ":wght@" + weights %}
|
|
21
|
+
{% endif %}
|
|
22
|
+
{% set fontparts = fontparts + name %}
|
|
23
|
+
{% if not loop.last %}
|
|
24
|
+
{% set fontparts = fontparts + "&family=" %}
|
|
25
|
+
{% endif %}
|
|
26
|
+
{% endfor %}
|
|
27
|
+
|
|
28
|
+
{% if fontparts.length != 0 %}
|
|
29
|
+
<link href="https://fonts.googleapis.com/css2?family={{ fontparts }}&display=swap" rel="stylesheet">
|
|
30
|
+
{% endif %}
|
|
31
|
+
|
|
32
|
+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css">
|
|
33
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
|
|
34
|
+
</head>
|
|
35
|
+
<body>
|
|
36
|
+
{% block content %} {% endblock %}
|
|
37
|
+
|
|
38
|
+
{% if livereload_port %}
|
|
39
|
+
<script>document.write('<script src="http://'
|
|
40
|
+
+ (location.host || 'localhost').split(':')[0]
|
|
41
|
+
+ ':{{livereload_port}}/livereload.js?snipver=1"></'
|
|
42
|
+
+ 'script>')</script>
|
|
43
|
+
{% endif %}
|
|
44
|
+
<script>hljs.highlightAll();</script>
|
|
45
|
+
|
|
46
|
+
<script async type="text/javascript" src="{{ relativePathPrefix }}dist/compare-images-slider.min.js"></script>
|
|
47
|
+
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
|
48
|
+
</body>
|
|
49
|
+
</html>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
---
|
|
4
|
+
<div class="github-buttons">
|
|
5
|
+
<a class="github-button" href="https://github.com/stamat/compare-images-slider" data-size="large" aria-label="Download stamat/compare-images-slider on GitHub">View on GitHub</a>
|
|
6
|
+
</div>
|
|
7
|
+
|
|
8
|
+
<div class="container mb-64">
|
|
9
|
+
<h1>{{ site.title }}</h1>
|
|
10
|
+
<p class="p1">{{ site.description }}</p>
|
|
11
|
+
|
|
12
|
+
<div class="js-compare-images-slider compare-images-slider">
|
|
13
|
+
<img width="1680" height="1120" src="{{ relativePathPrefix }}dist/assets/img.jpg" loading="lazy" alt="">
|
|
14
|
+
<div class="frame">
|
|
15
|
+
<img width="1680" height="1120" src="{{ relativePathPrefix }}dist/assets/img-alt.jpg" loading="lazy" alt="">
|
|
16
|
+
</div>
|
|
17
|
+
<span class="handle"></span>
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<script>
|
|
21
|
+
const slider = document.querySelector('.js-compare-images-slider');
|
|
22
|
+
|
|
23
|
+
if (window.CompareImagesSlider) {
|
|
24
|
+
const compareImagesSlider = new CompareImagesSlider(slider);
|
|
25
|
+
} else {
|
|
26
|
+
document.addEventListener('CompareImagesSliderLoaded', function() {
|
|
27
|
+
const compareImagesSlider = new CompareImagesSlider(slider);
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
Photo by <a href="https://unsplash.com/@necone?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Nenad Radojčić</a> on <a href="https://unsplash.com/photos/gray-concrete-building-under-white-sky-during-daytime-JBm5eNo6B4E?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import { percentage } from 'book-of-spells'
|
|
2
|
+
|
|
3
|
+
function onDrag(element, callback) {
|
|
4
|
+
let startX = 0;
|
|
5
|
+
let startY = 0;
|
|
6
|
+
let endX = 0;
|
|
7
|
+
let endY = 0;
|
|
8
|
+
let dragging = false;
|
|
9
|
+
let rect = element.getBoundingClientRect();
|
|
10
|
+
|
|
11
|
+
const handleStart = function(e) {
|
|
12
|
+
const carrier = e.type === 'touchstart' ? e.touches[0] : e;
|
|
13
|
+
startX = carrier.clientX;
|
|
14
|
+
startY = carrier.clientY;
|
|
15
|
+
dragging = true;
|
|
16
|
+
rect = element.getBoundingClientRect();
|
|
17
|
+
const xPercentage = percentage(startX - rect.left, rect.width);
|
|
18
|
+
const yPercentage = percentage(startY - rect.top, rect.height);
|
|
19
|
+
const event = new CustomEvent('dragstart', { detail: { target: element, startX, startY, rect, xPercentage, yPercentage } });
|
|
20
|
+
element.dispatchEvent(event);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const handleMove = function(e) {
|
|
24
|
+
if (!dragging) return;
|
|
25
|
+
const carrier = e.type === 'touchmove' ? e.touches[0] : e;
|
|
26
|
+
endX = carrier.clientX;
|
|
27
|
+
endY = carrier.clientY;
|
|
28
|
+
handleDragGesture();
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
const handleEnd = function() {
|
|
32
|
+
dragging = false;
|
|
33
|
+
const event = new CustomEvent('dragend', { detail: { target: element, startX, startY, rect, endX, endY } });
|
|
34
|
+
element.dispatchEvent(event);
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
const handleDragGesture = function() {
|
|
38
|
+
const deltaX = endX - startX;
|
|
39
|
+
const deltaY = endY - startY;
|
|
40
|
+
const left = deltaX < 0;
|
|
41
|
+
const up = deltaY < 0;
|
|
42
|
+
const xPercentage = percentage(endX - rect.left, rect.width);
|
|
43
|
+
const yPercentage = percentage(endY - rect.top, rect.height);
|
|
44
|
+
|
|
45
|
+
const detail = {
|
|
46
|
+
target: element,
|
|
47
|
+
deltaX: deltaX,
|
|
48
|
+
deltaY: deltaY,
|
|
49
|
+
startX: startX,
|
|
50
|
+
startY: startY,
|
|
51
|
+
endX: endX,
|
|
52
|
+
endY: endY,
|
|
53
|
+
horizontalDirection: left ? 'left' : 'right',
|
|
54
|
+
verticalDirection: up ? 'up' : 'down',
|
|
55
|
+
xPercentage: xPercentage,
|
|
56
|
+
yPercentage: yPercentage
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
if (xPercentage < 0) {
|
|
60
|
+
detail.xPercentage = 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
if (xPercentage > 100) {
|
|
64
|
+
detail.xPercentage = 100;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
if (yPercentage < 0) {
|
|
68
|
+
detail.yPercentage = 0;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
if (yPercentage > 100) {
|
|
72
|
+
detail.yPercentage = 100;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
if (callback) {
|
|
76
|
+
callback(detail);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
const event = new CustomEvent('drag', { detail: detail });
|
|
80
|
+
element.dispatchEvent(event);
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
element.addEventListener('mousedown', handleStart);
|
|
84
|
+
element.addEventListener('mousemove', handleMove);
|
|
85
|
+
element.addEventListener('mouseup', handleEnd);
|
|
86
|
+
element.addEventListener('touchstart', handleStart);
|
|
87
|
+
element.addEventListener('touchmove', handleMove);
|
|
88
|
+
element.addEventListener('touchend', handleEnd);
|
|
89
|
+
|
|
90
|
+
return {
|
|
91
|
+
destroy: function() {
|
|
92
|
+
element.removeEventListener('mousedown', handleStart);
|
|
93
|
+
element.removeEventListener('mousemove', handleMove);
|
|
94
|
+
element.removeEventListener('mouseup', handleEnd);
|
|
95
|
+
element.removeEventListener('touchstart', handleStart);
|
|
96
|
+
element.removeEventListener('touchmove', handleMove);
|
|
97
|
+
element.removeEventListener('touchend', handleEnd);
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
export default class CompareImagesSlider {
|
|
103
|
+
constructor(element, options) {
|
|
104
|
+
this.element = element;
|
|
105
|
+
this.frame = this.element.querySelector('.frame');
|
|
106
|
+
this.second = this.frame.querySelector(':scope > img');
|
|
107
|
+
this.handle = this.element.querySelector('.handle');
|
|
108
|
+
|
|
109
|
+
window.addEventListener('resize', () => {
|
|
110
|
+
requestAnimationFrame(this.setupSecondImage.bind(this));
|
|
111
|
+
});
|
|
112
|
+
this.setupSecondImage();
|
|
113
|
+
|
|
114
|
+
this.drag = onDrag(this.element);
|
|
115
|
+
this.element.addEventListener('dragstart', this.updateVisibleHandler.bind(this));
|
|
116
|
+
this.element.addEventListener('drag', this.updateVisibleHandler.bind(this));
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
setupSecondImage() {
|
|
120
|
+
const width = this.element.offsetWidth + 'px';
|
|
121
|
+
this.second.style.width = width;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
updateVisibleHandler(e) {
|
|
125
|
+
this.frame.style.width = e.detail.xPercentage + '%';
|
|
126
|
+
this.handle.style.left = e.detail.xPercentage + '%';
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
destroy() {
|
|
130
|
+
this.drag.destroy();
|
|
131
|
+
this.element.removeEventListener('dragstart', this.updateVisibleHandler.bind(this));
|
|
132
|
+
this.element.removeEventListener('drag', this.updateVisibleHandler.bind(this));
|
|
133
|
+
}
|
|
134
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* BREAKPOINTS - 'size label': (min, max)
|
|
3
|
+
*/
|
|
4
|
+
$breakpoints: (
|
|
5
|
+
'': (false, 956px),
|
|
6
|
+
'lg': (960px, false)
|
|
7
|
+
);
|
|
8
|
+
|
|
9
|
+
$container-max-width: 1440px;
|
|
10
|
+
|
|
11
|
+
/*
|
|
12
|
+
* COLORS
|
|
13
|
+
*/
|
|
14
|
+
$colors: (
|
|
15
|
+
black: #000000,
|
|
16
|
+
white: #ffffff,
|
|
17
|
+
primary: #824F2D,
|
|
18
|
+
brownish: #DCC8AC
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
$heading-font: Poppins,Helvetica,Arial,sans-serif;
|
|
22
|
+
$paragraph-font: 'DM Sans', Helvetica, Arial, sans-serif;
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--compare-images-slider-initial-position: 50%;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.compare-images-slider {
|
|
6
|
+
display: block;
|
|
7
|
+
position: relative;
|
|
8
|
+
user-select: none;
|
|
9
|
+
-webkit-user-select: none;
|
|
10
|
+
-moz-user-select: none;
|
|
11
|
+
|
|
12
|
+
img {
|
|
13
|
+
pointer-events: none;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
& > img {
|
|
17
|
+
max-width: 100%;
|
|
18
|
+
height: auto;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.frame {
|
|
22
|
+
position: absolute;
|
|
23
|
+
top:0;
|
|
24
|
+
left: 0;
|
|
25
|
+
height: 100%;
|
|
26
|
+
width: var(--compare-images-slider-initial-position);
|
|
27
|
+
overflow: hidden;
|
|
28
|
+
z-index: 2;
|
|
29
|
+
|
|
30
|
+
& > img {
|
|
31
|
+
height: auto;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.handle {
|
|
36
|
+
position:absolute;
|
|
37
|
+
left: var(--compare-images-slider-initial-position);
|
|
38
|
+
top:0;
|
|
39
|
+
bottom:0;
|
|
40
|
+
width: 2px;
|
|
41
|
+
margin-left: -1px;
|
|
42
|
+
height: 100%;
|
|
43
|
+
cursor: ew-resize;
|
|
44
|
+
z-index: 3;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.handle:after {
|
|
48
|
+
position: absolute;
|
|
49
|
+
top: 50%;
|
|
50
|
+
width: 42px;
|
|
51
|
+
height: 42px;
|
|
52
|
+
transform: translate3d(-50%, -50%, 0);
|
|
53
|
+
|
|
54
|
+
content:'↔';
|
|
55
|
+
line-height: 38px;
|
|
56
|
+
font-size: 28px;
|
|
57
|
+
background: #fff;
|
|
58
|
+
text-align: center;
|
|
59
|
+
border-radius: 21px;
|
|
60
|
+
}
|
|
61
|
+
}
|