Update Koneko integration

resources/public/vendor/twentytwenty/Gemfile

@@ -0,0 +1,4 @@
+source "https://rubygems.org"
+
+gem "compass"
+gem "zurb-foundation", "~> 4.2.1"

resources/public/vendor/twentytwenty/Gemfile.lock

@@ -0,0 +1,19 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    chunky_png (1.2.8)
+    compass (0.12.2)
+      chunky_png (~> 1.2)
+      fssm (>= 0.2.7)
+      sass (~> 3.1)
+    fssm (0.2.10)
+    sass (3.2.9)
+    zurb-foundation (4.2.1)
+      sass (>= 3.2.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  compass
+  zurb-foundation (~> 4.2.1)

resources/public/vendor/twentytwenty/Gruntfile.js

@@ -0,0 +1,89 @@
+module.exports = function (grunt) {
+// load all grunt tasks matching the `grunt-*` pattern
+require('load-grunt-tasks')(grunt);
+
+grunt.initConfig({
+	//clean main compiled css file and minified version.
+	clean: {
+		css: ['css'],
+		js: ['js'],
+	},
+
+	//Compile TwentyTwenty SCSS file (without Compass) into CSS
+	sass: {
+		dist: {
+			files: {
+				'css/twentytwenty-no-compass.css': 'scss/twentytwenty-no-compass.scss',
+			},
+		}
+	},
+
+	//watch for changes to SCSS files.
+	watch: {
+		sass: {
+			files: ['scss/**/*.scss'],
+			tasks: ['sass', 'notify:sass'],
+			
+			options: {
+				livereload: 35729
+			}
+		},
+
+		html: {
+			files: ['*.html'],
+			tasks: ['notify:html'],
+			options: {
+				livereload: 35729
+			}
+		}
+	},
+
+	// open local test page on port 8888 with LiveReload
+	connect: {
+		dev: {
+			options: {
+				port: 8888,
+				cwd: 'zurb-twentytwenty',
+				livereload: 35729,
+				open: {
+					target: 'http://localhost:8888/twentytwenty-no-compass.html'
+				}
+			}
+		},
+	},
+
+	//configurations for OS X notifications, for each task.
+	notify: {
+		clean: {
+			options: {
+				title: "Clean",
+				message: "Files cleaned",
+				success: true,
+				duration: 5
+			}
+		},
+
+		sass: {
+			options: {
+				title: "SCSS Compilation",
+				message: "SCSS compilation complete",
+				success: true,
+				duration: 5	
+			}
+		},
+
+		html: {
+			options: {
+				title: "HTML file",
+				message: "HTML file update",
+				success: true,
+				duration: 5
+			}
+		},
+	},
+});
+
+	grunt.registerTask('cleanit', ['clean','notify:clean']);
+	grunt.registerTask('develop', ['sass','notify:sass','connect:dev','watch','notify:watch']);
+	grunt.registerTask('watchit', ['watch']);
+};

resources/public/vendor/twentytwenty/LICENSE.md

@@ -0,0 +1,5 @@
+Copyright 2018 zurb
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

resources/public/vendor/twentytwenty/README.md

@@ -0,0 +1,106 @@
+## Basic usage
+
+Include the javascript and css files.
+
+```html
+<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
+<script src="js/jquery.event.move.js" type="text/javascript"></script>
+<script src="js/jquery.twentytwenty.js" type="text/javascript"></script>
+<link rel="stylesheet" href="css/twentytwenty.css" type="text/css" media="screen" />
+``` 
+You might need to change the paths to match your setup.
+
+
+After including the files you are ready to create a container that holds two images:
+
+```html
+<div id="container1">
+ <!-- The before image is first -->
+ <img src="http://placehold.it/400x200&amp;text=1" />
+ <!-- The after image is last -->
+ <img src="http://placehold.it/400x200&amp;text=2" />
+</div>
+```
+
+Now initialize the plugin on the window load:
+
+```
+$(function(){
+  $("#container1").twentytwenty();
+});
+```
+
+### Options
+
+
+```js
+$(function(){
+  $(".twentytwenty-container").twentytwenty({
+    default_offset_pct: 0.7, // How much of the before image is visible when the page loads
+    orientation: 'vertical', // Orientation of the before and after images ('horizontal' or 'vertical')
+    before_label: 'January 2017', // Set a custom before label
+    after_label: 'March 2017', // Set a custom after label
+    no_overlay: true, //Do not show the overlay with before and after
+    move_slider_on_hover: true, // Move slider on mouse hover?
+    move_with_handle_only: true, // Allow a user to swipe anywhere on the image to control slider movement. 
+    click_to_move: false // Allow a user to click (or tap) anywhere on the image to move the slider to that location.
+  });
+});
+```
+
+### Prevent FOUC
+
+If you want to avoid a [FOUC](http://en.wikipedia.org/wiki/Flash_of_unstyled_content) you can append the `twentytwenty-container` class to your container like so:
+
+```html
+<div id="container1" class="twentytwenty-container">
+ <!-- The before image is first -->
+ <img src="http://placehold.it/400x200&amp;text=1" />
+ <!-- The after image is last -->
+ <img src="http://placehold.it/400x200&amp;text=2" />
+</div>
+```
+
+### Multiple instances
+
+If you want to use multiple instances of this plugin on a single page you can target the container class:
+
+```js
+$(function(){
+  $(".twentytwenty-container").twentytwenty();
+});
+```
+
+# Build with SCSS
+
+You can use SCSS to customise the TwentyTwenty styles. All you need to do is make sure you have NPM and Grunt installed. Then, clone the repository and run "npm install" to install all the required Grunt modules. Run "grunt develop" to compile your CSS file (the Gruntfile is also configured to watch for changes):
+
+```bash
+git clone git@github.com:zurb/twentytwenty.git
+npm install
+grunt develop
+```
+
+All default [Sass](http://sass-lang.com/) variables can be found in `scss/twentytwenty.scss`.
+
+## Support
+
+- IE8+
+- Firefox (latest)
+- Chrome
+- Safari
+- Android 
+- iOS (iPhone, iPad)
+
+## Dependencies
+
+  * [jquery](http://jquery.com/)
+  * [jquery.event.move](https://github.com/stephband/jquery.event.move)
+
+## MIT Open Source License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

resources/public/vendor/twentytwenty/config.rb

@@ -0,0 +1,26 @@
+# Require any additional compass plugins here.
+require "zurb-foundation"
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "scss"
+images_dir = "img"
+javascripts_dir = "js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+output_style = :nested
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

resources/public/vendor/twentytwenty/css/foundation.css

@@ -0,0 +1,473 @@
+*,
+*:before,
+*:after {
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box; }
+
+html,
+body {
+	font-size: 100%; }
+
+body {
+	background: white;
+	color: #222222;
+	padding: 0;
+	margin: 0;
+	font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+	font-weight: normal;
+	font-style: normal;
+	line-height: 1;
+	position: relative;
+	cursor: default; }
+
+a:hover {
+	cursor: pointer; }
+
+a:focus {
+	outline: none; }
+
+img,
+object,
+embed {
+	max-width: 100%;
+	height: auto; }
+
+object,
+embed {
+	height: 100%; }
+
+img {
+	-ms-interpolation-mode: bicubic; }
+
+#map_canvas img,
+#map_canvas embed,
+#map_canvas object,
+.map_canvas img,
+.map_canvas embed,
+.map_canvas object {
+	max-width: none !important; }
+
+.left {
+	float: left !important; }
+
+.right {
+	float: right !important; }
+
+.text-left {
+	text-align: left !important; }
+
+.text-right {
+	text-align: right !important; }
+
+.text-center {
+	text-align: center !important; }
+
+.text-justify {
+	text-align: justify !important; }
+
+.hide {
+	display: none; }
+
+.antialiased {
+	-webkit-font-smoothing: antialiased; }
+
+img {
+	display: inline-block;
+	vertical-align: middle; }
+
+textarea {
+	height: auto;
+	min-height: 50px; }
+
+select {
+	width: 100%; }
+
+/* Grid HTML Classes */
+.row {
+	width: 100%;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 0;
+	margin-bottom: 0;
+	max-width: 62.5em;
+	*zoom: 1; }
+	.row:before, .row:after {
+		content: " ";
+		display: table; }
+	.row:after {
+		clear: both; }
+	.row.collapse .column,
+	.row.collapse .columns {
+		position: relative;
+		padding-left: 0;
+		padding-right: 0;
+		float: left; }
+	.row .row {
+		width: auto;
+		margin-left: -0.9375em;
+		margin-right: -0.9375em;
+		margin-top: 0;
+		margin-bottom: 0;
+		max-width: none;
+		*zoom: 1; }
+		.row .row:before, .row .row:after {
+			content: " ";
+			display: table; }
+		.row .row:after {
+			clear: both; }
+		.row .row.collapse {
+			width: auto;
+			margin: 0;
+			max-width: none;
+			*zoom: 1; }
+			.row .row.collapse:before, .row .row.collapse:after {
+				content: " ";
+				display: table; }
+			.row .row.collapse:after {
+				clear: both; }
+
+.column,
+.columns {
+	position: relative;
+	padding-left: 0.9375em;
+	padding-right: 0.9375em;
+	width: 100%;
+	float: left; }
+
+@media only screen {
+	.column,
+	.columns {
+		position: relative;
+		padding-left: 0.9375em;
+		padding-right: 0.9375em;
+		float: left; }
+
+	.small-1 {
+		position: relative;
+		width: 8.33333%; }
+
+	.small-2 {
+		position: relative;
+		width: 16.66667%; }
+
+	.small-3 {
+		position: relative;
+		width: 25%; }
+
+	.small-4 {
+		position: relative;
+		width: 33.33333%; }
+
+	.small-5 {
+		position: relative;
+		width: 41.66667%; }
+
+	.small-6 {
+		position: relative;
+		width: 50%; }
+
+	.small-7 {
+		position: relative;
+		width: 58.33333%; }
+
+	.small-8 {
+		position: relative;
+		width: 66.66667%; }
+
+	.small-9 {
+		position: relative;
+		width: 75%; }
+
+	.small-10 {
+		position: relative;
+		width: 83.33333%; }
+
+	.small-11 {
+		position: relative;
+		width: 91.66667%; }
+
+	.small-12 {
+		position: relative;
+		width: 100%; }
+
+	.small-offset-0 {
+		position: relative;
+		margin-left: 0%; }
+
+	.small-offset-1 {
+		position: relative;
+		margin-left: 8.33333%; }
+
+	.small-offset-2 {
+		position: relative;
+		margin-left: 16.66667%; }
+
+	.small-offset-3 {
+		position: relative;
+		margin-left: 25%; }
+
+	.small-offset-4 {
+		position: relative;
+		margin-left: 33.33333%; }
+
+	.small-offset-5 {
+		position: relative;
+		margin-left: 41.66667%; }
+
+	.small-offset-6 {
+		position: relative;
+		margin-left: 50%; }
+
+	.small-offset-7 {
+		position: relative;
+		margin-left: 58.33333%; }
+
+	.small-offset-8 {
+		position: relative;
+		margin-left: 66.66667%; }
+
+	.small-offset-9 {
+		position: relative;
+		margin-left: 75%; }
+
+	.small-offset-10 {
+		position: relative;
+		margin-left: 83.33333%; }
+
+	[class*="column"] + [class*="column"]:last-child {
+		float: right; }
+
+	[class*="column"] + [class*="column"].end {
+		float: left; }
+
+	.column.small-centered,
+	.columns.small-centered {
+		position: relative;
+		margin-left: auto;
+		margin-right: auto;
+		float: none !important; } }
+/* Styles for screens that are atleast 768px; */
+@media only screen and (min-width: 768px) {
+	.large-1 {
+		position: relative;
+		width: 8.33333%; }
+
+	.large-2 {
+		position: relative;
+		width: 16.66667%; }
+
+	.large-3 {
+		position: relative;
+		width: 25%; }
+
+	.large-4 {
+		position: relative;
+		width: 33.33333%; }
+
+	.large-5 {
+		position: relative;
+		width: 41.66667%; }
+
+	.large-6 {
+		position: relative;
+		width: 50%; }
+
+	.large-7 {
+		position: relative;
+		width: 58.33333%; }
+
+	.large-8 {
+		position: relative;
+		width: 66.66667%; }
+
+	.large-9 {
+		position: relative;
+		width: 75%; }
+
+	.large-10 {
+		position: relative;
+		width: 83.33333%; }
+
+	.large-11 {
+		position: relative;
+		width: 91.66667%; }
+
+	.large-12 {
+		position: relative;
+		width: 100%; }
+
+	.row .large-offset-0 {
+		position: relative;
+		margin-left: 0%; }
+
+	.row .large-offset-1 {
+		position: relative;
+		margin-left: 8.33333%; }
+
+	.row .large-offset-2 {
+		position: relative;
+		margin-left: 16.66667%; }
+
+	.row .large-offset-3 {
+		position: relative;
+		margin-left: 25%; }
+
+	.row .large-offset-4 {
+		position: relative;
+		margin-left: 33.33333%; }
+
+	.row .large-offset-5 {
+		position: relative;
+		margin-left: 41.66667%; }
+
+	.row .large-offset-6 {
+		position: relative;
+		margin-left: 50%; }
+
+	.row .large-offset-7 {
+		position: relative;
+		margin-left: 58.33333%; }
+
+	.row .large-offset-8 {
+		position: relative;
+		margin-left: 66.66667%; }
+
+	.row .large-offset-9 {
+		position: relative;
+		margin-left: 75%; }
+
+	.row .large-offset-10 {
+		position: relative;
+		margin-left: 83.33333%; }
+
+	.row .large-offset-11 {
+		position: relative;
+		margin-left: 91.66667%; }
+
+	.push-1 {
+		position: relative;
+		left: 8.33333%;
+		right: auto; }
+
+	.pull-1 {
+		position: relative;
+		right: 8.33333%;
+		left: auto; }
+
+	.push-2 {
+		position: relative;
+		left: 16.66667%;
+		right: auto; }
+
+	.pull-2 {
+		position: relative;
+		right: 16.66667%;
+		left: auto; }
+
+	.push-3 {
+		position: relative;
+		left: 25%;
+		right: auto; }
+
+	.pull-3 {
+		position: relative;
+		right: 25%;
+		left: auto; }
+
+	.push-4 {
+		position: relative;
+		left: 33.33333%;
+		right: auto; }
+
+	.pull-4 {
+		position: relative;
+		right: 33.33333%;
+		left: auto; }
+
+	.push-5 {
+		position: relative;
+		left: 41.66667%;
+		right: auto; }
+
+	.pull-5 {
+		position: relative;
+		right: 41.66667%;
+		left: auto; }
+
+	.push-6 {
+		position: relative;
+		left: 50%;
+		right: auto; }
+
+	.pull-6 {
+		position: relative;
+		right: 50%;
+		left: auto; }
+
+	.push-7 {
+		position: relative;
+		left: 58.33333%;
+		right: auto; }
+
+	.pull-7 {
+		position: relative;
+		right: 58.33333%;
+		left: auto; }
+
+	.push-8 {
+		position: relative;
+		left: 66.66667%;
+		right: auto; }
+
+	.pull-8 {
+		position: relative;
+		right: 66.66667%;
+		left: auto; }
+
+	.push-9 {
+		position: relative;
+		left: 75%;
+		right: auto; }
+
+	.pull-9 {
+		position: relative;
+		right: 75%;
+		left: auto; }
+
+	.push-10 {
+		position: relative;
+		left: 83.33333%;
+		right: auto; }
+
+	.pull-10 {
+		position: relative;
+		right: 83.33333%;
+		left: auto; }
+
+	.push-11 {
+		position: relative;
+		left: 91.66667%;
+		right: auto; }
+
+	.pull-11 {
+		position: relative;
+		right: 91.66667%;
+		left: auto; }
+
+	.column.large-centered,
+	.columns.large-centered {
+		position: relative;
+		margin-left: auto;
+		margin-right: auto;
+		float: none !important; }
+
+	.column.large-uncentered,
+	.columns.large-uncentered {
+		margin-left: 0;
+		margin-right: 0;
+		float: left !important; }
+
+	.column.large-uncentered.opposite,
+	.columns.large-uncentered.opposite {
+		float: right !important; } }

resources/public/vendor/twentytwenty/css/twentytwenty-no-compass.css

@@ -0,0 +1,182 @@
+.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
+	content: " ";
+	display: block;
+	background: #fff;
+	position: absolute;
+	z-index: 30; }
+
+.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
+	width: 3px;
+	height: 9999px;
+	left: 50%;
+	margin-left: -1.5px; }
+
+.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
+	width: 9999px;
+	height: 3px;
+	top: 50%;
+	margin-top: -1.5px; }
+
+.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
+	position: absolute;
+	top: 0;
+	width: 100%;
+	height: 100%; }
+
+.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
+	transition-duration: 0.5s; }
+
+.twentytwenty-before-label, .twentytwenty-after-label {
+	transition-property: opacity; }
+
+.twentytwenty-before-label:before, .twentytwenty-after-label:before {
+	color: #fff;
+	font-size: 13px;
+	letter-spacing: 0.1em; }
+
+.twentytwenty-before-label:before, .twentytwenty-after-label:before {
+	position: absolute;
+	background: rgba(255, 255, 255, 0.2);
+	line-height: 38px;
+	padding: 0 20px;
+	border-radius: 2px; }
+
+.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
+	top: 50%;
+	margin-top: -19px; }
+
+.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
+	left: 50%;
+	margin-left: -45px;
+	text-align: center;
+	width: 90px; }
+
+.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
+	width: 0;
+	height: 0;
+	border: 6px inset transparent;
+	position: absolute; }
+
+.twentytwenty-left-arrow, .twentytwenty-right-arrow {
+	top: 50%;
+	margin-top: -6px; }
+
+.twentytwenty-up-arrow, .twentytwenty-down-arrow {
+	left: 50%;
+	margin-left: -6px; }
+
+.twentytwenty-container {
+	box-sizing: content-box;
+	z-index: 0;
+	overflow: hidden;
+	position: relative;
+	-webkit-user-select: none;
+	-moz-user-select: none; }
+	.twentytwenty-container img {
+		max-width: 100%;
+		position: absolute;
+		top: 0;
+		display: block; }
+	.twentytwenty-container.active .twentytwenty-overlay,
+	.twentytwenty-container.active :hover.twentytwenty-overlay {
+		background: transparent; }
+		.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
+		.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label,
+		.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
+		.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
+			opacity: 0; }
+	.twentytwenty-container * {
+		box-sizing: content-box; }
+
+.twentytwenty-before-label {
+	opacity: 0; }
+	.twentytwenty-before-label:before {
+		content: attr(data-content); }
+
+.twentytwenty-after-label {
+	opacity: 0; }
+	.twentytwenty-after-label:before {
+		content: attr(data-content); }
+
+.twentytwenty-horizontal .twentytwenty-before-label:before {
+	left: 10px; }
+
+.twentytwenty-horizontal .twentytwenty-after-label:before {
+	right: 10px; }
+
+.twentytwenty-vertical .twentytwenty-before-label:before {
+	top: 10px; }
+
+.twentytwenty-vertical .twentytwenty-after-label:before {
+	bottom: 10px; }
+
+.twentytwenty-overlay {
+	transition-property: background;
+	background: transparent;
+	z-index: 25; }
+	.twentytwenty-overlay:hover {
+		background: rgba(0, 0, 0, 0.5); }
+		.twentytwenty-overlay:hover .twentytwenty-after-label {
+			opacity: 1; }
+		.twentytwenty-overlay:hover .twentytwenty-before-label {
+			opacity: 1; }
+
+.twentytwenty-before {
+	z-index: 20; }
+
+.twentytwenty-after {
+	z-index: 10; }
+
+.twentytwenty-handle {
+	height: 38px;
+	width: 38px;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	margin-left: -22px;
+	margin-top: -22px;
+	border: 3px solid #fff;
+	border-radius: 1000px;
+	box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+	z-index: 40;
+	cursor: pointer; }
+
+.twentytwenty-horizontal .twentytwenty-handle:before {
+	bottom: 50%;
+	margin-bottom: 22px;
+	box-shadow: 0 3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+
+.twentytwenty-horizontal .twentytwenty-handle:after {
+	top: 50%;
+	margin-top: 22px;
+	box-shadow: 0 -3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+
+.twentytwenty-vertical .twentytwenty-handle:before {
+	left: 50%;
+	margin-left: 22px;
+	box-shadow: 3px 0 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+
+.twentytwenty-vertical .twentytwenty-handle:after {
+	right: 50%;
+	margin-right: 22px;
+	box-shadow: -3px 0 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+
+.twentytwenty-left-arrow {
+	border-right: 6px solid #fff;
+	left: 50%;
+	margin-left: -17px; }
+
+.twentytwenty-right-arrow {
+	border-left: 6px solid #fff;
+	right: 50%;
+	margin-right: -17px; }
+
+.twentytwenty-up-arrow {
+	border-bottom: 6px solid #fff;
+	top: 50%;
+	margin-top: -17px; }
+
+.twentytwenty-down-arrow {
+	border-top: 6px solid #fff;
+	bottom: 50%;
+	margin-bottom: -17px; }

resources/public/vendor/twentytwenty/css/twentytwenty.css

@@ -0,0 +1,206 @@
+.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
+	content: " ";
+	display: block;
+	background: white;
+	position: absolute;
+	z-index: 30;
+	-webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+	-moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+	box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); }
+
+.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
+	width: 3px;
+	height: 9999px;
+	left: 50%;
+	margin-left: -1.5px; }
+
+.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
+	width: 9999px;
+	height: 3px;
+	top: 50%;
+	margin-top: -1.5px; }
+
+.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
+	position: absolute;
+	top: 0;
+	width: 100%;
+	height: 100%; }
+
+.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
+	-webkit-transition-duration: 0.5s;
+	-moz-transition-duration: 0.5s;
+	transition-duration: 0.5s; }
+
+.twentytwenty-before-label, .twentytwenty-after-label {
+	-webkit-transition-property: opacity;
+	-moz-transition-property: opacity;
+	transition-property: opacity; }
+
+.twentytwenty-before-label:before, .twentytwenty-after-label:before {
+	color: white;
+	font-size: 13px;
+	letter-spacing: 0.1em; }
+
+.twentytwenty-before-label:before, .twentytwenty-after-label:before {
+	position: absolute;
+	background: rgba(255, 255, 255, 0.2);
+	line-height: 38px;
+	padding: 0 20px;
+	-webkit-border-radius: 2px;
+	-moz-border-radius: 2px;
+	border-radius: 2px; }
+
+.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
+	top: 50%;
+	margin-top: -19px; }
+
+.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
+	left: 50%;
+	margin-left: -45px;
+	text-align: center;
+	width: 90px; }
+
+.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
+	width: 0;
+	height: 0;
+	border: 6px inset transparent;
+	position: absolute; }
+
+.twentytwenty-left-arrow, .twentytwenty-right-arrow {
+	top: 50%;
+	margin-top: -6px; }
+
+.twentytwenty-up-arrow, .twentytwenty-down-arrow {
+	left: 50%;
+	margin-left: -6px; }
+
+.twentytwenty-container {
+	-webkit-box-sizing: content-box;
+	-moz-box-sizing: content-box;
+	box-sizing: content-box;
+	z-index: 0;
+	overflow: hidden;
+	position: relative;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none; }
+	.twentytwenty-container img {
+		max-width: 100%;
+		position: absolute;
+		top: 0;
+		display: block; }
+	.twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
+		background: rgba(0, 0, 0, 0); }
+		.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
+		.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
+		.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
+			opacity: 0; }
+	.twentytwenty-container * {
+		-webkit-box-sizing: content-box;
+		-moz-box-sizing: content-box;
+		box-sizing: content-box; }
+
+.twentytwenty-before-label {
+	opacity: 0; }
+	.twentytwenty-before-label:before {
+		content: attr(data-content); }
+
+.twentytwenty-after-label {
+	opacity: 0; }
+	.twentytwenty-after-label:before {
+		content: attr(data-content); }
+
+.twentytwenty-horizontal .twentytwenty-before-label:before {
+	left: 10px; }
+
+.twentytwenty-horizontal .twentytwenty-after-label:before {
+	right: 10px; }
+
+.twentytwenty-vertical .twentytwenty-before-label:before {
+	top: 10px; }
+
+.twentytwenty-vertical .twentytwenty-after-label:before {
+	bottom: 10px; }
+
+.twentytwenty-overlay {
+	-webkit-transition-property: background;
+	-moz-transition-property: background;
+	transition-property: background;
+	background: rgba(0, 0, 0, 0);
+	z-index: 25; }
+	.twentytwenty-overlay:hover {
+		background: rgba(0, 0, 0, 0.5); }
+		.twentytwenty-overlay:hover .twentytwenty-after-label {
+			opacity: 1; }
+		.twentytwenty-overlay:hover .twentytwenty-before-label {
+			opacity: 1; }
+
+.twentytwenty-before {
+	z-index: 20; }
+
+.twentytwenty-after {
+	z-index: 10; }
+
+.twentytwenty-handle {
+	height: 38px;
+	width: 38px;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	margin-left: -22px;
+	margin-top: -22px;
+	border: 3px solid white;
+	-webkit-border-radius: 1000px;
+	-moz-border-radius: 1000px;
+	border-radius: 1000px;
+	-webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+	-moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+	box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+	z-index: 40;
+	cursor: pointer; }
+
+.twentytwenty-horizontal .twentytwenty-handle:before {
+	bottom: 50%;
+	margin-bottom: 22px;
+	-webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+	-moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+	box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+.twentytwenty-horizontal .twentytwenty-handle:after {
+	top: 50%;
+	margin-top: 22px;
+	-webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+	-moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+	box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+
+.twentytwenty-vertical .twentytwenty-handle:before {
+	left: 50%;
+	margin-left: 22px;
+	-webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+	-moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+	box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+.twentytwenty-vertical .twentytwenty-handle:after {
+	right: 50%;
+	margin-right: 22px;
+	-webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+	-moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+	box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+
+.twentytwenty-left-arrow {
+	border-right: 6px solid white;
+	left: 50%;
+	margin-left: -17px; }
+
+.twentytwenty-right-arrow {
+	border-left: 6px solid white;
+	right: 50%;
+	margin-right: -17px; }
+
+.twentytwenty-up-arrow {
+	border-bottom: 6px solid white;
+	top: 50%;
+	margin-top: -17px; }
+
+.twentytwenty-down-arrow {
+	border-top: 6px solid white;
+	bottom: 50%;
+	margin-bottom: -17px; }

resources/public/vendor/twentytwenty/index.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
+<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
+<!--[if IE 8 ]>    <html class="lt-ie9" lang="en"> <![endif]-->
+<!--[if IE 9 ]>    <html class="lt-ie10" lang="en"> <![endif]-->
+<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>twentytwenty</title>
+  <link href="css/foundation.css" rel="stylesheet" type="text/css" />
+  <link href="css/twentytwenty.css" rel="stylesheet" type="text/css" />
+</head>
+  <body>
+
+    <div class="row" style="margin-top: 2em;">
+      <div class="large-4 columns">
+        <h3>Basic Usage</h3>
+        <p>Demonstrates basic usage of the plugin.</p>
+      </div>
+      <div class="large-8 columns">
+        <div class="twentytwenty-container">
+          <img src="img/1_1.jpg" />
+          <img src="img/1_2.jpg" />
+        </div>
+      </div>
+    </div>
+
+    <div class="row" style="margin-top: 2em; margin-bottom: 2em;">
+      <div class="large-4 columns">
+        <h3>Vertical Orientation</h3>
+        <p>Demonstrates sliding up and down.</p>
+      </div>
+      <div class="large-8 columns">
+        <div class="twentytwenty-container" data-orientation="vertical">
+          <img src="img/1_1.jpg" />
+          <img src="img/1_2.jpg" />
+        </div>
+      </div>
+    </div>
+
+    <div class="row" style="margin-bottom: 2em;">
+      <div class="large-4 columns">
+        <h3>Side by side</h3>
+        <p>Using multiple comparisons at once.</p>
+      </div>
+      <div class="large-4 columns">
+        <div class="twentytwenty-container">
+          <img src="img/2_1.jpg" />
+          <img src="img/2_2.jpg" />
+        </div>
+      </div>
+      <div class="large-4 columns">
+        <div class="twentytwenty-container">
+          <img src="img/3_1.jpg" />
+          <img src="img/3_2.jpg" />
+        </div>
+      </div>
+    </div>
+
+    <script
+  src="https://code.jquery.com/jquery-3.2.1.js"
+  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
+  crossorigin="anonymous"></script>
+    <script src="js/jquery.event.move.js"></script>
+    <script src="js/jquery.twentytwenty.js"></script>
+    <script>
+    $(function(){
+      $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
+      $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'});
+    });
+    </script>
+  </body>
+</html>

resources/public/vendor/twentytwenty/js/jquery.event.move.js

@@ -0,0 +1,599 @@
+// DOM.event.move
+//
+// 2.0.0
+//
+// Stephen Band
+//
+// Triggers 'movestart', 'move' and 'moveend' events after
+// mousemoves following a mousedown cross a distance threshold,
+// similar to the native 'dragstart', 'drag' and 'dragend' events.
+// Move events are throttled to animation frames. Move event objects
+// have the properties:
+//
+// pageX:
+// pageY:     Page coordinates of pointer.
+// startX:
+// startY:    Page coordinates of pointer at movestart.
+// distX:
+// distY:     Distance the pointer has moved since movestart.
+// deltaX:
+// deltaY:    Distance the finger has moved since last event.
+// velocityX:
+// velocityY: Average velocity over last few events.
+
+
+(function(fn) {
+	if (typeof define === 'function' && define.amd) {
+        define([], fn);
+    } else if ((typeof module !== "undefined" && module !== null) && module.exports) {
+        module.exports = fn;
+	} else {
+		fn();
+	}
+})(function(){
+	var assign = Object.assign || window.jQuery && jQuery.extend;
+
+	// Number of pixels a pressed pointer travels before movestart
+	// event is fired.
+	var threshold = 8;
+
+	// Shim for requestAnimationFrame, falling back to timer. See:
+	// see http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+	var requestFrame = (function(){
+		return (
+			window.requestAnimationFrame ||
+			window.webkitRequestAnimationFrame ||
+			window.mozRequestAnimationFrame ||
+			window.oRequestAnimationFrame ||
+			window.msRequestAnimationFrame ||
+			function(fn, element){
+				return window.setTimeout(function(){
+					fn();
+				}, 25);
+			}
+		);
+	})();
+	
+	// Shim for customEvent
+	// see https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
+	(function () {
+		if ( typeof window.CustomEvent === "function" ) return false;
+		function CustomEvent ( event, params ) {
+			params = params || { bubbles: false, cancelable: false, detail: undefined };
+			var evt = document.createEvent( 'CustomEvent' );
+			evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
+			return evt;
+		}
+		
+		CustomEvent.prototype = window.Event.prototype;
+		window.CustomEvent = CustomEvent;
+	})();
+
+	var ignoreTags = {
+			textarea: true,
+			input: true,
+			select: true,
+			button: true
+		};
+
+	var mouseevents = {
+		move:   'mousemove',
+		cancel: 'mouseup dragstart',
+		end:    'mouseup'
+	};
+
+	var touchevents = {
+		move:   'touchmove',
+		cancel: 'touchend',
+		end:    'touchend'
+	};
+
+	var rspaces = /\s+/;
+
+
+	// DOM Events
+
+	var eventOptions = { bubbles: true, cancelable: true };
+
+	var eventsSymbol = typeof Symbol === "function" ? Symbol('events') : {};
+
+	function createEvent(type) {
+		return new CustomEvent(type, eventOptions);
+	}
+
+	function getEvents(node) {
+		return node[eventsSymbol] || (node[eventsSymbol] = {});
+	}
+
+	function on(node, types, fn, data, selector) {
+		types = types.split(rspaces);
+
+		var events = getEvents(node);
+		var i = types.length;
+		var handlers, type;
+
+		function handler(e) { fn(e, data); }
+
+		while (i--) {
+			type = types[i];
+			handlers = events[type] || (events[type] = []);
+			handlers.push([fn, handler]);
+			node.addEventListener(type, handler);
+		}
+	}
+
+	function off(node, types, fn, selector) {
+		types = types.split(rspaces);
+
+		var events = getEvents(node);
+		var i = types.length;
+		var type, handlers, k;
+
+		if (!events) { return; }
+
+		while (i--) {
+			type = types[i];
+			handlers = events[type];
+			if (!handlers) { continue; }
+			k = handlers.length;
+			while (k--) {
+				if (handlers[k][0] === fn) {
+					node.removeEventListener(type, handlers[k][1]);
+					handlers.splice(k, 1);
+				}
+			}
+		}
+	}
+
+	function trigger(node, type, properties) {
+		// Don't cache events. It prevents you from triggering an event of a
+		// given type from inside the handler of another event of that type.
+		var event = createEvent(type);
+		if (properties) { assign(event, properties); }
+		node.dispatchEvent(event);
+	}
+
+
+	// Constructors
+
+	function Timer(fn){
+		var callback = fn,
+		    active = false,
+		    running = false;
+
+		function trigger(time) {
+			if (active){
+				callback();
+				requestFrame(trigger);
+				running = true;
+				active = false;
+			}
+			else {
+				running = false;
+			}
+		}
+
+		this.kick = function(fn) {
+			active = true;
+			if (!running) { trigger(); }
+		};
+
+		this.end = function(fn) {
+			var cb = callback;
+
+			if (!fn) { return; }
+
+			// If the timer is not running, simply call the end callback.
+			if (!running) {
+				fn();
+			}
+			// If the timer is running, and has been kicked lately, then
+			// queue up the current callback and the end callback, otherwise
+			// just the end callback.
+			else {
+				callback = active ?
+					function(){ cb(); fn(); } :
+					fn ;
+
+				active = true;
+			}
+		};
+	}
+
+
+	// Functions
+
+	function noop() {}
+
+	function preventDefault(e) {
+		e.preventDefault();
+	}
+
+	function isIgnoreTag(e) {
+		return !!ignoreTags[e.target.tagName.toLowerCase()];
+	}
+
+	function isPrimaryButton(e) {
+		// Ignore mousedowns on any button other than the left (or primary)
+		// mouse button, or when a modifier key is pressed.
+		return (e.which === 1 && !e.ctrlKey && !e.altKey);
+	}
+
+	function identifiedTouch(touchList, id) {
+		var i, l;
+
+		if (touchList.identifiedTouch) {
+			return touchList.identifiedTouch(id);
+		}
+
+		// touchList.identifiedTouch() does not exist in
+		// webkit yet… we must do the search ourselves...
+
+		i = -1;
+		l = touchList.length;
+
+		while (++i < l) {
+			if (touchList[i].identifier === id) {
+				return touchList[i];
+			}
+		}
+	}
+
+	function changedTouch(e, data) {
+		var touch = identifiedTouch(e.changedTouches, data.identifier);
+
+		// This isn't the touch you're looking for.
+		if (!touch) { return; }
+
+		// Chrome Android (at least) includes touches that have not
+		// changed in e.changedTouches. That's a bit annoying. Check
+		// that this touch has changed.
+		if (touch.pageX === data.pageX && touch.pageY === data.pageY) { return; }
+
+		return touch;
+	}
+
+
+	// Handlers that decide when the first movestart is triggered
+
+	function mousedown(e){
+		// Ignore non-primary buttons
+		if (!isPrimaryButton(e)) { return; }
+
+		// Ignore form and interactive elements
+		if (isIgnoreTag(e)) { return; }
+
+		on(document, mouseevents.move, mousemove, e);
+		on(document, mouseevents.cancel, mouseend, e);
+	}
+
+	function mousemove(e, data){
+		checkThreshold(e, data, e, removeMouse);
+	}
+
+	function mouseend(e, data) {
+		removeMouse();
+	}
+
+	function removeMouse() {
+		off(document, mouseevents.move, mousemove);
+		off(document, mouseevents.cancel, mouseend);
+	}
+
+	function touchstart(e) {
+		// Don't get in the way of interaction with form elements
+		if (ignoreTags[e.target.tagName.toLowerCase()]) { return; }
+
+		var touch = e.changedTouches[0];
+
+		// iOS live updates the touch objects whereas Android gives us copies.
+		// That means we can't trust the touchstart object to stay the same,
+		// so we must copy the data. This object acts as a template for
+		// movestart, move and moveend event objects.
+		var data = {
+			target:     touch.target,
+			pageX:      touch.pageX,
+			pageY:      touch.pageY,
+			identifier: touch.identifier,
+
+			// The only way to make handlers individually unbindable is by
+			// making them unique.
+			touchmove:  function(e, data) { touchmove(e, data); },
+			touchend:   function(e, data) { touchend(e, data); }
+		};
+
+		on(document, touchevents.move, data.touchmove, data);
+		on(document, touchevents.cancel, data.touchend, data);
+	}
+
+	function touchmove(e, data) {
+		var touch = changedTouch(e, data);
+		if (!touch) { return; }
+		checkThreshold(e, data, touch, removeTouch);
+	}
+
+	function touchend(e, data) {
+		var touch = identifiedTouch(e.changedTouches, data.identifier);
+		if (!touch) { return; }
+		removeTouch(data);
+	}
+
+	function removeTouch(data) {
+		off(document, touchevents.move, data.touchmove);
+		off(document, touchevents.cancel, data.touchend);
+	}
+
+	function checkThreshold(e, data, touch, fn) {
+		var distX = touch.pageX - data.pageX;
+		var distY = touch.pageY - data.pageY;
+
+		// Do nothing if the threshold has not been crossed.
+		if ((distX * distX) + (distY * distY) < (threshold * threshold)) { return; }
+
+		triggerStart(e, data, touch, distX, distY, fn);
+	}
+
+	function triggerStart(e, data, touch, distX, distY, fn) {
+		var touches = e.targetTouches;
+		var time = e.timeStamp - data.timeStamp;
+
+		// Create a movestart object with some special properties that
+		// are passed only to the movestart handlers.
+		var template = {
+			altKey:     e.altKey,
+			ctrlKey:    e.ctrlKey,
+			shiftKey:   e.shiftKey,
+			startX:     data.pageX,
+			startY:     data.pageY,
+			distX:      distX,
+			distY:      distY,
+			deltaX:     distX,
+			deltaY:     distY,
+			pageX:      touch.pageX,
+			pageY:      touch.pageY,
+			velocityX:  distX / time,
+			velocityY:  distY / time,
+			identifier: data.identifier,
+			targetTouches: touches,
+			finger: touches ? touches.length : 1,
+			enableMove: function() {
+				this.moveEnabled = true;
+				this.enableMove = noop;
+				e.preventDefault();
+			}
+		};
+
+		// Trigger the movestart event.
+		trigger(data.target, 'movestart', template);
+
+		// Unbind handlers that tracked the touch or mouse up till now.
+		fn(data);
+	}
+
+
+	// Handlers that control what happens following a movestart
+
+	function activeMousemove(e, data) {
+		var timer  = data.timer;
+
+		data.touch = e;
+		data.timeStamp = e.timeStamp;
+		timer.kick();
+	}
+
+	function activeMouseend(e, data) {
+		var target = data.target;
+		var event  = data.event;
+		var timer  = data.timer;
+
+		removeActiveMouse();
+
+		endEvent(target, event, timer, function() {
+			// Unbind the click suppressor, waiting until after mouseup
+			// has been handled.
+			setTimeout(function(){
+				off(target, 'click', preventDefault);
+			}, 0);
+		});
+	}
+
+	function removeActiveMouse() {
+		off(document, mouseevents.move, activeMousemove);
+		off(document, mouseevents.end, activeMouseend);
+	}
+
+	function activeTouchmove(e, data) {
+		var event = data.event;
+		var timer = data.timer;
+		var touch = changedTouch(e, event);
+
+		if (!touch) { return; }
+
+		// Stop the interface from gesturing
+		e.preventDefault();
+
+		event.targetTouches = e.targetTouches;
+		data.touch = touch;
+		data.timeStamp = e.timeStamp;
+
+		timer.kick();
+	}
+
+	function activeTouchend(e, data) {
+		var target = data.target;
+		var event  = data.event;
+		var timer  = data.timer;
+		var touch  = identifiedTouch(e.changedTouches, event.identifier);
+
+		// This isn't the touch you're looking for.
+		if (!touch) { return; }
+
+		removeActiveTouch(data);
+		endEvent(target, event, timer);
+	}
+
+	function removeActiveTouch(data) {
+		off(document, touchevents.move, data.activeTouchmove);
+		off(document, touchevents.end, data.activeTouchend);
+	}
+
+
+	// Logic for triggering move and moveend events
+
+	function updateEvent(event, touch, timeStamp) {
+		var time = timeStamp - event.timeStamp;
+
+		event.distX =  touch.pageX - event.startX;
+		event.distY =  touch.pageY - event.startY;
+		event.deltaX = touch.pageX - event.pageX;
+		event.deltaY = touch.pageY - event.pageY;
+
+		// Average the velocity of the last few events using a decay
+		// curve to even out spurious jumps in values.
+		event.velocityX = 0.3 * event.velocityX + 0.7 * event.deltaX / time;
+		event.velocityY = 0.3 * event.velocityY + 0.7 * event.deltaY / time;
+		event.pageX =  touch.pageX;
+		event.pageY =  touch.pageY;
+	}
+
+	function endEvent(target, event, timer, fn) {
+		timer.end(function(){
+			trigger(target, 'moveend', event);
+			return fn && fn();
+		});
+	}
+
+
+	// Set up the DOM
+
+	function movestart(e) {
+		if (e.defaultPrevented) { return; }
+		if (!e.moveEnabled) { return; }
+
+		var event = {
+			startX:        e.startX,
+			startY:        e.startY,
+			pageX:         e.pageX,
+			pageY:         e.pageY,
+			distX:         e.distX,
+			distY:         e.distY,
+			deltaX:        e.deltaX,
+			deltaY:        e.deltaY,
+			velocityX:     e.velocityX,
+			velocityY:     e.velocityY,
+			identifier:    e.identifier,
+			targetTouches: e.targetTouches,
+			finger:        e.finger
+		};
+
+		var data = {
+			target:    e.target,
+			event:     event,
+			timer:     new Timer(update),
+			touch:     undefined,
+			timeStamp: e.timeStamp
+		};
+
+		function update(time) {
+			updateEvent(event, data.touch, data.timeStamp);
+			trigger(data.target, 'move', event);
+		}
+
+		if (e.identifier === undefined) {
+			// We're dealing with a mouse event.
+			// Stop clicks from propagating during a move
+			on(e.target, 'click', preventDefault);
+			on(document, mouseevents.move, activeMousemove, data);
+			on(document, mouseevents.end, activeMouseend, data);
+		}
+		else {
+			// In order to unbind correct handlers they have to be unique
+			data.activeTouchmove = function(e, data) { activeTouchmove(e, data); };
+			data.activeTouchend = function(e, data) { activeTouchend(e, data); };
+
+			// We're dealing with a touch.
+			on(document, touchevents.move, data.activeTouchmove, data);
+			on(document, touchevents.end, data.activeTouchend, data);
+		}
+	}
+
+	on(document, 'mousedown', mousedown);
+	on(document, 'touchstart', touchstart);
+	on(document, 'movestart', movestart);
+
+
+	// jQuery special events
+	//
+	// jQuery event objects are copies of DOM event objects. They need
+	// a little help copying the move properties across.
+
+	if (!window.jQuery) { return; }
+
+	var properties = ("startX startY pageX pageY distX distY deltaX deltaY velocityX velocityY").split(' ');
+
+	function enableMove1(e) { e.enableMove(); }
+	function enableMove2(e) { e.enableMove(); }
+	function enableMove3(e) { e.enableMove(); }
+
+	function add(handleObj) {
+		var handler = handleObj.handler;
+
+		handleObj.handler = function(e) {
+			// Copy move properties across from originalEvent
+			var i = properties.length;
+			var property;
+
+			while(i--) {
+				property = properties[i];
+				e[property] = e.originalEvent[property];
+			}
+
+			handler.apply(this, arguments);
+		};
+	}
+
+	jQuery.event.special.movestart = {
+		setup: function() {
+			// Movestart must be enabled to allow other move events
+			on(this, 'movestart', enableMove1);
+
+			// Do listen to DOM events
+			return false;
+		},
+
+		teardown: function() {
+			off(this, 'movestart', enableMove1);
+			return false;
+		},
+
+		add: add
+	};
+
+	jQuery.event.special.move = {
+		setup: function() {
+			on(this, 'movestart', enableMove2);
+			return false;
+		},
+
+		teardown: function() {
+			off(this, 'movestart', enableMove2);
+			return false;
+		},
+
+		add: add
+	};
+
+	jQuery.event.special.moveend = {
+		setup: function() {
+			on(this, 'movestart', enableMove3);
+			return false;
+		},
+
+		teardown: function() {
+			off(this, 'movestart', enableMove3);
+			return false;
+		},
+
+		add: add
+	};
+});

resources/public/vendor/twentytwenty/js/jquery.twentytwenty.js

@@ -0,0 +1,151 @@
+(function($){
+
+  $.fn.twentytwenty = function(options) {
+    var options = $.extend({
+      default_offset_pct: 0.5,
+      orientation: 'horizontal',
+      before_label: 'Before',
+      after_label: 'After',
+      no_overlay: false,
+      move_slider_on_hover: false,
+      move_with_handle_only: true,
+      click_to_move: false
+    }, options);
+
+    return this.each(function() {
+
+      var sliderPct = options.default_offset_pct;
+      var container = $(this);
+      var sliderOrientation = options.orientation;
+      var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left';
+      var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right';
+
+
+      container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
+      if(!options.no_overlay) {
+        container.append("<div class='twentytwenty-overlay'></div>");
+        var overlay = container.find(".twentytwenty-overlay");
+        overlay.append("<div class='twentytwenty-before-label' data-content='"+options.before_label+"'></div>");
+        overlay.append("<div class='twentytwenty-after-label' data-content='"+options.after_label+"'></div>");
+      }
+      var beforeImg = container.find("img:first");
+      var afterImg = container.find("img:last");
+      container.append("<div class='twentytwenty-handle'></div>");
+      var slider = container.find(".twentytwenty-handle");
+      slider.append("<span class='twentytwenty-" + beforeDirection + "-arrow'></span>");
+      slider.append("<span class='twentytwenty-" + afterDirection + "-arrow'></span>");
+      container.addClass("twentytwenty-container");
+      beforeImg.addClass("twentytwenty-before");
+      afterImg.addClass("twentytwenty-after");
+      
+      var calcOffset = function(dimensionPct) {
+        var w = beforeImg.width();
+        var h = beforeImg.height();
+        return {
+          w: w+"px",
+          h: h+"px",
+          cw: (dimensionPct*w)+"px",
+          ch: (dimensionPct*h)+"px"
+        };
+      };
+
+      var adjustContainer = function(offset) {
+      	if (sliderOrientation === 'vertical') {
+          beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
+          afterImg.css("clip", "rect("+offset.ch+","+offset.w+","+offset.h+",0)");
+      	}
+      	else {
+          beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
+          afterImg.css("clip", "rect(0,"+offset.w+","+offset.h+","+offset.cw+")");
+    	}
+        container.css("height", offset.h);
+      };
+
+      var adjustSlider = function(pct) {
+        var offset = calcOffset(pct);
+        slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
+        adjustContainer(offset);
+      };
+
+      // Return the number specified or the min/max number if it outside the range given.
+      var minMaxNumber = function(num, min, max) {
+        return Math.max(min, Math.min(max, num));
+      };
+
+      // Calculate the slider percentage based on the position.
+      var getSliderPercentage = function(positionX, positionY) {
+        var sliderPercentage = (sliderOrientation === 'vertical') ?
+          (positionY-offsetY)/imgHeight :
+          (positionX-offsetX)/imgWidth;
+
+        return minMaxNumber(sliderPercentage, 0, 1);
+      };
+
+
+      $(window).on("resize.twentytwenty", function(e) {
+        adjustSlider(sliderPct);
+      });
+
+      var offsetX = 0;
+      var offsetY = 0;
+      var imgWidth = 0;
+      var imgHeight = 0;
+      var onMoveStart = function(e) {
+        if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') {
+          e.preventDefault();
+        }
+        else if (((e.distX < e.distY && e.distX < -e.distY) || (e.distX > e.distY && e.distX > -e.distY)) && sliderOrientation === 'vertical') {
+          e.preventDefault();
+        }
+        container.addClass("active");
+        offsetX = container.offset().left;
+        offsetY = container.offset().top;
+        imgWidth = beforeImg.width(); 
+        imgHeight = beforeImg.height();          
+      };
+      var onMove = function(e) {
+        if (container.hasClass("active")) {
+          sliderPct = getSliderPercentage(e.pageX, e.pageY);
+          adjustSlider(sliderPct);
+        }
+      };
+      var onMoveEnd = function() {
+          container.removeClass("active");
+      };
+
+      var moveTarget = options.move_with_handle_only ? slider : container;
+      moveTarget.on("movestart",onMoveStart);
+      moveTarget.on("move",onMove);
+      moveTarget.on("moveend",onMoveEnd);
+
+      if (options.move_slider_on_hover) {
+        container.on("mouseenter", onMoveStart);
+        container.on("mousemove", onMove);
+        container.on("mouseleave", onMoveEnd);
+      }
+
+      slider.on("touchmove", function(e) {
+        e.preventDefault();
+      });
+
+      container.find("img").on("mousedown", function(event) {
+        event.preventDefault();
+      });
+
+      if (options.click_to_move) {
+        container.on('click', function(e) {
+          offsetX = container.offset().left;
+          offsetY = container.offset().top;
+          imgWidth = beforeImg.width();
+          imgHeight = beforeImg.height();
+
+          sliderPct = getSliderPercentage(e.pageX, e.pageY);
+          adjustSlider(sliderPct);
+        });
+      }
+
+      $(window).trigger("resize.twentytwenty");
+    });
+  };
+
+})(jQuery);

resources/public/vendor/twentytwenty/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "zurb-twentytwenty",
+  "version": "0.1.0",
+  "description": "Zurb TwentyTwenty plugin",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "ZURB",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zurb/twentytwenty"
+  },
+  "devDependencies": {
+    "grunt": "^0.4.5",
+    "grunt-contrib-clean": "^0.6.0",
+    "grunt-contrib-connect": "^0.9.0",
+    "grunt-contrib-watch": "^0.6.1",
+    "grunt-notify": "^0.4.1",
+    "grunt-sass": "^1.1.0",
+    "load-grunt-tasks": "^2.0.0"
+  }
+}

