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

beautified js code

pull/179/head
Simon Waldherr 12 years ago
parent
c0d00ce2ca
commit
fdabe57db6
7 changed files with 345 additions and 286 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. 136
      dist/ratchet.js
  2. 93
      lib/js/push.js
  3. 8
      lib/js/segmented-controllers.js
  4. 13
      lib/js/sliders.js
  5. 19
      lib/js/toggles.js

136
dist/ratchet.js vendored
Unescape View File

@ -136,15 +136,15 @@
cacheMapping = sessionStorage, cacheMapping = sessionStorage,
domCache = {}, domCache = {},
transitionMap = { transitionMap = {
'slide-in' : 'slide-out', 'slide-in': 'slide-out',
'slide-out' : 'slide-in', 'slide-out': 'slide-in',
'fade' : 'fade' 'fade': 'fade'
}, },
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) {
@ -221,10 +221,10 @@
e.preventDefault(); e.preventDefault();
PUSH({ PUSH({
url : target.href, url: target.href,
hash : target.hash, hash: target.hash,
timeout : target.getAttribute('data-timeout'), timeout: target.getAttribute('data-timeout'),
transition : target.getAttribute('data-transition') transition: target.getAttribute('data-transition')
}); });
}; };
@ -269,12 +269,12 @@
if (!activeDom) { if (!activeDom) {
return PUSH({ return PUSH({
id : activeObj.id, id: activeObj.id,
url : activeObj.url, url: activeObj.url,
title : activeObj.title, title: activeObj.title,
timeout : activeObj.timeout, timeout: activeObj.timeout,
transition : transition, transition: transition,
ignorePush : true ignorePush: true
}); });
} }
@ -284,8 +284,7 @@
barElement = document.querySelector(bars[key]); barElement = document.querySelector(bars[key]);
if (activeObj[key]) { if (activeObj[key]) {
swapContent(activeObj[key], barElement); swapContent(activeObj[key], barElement);
} } else if (barElement) {
else if (barElement) {
barElement.parentNode.removeChild(barElement); barElement.parentNode.removeChild(barElement);
} }
} }
@ -294,8 +293,7 @@
swapContent( swapContent(
(activeObj.contents || activeDom).cloneNode(true), (activeObj.contents || activeDom).cloneNode(true),
document.querySelector('.content'), document.querySelector('.content'),
transition transition);
);
PUSH.id = id; PUSH.id = id;
@ -335,16 +333,18 @@
if (!PUSH.id) { if (!PUSH.id) {
cacheReplace({ cacheReplace({
id : +new Date, id: +new Date,
url : window.location.href, url: window.location.href,
title : document.title, title: document.title,
timeout : options.timeout, timeout: options.timeout,
transition : null transition: null
}); });
} }
if (options.timeout) { if (options.timeout) {
options._timeout = setTimeout(function () { xhr.abort('timeout'); }, options.timeout); options._timeout = setTimeout(function () {
xhr.abort('timeout');
}, options.timeout);
} }
xhr.send(); xhr.send();
@ -375,11 +375,11 @@
swapContent(data.contents, options.container, options.transition, function () { swapContent(data.contents, options.container, options.transition, function () {
cacheReplace({ cacheReplace({
id : options.id || +new Date, id: options.id || +new Date,
url : data.url, url: data.url,
title : data.title, title: data.title,
timeout : options.timeout, timeout: options.timeout,
transition : options.transition transition: options.transition
}, options.id); }, options.id);
triggerStateChange(); triggerStateChange();
}); });
@ -398,18 +398,21 @@
var swapContent = function (swap, container, transition, complete) { var swapContent = function (swap, container, transition, complete) {
"use strict"; "use strict";
function fadeContainerEnd() { function fadeContainerEnd() {
container.removeEventListener('webkitTransitionEnd', fadeContainerEnd); container.removeEventListener('webkitTransitionEnd', fadeContainerEnd);
swap.classList.add('in'); swap.classList.add('in');
swap.addEventListener('webkitTransitionEnd', fadeSwapEnd); swap.addEventListener('webkitTransitionEnd', fadeSwapEnd);
} }
function fadeSwapEnd () {
function fadeSwapEnd() {
swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd); swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd);
container.parentNode.removeChild(container); container.parentNode.removeChild(container);
swap.classList.remove('fade'); swap.classList.remove('fade');
swap.classList.remove('in'); swap.classList.remove('in');
complete && complete(); complete && complete();
} }
function slideEnd() { function slideEnd() {
swap.removeEventListener('webkitTransitionEnd', slideEnd); swap.removeEventListener('webkitTransitionEnd', slideEnd);
swap.classList.remove('slide'); swap.classList.remove('slide');
@ -465,7 +468,9 @@
var triggerStateChange = function () { var triggerStateChange = function () {
var e = new CustomEvent('push', { var e = new CustomEvent('push', {
detail: { state: getCached(PUSH.id) }, detail: {
state: getCached(PUSH.id)
},
bubbles: true, bubbles: true,
cancelable: true cancelable: true
}); });
@ -476,7 +481,9 @@
var findTarget = function (target) { var findTarget = function (target) {
var i, toggles = document.querySelectorAll('a'); var i, toggles = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) { for (; target && target !== document; target = target.parentNode) {
for (i = toggles.length; i--;) { if (toggles[i] === target) return target; } for (i = toggles.length; i--;) {
if (toggles[i] === target) return target;
}
} }
}; };
@ -486,7 +493,9 @@
}; };
var parseURL = function (url) { var parseURL = function (url) {
var a = document.createElement('a'); a.href = url; return a; var a = document.createElement('a');
a.href = url;
return a;
}; };
var extendWithDom = function (obj, fragment, dom) { var extendWithDom = function (obj, fragment, dom) {
@ -546,10 +555,16 @@
// Attach PUSH event handlers // Attach PUSH event handlers
// ========================== // ==========================
window.addEventListener('touchstart', function () { isScrolling = false; }); window.addEventListener('touchstart', function () {
window.addEventListener('touchmove', function () { isScrolling = true; }) isScrolling = false;
});
window.addEventListener('touchmove', function () {
isScrolling = true;
})
window.addEventListener('touchend', touchend); window.addEventListener('touchend', touchend);
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);
}(); }();
@ -564,7 +579,9 @@
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) {
for (i = popovers.length; i--;) { if (popovers[i] === target) return target; } for (i = popovers.length; i--;) {
if (popovers[i] === target) return target;
}
} }
}; };
@ -609,8 +626,11 @@
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();
});
}();
/* ----------------------------------
* SLIDER v1.0.0 * SLIDER v1.0.0
* Licensed under The MIT License * Licensed under The MIT License
* Adapted from Brad Birdsall's swipe * Adapted from Brad Birdsall's swipe
@ -636,7 +656,9 @@
var getSlider = function (target) { var getSlider = function (target) {
var i, sliders = document.querySelectorAll('.slider ul'); var i, sliders = document.querySelectorAll('.slider ul');
for (; target && target !== document; target = target.parentNode) { for (; target && target !== document; target = target.parentNode) {
for (i = sliders.length; i--;) { if (sliders[i] === target) return target; } for (i = sliders.length; i--;) {
if (sliders[i] === target) return target;
}
} }
} }
@ -647,7 +669,7 @@
var setSlideNumber = function (offset) { var setSlideNumber = function (offset) {
var round = offset ? (deltaX < 0 ? 'ceil' : 'floor') : 'round'; var round = offset ? (deltaX < 0 ? 'ceil' : 'floor') : 'round';
slideNumber = Math[round](getScroll() / ( scrollableArea / slider.children.length) ); slideNumber = Math[round](getScroll() / (scrollableArea / slider.children.length));
slideNumber += offset; slideNumber += offset;
slideNumber = Math.min(slideNumber, 0); slideNumber = Math.min(slideNumber, 0);
slideNumber = Math.max(-(slider.children.length - 1), slideNumber); slideNumber = Math.max(-(slider.children.length - 1), slideNumber);
@ -702,8 +724,7 @@
if (!slider || isScrolling) return; if (!slider || isScrolling) return;
setSlideNumber( setSlideNumber(
(+new Date) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0 (+new Date) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0);
);
offsetX = slideNumber * sliderWidth; offsetX = slideNumber * sliderWidth;
@ -711,7 +732,9 @@
slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)'; slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
e = new CustomEvent('slide', { e = new CustomEvent('slide', {
detail: { slideNumber: Math.abs(slideNumber) }, detail: {
slideNumber: Math.abs(slideNumber)
},
bubbles: true, bubbles: true,
cancelable: true cancelable: true
}); });
@ -731,7 +754,7 @@
* ---------------------------------- */ * ---------------------------------- */
!function () { !function () {
"use strict";
var start = {}, var start = {},
touchMove = false, touchMove = false,
distanceX = false, distanceX = false,
@ -740,7 +763,9 @@
var findToggle = function (target) { var findToggle = function (target) {
var i, toggles = document.querySelectorAll('.toggle'); var i, toggles = document.querySelectorAll('.toggle');
for (; target && target !== document; target = target.parentNode) { for (; target && target !== document; target = target.parentNode) {
for (i = toggles.length; i--;) { if (toggles[i] === target) return target; } for (i = toggles.length; i--;) {
if (toggles[i] === target) return target;
}
} }
} }
@ -758,7 +783,10 @@
handleWidth = handle.offsetWidth, handleWidth = handle.offsetWidth,
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;
// todo: probably should be moved to the css // todo: probably should be moved to the css
@ -796,7 +824,7 @@
handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)'; handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)';
toggle.classList[(distanceX > (toggleWidth/2 - handleWidth/2)) ? 'add' : 'remove']('active'); toggle.classList[(distanceX > (toggleWidth / 2 - handleWidth / 2)) ? 'add' : 'remove']('active');
}); });
window.addEventListener('touchend', function (e) { window.addEventListener('touchend', function (e) {
@ -806,7 +834,7 @@
toggleWidth = toggle.offsetWidth, toggleWidth = toggle.offsetWidth,
handleWidth = handle.offsetWidth, handleWidth = handle.offsetWidth,
offset = toggleWidth - handleWidth, offset = toggleWidth - handleWidth,
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) { if (slideOn) {
handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)'; handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
@ -817,7 +845,9 @@
toggle.classList[slideOn ? 'add' : 'remove']('active'); toggle.classList[slideOn ? 'add' : 'remove']('active');
e = new CustomEvent('toggle', { e = new CustomEvent('toggle', {
detail: { isActive: slideOn }, detail: {
isActive: slideOn
},
bubbles: true, bubbles: true,
cancelable: true cancelable: true
}); });

93
lib/js/push.js
Unescape View File

@ -17,15 +17,15 @@
cacheMapping = sessionStorage, cacheMapping = sessionStorage,
domCache = {}, domCache = {},
transitionMap = { transitionMap = {
'slide-in' : 'slide-out', 'slide-in': 'slide-out',
'slide-out' : 'slide-in', 'slide-out': 'slide-in',
'fade' : 'fade' 'fade': 'fade'
}, },
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) {
@ -102,10 +102,10 @@
e.preventDefault(); e.preventDefault();
PUSH({ PUSH({
url : target.href, url: target.href,
hash : target.hash, hash: target.hash,
timeout : target.getAttribute('data-timeout'), timeout: target.getAttribute('data-timeout'),
transition : target.getAttribute('data-transition') transition: target.getAttribute('data-transition')
}); });
}; };
@ -150,12 +150,12 @@
if (!activeDom) { if (!activeDom) {
return PUSH({ return PUSH({
id : activeObj.id, id: activeObj.id,
url : activeObj.url, url: activeObj.url,
title : activeObj.title, title: activeObj.title,
timeout : activeObj.timeout, timeout: activeObj.timeout,
transition : transition, transition: transition,
ignorePush : true ignorePush: true
}); });
} }
@ -165,8 +165,7 @@
barElement = document.querySelector(bars[key]); barElement = document.querySelector(bars[key]);
if (activeObj[key]) { if (activeObj[key]) {
swapContent(activeObj[key], barElement); swapContent(activeObj[key], barElement);
} } else if (barElement) {
else if (barElement) {
barElement.parentNode.removeChild(barElement); barElement.parentNode.removeChild(barElement);
} }
} }
@ -175,8 +174,7 @@
swapContent( swapContent(
(activeObj.contents || activeDom).cloneNode(true), (activeObj.contents || activeDom).cloneNode(true),
document.querySelector('.content'), document.querySelector('.content'),
transition transition);
);
PUSH.id = id; PUSH.id = id;
@ -216,16 +214,18 @@
if (!PUSH.id) { if (!PUSH.id) {
cacheReplace({ cacheReplace({
id : +new Date, id: +new Date,
url : window.location.href, url: window.location.href,
title : document.title, title: document.title,
timeout : options.timeout, timeout: options.timeout,
transition : null transition: null
}); });
} }
if (options.timeout) { if (options.timeout) {
options._timeout = setTimeout(function () { xhr.abort('timeout'); }, options.timeout); options._timeout = setTimeout(function () {
xhr.abort('timeout');
}, options.timeout);
} }
xhr.send(); xhr.send();
@ -256,11 +256,11 @@
swapContent(data.contents, options.container, options.transition, function () { swapContent(data.contents, options.container, options.transition, function () {
cacheReplace({ cacheReplace({
id : options.id || +new Date, id: options.id || +new Date,
url : data.url, url: data.url,
title : data.title, title: data.title,
timeout : options.timeout, timeout: options.timeout,
transition : options.transition transition: options.transition
}, options.id); }, options.id);
triggerStateChange(); triggerStateChange();
}); });
@ -279,18 +279,21 @@
var swapContent = function (swap, container, transition, complete) { var swapContent = function (swap, container, transition, complete) {
"use strict"; "use strict";
function fadeContainerEnd() { function fadeContainerEnd() {
container.removeEventListener('webkitTransitionEnd', fadeContainerEnd); container.removeEventListener('webkitTransitionEnd', fadeContainerEnd);
swap.classList.add('in'); swap.classList.add('in');
swap.addEventListener('webkitTransitionEnd', fadeSwapEnd); swap.addEventListener('webkitTransitionEnd', fadeSwapEnd);
} }
function fadeSwapEnd () {
function fadeSwapEnd() {
swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd); swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd);
container.parentNode.removeChild(container); container.parentNode.removeChild(container);
swap.classList.remove('fade'); swap.classList.remove('fade');
swap.classList.remove('in'); swap.classList.remove('in');
complete && complete(); complete && complete();
} }
function slideEnd() { function slideEnd() {
swap.removeEventListener('webkitTransitionEnd', slideEnd); swap.removeEventListener('webkitTransitionEnd', slideEnd);
swap.classList.remove('slide'); swap.classList.remove('slide');
@ -346,7 +349,9 @@
var triggerStateChange = function () { var triggerStateChange = function () {
var e = new CustomEvent('push', { var e = new CustomEvent('push', {
detail: { state: getCached(PUSH.id) }, detail: {
state: getCached(PUSH.id)
},
bubbles: true, bubbles: true,
cancelable: true cancelable: true
}); });
@ -357,7 +362,9 @@
var findTarget = function (target) { var findTarget = function (target) {
var i, toggles = document.querySelectorAll('a'); var i, toggles = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) { for (; target && target !== document; target = target.parentNode) {
for (i = toggles.length; i--;) { if (toggles[i] === target) return target; } for (i = toggles.length; i--;) {
if (toggles[i] === target) return target;
}
} }
}; };
@ -367,7 +374,9 @@
}; };
var parseURL = function (url) { var parseURL = function (url) {
var a = document.createElement('a'); a.href = url; return a; var a = document.createElement('a');
a.href = url;
return a;
}; };
var extendWithDom = function (obj, fragment, dom) { var extendWithDom = function (obj, fragment, dom) {
@ -427,10 +436,16 @@
// Attach PUSH event handlers // Attach PUSH event handlers
// ========================== // ==========================
window.addEventListener('touchstart', function () { isScrolling = false; }); window.addEventListener('touchstart', function () {
window.addEventListener('touchmove', function () { isScrolling = true; }) isScrolling = false;
});
window.addEventListener('touchmove', function () {
isScrolling = true;
})
window.addEventListener('touchend', touchend); window.addEventListener('touchend', touchend);
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);
}(); }();

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

