diff --git a/.gitignore b/.gitignore index 8c843cb..167840d 100644 --- a/.gitignore +++ b/.gitignore @@ -34,4 +34,4 @@ nbproject .CVS .idea node_modules -dist \ No newline at end of file +dis \ No newline at end of file diff --git a/dist/ratchet.css b/dist/ratchet.css new file mode 100644 index 0000000..ccefee0 --- /dev/null +++ b/dist/ratchet.css @@ -0,0 +1,1270 @@ +/** + * ================================== + * Ratchet v1.0.0 + * 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: #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 to top of viewport */ +.bar-header { + top: 0; +} + +/* Modifier class to dock any bar to bottom of viewport */ +.bar-footer { + bottom: 0; +} + +/* Modifier class to dock any bar below .bar-title */ +.bar-header-secondary { + top: 45px; +} + +/* Modifier class to dock any bar above .bar-tab */ +.bar-footer-secondary { + bottom: 51px; +} + +/* 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: 20px 60px 20px 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: -20px -60px -20px -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: #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; +} + +/* 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; +} + +/* 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; +}/* 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/dist/ratchet.js b/dist/ratchet.js new file mode 100644 index 0000000..6a7c9e9 --- /dev/null +++ b/dist/ratchet.js @@ -0,0 +1,720 @@ +/** + * ================================== + * Ratchet v1.0.0 + * Licensed under The MIT License + * http://opensource.org/licenses/MIT + * ================================== + */ + +/* ---------------------------------- + * 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 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 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)); + if (activeObj.titlebar) swapContent(activeObj.titlebar, document.querySelector('.bar-title')); + if (activeObj.tabbar) swapContent(activeObj.tabbar, document.querySelector('.bar-tab')); + } + + 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 data = {}; + var xhr = PUSH.xhr; + + options.container = options.container || document.querySelector('.content'); + options.titlebar = options.titlebar || document.querySelector('.bar-title'); + options.tabbar = options.tabbar || document.querySelector('.bar-tab'); + + 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 data = parseXHR(xhr, options); + + if (!data.contents) return locationReplace(options.url); + + if (data.title) document.title = data.title; + + if (options.transition) { + if (data.titlebar) swapContent(data.titlebar, document.querySelector('.bar-title')); + if (data.tabbar) swapContent(data.tabbar, document.querySelector('.bar-tab')); + } + + 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) { + container.innerHTML = swap.innerHTML; + } 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 result = {}; + var titlebar = dom.querySelector('.bar-title') + var tabbar = dom.querySelector('.bar-tab'); + + for (var i in obj) result[i] = obj[i]; + + if (titlebar) titlebar.parentNode.removeChild(titlebar); + if (tabbar) tabbar.parentNode.removeChild(tabbar); + + result.titlebar = titlebar; + result.tabbar = tabbar; + 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.0 + * 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; + }); + +}(); diff --git a/dist/template.html b/dist/template.html new file mode 100644 index 0000000..b8820c1 --- /dev/null +++ b/dist/template.html @@ -0,0 +1,77 @@ + + + + + Ratchet template page + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Ratchet

+
+ + +
+
+

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 resorces:

+
+ + + +
+ + + \ No newline at end of file diff --git a/dist/touch-icons/apple-touch-icon-114x114.png b/dist/touch-icons/apple-touch-icon-114x114.png new file mode 100644 index 0000000..de14661 Binary files /dev/null and b/dist/touch-icons/apple-touch-icon-114x114.png differ diff --git a/dist/touch-icons/apple-touch-icon-57x57.png b/dist/touch-icons/apple-touch-icon-57x57.png new file mode 100644 index 0000000..5396942 Binary files /dev/null and b/dist/touch-icons/apple-touch-icon-57x57.png differ diff --git a/dist/touch-icons/apple-touch-icon-72x72.png b/dist/touch-icons/apple-touch-icon-72x72.png new file mode 100644 index 0000000..a214d69 Binary files /dev/null and b/dist/touch-icons/apple-touch-icon-72x72.png differ