resources/public/vendor/twentytwenty/scss/foundation.scss

@@ -0,0 +1,3 @@
+@import "foundation/variables";
+@import "foundation/components/global";
+@import "foundation/components/grid";

resources/public/vendor/twentytwenty/scss/twentytwenty-no-compass.scss

@@ -0,0 +1,302 @@
+// 20/20 Class Prefix
+$pluginPrefix: "twentytwenty" !default;
+
+// 20/20 Handle Styles
+$twenty20-handle-color: var(--light) !default;
+$twenty20-handle-stroke: 3px !default;
+$twenty20-handle-circle-width: 38px !default;
+$twenty20-handle-box-shadow: 0px 0px 12px rgba(#333,0.5) !default;
+$twenty20-handle-triangle-color: $twenty20-handle-color !default;
+$twenty20-handle-triangle-size: 6px !default;
+$twenty20-handle-triangle-position: 5px !default;
+$twenty20-handle-radius: 1000px !default;
+
+// 20/20 Overlay Styles
+$twenty20-overlay-bg: rgba(#000,0.5) !default;
+$twenty20-overlay-label-color: var(--light) !default;
+$twenty20-overlay-label-bg: rgba(#fff, .2) !default;
+$twenty20-overlay-label-height: 38px !default;
+$twenty20-overlay-label-width: 90px !default;
+$twenty20-overlay-label-padding: 20px !default;
+$twenty20-overlay-label-font-size: 13px !default;
+$twenty20-overlay-label-letter-spacing: 0.1em !default;
+$twenty20-label-radius: 2px !default;
+
+// 20/20 Placeholders
+%handle-content {
+  content: " ";
+  display: block;
+  background: $twenty20-handle-color;
+  position: absolute;
+  z-index: 30;
+  // @include box-shadow($twenty20-handle-box-shadow);
+}
+
+%handle-position-horizontal {
+  width: $twenty20-handle-stroke;
+  height: 9999px;
+  left: 50%;
+  margin-left: -($twenty20-handle-stroke / 2);
+}
+
+%handle-position-vertical {
+  width: 9999px;
+  height: $twenty20-handle-stroke;
+  top: 50%;
+  margin-top: -($twenty20-handle-stroke / 2);
+}
+
+%absolute-wh-position {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+%overlay-transition-duration {
+  transition-duration: 0.5s;
+}
+
+%label-transition-property {
+  transition-property: opacity;
+}
+
+%label-text {
+  color: $twenty20-overlay-label-color;
+  font-size: $twenty20-overlay-label-font-size;
+  letter-spacing: $twenty20-overlay-label-letter-spacing;
+}
+
+%label-structure {
+  position: absolute;
+  background: $twenty20-overlay-label-bg;
+  line-height: $twenty20-overlay-label-height;
+  padding: 0 $twenty20-overlay-label-padding;
+  border-radius: $twenty20-label-radius;
+}
+
+%label-position-horizontal {
+  top: 50%;
+  margin-top: -($twenty20-overlay-label-height / 2);
+}
+
+%label-position-vertical {
+  left: 50%;
+  margin-left: -($twenty20-overlay-label-width / 2);
+  text-align: center;
+  width: $twenty20-overlay-label-width;
+}
+
+%css-triangle {
+  width: 0;
+  height: 0;
+  border: $twenty20-handle-triangle-size inset transparent;
+  position: absolute;
+}
+
+%css-triangle-horizontal {
+  @extend %css-triangle;
+  top: 50%;
+  margin-top: -$twenty20-handle-triangle-size;
+}
+
+%css-triangle-vertical {
+  @extend %css-triangle;
+  left: 50%;
+  margin-left: -$twenty20-handle-triangle-size;
+}
+
+// 20/20 Container
+.#{$pluginPrefix}-container {
+  box-sizing: content-box;
+  z-index: 0;
+  overflow: hidden;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+
+  img {
+    max-width: 100%;
+    position: absolute;
+    top: 0;
+    display: block;
+  }
+
+  &.active .#{$pluginPrefix}-overlay,
+  &.active :hover.#{$pluginPrefix}-overlay { background: rgba(#000,0);
+
+    .#{$pluginPrefix}-before-label,
+    .#{$pluginPrefix}-after-label { opacity: 0; }
+  }
+  * {
+    box-sizing: content-box;
+  }
+}
+
+// 20/20 Before Label
+.#{$pluginPrefix}-before-label {
+  @extend %absolute-wh-position;
+  @extend %label-transition-property;
+  @extend %overlay-transition-duration;
+  opacity: 0;
+
+  &:before {
+    @extend %label-structure;
+    @extend %label-text;
+    content: attr(data-content);
+  }
+}
+
+// 20/20 After Label
+.#{$pluginPrefix}-after-label {
+  @extend %absolute-wh-position;
+  @extend %label-transition-property;
+  @extend %overlay-transition-duration;
+  opacity: 0;
+
+  &:before {
+    @extend %label-structure;
+    @extend %label-text;
+    content: attr(data-content);
+  }
+}
+
+// 20/20 Horizontal Labels
+.#{$pluginPrefix}-horizontal .#{$pluginPrefix}-before-label {
+
+  &:before {
+     @extend %label-position-horizontal;
+     left: 10px;
+  }
+}
+
+.#{$pluginPrefix}-horizontal .#{$pluginPrefix}-after-label {
+
+  &:before {
+     @extend %label-position-horizontal;
+     right: 10px;
+  }
+}
+
+// 20/20 Vertical Labels
+.#{$pluginPrefix}-vertical .#{$pluginPrefix}-before-label {
+
+  &:before {
+     @extend %label-position-vertical;
+     top: 10px;
+  }
+}
+
+.#{$pluginPrefix}-vertical .#{$pluginPrefix}-after-label {
+
+  &:before {
+     @extend %label-position-vertical;
+     bottom: 10px;
+  }
+}
+
+// 20/20 Overlay
+.#{$pluginPrefix}-overlay {
+  @extend %absolute-wh-position;
+  @extend %overlay-transition-duration;
+  transition-property: background;
+  background: rgba(#000,0);
+  z-index: 25;
+
+  &:hover { background: $twenty20-overlay-bg;
+
+    .#{$pluginPrefix}-after-label { opacity: 1; }
+    .#{$pluginPrefix}-before-label { opacity: 1; }
+  }
+}
+
+.#{$pluginPrefix}-before { z-index: 20; }
+.#{$pluginPrefix}-after { z-index: 10; }
+
+// 20/20 Handle Styles
+.#{$pluginPrefix}-handle {
+  height: $twenty20-handle-circle-width;
+  width: $twenty20-handle-circle-width;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -($twenty20-handle-circle-width/2) - $twenty20-handle-stroke;
+  margin-top: -($twenty20-handle-circle-width/2) - $twenty20-handle-stroke;
+  border: $twenty20-handle-stroke solid $twenty20-handle-color;
+  border-radius: $twenty20-handle-radius;
+  box-shadow: $twenty20-handle-box-shadow;
+  z-index: 40;
+  cursor: pointer;
+}
+
+// 20/20 Horizontal Handle Styles
+.#{$pluginPrefix}-horizontal .#{$pluginPrefix}-handle {
+
+  &:before {
+    @extend %handle-content;
+    @extend %handle-position-horizontal;
+    bottom: 50%;
+    margin-bottom: ($twenty20-handle-circle-width/2) + $twenty20-handle-stroke;
+    box-shadow: 0 $twenty20-handle-stroke 0 $twenty20-handle-color, $twenty20-handle-box-shadow;
+  }
+
+  &:after {
+    @extend %handle-content;
+    @extend %handle-position-horizontal;
+    top: 50%;
+    margin-top: ($twenty20-handle-circle-width/2) + $twenty20-handle-stroke;
+    box-shadow: 0 (-$twenty20-handle-stroke) 0 $twenty20-handle-color, $twenty20-handle-box-shadow;
+  }
+}
+
+// 20/20 Vertical Handle Styles
+.#{$pluginPrefix}-vertical .#{$pluginPrefix}-handle {
+
+  &:before {
+    @extend %handle-content;
+    @extend %handle-position-vertical;
+    left: 50%;
+    margin-left: ($twenty20-handle-circle-width/2) + $twenty20-handle-stroke;
+    box-shadow: $twenty20-handle-stroke 0 0 $twenty20-handle-color, $twenty20-handle-box-shadow;
+  }
+
+  &:after {
+    @extend %handle-content;
+    @extend %handle-position-vertical;
+    right: 50%;
+    margin-right: ($twenty20-handle-circle-width/2) + $twenty20-handle-stroke;
+    box-shadow: (-$twenty20-handle-stroke) 0 0 $twenty20-handle-color, $twenty20-handle-box-shadow;
+  }
+}
+
+// 20/20 Left Handle
+.#{$pluginPrefix}-left-arrow {
+  border-right: $twenty20-handle-triangle-size solid $twenty20-handle-triangle-color;
+  left: 50%;
+  margin-left: -($twenty20-handle-triangle-size * 2) - $twenty20-handle-triangle-position;
+  @extend %css-triangle-horizontal;
+}
+
+// 20/20 Right Handle
+.#{$pluginPrefix}-right-arrow {
+  border-left: $twenty20-handle-triangle-size solid $twenty20-handle-triangle-color;
+  right: 50%;
+  margin-right: -($twenty20-handle-triangle-size * 2) - $twenty20-handle-triangle-position;
+  @extend %css-triangle-horizontal;
+}
+
+// 20/20 Up Handle
+.#{$pluginPrefix}-up-arrow {
+  border-bottom: $twenty20-handle-triangle-size solid $twenty20-handle-triangle-color;
+  top: 50%;
+  margin-top: -($twenty20-handle-triangle-size * 2) - $twenty20-handle-triangle-position;
+  @extend %css-triangle-vertical;
+}
+
+// 20/20 Down Handle
+.#{$pluginPrefix}-down-arrow {
+  border-top: $twenty20-handle-triangle-size solid $twenty20-handle-triangle-color;
+  bottom: 50%;
+  margin-bottom: -($twenty20-handle-triangle-size * 2) - $twenty20-handle-triangle-position;
+  @extend %css-triangle-vertical;
+}

