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.

92 lines
2.8 KiB

12 years ago
/* ----------------------------------
* TOGGLE v2.0.0
12 years ago
* Licensed under The MIT License
* http://opensource.org/licenses/MIT
* ---------------------------------- */
!function () {
var start = {};
var touchMove = false;
var distanceX = false;
var toggle = false;
var findToggle = function (target) {
var i, 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;
12 years ago
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;
12 years ago
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);
12 years ago
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;
});
11 years ago
}();