Skip to content

Instantly share code, notes, and snippets.

@DamianMullins

DamianMullins/esnextbin.md

Last active February 24, 2017 13:36
Show Gist options
  • Save DamianMullins/f5d1c0c834d1f91fb53200dbdc2aaeb8 to your computer and use it in GitHub Desktop.
Save DamianMullins/f5d1c0c834d1f91fb53200dbdc2aaeb8 to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sliders</title>
<style>
p {
padding: 20px;
text-align: center;
}
.slider-nav {
color: white;
display: inline-block;
background-color: green;
padding: 10px;
user-select: none;
}
.slider-nav:hover {
background-color: darkgreen;
cursor: pointer;
}
</style>
<style>
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
width: 400px;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-slide {
float: left;
width: 100%;
position: relative;
background-color: orange;
}
</style>
<style>
.lory {
}
.lory-frame {
width: 400px;
position: relative;
line-height: 0;
overflow: hidden;
white-space: nowrap;
}
.lory-slides {
display: inline-block;
margin: 0;
}
.lory-slide {
position: relative;
display: inline-block;
width: 400px;
background-color: orange;
}
</style>
</head>
<body>
<h1>Slides</h1>
<h2>Swipe</h2>
<div class="swipe">
<div class="swipe-wrap">
<div class="swipe-slide">
<p>1</p>
</div>
<div class="swipe-slide">
<p>2</p>
</div>
<div class="swipe-slide">
<p>3</p>
</div>
</div>
</div>
<h2>Lory</h2>
<div class="slider js_slider">
<div class="lory-frame">
<ul class="lory-slides">
<li class="lory-slide">
<p>1</p>
</li>
<li class="lory-slide">
<p>2</p>
</li>
<li class="lory-slide">
<p>3</p>
</li>
</ul>
</div>
</div>
</body>
</html>
Raw
index.js
import Swipe from 'swipejs';
import { lory } from 'lory.js';
/*
* Helpers
*/
const $ = (selector) => document.querySelector(selector);
const $$ = (selector) => Array.prototype.slice.apply(document.querySelectorAll(selector));
/*
* Swipe
*/
$$('.swipe').forEach(swipeEl => {
const options = {
prevClass: 'swipePrev',
nextClass: 'swipeNext'
};
const swipeInstance = new Swipe(swipeEl, {
draggable: true,
disableScroll: true,
continuous: false
});
const slideInterface = {
element: swipeEl,
slideInstance: swipeInstance,
prev: swipeInstance.prev,
next: swipeInstance.next
};
setupSlide(slideInterface, options);
});
/*
* Lory
*/
$$('.slider').forEach(swipeEl => {
const options = {
prevClass: 'swipePrev',
nextClass: 'swipeNext'
};
const loryInstance = lory(swipeEl, {
infinite: false,
enableMouseEvents: true,
classNameFrame: 'lory-frame',
classNameSlideContainer: 'lory-slides'
});
const slideInterface = {
element: swipeEl,
slideInstance: loryInstance,
prev: loryInstance.prev,
next: loryInstance.next
};
setupSlide(slideInterface, options);
});
/*
* Create the slide
*/
function setupSlide (slideInterface, opts = {}) {
const defaults = {
prevClass: 'prev',
nextClass: 'next'
};
const options = { ...defaults, ...opts };
console.log(slideInterface);
function setup () {
createNavElements();
}
function createNavElements () {
const navElFragment = document.createDocumentFragment();
const prev = document.createElement("a");
prev.textContent = 'Previous';
prev.classList.add('slider-nav', options.prevClass);
prev.addEventListener('click', e => {
e.preventDefault();
slideInterface.prev();
});
navElFragment.appendChild(prev);
const next = document.createElement("a");
next.textContent = 'Next';
next.classList.add('slider-nav', options.nextClass);
next.addEventListener('click', e => {
e.preventDefault();
slideInterface.next();
});
navElFragment.appendChild(next);
slideInterface.element.appendChild(navElFragment);
}
setup();
}
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"swipejs": "2.2.3",
"lory.js": "2.2.1",
"babel-runtime": "6.22.0"
}
}
Raw
transpiled.js
'use strict';
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _swipejs = require('swipejs');
var _swipejs2 = _interopRequireDefault(_swipejs);
var _lory = require('lory.js');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
console.clear();
var $ = function $(selector) {
return document.querySelector(selector);
};
var $$ = function $$(selector) {
return Array.prototype.slice.apply(document.querySelectorAll(selector));
};
$$('.swipe').forEach(function (swipeEl) {
var options = {
prevClass: 'swipePrev',
nextClass: 'swipeNext'
};
var swipeInstance = new _swipejs2.default(swipeEl, {
draggable: true,
disableScroll: true
});
var slideInterface = {
element: swipeEl,
slideInstance: swipeInstance,
prev: swipeInstance.prev,
next: swipeInstance.next
};
setupSlide(slideInterface, options);
});
$$('.slider').forEach(function (swipeEl) {
var options = {
prevClass: 'swipePrev',
nextClass: 'swipeNext'
};
var loryInstance = (0, _lory.lory)(swipeEl, {
infinite: false,
classNameFrame: 'lory-frame',
classNameSlideContainer: 'lory-slides'
});
var slideInterface = {
element: swipeEl,
slideInstance: loryInstance,
prev: loryInstance.prev,
next: loryInstance.next
};
setupSlide(slideInterface, options);
});
function setupSlide(slideInterface) {
var opts = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
var defaults = {
prevClass: 'prev',
nextClass: 'next'
};
var options = (0, _extends3.default)({}, defaults, opts);
console.log(slideInterface);
function setup() {
createNavElements();
}
function createNavElements() {
var navElFragment = document.createDocumentFragment();
var prev = document.createElement("a");
prev.textContent = 'Previous';
prev.classList.add('slider-nav', options.prevClass);
prev.addEventListener('click', function (e) {
e.preventDefault();
slideInterface.prev();
});
navElFragment.appendChild(prev);
var next = document.createElement("a");
next.textContent = 'Next';
next.classList.add('slider-nav', options.nextClass);
next.addEventListener('click', function (e) {
e.preventDefault();
slideInterface.next();
});
navElFragment.appendChild(next);
slideInterface.element.appendChild(navElFragment);
}
setup();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment