Build mobile apps with simple HTML, CSS, and JS components. http://goratchet.com/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1073 lines
28 KiB

/*!
11 years ago
* =====================================================
* Ratchet v2.0.2 (http://goratchet.com)
10 years ago
* Copyright 2015 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
11 years ago
*
* v2.0.2 designed by @connors.
11 years ago
* =====================================================
*/
10 years ago
/* ========================================================================
* Ratchet: common.js v2.0.2
* http://goratchet.com/
* ========================================================================
* Copyright 2015 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
* ======================================================================== */
!(function () {
'use strict';
10 years ago
// Compatible With CustomEvent
if (!window.CustomEvent) {
window.CustomEvent = function (type, config) {
var e = document.createEvent('CustomEvent');
e.initCustomEvent(type, config.bubbles, config.cancelable, config.detail);
return e;
};
}
10 years ago
// Create Ratchet namespace
if (typeof window.RATCHET === 'undefined') {
window.RATCHET = {};
}
// Original script from http://davidwalsh.name/vendor-prefix
window.RATCHET.getBrowserCapabilities = (function () {
var styles = window.getComputedStyle(document.documentElement, '');
var pre = (Array.prototype.slice
.call(styles)
.join('')
.match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
)[1];
return {
prefix: '-' + pre + '-',
transform: pre[0].toUpperCase() + pre.substr(1) + 'Transform'
};
})();
10 years ago
window.RATCHET.getTransitionEnd = (function () {
var el = document.createElement('ratchet');
var transEndEventNames = {
WebkitTransition : 'webkitTransitionEnd',
MozTransition : 'transitionend',
OTransition : 'oTransitionEnd otransitionend',
transition : 'transitionend'
};
for (var name in transEndEventNames) {
if (el.style[name] !== undefined) {
return transEndEventNames[name];
}
}
return transEndEventNames.transition;
})();
10 years ago
}());
/* ========================================================================
* Ratchet: modals.js v2.0.2
* http://goratchet.com/components#modals
* ========================================================================
* Copyright 2015 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
* ======================================================================== */
12 years ago
11 years ago
!(function () {
'use strict';
10 years ago
var eventModalOpen = new CustomEvent('modalOpen', {
bubbles: true,
cancelable: true
});
var eventModalClose = new CustomEvent('modalClose', {
bubbles: true,
cancelable: true
});
12 years ago
var findModals = function (target) {
var i;
var modals = document.querySelectorAll('a');
12 years ago
for (; target && target !== document; target = target.parentNode) {
11 years ago
for (i = modals.length; i--;) {
if (modals[i] === target) {
return target;
}
}
12 years ago
}
};
12 years ago
var getModal = function (event) {
var modalToggle = findModals(event.target);
11 years ago
if (modalToggle && modalToggle.hash) {
return document.querySelector(modalToggle.hash);
}
12 years ago
};
12 years ago
window.addEventListener('touchend', function (event) {
var modal = getModal(event);
10 years ago
if (modal && modal.classList.contains('modal')) {
var eventToDispatch = eventModalOpen;
if (modal.classList.contains('active')) {
eventToDispatch = eventModalClose;
11 years ago
}
10 years ago
modal.dispatchEvent(eventToDispatch);
modal.classList.toggle('active');
}
10 years ago
event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
12 years ago
});
11 years ago
}());
/* ========================================================================
* Ratchet: popovers.js v2.0.2
* http://goratchet.com/components#popovers
* ========================================================================
* Copyright 2015 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
* ======================================================================== */
11 years ago
!(function () {
'use strict';
var popover;
var findPopovers = function (target) {
var i;
var popovers = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) {
11 years ago
for (i = popovers.length; i--;) {
if (popovers[i] === target) {
return target;
}
}
}
};
var onPopoverHidden = function () {
popover.style.display = 'none';
10 years ago
popover.removeEventListener(window.RATCHET.getTransitionEnd, onPopoverHidden);
11 years ago
};
11 years ago
var backdrop = (function () {
var element = document.createElement('div');
element.classList.add('backdrop');
element.addEventListener('touchend', function () {
10 years ago
popover.addEventListener(window.RATCHET.getTransitionEnd, onPopoverHidden);
popover.classList.remove('visible');
11 years ago
popover.parentNode.removeChild(backdrop);
});
return element;
11 years ago
}());
var getPopover = function (e) {
var anchor = findPopovers(e.target);
11 years ago
if (!anchor || !anchor.hash || (anchor.hash.indexOf('/') > 0)) {
return;
}
try {
popover = document.querySelector(anchor.hash);
11 years ago
} catch (error) {
11 years ago
popover = null;
}
if (popover === null) {
11 years ago
return;
}
11 years ago
if (!popover || !popover.classList.contains('popover')) {
return;
}
return popover;
11 years ago
};
11 years ago
var showHidePopover = function (e) {
var popover = getPopover(e);
11 years ago
if (!popover) {
return;
}
popover.style.display = 'block';
popover.offsetHeight;
popover.classList.add('visible');
popover.parentNode.appendChild(backdrop);
11 years ago
};
11 years ago
window.addEventListener('touchend', showHidePopover);
11 years ago
}());
/* ========================================================================
* Ratchet: push.js v2.0.2
* http://goratchet.com/components#push
* ========================================================================
* inspired by @defunkt's jquery.pjax.js
* Copyright 2015 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
* ======================================================================== */
11 years ago
/* global _gaq: true */
!(function () {
'use strict';
var noop = function () {};
// Pushstate caching
// ==================
var isScrolling;
var maxCacheLength = 20;
var cacheMapping = sessionStorage;
var domCache = {};
11 years ago
// Change these to unquoted camelcase in the next major version bump
var transitionMap = {
11 years ago
'slide-in' : 'slide-out',
'slide-out' : 'slide-in',
fade : 'fade'
};
var bars = {
bartab : '.bar-tab',
barnav : '.bar-nav',
barfooter : '.bar-footer',
barheadersecondary : '.bar-header-secondary'
};
var cacheReplace = function (data, updates) {
PUSH.id = data.id;
11 years ago
if (updates) {
data = getCached(data.id);
}
cacheMapping[data.id] = JSON.stringify(data);
window.history.replaceState(data.id, data.title, data.url);
};
var cachePush = function () {
var id = PUSH.id;
var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]');
var cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]');
cacheBackStack.push(id);
11 years ago
while (cacheForwardStack.length) {
delete cacheMapping[cacheForwardStack.shift()];
}
while (cacheBackStack.length > maxCacheLength) {
delete cacheMapping[cacheBackStack.shift()];
}
11 years ago
if (getCached(PUSH.id).url) {
window.history.pushState(null, '', getCached(PUSH.id).url);
}
cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack);
};
var cachePop = function (id, direction) {
11 years ago
var forward = direction === 'forward';
var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]');
var cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]');
var pushStack = forward ? cacheBackStack : cacheForwardStack;
var popStack = forward ? cacheForwardStack : cacheBackStack;
11 years ago
if (PUSH.id) {
pushStack.push(PUSH.id);
}
popStack.pop();
cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack);
};
var getCached = function (id) {
return JSON.parse(cacheMapping[id] || null) || {};
};
var getTarget = function (e) {
var target = findTarget(e.target);
11 years ago
if (!target ||
e.which > 1 ||
e.metaKey ||
e.ctrlKey ||
isScrolling ||
location.protocol !== target.protocol ||
location.host !== target.host ||
!target.hash && /#/.test(target.href) ||
target.hash && target.href.replace(target.hash, '') === location.href.replace(location.hash, '') ||
target.getAttribute('data-ignore') === 'push') { return; }
return target;
};
// Main event handlers (touchend, popstate)
// ==========================================
var touchend = function (e) {
var target = getTarget(e);
11 years ago
if (!target) {
return;
}
e.preventDefault();
PUSH({
url : target.href,
hash : target.hash,
timeout : target.getAttribute('data-timeout'),
transition : target.getAttribute('data-transition')
});
};
var popstate = function (e) {
var key;
var barElement;
var activeObj;
var activeDom;
var direction;
var transition;
var transitionFrom;
var transitionFromObj;
var id = e.state;
11 years ago
if (!id || !cacheMapping[id]) {
return;
}
direction = PUSH.id < id ? 'forward' : 'back';
cachePop(id, direction);
activeObj = getCached(id);
activeDom = domCache[id];
11 years ago
if (activeObj.title) {
document.title = activeObj.title;
}
11 years ago
if (direction === 'back') {
transitionFrom = JSON.parse(direction === 'back' ? cacheMapping.cacheForwardStack : cacheMapping.cacheBackStack);
transitionFromObj = getCached(transitionFrom[transitionFrom.length - 1]);
} else {
transitionFromObj = activeObj;
}
11 years ago
if (direction === 'back' && !transitionFromObj.id) {
return (PUSH.id = id);
}
11 years ago
transition = direction === 'back' ? transitionMap[transitionFromObj.transition] : transitionFromObj.transition;
if (!activeDom) {
return PUSH({
id : activeObj.id,
url : activeObj.url,
title : activeObj.title,
timeout : activeObj.timeout,
transition : transition,
ignorePush : true
});
}
if (transitionFromObj.transition) {
activeObj = extendWithDom(activeObj, '.content', activeDom.cloneNode(true));
for (key in bars) {
11 years ago
if (bars.hasOwnProperty(key)) {
barElement = document.querySelector(bars[key]);
if (activeObj[key]) {
swapContent(activeObj[key], barElement);
} else if (barElement) {
barElement.parentNode.removeChild(barElement);
}
}
}
}
swapContent(
(activeObj.contents || activeDom).cloneNode(true),
document.querySelector('.content'),
10 years ago
transition, function () {
10 years ago
triggerStateChange();
}
);
PUSH.id = id;
document.body.offsetHeight; // force reflow to prevent scroll
};
// Core PUSH functionality
// =======================
var PUSH = function (options) {
var key;
11 years ago
var xhr = PUSH.xhr;
options.container = options.container || options.transition ? document.querySelector('.content') : document.body;
10 years ago
var isFileProtocol = /^file:/.test(window.location.protocol);
for (key in bars) {
11 years ago
if (bars.hasOwnProperty(key)) {
options[key] = options[key] || document.querySelector(bars[key]);
}
}
if (xhr && xhr.readyState < 4) {
xhr.onreadystatechange = noop;
11 years ago
xhr.abort();
}
xhr = new XMLHttpRequest();
10 years ago
if (isFileProtocol) {
xhr.open('GET', options.url, false);
} else {
xhr.open('GET', options.url, true);
xhr.setRequestHeader('X-PUSH', 'true');
10 years ago
xhr.onreadystatechange = function () {
if (options._timeout) {
clearTimeout(options._timeout);
11 years ago
}
10 years ago
if (xhr.readyState === 4) {
if (xhr.status === 200) {
success(xhr, options);
} else {
failure(options.url);
}
}
};
}
if (!PUSH.id) {
cacheReplace({
11 years ago
id : +new Date(),
url : window.location.href,
title : document.title,
timeout : options.timeout,
11 years ago
transition : options.transition
});
}
10 years ago
cacheCurrentContent();
if (options.timeout) {
options._timeout = setTimeout(function () { xhr.abort('timeout'); }, options.timeout);
}
xhr.send();
10 years ago
if (isFileProtocol) {
if (xhr.status === 0 || xhr.status === 200) {
success(xhr, options);
} else {
failure(options.url);
}
}
11 years ago
if (xhr.readyState && !options.ignorePush) {
cachePush();
}
};
11 years ago
function cacheCurrentContent () {
10 years ago
domCache[PUSH.id] = document.body.cloneNode(true);
}
// Main XHR handlers
// =================
var success = function (xhr, options) {
var key;
var barElement;
var data = parseXHR(xhr, options);
11 years ago
if (!data.contents) {
return locationReplace(options.url);
}
11 years ago
if (data.title) {
document.title = data.title;
}
if (options.transition) {
for (key in bars) {
11 years ago
if (bars.hasOwnProperty(key)) {
barElement = document.querySelector(bars[key]);
if (data[key]) {
swapContent(data[key], barElement);
} else if (barElement) {
barElement.parentNode.removeChild(barElement);
}
}
}
}
swapContent(data.contents, options.container, options.transition, function () {
cacheReplace({
11 years ago
id : options.id || +new Date(),
url : data.url,
title : data.title,
timeout : options.timeout,
transition : options.transition
}, options.id);
triggerStateChange();
});
11 years ago
if (!options.ignorePush && window._gaq) {
_gaq.push(['_trackPageview']); // google analytics
}
if (!options.hash) {
return;
}
};
var failure = function (url) {
11 years ago
throw new Error('Could not get: ' + url);
};
// PUSH helpers
// ============
var swapContent = function (swap, container, transition, complete) {
var enter;
var containerDirection;
var swapDirection;
if (!transition) {
11 years ago
if (container) {
container.innerHTML = swap.innerHTML;
} else if (swap.classList.contains('content')) {
document.body.appendChild(swap);
} else {
document.body.insertBefore(swap, document.querySelector('.content'));
}
} else {
11 years ago
enter = /in$/.test(transition);
11 years ago
if (transition === 'fade') {
container.classList.add('in');
container.classList.add('fade');
swap.classList.add('fade');
}
if (/slide/.test(transition)) {
swap.classList.add('sliding-in', enter ? 'right' : 'left');
swap.classList.add('sliding');
container.classList.add('sliding');
}
container.parentNode.insertBefore(swap, container);
}
11 years ago
if (!transition) {
11 years ago
if (complete) {
complete();
}
11 years ago
}
11 years ago
if (transition === 'fade') {
container.offsetWidth; // force reflow
container.classList.remove('in');
11 years ago
var fadeContainerEnd = function () {
10 years ago
container.removeEventListener(window.RATCHET.getTransitionEnd, fadeContainerEnd);
swap.classList.add('in');
10 years ago
swap.addEventListener(window.RATCHET.getTransitionEnd, fadeSwapEnd);
11 years ago
};
var fadeSwapEnd = function () {
10 years ago
swap.removeEventListener(window.RATCHET.getTransitionEnd, fadeSwapEnd);
container.parentNode.removeChild(container);
swap.classList.remove('fade');
swap.classList.remove('in');
11 years ago
if (complete) {
complete();
}
11 years ago
};
10 years ago
container.addEventListener(window.RATCHET.getTransitionEnd, fadeContainerEnd);
11 years ago
}
if (/slide/.test(transition)) {
11 years ago
var slideEnd = function () {
10 years ago
swap.removeEventListener(window.RATCHET.getTransitionEnd, slideEnd);
swap.classList.remove('sliding', 'sliding-in');
swap.classList.remove(swapDirection);
container.parentNode.removeChild(container);
11 years ago
if (complete) {
complete();
}
11 years ago
};
container.offsetWidth; // force reflow
swapDirection = enter ? 'right' : 'left';
containerDirection = enter ? 'left' : 'right';
container.classList.add(containerDirection);
swap.classList.remove(swapDirection);
10 years ago
swap.addEventListener(window.RATCHET.getTransitionEnd, slideEnd);
}
};
var triggerStateChange = function () {
var e = new CustomEvent('push', {
detail: { state: getCached(PUSH.id) },
bubbles: true,
cancelable: true
});
window.dispatchEvent(e);
};
var findTarget = function (target) {
var i;
var toggles = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) {
11 years ago
for (i = toggles.length; i--;) {
if (toggles[i] === target) {
return target;
}
}
}
};
var locationReplace = function (url) {
window.history.replaceState(null, '', '#');
window.location.replace(url);
};
var extendWithDom = function (obj, fragment, dom) {
var i;
11 years ago
var result = {};
11 years ago
for (i in obj) {
if (obj.hasOwnProperty(i)) {
result[i] = obj[i];
}
}
Object.keys(bars).forEach(function (key) {
var el = dom.querySelector(bars[key]);
11 years ago
if (el) {
el.parentNode.removeChild(el);
}
result[key] = el;
});
result.contents = dom.querySelector(fragment);
return result;
};
var parseXHR = function (xhr, options) {
var head;
var body;
var data = {};
var responseText = xhr.responseText;
data.url = options.url;
11 years ago
if (!responseText) {
return data;
}
if (/<html/i.test(responseText)) {
head = document.createElement('div');
body = document.createElement('div');
11 years ago
head.innerHTML = responseText.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0];
body.innerHTML = responseText.match(/<body[^>]*>([\s\S.]*)<\/body>/i)[0];
} else {
head = body = document.createElement('div');
head.innerHTML = responseText;
}
10 years ago
data.title = head.querySelector('title') || document.querySelector('title');
var text = 'innerText' in data.title ? 'innerText' : 'textContent';
data.title = data.title && data.title[text].trim();
11 years ago
if (options.transition) {
data = extendWithDom(data, '.content', body);
} else {
data.contents = body;
}
return data;
};
// Attach PUSH event handlers
// ==========================
window.addEventListener('touchstart', function () { isScrolling = false; });
11 years ago
window.addEventListener('touchmove', function () { isScrolling = true; });
window.addEventListener('touchend', touchend);
11 years ago
window.addEventListener('click', function (e) {
if (getTarget(e)) {
e.preventDefault();
}
});
window.addEventListener('popstate', popstate);
10 years ago
// TODO : Remove this line in the next major version
11 years ago
window.PUSH = PUSH;
10 years ago
window.RATCHET.push = PUSH;
11 years ago
}());
/* ========================================================================
* Ratchet: segmented-controllers.js v2.0.2
* http://goratchet.com/components#segmentedControls
* ========================================================================
* Copyright 2015 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
* ======================================================================== */
11 years ago
!(function () {
'use strict';
var getTarget = function (target) {
var i;
var segmentedControls = document.querySelectorAll('.segmented-control .control-item');
for (; target && target !== document; target = target.parentNode) {
11 years ago
for (i = segmentedControls.length; i--;) {
if (segmentedControls[i] === target) {
return target;
}
}
}
};
11 years ago
window.addEventListener('touchend', function (e) {
var activeTab;
var activeBodies;
var targetBody;
var targetTab = getTarget(e.target);
var className = 'active';
var classSelector = '.' + className;
11 years ago
if (!targetTab) {
return;
}
activeTab = targetTab.parentNode.querySelector(classSelector);
11 years ago
if (activeTab) {
activeTab.classList.remove(className);
}
targetTab.classList.add(className);
11 years ago
if (!targetTab.hash) {
return;
}
targetBody = document.querySelector(targetTab.hash);
11 years ago
if (!targetBody) {
return;
}
activeBodies = targetBody.parentNode.querySelectorAll(classSelector);
for (var i = 0; i < activeBodies.length; i++) {
activeBodies[i].classList.remove(className);
}
targetBody.classList.add(className);
});
11 years ago
window.addEventListener('click', function (e) {
if (getTarget(e.target)) {
e.preventDefault();
}
});
11 years ago
}());
11 years ago
/* ========================================================================
* Ratchet: sliders.js v2.0.2
* http://goratchet.com/components#sliders
* ========================================================================
Adapted from Brad Birdsall's swipe
* Copyright 2015 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
* ======================================================================== */
11 years ago
!(function () {
'use strict';
var pageX;
var pageY;
var slider;
var deltaX;
var deltaY;
var offsetX;
var lastSlide;
var startTime;
var resistance;
var sliderWidth;
var slideNumber;
var isScrolling;
var scrollableArea;
10 years ago
var startedMoving;
10 years ago
var transformPrefix = window.RATCHET.getBrowserCapabilities.prefix;
var transformProperty = window.RATCHET.getBrowserCapabilities.transform;
11 years ago
var getSlider = function (target) {
var i;
var sliders = document.querySelectorAll('.slider > .slide-group');
for (; target && target !== document; target = target.parentNode) {
11 years ago
for (i = sliders.length; i--;) {
if (sliders[i] === target) {
return target;
}
}
}
11 years ago
};
var getScroll = function () {
11 years ago
var translate3d = slider.style[transformProperty].match(/translate3d\(([^,]*)/);
var ret = translate3d ? translate3d[1] : 0;
return parseInt(ret, 10);
};
var setSlideNumber = function (offset) {
var round = offset ? (deltaX < 0 ? 'ceil' : 'floor') : 'round';
slideNumber = Math[round](getScroll() / (scrollableArea / slider.children.length));
slideNumber += offset;
slideNumber = Math.min(slideNumber, 0);
slideNumber = Math.max(-(slider.children.length - 1), slideNumber);
11 years ago
};
var onTouchStart = function (e) {
slider = getSlider(e.target);
11 years ago
if (!slider) {
return;
}
var firstItem = slider.querySelector('.slide');
scrollableArea = firstItem.offsetWidth * slider.children.length;
isScrolling = undefined;
sliderWidth = slider.offsetWidth;
resistance = 1;
lastSlide = -(slider.children.length - 1);
11 years ago
startTime = +new Date();
pageX = e.touches[0].pageX;
pageY = e.touches[0].pageY;
11 years ago
deltaX = 0;
deltaY = 0;
setSlideNumber(0);
11 years ago
slider.style[transformPrefix + 'transition-duration'] = 0;
};
var onTouchMove = function (e) {
11 years ago
if (e.touches.length > 1 || !slider) {
return; // Exit if a pinch || no slider
}
10 years ago
// adjust the starting position if we just started to avoid jumpage
if (!startedMoving) {
pageX += (e.touches[0].pageX - pageX) - 1;
}
deltaX = e.touches[0].pageX - pageX;
deltaY = e.touches[0].pageY - pageY;
pageX = e.touches[0].pageX;
pageY = e.touches[0].pageY;
10 years ago
if (typeof isScrolling === 'undefined' && startedMoving) {
isScrolling = Math.abs(deltaY) > Math.abs(deltaX);
}
11 years ago
if (isScrolling) {
return;
}
offsetX = (deltaX / resistance) + getScroll();
e.preventDefault();
11 years ago
resistance = slideNumber === 0 && deltaX > 0 ? (pageX / sliderWidth) + 1.25 :
slideNumber === lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1;
11 years ago
slider.style[transformProperty] = 'translate3d(' + offsetX + 'px,0,0)';
10 years ago
// started moving
startedMoving = true;
};
var onTouchEnd = function (e) {
11 years ago
if (!slider || isScrolling) {
return;
}
10 years ago
// we're done moving
startedMoving = false;
11 years ago
setSlideNumber((+new Date()) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0);
offsetX = slideNumber * sliderWidth;
11 years ago
slider.style[transformPrefix + 'transition-duration'] = '.2s';
slider.style[transformProperty] = 'translate3d(' + offsetX + 'px,0,0)';
e = new CustomEvent('slide', {
detail: { slideNumber: Math.abs(slideNumber) },
bubbles: true,
cancelable: true
});
slider.parentNode.dispatchEvent(e);
};
window.addEventListener('touchstart', onTouchStart);
window.addEventListener('touchmove', onTouchMove);
window.addEventListener('touchend', onTouchEnd);
11 years ago
}());
/* ========================================================================
* Ratchet: toggles.js v2.0.2
* http://goratchet.com/components#toggles
* ========================================================================
Adapted from Brad Birdsall's swipe
* Copyright 2015 Connor Sears
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
* ======================================================================== */
11 years ago
!(function () {
'use strict';
var start = {};
var touchMove = false;
var distanceX = false;
var toggle = false;
10 years ago
var transformProperty = window.RATCHET.getBrowserCapabilities.transform;
11 years ago
var findToggle = function (target) {
var i;
var toggles = document.querySelectorAll('.toggle');
for (; target && target !== document; target = target.parentNode) {
11 years ago
for (i = toggles.length; i--;) {
if (toggles[i] === target) {
return target;
}
}
}
11 years ago
};
window.addEventListener('touchstart', function (e) {
e = e.originalEvent || e;
toggle = findToggle(e.target);
11 years ago
if (!toggle) {
return;
}
var handle = toggle.querySelector('.toggle-handle');
var toggleWidth = toggle.clientWidth;
var handleWidth = handle.clientWidth;
var offset = toggle.classList.contains('active') ? (toggleWidth - handleWidth) : 0;
start = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY };
touchMove = false;
});
window.addEventListener('touchmove', function (e) {
e = e.originalEvent || e;
11 years ago
if (e.touches.length > 1) {
return; // Exit if a pinch
}
11 years ago
if (!toggle) {
return;
}
var handle = toggle.querySelector('.toggle-handle');
var current = e.touches[0];
var toggleWidth = toggle.clientWidth;
var handleWidth = handle.clientWidth;
var offset = toggleWidth - handleWidth;
touchMove = true;
distanceX = current.pageX - start.pageX;
11 years ago
if (Math.abs(distanceX) < Math.abs(current.pageY - start.pageY)) {
return;
}
e.preventDefault();
11 years ago
if (distanceX < 0) {
11 years ago
return (handle.style[transformProperty] = 'translate3d(0,0,0)');
11 years ago
}
if (distanceX > offset) {
11 years ago
return (handle.style[transformProperty] = 'translate3d(' + offset + 'px,0,0)');
11 years ago
}
11 years ago
handle.style[transformProperty] = 'translate3d(' + distanceX + 'px,0,0)';
11 years ago
toggle.classList[(distanceX > (toggleWidth / 2 - handleWidth / 2)) ? 'add' : 'remove']('active');
});
window.addEventListener('touchend', function (e) {
11 years ago
if (!toggle) {
return;
}
var handle = toggle.querySelector('.toggle-handle');
var toggleWidth = toggle.clientWidth;
var handleWidth = handle.clientWidth;
var offset = (toggleWidth - handleWidth);
11 years ago
var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth / 2 - handleWidth / 2)));
11 years ago
if (slideOn) {
11 years ago
handle.style[transformProperty] = 'translate3d(' + offset + 'px,0,0)';
11 years ago
} else {
11 years ago
handle.style[transformProperty] = 'translate3d(0,0,0)';
11 years ago
}
toggle.classList[slideOn ? 'add' : 'remove']('active');
e = new CustomEvent('toggle', {
11 years ago
detail: {
isActive: slideOn
},
bubbles: true,
cancelable: true
});
toggle.dispatchEvent(e);
touchMove = false;
toggle = false;
});
11 years ago
}());