playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

more valid (jshint) code

pull/179/head
Simon Waldherr 12 years ago
parent
5ae2033f5b
commit
c0d00ce2ca
7 changed files with 452 additions and 323 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 384
      dist/ratchet.js
  2. 15
      lib/js/modals.js
  3. 32
      lib/js/popovers.js
  4. 210
      lib/js/push.js
  5. 39
      lib/js/segmented-controllers.js
  6. 28
      lib/js/sliders.js
  7. 59
      lib/js/toggles.js

384
dist/ratchet.js vendored
Unescape View File

@ -13,37 +13,51 @@
* ---------------------------------- */ * ---------------------------------- */
!function () { !function () {
"use strict";
var findModals = function (target) { var findModals = function (target) {
var i; var i;
var modals = document.querySelectorAll('a'); var modals = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) { for (; target && target !== document; target = target.parentNode) {
for (i = modals.length; i--;) { if (modals[i] === target) return target; } for (i = modals.length; i--;) {
if (modals[i] === target) {
return target;
}
}
} }
}; };
var getModal = function (event) { var getModal = function (event) {
var modalToggle = findModals(event.target); var modalToggle = findModals(event.target);
if (modalToggle && modalToggle.hash) return document.querySelector(modalToggle.hash); if (modalToggle && modalToggle.hash) {
return document.querySelector(modalToggle.hash);
}
}; };
window.addEventListener('touchend', function (event) { window.addEventListener('touchend', function (event) {
var modal = getModal(event); var modal = getModal(event);
if (modal) modal.classList.toggle('active'); if (modal) {
modal.classList.toggle('active');
}
}); });
}();/* ---------------------------------- }();
/* ----------------------------------
* POPOVER v1.0.0 * POPOVER v1.0.0
* Licensed under The MIT License * Licensed under The MIT License
* http://opensource.org/licenses/MIT * http://opensource.org/licenses/MIT
* ---------------------------------- */ * ---------------------------------- */
!function () { !function () {
"use strict";
var popover; var popover;
var findPopovers = function (target) { var findPopovers = function (target) {
var i, popovers = document.querySelectorAll('a'); var i, popovers = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) { for (; target && target !== document; target = target.parentNode) {
for (i = popovers.length; i--;) { if (popovers[i] === target) return target; } for (i = popovers.length; i--;) {
if (popovers[i] === target) {
return target;
}
}
} }
}; };
@ -51,7 +65,7 @@
document.body.removeChild(backdrop); document.body.removeChild(backdrop);
popover.style.display = 'none'; popover.style.display = 'none';
popover.removeEventListener('webkitTransitionEnd', onPopoverHidden); popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
} };
var backdrop = function () { var backdrop = function () {
var element = document.createElement('div'); var element = document.createElement('div');
@ -69,28 +83,38 @@
var getPopover = function (e) { var getPopover = function (e) {
var anchor = findPopovers(e.target); var anchor = findPopovers(e.target);
if (!anchor || !anchor.hash) return; if (!anchor || !anchor.hash) {
return;
}
popover = document.querySelector(anchor.hash); popover = document.querySelector(anchor.hash);
if (!popover || !popover.classList.contains('popover')) return; if (!popover || !popover.classList.contains('popover')) {
return;
}
return popover; return popover;
} };
window.addEventListener('touchend', function (e) { window.addEventListener('touchend', function (e) {
var popover = getPopover(e); var popover = getPopover(e);
if (!popover) return; if (!popover) {
return;
}
popover.style.display = 'block'; popover.style.display = 'block';
popover.offsetHeight; //popover.offsetHeight;
popover.classList.add('visible'); popover.classList.add('visible');
popover.parentNode.appendChild(backdrop); popover.parentNode.appendChild(backdrop);
}); });
window.addEventListener('click', function (e) { if (getPopover(e)) e.preventDefault(); }); window.addEventListener('click', function (e) {
if (getPopover(e)) {
e.preventDefault();
}
});
}(); }();
/* ---------------------------------- /* ----------------------------------
@ -101,47 +125,51 @@
* ---------------------------------- */ * ---------------------------------- */
!function () { !function () {
"use strict";
var noop = function () {}; var noop = function () {};
// Pushstate cacheing // Pushstate cacheing
// ================== // ==================
var isScrolling; var isScrolling,
var maxCacheLength = 20; maxCacheLength = 20,
var cacheMapping = sessionStorage; cacheMapping = sessionStorage,
var domCache = {}; domCache = {},
var transitionMap = { transitionMap = {
'slide-in' : 'slide-out', 'slide-in' : 'slide-out',
'slide-out' : 'slide-in', 'slide-out' : 'slide-in',
'fade' : 'fade' 'fade' : 'fade'
}; },
var bars = { bars = {
bartab : '.bar-tab', bartab : '.bar-tab',
bartitle : '.bar-title', bartitle : '.bar-title',
barfooter : '.bar-footer', barfooter : '.bar-footer',
barheadersecondary : '.bar-header-secondary' barheadersecondary : '.bar-header-secondary'
} };
var cacheReplace = function (data, updates) { var cacheReplace = function (data, updates) {
PUSH.id = data.id; PUSH.id = data.id;
if (updates) data = getCached(data.id); if (updates) {
data = getCached(data.id);
}
cacheMapping[data.id] = JSON.stringify(data); cacheMapping[data.id] = JSON.stringify(data);
window.history.replaceState(data.id, data.title, data.url); window.history.replaceState(data.id, data.title, data.url);
domCache[data.id] = document.body.cloneNode(true); domCache[data.id] = document.body.cloneNode(true);
}; };
var cachePush = function () { var cachePush = function () {
var id = PUSH.id; var id = PUSH.id,
cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]'),
var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]'); cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]');
var cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]');
cacheBackStack.push(id); cacheBackStack.push(id);
while (cacheForwardStack.length) delete cacheMapping[cacheForwardStack.shift()]; while (cacheForwardStack.length) {
while (cacheBackStack.length > maxCacheLength) delete cacheMapping[cacheBackStack.shift()]; delete cacheMapping[cacheForwardStack.shift()];
}
while (cacheBackStack.length > maxCacheLength) {
delete cacheMapping[cacheBackStack.shift()];
}
window.history.pushState(null, '', cacheMapping[PUSH.id].url); window.history.pushState(null, '', cacheMapping[PUSH.id].url);
@ -150,13 +178,15 @@
}; };
var cachePop = function (id, direction) { var cachePop = function (id, direction) {
var forward = direction == 'forward'; var forward = direction === 'forward',
var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]'); cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]'),
var cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]'); cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]'),
var pushStack = forward ? cacheBackStack : cacheForwardStack; pushStack = forward ? cacheBackStack : cacheForwardStack,
var popStack = forward ? cacheForwardStack : cacheBackStack; popStack = forward ? cacheForwardStack : cacheBackStack;
if (PUSH.id) pushStack.push(PUSH.id); if (PUSH.id) {
pushStack.push(PUSH.id);
}
popStack.pop(); popStack.pop();
cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack); cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
@ -170,18 +200,9 @@
var getTarget = function (e) { var getTarget = function (e) {
var target = findTarget(e.target); var target = findTarget(e.target);
if ( 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')) {
! target return;
|| 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; return target;
}; };
@ -193,7 +214,9 @@
var touchend = function (e) { var touchend = function (e) {
var target = getTarget(e); var target = getTarget(e);
if (!target) return; if (!target) {
return;
}
e.preventDefault(); e.preventDefault();
@ -206,37 +229,43 @@
}; };
var popstate = function (e) { var popstate = function (e) {
var key; var key,
var barElement; barElement,
var activeObj; activeObj,
var activeDom; activeDom,
var direction; direction,
var transition; transition,
var transitionFrom; transitionFrom,
var transitionFromObj; transitionFromObj,
var id = e.state; id = e.state;
if (!id || !cacheMapping[id]) return; if (!id || !cacheMapping[id]) {
return;
}
direction = PUSH.id < id ? 'forward' : 'back'; direction = (PUSH.id < id) ? 'forward' : 'back';
cachePop(id, direction); cachePop(id, direction);
activeObj = getCached(id); activeObj = getCached(id);
activeDom = domCache[id]; activeDom = domCache[id];
if (activeObj.title) document.title = activeObj.title; if (activeObj.title) {
document.title = activeObj.title;
}
if (direction == 'back') { if (direction === 'back') {
transitionFrom = JSON.parse(direction == 'back' ? cacheMapping.cacheForwardStack : cacheMapping.cacheBackStack); transitionFrom = JSON.parse((direction === 'back') ? cacheMapping.cacheForwardStack : cacheMapping.cacheBackStack);
transitionFromObj = getCached(transitionFrom[transitionFrom.length - 1]); transitionFromObj = getCached(transitionFrom[transitionFrom.length - 1]);
} else { } else {
transitionFromObj = activeObj; transitionFromObj = activeObj;
} }
if (direction == 'back' && !transitionFromObj.id) return PUSH.id = id; if (direction === 'back' && !transitionFromObj.id) {
return id;
}
transition = direction == 'back' ? transitionMap[transitionFromObj.transition] : transitionFromObj.transition; transition = (direction === 'back') ? transitionMap[transitionFromObj.transition] : transitionFromObj.transition;
if (!activeDom) { if (!activeDom) {
return PUSH({ return PUSH({
@ -252,9 +281,13 @@
if (transitionFromObj.transition) { if (transitionFromObj.transition) {
activeObj = extendWithDom(activeObj, '.content', activeDom.cloneNode(true)); activeObj = extendWithDom(activeObj, '.content', activeDom.cloneNode(true));
for (key in bars) { for (key in bars) {
barElement = document.querySelector(bars[key]) barElement = document.querySelector(bars[key]);
if (activeObj[key]) swapContent(activeObj[key], barElement); if (activeObj[key]) {
else if (barElement) barElement.parentNode.removeChild(barElement); swapContent(activeObj[key], barElement);
}
else if (barElement) {
barElement.parentNode.removeChild(barElement);
}
} }
} }
@ -274,9 +307,9 @@
// ======================= // =======================
var PUSH = function (options) { var PUSH = function (options) {
var key; var key,
var data = {}; data = {},
var xhr = PUSH.xhr; xhr = PUSH.xhr;
options.container = options.container || options.transition ? document.querySelector('.content') : document.body; options.container = options.container || options.transition ? document.querySelector('.content') : document.body;
@ -295,7 +328,9 @@
xhr.onreadystatechange = function () { xhr.onreadystatechange = function () {
if (options._timeout) clearTimeout(options._timeout); if (options._timeout) clearTimeout(options._timeout);
if (xhr.readyState == 4) xhr.status == 200 ? success(xhr, options) : failure(options.url); if (xhr.readyState === 4) {
(xhr.status === 200) ? success(xhr, options) : failure(options.url);
}
}; };
if (!PUSH.id) { if (!PUSH.id) {
@ -362,9 +397,29 @@
// ============ // ============
var swapContent = function (swap, container, transition, complete) { var swapContent = function (swap, container, transition, complete) {
var enter; "use strict";
var containerDirection; function fadeContainerEnd() {
var swapDirection; container.removeEventListener('webkitTransitionEnd', fadeContainerEnd);
swap.classList.add('in');
swap.addEventListener('webkitTransitionEnd', fadeSwapEnd);
}
function fadeSwapEnd () {
swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd);
container.parentNode.removeChild(container);
swap.classList.remove('fade');
swap.classList.remove('in');
complete && complete();
}
function slideEnd() {
swap.removeEventListener('webkitTransitionEnd', slideEnd);
swap.classList.remove('slide');
swap.classList.remove(swapDirection);
container.parentNode.removeChild(container);
complete && complete();
}
var enter,
containerDirection,
swapDirection;
if (!transition) { if (!transition) {
if (container) container.innerHTML = swap.innerHTML; if (container) container.innerHTML = swap.innerHTML;
@ -373,7 +428,7 @@
} else { } else {
enter = /in$/.test(transition); enter = /in$/.test(transition);
if (transition == 'fade') { if (transition === 'fade') {
container.classList.add('in'); container.classList.add('in');
container.classList.add('fade'); container.classList.add('fade');
swap.classList.add('fade'); swap.classList.add('fade');
@ -388,25 +443,14 @@
container.parentNode.insertBefore(swap, container); container.parentNode.insertBefore(swap, container);
} }
if (!transition) complete && complete(); if (!transition) {
complete && complete();
}
if (transition == 'fade') { if (transition === 'fade') {
container.offsetWidth; // force reflow container.offsetWidth; // force reflow
container.classList.remove('in'); container.classList.remove('in');
container.addEventListener('webkitTransitionEnd', fadeContainerEnd); container.addEventListener('webkitTransitionEnd', fadeContainerEnd);
function fadeContainerEnd() {
container.removeEventListener('webkitTransitionEnd', fadeContainerEnd);
swap.classList.add('in');
swap.addEventListener('webkitTransitionEnd', fadeSwapEnd);
}
function fadeSwapEnd () {
swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd);
container.parentNode.removeChild(container);
swap.classList.remove('fade');
swap.classList.remove('in');
complete && complete();
}
} }
if (/slide/.test(transition)) { if (/slide/.test(transition)) {
@ -416,14 +460,6 @@
container.classList.add(containerDirection); container.classList.add(containerDirection);
swap.classList.remove(swapDirection); swap.classList.remove(swapDirection);
swap.addEventListener('webkitTransitionEnd', slideEnd); swap.addEventListener('webkitTransitionEnd', slideEnd);
function slideEnd() {
swap.removeEventListener('webkitTransitionEnd', slideEnd);
swap.classList.remove('slide');
swap.classList.remove(swapDirection);
container.parentNode.removeChild(container);
complete && complete();
}
} }
}; };
@ -457,7 +493,9 @@
var i; var i;
var result = {}; var result = {};
for (i in obj) result[i] = obj[i]; for (i = 0; i < obj.length; i += 1) {
result[i] = obj[i];
}
Object.keys(bars).forEach(function (key) { Object.keys(bars).forEach(function (key) {
var el = dom.querySelector(bars[key]); var el = dom.querySelector(bars[key]);
@ -471,14 +509,16 @@
}; };
var parseXHR = function (xhr, options) { var parseXHR = function (xhr, options) {
var head; var head,
var body; body,
var data = {}; data = {},
var responseText = xhr.responseText; responseText = xhr.responseText;
data.url = options.url; data.url = options.url;
if (!responseText) return data; if (!responseText) {
return data;
}
if (/<html/i.test(responseText)) { if (/<html/i.test(responseText)) {
head = document.createElement('div'); head = document.createElement('div');
@ -493,8 +533,11 @@
data.title = head.querySelector('title'); data.title = head.querySelector('title');
data.title = data.title && data.title.innerText.trim(); data.title = data.title && data.title.innerText.trim();
if (options.transition) data = extendWithDom(data, '.content', body); if (options.transition) {
else data.contents = body; data = extendWithDom(data, '.content', body);
} else {
data.contents = body;
}
return data; return data;
}; };
@ -509,13 +552,15 @@
window.addEventListener('click', function (e) { if (getTarget(e)) e.preventDefault(); }); window.addEventListener('click', function (e) { if (getTarget(e)) e.preventDefault(); });
window.addEventListener('popstate', popstate); window.addEventListener('popstate', popstate);
}();/* ---------------------------------- }();
/* ----------------------------------
* TABS v1.0.0 * TABS v1.0.0
* Licensed under The MIT License * Licensed under The MIT License
* http://opensource.org/licenses/MIT * http://opensource.org/licenses/MIT
* ---------------------------------- */ * ---------------------------------- */
!function () { !function () {
"use strict";
var getTarget = function (target) { var getTarget = function (target) {
var i, popovers = document.querySelectorAll('.segmented-controller li a'); var i, popovers = document.querySelectorAll('.segmented-controller li a');
for (; target && target !== document; target = target.parentNode) { for (; target && target !== document; target = target.parentNode) {
@ -524,34 +569,44 @@
}; };
window.addEventListener("touchend", function (e) { window.addEventListener("touchend", function (e) {
var activeTab; var activeTab,
var activeBody; activeBody,
var targetBody; targetBody,
var targetTab; targetTab,
var className = 'active'; className = 'active',
var classSelector = '.' + className; classSelector = '.' + className,
var targetAnchor = getTarget(e.target); targetAnchor = getTarget(e.target);
if (!targetAnchor) return; if (!targetAnchor) {
return;
}
targetTab = targetAnchor.parentNode; targetTab = targetAnchor.parentNode;
activeTab = targetTab.parentNode.querySelector(classSelector); activeTab = targetTab.parentNode.querySelector(classSelector);
if (activeTab) activeTab.classList.remove(className); if (activeTab) {
activeTab.classList.remove(className);
}
targetTab.classList.add(className); targetTab.classList.add(className);
if (!targetAnchor.hash) return; if (!targetAnchor.hash) {
return;
}
targetBody = document.querySelector(targetAnchor.hash); targetBody = document.querySelector(targetAnchor.hash);
if (!targetBody) return; if (!targetBody) {
return;
}
activeBody = targetBody.parentNode.querySelector(classSelector); activeBody = targetBody.parentNode.querySelector(classSelector);
if (activeBody) activeBody.classList.remove(className); if (activeBody) {
activeBody.classList.remove(className);
}
targetBody.classList.add(className) targetBody.classList.add(className);
}); });
window.addEventListener('click', function (e) { if (getTarget(e.target)) e.preventDefault(); }); window.addEventListener('click', function (e) { if (getTarget(e.target)) e.preventDefault(); });
@ -563,20 +618,20 @@
* ---------------------------------- */ * ---------------------------------- */
!function () { !function () {
"use strict";
var pageX; var pageX,
var pageY; pageY,
var slider; slider,
var deltaX; deltaX,
var deltaY; deltaY,
var offsetX; offsetX,
var lastSlide; lastSlide,
var startTime; startTime,
var resistance; resistance,
var sliderWidth; sliderWidth,
var slideNumber; slideNumber,
var isScrolling; isScrolling,
var scrollableArea; scrollableArea;
var getSlider = function (target) { var getSlider = function (target) {
var i, sliders = document.querySelectorAll('.slider ul'); var i, sliders = document.querySelectorAll('.slider ul');
@ -677,10 +732,10 @@
!function () { !function () {
var start = {}; var start = {},
var touchMove = false; touchMove = false,
var distanceX = false; distanceX = false,
var toggle = false; toggle = false;
var findToggle = function (target) { var findToggle = function (target) {
var i, toggles = document.querySelectorAll('.toggle'); var i, toggles = document.querySelectorAll('.toggle');
@ -694,12 +749,14 @@
toggle = findToggle(e.target); toggle = findToggle(e.target);
if (!toggle) return; if (!toggle) {
return;
}
var handle = toggle.querySelector('.toggle-handle'); var handle = toggle.querySelector('.toggle-handle'),
var toggleWidth = toggle.offsetWidth; toggleWidth = toggle.offsetWidth,
var handleWidth = handle.offsetWidth; handleWidth = handle.offsetWidth,
var offset = toggle.classList.contains('active') ? toggleWidth - handleWidth : 0; offset = toggle.classList.contains('active') ? (toggleWidth - handleWidth) : 0;
start = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY }; start = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY };
touchMove = false; touchMove = false;
@ -715,21 +772,27 @@
if (!toggle) return; if (!toggle) return;
var handle = toggle.querySelector('.toggle-handle'); var handle = toggle.querySelector('.toggle-handle'),
var current = e.touches[0]; current = e.touches[0],
var toggleWidth = toggle.offsetWidth; toggleWidth = toggle.offsetWidth,
var handleWidth = handle.offsetWidth; handleWidth = handle.offsetWidth,
var offset = toggleWidth - handleWidth; offset = toggleWidth - handleWidth;
touchMove = true; touchMove = true;
distanceX = current.pageX - start.pageX; distanceX = current.pageX - start.pageX;
if (Math.abs(distanceX) < Math.abs(current.pageY - start.pageY)) return; if (Math.abs(distanceX) < Math.abs(current.pageY - start.pageY)) {
return;
}
e.preventDefault(); e.preventDefault();
if (distanceX < 0) return handle.style.webkitTransform = 'translate3d(0,0,0)'; if (distanceX < 0) {
if (distanceX > offset) return handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)'; return handle.style.webkitTransform = 'translate3d(0,0,0)';
}
if (distanceX > offset) {
return handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
}
handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)'; handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)';
@ -739,14 +802,17 @@
window.addEventListener('touchend', function (e) { window.addEventListener('touchend', function (e) {
if (!toggle) return; if (!toggle) return;
var handle = toggle.querySelector('.toggle-handle'); var handle = toggle.querySelector('.toggle-handle'),
var toggleWidth = toggle.offsetWidth; toggleWidth = toggle.offsetWidth,
var handleWidth = handle.offsetWidth; handleWidth = handle.offsetWidth,
var offset = toggleWidth - handleWidth; offset = toggleWidth - handleWidth,
var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth/2 - handleWidth/2))); slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth/2 - handleWidth/2)));
if (slideOn) handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)'; if (slideOn) {
else handle.style.webkitTransform = 'translate3d(0,0,0)'; handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
} else {
handle.style.webkitTransform = 'translate3d(0,0,0)';
}
toggle.classList[slideOn ? 'add' : 'remove']('active'); toggle.classList[slideOn ? 'add' : 'remove']('active');

15
lib/js/modals.js
Unescape View File

@ -5,21 +5,30 @@
* ---------------------------------- */ * ---------------------------------- */
!function () { !function () {
"use strict";
var findModals = function (target) { var findModals = function (target) {
var i; var i;
var modals = document.querySelectorAll('a'); var modals = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) { for (; target && target !== document; target = target.parentNode) {
for (i = modals.length; i--;) { if (modals[i] === target) return target; } for (i = modals.length; i--;) {
if (modals[i] === target) {
return target;
}
}
} }
}; };
var getModal = function (event) { var getModal = function (event) {
var modalToggle = findModals(event.target); var modalToggle = findModals(event.target);
if (modalToggle && modalToggle.hash) return document.querySelector(modalToggle.hash); if (modalToggle && modalToggle.hash) {
return document.querySelector(modalToggle.hash);
}
}; };
window.addEventListener('touchend', function (event) { window.addEventListener('touchend', function (event) {
var modal = getModal(event); var modal = getModal(event);
if (modal) modal.classList.toggle('active'); if (modal) {
modal.classList.toggle('active');
}
}); });
}(); }();

32
lib/js/popovers.js
Unescape View File

@ -5,13 +5,17 @@
* ---------------------------------- */ * ---------------------------------- */
!function () { !function () {
"use strict";
var popover; var popover;
var findPopovers = function (target) { var findPopovers = function (target) {
var i, popovers = document.querySelectorAll('a'); var i, popovers = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) { for (; target && target !== document; target = target.parentNode) {
for (i = popovers.length; i--;) { if (popovers[i] === target) return target; } for (i = popovers.length; i--;) {
if (popovers[i] === target) {
return target;
}
}
} }
}; };
@ -19,7 +23,7 @@
document.body.removeChild(backdrop); document.body.removeChild(backdrop);
popover.style.display = 'none'; popover.style.display = 'none';
popover.removeEventListener('webkitTransitionEnd', onPopoverHidden); popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
} };
var backdrop = function () { var backdrop = function () {
var element = document.createElement('div'); var element = document.createElement('div');
@ -37,27 +41,37 @@
var getPopover = function (e) { var getPopover = function (e) {
var anchor = findPopovers(e.target); var anchor = findPopovers(e.target);
if (!anchor || !anchor.hash) return; if (!anchor || !anchor.hash) {
return;
}
popover = document.querySelector(anchor.hash); popover = document.querySelector(anchor.hash);
if (!popover || !popover.classList.contains('popover')) return; if (!popover || !popover.classList.contains('popover')) {
return;
}
return popover; return popover;
} };
window.addEventListener('touchend', function (e) { window.addEventListener('touchend', function (e) {
var popover = getPopover(e); var popover = getPopover(e);
if (!popover) return; if (!popover) {
return;
}
popover.style.display = 'block'; popover.style.display = 'block';
popover.offsetHeight; //popover.offsetHeight;
popover.classList.add('visible'); popover.classList.add('visible');
popover.parentNode.appendChild(backdrop); popover.parentNode.appendChild(backdrop);
}); });
window.addEventListener('click', function (e) { if (getPopover(e)) e.preventDefault(); }); window.addEventListener('click', function (e) {
if (getPopover(e)) {
e.preventDefault();
}
});
}(); }();

210
lib/js/push.js
Unescape View File

@ -6,24 +6,22 @@
* ---------------------------------- */ * ---------------------------------- */
!function () { !function () {
"use strict";
var noop = function () {}; var noop = function () {};
// Pushstate cacheing // Pushstate cacheing
// ================== // ==================
var isScrolling; var isScrolling,
var maxCacheLength = 20; maxCacheLength = 20,
var cacheMapping = sessionStorage; cacheMapping = sessionStorage,
var domCache = {}; domCache = {},
var transitionMap = { transitionMap = {
'slide-in' : 'slide-out', 'slide-in' : 'slide-out',
'slide-out' : 'slide-in', 'slide-out' : 'slide-in',
'fade' : 'fade' 'fade' : 'fade'
}; },
bars = {
var bars = {
bartab : '.bar-tab', bartab : '.bar-tab',
bartitle : '.bar-title', bartitle : '.bar-title',
barfooter : '.bar-footer', barfooter : '.bar-footer',
@ -32,22 +30,27 @@
var cacheReplace = function (data, updates) { var cacheReplace = function (data, updates) {
PUSH.id = data.id; PUSH.id = data.id;
if (updates) data = getCached(data.id); if (updates) {
data = getCached(data.id);
}
cacheMapping[data.id] = JSON.stringify(data); cacheMapping[data.id] = JSON.stringify(data);
window.history.replaceState(data.id, data.title, data.url); window.history.replaceState(data.id, data.title, data.url);
domCache[data.id] = document.body.cloneNode(true); domCache[data.id] = document.body.cloneNode(true);
}; };
var cachePush = function () { var cachePush = function () {
var id = PUSH.id; var id = PUSH.id,
cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]'),
var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]'); cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]');
var cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]');
cacheBackStack.push(id); cacheBackStack.push(id);
while (cacheForwardStack.length) delete cacheMapping[cacheForwardStack.shift()]; while (cacheForwardStack.length) {
while (cacheBackStack.length > maxCacheLength) delete cacheMapping[cacheBackStack.shift()]; delete cacheMapping[cacheForwardStack.shift()];
}
while (cacheBackStack.length > maxCacheLength) {
delete cacheMapping[cacheBackStack.shift()];
}
window.history.pushState(null, '', cacheMapping[PUSH.id].url); window.history.pushState(null, '', cacheMapping[PUSH.id].url);
@ -56,13 +59,15 @@
}; };
var cachePop = function (id, direction) { var cachePop = function (id, direction) {
var forward = direction == 'forward'; var forward = direction === 'forward',
var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]'); cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]'),
var cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]'); cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]'),
var pushStack = forward ? cacheBackStack : cacheForwardStack; pushStack = forward ? cacheBackStack : cacheForwardStack,
var popStack = forward ? cacheForwardStack : cacheBackStack; popStack = forward ? cacheForwardStack : cacheBackStack;
if (PUSH.id) pushStack.push(PUSH.id); if (PUSH.id) {
pushStack.push(PUSH.id);
}
popStack.pop(); popStack.pop();
cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack); cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
@ -76,18 +81,9 @@
var getTarget = function (e) { var getTarget = function (e) {
var target = findTarget(e.target); var target = findTarget(e.target);
if ( 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')) {
! target return;
|| 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; return target;
}; };
@ -99,7 +95,9 @@
var touchend = function (e) { var touchend = function (e) {
var target = getTarget(e); var target = getTarget(e);
if (!target) return; if (!target) {
return;
}
e.preventDefault(); e.preventDefault();
@ -112,37 +110,43 @@
}; };
var popstate = function (e) { var popstate = function (e) {
var key; var key,
var barElement; barElement,
var activeObj; activeObj,
var activeDom; activeDom,
var direction; direction,
var transition; transition,
var transitionFrom; transitionFrom,
var transitionFromObj; transitionFromObj,
var id = e.state; id = e.state;
if (!id || !cacheMapping[id]) return; if (!id || !cacheMapping[id]) {
return;
}
direction = PUSH.id < id ? 'forward' : 'back'; direction = (PUSH.id < id) ? 'forward' : 'back';
cachePop(id, direction); cachePop(id, direction);
activeObj = getCached(id); activeObj = getCached(id);
activeDom = domCache[id]; activeDom = domCache[id];
if (activeObj.title) document.title = activeObj.title; if (activeObj.title) {
document.title = activeObj.title;
}
if (direction == 'back') { if (direction === 'back') {
transitionFrom = JSON.parse(direction == 'back' ? cacheMapping.cacheForwardStack : cacheMapping.cacheBackStack); transitionFrom = JSON.parse((direction === 'back') ? cacheMapping.cacheForwardStack : cacheMapping.cacheBackStack);
transitionFromObj = getCached(transitionFrom[transitionFrom.length - 1]); transitionFromObj = getCached(transitionFrom[transitionFrom.length - 1]);
} else { } else {
transitionFromObj = activeObj; transitionFromObj = activeObj;
} }
if (direction == 'back' && !transitionFromObj.id) return PUSH.id = id; if (direction === 'back' && !transitionFromObj.id) {
return id;
}
transition = direction == 'back' ? transitionMap[transitionFromObj.transition] : transitionFromObj.transition; transition = (direction === 'back') ? transitionMap[transitionFromObj.transition] : transitionFromObj.transition;
if (!activeDom) { if (!activeDom) {
return PUSH({ return PUSH({
@ -158,9 +162,13 @@
if (transitionFromObj.transition) { if (transitionFromObj.transition) {
activeObj = extendWithDom(activeObj, '.content', activeDom.cloneNode(true)); activeObj = extendWithDom(activeObj, '.content', activeDom.cloneNode(true));
for (key in bars) { for (key in bars) {
barElement = document.querySelector(bars[key]) barElement = document.querySelector(bars[key]);
if (activeObj[key]) swapContent(activeObj[key], barElement); if (activeObj[key]) {
else if (barElement) barElement.parentNode.removeChild(barElement); swapContent(activeObj[key], barElement);
}
else if (barElement) {
barElement.parentNode.removeChild(barElement);
}
} }
} }
@ -180,9 +188,9 @@
// ======================= // =======================
var PUSH = function (options) { var PUSH = function (options) {
var key; var key,
var data = {}; data = {},
var xhr = PUSH.xhr; xhr = PUSH.xhr;
options.container = options.container || options.transition ? document.querySelector('.content') : document.body; options.container = options.container || options.transition ? document.querySelector('.content') : document.body;
@ -201,7 +209,9 @@
xhr.onreadystatechange = function () { xhr.onreadystatechange = function () {
if (options._timeout) clearTimeout(options._timeout); if (options._timeout) clearTimeout(options._timeout);
if (xhr.readyState == 4) xhr.status == 200 ? success(xhr, options) : failure(options.url); if (xhr.readyState === 4) {
(xhr.status === 200) ? success(xhr, options) : failure(options.url);
}
}; };
if (!PUSH.id) { if (!PUSH.id) {
@ -268,9 +278,29 @@
// ============ // ============
var swapContent = function (swap, container, transition, complete) { var swapContent = function (swap, container, transition, complete) {
var enter; "use strict";
var containerDirection; function fadeContainerEnd() {
var swapDirection; container.removeEventListener('webkitTransitionEnd', fadeContainerEnd);
swap.classList.add('in');
swap.addEventListener('webkitTransitionEnd', fadeSwapEnd);
}
function fadeSwapEnd () {
swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd);
container.parentNode.removeChild(container);
swap.classList.remove('fade');
swap.classList.remove('in');
complete && complete();
}
function slideEnd() {
swap.removeEventListener('webkitTransitionEnd', slideEnd);
swap.classList.remove('slide');
swap.classList.remove(swapDirection);
container.parentNode.removeChild(container);
complete && complete();
}
var enter,
containerDirection,
swapDirection;
if (!transition) { if (!transition) {
if (container) container.innerHTML = swap.innerHTML; if (container) container.innerHTML = swap.innerHTML;
@ -279,7 +309,7 @@
} else { } else {
enter = /in$/.test(transition); enter = /in$/.test(transition);
if (transition == 'fade') { if (transition === 'fade') {
container.classList.add('in'); container.classList.add('in');
container.classList.add('fade'); container.classList.add('fade');
swap.classList.add('fade'); swap.classList.add('fade');
@ -294,25 +324,14 @@
container.parentNode.insertBefore(swap, container); container.parentNode.insertBefore(swap, container);
} }
if (!transition) complete && complete(); if (!transition) {
complete && complete();
}
if (transition == 'fade') { if (transition === 'fade') {
container.offsetWidth; // force reflow container.offsetWidth; // force reflow
container.classList.remove('in'); container.classList.remove('in');
container.addEventListener('webkitTransitionEnd', fadeContainerEnd); container.addEventListener('webkitTransitionEnd', fadeContainerEnd);
function fadeContainerEnd() {
container.removeEventListener('webkitTransitionEnd', fadeContainerEnd);
swap.classList.add('in');
swap.addEventListener('webkitTransitionEnd', fadeSwapEnd);
}
function fadeSwapEnd () {
swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd);
container.parentNode.removeChild(container);
swap.classList.remove('fade');
swap.classList.remove('in');
complete && complete();
}
} }
if (/slide/.test(transition)) { if (/slide/.test(transition)) {
@ -322,14 +341,6 @@
container.classList.add(containerDirection); container.classList.add(containerDirection);
swap.classList.remove(swapDirection); swap.classList.remove(swapDirection);
swap.addEventListener('webkitTransitionEnd', slideEnd); swap.addEventListener('webkitTransitionEnd', slideEnd);
function slideEnd() {
swap.removeEventListener('webkitTransitionEnd', slideEnd);
swap.classList.remove('slide');
swap.classList.remove(swapDirection);
container.parentNode.removeChild(container);
complete && complete();
}
} }
}; };
@ -363,7 +374,9 @@
var i; var i;
var result = {}; var result = {};
for (i in obj) result[i] = obj[i]; for (i = 0; i < obj.length; i += 1) {
result[i] = obj[i];
}
Object.keys(bars).forEach(function (key) { Object.keys(bars).forEach(function (key) {
var el = dom.querySelector(bars[key]); var el = dom.querySelector(bars[key]);
@ -377,14 +390,16 @@
}; };
var parseXHR = function (xhr, options) { var parseXHR = function (xhr, options) {
var head; var head,
var body; body,
var data = {}; data = {},
var responseText = xhr.responseText; responseText = xhr.responseText;
data.url = options.url; data.url = options.url;
if (!responseText) return data; if (!responseText) {
return data;
}
if (/<html/i.test(responseText)) { if (/<html/i.test(responseText)) {
head = document.createElement('div'); head = document.createElement('div');
@ -399,8 +414,11 @@
data.title = head.querySelector('title'); data.title = head.querySelector('title');
data.title = data.title && data.title.innerText.trim(); data.title = data.title && data.title.innerText.trim();
if (options.transition) data = extendWithDom(data, '.content', body); if (options.transition) {
else data.contents = body; data = extendWithDom(data, '.content', body);
} else {
data.contents = body;
}
return data; return data;
}; };

39
lib/js/segmented-controllers.js
Unescape View File

@ -5,6 +5,7 @@
* ---------------------------------- */ * ---------------------------------- */
!function () { !function () {
"use strict";
var getTarget = function (target) { var getTarget = function (target) {
var i, popovers = document.querySelectorAll('.segmented-controller li a'); var i, popovers = document.querySelectorAll('.segmented-controller li a');
for (; target && target !== document; target = target.parentNode) { for (; target && target !== document; target = target.parentNode) {
@ -13,34 +14,44 @@
}; };
window.addEventListener("touchend", function (e) { window.addEventListener("touchend", function (e) {
var activeTab; var activeTab,
var activeBody; activeBody,
var targetBody; targetBody,
var targetTab; targetTab,
var className = 'active'; className = 'active',
var classSelector = '.' + className; classSelector = '.' + className,
var targetAnchor = getTarget(e.target); targetAnchor = getTarget(e.target);
if (!targetAnchor) return; if (!targetAnchor) {
return;
}
targetTab = targetAnchor.parentNode; targetTab = targetAnchor.parentNode;
activeTab = targetTab.parentNode.querySelector(classSelector); activeTab = targetTab.parentNode.querySelector(classSelector);
if (activeTab) activeTab.classList.remove(className); if (activeTab) {
activeTab.classList.remove(className);
}
targetTab.classList.add(className); targetTab.classList.add(className);
if (!targetAnchor.hash) return; if (!targetAnchor.hash) {
return;
}
targetBody = document.querySelector(targetAnchor.hash); targetBody = document.querySelector(targetAnchor.hash);
if (!targetBody) return; if (!targetBody) {
return;
}
activeBody = targetBody.parentNode.querySelector(classSelector); activeBody = targetBody.parentNode.querySelector(classSelector);
if (activeBody) activeBody.classList.remove(className); if (activeBody) {
activeBody.classList.remove(className);
}
targetBody.classList.add(className) targetBody.classList.add(className);
}); });
window.addEventListener('click', function (e) { if (getTarget(e.target)) e.preventDefault(); }); window.addEventListener('click', function (e) { if (getTarget(e.target)) e.preventDefault(); });

28
lib/js/sliders.js
Unescape View File

@ -6,20 +6,20 @@
* ---------------------------------- */ * ---------------------------------- */
!function () { !function () {
"use strict";
var pageX; var pageX,
var pageY; pageY,
var slider; slider,
var deltaX; deltaX,
var deltaY; deltaY,
var offsetX; offsetX,
var lastSlide; lastSlide,
var startTime; startTime,
var resistance; resistance,
var sliderWidth; sliderWidth,
var slideNumber; slideNumber,
var isScrolling; isScrolling,
var scrollableArea; scrollableArea;
var getSlider = function (target) { var getSlider = function (target) {
var i, sliders = document.querySelectorAll('.slider ul'); var i, sliders = document.querySelectorAll('.slider ul');

59
lib/js/toggles.js
Unescape View File

@ -6,10 +6,10 @@
!function () { !function () {
var start = {}; var start = {},
var touchMove = false; touchMove = false,
var distanceX = false; distanceX = false,
var toggle = false; toggle = false;
var findToggle = function (target) { var findToggle = function (target) {
var i, toggles = document.querySelectorAll('.toggle'); var i, toggles = document.querySelectorAll('.toggle');
@ -23,12 +23,14 @@
toggle = findToggle(e.target); toggle = findToggle(e.target);
if (!toggle) return; if (!toggle) {
return;
}
var handle = toggle.querySelector('.toggle-handle'); var handle = toggle.querySelector('.toggle-handle'),
var toggleWidth = toggle.offsetWidth; toggleWidth = toggle.offsetWidth,
var handleWidth = handle.offsetWidth; handleWidth = handle.offsetWidth,
var offset = toggle.classList.contains('active') ? toggleWidth - handleWidth : 0; offset = toggle.classList.contains('active') ? (toggleWidth - handleWidth) : 0;
start = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY }; start = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY };
touchMove = false; touchMove = false;
@ -44,21 +46,27 @@
if (!toggle) return; if (!toggle) return;
var handle = toggle.querySelector('.toggle-handle'); var handle = toggle.querySelector('.toggle-handle'),
var current = e.touches[0]; current = e.touches[0],
var toggleWidth = toggle.offsetWidth; toggleWidth = toggle.offsetWidth,
var handleWidth = handle.offsetWidth; handleWidth = handle.offsetWidth,
var offset = toggleWidth - handleWidth; offset = toggleWidth - handleWidth;
touchMove = true; touchMove = true;
distanceX = current.pageX - start.pageX; distanceX = current.pageX - start.pageX;
if (Math.abs(distanceX) < Math.abs(current.pageY - start.pageY)) return; if (Math.abs(distanceX) < Math.abs(current.pageY - start.pageY)) {
return;
}
e.preventDefault(); e.preventDefault();
if (distanceX < 0) return handle.style.webkitTransform = 'translate3d(0,0,0)'; if (distanceX < 0) {
if (distanceX > offset) return handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)'; return handle.style.webkitTransform = 'translate3d(0,0,0)';
}
if (distanceX > offset) {
return handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
}
handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)'; handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)';
@ -68,14 +76,17 @@
window.addEventListener('touchend', function (e) { window.addEventListener('touchend', function (e) {
if (!toggle) return; if (!toggle) return;
var handle = toggle.querySelector('.toggle-handle'); var handle = toggle.querySelector('.toggle-handle'),
var toggleWidth = toggle.offsetWidth; toggleWidth = toggle.offsetWidth,
var handleWidth = handle.offsetWidth; handleWidth = handle.offsetWidth,
var offset = toggleWidth - handleWidth; offset = toggleWidth - handleWidth,
var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth/2 - handleWidth/2))); slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth/2 - handleWidth/2)));
if (slideOn) handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)'; if (slideOn) {
else handle.style.webkitTransform = 'translate3d(0,0,0)'; handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
} else {
handle.style.webkitTransform = 'translate3d(0,0,0)';
}
toggle.classList[slideOn ? 'add' : 'remove']('active'); toggle.classList[slideOn ? 'add' : 'remove']('active');

Write Preview
Loading…
Cancel
Save