496 lines
14 KiB
JavaScript
496 lines
14 KiB
JavaScript
|
/*!
|
||
|
|
* =====================================================
|
||
|
|
* Ratchet v2.0.2 (http://goratchet.com)
|
||
|
|
* Copyright 2014 Connor Sears
|
||
|
|
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
|
||
|
|
*
|
||
|
|
* v2.0.2 designed by @connors.
|
||
|
|
* =====================================================
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* ========================================================================
|
||
|
|
* Ratchet: popovers.js v2.0.2
|
||
|
|
* http://goratchet.com/components#popovers
|
||
|
|
* ========================================================================
|
||
|
|
* Copyright 2014 Connor Sears
|
||
|
|
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
|
||
|
|
* ======================================================================== */
|
||
|
|
|
||
|
|
!(function () {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
var popover;
|
||
|
|
|
||
|
|
var findPopovers = function (target) {
|
||
|
|
var i;
|
||
|
|
var popovers = document.querySelectorAll('.tooltip-popovers');
|
||
|
|
|
||
|
|
for (; target && target !== document; target = target.parentNode) {
|
||
|
|
for (i = popovers.length; i--;) {
|
||
|
|
if (popovers[i] === target) {
|
||
|
|
return target;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var onPopoverHidden = function () {
|
||
|
|
popover.style.display = 'none';
|
||
|
|
popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
|
||
|
|
};
|
||
|
|
|
||
|
|
var backdrop = (function () {
|
||
|
|
var element = document.createElement('div');
|
||
|
|
|
||
|
|
element.classList.add('backdrop');
|
||
|
|
element.addEventListener('click', function () {
|
||
|
|
|
||
|
|
popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
|
||
|
|
popover.classList.remove('visible');
|
||
|
|
popover.parentNode.removeChild(backdrop);
|
||
|
|
});
|
||
|
|
|
||
|
|
return element;
|
||
|
|
}());
|
||
|
|
|
||
|
|
var getPopover = function (e) {
|
||
|
|
var anchor = findPopovers(e.target);
|
||
|
|
|
||
|
|
if (!anchor || !anchor.hash || (anchor.hash.indexOf('/') > 0)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
popover = document.querySelector(anchor.hash);
|
||
|
|
}
|
||
|
|
catch (error) {
|
||
|
|
popover = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (popover === null) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!popover || !popover.classList.contains('popover')) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
return popover;
|
||
|
|
};
|
||
|
|
|
||
|
|
var showHidePopover = function (e) {
|
||
|
|
var popover = getPopover(e);
|
||
|
|
|
||
|
|
if (!popover) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
popover.style.display = 'block';
|
||
|
|
popover.offsetHeight;
|
||
|
|
popover.classList.add('visible');
|
||
|
|
|
||
|
|
popover.parentNode.appendChild(backdrop);
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addEventListener('click', showHidePopover);
|
||
|
|
|
||
|
|
}());
|
||
|
|
|
||
|
|
|
||
|
|
/* ========================================================================
|
||
|
|
* Ratchet: segmented-controllers.js v2.0.2
|
||
|
|
* http://goratchet.com/components#segmentedControls
|
||
|
|
* ========================================================================
|
||
|
|
* Copyright 2014 Connor Sears
|
||
|
|
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
|
||
|
|
* ======================================================================== */
|
||
|
|
|
||
|
|
!(function () {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
var getTarget = function (target) {
|
||
|
|
var i;
|
||
|
|
var segmentedControls = document.querySelectorAll('.segmented-control .control-item');
|
||
|
|
|
||
|
|
for (; target && target !== document; target = target.parentNode) {
|
||
|
|
for (i = segmentedControls.length; i--;) {
|
||
|
|
if (segmentedControls[i] === target) {
|
||
|
|
return target;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addEventListener('touchend', function (e) {
|
||
|
|
var activeTab;
|
||
|
|
var activeBodies;
|
||
|
|
var targetBody;
|
||
|
|
var targetTab = getTarget(e.target);
|
||
|
|
var className = 'active';
|
||
|
|
var classSelector = '.' + className;
|
||
|
|
|
||
|
|
if (!targetTab) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
activeTab = targetTab.parentNode.querySelector(classSelector);
|
||
|
|
|
||
|
|
if (activeTab) {
|
||
|
|
activeTab.classList.remove(className);
|
||
|
|
}
|
||
|
|
|
||
|
|
targetTab.classList.add(className);
|
||
|
|
|
||
|
|
if (!targetTab.hash) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
targetBody = document.querySelector(targetTab.hash);
|
||
|
|
|
||
|
|
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);
|
||
|
|
});
|
||
|
|
|
||
|
|
window.addEventListener('click', function (e) { if (getTarget(e.target)) {e.preventDefault();} });
|
||
|
|
}());
|
||
|
|
|
||
|
|
/* ========================================================================
|
||
|
|
* Ratchet: sliders.js v2.0.2
|
||
|
|
* http://goratchet.com/components#sliders
|
||
|
|
* ========================================================================
|
||
|
|
Adapted from Brad Birdsall's swipe
|
||
|
|
* Copyright 2014 Connor Sears
|
||
|
|
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
|
||
|
|
* ======================================================================== */
|
||
|
|
|
||
|
|
!(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;
|
||
|
|
|
||
|
|
var getSlider = function (target) {
|
||
|
|
var i;
|
||
|
|
var sliders = document.querySelectorAll('.slider > .slide-group');
|
||
|
|
|
||
|
|
for (; target && target !== document; target = target.parentNode) {
|
||
|
|
for (i = sliders.length; i--;) {
|
||
|
|
if (sliders[i] === target) {
|
||
|
|
return target;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var getScroll = function () {
|
||
|
|
if ('webkitTransform' in slider.style) {
|
||
|
|
var translate3d = slider.style.webkitTransform.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);
|
||
|
|
};
|
||
|
|
|
||
|
|
var onTouchStart = function (e) {
|
||
|
|
slider = getSlider(e.target);
|
||
|
|
|
||
|
|
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);
|
||
|
|
startTime = +new Date();
|
||
|
|
pageX = e.touches[0].pageX;
|
||
|
|
pageY = e.touches[0].pageY;
|
||
|
|
deltaX = 0;
|
||
|
|
deltaY = 0;
|
||
|
|
|
||
|
|
setSlideNumber(0);
|
||
|
|
|
||
|
|
slider.style['-webkit-transition-duration'] = 0;
|
||
|
|
};
|
||
|
|
|
||
|
|
var onTouchMove = function (e) {
|
||
|
|
if (e.touches.length > 1 || !slider) {
|
||
|
|
return; // Exit if a pinch || no slider
|
||
|
|
}
|
||
|
|
|
||
|
|
deltaX = e.touches[0].pageX - pageX;
|
||
|
|
deltaY = e.touches[0].pageY - pageY;
|
||
|
|
pageX = e.touches[0].pageX;
|
||
|
|
pageY = e.touches[0].pageY;
|
||
|
|
|
||
|
|
if (typeof isScrolling === 'undefined') {
|
||
|
|
isScrolling = Math.abs(deltaY) > Math.abs(deltaX);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (isScrolling) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
offsetX = (deltaX / resistance) + getScroll();
|
||
|
|
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
resistance = slideNumber === 0 && deltaX > 0 ? (pageX / sliderWidth) + 1.25 :
|
||
|
|
slideNumber === lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1;
|
||
|
|
|
||
|
|
slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
|
||
|
|
};
|
||
|
|
|
||
|
|
var onTouchEnd = function (e) {
|
||
|
|
if (!slider || isScrolling) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
setSlideNumber(
|
||
|
|
(+new Date()) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0
|
||
|
|
);
|
||
|
|
|
||
|
|
offsetX = slideNumber * sliderWidth;
|
||
|
|
|
||
|
|
slider.style['-webkit-transition-duration'] = '.2s';
|
||
|
|
slider.style.webkitTransform = '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);
|
||
|
|
|
||
|
|
}());
|
||
|
|
|
||
|
|
/* ========================================================================
|
||
|
|
* Ratchet: toggles.js v2.0.2
|
||
|
|
* http://goratchet.com/components#toggles
|
||
|
|
* ========================================================================
|
||
|
|
Adapted from Brad Birdsall's swipe
|
||
|
|
* Copyright 2014 Connor Sears
|
||
|
|
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
|
||
|
|
* ======================================================================== */
|
||
|
|
|
||
|
|
!(function () {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
var start = {};
|
||
|
|
var touchMove = false;
|
||
|
|
var distanceX = false;
|
||
|
|
var toggle = false;
|
||
|
|
|
||
|
|
var findToggle = function (target) {
|
||
|
|
var i;
|
||
|
|
var toggles = document.querySelectorAll('.toggle');
|
||
|
|
|
||
|
|
for (; target && target !== document; target = target.parentNode) {
|
||
|
|
for (i = toggles.length; i--;) {
|
||
|
|
if (toggles[i] === target) {
|
||
|
|
return target;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addEventListener('touchstart', function (e) {
|
||
|
|
e = e.originalEvent || e;
|
||
|
|
|
||
|
|
toggle = findToggle(e.target);
|
||
|
|
|
||
|
|
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;
|
||
|
|
|
||
|
|
if (e.touches.length > 1) {
|
||
|
|
return; // Exit if a pinch
|
||
|
|
}
|
||
|
|
|
||
|
|
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;
|
||
|
|
|
||
|
|
if (Math.abs(distanceX) < Math.abs(current.pageY - start.pageY)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
if (distanceX < 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)';
|
||
|
|
|
||
|
|
toggle.classList[(distanceX > (toggleWidth / 2 - handleWidth / 2)) ? 'add' : 'remove']('active');
|
||
|
|
});
|
||
|
|
|
||
|
|
window.addEventListener('touchend', function (e) {
|
||
|
|
if (!toggle) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var handle = toggle.querySelector('.toggle-handle');
|
||
|
|
var toggleWidth = toggle.clientWidth;
|
||
|
|
var handleWidth = handle.clientWidth;
|
||
|
|
var offset = (toggleWidth - handleWidth);
|
||
|
|
var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth / 2 - handleWidth / 2)));
|
||
|
|
|
||
|
|
if (slideOn) {
|
||
|
|
handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
|
||
|
|
} else {
|
||
|
|
handle.style.webkitTransform = 'translate3d(0,0,0)';
|
||
|
|
}
|
||
|
|
|
||
|
|
toggle.classList[slideOn ? 'add' : 'remove']('active');
|
||
|
|
|
||
|
|
e = new CustomEvent('toggle', {
|
||
|
|
detail: { isActive: slideOn },
|
||
|
|
bubbles: true,
|
||
|
|
cancelable: true
|
||
|
|
});
|
||
|
|
|
||
|
|
toggle.dispatchEvent(e);
|
||
|
|
|
||
|
|
touchMove = false;
|
||
|
|
toggle = false;
|
||
|
|
});
|
||
|
|
|
||
|
|
}());
|
||
|
|
|
||
|
|
/* ========================================================================
|
||
|
|
* Ratchet: side-menus.js v2.0.2
|
||
|
|
* http://goratchet.com/components#sideMenus
|
||
|
|
* ========================================================================
|
||
|
|
* Copyright 2014 Connor Sears
|
||
|
|
* Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
|
||
|
|
* ======================================================================== */
|
||
|
|
|
||
|
|
!(function () {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
var findSideMenus = function (target) {
|
||
|
|
var i;
|
||
|
|
var sideMenus = document.querySelectorAll('a');
|
||
|
|
|
||
|
|
for (; target && target !== document; target = target.parentNode) {
|
||
|
|
for (i = sideMenus.length; i--;) {
|
||
|
|
if (sideMenus[i] === target) {
|
||
|
|
return target;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var getSideMenu = function (event) {
|
||
|
|
var sideMenuToggle = findSideMenus(event.target);
|
||
|
|
if (sideMenuToggle && sideMenuToggle.hash) {
|
||
|
|
var sideMenu = document.querySelector(sideMenuToggle.hash);
|
||
|
|
if (sideMenu && sideMenu.classList.contains('side-menu')) {
|
||
|
|
return sideMenu;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var getSideMenuSiblings = function (sideMenu) {
|
||
|
|
var siblings = [].slice.call(sideMenu.parentNode.children);
|
||
|
|
siblings = siblings.filter(function(val) {
|
||
|
|
return [sideMenu].indexOf(val) === -1 && val.nodeName !== 'SCRIPT';
|
||
|
|
});
|
||
|
|
return siblings;
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addEventListener('click', function (event) {
|
||
|
|
var sideMenu = getSideMenu(event);
|
||
|
|
if (sideMenu) {
|
||
|
|
var siblings = getSideMenuSiblings(sideMenu);
|
||
|
|
var i, l;
|
||
|
|
var hasBlocker = false;
|
||
|
|
for (i = 0, l = siblings.length; i < l; i++) {
|
||
|
|
if (!hasBlocker && siblings[i].classList.contains('side-menu-blocker')) {
|
||
|
|
hasBlocker = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (siblings[i].classList.contains('activeSideMenu')) {
|
||
|
|
siblings[i].classList.remove('activeSideMenu');
|
||
|
|
siblings[i].classList.add('inactiveSideMenu');
|
||
|
|
} else {
|
||
|
|
siblings[i].classList.remove('inactiveSideMenu');
|
||
|
|
siblings[i].classList.add('activeSideMenu');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (hasBlocker === false) {
|
||
|
|
var blocker = document.createElement('a');
|
||
|
|
blocker.href = '#' + sideMenu.id;
|
||
|
|
blocker.classList.add('side-menu-blocker');
|
||
|
|
sideMenu.parentElement.appendChild(blocker);
|
||
|
|
siblings.push(blocker);
|
||
|
|
blocker.classList.add('activeSideMenu');
|
||
|
|
}
|
||
|
|
|
||
|
|
event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}());
|