├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── CHANGELOG.md
├── README.md
├── package.json
├── rollup.config.js
└── src
    ├── ImageCompare.svelte
    └── index.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | end_of_line = lf
 5 | insert_final_newline = true
 6 | 
 7 | [*.{js,css,html,svelte}]
 8 | charset = utf-8
 9 | indent_style = tab
10 | indent_size = 4
11 | trim_trailing_whitespace = true


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "eslint:recommended",
 3 |     "parserOptions": {
 4 |         "ecmaVersion": 2019,
 5 |         "sourceType": "module"
 6 |     },
 7 |     "plugins": ["svelte3"],
 8 |     "overrides": [{
 9 |         "files": ["**/*.svelte"],
10 |         "processor": "svelte3/svelte3"
11 |     }],
12 |     "env": {
13 |         "es6": true,
14 |         "browser": true
15 |     }
16 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | Thumbs.db
3 | node_modules
4 | yarn.lock
5 | package-lock.json
6 | *.log
7 | .idea/
8 | index.js
9 | index.mjs


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # svelte-image-compare changelog
 2 | 
 3 | ## 1.1.1
 4 | * fix initial resizing
 5 | * update gitignore
 6 | 
 7 | ## 1.1.0
 8 | * Update to latest Svelte 3.
 9 | * Few re-writes.