resources/public/vendor/twentytwenty/scss/twentytwenty.scss

@@ -0,0 +1,303 @@
+// Compass overrides to remove old vendor prefixes
+$experimental-support-for-opera:false;
+$experimental-support-for-khtml:false;
+$experimental-support-for-microsoft:false;
+// Import Compass CSS3 mixins
+@import "compass/css3";
+
+// 20/20 Class Prefix
+$pluginPrefix: "twentytwenty" !default;
+
+// 20/20 Handle Styles
+$twenty20-handle-color: var(--light) !default;
+$twenty20-handle-stroke: 3px !default;
+$twenty20-handle-circle-width: 38px !default;
+$twenty20-handle-box-shadow: 0px 0px 12px rgba(#333,0.5) !default;
+$twenty20-handle-triangle-color: $twenty20-handle-color !default;
+$twenty20-handle-triangle-size: 6px !default;
+$twenty20-handle-triangle-position: 5px !default;
+$twenty20-handle-radius: 1000px !default;
+
+// 20/20 Overlay Styles
+$twenty20-overlay-bg: rgba(#000,0.5) !default;
+$twenty20-overlay-label-color: var(--light) !default;
+$twenty20-overlay-label-bg: rgba(#fff, .2) !default;
+$twenty20-overlay-label-height: 38px !default;
+$twenty20-overlay-label-width: 90px !default;
+$twenty20-overlay-label-padding: 20px !default;
+$twenty20-overlay-label-font-size: 13px !default;
+$twenty20-overlay-label-letter-spacing: 0.1em !default;
+$twenty20-label-radius: 2px !default;
+
+// 20/20 Placeholders
+%handle-content {
+  content: " ";
+  display: block;
+  background: $twenty20-handle-color;
+  position: absolute;
+  z-index: 30;
+  @include box-shadow($twenty20-handle-box-shadow);
+}
+
+%handle-position-horizontal {
+  width: $twenty20-handle-stroke;
+  height: 9999px;
+  left: 50%;
+  margin-left: -($twenty20-handle-stroke / 2);
+}
+
+%handle-position-vertical {
+  width: 9999px;
+  height: $twenty20-handle-stroke;
+  top: 50%;
+  margin-top: -($twenty20-handle-stroke / 2);
+}
+
+%absolute-wh-position {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+%overlay-transition-duration { @include transition-duration(0.5s); }
+
+%label-transition-property { @include transition-property(opacity); }
+
+%label-text {
+  color: $twenty20-overlay-label-color;
+  font-size: $twenty20-overlay-label-font-size;
+  letter-spacing: $twenty20-overlay-label-letter-spacing;
+}
+
+%label-structure {
+  position: absolute;
+  background: $twenty20-overlay-label-bg;
+  line-height: $twenty20-overlay-label-height;
+  padding: 0 $twenty20-overlay-label-padding;
+  @include border-radius($twenty20-label-radius);
+}
+
+%label-position-horizontal {
+  top: 50%;
+  margin-top: -($twenty20-overlay-label-height / 2);
+}
+
+%label-position-vertical {
+  left: 50%;
+  margin-left: -($twenty20-overlay-label-width / 2);
+  text-align: center;
+  width: $twenty20-overlay-label-width;
+}
+
+%css-triangle {
+  width: 0;
+  height: 0;
+  border: $twenty20-handle-triangle-size inset transparent;
+  position: absolute;
+}
+
+%css-triangle-horizontal {
+  @extend %css-triangle;
+  top: 50%;
+  margin-top: -$twenty20-handle-triangle-size;
+}
+
+%css-triangle-vertical {
+  @extend %css-triangle;
+  left: 50%;
+  margin-left: -$twenty20-handle-triangle-size;
+}
+
+// 20/20 Container
+.#{$pluginPrefix}-container {
+  @include box-sizing(content-box);
+  z-index: 0;
+  overflow: hidden;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+
+  img {
+    max-width: 100%;
+    position: absolute;
+    top: 0;
+    display: block;
+  }
+
+  &.active .#{$pluginPrefix}-overlay,
+  &.active :hover.#{$pluginPrefix}-overlay { background: rgba(#000,0);
+
+    .#{$pluginPrefix}-before-label,
+    .#{$pluginPrefix}-after-label { opacity: 0; }
+  }
+  * { @include box-sizing(content-box); }
+}
+
+// 20/20 Before Label
+.#{$pluginPrefix}-before-label {
+  @extend %absolute-wh-position;
+  @extend %label-transition-property;
+  @extend %overlay-transition-duration;
+  opacity: 0;
+
+  &:before {
+    @extend %label-structure;
+    @extend %label-text;
+    content: attr(data-content);
+  }
+}
+
+// 20/20 After Label
+.#{$pluginPrefix}-after-label {
+  @extend %absolute-wh-position;
+  @extend %label-transition-property;
+  @extend %overlay-transition-duration;
+  opacity: 0;
+
+  &:before {
+    @extend %label-structure;
+    @extend %label-text;
+    content: attr(data-content);
+  }
+}
+
+// 20/20 Horizontal Labels
+.#{$pluginPrefix}-horizontal .#{$pluginPrefix}-before-label {
+
+  &:before {
+     @extend %label-position-horizontal;
+     left: 10px;
+  }
+}
+
+.#{$pluginPrefix}-horizontal .#{$pluginPrefix}-after-label {
+
+  &:before {
+     @extend %label-position-horizontal;
+     right: 10px;
+  }
+}
+
+// 20/20 Vertical Labels
+.#{$pluginPrefix}-vertical .#{$pluginPrefix}-before-label {
+
+  &:before {
+     @extend %label-position-vertical;
+     top: 10px;
+  }
+}
+
+.#{$pluginPrefix}-vertical .#{$pluginPrefix}-after-label {
+
+  &:before {
+     @extend %label-position-vertical;
+     bottom: 10px;
+  }
+}
+
+// 20/20 Overlay
+.#{$pluginPrefix}-overlay {
+  @extend %absolute-wh-position;
+  @extend %overlay-transition-duration;
+  @include transition-property(background);
+  background: rgba(#000,0);
+  z-index: 25;
+
+  &:hover { background: $twenty20-overlay-bg;
+
+    .#{$pluginPrefix}-after-label { opacity: 1; }
+    .#{$pluginPrefix}-before-label { opacity: 1; }
+  }
+}
+
+.#{$pluginPrefix}-before { z-index: 20; }
+.#{$pluginPrefix}-after { z-index: 10; }
+
+// 20/20 Handle Styles
+.#{$pluginPrefix}-handle {
+  height: $twenty20-handle-circle-width;
+  width: $twenty20-handle-circle-width;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -($twenty20-handle-circle-width/2) - $twenty20-handle-stroke;
+  margin-top: -($twenty20-handle-circle-width/2) - $twenty20-handle-stroke;
+  border: $twenty20-handle-stroke solid $twenty20-handle-color;
+  @include border-radius($twenty20-handle-radius);
+  @include box-shadow($twenty20-handle-box-shadow);
+  z-index: 40;
+  cursor: pointer;
+}
+
+// 20/20 Horizontal Handle Styles
+.#{$pluginPrefix}-horizontal .#{$pluginPrefix}-handle {
+
+  &:before {
+    @extend %handle-content;
+    @extend %handle-position-horizontal;
+    bottom: 50%;
+    margin-bottom: ($twenty20-handle-circle-width/2) + $twenty20-handle-stroke;
+    @include box-shadow(0 $twenty20-handle-stroke 0 $twenty20-handle-color, $twenty20-handle-box-shadow);
+  }
+
+  &:after {
+    @extend %handle-content;
+    @extend %handle-position-horizontal;
+    top: 50%;
+    margin-top: ($twenty20-handle-circle-width/2) + $twenty20-handle-stroke;
+    @include box-shadow(0 (-$twenty20-handle-stroke) 0 $twenty20-handle-color, $twenty20-handle-box-shadow);
+  }
+}
+
+// 20/20 Vertical Handle Styles
+.#{$pluginPrefix}-vertical .#{$pluginPrefix}-handle {
+
+  &:before {
+    @extend %handle-content;
+    @extend %handle-position-vertical;
+    left: 50%;
+    margin-left: ($twenty20-handle-circle-width/2) + $twenty20-handle-stroke;
+    @include box-shadow($twenty20-handle-stroke 0 0 $twenty20-handle-color, $twenty20-handle-box-shadow);
+  }
+
+  &:after {
+    @extend %handle-content;
+    @extend %handle-position-vertical;
+    right: 50%;
+    margin-right: ($twenty20-handle-circle-width/2) + $twenty20-handle-stroke;
+    @include box-shadow((-$twenty20-handle-stroke) 0 0 $twenty20-handle-color, $twenty20-handle-box-shadow);
+  }
+}
+
+// 20/20 Left Handle
+.#{$pluginPrefix}-left-arrow {
+  border-right: $twenty20-handle-triangle-size solid $twenty20-handle-triangle-color;
+  left: 50%;
+  margin-left: -($twenty20-handle-triangle-size * 2) - $twenty20-handle-triangle-position;
+  @extend %css-triangle-horizontal;
+}
+
+// 20/20 Right Handle
+.#{$pluginPrefix}-right-arrow {
+  border-left: $twenty20-handle-triangle-size solid $twenty20-handle-triangle-color;
+  right: 50%;
+  margin-right: -($twenty20-handle-triangle-size * 2) - $twenty20-handle-triangle-position;
+  @extend %css-triangle-horizontal;
+}
+
+// 20/20 Up Handle
+.#{$pluginPrefix}-up-arrow {
+  border-bottom: $twenty20-handle-triangle-size solid $twenty20-handle-triangle-color;
+  top: 50%;
+  margin-top: -($twenty20-handle-triangle-size * 2) - $twenty20-handle-triangle-position;
+  @extend %css-triangle-vertical;
+}
+
+// 20/20 Down Handle
+.#{$pluginPrefix}-down-arrow {
+  border-top: $twenty20-handle-triangle-size solid $twenty20-handle-triangle-color;
+  bottom: 50%;
+  margin-bottom: -($twenty20-handle-triangle-size * 2) - $twenty20-handle-triangle-position;
+  @extend %css-triangle-vertical;
+}

