diff --git a/dist/js/ratchet.js b/dist/js/ratchet.js index caf42a658..1704acfa2 100644 --- a/dist/js/ratchet.js +++ b/dist/js/ratchet.js @@ -137,6 +137,150 @@ }()); +!(function () { + 'use strict'; + + // Ratchet's layout includes fixed position headers & footers that should always + // appear before the main .content div within + // + // These fixed bars will have new content swapped in, ignoring any + // transitions (slide-in, slide-out & fade). + // + // These following selectors define which elements are transitioned with + // simple DOM replacement and are always immediate children of + var barSelectors = [ + '.bar-tab', + '.bar-nav', + '.bar-footer', + '.bar-header-secondary' + ]; + + // Other than any fixed bars, '.content' should be the only other child of body + var contentSelector = '.content'; + + // For any bar elements in `newMarkup`, either: + // * replace an existing bar elements with new content + // * add new bar elements when an existing one isn't present + // * remove any bar elements not found in `newMarkup` + var updateBars = function (newMarkup) { + for (var i = 0; i < barSelectors.length; i++) { + var selector = barSelectors[i]; + var newBar = newMarkup.querySelector(selector); + var existingBar = document.querySelector(selector); + + if (newBar) { + displayBar(newBar, existingBar); + } else if (existingBar) { + existingBar.parentNode.removeChild(existingBar); + } + } + }; + + var displayBar = function (bar, container) { + if (container) { + container.innerHTML = ''; + container.appendChild(bar); + } else { + // per Ratchet's CSS, bar elements must be the first thing in + // here we assume `.content` is an immediate child of + document.body.insertBefore(bar, document.querySelector(contentSelector)); + } + }; + + var transitionContent = function (swap, container, transition, complete) { + var enter; + var containerDirection; + var swapDirection; + + enter = /in$/.test(transition); + + if (transition === 'fade') { + container.classList.add('in'); + container.classList.add('fade'); + swap.classList.add('fade'); + } + + if (/slide/.test(transition)) { + swap.classList.add('sliding-in', enter ? 'right' : 'left'); + swap.classList.add('sliding'); + container.classList.add('sliding'); + } + + container.parentNode.insertBefore(swap, container); + + if (transition === 'fade') { + container.offsetWidth; // force reflow + container.classList.remove('in'); + var fadeContainerEnd = function () { + container.removeEventListener('webkitTransitionEnd', fadeContainerEnd); + swap.classList.add('in'); + swap.addEventListener('webkitTransitionEnd', fadeSwapEnd); + }; + var fadeSwapEnd = function () { + swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd); + container.parentNode.removeChild(container); + swap.classList.remove('fade'); + swap.classList.remove('in'); + complete && complete(); + }; + container.addEventListener('webkitTransitionEnd', fadeContainerEnd); + } + + if (/slide/.test(transition)) { + var slideEnd = function () { + swap.removeEventListener('webkitTransitionEnd', slideEnd); + swap.classList.remove('sliding', 'sliding-in'); + swap.classList.remove(swapDirection); + container.parentNode.removeChild(container); + complete && complete(); + }; + + container.offsetWidth; // force reflow + swapDirection = enter ? 'right' : 'left'; + containerDirection = enter ? 'left' : 'right'; + container.classList.add(containerDirection); + swap.classList.remove(swapDirection); + swap.addEventListener('webkitTransitionEnd', slideEnd); + } + }; + + // `contents` can either be a string of HTML or a DOM object. + // Either way, `contents` must include: + // * bar elements (optional -- see `barSelectors`) + // * a single content element + // All as children of a single parent. + // + // For example: + //
+ //
+ //
+ //
+ //
+ var TRANSITION = function (contents, transition, complete) { + + if(typeof(contents) === 'string' || contents instanceof String) { + var div = document.createElement('div'); + div.innerHTML = contents; + contents = div.childNodes[0]; + } + + if (transition) { + updateBars(contents); + + var existingContentDiv = document.querySelector(contentSelector); + var newContentDiv = contents.querySelector(contentSelector); + transitionContent(newContentDiv, existingContentDiv, + transition, complete); + } else { + document.body.innerHTML = ''; + document.body.appendChild(contents); + complete && complete(); + } + }; + + window.TRANSITION = TRANSITION; +}()); + /* ======================================================================== * Ratchet: push.js v2.0.2 * http://goratchet.com/components#push @@ -146,7 +290,7 @@ * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) * ======================================================================== */ -/* global _gaq: true */ +/* global _gaq, TRANSITION */ !(function () { 'use strict'; @@ -168,13 +312,6 @@ fade : 'fade' }; - var bars = { - bartab : '.bar-tab', - barnav : '.bar-nav', - barfooter : '.bar-footer', - barheadersecondary : '.bar-header-secondary' - }; - var cacheReplace = function (data, updates) { PUSH.id = data.id; if (updates) { @@ -264,8 +401,6 @@ }; var popstate = function (e) { - var key; - var barElement; var activeObj; var activeDom; var direction; @@ -313,27 +448,11 @@ }); } - if (transitionFromObj.transition) { - activeObj = extendWithDom(activeObj, '.content', activeDom.cloneNode(true)); - for (key in bars) { - if (bars.hasOwnProperty(key)) { - barElement = document.querySelector(bars[key]); - if (activeObj[key]) { - swapContent(activeObj[key], barElement); - } else if (barElement) { - barElement.parentNode.removeChild(barElement); - } - } - } - } - - swapContent( - (activeObj.contents || activeDom).cloneNode(true), - document.querySelector('.content'), - transition, function() { - triggerStateChange(); - } - ); + TRANSITION(activeDom.cloneNode(true), + transitionFromObj.transition, + function() { + triggerStateChange(); + }); PUSH.id = id; @@ -345,17 +464,8 @@ // ======================= var PUSH = function (options) { - var key; var xhr = PUSH.xhr; - options.container = options.container || options.transition ? document.querySelector('.content') : document.body; - - for (key in bars) { - if (bars.hasOwnProperty(key)) { - options[key] = options[key] || document.querySelector(bars[key]); - } - } - if (xhr && xhr.readyState < 4) { xhr.onreadystatechange = noop; xhr.abort(); @@ -406,8 +516,6 @@ // ================= var success = function (xhr, options) { - var key; - var barElement; var data = parseXHR(xhr, options); if (!data.contents) { @@ -418,20 +526,7 @@ document.title = data.title; } - if (options.transition) { - for (key in bars) { - if (bars.hasOwnProperty(key)) { - barElement = document.querySelector(bars[key]); - if (data[key]) { - swapContent(data[key], barElement); - } else if (barElement) { - barElement.parentNode.removeChild(barElement); - } - } - } - } - - swapContent(data.contents, options.container, options.transition, function () { + TRANSITION(data.contents, options.transition, function () { cacheReplace({ id : options.id || +new Date(), url : data.url, @@ -442,6 +537,7 @@ triggerStateChange(); }); + if (!options.ignorePush && window._gaq) { _gaq.push(['_trackPageview']); // google analytics } @@ -458,78 +554,6 @@ // PUSH helpers // ============ - var swapContent = function (swap, container, transition, complete) { - var enter; - var containerDirection; - var swapDirection; - - if (!transition) { - if (container) { - container.innerHTML = swap.innerHTML; - } else if (swap.classList.contains('content')) { - document.body.appendChild(swap); - } else { - document.body.insertBefore(swap, document.querySelector('.content')); - } - } else { - enter = /in$/.test(transition); - - if (transition === 'fade') { - container.classList.add('in'); - container.classList.add('fade'); - swap.classList.add('fade'); - } - - if (/slide/.test(transition)) { - swap.classList.add('sliding-in', enter ? 'right' : 'left'); - swap.classList.add('sliding'); - container.classList.add('sliding'); - } - - container.parentNode.insertBefore(swap, container); - } - - if (!transition) { - complete && complete(); - } - - if (transition === 'fade') { - container.offsetWidth; // force reflow - container.classList.remove('in'); - var fadeContainerEnd = function () { - container.removeEventListener('webkitTransitionEnd', fadeContainerEnd); - swap.classList.add('in'); - swap.addEventListener('webkitTransitionEnd', fadeSwapEnd); - }; - var fadeSwapEnd = function () { - swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd); - container.parentNode.removeChild(container); - swap.classList.remove('fade'); - swap.classList.remove('in'); - complete && complete(); - }; - container.addEventListener('webkitTransitionEnd', fadeContainerEnd); - - } - - if (/slide/.test(transition)) { - var slideEnd = function () { - swap.removeEventListener('webkitTransitionEnd', slideEnd); - swap.classList.remove('sliding', 'sliding-in'); - swap.classList.remove(swapDirection); - container.parentNode.removeChild(container); - complete && complete(); - }; - - container.offsetWidth; // force reflow - swapDirection = enter ? 'right' : 'left'; - containerDirection = enter ? 'left' : 'right'; - container.classList.add(containerDirection); - swap.classList.remove(swapDirection); - swap.addEventListener('webkitTransitionEnd', slideEnd); - } - }; - var triggerStateChange = function () { var e = new CustomEvent('push', { detail: { state: getCached(PUSH.id) }, @@ -558,29 +582,6 @@ window.location.replace(url); }; - var extendWithDom = function (obj, fragment, dom) { - var i; - var result = {}; - - for (i in obj) { - if (obj.hasOwnProperty(i)) { - result[i] = obj[i]; - } - } - - Object.keys(bars).forEach(function (key) { - var el = dom.querySelector(bars[key]); - if (el) { - el.parentNode.removeChild(el); - } - result[key] = el; - }); - - result.contents = dom.querySelector(fragment); - - return result; - }; - var parseXHR = function (xhr, options) { var head; var body; @@ -607,11 +608,7 @@ var text = 'innerText' in data.title ? 'innerText' : 'textContent'; data.title = data.title && data.title[text].trim(); - if (options.transition) { - data = extendWithDom(data, '.content', body); - } else { - data.contents = body; - } + data.contents = body; return data; }; diff --git a/dist/js/ratchet.min.js b/dist/js/ratchet.min.js index f23dc045b..33ea967be 100644 --- a/dist/js/ratchet.min.js +++ b/dist/js/ratchet.min.js @@ -7,4 +7,4 @@ * v2.0.2 designed by @connors. * ===================================================== */ -!function(){"use strict";var a=function(a){for(var b,c=document.querySelectorAll("a");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},b=function(b){var c=a(b.target);return c&&c.hash?document.querySelector(c.hash):void 0};window.addEventListener("touchend",function(a){var c=b(a);c&&(c&&c.classList.contains("modal")&&c.classList.toggle("active"),a.preventDefault())})}(),!function(){"use strict";var a,b=function(a){for(var b,c=document.querySelectorAll("a");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},c=function(){a.style.display="none",a.removeEventListener("webkitTransitionEnd",c)},d=function(){var b=document.createElement("div");return b.classList.add("backdrop"),b.addEventListener("touchend",function(){a.addEventListener("webkitTransitionEnd",c),a.classList.remove("visible"),a.parentNode.removeChild(d)}),b}(),e=function(c){var d=b(c.target);if(d&&d.hash&&!(d.hash.indexOf("/")>0)){try{a=document.querySelector(d.hash)}catch(e){a=null}if(null!==a&&a&&a.classList.contains("popover"))return a}},f=function(a){var b=e(a);b&&(b.style.display="block",b.offsetHeight,b.classList.add("visible"),b.parentNode.appendChild(d))};window.addEventListener("touchend",f)}(),!function(){"use strict";function a(){f[p.id]=document.body.cloneNode(!0)}var b,c=function(){},d=20,e=sessionStorage,f={},g={"slide-in":"slide-out","slide-out":"slide-in",fade:"fade"},h={bartab:".bar-tab",barnav:".bar-nav",barfooter:".bar-footer",barheadersecondary:".bar-header-secondary"},i=function(a,b){p.id=a.id,b&&(a=l(a.id)),e[a.id]=JSON.stringify(a),window.history.replaceState(a.id,a.title,a.url)},j=function(){var a=p.id,b=JSON.parse(e.cacheForwardStack||"[]"),c=JSON.parse(e.cacheBackStack||"[]");for(c.push(a);b.length;)delete e[b.shift()];for(;c.length>d;)delete e[c.shift()];window.history.pushState(null,"",l(p.id).url),e.cacheForwardStack=JSON.stringify(b),e.cacheBackStack=JSON.stringify(c)},k=function(a,b){var c="forward"===b,d=JSON.parse(e.cacheForwardStack||"[]"),f=JSON.parse(e.cacheBackStack||"[]"),g=c?f:d,h=c?d:f;p.id&&g.push(p.id),h.pop(),e.cacheForwardStack=JSON.stringify(d),e.cacheBackStack=JSON.stringify(f)},l=function(a){return JSON.parse(e[a]||null)||{}},m=function(a){var c=u(a.target);if(!(!c||a.which>1||a.metaKey||a.ctrlKey||b||location.protocol!==c.protocol||location.host!==c.host||!c.hash&&/#/.test(c.href)||c.hash&&c.href.replace(c.hash,"")===location.href.replace(location.hash,"")||"push"===c.getAttribute("data-ignore")))return c},n=function(a){var b=m(a);b&&(a.preventDefault(),p({url:b.href,hash:b.hash,timeout:b.getAttribute("data-timeout"),transition:b.getAttribute("data-transition")}))},o=function(a){var b,c,d,i,j,m,n,o,q=a.state;if(q&&e[q]){if(j=p.id]*>([\s\S.]*)<\/head>/i)[0],d.innerHTML=f.match(/]*>([\s\S.]*)<\/body>/i)[0]):(c=d=document.createElement("div"),c.innerHTML=f),e.title=c.querySelector("title");var g="innerText"in e.title?"innerText":"textContent";return e.title=e.title&&e.title[g].trim(),b.transition?e=w(e,".content",d):e.contents=d,e};window.addEventListener("touchstart",function(){b=!1}),window.addEventListener("touchmove",function(){b=!0}),window.addEventListener("touchend",n),window.addEventListener("click",function(a){m(a)&&a.preventDefault()}),window.addEventListener("popstate",o),window.PUSH=p}(),!function(){"use strict";var a=function(a){for(var b,c=document.querySelectorAll(".segmented-control .control-item");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a};window.addEventListener("touchend",function(b){var c,d,e,f=a(b.target),g="active",h="."+g;if(f&&(c=f.parentNode.querySelector(h),c&&c.classList.remove(g),f.classList.add(g),f.hash&&(e=document.querySelector(f.hash)))){d=e.parentNode.querySelectorAll(h);for(var i=0;i .slide-group");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},p=function(){if("webkitTransform"in c.style){var a=c.style.webkitTransform.match(/translate3d\(([^,]*)/),b=a?a[1]:0;return parseInt(b,10)}},q=function(a){var b=a?0>d?"ceil":"floor":"round";k=Math[b](p()/(m/c.children.length)),k+=a,k=Math.min(k,0),k=Math.max(-(c.children.length-1),k)},r=function(f){if(c=o(f.target)){var k=c.querySelector(".slide");m=k.offsetWidth*c.children.length,l=void 0,j=c.offsetWidth,i=1,g=-(c.children.length-1),h=+new Date,a=f.touches[0].pageX,b=f.touches[0].pageY,d=0,e=0,q(0),c.style["-webkit-transition-duration"]=0}},s=function(h){h.touches.length>1||!c||(n||(a+=h.touches[0].pageX-a-1),d=h.touches[0].pageX-a,e=h.touches[0].pageY-b,a=h.touches[0].pageX,b=h.touches[0].pageY,"undefined"==typeof l&&n&&(l=Math.abs(e)>Math.abs(d)),l||(f=d/i+p(),h.preventDefault(),i=0===k&&d>0?a/j+1.25:k===g&&0>d?Math.abs(a)/j+1.25:1,c.style.webkitTransform="translate3d("+f+"px,0,0)",n=!0))},t=function(a){c&&!l&&(n=!1,q(+new Date-h<1e3&&Math.abs(d)>15?0>d?-1:1:0),f=k*j,c.style["-webkit-transition-duration"]=".2s",c.style.webkitTransform="translate3d("+f+"px,0,0)",a=new CustomEvent("slide",{detail:{slideNumber:Math.abs(k)},bubbles:!0,cancelable:!0}),c.parentNode.dispatchEvent(a))};window.addEventListener("touchstart",r),window.addEventListener("touchmove",s),window.addEventListener("touchend",t)}(),!function(){"use strict";var a={},b=!1,c=!1,d=!1,e=function(a){for(var b,c=document.querySelectorAll(".toggle");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a};window.addEventListener("touchstart",function(c){if(c=c.originalEvent||c,d=e(c.target)){var f=d.querySelector(".toggle-handle"),g=d.clientWidth,h=f.clientWidth,i=d.classList.contains("active")?g-h:0;a={pageX:c.touches[0].pageX-i,pageY:c.touches[0].pageY},b=!1}}),window.addEventListener("touchmove",function(e){if(e=e.originalEvent||e,!(e.touches.length>1)&&d){var f=d.querySelector(".toggle-handle"),g=e.touches[0],h=d.clientWidth,i=f.clientWidth,j=h-i;if(b=!0,c=g.pageX-a.pageX,!(Math.abs(c)c)return f.style.webkitTransform="translate3d(0,0,0)";if(c>j)return f.style.webkitTransform="translate3d("+j+"px,0,0)";f.style.webkitTransform="translate3d("+c+"px,0,0)",d.classList[c>h/2-i/2?"add":"remove"]("active")}}}),window.addEventListener("touchend",function(a){if(d){var e=d.querySelector(".toggle-handle"),f=d.clientWidth,g=e.clientWidth,h=f-g,i=!b&&!d.classList.contains("active")||b&&c>f/2-g/2;e.style.webkitTransform=i?"translate3d("+h+"px,0,0)":"translate3d(0,0,0)",d.classList[i?"add":"remove"]("active"),a=new CustomEvent("toggle",{detail:{isActive:i},bubbles:!0,cancelable:!0}),d.dispatchEvent(a),b=!1,d=!1}})}(); \ No newline at end of file +!function(){"use strict";var a=function(a){for(var b,c=document.querySelectorAll("a");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},b=function(b){var c=a(b.target);return c&&c.hash?document.querySelector(c.hash):void 0};window.addEventListener("touchend",function(a){var c=b(a);c&&(c&&c.classList.contains("modal")&&c.classList.toggle("active"),a.preventDefault())})}(),!function(){"use strict";var a,b=function(a){for(var b,c=document.querySelectorAll("a");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},c=function(){a.style.display="none",a.removeEventListener("webkitTransitionEnd",c)},d=function(){var b=document.createElement("div");return b.classList.add("backdrop"),b.addEventListener("touchend",function(){a.addEventListener("webkitTransitionEnd",c),a.classList.remove("visible"),a.parentNode.removeChild(d)}),b}(),e=function(c){var d=b(c.target);if(d&&d.hash&&!(d.hash.indexOf("/")>0)){try{a=document.querySelector(d.hash)}catch(e){a=null}if(null!==a&&a&&a.classList.contains("popover"))return a}},f=function(a){var b=e(a);b&&(b.style.display="block",b.offsetHeight,b.classList.add("visible"),b.parentNode.appendChild(d))};window.addEventListener("touchend",f)}(),!function(){"use strict";var a=[".bar-tab",".bar-nav",".bar-footer",".bar-header-secondary"],b=".content",c=function(b){for(var c=0;cd;)delete e[c.shift()];window.history.pushState(null,"",k(o.id).url),e.cacheForwardStack=JSON.stringify(b),e.cacheBackStack=JSON.stringify(c)},j=function(a,b){var c="forward"===b,d=JSON.parse(e.cacheForwardStack||"[]"),f=JSON.parse(e.cacheBackStack||"[]"),g=c?f:d,h=c?d:f;o.id&&g.push(o.id),h.pop(),e.cacheForwardStack=JSON.stringify(d),e.cacheBackStack=JSON.stringify(f)},k=function(a){return JSON.parse(e[a]||null)||{}},l=function(a){var c=s(a.target);if(!(!c||a.which>1||a.metaKey||a.ctrlKey||b||location.protocol!==c.protocol||location.host!==c.host||!c.hash&&/#/.test(c.href)||c.hash&&c.href.replace(c.hash,"")===location.href.replace(location.hash,"")||"push"===c.getAttribute("data-ignore")))return c},m=function(a){var b=l(a);b&&(a.preventDefault(),o({url:b.href,hash:b.hash,timeout:b.getAttribute("data-timeout"),transition:b.getAttribute("data-transition")}))},n=function(a){var b,c,d,h,i,l,m=a.state;if(m&&e[m]){if(d=o.id]*>([\s\S.]*)<\/head>/i)[0],d.innerHTML=f.match(/]*>([\s\S.]*)<\/body>/i)[0]):(c=d=document.createElement("div"),c.innerHTML=f),e.title=c.querySelector("title");var g="innerText"in e.title?"innerText":"textContent";return e.title=e.title&&e.title[g].trim(),e.contents=d,e};window.addEventListener("touchstart",function(){b=!1}),window.addEventListener("touchmove",function(){b=!0}),window.addEventListener("touchend",m),window.addEventListener("click",function(a){l(a)&&a.preventDefault()}),window.addEventListener("popstate",n),window.PUSH=o}(),!function(){"use strict";var a=function(a){for(var b,c=document.querySelectorAll(".segmented-control .control-item");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a};window.addEventListener("touchend",function(b){var c,d,e,f=a(b.target),g="active",h="."+g;if(f&&(c=f.parentNode.querySelector(h),c&&c.classList.remove(g),f.classList.add(g),f.hash&&(e=document.querySelector(f.hash)))){d=e.parentNode.querySelectorAll(h);for(var i=0;i .slide-group");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},p=function(){if("webkitTransform"in c.style){var a=c.style.webkitTransform.match(/translate3d\(([^,]*)/),b=a?a[1]:0;return parseInt(b,10)}},q=function(a){var b=a?0>d?"ceil":"floor":"round";k=Math[b](p()/(m/c.children.length)),k+=a,k=Math.min(k,0),k=Math.max(-(c.children.length-1),k)},r=function(f){if(c=o(f.target)){var k=c.querySelector(".slide");m=k.offsetWidth*c.children.length,l=void 0,j=c.offsetWidth,i=1,g=-(c.children.length-1),h=+new Date,a=f.touches[0].pageX,b=f.touches[0].pageY,d=0,e=0,q(0),c.style["-webkit-transition-duration"]=0}},s=function(h){h.touches.length>1||!c||(n||(a+=h.touches[0].pageX-a-1),d=h.touches[0].pageX-a,e=h.touches[0].pageY-b,a=h.touches[0].pageX,b=h.touches[0].pageY,"undefined"==typeof l&&n&&(l=Math.abs(e)>Math.abs(d)),l||(f=d/i+p(),h.preventDefault(),i=0===k&&d>0?a/j+1.25:k===g&&0>d?Math.abs(a)/j+1.25:1,c.style.webkitTransform="translate3d("+f+"px,0,0)",n=!0))},t=function(a){c&&!l&&(n=!1,q(+new Date-h<1e3&&Math.abs(d)>15?0>d?-1:1:0),f=k*j,c.style["-webkit-transition-duration"]=".2s",c.style.webkitTransform="translate3d("+f+"px,0,0)",a=new CustomEvent("slide",{detail:{slideNumber:Math.abs(k)},bubbles:!0,cancelable:!0}),c.parentNode.dispatchEvent(a))};window.addEventListener("touchstart",r),window.addEventListener("touchmove",s),window.addEventListener("touchend",t)}(),!function(){"use strict";var a={},b=!1,c=!1,d=!1,e=function(a){for(var b,c=document.querySelectorAll(".toggle");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a};window.addEventListener("touchstart",function(c){if(c=c.originalEvent||c,d=e(c.target)){var f=d.querySelector(".toggle-handle"),g=d.clientWidth,h=f.clientWidth,i=d.classList.contains("active")?g-h:0;a={pageX:c.touches[0].pageX-i,pageY:c.touches[0].pageY},b=!1}}),window.addEventListener("touchmove",function(e){if(e=e.originalEvent||e,!(e.touches.length>1)&&d){var f=d.querySelector(".toggle-handle"),g=e.touches[0],h=d.clientWidth,i=f.clientWidth,j=h-i;if(b=!0,c=g.pageX-a.pageX,!(Math.abs(c)c)return f.style.webkitTransform="translate3d(0,0,0)";if(c>j)return f.style.webkitTransform="translate3d("+j+"px,0,0)";f.style.webkitTransform="translate3d("+c+"px,0,0)",d.classList[c>h/2-i/2?"add":"remove"]("active")}}}),window.addEventListener("touchend",function(a){if(d){var e=d.querySelector(".toggle-handle"),f=d.clientWidth,g=e.clientWidth,h=f-g,i=!b&&!d.classList.contains("active")||b&&c>f/2-g/2;e.style.webkitTransform=i?"translate3d("+h+"px,0,0)":"translate3d(0,0,0)",d.classList[i?"add":"remove"]("active"),a=new CustomEvent("toggle",{detail:{isActive:i},bubbles:!0,cancelable:!0}),d.dispatchEvent(a),b=!1,d=!1}})}(); \ No newline at end of file diff --git a/docs/dist/js/ratchet.js b/docs/dist/js/ratchet.js index caf42a658..1704acfa2 100644 --- a/docs/dist/js/ratchet.js +++ b/docs/dist/js/ratchet.js @@ -137,6 +137,150 @@ }()); +!(function () { + 'use strict'; + + // Ratchet's layout includes fixed position headers & footers that should always + // appear before the main .content div within + // + // These fixed bars will have new content swapped in, ignoring any + // transitions (slide-in, slide-out & fade). + // + // These following selectors define which elements are transitioned with + // simple DOM replacement and are always immediate children of + var barSelectors = [ + '.bar-tab', + '.bar-nav', + '.bar-footer', + '.bar-header-secondary' + ]; + + // Other than any fixed bars, '.content' should be the only other child of body + var contentSelector = '.content'; + + // For any bar elements in `newMarkup`, either: + // * replace an existing bar elements with new content + // * add new bar elements when an existing one isn't present + // * remove any bar elements not found in `newMarkup` + var updateBars = function (newMarkup) { + for (var i = 0; i < barSelectors.length; i++) { + var selector = barSelectors[i]; + var newBar = newMarkup.querySelector(selector); + var existingBar = document.querySelector(selector); + + if (newBar) { + displayBar(newBar, existingBar); + } else if (existingBar) { + existingBar.parentNode.removeChild(existingBar); + } + } + }; + + var displayBar = function (bar, container) { + if (container) { + container.innerHTML = ''; + container.appendChild(bar); + } else { + // per Ratchet's CSS, bar elements must be the first thing in + // here we assume `.content` is an immediate child of + document.body.insertBefore(bar, document.querySelector(contentSelector)); + } + }; + + var transitionContent = function (swap, container, transition, complete) { + var enter; + var containerDirection; + var swapDirection; + + enter = /in$/.test(transition); + + if (transition === 'fade') { + container.classList.add('in'); + container.classList.add('fade'); + swap.classList.add('fade'); + } + + if (/slide/.test(transition)) { + swap.classList.add('sliding-in', enter ? 'right' : 'left'); + swap.classList.add('sliding'); + container.classList.add('sliding'); + } + + container.parentNode.insertBefore(swap, container); + + if (transition === 'fade') { + container.offsetWidth; // force reflow + container.classList.remove('in'); + var fadeContainerEnd = function () { + container.removeEventListener('webkitTransitionEnd', fadeContainerEnd); + swap.classList.add('in'); + swap.addEventListener('webkitTransitionEnd', fadeSwapEnd); + }; + var fadeSwapEnd = function () { + swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd); + container.parentNode.removeChild(container); + swap.classList.remove('fade'); + swap.classList.remove('in'); + complete && complete(); + }; + container.addEventListener('webkitTransitionEnd', fadeContainerEnd); + } + + if (/slide/.test(transition)) { + var slideEnd = function () { + swap.removeEventListener('webkitTransitionEnd', slideEnd); + swap.classList.remove('sliding', 'sliding-in'); + swap.classList.remove(swapDirection); + container.parentNode.removeChild(container); + complete && complete(); + }; + + container.offsetWidth; // force reflow + swapDirection = enter ? 'right' : 'left'; + containerDirection = enter ? 'left' : 'right'; + container.classList.add(containerDirection); + swap.classList.remove(swapDirection); + swap.addEventListener('webkitTransitionEnd', slideEnd); + } + }; + + // `contents` can either be a string of HTML or a DOM object. + // Either way, `contents` must include: + // * bar elements (optional -- see `barSelectors`) + // * a single content element + // All as children of a single parent. + // + // For example: + //
+ //
+ //
+ //
+ //
+ var TRANSITION = function (contents, transition, complete) { + + if(typeof(contents) === 'string' || contents instanceof String) { + var div = document.createElement('div'); + div.innerHTML = contents; + contents = div.childNodes[0]; + } + + if (transition) { + updateBars(contents); + + var existingContentDiv = document.querySelector(contentSelector); + var newContentDiv = contents.querySelector(contentSelector); + transitionContent(newContentDiv, existingContentDiv, + transition, complete); + } else { + document.body.innerHTML = ''; + document.body.appendChild(contents); + complete && complete(); + } + }; + + window.TRANSITION = TRANSITION; +}()); + /* ======================================================================== * Ratchet: push.js v2.0.2 * http://goratchet.com/components#push @@ -146,7 +290,7 @@ * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) * ======================================================================== */ -/* global _gaq: true */ +/* global _gaq, TRANSITION */ !(function () { 'use strict'; @@ -168,13 +312,6 @@ fade : 'fade' }; - var bars = { - bartab : '.bar-tab', - barnav : '.bar-nav', - barfooter : '.bar-footer', - barheadersecondary : '.bar-header-secondary' - }; - var cacheReplace = function (data, updates) { PUSH.id = data.id; if (updates) { @@ -264,8 +401,6 @@ }; var popstate = function (e) { - var key; - var barElement; var activeObj; var activeDom; var direction; @@ -313,27 +448,11 @@ }); } - if (transitionFromObj.transition) { - activeObj = extendWithDom(activeObj, '.content', activeDom.cloneNode(true)); - for (key in bars) { - if (bars.hasOwnProperty(key)) { - barElement = document.querySelector(bars[key]); - if (activeObj[key]) { - swapContent(activeObj[key], barElement); - } else if (barElement) { - barElement.parentNode.removeChild(barElement); - } - } - } - } - - swapContent( - (activeObj.contents || activeDom).cloneNode(true), - document.querySelector('.content'), - transition, function() { - triggerStateChange(); - } - ); + TRANSITION(activeDom.cloneNode(true), + transitionFromObj.transition, + function() { + triggerStateChange(); + }); PUSH.id = id; @@ -345,17 +464,8 @@ // ======================= var PUSH = function (options) { - var key; var xhr = PUSH.xhr; - options.container = options.container || options.transition ? document.querySelector('.content') : document.body; - - for (key in bars) { - if (bars.hasOwnProperty(key)) { - options[key] = options[key] || document.querySelector(bars[key]); - } - } - if (xhr && xhr.readyState < 4) { xhr.onreadystatechange = noop; xhr.abort(); @@ -406,8 +516,6 @@ // ================= var success = function (xhr, options) { - var key; - var barElement; var data = parseXHR(xhr, options); if (!data.contents) { @@ -418,20 +526,7 @@ document.title = data.title; } - if (options.transition) { - for (key in bars) { - if (bars.hasOwnProperty(key)) { - barElement = document.querySelector(bars[key]); - if (data[key]) { - swapContent(data[key], barElement); - } else if (barElement) { - barElement.parentNode.removeChild(barElement); - } - } - } - } - - swapContent(data.contents, options.container, options.transition, function () { + TRANSITION(data.contents, options.transition, function () { cacheReplace({ id : options.id || +new Date(), url : data.url, @@ -442,6 +537,7 @@ triggerStateChange(); }); + if (!options.ignorePush && window._gaq) { _gaq.push(['_trackPageview']); // google analytics } @@ -458,78 +554,6 @@ // PUSH helpers // ============ - var swapContent = function (swap, container, transition, complete) { - var enter; - var containerDirection; - var swapDirection; - - if (!transition) { - if (container) { - container.innerHTML = swap.innerHTML; - } else if (swap.classList.contains('content')) { - document.body.appendChild(swap); - } else { - document.body.insertBefore(swap, document.querySelector('.content')); - } - } else { - enter = /in$/.test(transition); - - if (transition === 'fade') { - container.classList.add('in'); - container.classList.add('fade'); - swap.classList.add('fade'); - } - - if (/slide/.test(transition)) { - swap.classList.add('sliding-in', enter ? 'right' : 'left'); - swap.classList.add('sliding'); - container.classList.add('sliding'); - } - - container.parentNode.insertBefore(swap, container); - } - - if (!transition) { - complete && complete(); - } - - if (transition === 'fade') { - container.offsetWidth; // force reflow - container.classList.remove('in'); - var fadeContainerEnd = function () { - container.removeEventListener('webkitTransitionEnd', fadeContainerEnd); - swap.classList.add('in'); - swap.addEventListener('webkitTransitionEnd', fadeSwapEnd); - }; - var fadeSwapEnd = function () { - swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd); - container.parentNode.removeChild(container); - swap.classList.remove('fade'); - swap.classList.remove('in'); - complete && complete(); - }; - container.addEventListener('webkitTransitionEnd', fadeContainerEnd); - - } - - if (/slide/.test(transition)) { - var slideEnd = function () { - swap.removeEventListener('webkitTransitionEnd', slideEnd); - swap.classList.remove('sliding', 'sliding-in'); - swap.classList.remove(swapDirection); - container.parentNode.removeChild(container); - complete && complete(); - }; - - container.offsetWidth; // force reflow - swapDirection = enter ? 'right' : 'left'; - containerDirection = enter ? 'left' : 'right'; - container.classList.add(containerDirection); - swap.classList.remove(swapDirection); - swap.addEventListener('webkitTransitionEnd', slideEnd); - } - }; - var triggerStateChange = function () { var e = new CustomEvent('push', { detail: { state: getCached(PUSH.id) }, @@ -558,29 +582,6 @@ window.location.replace(url); }; - var extendWithDom = function (obj, fragment, dom) { - var i; - var result = {}; - - for (i in obj) { - if (obj.hasOwnProperty(i)) { - result[i] = obj[i]; - } - } - - Object.keys(bars).forEach(function (key) { - var el = dom.querySelector(bars[key]); - if (el) { - el.parentNode.removeChild(el); - } - result[key] = el; - }); - - result.contents = dom.querySelector(fragment); - - return result; - }; - var parseXHR = function (xhr, options) { var head; var body; @@ -607,11 +608,7 @@ var text = 'innerText' in data.title ? 'innerText' : 'textContent'; data.title = data.title && data.title[text].trim(); - if (options.transition) { - data = extendWithDom(data, '.content', body); - } else { - data.contents = body; - } + data.contents = body; return data; }; diff --git a/docs/dist/js/ratchet.min.js b/docs/dist/js/ratchet.min.js index f23dc045b..33ea967be 100644 --- a/docs/dist/js/ratchet.min.js +++ b/docs/dist/js/ratchet.min.js @@ -7,4 +7,4 @@ * v2.0.2 designed by @connors. * ===================================================== */ -!function(){"use strict";var a=function(a){for(var b,c=document.querySelectorAll("a");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},b=function(b){var c=a(b.target);return c&&c.hash?document.querySelector(c.hash):void 0};window.addEventListener("touchend",function(a){var c=b(a);c&&(c&&c.classList.contains("modal")&&c.classList.toggle("active"),a.preventDefault())})}(),!function(){"use strict";var a,b=function(a){for(var b,c=document.querySelectorAll("a");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},c=function(){a.style.display="none",a.removeEventListener("webkitTransitionEnd",c)},d=function(){var b=document.createElement("div");return b.classList.add("backdrop"),b.addEventListener("touchend",function(){a.addEventListener("webkitTransitionEnd",c),a.classList.remove("visible"),a.parentNode.removeChild(d)}),b}(),e=function(c){var d=b(c.target);if(d&&d.hash&&!(d.hash.indexOf("/")>0)){try{a=document.querySelector(d.hash)}catch(e){a=null}if(null!==a&&a&&a.classList.contains("popover"))return a}},f=function(a){var b=e(a);b&&(b.style.display="block",b.offsetHeight,b.classList.add("visible"),b.parentNode.appendChild(d))};window.addEventListener("touchend",f)}(),!function(){"use strict";function a(){f[p.id]=document.body.cloneNode(!0)}var b,c=function(){},d=20,e=sessionStorage,f={},g={"slide-in":"slide-out","slide-out":"slide-in",fade:"fade"},h={bartab:".bar-tab",barnav:".bar-nav",barfooter:".bar-footer",barheadersecondary:".bar-header-secondary"},i=function(a,b){p.id=a.id,b&&(a=l(a.id)),e[a.id]=JSON.stringify(a),window.history.replaceState(a.id,a.title,a.url)},j=function(){var a=p.id,b=JSON.parse(e.cacheForwardStack||"[]"),c=JSON.parse(e.cacheBackStack||"[]");for(c.push(a);b.length;)delete e[b.shift()];for(;c.length>d;)delete e[c.shift()];window.history.pushState(null,"",l(p.id).url),e.cacheForwardStack=JSON.stringify(b),e.cacheBackStack=JSON.stringify(c)},k=function(a,b){var c="forward"===b,d=JSON.parse(e.cacheForwardStack||"[]"),f=JSON.parse(e.cacheBackStack||"[]"),g=c?f:d,h=c?d:f;p.id&&g.push(p.id),h.pop(),e.cacheForwardStack=JSON.stringify(d),e.cacheBackStack=JSON.stringify(f)},l=function(a){return JSON.parse(e[a]||null)||{}},m=function(a){var c=u(a.target);if(!(!c||a.which>1||a.metaKey||a.ctrlKey||b||location.protocol!==c.protocol||location.host!==c.host||!c.hash&&/#/.test(c.href)||c.hash&&c.href.replace(c.hash,"")===location.href.replace(location.hash,"")||"push"===c.getAttribute("data-ignore")))return c},n=function(a){var b=m(a);b&&(a.preventDefault(),p({url:b.href,hash:b.hash,timeout:b.getAttribute("data-timeout"),transition:b.getAttribute("data-transition")}))},o=function(a){var b,c,d,i,j,m,n,o,q=a.state;if(q&&e[q]){if(j=p.id]*>([\s\S.]*)<\/head>/i)[0],d.innerHTML=f.match(/]*>([\s\S.]*)<\/body>/i)[0]):(c=d=document.createElement("div"),c.innerHTML=f),e.title=c.querySelector("title");var g="innerText"in e.title?"innerText":"textContent";return e.title=e.title&&e.title[g].trim(),b.transition?e=w(e,".content",d):e.contents=d,e};window.addEventListener("touchstart",function(){b=!1}),window.addEventListener("touchmove",function(){b=!0}),window.addEventListener("touchend",n),window.addEventListener("click",function(a){m(a)&&a.preventDefault()}),window.addEventListener("popstate",o),window.PUSH=p}(),!function(){"use strict";var a=function(a){for(var b,c=document.querySelectorAll(".segmented-control .control-item");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a};window.addEventListener("touchend",function(b){var c,d,e,f=a(b.target),g="active",h="."+g;if(f&&(c=f.parentNode.querySelector(h),c&&c.classList.remove(g),f.classList.add(g),f.hash&&(e=document.querySelector(f.hash)))){d=e.parentNode.querySelectorAll(h);for(var i=0;i .slide-group");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},p=function(){if("webkitTransform"in c.style){var a=c.style.webkitTransform.match(/translate3d\(([^,]*)/),b=a?a[1]:0;return parseInt(b,10)}},q=function(a){var b=a?0>d?"ceil":"floor":"round";k=Math[b](p()/(m/c.children.length)),k+=a,k=Math.min(k,0),k=Math.max(-(c.children.length-1),k)},r=function(f){if(c=o(f.target)){var k=c.querySelector(".slide");m=k.offsetWidth*c.children.length,l=void 0,j=c.offsetWidth,i=1,g=-(c.children.length-1),h=+new Date,a=f.touches[0].pageX,b=f.touches[0].pageY,d=0,e=0,q(0),c.style["-webkit-transition-duration"]=0}},s=function(h){h.touches.length>1||!c||(n||(a+=h.touches[0].pageX-a-1),d=h.touches[0].pageX-a,e=h.touches[0].pageY-b,a=h.touches[0].pageX,b=h.touches[0].pageY,"undefined"==typeof l&&n&&(l=Math.abs(e)>Math.abs(d)),l||(f=d/i+p(),h.preventDefault(),i=0===k&&d>0?a/j+1.25:k===g&&0>d?Math.abs(a)/j+1.25:1,c.style.webkitTransform="translate3d("+f+"px,0,0)",n=!0))},t=function(a){c&&!l&&(n=!1,q(+new Date-h<1e3&&Math.abs(d)>15?0>d?-1:1:0),f=k*j,c.style["-webkit-transition-duration"]=".2s",c.style.webkitTransform="translate3d("+f+"px,0,0)",a=new CustomEvent("slide",{detail:{slideNumber:Math.abs(k)},bubbles:!0,cancelable:!0}),c.parentNode.dispatchEvent(a))};window.addEventListener("touchstart",r),window.addEventListener("touchmove",s),window.addEventListener("touchend",t)}(),!function(){"use strict";var a={},b=!1,c=!1,d=!1,e=function(a){for(var b,c=document.querySelectorAll(".toggle");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a};window.addEventListener("touchstart",function(c){if(c=c.originalEvent||c,d=e(c.target)){var f=d.querySelector(".toggle-handle"),g=d.clientWidth,h=f.clientWidth,i=d.classList.contains("active")?g-h:0;a={pageX:c.touches[0].pageX-i,pageY:c.touches[0].pageY},b=!1}}),window.addEventListener("touchmove",function(e){if(e=e.originalEvent||e,!(e.touches.length>1)&&d){var f=d.querySelector(".toggle-handle"),g=e.touches[0],h=d.clientWidth,i=f.clientWidth,j=h-i;if(b=!0,c=g.pageX-a.pageX,!(Math.abs(c)c)return f.style.webkitTransform="translate3d(0,0,0)";if(c>j)return f.style.webkitTransform="translate3d("+j+"px,0,0)";f.style.webkitTransform="translate3d("+c+"px,0,0)",d.classList[c>h/2-i/2?"add":"remove"]("active")}}}),window.addEventListener("touchend",function(a){if(d){var e=d.querySelector(".toggle-handle"),f=d.clientWidth,g=e.clientWidth,h=f-g,i=!b&&!d.classList.contains("active")||b&&c>f/2-g/2;e.style.webkitTransform=i?"translate3d("+h+"px,0,0)":"translate3d(0,0,0)",d.classList[i?"add":"remove"]("active"),a=new CustomEvent("toggle",{detail:{isActive:i},bubbles:!0,cancelable:!0}),d.dispatchEvent(a),b=!1,d=!1}})}(); \ No newline at end of file +!function(){"use strict";var a=function(a){for(var b,c=document.querySelectorAll("a");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},b=function(b){var c=a(b.target);return c&&c.hash?document.querySelector(c.hash):void 0};window.addEventListener("touchend",function(a){var c=b(a);c&&(c&&c.classList.contains("modal")&&c.classList.toggle("active"),a.preventDefault())})}(),!function(){"use strict";var a,b=function(a){for(var b,c=document.querySelectorAll("a");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},c=function(){a.style.display="none",a.removeEventListener("webkitTransitionEnd",c)},d=function(){var b=document.createElement("div");return b.classList.add("backdrop"),b.addEventListener("touchend",function(){a.addEventListener("webkitTransitionEnd",c),a.classList.remove("visible"),a.parentNode.removeChild(d)}),b}(),e=function(c){var d=b(c.target);if(d&&d.hash&&!(d.hash.indexOf("/")>0)){try{a=document.querySelector(d.hash)}catch(e){a=null}if(null!==a&&a&&a.classList.contains("popover"))return a}},f=function(a){var b=e(a);b&&(b.style.display="block",b.offsetHeight,b.classList.add("visible"),b.parentNode.appendChild(d))};window.addEventListener("touchend",f)}(),!function(){"use strict";var a=[".bar-tab",".bar-nav",".bar-footer",".bar-header-secondary"],b=".content",c=function(b){for(var c=0;cd;)delete e[c.shift()];window.history.pushState(null,"",k(o.id).url),e.cacheForwardStack=JSON.stringify(b),e.cacheBackStack=JSON.stringify(c)},j=function(a,b){var c="forward"===b,d=JSON.parse(e.cacheForwardStack||"[]"),f=JSON.parse(e.cacheBackStack||"[]"),g=c?f:d,h=c?d:f;o.id&&g.push(o.id),h.pop(),e.cacheForwardStack=JSON.stringify(d),e.cacheBackStack=JSON.stringify(f)},k=function(a){return JSON.parse(e[a]||null)||{}},l=function(a){var c=s(a.target);if(!(!c||a.which>1||a.metaKey||a.ctrlKey||b||location.protocol!==c.protocol||location.host!==c.host||!c.hash&&/#/.test(c.href)||c.hash&&c.href.replace(c.hash,"")===location.href.replace(location.hash,"")||"push"===c.getAttribute("data-ignore")))return c},m=function(a){var b=l(a);b&&(a.preventDefault(),o({url:b.href,hash:b.hash,timeout:b.getAttribute("data-timeout"),transition:b.getAttribute("data-transition")}))},n=function(a){var b,c,d,h,i,l,m=a.state;if(m&&e[m]){if(d=o.id]*>([\s\S.]*)<\/head>/i)[0],d.innerHTML=f.match(/]*>([\s\S.]*)<\/body>/i)[0]):(c=d=document.createElement("div"),c.innerHTML=f),e.title=c.querySelector("title");var g="innerText"in e.title?"innerText":"textContent";return e.title=e.title&&e.title[g].trim(),e.contents=d,e};window.addEventListener("touchstart",function(){b=!1}),window.addEventListener("touchmove",function(){b=!0}),window.addEventListener("touchend",m),window.addEventListener("click",function(a){l(a)&&a.preventDefault()}),window.addEventListener("popstate",n),window.PUSH=o}(),!function(){"use strict";var a=function(a){for(var b,c=document.querySelectorAll(".segmented-control .control-item");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a};window.addEventListener("touchend",function(b){var c,d,e,f=a(b.target),g="active",h="."+g;if(f&&(c=f.parentNode.querySelector(h),c&&c.classList.remove(g),f.classList.add(g),f.hash&&(e=document.querySelector(f.hash)))){d=e.parentNode.querySelectorAll(h);for(var i=0;i .slide-group");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},p=function(){if("webkitTransform"in c.style){var a=c.style.webkitTransform.match(/translate3d\(([^,]*)/),b=a?a[1]:0;return parseInt(b,10)}},q=function(a){var b=a?0>d?"ceil":"floor":"round";k=Math[b](p()/(m/c.children.length)),k+=a,k=Math.min(k,0),k=Math.max(-(c.children.length-1),k)},r=function(f){if(c=o(f.target)){var k=c.querySelector(".slide");m=k.offsetWidth*c.children.length,l=void 0,j=c.offsetWidth,i=1,g=-(c.children.length-1),h=+new Date,a=f.touches[0].pageX,b=f.touches[0].pageY,d=0,e=0,q(0),c.style["-webkit-transition-duration"]=0}},s=function(h){h.touches.length>1||!c||(n||(a+=h.touches[0].pageX-a-1),d=h.touches[0].pageX-a,e=h.touches[0].pageY-b,a=h.touches[0].pageX,b=h.touches[0].pageY,"undefined"==typeof l&&n&&(l=Math.abs(e)>Math.abs(d)),l||(f=d/i+p(),h.preventDefault(),i=0===k&&d>0?a/j+1.25:k===g&&0>d?Math.abs(a)/j+1.25:1,c.style.webkitTransform="translate3d("+f+"px,0,0)",n=!0))},t=function(a){c&&!l&&(n=!1,q(+new Date-h<1e3&&Math.abs(d)>15?0>d?-1:1:0),f=k*j,c.style["-webkit-transition-duration"]=".2s",c.style.webkitTransform="translate3d("+f+"px,0,0)",a=new CustomEvent("slide",{detail:{slideNumber:Math.abs(k)},bubbles:!0,cancelable:!0}),c.parentNode.dispatchEvent(a))};window.addEventListener("touchstart",r),window.addEventListener("touchmove",s),window.addEventListener("touchend",t)}(),!function(){"use strict";var a={},b=!1,c=!1,d=!1,e=function(a){for(var b,c=document.querySelectorAll(".toggle");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a};window.addEventListener("touchstart",function(c){if(c=c.originalEvent||c,d=e(c.target)){var f=d.querySelector(".toggle-handle"),g=d.clientWidth,h=f.clientWidth,i=d.classList.contains("active")?g-h:0;a={pageX:c.touches[0].pageX-i,pageY:c.touches[0].pageY},b=!1}}),window.addEventListener("touchmove",function(e){if(e=e.originalEvent||e,!(e.touches.length>1)&&d){var f=d.querySelector(".toggle-handle"),g=e.touches[0],h=d.clientWidth,i=f.clientWidth,j=h-i;if(b=!0,c=g.pageX-a.pageX,!(Math.abs(c)c)return f.style.webkitTransform="translate3d(0,0,0)";if(c>j)return f.style.webkitTransform="translate3d("+j+"px,0,0)";f.style.webkitTransform="translate3d("+c+"px,0,0)",d.classList[c>h/2-i/2?"add":"remove"]("active")}}}),window.addEventListener("touchend",function(a){if(d){var e=d.querySelector(".toggle-handle"),f=d.clientWidth,g=e.clientWidth,h=f-g,i=!b&&!d.classList.contains("active")||b&&c>f/2-g/2;e.style.webkitTransform=i?"translate3d("+h+"px,0,0)":"translate3d(0,0,0)",d.classList[i?"add":"remove"]("active"),a=new CustomEvent("toggle",{detail:{isActive:i},bubbles:!0,cancelable:!0}),d.dispatchEvent(a),b=!1,d=!1}})}(); \ No newline at end of file