@ -9,7 +9,9 @@
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) {
for (i = popovers.length; i--;) { if (popovers[i] === target) return target; } for (i = popovers.length; i--;) {
if (popovers[i] === target) return target;
}
} }
}; };
@ -54,5 +56,7 @@
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();
});
}(); }();

13
lib/js/sliders.js
Unescape View File

@ -24,7 +24,9 @@
var getSlider = function (target) { var getSlider = function (target) {
var i, sliders = document.querySelectorAll('.slider ul'); var i, sliders = document.querySelectorAll('.slider ul');
for (; target && target !== document; target = target.parentNode) { for (; target && target !== document; target = target.parentNode) {
for (i = sliders.length; i--;) { if (sliders[i] === target) return target; } for (i = sliders.length; i--;) {
if (sliders[i] === target) return target;
}
} }
} }
@ -35,7 +37,7 @@
var setSlideNumber = function (offset) { var setSlideNumber = function (offset) {
var round = offset ? (deltaX < 0 ? 'ceil' : 'floor') : 'round'; var round = offset ? (deltaX < 0 ? 'ceil' : 'floor') : 'round';
slideNumber = Math[round](getScroll() / ( scrollableArea / slider.children.length) ); slideNumber = Math[round](getScroll() / (scrollableArea / slider.children.length));
slideNumber += offset; slideNumber += offset;
slideNumber = Math.min(slideNumber, 0); slideNumber = Math.min(slideNumber, 0);
slideNumber = Math.max(-(slider.children.length - 1), slideNumber); slideNumber = Math.max(-(slider.children.length - 1), slideNumber);
@ -90,8 +92,7 @@
if (!slider || isScrolling) return; if (!slider || isScrolling) return;
setSlideNumber( setSlideNumber(
(+new Date) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0 (+new Date) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0);
);
offsetX = slideNumber * sliderWidth; offsetX = slideNumber * sliderWidth;
@ -99,7 +100,9 @@
slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)'; slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
e = new CustomEvent('slide', { e = new CustomEvent('slide', {
detail: { slideNumber: Math.abs(slideNumber) }, detail: {
slideNumber: Math.abs(slideNumber)
},
bubbles: true, bubbles: true,
cancelable: true cancelable: true
}); });

19
lib/js/toggles.js
Unescape View File

@ -5,7 +5,7 @@
* ---------------------------------- */ * ---------------------------------- */
!function () { !function () {
"use strict";
var start = {}, var start = {},
touchMove = false, touchMove = false,
distanceX = false, distanceX = false,
@ -14,7 +14,9 @@
var findToggle = function (target) { var findToggle = function (target) {
var i, toggles = document.querySelectorAll('.toggle'); var i, toggles = document.querySelectorAll('.toggle');
for (; target && target !== document; target = target.parentNode) { for (; target && target !== document; target = target.parentNode) {
for (i = toggles.length; i--;) { if (toggles[i] === target) return target; } for (i = toggles.length; i--;) {
if (toggles[i] === target) return target;
}
} }
} }
@ -32,7 +34,10 @@
handleWidth = handle.offsetWidth, handleWidth = handle.offsetWidth,
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;
// todo: probably should be moved to the css // todo: probably should be moved to the css
@ -70,7 +75,7 @@
handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)'; handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)';
toggle.classList[(distanceX > (toggleWidth/2 - handleWidth/2)) ? 'add' : 'remove']('active'); toggle.classList[(distanceX > (toggleWidth / 2 - handleWidth / 2)) ? 'add' : 'remove']('active');
}); });
window.addEventListener('touchend', function (e) { window.addEventListener('touchend', function (e) {
@ -80,7 +85,7 @@
toggleWidth = toggle.offsetWidth, toggleWidth = toggle.offsetWidth,
handleWidth = handle.offsetWidth, handleWidth = handle.offsetWidth,
offset = toggleWidth - handleWidth, offset = toggleWidth - handleWidth,
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) { if (slideOn) {
handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)'; handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
@ -91,7 +96,9 @@
toggle.classList[slideOn ? 'add' : 'remove']('active'); toggle.classList[slideOn ? 'add' : 'remove']('active');
e = new CustomEvent('toggle', { e = new CustomEvent('toggle', {
detail: { isActive: slideOn }, detail: {
isActive: slideOn
},
bubbles: true, bubbles: true,
cancelable: true cancelable: true
}); });

Write Preview
Loading…
Cancel
Save