diff options
Diffstat (limited to 'dist/js/ratchet.js')
| -rw-r--r-- | dist/js/ratchet.js | 194 |
1 files changed, 148 insertions, 46 deletions
diff --git a/dist/js/ratchet.js b/dist/js/ratchet.js index cae24cb..1264ccd 100644 --- a/dist/js/ratchet.js +++ b/dist/js/ratchet.js @@ -1,17 +1,75 @@ /*! * ===================================================== * Ratchet v2.0.2 (http://goratchet.com) - * Copyright 2014 Connor Sears + * Copyright 2015 Connor Sears * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) * * v2.0.2 designed by @connors. * ===================================================== */ /* ======================================================================== + * Ratchet: common.js v2.0.2 + * http://goratchet.com/ + * ======================================================================== + * Copyright 2015 Connor Sears + * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) + * ======================================================================== */ + +!(function () { + 'use strict'; + + // Compatible With CustomEvent + if (!window.CustomEvent) { + window.CustomEvent = function (type, config) { + var e = document.createEvent('CustomEvent'); + e.initCustomEvent(type, config.bubbles, config.cancelable, config.detail); + return e; + }; + } + + // Create Ratchet namespace + if (typeof window.RATCHET === 'undefined') { + window.RATCHET = {}; + } + + // Original script from http://davidwalsh.name/vendor-prefix + window.RATCHET.getBrowserCapabilities = (function () { + var styles = window.getComputedStyle(document.documentElement, ''); + var pre = (Array.prototype.slice + .call(styles) + .join('') + .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']) + )[1]; + return { + prefix: '-' + pre + '-', + transform: pre[0].toUpperCase() + pre.substr(1) + 'Transform' + }; + })(); + + window.RATCHET.getTransitionEnd = (function () { + var el = document.createElement('ratchet'); + var transEndEventNames = { + WebkitTransition : 'webkitTransitionEnd', + MozTransition : 'transitionend', + OTransition : 'oTransitionEnd otransitionend', + transition : 'transitionend' + }; + + for (var name in transEndEventNames) { + if (el.style[name] !== undefined) { + return transEndEventNames[name]; + } + } + + return transEndEventNames.transition; + })(); +}()); + +/* ======================================================================== * Ratchet: modals.js v2.0.2 * http://goratchet.com/components#modals * ======================================================================== - * Copyright 2014 Connor Sears + * Copyright 2015 Connor Sears * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) * ======================================================================== */ @@ -53,7 +111,7 @@ * Ratchet: popovers.js v2.0.2 * http://goratchet.com/components#popovers * ======================================================================== - * Copyright 2014 Connor Sears + * Copyright 2015 Connor Sears * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) * ======================================================================== */ @@ -77,7 +135,7 @@ var onPopoverHidden = function () { popover.style.display = 'none'; - popover.removeEventListener('webkitTransitionEnd', onPopoverHidden); + popover.removeEventListener(window.RATCHET.getTransitionEnd, onPopoverHidden); }; var backdrop = (function () { @@ -86,7 +144,7 @@ element.classList.add('backdrop'); element.addEventListener('touchend', function () { - popover.addEventListener('webkitTransitionEnd', onPopoverHidden); + popover.addEventListener(window.RATCHET.getTransitionEnd, onPopoverHidden); popover.classList.remove('visible'); popover.parentNode.removeChild(backdrop); }); @@ -103,8 +161,7 @@ try { popover = document.querySelector(anchor.hash); - } - catch (error) { + } catch (error) { popover = null; } @@ -142,7 +199,7 @@ * http://goratchet.com/components#push * ======================================================================== * inspired by @defunkt's jquery.pjax.js - * Copyright 2014 Connor Sears + * Copyright 2015 Connor Sears * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) * ======================================================================== */ @@ -182,7 +239,6 @@ } cacheMapping[data.id] = JSON.stringify(data); window.history.replaceState(data.id, data.title, data.url); - domCache[data.id] = document.body.cloneNode(true); }; var cachePush = function () { @@ -200,7 +256,9 @@ delete cacheMapping[cacheBackStack.shift()]; } - window.history.pushState(null, '', cacheMapping[PUSH.id].url); + if (getCached(PUSH.id).url) { + window.history.pushState(null, '', getCached(PUSH.id).url); + } cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack); cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack); @@ -331,7 +389,9 @@ swapContent( (activeObj.contents || activeDom).cloneNode(true), document.querySelector('.content'), - transition + transition, function () { + triggerStateChange(); + } ); PUSH.id = id; @@ -369,7 +429,11 @@ clearTimeout(options._timeout); } if (xhr.readyState === 4) { - xhr.status === 200 ? success(xhr, options) : failure(options.url); + if (xhr.status === 200) { + success(xhr, options); + } else { + failure(options.url); + } } }; @@ -383,6 +447,8 @@ }); } + cacheCurrentContent(); + if (options.timeout) { options._timeout = setTimeout(function () { xhr.abort('timeout'); }, options.timeout); } @@ -394,6 +460,10 @@ } }; + function cacheCurrentContent () { + domCache[PUSH.id] = document.body.cloneNode(true); + } + // Main XHR handlers // ================= @@ -465,7 +535,7 @@ document.body.insertBefore(swap, document.querySelector('.content')); } } else { - enter = /in$/.test(transition); + enter = /in$/.test(transition); if (transition === 'fade') { container.classList.add('in'); @@ -483,35 +553,41 @@ } if (!transition) { - complete && complete(); + if (complete) { + complete(); + } } if (transition === 'fade') { container.offsetWidth; // force reflow container.classList.remove('in'); var fadeContainerEnd = function () { - container.removeEventListener('webkitTransitionEnd', fadeContainerEnd); + container.removeEventListener(window.RATCHET.getTransitionEnd, fadeContainerEnd); swap.classList.add('in'); - swap.addEventListener('webkitTransitionEnd', fadeSwapEnd); + swap.addEventListener(window.RATCHET.getTransitionEnd, fadeSwapEnd); }; var fadeSwapEnd = function () { - swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd); + swap.removeEventListener(window.RATCHET.getTransitionEnd, fadeSwapEnd); container.parentNode.removeChild(container); swap.classList.remove('fade'); swap.classList.remove('in'); - complete && complete(); + if (complete) { + complete(); + } }; - container.addEventListener('webkitTransitionEnd', fadeContainerEnd); + container.addEventListener(window.RATCHET.getTransitionEnd, fadeContainerEnd); } if (/slide/.test(transition)) { var slideEnd = function () { - swap.removeEventListener('webkitTransitionEnd', slideEnd); + swap.removeEventListener(window.RATCHET.getTransitionEnd, slideEnd); swap.classList.remove('sliding', 'sliding-in'); swap.classList.remove(swapDirection); container.parentNode.removeChild(container); - complete && complete(); + if (complete) { + complete(); + } }; container.offsetWidth; // force reflow @@ -519,7 +595,7 @@ containerDirection = enter ? 'left' : 'right'; container.classList.add(containerDirection); swap.classList.remove(swapDirection); - swap.addEventListener('webkitTransitionEnd', slideEnd); + swap.addEventListener(window.RATCHET.getTransitionEnd, slideEnd); } }; @@ -616,9 +692,16 @@ window.addEventListener('touchstart', function () { isScrolling = false; }); window.addEventListener('touchmove', function () { isScrolling = true; }); 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); + + // TODO : Remove this line in the next major version window.PUSH = PUSH; + window.RATCHET.push = PUSH; }()); @@ -626,7 +709,7 @@ * Ratchet: segmented-controllers.js v2.0.2 * http://goratchet.com/components#segmentedControls * ======================================================================== - * Copyright 2014 Connor Sears + * Copyright 2015 Connor Sears * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) * ======================================================================== */ @@ -685,7 +768,12 @@ 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(); + } + }); + }()); /* ======================================================================== @@ -693,7 +781,7 @@ * http://goratchet.com/components#sliders * ======================================================================== Adapted from Brad Birdsall's swipe - * Copyright 2014 Connor Sears + * Copyright 2015 Connor Sears * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) * ======================================================================== */ @@ -713,6 +801,10 @@ var slideNumber; var isScrolling; var scrollableArea; + var startedMoving; + + var transformPrefix = window.RATCHET.getBrowserCapabilities.prefix; + var transformProperty = window.RATCHET.getBrowserCapabilities.transform; var getSlider = function (target) { var i; @@ -728,11 +820,9 @@ }; 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 translate3d = slider.style[transformProperty].match(/translate3d\(([^,]*)/); + var ret = translate3d ? translate3d[1] : 0; + return parseInt(ret, 10); }; var setSlideNumber = function (offset) { @@ -765,7 +855,7 @@ setSlideNumber(0); - slider.style['-webkit-transition-duration'] = 0; + slider.style[transformPrefix + 'transition-duration'] = 0; }; var onTouchMove = function (e) { @@ -773,12 +863,17 @@ return; // Exit if a pinch || no slider } + // adjust the starting position if we just started to avoid jumpage + if (!startedMoving) { + pageX += (e.touches[0].pageX - pageX) - 1; + } + 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') { + if (typeof isScrolling === 'undefined' && startedMoving) { isScrolling = Math.abs(deltaY) > Math.abs(deltaX); } @@ -793,7 +888,10 @@ 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)'; + slider.style[transformProperty] = 'translate3d(' + offsetX + 'px,0,0)'; + + // started moving + startedMoving = true; }; var onTouchEnd = function (e) { @@ -801,14 +899,15 @@ return; } - setSlideNumber( - (+new Date()) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0 - ); + // we're done moving + startedMoving = false; + + 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)'; + slider.style[transformPrefix + 'transition-duration'] = '.2s'; + slider.style[transformProperty] = 'translate3d(' + offsetX + 'px,0,0)'; e = new CustomEvent('slide', { detail: { slideNumber: Math.abs(slideNumber) }, @@ -830,7 +929,7 @@ * http://goratchet.com/components#toggles * ======================================================================== Adapted from Brad Birdsall's swipe - * Copyright 2014 Connor Sears + * Copyright 2015 Connor Sears * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) * ======================================================================== */ @@ -841,6 +940,7 @@ var touchMove = false; var distanceX = false; var toggle = false; + var transformProperty = window.RATCHET.getBrowserCapabilities.transform; var findToggle = function (target) { var i; @@ -900,13 +1000,13 @@ e.preventDefault(); if (distanceX < 0) { - return (handle.style.webkitTransform = 'translate3d(0,0,0)'); + return (handle.style[transformProperty] = 'translate3d(0,0,0)'); } if (distanceX > offset) { - return (handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)'); + return (handle.style[transformProperty] = 'translate3d(' + offset + 'px,0,0)'); } - handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)'; + handle.style[transformProperty] = 'translate3d(' + distanceX + 'px,0,0)'; toggle.classList[(distanceX > (toggleWidth / 2 - handleWidth / 2)) ? 'add' : 'remove']('active'); }); @@ -923,15 +1023,17 @@ var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth / 2 - handleWidth / 2))); if (slideOn) { - handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)'; + handle.style[transformProperty] = 'translate3d(' + offset + 'px,0,0)'; } else { - handle.style.webkitTransform = 'translate3d(0,0,0)'; + handle.style[transformProperty] = 'translate3d(0,0,0)'; } toggle.classList[slideOn ? 'add' : 'remove']('active'); e = new CustomEvent('toggle', { - detail: { isActive: slideOn }, + detail: { + isActive: slideOn + }, bubbles: true, cancelable: true }); |