From 36b01f903d5fe59afc2abf75f026a36d8ddab584 Mon Sep 17 00:00:00 2001 From: Tslmy Date: Thu, 22 Aug 2013 18:42:21 +0800 Subject: [PATCH] Adding Master-Detail View for iPad --- Master-Detail View Usage.md | 31 + lib/css/masterdetail.css | 17 + lib/css/overallfixing.css | 19 + lib/js/inobounce.min.js | 1 + lib/js/masterdetail.js | 0 test/masterdetail/Master-Detail View Usage.md | 31 + test/masterdetail/index.html | 108 ++ test/masterdetail/inobounce.min.js | 1 + test/masterdetail/masterdetail.css | 17 + test/masterdetail/masterdetail.js | 0 test/masterdetail/overallfixing.css | 19 + test/masterdetail/ratchet.css | 1292 +++++++++++++++++ test/masterdetail/ratchet.js | 767 ++++++++++ 13 files changed, 2303 insertions(+) create mode 100644 Master-Detail View Usage.md create mode 100644 lib/css/masterdetail.css create mode 100644 lib/css/overallfixing.css create mode 100644 lib/js/inobounce.min.js create mode 100644 lib/js/masterdetail.js create mode 100644 test/masterdetail/Master-Detail View Usage.md create mode 100644 test/masterdetail/index.html create mode 100644 test/masterdetail/inobounce.min.js create mode 100644 test/masterdetail/masterdetail.css create mode 100644 test/masterdetail/masterdetail.js create mode 100644 test/masterdetail/overallfixing.css create mode 100644 test/masterdetail/ratchet.css create mode 100644 test/masterdetail/ratchet.js diff --git a/Master-Detail View Usage.md b/Master-Detail View Usage.md new file mode 100644 index 0000000..4917386 --- /dev/null +++ b/Master-Detail View Usage.md @@ -0,0 +1,31 @@ +Master-Detail View Usage +=================== +I([tslmy](http://www.tslimi.tk/)) think _Ratchet_ should not limit its great power to iPhone and iPod touch. Instead, iPad should be taken into consideration as well. The most different part in styling an app(between iPhone/iPod touch and iPad, of course) is that iPad has a "master-detail" view. While iPhone/iPod touch switches from master view and detail view back and forth, iPad show them simultaneously. + +Best example is your Settings app. + +Usage +------ +Since I haven't merge my code into _Ratchet_ itself, you have to import/link to/include my files manually. + +This can be achieved by adding the following codes into ``: + + + + +(Yes, I highly recommend you add `inobounce.min.js`, which solve the problem of _moving the view up and down_ perfectly.) + +Then, change `` into: + + +Wrap a panel(an orginal page, or "``") with `
` and another with `
`. + +You are good to go. + +To do +----- +1. Currently, `masterdetail.js` is still empty(so there's no need to include it in `` presently). + +2. List links in master panel should target at detail panel. + +3. Some apps may want the detail panel to take over the whole screen, leaving master panel sliding in and out from the left side. \ No newline at end of file diff --git a/lib/css/masterdetail.css b/lib/css/masterdetail.css new file mode 100644 index 0000000..041bdaf --- /dev/null +++ b/lib/css/masterdetail.css @@ -0,0 +1,17 @@ +.masterDetail .master, .masterDetail .detail { + height:100%; + overflow:hidden; +} +.masterDetail .bar-title{ + position: static; +} +.masterDetail .master { + position:absolute; + width:299px; + left:0; +} +.masterDetail .detail{ + position:absolute; + left:300px; + right:0; +} diff --git a/lib/css/overallfixing.css b/lib/css/overallfixing.css new file mode 100644 index 0000000..ac9b943 --- /dev/null +++ b/lib/css/overallfixing.css @@ -0,0 +1,19 @@ +body { + background:black; +} +.scrollable { + overflow: auto; + -webkit-overflow-scrolling: touch; +} + +header.bar-title { + border-radius: 7px 7px 0 0; +} + +.content { + position:absolute; + border-radius: 0 0 5px 5px; + overflow: auto; + bottom: 0px; + left: 0px; +} \ No newline at end of file diff --git a/lib/js/inobounce.min.js b/lib/js/inobounce.min.js new file mode 100644 index 0000000..e660688 --- /dev/null +++ b/lib/js/inobounce.min.js @@ -0,0 +1 @@ +!function(global){var startY=0;var enabled=false;var handleTouchmove=function(evt){var el=evt.target;while(el!==document.body){var style=window.getComputedStyle(el);var scrolling=style.getPropertyValue("-webkit-overflow-scrolling");var overflow=style.getPropertyValue("overflow");var height=parseInt(style.getPropertyValue("height"),10);var isScrollable=scrolling==="touch"&&overflow==="auto";var canScroll=el.scrollHeight>el.offsetHeight;if(isScrollable&&canScroll){var curY=evt.touches?evt.touches[0].screenY:evt.screenY;var isAtTop=startY<=curY&&el.scrollTop===0;var isAtBottom=startY>=curY&&el.scrollHeight-el.scrollTop===height;if(isAtTop||isAtBottom){evt.preventDefault()}return}el=el.parentNode}evt.preventDefault()};var handleTouchstart=function(evt){startY=evt.touches?evt.touches[0].screenY:evt.screenY};var enable=function(){window.addEventListener("touchstart",handleTouchstart,false);window.addEventListener("touchmove",handleTouchmove,false);enabled=true};var disable=function(){window.removeEventListener("touchstart",handleTouchstart,false);window.removeEventListener("touchmove",handleTouchmove,false);enabled=false};var isEnabled=function(){return enabled};var scrollSupport=window.getComputedStyle(document.createElement("div"))["-webkit-overflow-scrolling"];if(typeof scrollSupport!=="undefined"){enable()}var iNoBounce={enable:enable,disable:disable,isEnabled:isEnabled};if(typeof global.define==="function"){!function(define){define(function(){return iNoBounce})}(global.define)}else{global.iNoBounce=iNoBounce}}(this); \ No newline at end of file diff --git a/lib/js/masterdetail.js b/lib/js/masterdetail.js new file mode 100644 index 0000000..e69de29 diff --git a/test/masterdetail/Master-Detail View Usage.md b/test/masterdetail/Master-Detail View Usage.md new file mode 100644 index 0000000..4917386 --- /dev/null +++ b/test/masterdetail/Master-Detail View Usage.md @@ -0,0 +1,31 @@ +Master-Detail View Usage +=================== +I([tslmy](http://www.tslimi.tk/)) think _Ratchet_ should not limit its great power to iPhone and iPod touch. Instead, iPad should be taken into consideration as well. The most different part in styling an app(between iPhone/iPod touch and iPad, of course) is that iPad has a "master-detail" view. While iPhone/iPod touch switches from master view and detail view back and forth, iPad show them simultaneously. + +Best example is your Settings app. + +Usage +------ +Since I haven't merge my code into _Ratchet_ itself, you have to import/link to/include my files manually. + +This can be achieved by adding the following codes into ``: + + + + +(Yes, I highly recommend you add `inobounce.min.js`, which solve the problem of _moving the view up and down_ perfectly.) + +Then, change `` into: + + +Wrap a panel(an orginal page, or "``") with `
` and another with `
`. + +You are good to go. + +To do +----- +1. Currently, `masterdetail.js` is still empty(so there's no need to include it in `` presently). + +2. List links in master panel should target at detail panel. + +3. Some apps may want the detail panel to take over the whole screen, leaving master panel sliding in and out from the left side. \ No newline at end of file diff --git a/test/masterdetail/index.html b/test/masterdetail/index.html new file mode 100644 index 0000000..6f9347a --- /dev/null +++ b/test/masterdetail/index.html @@ -0,0 +1,108 @@ + + + + + Ratchet template page + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+

Master

+
+ + +
+ + +
+
+
+ +
+ + Previous + +

Detail

+ + Right + +
+ + +
+
+

Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:

+
+ + + +
+
+ + \ No newline at end of file diff --git a/test/masterdetail/inobounce.min.js b/test/masterdetail/inobounce.min.js new file mode 100644 index 0000000..e660688 --- /dev/null +++ b/test/masterdetail/inobounce.min.js @@ -0,0 +1 @@ +!function(global){var startY=0;var enabled=false;var handleTouchmove=function(evt){var el=evt.target;while(el!==document.body){var style=window.getComputedStyle(el);var scrolling=style.getPropertyValue("-webkit-overflow-scrolling");var overflow=style.getPropertyValue("overflow");var height=parseInt(style.getPropertyValue("height"),10);var isScrollable=scrolling==="touch"&&overflow==="auto";var canScroll=el.scrollHeight>el.offsetHeight;if(isScrollable&&canScroll){var curY=evt.touches?evt.touches[0].screenY:evt.screenY;var isAtTop=startY<=curY&&el.scrollTop===0;var isAtBottom=startY>=curY&&el.scrollHeight-el.scrollTop===height;if(isAtTop||isAtBottom){evt.preventDefault()}return}el=el.parentNode}evt.preventDefault()};var handleTouchstart=function(evt){startY=evt.touches?evt.touches[0].screenY:evt.screenY};var enable=function(){window.addEventListener("touchstart",handleTouchstart,false);window.addEventListener("touchmove",handleTouchmove,false);enabled=true};var disable=function(){window.removeEventListener("touchstart",handleTouchstart,false);window.removeEventListener("touchmove",handleTouchmove,false);enabled=false};var isEnabled=function(){return enabled};var scrollSupport=window.getComputedStyle(document.createElement("div"))["-webkit-overflow-scrolling"];if(typeof scrollSupport!=="undefined"){enable()}var iNoBounce={enable:enable,disable:disable,isEnabled:isEnabled};if(typeof global.define==="function"){!function(define){define(function(){return iNoBounce})}(global.define)}else{global.iNoBounce=iNoBounce}}(this); \ No newline at end of file diff --git a/test/masterdetail/masterdetail.css b/test/masterdetail/masterdetail.css new file mode 100644 index 0000000..041bdaf --- /dev/null +++ b/test/masterdetail/masterdetail.css @@ -0,0 +1,17 @@ +.masterDetail .master, .masterDetail .detail { + height:100%; + overflow:hidden; +} +.masterDetail .bar-title{ + position: static; +} +.masterDetail .master { + position:absolute; + width:299px; + left:0; +} +.masterDetail .detail{ + position:absolute; + left:300px; + right:0; +} diff --git a/test/masterdetail/masterdetail.js b/test/masterdetail/masterdetail.js new file mode 100644 index 0000000..e69de29 diff --git a/test/masterdetail/overallfixing.css b/test/masterdetail/overallfixing.css new file mode 100644 index 0000000..ac9b943 --- /dev/null +++ b/test/masterdetail/overallfixing.css @@ -0,0 +1,19 @@ +body { + background:black; +} +.scrollable { + overflow: auto; + -webkit-overflow-scrolling: touch; +} + +header.bar-title { + border-radius: 7px 7px 0 0; +} + +.content { + position:absolute; + border-radius: 0 0 5px 5px; + overflow: auto; + bottom: 0px; + left: 0px; +} \ No newline at end of file diff --git a/test/masterdetail/ratchet.css b/test/masterdetail/ratchet.css new file mode 100644 index 0000000..93421b8 --- /dev/null +++ b/test/masterdetail/ratchet.css @@ -0,0 +1,1292 @@ +/** + * ================================== + * Ratchet v1.0.2 + * Licensed under The MIT License + * http://opensource.org/licenses/MIT + * ================================== + */ + +/* Hard reset +-------------------------------------------------- */ + +html, +body, +div, +span, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +section, +summary, +time, +audio, +video { + padding: 0; + margin: 0; + border: 0; +} + +/* Prevents iOS text size adjust after orientation change, without disabling (Thanks to @necolas) */ +html { + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +/* Base styles +-------------------------------------------------- */ + +body { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + font: 14px/1.25 "Helvetica Neue", sans-serif; + color: #222; + background-color: #fff; +} + +/* Universal link styling */ +a { + color: #0882f0; + text-decoration: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Removes the dark touch outlines on links */ +} + +/* Wrapper to be used around all content not in .bar-title and .bar-tab */ +.content { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: auto; + background-color: #fff; + -webkit-transition-property: top, bottom; + transition-property: top, bottom; + -webkit-transition-duration: .2s, .2s; + transition-duration: .2s, .2s; + -webkit-transition-timing-function: linear, linear; + transition-timing-function: linear, linear; + -webkit-overflow-scrolling: touch; +} + +/* Hack to force all relatively and absolutely positioned elements still render while scrolling + Note: This is a bug for "-webkit-overflow-scrolling: touch" */ +.content > * { + -webkit-transform: translateZ(0px); + transform: translateZ(0px); +} + +/* Utility wrapper to pad in components like forms, block buttons and segmented-controllers so they're not full-bleed */ +.content-padded { + padding: 10px; +} + +/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. + Note: For these to work, content must come after both bars in the markup */ +.bar-title ~ .content { + top: 44px; +} +.bar-tab ~ .content { + bottom: 51px; +} +.bar-header-secondary ~ .content { + top: 88px; +}/* General bar styles +-------------------------------------------------- */ + +[class*="bar-"] { + position: fixed; + right: 0; + left: 0; + z-index: 10; + height: 44px; + padding: 5px; + box-sizing: border-box; +} + +/* Modifier class to dock any bar below .bar-title */ +.bar-header-secondary { + top: 45px; +} + +/* Modifier class to dock any bar to bottom of viewport */ +.bar-footer { + bottom: 0; +} + +/* Generic bar for wrapping buttons, segmented controllers, etc. */ +.bar-standard { + background-color: #f2f2f2; + background-image: -webkit-linear-gradient(top, #f2f2f2 0, #e5e5e5 100%); + background-image: linear-gradient(to bottom, #f2f2f2 0, #e5e5e5 100%); + border-bottom: 1px solid #aaa; + box-shadow: inset 0 1px 1px -1px #fff; +} + +/* Flip border position to top for footer bars */ +.bar-footer.bar-standard, +.bar-footer-secondary.bar-standard { + border-top: 1px solid #aaa; + border-bottom-width: 0; +} + +/* Title bar +-------------------------------------------------- */ + +/* Bar docked to top of viewport for showing page title and actions */ +.bar-title { + top: 0; + display: -webkit-box; + display: box; + background-color: #1eb0e9; + background-image: -webkit-linear-gradient(top, #1eb0e9 0, #109adc 100%); + background-image: linear-gradient(to bottom, #1eb0e9 0, #109adc 100%); + border-bottom: 1px solid #0e5895; + box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .8); + -webkit-box-orient: horizontal; + box-orient: horizontal; +} + +/* Centered text in the .bar-title */ +.bar-title .title { + position: absolute; + top: 0; + left: 0; + display: block; + width: 100%; + font-size: 20px; + font-weight: bold; + line-height: 44px; + color: #fff; + text-align: center; + text-shadow: 0 -1px rgba(0, 0, 0, .5); + white-space: nowrap; +} + +.bar-title > a:not([class*="button"]) { + display: block; + width: 100%; + height: 100%; +} + +/* Retain specified title color */ +.bar-title .title a { + color: inherit; +} + +/* Tab bar +-------------------------------------------------- */ + +/* Bar docked to bottom used for primary app navigation */ +.bar-tab { + bottom: 0; + height: 50px; + padding: 0; + background-color: #393939; + background-image: -webkit-linear-gradient(top, #393939 0, #2b2b2b 100%); + background-image: linear-gradient(to bottom, #393939 0, #2b2b2b 100%); + border-top: 1px solid #000; + border-bottom-width: 0; + box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .6); +} + +/* Wrapper for individual tab */ +.tab-inner { + display: -webkit-box; + display: box; + height: 100%; + list-style: none; + -webkit-box-orient: horizontal; + box-orient: horizontal; +} + +/* Navigational tab */ +.tab-item { + height: 100%; + padding-top: 9px; + text-align: center; + box-sizing: border-box; + -webkit-box-flex: 1; + box-flex: 1; +} + +/* Active state for tab */ +.tab-item.active { + box-shadow: inset 0 0 20px rgba(0, 0, 0, .5); +} + +/* Icon for tab */ +.tab-icon { + display: block; + height: 18px; + margin: 0 auto; +} + +/* Label for tab */ +.tab-label { + margin-top: 1px; + font-size: 10px; + font-weight: bold; + color: #fff; + text-shadow: 0 1px rgba(0, 0, 0, .3); +} + +/* Buttons in title bars +-------------------------------------------------- */ + +/* Generic style for all buttons in .bar-title */ +.bar-title [class*="button"] { + position: relative; + z-index: 10; /* Places buttons over full width title */ + font-size: 12px; + line-height: 23px; + color: #fff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); + background-color: #1eb0e9; + background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%); + background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%); + border: 1px solid #0e5895; + box-shadow: 0 1px rgba(255, 255, 255, .25); + -webkit-box-flex: 0; + box-flex: 0; +} + + +/* Hacky way to right align buttons outside of flex-box system + Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */ +.bar-title .title + [class*="button"]:last-child, +.bar-title .button + [class*="button"]:last-child, +.bar-title [class*="button"].pull-right { + position: absolute; + top: 5px; + right: 5px; +} + +/* Override standard button active states */ +.bar-title .button:active { + color: #fff; + background-color: #0876b1; +} + +/* Directional buttons in title bars (thanks to @GregorAdams for solution - http://cssnerd.com/2011/11/30/the-best-pure-css3-ios-style-arrow-back-button/) +-------------------------------------------------- */ + +/* Add relative positioning so :before content is positioned properly */ +.bar-title .button-prev, +.bar-title .button-next { + position: relative; +} + +/* Prev/next button base styles */ +.bar-title .button-prev { + margin-left: 7px; /* Push over to make room for :before content */ + border-left: 0; + border-bottom-left-radius: 10px 15px; + border-top-left-radius: 10px 15px; +} +.bar-title .button-next { + margin-right: 7px; /* Push over to make room for :before content */ + border-right: 0; + border-top-right-radius: 10px 15px; + border-bottom-right-radius: 10px 15px; +} + +/* Pointed part of directional button */ +.bar-title .button-prev:before, +.bar-title .button-next:before { + position: absolute; + top: 2px; + width: 27px; + height: 27px; + border-radius: 30px 100px 2px 40px / 2px 40px 30px 100px; + content: ''; + box-shadow: inset 1px 0 #0e5895, inset 0 1px #0e5895; + -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent)); + mask-image: gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent)); +} +.bar-title .button-prev:before { + left: -5px; + background-image: -webkit-gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9)); + background-image: gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9)); + border-left: 1.5px solid rgba(255, 255, 255, .25); + -webkit-transform: rotate(-45deg) skew(-10deg, -10deg); + transform: rotate(-45deg) skew(-10deg, -10deg); +} +.bar-title .button-next:before { + right: -5px; + background-image: -webkit-gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6)); + background-image: gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6)); + border-top: 1.5px solid rgba(255, 255, 255, .25); + -webkit-transform: rotate(135deg) skew(-10deg, -10deg); + transform: rotate(135deg) skew(-10deg, -10deg); +} + +/* Active states for the directional buttons */ +.bar-title .button-prev:active, +.bar-title .button-next:active, +.bar-title .button-prev:active:before, +.bar-title .button-next:active:before { + color: #fff; + background-color: #0876b1; + background-image: none; +} +.bar-title .button-prev:active:before, +.bar-title .button-next:active:before { + content: ''; +} +.bar-title .button-prev:active:before { + box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2); +} +.bar-title .button-next:active:before { + box-shadow: inset 0 -3px 3px rgba(0, 0, 0, .2); +} + +/* Block buttons in any bar +-------------------------------------------------- */ + +/* Add proper padding and replace buttons normal dropshadow with a shine from bar */ +[class*="bar"] .button-block { + padding: 7px 0; + margin-bottom: 0; + box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px rgba(255, 255, 255, .8); +} + +/* Override standard padding changes for .button-blocks */ +[class*="bar"] .button-block:active { + padding: 7px 0; +} + +/* Segmented controller in any bar +-------------------------------------------------- */ + +/* Remove standard segmented bottom margin */ +[class*="bar-"] .segmented-controller { + margin-bottom: 0; +} + +/* Add margins between segmented controllers and buttons */ +[class*="bar-"] .segmented-controller + [class*="button"], +[class*="bar-"] [class*="button"] + .segmented-controller { + margin-left: 5px; +} + +/* Segmented controller in a title bar +-------------------------------------------------- */ + +.bar-title .segmented-controller { + line-height: 18px; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); + background-color: #1eb0e9; + background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%); + background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%); + border: 1px solid #0e5895; + border-radius: 3px; + box-shadow: 0 1px rgba(255, 255, 255, .25); + -webkit-box-flex: 1; + box-flex: 1; +} + +/* Set color for tab border and highlight */ +.bar-title .segmented-controller li { + border-left: 1px solid #0e5895; + box-shadow: inset 1px 0 rgba(255, 255, 255, .25); +} + +/* Remove inset shadow from first tab or one to the right of the active tab */ +.bar-title .segmented-controller .active + li, +.bar-title .segmented-controller li:first-child { + box-shadow: none; +} + +/* Remove left-hand border from first tab */ +.bar-title .segmented-controller li:first-child { + border-left-width: 0; +} + +/* Depressed state (active) */ +.bar-title .segmented-controller li.active { + background-color: #0082c4; + box-shadow: inset 0 1px 6px rgba(0, 0, 0, .3); +} + +/* Set color of links to white */ +.bar-title .segmented-controller li > a { + color: #fff; +} + + +/* Search forms in standard bar +-------------------------------------------------- */ + +/* Position/size search bar within the bar */ +.bar-standard input[type=search] { + height: 32px; + margin: 0; +}/* Lists +-------------------------------------------------- */ + +/* Remove usual bullet styles from list */ +.list { + margin-bottom: 10px; + list-style: none; + background-color: #fff; +} + +/* Pad each list item and add dividers */ +.list li { + position: relative; + padding: 11px 60px 11px 10px; /* Given extra right padding to accomodate counts, chevrons or buttons */ + border-bottom: 1px solid rgba(0, 0, 0, .1); +} + +/* Give top border to first list items */ +.list li:first-child { + border-top: 1px solid rgba(0, 0, 0, .1); +} + +/* If a list of links, make sure the child takes up full list item tap area (want to avoid selecting child buttons though) */ +.list li > a:not([class*="button"]) { + position: relative; + display: block; + padding: inherit; + margin: -11px -60px -11px -10px; + color: inherit; +} + +/* Inset list +-------------------------------------------------- */ + +.list.inset { + width: auto; + margin-right: 10px; + margin-left: 10px; + border: 1px solid rgba(0, 0, 0, .1); + border-radius: 6px; + box-sizing: border-box; +} + +/* Remove border from first/last standard list items to avoid double border at top/bottom of lists */ +.list.inset li:first-child { + border-top-width: 0; +} +.list.inset li:last-child { + border-bottom-width: 0; +} + + +/* List dividers +-------------------------------------------------- */ + +.list .list-divider { + position: relative; + top: -1px; + padding-top: 6px; + padding-bottom: 6px; + font-size: 12px; + font-weight: bold; + line-height: 18px; + text-shadow: 0 1px 0 rgba(255, 255, 255, .5); + background-color: #f8f8f8; + background-image: -webkit-linear-gradient(top, #f8f8f8 0, #eee 100%); + background-image: linear-gradient(to bottom, #f8f8f8 0, #eee 100%); + border-top: 1px solid rgba(0, 0, 0, .1); + border-bottom: 1px solid rgba(0, 0, 0, .1); + box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4); +} + +/* Rounding first divider on inset lists and remove border on the top */ +.list.inset .list-divider:first-child { + top: 0; + border-top-width: 0; + border-radius: 6px 6px 0 0; +} + +/* Rounding last divider on inset lists */ +.list.inset .list-divider:last-child { + border-radius: 0 0 6px 6px; +} + +/* Right-aligned subcontent in lists (chevrons, buttons, counts and toggles) +-------------------------------------------------- */ +.list .chevron, +.list [class*="button"], +.list [class*="count"], +.list .toggle { + position: absolute; + top: 50%; + right: 10px; +} + + /* Position chevrons/counts vertically centered on the right in list items */ +.list .chevron, +.list [class*="count"] { + margin-top: -10px; /* Half height of chevron */ +} + +/* Push count over if there's a sibling chevron */ +.list .chevron + [class*="count"] { + right: 30px; +} + +/* Position buttons vertically centered on the right in list items */ +.list [class*="button"] { + left: auto; + margin-top: -14px; /* Half height of button */ +} + +.list .toggle { + margin-top: -15px; /* Half height of toggle */ +}/* Forms +-------------------------------------------------- */ + +/* Force form elements to inherit font styles */ +input, +textarea, +button, +select { + font-family: inherit; + font-size: inherit; +} + +/* Stretch inputs/textareas to full width and add height to maintain a consistent baseline */ +select, +textarea, +input[type="text"], +input[type=search], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="tel"], +input[type="color"], +.input-group { + width: 100%; + height: 40px; + padding: 10px; + margin-bottom: 10px; + background-color: #fff; + border: 1px solid rgba(0, 0, 0, .2); + border-radius: 3px; + box-shadow: 0 1px 1px rgba(255, 255, 255, .2), inset 0 1px 1px rgba(0, 0, 0, .1); + -webkit-appearance: none; + box-sizing: border-box; + outline: none; +} + +/* Fully round search input */ +input[type=search] { + height: 34px; + font-size: 14px; + border-radius: 30px; +} + +/* Allow text area's height to grow larger than a normal input */ +textarea { + height: auto; +} + +/* Style select button to look like part of the Ratchet's style */ +select { + height: auto; + font-size: 14px; + background-color: #f8f8f8; + background-image: -webkit-linear-gradient(top, #f8f8f8 0%, #d4d4d4 100%); + background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); +} + + +/* Input groups (cluster multiple inputs together into a single group) +-------------------------------------------------- */ + +/* Reset from initial form setup styles */ +.input-group { + width: auto; + height: auto; + padding: 0; +} + +/* Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input */ +.input-group input { + margin-bottom: 0; + background-color: transparent; + border: 0; + border-bottom: 1px solid rgba(0, 0, 0, .2); + border-radius: 0; + box-shadow: none; +} + +/* Remove bottom border on last input to avoid double bottom border */ +.input-group input:last-child { + border-bottom-width: 0; +} + +/* Input groups with labels +-------------------------------------------------- */ + +/* To use labels with input groups, wrap a label and an input in an .input-row */ +.input-row { + overflow: hidden; + border-bottom: 1px solid rgba(0, 0, 0, .2); +} + +/* Remove bottom border on last input-row to avoid double bottom border */ +.input-row:last-child { + border-bottom-width: 0; +} + +/* Labels get floated left with a set percentage width */ +.input-row label { + float: left; + width: 25%; + padding: 11px 10px 9px 13px; /* Optimizing the baseline for mobile. */ + font-weight: bold; +} + +/* Actual inputs float to right of labels and also have a set percentage */ +.input-row label + input { + float: right; + width: 65%; + padding-left: 0; + margin-bottom: 0; + border-bottom: 0; +}/* General button styles +-------------------------------------------------- */ + +[class*="button"] { + position: relative; + display: inline-block; + padding: 4px 12px; + margin: 0; + font-weight: bold; + line-height: 18px; + color: #333; + text-align: center; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + vertical-align: top; + cursor: pointer; + background-color: #f8f8f8; + background-image: -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%); + background-image: linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%); + border: 1px solid rgba(0, 0, 0, .3); + border-radius: 3px; + box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .05); +} + +/* Active */ +[class*="button"]:active { + padding-top: 5px; + padding-bottom: 3px; + color: #333; + background-color: #ccc; + background-image: none; + box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2); +} + +/* Button modifiers +-------------------------------------------------- */ + +/* Overriding styles for buttons with modifiers */ +.button-main, +.button-positive, +.button-negative { + color: #fff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); +} + +/* Main button */ +.button-main { + background-color: #1eafe7; + background-image: -webkit-linear-gradient(top, #1eafe7 0, #1a97c8 100%); + background-image: linear-gradient(to bottom, #1eafe7 0, #1a97c8 100%); + border: 1px solid #117aaa; +} + +/* Positive button */ +.button-positive { + background-color: #34ba15; + background-image: -webkit-linear-gradient(top, #34ba15 0, #2da012 100%); + background-image: linear-gradient(to bottom, #34ba15 0, #2da012 100%); + border: 1px solid #278f0f; +} + +/* Negative button */ +.button-negative { + background-color: #e71e1e; + background-image: -webkit-linear-gradient(top, #e71e1e 0,#c71a1a 100%); + background-image: linear-gradient(to bottom, #e71e1e 0, #c71a1a 100%); + border: 1px solid #b51a1a; +} + +/* Active state for buttons with modifiers */ +.button-main:active, +.button-positive:active, +.button-negative:active { + color: #fff; +} +.button-main:active { + background-color: #0876b1; +} +.button-positive:active { + background-color: #298f11; +} +.button-negative:active { + background-color: #b21a1a; +} + +/* Block level buttons (full width buttons) */ +.button-block { + display: block; + padding: 11px 0 13px; + margin-bottom: 10px; + font-size: 16px; +} + +/* Active state for block level buttons */ +.button-block:active { + padding: 12px 0; +} + +/* Make button elements go full width when given .button-block class */ +button.button-block { + width: 100%; +} + +/* Counts in buttons +-------------------------------------------------- */ + +/* Generic styles for all counts within buttons */ +[class*="button"] [class*="count"] { + padding-top: 2px; + padding-bottom: 2px; + margin-right: -4px; + margin-left: 4px; + text-shadow: none; + background-color: rgba(0, 0, 0, .2); + box-shadow: inset 0 1px 1px -1px #000000, 0 1px 1px -1px #fff; +} + +/* Position counts within block level buttons + Note: These are absolutely positioned so that text of button isn't "pushed" by count and always + stays at true center of button */ +.button-block [class*="count"] { + position: absolute; + right: 0; + padding-top: 4px; + padding-bottom: 4px; + margin-right: 10px; +}/* Chevrons +-------------------------------------------------- */ + +.chevron { + display: block; + height: 20px; +} + +/* Base styles for both 1/2's of the chevron */ +.chevron:before, +.chevron:after { + position: relative; + display: block; + width: 12px; + height: 4px; + background-color: #999; + content: ''; +} + +/* Position and rotate respective 1/2's of the chevron */ +.chevron:before { + top: 5px; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} +.chevron:after { + top: 7px; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +}/* General count styles +-------------------------------------------------- */ + +[class*="count"] { + display: inline-block; + padding: 4px 9px; + font-size: 12px; + font-weight: bold; + line-height: 13px; + color: #fff; + background-color: rgba(0, 0, 0, .3); + border-radius: 100px; +} + +/* Count modifiers +-------------------------------------------------- */ + +/* Overriding styles for counts with modifiers */ +.count-main, +.count-positive, +.count-negative { + color: #fff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); +} + +/* Main count */ +.count-main { + background-color: #1eafe7; + background-image: -webkit-linear-gradient(top, #1eafe7 0, #1a97c8 100%); + background-image: linear-gradient(to bottom, #1eafe7 0, #1a97c8 100%); +} + +/* Positive count */ +.count-positive { + background-color: #34ba15; + background-image: -webkit-linear-gradient(top, #34ba15 0, #2da012 100%); + background-image: linear-gradient(to bottom, #34ba15 0, #2da012 100%); +} + +/* Negative count */ +.count-negative { + background-color: #e71e1e; + background-image: -webkit-linear-gradient(top, #e71e1e 0,#c71a1a 100%); + background-image: linear-gradient(to bottom, #e71e1e 0, #c71a1a 100%); +}/* Segmented controllers +-------------------------------------------------- */ + +.segmented-controller { + display: -webkit-box; + display: box; + margin-bottom: 10px; + overflow: hidden; + font-size: 12px; + font-weight: bold; + text-shadow: 0 1px rgba(255, 255, 255, .5); + list-style: none; + background-color: #f8f8f8; + background-image: -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%); + background-image: linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%); + border: 1px solid #aaa; + border-radius: 3px; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(255, 255, 255, .8); + -webkit-box-orient: horizontal; + box-orient: horizontal; +} + +/* Section within controller */ +.segmented-controller li { + overflow: hidden; + text-align: center; + white-space: nowrap; + border-left: 1px solid #aaa; + box-shadow: inset 1px 0 rgba(255, 255, 255, .5); + -webkit-box-flex: 1; + box-flex: 1; +} + +/* Link that fills each section */ +.segmented-controller li > a { + display: block; + padding: 8px 16px; + overflow: hidden; + line-height: 15px; + color: #333; + text-overflow: ellipsis; +} + +/* Remove border-left and shadow from first section */ +.segmented-controller li:first-child { + border-left-width: 0; + box-shadow: none; +} + +/* Active segment of controller */ +.segmented-controller li.active { + background-color: #ccc; + box-shadow: inset 0 1px 5px rgba(0, 0, 0, .3); +} + +.segmented-controller-item { + display: none; +} + +.segmented-controller-item.active { + display: block; +}/* Popovers (to be used with popovers.js) +-------------------------------------------------- */ + +.popover { + position: fixed; + top: 55px; + left: 50%; + z-index: 20; + display: none; + width: 280px; + padding: 5px; + margin-left: -146px; + background-color: #555; + background-image: -webkit-linear-gradient(top, #555 5%, #555 6%, #111 30%); + background-image: linear-gradient(to bottom, #555 5%, #555 6%,#111 30%); + border: 1px solid #111; + border-radius: 6px; + opacity: 0; + box-shadow: inset 0 1px 1px -1px #fff, 0 3px 10px rgba(0, 0, 0, .3); + -webkit-transform: translate3d(0, -15px, 0); + transform: translate3d(0, -15px, 0); + -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; + transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; +} + +/* Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) */ +.popover:before, +.popover:after { + position: absolute; + left: 50%; + width: 0; + height: 0; + content: ''; +} +.popover:before { + top: -20px; + margin-left: -21px; + border-right: 21px solid transparent; + border-bottom: 21px solid #111; + border-left: 21px solid transparent; +} +.popover:after { + top: -19px; + margin-left: -20px; + border-right: 20px solid transparent; + border-bottom: 20px solid #555; + border-left: 20px solid transparent; +} + +/* Wrapper for a title and buttons */ +.popover-header { + display: -webkit-box; + display: box; + height: 34px; + margin-bottom: 5px; +} + +/* Centered title for popover */ +.popover-header .title { + position: absolute; + top: 0; + left: 0; + width: 100%; + margin: 15px 0; + font-size: 16px; + font-weight: bold; + line-height: 12px; + color: #fff; + text-align: center; + text-shadow: 0 -1px rgba(0, 0, 0, .5); +} + +/* Generic style for all buttons in .popover-header */ +.popover-header [class*="button"] { + z-index: 25; + font-size: 12px; + line-height: 22px; + color: #fff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); + background-color: #454545; + background-image: -webkit-linear-gradient(top, #454545 0, #353535 100%); + background-image: linear-gradient(to bottom, #454545 0, #353535 100%); + border: 1px solid #111; + -webkit-box-flex: 0; + box-flex: 0; +} + +/* Hacky way to right align buttons outside of flex-box system + Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */ +.popover-header .title + [class*="button"]:last-child, +.popover-header .button + [class*="button"]:last-child, +.popover-header [class*="button"].pull-right { + position: absolute; + top: 5px; + right: 5px; +} + +/* Active state for popover header buttons */ +.popover-header .button:active { + color: #fff; + background-color: #0876b1; +} + +/* Popover animation +-------------------------------------------------- */ + +.popover.visible { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +/* Backdrop (used as invisible touch escape) +-------------------------------------------------- */ + +.backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 10; +} + +/* Block level buttons in popovers +-------------------------------------------------- */ + +/* Positioning and giving darker border to look sharp against dark popover */ +.popover .button-block { + margin-bottom: 5px; + border: 1px solid #111; +} + +/* Remove extra margin on bottom of last button */ +.popover .button-block:last-child { + margin-bottom: 0; +} + +/* Lists in popovers +-------------------------------------------------- */ + +.popover .list { + width: auto; + max-height: 250px; + margin-right: 0; + margin-bottom: 0; + margin-left: 0; + overflow: auto; + background-color: #fff; + border: 1px solid #000; + border-radius: 3px; + -webkit-overflow-scrolling: touch; +}/* Modals +-------------------------------------------------- */ +.modal { + position: fixed; + top: 0; + opacity: 0; + z-index: 11; + width: 100%; + min-height: 100%; + overflow: hidden; + background-color: #fff; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; + transition: transform .25s ease-in-out, opacity 1ms .25s; +} + +/* Modal - When active +-------------------------------------------------- */ +.modal.active { + opacity: 1; + height: 100%; + -webkit-transition: -webkit-transform .25s ease-in-out; + transition: transform .25 ease-in-out; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +}/* Slider styles (to be used with sliders.js) +-------------------------------------------------- */ + +/* Width/height of slider */ +.slider, +.slider > li { + width: 100%; + height: 200px; +} + +/* Outer wrapper for slider */ +.slider { + overflow: hidden; + background-color: #000; +} + +/* Inner wrapper for slider (width of all slides together) */ +.slider > ul { + position: relative; + font-size: 0; /* Remove spaces from inline-block children */ + white-space: nowrap; + -webkit-transition: all 0 linear; + transition: all 0 linear; +} + +/* Individual slide */ +.slider > ul > li { + display: inline-block; + vertical-align: top; /* Ensure that li always aligns to top */ + width: 100%; + height: 100%; +} + +/* Required reset of font-size to same as standard body */ +.slider > ul > li > * { + font-size: 14px; +}/* Toggle styles (to be used with toggles.js) +-------------------------------------------------- */ + +.toggle { + position: relative; + width: 75px; + height: 28px; + background-color: #eee; + border: 1px solid #bbb; + border-radius: 20px; + box-shadow: inset 0 0 4px rgba(0, 0, 0, .1); +} + +/* Text indicating "on" or "off". Default is "off" */ +.toggle:before { + position: absolute; + right: 13px; + font-weight: bold; + line-height: 28px; + color: #777; + text-shadow: 0 1px #fff; + text-transform: uppercase; + content: "Off"; +} + +/* Sliding handle */ +.toggle-handle { + position: absolute; + top: -1px; + left: -1px; + z-index: 2; + width: 28px; + height: 28px; + background-color: #fff; + background-image: -webkit-linear-gradient(top, #fff 0, #f2f2f2 100%); + background-image: linear-gradient(to bottom, #fff 0, #f2f2f2 100%); + border: 1px solid rgba(0, 0, 0, .2); + border-radius: 100px; + -webkit-transition: -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out; + transition: transform 0.1s ease-in-out, border 0.1s ease-in-out; +} + +/* Active state for toggle */ +.toggle.active { + background-color: #19a8e4; + background-image: -webkit-linear-gradient(top, #088cd4 0, #19a8e4 100%); + background-image: linear-gradient(to bottom, #088cd4 0, #19a8e4 100%); + border: 1px solid #096c9d; + box-shadow: inset 0 0 15px rgba(255, 255, 255, .25); +} + +/* Active state for toggle handle */ +.toggle.active .toggle-handle { + border-color: #0a76ad; + -webkit-transform: translate3d(48px,0,0); + transform: translate3d(48px,0,0); +} + +/* Change "off" to "on" for active state */ +.toggle.active:before { + right: auto; + left: 15px; + color: #fff; + text-shadow: 0 -1px rgba(0, 0, 0, 0.25); + content: "On"; +}/* Push styles (to be used with push.js) +-------------------------------------------------- */ + +/* Fade animation */ +.content.fade { + left: 0; + opacity: 0; + -webkit-transition: opacity .2s ease-in-out; + transition: opacity .2s ease-in-out; +} +.content.fade.in { + opacity: 1; +} + +/* Slide animation */ +.content.slide { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-transition: -webkit-transform .25s ease-in-out; + transition: transform .25s ease-in-out; +} +.content.slide.left { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); +} +.content.slide.right { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); +} \ No newline at end of file diff --git a/test/masterdetail/ratchet.js b/test/masterdetail/ratchet.js new file mode 100644 index 0000000..0e6d31b --- /dev/null +++ b/test/masterdetail/ratchet.js @@ -0,0 +1,767 @@ +/** + * ================================== + * Ratchet v1.0.2 + * Licensed under The MIT License + * http://opensource.org/licenses/MIT + * ================================== + */ + +/* ---------------------------------- + * MODAL v1.0.0 + * Licensed under The MIT License + * http://opensource.org/licenses/MIT + * ---------------------------------- */ + +!function () { + 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) return document.querySelector(modalToggle.hash); + }; + + window.addEventListener('touchend', function (event) { + var modal = getModal(event); + if (modal) modal.classList.toggle('active'); + }); +}();/* ---------------------------------- + * POPOVER v1.0.0 + * Licensed under The MIT License + * http://opensource.org/licenses/MIT + * ---------------------------------- */ + +!function () { + + var popover; + + var findPopovers = function (target) { + var i, 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 () { + document.body.removeChild(backdrop); + popover.style.display = 'none'; + popover.removeEventListener('webkitTransitionEnd', onPopoverHidden); + } + + var backdrop = function () { + var element = document.createElement('div'); + + element.classList.add('backdrop'); + + element.addEventListener('touchend', function () { + popover.addEventListener('webkitTransitionEnd', onPopoverHidden); + popover.classList.remove('visible'); + }); + + return element; + }(); + + var getPopover = function (e) { + var anchor = findPopovers(e.target); + + if (!anchor || !anchor.hash) return; + + popover = document.querySelector(anchor.hash); + + if (!popover || !popover.classList.contains('popover')) return; + + return popover; + } + + window.addEventListener('touchend', function (e) { + var popover = getPopover(e); + + if (!popover) return; + + popover.style.display = 'block'; + popover.offsetHeight; + popover.classList.add('visible'); + + popover.parentNode.appendChild(backdrop); + }); + + window.addEventListener('click', function (e) { if (getPopover(e)) e.preventDefault(); }); + +}(); +/* ---------------------------------- + * PUSH v1.0.0 + * Licensed under The MIT License + * inspired by chris's jquery.pjax.js + * http://opensource.org/licenses/MIT + * ---------------------------------- */ + +!function () { + + var noop = function () {}; + + + // Pushstate cacheing + // ================== + + var isScrolling; + var maxCacheLength = 20; + var cacheMapping = sessionStorage; + var domCache = {}; + var transitionMap = { + 'slide-in' : 'slide-out', + 'slide-out' : 'slide-in', + 'fade' : 'fade' + }; + + var bars = { + bartab : '.bar-tab', + bartitle : '.bar-title', + barfooter : '.bar-footer', + barheadersecondary : '.bar-header-secondary' + }; + + var cacheReplace = function (data, updates) { + PUSH.id = data.id; + if (updates) data = getCached(data.id); + 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 () { + var id = PUSH.id; + + var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]'); + var cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]'); + + cacheBackStack.push(id); + + while (cacheForwardStack.length) delete cacheMapping[cacheForwardStack.shift()]; + while (cacheBackStack.length > maxCacheLength) delete cacheMapping[cacheBackStack.shift()]; + + window.history.pushState(null, '', cacheMapping[PUSH.id].url); + + cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack); + cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack); + }; + + var cachePop = function (id, direction) { + var forward = direction == 'forward'; + var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]'); + var cacheBackStack = JSON.parse(cacheMapping.cacheBackStack || '[]'); + var pushStack = forward ? cacheBackStack : cacheForwardStack; + var popStack = forward ? cacheForwardStack : cacheBackStack; + + if (PUSH.id) pushStack.push(PUSH.id); + popStack.pop(); + + cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack); + cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack); + }; + + var getCached = function (id) { + return JSON.parse(cacheMapping[id] || null) || {}; + }; + + var getTarget = function (e) { + var target = findTarget(e.target); + + if ( + ! target + || e.which > 1 + || e.metaKey + || e.ctrlKey + || isScrolling + || location.protocol !== target.protocol + || location.host !== target.host + || !target.hash && /#/.test(target.href) + || target.hash && target.href.replace(target.hash, '') === location.href.replace(location.hash, '') + || target.getAttribute('data-ignore') == 'push' + ) return; + + return target; + }; + + + // Main event handlers (touchend, popstate) + // ========================================== + + var touchend = function (e) { + var target = getTarget(e); + + if (!target) return; + + e.preventDefault(); + + PUSH({ + url : target.href, + hash : target.hash, + timeout : target.getAttribute('data-timeout'), + transition : target.getAttribute('data-transition') + }); + }; + + var popstate = function (e) { + var key; + var barElement; + var activeObj; + var activeDom; + var direction; + var transition; + var transitionFrom; + var transitionFromObj; + var id = e.state; + + if (!id || !cacheMapping[id]) return; + + direction = PUSH.id < id ? 'forward' : 'back'; + + cachePop(id, direction); + + activeObj = getCached(id); + activeDom = domCache[id]; + + if (activeObj.title) document.title = activeObj.title; + + if (direction == 'back') { + transitionFrom = JSON.parse(direction == 'back' ? cacheMapping.cacheForwardStack : cacheMapping.cacheBackStack); + transitionFromObj = getCached(transitionFrom[transitionFrom.length - 1]); + } else { + transitionFromObj = activeObj; + } + + if (direction == 'back' && !transitionFromObj.id) return PUSH.id = id; + + transition = direction == 'back' ? transitionMap[transitionFromObj.transition] : transitionFromObj.transition; + + if (!activeDom) { + return PUSH({ + id : activeObj.id, + url : activeObj.url, + title : activeObj.title, + timeout : activeObj.timeout, + transition : transition, + ignorePush : true + }); + } + + if (transitionFromObj.transition) { + activeObj = extendWithDom(activeObj, '.content', activeDom.cloneNode(true)); + for (key in bars) { + 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 + ); + + PUSH.id = id; + + document.body.offsetHeight; // force reflow to prevent scroll + }; + + + // Core PUSH functionality + // ======================= + + var PUSH = function (options) { + var key; + var data = {}; + var xhr = PUSH.xhr; + + options.container = options.container || options.transition ? document.querySelector('.content') : document.body; + + for (key in bars) { + options[key] = options[key] || document.querySelector(bars[key]); + } + + if (xhr && xhr.readyState < 4) { + xhr.onreadystatechange = noop; + xhr.abort() + } + + xhr = new XMLHttpRequest(); + xhr.open('GET', options.url, true); + xhr.setRequestHeader('X-PUSH', 'true'); + + xhr.onreadystatechange = function () { + if (options._timeout) clearTimeout(options._timeout); + if (xhr.readyState == 4) xhr.status == 200 ? success(xhr, options) : failure(options.url); + }; + + if (!PUSH.id) { + cacheReplace({ + id : +new Date, + url : window.location.href, + title : document.title, + timeout : options.timeout, + transition : null + }); + } + + if (options.timeout) { + options._timeout = setTimeout(function () { xhr.abort('timeout'); }, options.timeout); + } + + xhr.send(); + + if (xhr.readyState && !options.ignorePush) cachePush(); + }; + + + // Main XHR handlers + // ================= + + var success = function (xhr, options) { + var key; + var barElement; + var data = parseXHR(xhr, options); + + if (!data.contents) return locationReplace(options.url); + + if (data.title) document.title = data.title; + + if (options.transition) { + for (key in bars) { + 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 () { + cacheReplace({ + id : options.id || +new Date, + url : data.url, + title : data.title, + timeout : options.timeout, + transition : options.transition + }, options.id); + triggerStateChange(); + }); + + if (!options.ignorePush && window._gaq) _gaq.push(['_trackPageview']) // google analytics + if (!options.hash) return; + }; + + var failure = function (url) { + throw new Error('Could not get: ' + url) + }; + + + // 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(enter ? 'right' : 'left'); + swap.classList.add('slide'); + container.classList.add('slide'); + } + + container.parentNode.insertBefore(swap, container); + } + + if (!transition) complete && complete(); + + if (transition == 'fade') { + container.offsetWidth; // force reflow + container.classList.remove('in'); + container.addEventListener('webkitTransitionEnd', fadeContainerEnd); + + function fadeContainerEnd() { + container.removeEventListener('webkitTransitionEnd', fadeContainerEnd); + swap.classList.add('in'); + swap.addEventListener('webkitTransitionEnd', fadeSwapEnd); + } + function fadeSwapEnd () { + swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd); + container.parentNode.removeChild(container); + swap.classList.remove('fade'); + swap.classList.remove('in'); + complete && complete(); + } + } + + if (/slide/.test(transition)) { + container.offsetWidth; // force reflow + swapDirection = enter ? 'right' : 'left' + containerDirection = enter ? 'left' : 'right' + container.classList.add(containerDirection); + swap.classList.remove(swapDirection); + swap.addEventListener('webkitTransitionEnd', slideEnd); + + function slideEnd() { + swap.removeEventListener('webkitTransitionEnd', slideEnd); + swap.classList.remove('slide'); + swap.classList.remove(swapDirection); + container.parentNode.removeChild(container); + complete && complete(); + } + } + }; + + var triggerStateChange = function () { + var e = new CustomEvent('push', { + detail: { state: getCached(PUSH.id) }, + bubbles: true, + cancelable: true + }); + + window.dispatchEvent(e); + }; + + var findTarget = function (target) { + var i, toggles = document.querySelectorAll('a'); + for (; target && target !== document; target = target.parentNode) { + for (i = toggles.length; i--;) { if (toggles[i] === target) return target; } + } + }; + + var locationReplace = function (url) { + window.history.replaceState(null, '', '#'); + window.location.replace(url); + }; + + var parseURL = function (url) { + var a = document.createElement('a'); a.href = url; return a; + }; + + var extendWithDom = function (obj, fragment, dom) { + var i; + var result = {}; + + for (i in obj) 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; + var data = {}; + var responseText = xhr.responseText; + + data.url = options.url; + + if (!responseText) return data; + + if (/]*>([\s\S.]*)<\/head>/i)[0] + body.innerHTML = responseText.match(/]*>([\s\S.]*)<\/body>/i)[0] + } else { + head = body = document.createElement('div'); + head.innerHTML = responseText; + } + + data.title = head.querySelector('title'); + data.title = data.title && data.title.innerText.trim(); + + if (options.transition) data = extendWithDom(data, '.content', body); + else data.contents = body; + + return data; + }; + + + // Attach PUSH event handlers + // ========================== + + 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('popstate', popstate); + +}(); +/* ---------------------------------- + * TABS v1.0.0 + * Licensed under The MIT License + * http://opensource.org/licenses/MIT + * ---------------------------------- */ + +!function () { + var getTarget = function (target) { + var i, popovers = document.querySelectorAll('.segmented-controller li a'); + for (; target && target !== document; target = target.parentNode) { + for (i = popovers.length; i--;) { if (popovers[i] === target) return target; } + } + }; + + window.addEventListener("touchend", function (e) { + var activeTab; + var activeBody; + var targetBody; + var targetTab; + var className = 'active'; + var classSelector = '.' + className; + var targetAnchor = getTarget(e.target); + + if (!targetAnchor) return; + + targetTab = targetAnchor.parentNode; + activeTab = targetTab.parentNode.querySelector(classSelector); + + if (activeTab) activeTab.classList.remove(className); + + targetTab.classList.add(className); + + if (!targetAnchor.hash) return; + + targetBody = document.querySelector(targetAnchor.hash); + + if (!targetBody) return; + + activeBody = targetBody.parentNode.querySelector(classSelector); + + if (activeBody) activeBody.classList.remove(className); + + targetBody.classList.add(className) + }); + + window.addEventListener('click', function (e) { if (getTarget(e.target)) e.preventDefault(); }); +}();/* ---------------------------------- + * SLIDER v1.0.1 + * Licensed under The MIT License + * Adapted from Brad Birdsall's swipe + * http://opensource.org/licenses/MIT + * ---------------------------------- */ + +!function () { + + 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, sliders = document.querySelectorAll('.slider > ul'); + for (; target && target !== document; target = target.parentNode) { + for (i = sliders.length; i--;) { if (sliders[i] === target) return target; } + } + } + + var getScroll = function () { + var translate3d = slider.style.webkitTransform.match(/translate3d\(([^,]*)/); + return parseInt(translate3d ? translate3d[1] : 0) + }; + + 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('li'); + + 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; + + 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 v1.0.0 + * Licensed under The MIT License + * http://opensource.org/licenses/MIT + * ---------------------------------- */ + +!function () { + + var start = {}; + var touchMove = false; + var distanceX = false; + var toggle = false; + + var findToggle = function (target) { + var i, 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.offsetWidth; + var handleWidth = handle.offsetWidth; + var offset = toggle.classList.contains('active') ? toggleWidth - handleWidth : 0; + + start = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY }; + touchMove = false; + + // todo: probably should be moved to the css + toggle.style['-webkit-transition-duration'] = 0; + }); + + 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.offsetWidth; + var handleWidth = handle.offsetWidth; + 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.offsetWidth; + var handleWidth = handle.offsetWidth; + 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; + }); + +}();