123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118 |
- /* ========================================================================
- * 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;
- });
- }());
|