resources/public/vendor/twentytwenty/twentytwenty-no-compass.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
+<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
+<!--[if IE 8 ]>    <html class="lt-ie9" lang="en"> <![endif]-->
+<!--[if IE 9 ]>    <html class="lt-ie10" lang="en"> <![endif]-->
+<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>twentytwenty</title>
+  <link href="css/foundation.css" rel="stylesheet" type="text/css" />
+  <link href="css/twentytwenty-no-compass.css" rel="stylesheet" type="text/css" />
+</head>
+  <body>
+
+    <div class="row" style="margin-top: 2em;">
+      <div class="large-4 columns">
+        <h3>Basic Usage</h3>
+        <p>Demonstrates basic usage of the plugin.</p>
+      </div>
+      <div class="large-8 columns">
+        <div class="twentytwenty-container">
+          <img src="img/1_1.jpg" />
+          <img src="img/1_2.jpg" />
+        </div>
+      </div>
+    </div>
+    
+    <div class="row" style="margin-top: 2em; margin-bottom: 2em;">
+      <div class="large-4 columns">
+        <h3>Vertical Orientation</h3>
+        <p>Demonstrates sliding up and down.</p>
+      </div>
+      <div class="large-8 columns">
+        <div class="twentytwenty-container" data-orientation="vertical">
+          <img src="img/1_1.jpg" />
+          <img src="img/1_2.jpg" />
+        </div>
+      </div>
+    </div>
+
+    <div class="row" style="margin-bottom: 2em;">
+      <div class="large-4 columns">
+        <h3>Side by side</h3>
+        <p>Using multiple comparisons at once.</p>
+      </div>
+      <div class="large-4 columns">
+        <div class="twentytwenty-container">
+          <img src="img/2_1.jpg" />
+          <img src="img/2_2.jpg" />
+        </div>
+      </div>
+      <div class="large-4 columns">
+        <div class="twentytwenty-container">
+          <img src="img/3_1.jpg" />
+          <img src="img/3_2.jpg" />
+        </div>
+      </div>
+    </div>
+    
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
+    <script src="js/jquery.event.move.js"></script>
+    <script src="js/jquery.twentytwenty.js"></script>
+    <script>
+    $(window).load(function(){
+      $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
+      $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'});
+    });
+    </script>
+  </body>
+</html>