10 | * README & CHANGELOG added.
11 | * eslint, editorconfig added.
12 | 
13 | ## 1.0.0
14 | 
15 | * First release
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Image comparison slider for Svelte 3
 2 | 
 3 | [![NPM version](https://img.shields.io/npm/v/svelte-image-compare.svg?style=flat)](https://www.npmjs.com/package/svelte-image-compare) [![NPM downloads](https://img.shields.io/npm/dm/svelte-image-compare.svg?style=flat)](https://www.npmjs.com/package/svelte-image-compare)
 4 | 
 5 | Simple Svelte component to compare two images using slider.
 6 | 
 7 | ![preview](https://react-compare-image.yuuniworks.com/anime.gif)
 8 | 
 9 | ## Features
10 | 
11 | - Simple
12 | - Responsive (fit to the parent width)
13 | - Size difference between two images handled correctly. Element size determined by following two factors:
14 |   - width of the parent
15 |   - right image's aspect ratio
16 | 
17 | ## Install
18 | 
19 | ```bash
20 | npm i svelte-image-compare --save
21 | ```
22 | 
23 | ```bash
24 | yarn add svelte-image-compare
25 | ```
26 | 
27 | CDN: [UNPKG](https://unpkg.com/svelte-image-compare/) | [jsDelivr](https://cdn.jsdelivr.net/npm/svelte-image-compare/) (available as `window.ImageCompare`)
28 | 
29 | ## Usage
30 | 
31 | ```html
32 | <ImageCompare 
33 |     before="//placehold.it/600x200/E8117F/FFFFFF"
34 |     after="//placehold.it/600x200/CCCCCC/FFFFFF"
35 |     contain={true}
36 | >
37 | 	<span slot="before">BEFORE</span>
38 | 	<span slot="after">AFTER</span>
39 | </ImageCompare>
40 | 
41 | <script>
42 |     import ImageCompare from './ImageCompare.svelte';
43 | </script>
44 | ```
45 | 
46 | If you are **not** using using es6, instead of importing add 
47 | 
48 | ```html
49 | <script src="/path/to/svelte-image-compare/index.js"></script>
50 | ```
51 | 
52 | just before closing body tag.
53 | 
54 | ## API
55 | 
56 | ## Props
57 | 
58 | | Name | Type | Description | Required | Default |
59 | | --- | --- | --- | --- | --- |
60 | | `before` | `String` | Path to the image image *before* change | Yes | `empty string` |
61 | | `after` | `String` | Path to the image image *after* change | Yes | `empty string` |
62 | | `offset` | `Number` | How far from the left the slider should be on load (between 0 and 1) | No | `0.5` |
63 | | `contain` | `Boolean` | Determines if images are stretched to fill parent element. Can be used with help of CSS `object-fit: cover` to create full page image comparison | No | `false` |
64 | | `overlay` | `Boolean` | Show overlay upon images | No | `true` |
65 | | `hideOnSlide` | `Boolean` | Hide overlay & labels on sliding | No | `true` |
66 | 
67 | ## Slots
68 | 
69 | - `before` - element to be placed on top of before image (basically a label)
70 | - `after` - element to be placed on top of after image (basically a label)
71 | 
72 | ## License
73 | 
74 | MIT &copy; [PaulMaly](https://github.com/PaulMaly)


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "svelte-image-compare",
 3 |     "version": "1.1.1",
 4 |     "description": "Image comparison slider for Svelte 3",
 5 |     "svelte": "src/index.js",
 6 |     "main": "index.js",
 7 |     "module": "index.mjs",
 8 |     "scripts": {
 9 |         "build": "rollup -c",
10 |         "prepublishOnly": "npm run lint & npm run build",
11 |         "lint": "eslint src/*.svelte"
12 |     },
13 |     "files": [
14 |         "src",
15 |         "index.mjs",
16 |         "index.js"
17 |     ],
18 |     "repository": {
19 |         "type": "git",
20 |         "url": "git+https://github.com/PaulMaly/svelte-image-compare.git"
21 |     },
22 |     "keywords": [
23 |         "svelte"
24 |     ],
25 |     "author": "PaulMaly",
26 |     "license": "MIT",
27 |     "bugs": {
28 |         "url": "https://github.com/PaulMaly/svelte-image-compare/issues"
29 |     },
30 |     "homepage": "https://github.com/PaulMaly/svelte-image-compare#readme",
31 |     "devDependencies": {
32 |         "eslint": "latest",
33 |         "eslint-plugin-svelte3": "latest",
34 |         "rollup": "latest",
35 |         "rollup-plugin-node-resolve": "latest",
36 |         "rollup-plugin-svelte": "latest",
37 |         "svelte": "latest"
38 |     }
39 | }
40 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import svelte from 'rollup-plugin-svelte';
 2 | import resolve from 'rollup-plugin-node-resolve';
 3 | import pkg from './package.json';
 4 | 
 5 | const name = pkg.name
 6 |                 .replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
 7 |                 .replace(/^\w/, m => m.toUpperCase())
 8 |                 .replace(/-\w/g, m => m[1].toUpperCase());
 9 | 
10 | export default {
11 | 	input: 'src/index.js',
12 | 	output: [
13 | 		{ file: pkg.module, 'format': 'es' },
14 | 		{ file: pkg.main, 'format': 'umd', name }
15 | 	],
16 | 	plugins: [
17 | 		svelte(),
18 | 		resolve()
19 | 	]
20 | };


--------------------------------------------------------------------------------
/src/ImageCompare.svelte:
--------------------------------------------------------------------------------
  1 | <svelte:window 
  2 | 	on:touchmove={move} 
  3 | 	on:touchend={end} 
  4 | 	on:mousemove={move} 
  5 | 	on:mouseup={end} 
  6 | 	on:resize={resize}
  7 | />
  8 | 
  9 | <div class="container" {style} on:touchstart={start} on:mousedown={start}>
 10 | 	<img 
 11 | 		bind:this={img} 
 12 | 		src={after} 
 13 | 		alt="after" 
 14 | 		on:mousedown|preventDefault 
 15 | 		on:load={resize} 
 16 | 		{style}
 17 | 	>
 18 | 	<img 
 19 | 		src={before} 
 20 | 		alt="before" 
 21 | 		on:mousedown|preventDefault 
 22 | 		style="{style}clip:rect(0, {x}px, {h}px, 0);"
 23 | 	>
 24 | 	{#if overlay}
 25 | 	<div class="overlay" style="opacity:{opacity}"></div>
 26 | 	{/if}
 27 | 	<div class="before-label" style="opacity:{opacity}">
 28 | 		<slot name="before"></slot>
 29 | 	</div>
 30 | 	<div class="after-label" style="opacity:{opacity}">
 31 | 		<slot name="after"></slot>
 32 | 	</div>
 33 | 	<div class="handle" style="left: calc({offset * 100}% - 20px)">
 34 | 		<div class="arrow-left"></div>
 35 | 		<div class="arrow-right"></div>
 36 | 	</div>
 37 | </div>
 38 | 
 39 | <script>	
 40 | 	let hideOnSlide = true,
 41 | 		imgOffset = null,
 42 | 		sliding = false,
 43 | 		contain = false,
 44 | 		overlay = true,
 45 | 		offset = 0.5,
 46 | 		before = '',
 47 | 		after = '',
 48 | 		img;
 49 | 
 50 | 	function resize(e) {
 51 | 		imgOffset = (e.type === 'load' ? e.target : img).getBoundingClientRect();
 52 | 	}
 53 | 
 54 | 	function move(e) {
 55 | 		if (sliding && imgOffset) {
 56 | 			let x = (e.touches ? e.touches[0].pageX : e.pageX) - imgOffset.left;
 57 | 			x = x < 0 ? 0 : ((x > w) ? w : x);
 58 | 			offset = x / w;
 59 | 		}
 60 | 	}
 61 | 
 62 | 	function start(e) {
 63 | 		sliding = true;
 64 | 		move(e);
 65 | 	}
 66 | 
 67 | 	function end() {
 68 | 		sliding = false;
 69 | 	}
 70 | 
 71 | 	$: w = imgOffset && imgOffset.width;
 72 | 	$: h = imgOffset && imgOffset.height;
 73 | 	$: x = w * offset;
 74 | 	$: opacity = hideOnSlide && sliding ? 0 : 1;
 75 | 	$: style = contain ? `width:100%;height:100%;` : `width:${w}px;height:${h}px;`;
 76 | 
 77 | 	export { before, after, offset, overlay, contain, hideOnSlide };
 78 | </script>
 79 | 
 80 | <style>
 81 | 	.container {
 82 | 		overflow: hidden;
 83 | 		position: relative;
 84 | 		box-sizing: content-box;
 85 | 	}
 86 | 	.container img {
 87 | 		top: 0;
 88 | 		left: 0;
 89 | 		z-index: 20;
 90 | 		display: block;
 91 | 		max-width: 100%;
 92 | 		user-select: none;
 93 | 		object-fit: cover;
 94 | 		position: absolute;
 95 | 	}
 96 | 	.overlay {
 97 | 		top: 0;
 98 | 		opacity: 0;
 99 | 		z-index: 25;
100 | 		width: 100%;
101 | 		height: 100%;
102 | 		position: absolute;
103 | 		transition: opacity .5s;
104 | 		background: rgba(0, 0, 0, .5);
105 | 	}
106 | 	.before-label, .after-label {
107 | 		top: 0;
108 | 		bottom: 0;
109 | 		z-index: 25;
110 | 		user-select: none;
111 | 		position: absolute;
112 | 	}
113 | 	.before-label { left: 0; }
114 | 	.after-label { right: 0; }
115 | 	.container:hover > .overlay { opacity: 1; }
116 | 	.handle {
117 | 		z-index: 30;
118 | 		width: 40px; 
119 | 		height: 40px;
120 | 		cursor: move;
121 | 		background: none;
122 | 		margin-top: -4px;
123 | 		margin-left: -4px;
124 | 		user-select: none;
125 | 		position: absolute;
126 | 		border-radius: 50px;
127 | 		top: calc(50% - 20px);
128 | 		border: 4px solid white;
129 | 	}
130 | 	.handle:before, .handle:after {
131 | 		content: "";
132 | 		height: 9999px;
133 | 		position: absolute;
134 | 		left: calc(50% - 2px);
135 | 		border: 2px solid white;
136 | 	}
137 | 	.handle:before { top: 40px; }
138 | 	.handle:after { bottom: 40px; }
139 | 	.arrow-right, .arrow-left {
140 | 		width: 0;
141 | 		height: 0;
142 | 		user-select: none;
143 | 		position: relative;
144 | 		border-top: 10px solid transparent;
145 | 		border-bottom: 10px solid transparent;
146 | 	}
147 | 	.arrow-right {
148 | 		left: 23px;
149 | 		bottom: 10px;
150 | 		border-left: 10px solid white;
151 | 	}
152 | 	.arrow-left {
153 | 		left: 7px;
154 | 		top: 10px;
155 | 		border-right: 10px solid white;
156 | 	}
157 | </style>


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './ImageCompare.svelte';


--------------------------------------------------------------------------------