mirror of https://github.com/twbs/ratchet.git
Darren Liew
11 years ago
5 changed files with 1644 additions and 48 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,422 @@ |
|||||||
|
// modal
|
||||||
|
!(function () { |
||||||
|
'use strict'; |
||||||
|
|
||||||
|
var findModals = function (target) { |
||||||
|
var i; |
||||||
|
var modals = document.querySelectorAll('a'); |
||||||
|
|
||||||
|
for (; target && target !== document; target = target.parentNode) { |
||||||
|
for (i = modals.length; i--;) { |
||||||
|
if (modals[i] === target) { |
||||||
|
return target; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
var getModal = function (event) { |
||||||
|
var modalToggle = findModals(event.target); |
||||||
|
if (modalToggle && modalToggle.hash && -1 === modalToggle.hash.indexOf('/')) { |
||||||
|
return document.querySelector(modalToggle.hash); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
window.addEventListener('touchend', function (event) { |
||||||
|
var modal = getModal(event); |
||||||
|
if (modal) { |
||||||
|
if (modal && modal.classList.contains('modal')) { |
||||||
|
modal.classList.toggle('active'); |
||||||
|
} |
||||||
|
event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
|
||||||
|
} |
||||||
|
}); |
||||||
|
}()); |
||||||
|
// popover
|
||||||
|
!(function () { |
||||||
|
'use strict'; |
||||||
|
|
||||||
|
var popover; |
||||||
|
|
||||||
|
var findPopovers = function (target) { |
||||||
|
var i; |
||||||
|
var popovers = document.querySelectorAll('a'); |
||||||
|
|
||||||
|
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); |
||||||
|
}; |
||||||
|
|
||||||
|
// HACK to hide programatically
|
||||||
|
var hide = function(e){ |
||||||
|
e.preventDefault() |
||||||
|
e.stopPropagation() |
||||||
|
popover.addEventListener('webkitTransitionEnd', onPopoverHidden); |
||||||
|
popover.classList.remove('visible'); |
||||||
|
popover.parentNode.removeChild(backdrop); |
||||||
|
}; |
||||||
|
|
||||||
|
var backdrop = (function () { |
||||||
|
var element = document.createElement('div'); |
||||||
|
|
||||||
|
element.classList.add('backdrop'); |
||||||
|
|
||||||
|
element.addEventListener('click', hide, false); |
||||||
|
|
||||||
|
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) { |
||||||
|
// if clicked fast enough, function hide may not call at all
|
||||||
|
popover.removeEventListener('webkitTransitionEnd', onPopoverHidden); |
||||||
|
e.preventDefault() |
||||||
|
e.stopPropagation() |
||||||
|
}else{ |
||||||
|
// HACK, click anyway to close existing popover
|
||||||
|
popover = document.querySelector('.popover.visible'); |
||||||
|
if (popover) hide(e); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
popover.style.display = 'block'; |
||||||
|
popover.offsetHeight; |
||||||
|
popover.classList.add('visible'); |
||||||
|
|
||||||
|
popover.parentNode.appendChild(backdrop); |
||||||
|
}; |
||||||
|
|
||||||
|
window.addEventListener('click', showHidePopover); |
||||||
|
|
||||||
|
}()); |
||||||
|
// segmented-controllers
|
||||||
|
!(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();} }); |
||||||
|
}()); |
||||||
|
// slider
|
||||||
|
!(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); |
||||||
|
|
||||||
|
}()); |
||||||
|
// toggle
|
||||||
|
!(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; |
||||||
|
}); |
||||||
|
|
||||||
|
}()); |
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue