From 8382dba01c42dfd0d2cde0672c03c2783759f26e Mon Sep 17 00:00:00 2001 From: Darren Liew Date: Fri, 11 Jul 2014 05:55:25 +0000 Subject: [PATCH] adapted to pico --- dist/css/ratchet.css | 55 +- dist/css/ratchet.less.css | 1198 +++++++++++++++++++++++++++++++++++++ dist/js/ratchet.js | 15 +- dist/js/ratchet.less.js | 422 +++++++++++++ dist/js/ratchet.min.js | 2 +- 5 files changed, 1644 insertions(+), 48 deletions(-) create mode 100644 dist/css/ratchet.less.css create mode 100644 dist/js/ratchet.less.js diff --git a/dist/css/ratchet.css b/dist/css/ratchet.css index 4e36d9c..665f75e 100644 --- a/dist/css/ratchet.css +++ b/dist/css/ratchet.css @@ -485,9 +485,9 @@ input[type="button"] { } .bar { - position: fixed; - right: 0; + position: absolute; left: 0; + width:100%; z-index: 10; height: 44px; padding-right: 10px; @@ -790,30 +790,12 @@ input[type="button"] { -ms-transform: translateY(-50%); transform: translateY(-50%); } -.table-view-cell .navigate-left > .btn, -.table-view-cell .navigate-left > .badge, -.table-view-cell .navigate-left > .toggle, -.table-view-cell .navigate-right > .btn, -.table-view-cell .navigate-right > .badge, -.table-view-cell .navigate-right > .toggle, -.table-view-cell .push-left > .btn, -.table-view-cell .push-left > .badge, -.table-view-cell .push-left > .toggle, -.table-view-cell .push-right > .btn, -.table-view-cell .push-right > .badge, -.table-view-cell .push-right > .toggle, -.table-view-cell > a .navigate-left > .btn, -.table-view-cell > a .navigate-left > .badge, -.table-view-cell > a .navigate-left > .toggle, -.table-view-cell > a .navigate-right > .btn, -.table-view-cell > a .navigate-right > .badge, -.table-view-cell > a .navigate-right > .toggle, -.table-view-cell > a .push-left > .btn, -.table-view-cell > a .push-left > .badge, -.table-view-cell > a .push-left > .toggle, -.table-view-cell > a .push-right > .btn, -.table-view-cell > a .push-right > .badge, -.table-view-cell > a .push-right > .toggle { +.table-view-cell .glyph > .btn, +.table-view-cell .glyph > .badge, +.table-view-cell .glyph > .toggle, +.table-view-cell > a .glyph > .btn, +.table-view-cell > a .glyph > .badge, +.table-view-cell > a .glyph > .toggle { right: 35px; } @@ -875,7 +857,6 @@ textarea { } select { - height: auto; font-size: 14px; background-color: #f8f8f8; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); @@ -886,6 +867,7 @@ select { background-color: #fff; } +select, .input-group input, .input-group textarea { margin-bottom: 0; @@ -912,7 +894,7 @@ select { line-height: 1.1; } -.input-row input { +.input-row input, .input-row select, .input-row textarea{ float: right; width: 65%; padding-left: 0; @@ -1224,10 +1206,7 @@ select { transform: translate3d(100%, 0, 0); } -.navigate-left:after, -.navigate-right:after, -.push-left:after, -.push-right:after { +.glyph:before{ position: absolute; top: 50%; display: inline-block; @@ -1243,16 +1222,12 @@ select { -webkit-font-smoothing: antialiased; } -.navigate-left:after, -.push-left:after { - left: 15px; - content: '\e822'; +.glyph-left:before{ + left: 15px } -.navigate-right:after, -.push-right:after { - right: 15px; - content: '\e826'; +.glyph-right:before{ + right: 15px } @font-face { diff --git a/dist/css/ratchet.less.css b/dist/css/ratchet.less.css new file mode 100644 index 0000000..e3c4d2b --- /dev/null +++ b/dist/css/ratchet.less.css @@ -0,0 +1,1198 @@ +/*! + * ===================================================== + * Ratchet v2.0.2 (http://goratchet.com) + * Copyright 2014 Connor Sears + * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE) + * + * v2.0.2 designed by @connors. + * ===================================================== + */ + +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ +html { + font-family: sans-serif; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +body { + margin: 0; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +audio, +canvas, +progress, +video { + display: inline-block; + vertical-align: baseline; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +[hidden], +template { + display: none; +} + +a { + background: transparent; +} + +a:active, +a:hover { + outline: 0; +} + +abbr[title] { + border-bottom: 1px dotted; +} + +b, +strong { + font-weight: bold; +} + +dfn { + font-style: italic; +} + +h1 { + margin: .67em 0; + font-size: 2em; +} + +mark { + color: #000; + background: #ff0; +} + +small { + font-size: 80%; +} + +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} + +sup { + top: -.5em; +} + +sub { + bottom: -.25em; +} + +img { + border: 0; +} + +svg:not(:root) { + overflow: hidden; +} + +figure { + margin: 1em 40px; +} + +hr { + height: 0; + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +pre { + overflow: auto; +} + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +button, +input, +optgroup, +select, +textarea { + margin: 0; + font: inherit; + color: inherit; +} + +button { + overflow: visible; +} + +button, +select { + text-transform: none; +} + +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; +} + +button[disabled], +html input[disabled] { + cursor: default; +} + +button::-moz-focus-inner, +input::-moz-focus-inner { + padding: 0; + border: 0; +} + +input { + line-height: normal; +} + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; +} + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +input[type="search"] { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + -webkit-appearance: textfield; +} + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +fieldset { + padding: .35em .625em .75em; + margin: 0 2px; + border: 1px solid #c0c0c0; +} + +legend { + padding: 0; + border: 0; +} + +textarea { + overflow: auto; +} + +optgroup { + font-weight: bold; +} + +table { + border-spacing: 0; + border-collapse: collapse; +} + +td, +th { + padding: 0; +} + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +body { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + font-family: "Helvetica Neue", Helvetica, sans-serif; + font-size: 17px; + line-height: 21px; + color: #000; + background-color: #fff; +} + +a { + color: #428bca; + text-decoration: none; + + -webkit-tap-highlight-color: transparent; +} +a:active { + color: #3071a9; +} + +.content { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: auto; + -webkit-overflow-scrolling: touch; + background-color: #fff; +} + +.content > * { + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); +} + +.bar-nav ~ .content { + padding-top: 44px; +} + +.bar-header-secondary ~ .content { + padding-top: 88px; +} + +.bar-footer ~ .content { + padding-bottom: 44px; +} + +.bar-footer-secondary ~ .content { + padding-bottom: 88px; +} + +.bar-tab ~ .content { + padding-bottom: 50px; +} + +.bar-footer-secondary-tab ~ .content { + padding-bottom: 94px; +} + +.content-padded { + margin: 10px; +} + +.pull-left { + float: left; +} + +.pull-right { + float: right; +} + +.clearfix:before, .clearfix:after { + display: table; + content: " "; +} +.clearfix:after { + clear: both; +} + +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: 10px; + line-height: 1; +} + +h1, .h1 { + font-size: 36px; +} + +h2, .h2 { + font-size: 30px; +} + +h3, .h3 { + font-size: 24px; +} + +h4, .h4 { + font-size: 18px; +} + +h5, .h5 { + margin-top: 20px; + font-size: 14px; +} + +h6, .h6 { + margin-top: 20px; + font-size: 12px; +} + +p { + margin-top: 0; + margin-bottom: 10px; + font-size: 14px; + color: #777; +} + +.btn { + position: relative; + display: inline-block; + padding: 6px 8px 7px; + margin-bottom: 0; + font-size: 12px; + font-weight: 400; + line-height: 1; + color: #333; + text-align: center; + white-space: nowrap; + vertical-align: top; + cursor: pointer; + background-color: white; + border: 1px solid #ccc; + border-radius: 3px; +} +.btn:active, .btn.active { + color: inherit; + background-color: #ccc; +} +.btn:disabled, .btn.disabled { + opacity: .6; +} + +.btn-primary { + color: #fff; + background-color: #428bca; + border: 1px solid #428bca; +} +.btn-primary:active, .btn-primary.active { + color: #fff; + background-color: #3071a9; + border: 1px solid #3071a9; +} + +.btn-positive { + color: #fff; + background-color: #5cb85c; + border: 1px solid #5cb85c; +} +.btn-positive:active, .btn-positive.active { + color: #fff; + background-color: #449d44; + border: 1px solid #449d44; +} + +.btn-negative { + color: #fff; + background-color: #d9534f; + border: 1px solid #d9534f; +} +.btn-negative:active, .btn-negative.active { + color: #fff; + background-color: #c9302c; + border: 1px solid #c9302c; +} + +.btn-outlined { + background-color: transparent; +} +.btn-outlined.btn-primary { + color: #428bca; +} +.btn-outlined.btn-positive { + color: #5cb85c; +} +.btn-outlined.btn-negative { + color: #d9534f; +} +.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { + color: #fff; +} + +.btn-link { + padding-top: 6px; + padding-bottom: 6px; + color: #428bca; + background-color: transparent; + border: 0; +} +.btn-link:active, .btn-link.active { + color: #3071a9; + background-color: transparent; +} + +.btn-block { + display: block; + width: 100%; + padding: 15px 0; + margin-bottom: 10px; + font-size: 18px; +} + +input[type="submit"], +input[type="reset"], +input[type="button"] { + width: 100%; +} + +.btn .badge { + margin: -2px -4px -2px 4px; + font-size: 12px; + background-color: rgba(0, 0, 0, .15); +} + +.btn .badge-inverted, +.btn:active .badge-inverted { + background-color: transparent; +} + +.btn-primary:active .badge-inverted, +.btn-positive:active .badge-inverted, +.btn-negative:active .badge-inverted { + color: #fff; +} + +.btn-block .badge { + position: absolute; + right: 0; + margin-right: 10px; +} + +.btn .icon { + font-size: inherit; +} + +.bar { + position: absolute; + left: 0; + width:100%; + z-index: 10; + height: 44px; + padding-right: 10px; + padding-left: 10px; + background-color: white; + border-bottom: 1px solid #ddd; + + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +.bar-header-secondary { + top: 44px; +} + +.bar-footer { + bottom: 0; +} + +.bar-footer-secondary { + bottom: 44px; +} + +.bar-footer-secondary-tab { + bottom: 50px; +} + +.bar-footer, +.bar-footer-secondary, +.bar-footer-secondary-tab { + border-top: 1px solid #ddd; + border-bottom: 0; +} + +.bar-nav { + top: 0; +} + +.title { + position: absolute; + display: block; + width: 100%; + padding: 0; + margin: 0 -10px; + font-size: 17px; + font-weight: 500; + line-height: 44px; + color: #000; + text-align: center; + white-space: nowrap; +} + +.title a { + color: inherit; +} + +.bar-tab { + bottom: 0; + display: table; + width: 100%; + height: 50px; + padding: 0; + table-layout: fixed; + border-top: 1px solid #ddd; + border-bottom: 0; +} +.bar-tab .tab-item { + display: table-cell; + width: 1%; + height: 50px; + color: #929292; + text-align: center; + vertical-align: middle; +} +.bar-tab .tab-item.active, .bar-tab .tab-item:active { + color: #428bca; +} +.bar-tab .tab-item .icon { + top: 3px; + width: 24px; + height: 24px; + padding-top: 0; + padding-bottom: 0; +} +.bar-tab .tab-item .icon ~ .tab-label { + display: block; + font-size: 11px; +} + +.bar .btn { + position: relative; + top: 7px; + z-index: 20; + padding: 6px 12px 7px; + margin-top: 0; + font-weight: 400; +} +.bar .btn.pull-right { + margin-left: 10px; +} +.bar .btn.pull-left { + margin-right: 10px; +} + +.bar .btn-link { + top: 0; + padding: 0; + font-size: 16px; + line-height: 44px; + color: #428bca; + border: 0; +} +.bar .btn-link:active, .bar .btn-link.active { + color: #3071a9; +} + +.bar .btn-block { + top: 6px; + padding: 7px 0; + margin-bottom: 0; + font-size: 16px; +} + +.bar .btn-nav.pull-left { + margin-left: -5px; +} +.bar .btn-nav.pull-right { + margin-right: -5px; +} + +.bar .icon { + position: relative; + z-index: 20; + padding-top: 10px; + padding-bottom: 10px; + font-size: 24px; +} +.bar .btn .icon { + top: 3px; + padding: 0; +} +.bar .title .icon { + padding: 0; + top: 4px; +} + +.bar input[type="search"] { + height: 29px; + margin: 6px 0; +} + +.bar .segmented-control { + top: 7px; + margin: 0 auto; +} + +.badge { + display: inline-block; + padding: 2px 9px 3px; + font-size: 12px; + line-height: 1; + color: #333; + background-color: rgba(0, 0, 0, .15); + border-radius: 100px; +} +.badge.badge-inverted { + padding: 0 5px 0 0; + background-color: transparent; +} + +.badge-primary { + color: #fff; + background-color: #428bca; +} +.badge-primary.badge-inverted { + color: #428bca; +} + +.badge-positive { + color: #fff; + background-color: #5cb85c; +} +.badge-positive.badge-inverted { + color: #5cb85c; +} + +.badge-negative { + color: #fff; + background-color: #d9534f; +} +.badge-negative.badge-inverted { + color: #d9534f; +} + +.card { + margin: 10px; + overflow: hidden; + background-color: white; + border: 1px solid #ddd; + border-radius: 6px; +} + +.card .table-view { + margin-bottom: 0; + border-top: 0; + border-bottom: 0; +} +.card .table-view .table-view-divider:first-child { + top: 0; + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} +.card .table-view .table-view-divider:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; +} + +.card .table-view-cell:last-child { + border-bottom: 0; +} + +.table-view { + padding-left: 0; + margin-top: 0; + margin-bottom: 15px; + list-style: none; + background-color: #fff; + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; +} + +.table-view-cell { + position: relative; + padding: 11px 65px 11px 15px; + overflow: hidden; + border-bottom: 1px solid #ddd; +} +.table-view-cell:last-child { + border-bottom: 0; +} +.table-view-cell > a:not(.btn) { + position: relative; + display: block; + padding: inherit; + margin: -11px -65px -11px -15px; + overflow: hidden; + color: inherit; +} +.table-view-cell > a:not(.btn):active { + background-color: #eee; +} +.table-view-cell p { + margin-bottom: 0; +} + +.table-view-divider { + padding-top: 6px; + padding-bottom: 6px; + padding-left: 15px; + margin-top: -1px; + margin-left: 0; + font-weight: 500; + color: #999; + background-color: #fafafa; + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; +} + +.table-view .media, +.table-view .media-body { + overflow: hidden; +} + +.table-view .media-object.pull-left { + margin-right: 10px; +} +.table-view .media-object.pull-right { + margin-left: 10px; +} + +.table-view-cell > .btn, +.table-view-cell > .badge, +.table-view-cell > .toggle, +.table-view-cell > a > .btn, +.table-view-cell > a > .badge, +.table-view-cell > a > .toggle { + position: absolute; + top: 50%; + right: 15px; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} +.table-view-cell .glyph > .btn, +.table-view-cell .glyph > .badge, +.table-view-cell .glyph > .toggle, +.table-view-cell > a .glyph > .btn, +.table-view-cell > a .glyph > .badge, +.table-view-cell > a .glyph > .toggle { + right: 35px; +} + +.content > .table-view:first-child { + margin-top: 15px; +} + +input, +textarea, +button, +select { + font-family: "Helvetica Neue", Helvetica, sans-serif; + font-size: 17px; +} + +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"] { + width: 100%; + height: 35px; + -webkit-appearance: none; + padding: 0 15px; + margin-bottom: 15px; + line-height: 21px; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 3px; + outline: none; +} + +input[type="search"] { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 0 10px; + font-size: 16px; + border-radius: 20px; +} + +input[type="search"]:focus { + text-align: left; +} + +textarea { + height: auto; +} + +select { + font-size: 14px; + background-color: #f8f8f8; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); +} + +.input-group { + background-color: #fff; +} + +select, +.input-group input, +.input-group textarea { + margin-bottom: 0; + background-color: transparent; + border-top: 0; + border-right: 0; + border-left: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +.input-row { + height: 35px; + overflow: hidden; + border-bottom: 1px solid #ddd; +} + +.input-row label { + float: left; + width: 35%; + padding: 8px 15px; + font-family: "Helvetica Neue", Helvetica, sans-serif; + line-height: 1.1; +} + +.input-row input, .input-row select, .input-row textarea{ + float: right; + width: 65%; + padding-left: 0; + margin-bottom: 0; + border: 0; +} + +.segmented-control { + position: relative; + display: table; + overflow: hidden; + font-size: 12px; + font-weight: 400; + background-color: white; + border: 1px solid #ccc; + border-radius: 3px; +} +.segmented-control .control-item { + display: table-cell; + width: 1%; + padding-top: 6px; + padding-bottom: 7px; + overflow: hidden; + line-height: 1; + color: #333; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + border-left: 1px solid #ccc; +} +.segmented-control .control-item:first-child { + border-left-width: 0; +} +.segmented-control .control-item:active { + background-color: #eee; +} +.segmented-control .control-item.active { + background-color: #ccc; +} + +.segmented-control-primary { + border-color: #428bca; +} +.segmented-control-primary .control-item { + color: #428bca; + border-color: inherit; +} +.segmented-control-primary .control-item:active { + background-color: #cde1f1; +} +.segmented-control-primary .control-item.active { + color: #fff; + background-color: #428bca; +} + +.segmented-control-positive { + border-color: #5cb85c; +} +.segmented-control-positive .control-item { + color: #5cb85c; + border-color: inherit; +} +.segmented-control-positive .control-item:active { + background-color: #d8eed8; +} +.segmented-control-positive .control-item.active { + color: #fff; + background-color: #5cb85c; +} + +.segmented-control-negative { + border-color: #d9534f; +} +.segmented-control-negative .control-item { + color: #d9534f; + border-color: inherit; +} +.segmented-control-negative .control-item:active { + background-color: #f9e2e2; +} +.segmented-control-negative .control-item.active { + color: #fff; + background-color: #d9534f; +} + +.control-content { + display: none; +} +.control-content.active { + display: block; +} + +.popover { + position: fixed; + top: 55px; + left: 50%; + z-index: 20; + display: none; + width: 280px; + margin-left: -140px; + background-color: white; + border-radius: 6px; + -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .1); + box-shadow: 0 0 15px rgba(0, 0, 0, .1); + opacity: 0; + -webkit-transition: all .25s linear; + -moz-transition: all .25s linear; + transition: all .25s linear; + -webkit-transform: translate3d(0, -15px, 0); + -ms-transform: translate3d(0, -15px, 0); + transform: translate3d(0, -15px, 0); +} +.popover:before { + position: absolute; + top: -15px; + left: 50%; + width: 0; + height: 0; + margin-left: -15px; + content: ''; + border-right: 15px solid transparent; + border-bottom: 15px solid white; + border-left: 15px solid transparent; +} +.popover.visible { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.popover .bar ~ .table-view { + padding-top: 44px; +} + +.backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 15; + background-color: rgba(0, 0, 0, .3); +} + +.popover .btn-block { + margin-bottom: 5px; +} +.popover .btn-block:last-child { + margin-bottom: 0; +} + +.popover .bar-nav { + border-bottom: 1px solid #ddd; + border-top-left-radius: 12px; + border-top-right-radius: 12px; + -webkit-box-shadow: none; + box-shadow: none; +} + +.popover .table-view { + max-height: 300px; + margin-bottom: 0; + overflow: auto; + -webkit-overflow-scrolling: touch; + background-color: #fff; + border-top: 0; + border-bottom: 0; + border-radius: 6px; +} + +.modal { + position: fixed; + top: 0; + z-index: 11; + width: 100%; + min-height: 100%; + overflow: hidden; + background-color: #fff; + opacity: 0; + -webkit-transition: -webkit-transform .25s, opacity 1ms .25s; + -moz-transition: -moz-transform .25s, opacity 1ms .25s; + transition: transform .25s, opacity 1ms .25s; + -webkit-transform: translate3d(0, 100%, 0); + -ms-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} +.modal.active { + height: 100%; + opacity: 1; + -webkit-transition: -webkit-transform .25s; + -moz-transition: -moz-transform .25s; + transition: transform .25s; + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +.slider { + width: 100%; +} + +.slider { + overflow: hidden; + background-color: #000; +} +.slider .slide-group { + position: relative; + font-size: 0; + white-space: nowrap; + -webkit-transition: all 0s linear; + -moz-transition: all 0s linear; + transition: all 0s linear; +} +.slider .slide-group .slide { + display: inline-block; + width: 100%; + height: 100%; + font-size: 14px; + vertical-align: top; +} + +.toggle { + position: relative; + display: block; + width: 74px; + height: 30px; + background-color: #fff; + border: 2px solid #ddd; + border-radius: 20px; + -webkit-transition-duration: .2s; + -moz-transition-duration: .2s; + transition-duration: .2s; + -webkit-transition-property: background-color, border; + -moz-transition-property: background-color, border; + transition-property: background-color, border; +} +.toggle .toggle-handle { + position: absolute; + top: -1px; + left: -1px; + z-index: 2; + width: 28px; + height: 28px; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 100px; + -webkit-transition-duration: .2s; + -moz-transition-duration: .2s; + transition-duration: .2s; + -webkit-transition-property: -webkit-transform, border, width; + -moz-transition-property: -moz-transform, border, width; + transition-property: transform, border, width; +} +.toggle:before { + position: absolute; + top: 3px; + right: 11px; + font-size: 13px; + color: #999; + text-transform: uppercase; + content: "Off"; +} +.toggle.active { + background-color: #5cb85c; + border: 2px solid #5cb85c; +} +.toggle.active .toggle-handle { + border-color: #5cb85c; + -webkit-transform: translate3d(44px, 0, 0); + -ms-transform: translate3d(44px, 0, 0); + transform: translate3d(44px, 0, 0); +} +.toggle.active:before { + right: auto; + left: 15px; + color: #fff; + content: "On"; +} +.toggle input[type="checkbox"] { + display: none; +} + +.content.fade { + left: 0; + opacity: 0; +} +.content.fade.in { + opacity: 1; +} +.content.sliding { + z-index: 2; + -webkit-transition: -webkit-transform .4s; + -moz-transition: -moz-transform .4s; + transition: transform .4s; + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.content.sliding.left { + z-index: 1; + -webkit-transform: translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); +} +.content.sliding.right { + z-index: 3; + -webkit-transform: translate3d(100%, 0, 0); + -ms-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); +} diff --git a/dist/js/ratchet.js b/dist/js/ratchet.js index cae24cb..0179b91 100644 --- a/dist/js/ratchet.js +++ b/dist/js/ratchet.js @@ -33,7 +33,7 @@ var getModal = function (event) { var modalToggle = findModals(event.target); - if (modalToggle && modalToggle.hash) { + if (modalToggle && modalToggle.hash && -1 === modalToggle.hash.indexOf('/')) { return document.querySelector(modalToggle.hash); } }; @@ -161,10 +161,9 @@ var maxCacheLength = 20; var cacheMapping = sessionStorage; var domCache = {}; - // Change these to unquoted camelcase in the next major version bump var transitionMap = { - 'slide-in' : 'slide-out', - 'slide-out' : 'slide-in', + slideIn : 'slide-out', + slideOut : 'slide-in', fade : 'fade' }; @@ -379,7 +378,7 @@ url : window.location.href, title : document.title, timeout : options.timeout, - transition : options.transition + transition : null }); } @@ -595,10 +594,12 @@ head = body = document.createElement('div'); head.innerHTML = responseText; } + + if (window.pico) + pico.embedJS(Array.prototype.slice.call(body.getElementsByTagName('script'))); data.title = head.querySelector('title'); - var text = 'innerText' in data.title ? 'innerText' : 'textContent'; - data.title = data.title && data.title[text].trim(); + data.title = data.title && data.title['innerText' in data.title ? 'innerText' : 'textContent'].trim(); if (options.transition) { data = extendWithDom(data, '.content', body); diff --git a/dist/js/ratchet.less.js b/dist/js/ratchet.less.js new file mode 100644 index 0000000..325d954 --- /dev/null +++ b/dist/js/ratchet.less.js @@ -0,0 +1,422 @@ +// modal +!(function () { + 'use strict'; + + var findModals = function (target) { + var i; + var modals = document.querySelectorAll('a'); + + for (; target && target !== document; target = target.parentNode) { + for (i = modals.length; i--;) { + if (modals[i] === target) { + return target; + } + } + } + }; + + var getModal = function (event) { + var modalToggle = findModals(event.target); + if (modalToggle && modalToggle.hash && -1 === modalToggle.hash.indexOf('/')) { + return document.querySelector(modalToggle.hash); + } + }; + + window.addEventListener('touchend', function (event) { + var modal = getModal(event); + if (modal) { + if (modal && modal.classList.contains('modal')) { + modal.classList.toggle('active'); + } + event.preventDefault(); // prevents rewriting url (apps can still use hash values in url) + } + }); +}()); +// popover +!(function () { + 'use strict'; + + var popover; + + var findPopovers = function (target) { + var i; + var popovers = document.querySelectorAll('a'); + + for (; target && target !== document; target = target.parentNode) { + for (i = popovers.length; i--;) { + if (popovers[i] === target) { + return target; + } + } + } + }; + + var onPopoverHidden = function () { + popover.style.display = 'none'; + popover.removeEventListener('webkitTransitionEnd', onPopoverHidden); + }; + + // HACK to hide programatically + var hide = function(e){ + e.preventDefault() + e.stopPropagation() + popover.addEventListener('webkitTransitionEnd', onPopoverHidden); + popover.classList.remove('visible'); + popover.parentNode.removeChild(backdrop); + }; + + var backdrop = (function () { + var element = document.createElement('div'); + + element.classList.add('backdrop'); + + element.addEventListener('click', hide, false); + + return element; + }()); + + var getPopover = function (e) { + var anchor = findPopovers(e.target); + + if (!anchor || !anchor.hash || (anchor.hash.indexOf('/') > 0)) { + return; + } + + try { + popover = document.querySelector(anchor.hash); + } catch (error) { + popover = null; + } + + if (popover === null) { + return; + } + + if (!popover || !popover.classList.contains('popover')) { + return; + } + + return popover; + }; + + var showHidePopover = function (e) { + var popover = getPopover(e); + + if (popover) { + // if clicked fast enough, function hide may not call at all + popover.removeEventListener('webkitTransitionEnd', onPopoverHidden); + e.preventDefault() + e.stopPropagation() + }else{ + // HACK, click anyway to close existing popover + popover = document.querySelector('.popover.visible'); + if (popover) hide(e); + return; + } + + popover.style.display = 'block'; + popover.offsetHeight; + popover.classList.add('visible'); + + popover.parentNode.appendChild(backdrop); + }; + + window.addEventListener('click', showHidePopover); + +}()); +// segmented-controllers +!(function () { + 'use strict'; + + var getTarget = function (target) { + var i; + var segmentedControls = document.querySelectorAll('.segmented-control .control-item'); + + for (; target && target !== document; target = target.parentNode) { + for (i = segmentedControls.length; i--;) { + if (segmentedControls[i] === target) { + return target; + } + } + } + }; + + window.addEventListener('touchend', function (e) { + var activeTab; + var activeBodies; + var targetBody; + var targetTab = getTarget(e.target); + var className = 'active'; + var classSelector = '.' + className; + + if (!targetTab) { + return; + } + + activeTab = targetTab.parentNode.querySelector(classSelector); + + if (activeTab) { + activeTab.classList.remove(className); + } + + targetTab.classList.add(className); + + if (!targetTab.hash) { + return; + } + + targetBody = document.querySelector(targetTab.hash); + + if (!targetBody) { + return; + } + + activeBodies = targetBody.parentNode.querySelectorAll(classSelector); + + for (var i = 0; i < activeBodies.length; i++) { + activeBodies[i].classList.remove(className); + } + + targetBody.classList.add(className); + }); + + window.addEventListener('click', function (e) { if (getTarget(e.target)) {e.preventDefault();} }); +}()); +// slider +!(function () { + 'use strict'; + + var pageX; + var pageY; + var slider; + var deltaX; + var deltaY; + var offsetX; + var lastSlide; + var startTime; + var resistance; + var sliderWidth; + var slideNumber; + var isScrolling; + var scrollableArea; + + var getSlider = function (target) { + var i; + var sliders = document.querySelectorAll('.slider > .slide-group'); + + for (; target && target !== document; target = target.parentNode) { + for (i = sliders.length; i--;) { + if (sliders[i] === target) { + return target; + } + } + } + }; + + var getScroll = function () { + if ('webkitTransform' in slider.style) { + var translate3d = slider.style.webkitTransform.match(/translate3d\(([^,]*)/); + var ret = translate3d ? translate3d[1] : 0; + return parseInt(ret, 10); + } + }; + + var setSlideNumber = function (offset) { + var round = offset ? (deltaX < 0 ? 'ceil' : 'floor') : 'round'; + slideNumber = Math[round](getScroll() / (scrollableArea / slider.children.length)); + slideNumber += offset; + slideNumber = Math.min(slideNumber, 0); + slideNumber = Math.max(-(slider.children.length - 1), slideNumber); + }; + + var onTouchStart = function (e) { + slider = getSlider(e.target); + + if (!slider) { + return; + } + + var firstItem = slider.querySelector('.slide'); + + scrollableArea = firstItem.offsetWidth * slider.children.length; + isScrolling = undefined; + sliderWidth = slider.offsetWidth; + resistance = 1; + lastSlide = -(slider.children.length - 1); + startTime = +new Date(); + pageX = e.touches[0].pageX; + pageY = e.touches[0].pageY; + deltaX = 0; + deltaY = 0; + + setSlideNumber(0); + + slider.style['-webkit-transition-duration'] = 0; + }; + + var onTouchMove = function (e) { + if (e.touches.length > 1 || !slider) { + return; // Exit if a pinch || no slider + } + + deltaX = e.touches[0].pageX - pageX; + deltaY = e.touches[0].pageY - pageY; + pageX = e.touches[0].pageX; + pageY = e.touches[0].pageY; + + if (typeof isScrolling === 'undefined') { + isScrolling = Math.abs(deltaY) > Math.abs(deltaX); + } + + if (isScrolling) { + return; + } + + offsetX = (deltaX / resistance) + getScroll(); + + e.preventDefault(); + + resistance = slideNumber === 0 && deltaX > 0 ? (pageX / sliderWidth) + 1.25 : + slideNumber === lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1; + + slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)'; + }; + + var onTouchEnd = function (e) { + if (!slider || isScrolling) { + return; + } + + setSlideNumber( + (+new Date()) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0 + ); + + offsetX = slideNumber * sliderWidth; + + slider.style['-webkit-transition-duration'] = '.2s'; + slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)'; + + e = new CustomEvent('slide', { + detail: { slideNumber: Math.abs(slideNumber) }, + bubbles: true, + cancelable: true + }); + + slider.parentNode.dispatchEvent(e); + }; + + window.addEventListener('touchstart', onTouchStart); + window.addEventListener('touchmove', onTouchMove); + window.addEventListener('touchend', onTouchEnd); + +}()); +// toggle +!(function () { + 'use strict'; + + var start = {}; + var touchMove = false; + var distanceX = false; + var toggle = false; + + var findToggle = function (target) { + var i; + var toggles = document.querySelectorAll('.toggle'); + + for (; target && target !== document; target = target.parentNode) { + for (i = toggles.length; i--;) { + if (toggles[i] === target) { + return target; + } + } + } + }; + + window.addEventListener('touchstart', function (e) { + e = e.originalEvent || e; + + toggle = findToggle(e.target); + + if (!toggle) { + return; + } + + var handle = toggle.querySelector('.toggle-handle'); + var toggleWidth = toggle.clientWidth; + var handleWidth = handle.clientWidth; + var offset = toggle.classList.contains('active') ? (toggleWidth - handleWidth) : 0; + + start = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY }; + touchMove = false; + }); + + window.addEventListener('touchmove', function (e) { + e = e.originalEvent || e; + + if (e.touches.length > 1) { + return; // Exit if a pinch + } + + if (!toggle) { + return; + } + + var handle = toggle.querySelector('.toggle-handle'); + var current = e.touches[0]; + var toggleWidth = toggle.clientWidth; + var handleWidth = handle.clientWidth; + var offset = toggleWidth - handleWidth; + + touchMove = true; + distanceX = current.pageX - start.pageX; + + if (Math.abs(distanceX) < Math.abs(current.pageY - start.pageY)) { + return; + } + + e.preventDefault(); + + if (distanceX < 0) { + return (handle.style.webkitTransform = 'translate3d(0,0,0)'); + } + if (distanceX > offset) { + return (handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)'); + } + + handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)'; + + toggle.classList[(distanceX > (toggleWidth / 2 - handleWidth / 2)) ? 'add' : 'remove']('active'); + }); + + window.addEventListener('touchend', function (e) { + if (!toggle) { + return; + } + + var handle = toggle.querySelector('.toggle-handle'); + var toggleWidth = toggle.clientWidth; + var handleWidth = handle.clientWidth; + var offset = (toggleWidth - handleWidth); + var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth / 2 - handleWidth / 2))); + + if (slideOn) { + handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)'; + } else { + handle.style.webkitTransform = 'translate3d(0,0,0)'; + } + + toggle.classList[slideOn ? 'add' : 'remove']('active'); + + e = new CustomEvent('toggle', { + detail: { isActive: slideOn }, + bubbles: true, + cancelable: true + }); + + toggle.dispatchEvent(e); + + touchMove = false; + toggle = false; + }); + +}()); diff --git a/dist/js/ratchet.min.js b/dist/js/ratchet.min.js index d1a5311..3dde418 100644 --- a/dist/js/ratchet.min.js +++ b/dist/js/ratchet.min.js @@ -7,4 +7,4 @@ * v2.0.2 designed by @connors. * ===================================================== */ -!function(){"use strict";var a=function(a){for(var b,c=document.querySelectorAll("a");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},b=function(b){var c=a(b.target);return c&&c.hash?document.querySelector(c.hash):void 0};window.addEventListener("touchend",function(a){var c=b(a);c&&(c&&c.classList.contains("modal")&&c.classList.toggle("active"),a.preventDefault())})}(),!function(){"use strict";var a,b=function(a){for(var b,c=document.querySelectorAll("a");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},c=function(){a.style.display="none",a.removeEventListener("webkitTransitionEnd",c)},d=function(){var b=document.createElement("div");return b.classList.add("backdrop"),b.addEventListener("touchend",function(){a.addEventListener("webkitTransitionEnd",c),a.classList.remove("visible"),a.parentNode.removeChild(d)}),b}(),e=function(c){var d=b(c.target);if(d&&d.hash&&!(d.hash.indexOf("/")>0)){try{a=document.querySelector(d.hash)}catch(e){a=null}if(null!==a&&a&&a.classList.contains("popover"))return a}},f=function(a){var b=e(a);b&&(b.style.display="block",b.offsetHeight,b.classList.add("visible"),b.parentNode.appendChild(d))};window.addEventListener("touchend",f)}(),!function(){"use strict";var a,b=function(){},c=20,d=sessionStorage,e={},f={"slide-in":"slide-out","slide-out":"slide-in",fade:"fade"},g={bartab:".bar-tab",barnav:".bar-nav",barfooter:".bar-footer",barheadersecondary:".bar-header-secondary"},h=function(a,b){o.id=a.id,b&&(a=k(a.id)),d[a.id]=JSON.stringify(a),window.history.replaceState(a.id,a.title,a.url),e[a.id]=document.body.cloneNode(!0)},i=function(){var a=o.id,b=JSON.parse(d.cacheForwardStack||"[]"),e=JSON.parse(d.cacheBackStack||"[]");for(e.push(a);b.length;)delete d[b.shift()];for(;e.length>c;)delete d[e.shift()];window.history.pushState(null,"",d[o.id].url),d.cacheForwardStack=JSON.stringify(b),d.cacheBackStack=JSON.stringify(e)},j=function(a,b){var c="forward"===b,e=JSON.parse(d.cacheForwardStack||"[]"),f=JSON.parse(d.cacheBackStack||"[]"),g=c?f:e,h=c?e:f;o.id&&g.push(o.id),h.pop(),d.cacheForwardStack=JSON.stringify(e),d.cacheBackStack=JSON.stringify(f)},k=function(a){return JSON.parse(d[a]||null)||{}},l=function(b){var c=t(b.target);if(!(!c||b.which>1||b.metaKey||b.ctrlKey||a||location.protocol!==c.protocol||location.host!==c.host||!c.hash&&/#/.test(c.href)||c.hash&&c.href.replace(c.hash,"")===location.href.replace(location.hash,"")||"push"===c.getAttribute("data-ignore")))return c},m=function(a){var b=l(a);b&&(a.preventDefault(),o({url:b.href,hash:b.hash,timeout:b.getAttribute("data-timeout"),transition:b.getAttribute("data-transition")}))},n=function(a){var b,c,h,i,l,m,n,p,q=a.state;if(q&&d[q]){if(l=o.id]*>([\s\S.]*)<\/head>/i)[0],d.innerHTML=f.match(/]*>([\s\S.]*)<\/body>/i)[0]):(c=d=document.createElement("div"),c.innerHTML=f),e.title=c.querySelector("title");var g="innerText"in e.title?"innerText":"textContent";return e.title=e.title&&e.title[g].trim(),b.transition?e=v(e,".content",d):e.contents=d,e};window.addEventListener("touchstart",function(){a=!1}),window.addEventListener("touchmove",function(){a=!0}),window.addEventListener("touchend",m),window.addEventListener("click",function(a){l(a)&&a.preventDefault()}),window.addEventListener("popstate",n),window.PUSH=o}(),!function(){"use strict";var a=function(a){for(var b,c=document.querySelectorAll(".segmented-control .control-item");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a};window.addEventListener("touchend",function(b){var c,d,e,f=a(b.target),g="active",h="."+g;if(f&&(c=f.parentNode.querySelector(h),c&&c.classList.remove(g),f.classList.add(g),f.hash&&(e=document.querySelector(f.hash)))){d=e.parentNode.querySelectorAll(h);for(var i=0;i .slide-group");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},o=function(){if("webkitTransform"in c.style){var a=c.style.webkitTransform.match(/translate3d\(([^,]*)/),b=a?a[1]:0;return parseInt(b,10)}},p=function(a){var b=a?0>d?"ceil":"floor":"round";k=Math[b](o()/(m/c.children.length)),k+=a,k=Math.min(k,0),k=Math.max(-(c.children.length-1),k)},q=function(f){if(c=n(f.target)){var k=c.querySelector(".slide");m=k.offsetWidth*c.children.length,l=void 0,j=c.offsetWidth,i=1,g=-(c.children.length-1),h=+new Date,a=f.touches[0].pageX,b=f.touches[0].pageY,d=0,e=0,p(0),c.style["-webkit-transition-duration"]=0}},r=function(h){h.touches.length>1||!c||(d=h.touches[0].pageX-a,e=h.touches[0].pageY-b,a=h.touches[0].pageX,b=h.touches[0].pageY,"undefined"==typeof l&&(l=Math.abs(e)>Math.abs(d)),l||(f=d/i+o(),h.preventDefault(),i=0===k&&d>0?a/j+1.25:k===g&&0>d?Math.abs(a)/j+1.25:1,c.style.webkitTransform="translate3d("+f+"px,0,0)"))},s=function(a){c&&!l&&(p(+new Date-h<1e3&&Math.abs(d)>15?0>d?-1:1:0),f=k*j,c.style["-webkit-transition-duration"]=".2s",c.style.webkitTransform="translate3d("+f+"px,0,0)",a=new CustomEvent("slide",{detail:{slideNumber:Math.abs(k)},bubbles:!0,cancelable:!0}),c.parentNode.dispatchEvent(a))};window.addEventListener("touchstart",q),window.addEventListener("touchmove",r),window.addEventListener("touchend",s)}(),!function(){"use strict";var a={},b=!1,c=!1,d=!1,e=function(a){for(var b,c=document.querySelectorAll(".toggle");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a};window.addEventListener("touchstart",function(c){if(c=c.originalEvent||c,d=e(c.target)){var f=d.querySelector(".toggle-handle"),g=d.clientWidth,h=f.clientWidth,i=d.classList.contains("active")?g-h:0;a={pageX:c.touches[0].pageX-i,pageY:c.touches[0].pageY},b=!1}}),window.addEventListener("touchmove",function(e){if(e=e.originalEvent||e,!(e.touches.length>1)&&d){var f=d.querySelector(".toggle-handle"),g=e.touches[0],h=d.clientWidth,i=f.clientWidth,j=h-i;if(b=!0,c=g.pageX-a.pageX,!(Math.abs(c)c)return f.style.webkitTransform="translate3d(0,0,0)";if(c>j)return f.style.webkitTransform="translate3d("+j+"px,0,0)";f.style.webkitTransform="translate3d("+c+"px,0,0)",d.classList[c>h/2-i/2?"add":"remove"]("active")}}}),window.addEventListener("touchend",function(a){if(d){var e=d.querySelector(".toggle-handle"),f=d.clientWidth,g=e.clientWidth,h=f-g,i=!b&&!d.classList.contains("active")||b&&c>f/2-g/2;e.style.webkitTransform=i?"translate3d("+h+"px,0,0)":"translate3d(0,0,0)",d.classList[i?"add":"remove"]("active"),a=new CustomEvent("toggle",{detail:{isActive:i},bubbles:!0,cancelable:!0}),d.dispatchEvent(a),b=!1,d=!1}})}(); \ No newline at end of file +!function(){"use strict";var a=function(a){for(var b,c=document.querySelectorAll("a");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},b=function(b){var c=a(b.target);return c&&c.hash?document.querySelector(c.hash):void 0};window.addEventListener("touchend",function(a){var c=b(a);c&&(c&&c.classList.contains("modal")&&c.classList.toggle("active"),a.preventDefault())})}(),!function(){"use strict";var a,b=function(a){for(var b,c=document.querySelectorAll("a");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},c=function(){a.style.display="none",a.removeEventListener("webkitTransitionEnd",c)},d=function(){var b=document.createElement("div");return b.classList.add("backdrop"),b.addEventListener("touchend",function(){a.addEventListener("webkitTransitionEnd",c),a.classList.remove("visible"),a.parentNode.removeChild(d)}),b}(),e=function(c){var d=b(c.target);if(d&&d.hash&&!(d.hash.indexOf("/")>0)){try{a=document.querySelector(d.hash)}catch(e){a=null}if(null!==a&&a&&a.classList.contains("popover"))return a}},f=function(a){var b=e(a);b&&(b.style.display="block",b.offsetHeight,b.classList.add("visible"),b.parentNode.appendChild(d))};window.addEventListener("touchend",f)}(),!function(){"use strict";var a,b=function(){},c=20,d=sessionStorage,e={},f={slideIn:"slide-out",slideOut:"slide-in",fade:"fade"},g={bartab:".bar-tab",barnav:".bar-nav",barfooter:".bar-footer",barheadersecondary:".bar-header-secondary"},h=function(a,b){o.id=a.id,b&&(a=k(a.id)),d[a.id]=JSON.stringify(a),window.history.replaceState(a.id,a.title,a.url),e[a.id]=document.body.cloneNode(!0)},i=function(){var a=o.id,b=JSON.parse(d.cacheForwardStack||"[]"),e=JSON.parse(d.cacheBackStack||"[]");for(e.push(a);b.length;)delete d[b.shift()];for(;e.length>c;)delete d[e.shift()];window.history.pushState(null,"",d[o.id].url),d.cacheForwardStack=JSON.stringify(b),d.cacheBackStack=JSON.stringify(e)},j=function(a,b){var c="forward"===b,e=JSON.parse(d.cacheForwardStack||"[]"),f=JSON.parse(d.cacheBackStack||"[]"),g=c?f:e,h=c?e:f;o.id&&g.push(o.id),h.pop(),d.cacheForwardStack=JSON.stringify(e),d.cacheBackStack=JSON.stringify(f)},k=function(a){return JSON.parse(d[a]||null)||{}},l=function(b){var c=t(b.target);if(!(!c||b.which>1||b.metaKey||b.ctrlKey||a||location.protocol!==c.protocol||location.host!==c.host||!c.hash&&/#/.test(c.href)||c.hash&&c.href.replace(c.hash,"")===location.href.replace(location.hash,"")||"push"===c.getAttribute("data-ignore")))return c},m=function(a){var b=l(a);b&&(a.preventDefault(),o({url:b.href,hash:b.hash,timeout:b.getAttribute("data-timeout"),transition:b.getAttribute("data-transition")}))},n=function(a){var b,c,h,i,l,m,n,p,q=a.state;if(q&&d[q]){if(l=o.id]*>([\s\S.]*)<\/head>/i)[0],d.innerHTML=f.match(/]*>([\s\S.]*)<\/body>/i)[0]):(c=d=document.createElement("div"),c.innerHTML=f),e.title=c.querySelector("title");var g="innerText"in e.title?"innerText":"textContent";return e.title=e.title&&e.title[g].trim(),b.transition?e=v(e,".content",d):e.contents=d,e};window.addEventListener("touchstart",function(){a=!1}),window.addEventListener("touchmove",function(){a=!0}),window.addEventListener("touchend",m),window.addEventListener("click",function(a){l(a)&&a.preventDefault()}),window.addEventListener("popstate",n),window.PUSH=o}(),!function(){"use strict";var a=function(a){for(var b,c=document.querySelectorAll(".segmented-control .control-item");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a};window.addEventListener("touchend",function(b){var c,d,e,f=a(b.target),g="active",h="."+g;if(f&&(c=f.parentNode.querySelector(h),c&&c.classList.remove(g),f.classList.add(g),f.hash&&(e=document.querySelector(f.hash)))){d=e.parentNode.querySelectorAll(h);for(var i=0;i .slide-group");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a},o=function(){if("webkitTransform"in c.style){var a=c.style.webkitTransform.match(/translate3d\(([^,]*)/),b=a?a[1]:0;return parseInt(b,10)}},p=function(a){var b=a?0>d?"ceil":"floor":"round";k=Math[b](o()/(m/c.children.length)),k+=a,k=Math.min(k,0),k=Math.max(-(c.children.length-1),k)},q=function(f){if(c=n(f.target)){var k=c.querySelector(".slide");m=k.offsetWidth*c.children.length,l=void 0,j=c.offsetWidth,i=1,g=-(c.children.length-1),h=+new Date,a=f.touches[0].pageX,b=f.touches[0].pageY,d=0,e=0,p(0),c.style["-webkit-transition-duration"]=0}},r=function(h){h.touches.length>1||!c||(d=h.touches[0].pageX-a,e=h.touches[0].pageY-b,a=h.touches[0].pageX,b=h.touches[0].pageY,"undefined"==typeof l&&(l=Math.abs(e)>Math.abs(d)),l||(f=d/i+o(),h.preventDefault(),i=0===k&&d>0?a/j+1.25:k===g&&0>d?Math.abs(a)/j+1.25:1,c.style.webkitTransform="translate3d("+f+"px,0,0)"))},s=function(a){c&&!l&&(p(+new Date-h<1e3&&Math.abs(d)>15?0>d?-1:1:0),f=k*j,c.style["-webkit-transition-duration"]=".2s",c.style.webkitTransform="translate3d("+f+"px,0,0)",a=new CustomEvent("slide",{detail:{slideNumber:Math.abs(k)},bubbles:!0,cancelable:!0}),c.parentNode.dispatchEvent(a))};window.addEventListener("touchstart",q),window.addEventListener("touchmove",r),window.addEventListener("touchend",s)}(),!function(){"use strict";var a={},b=!1,c=!1,d=!1,e=function(a){for(var b,c=document.querySelectorAll(".toggle");a&&a!==document;a=a.parentNode)for(b=c.length;b--;)if(c[b]===a)return a};window.addEventListener("touchstart",function(c){if(c=c.originalEvent||c,d=e(c.target)){var f=d.querySelector(".toggle-handle"),g=d.clientWidth,h=f.clientWidth,i=d.classList.contains("active")?g-h:0;a={pageX:c.touches[0].pageX-i,pageY:c.touches[0].pageY},b=!1}}),window.addEventListener("touchmove",function(e){if(e=e.originalEvent||e,!(e.touches.length>1)&&d){var f=d.querySelector(".toggle-handle"),g=e.touches[0],h=d.clientWidth,i=f.clientWidth,j=h-i;if(b=!0,c=g.pageX-a.pageX,!(Math.abs(c)c)return f.style.webkitTransform="translate3d(0,0,0)";if(c>j)return f.style.webkitTransform="translate3d("+j+"px,0,0)";f.style.webkitTransform="translate3d("+c+"px,0,0)",d.classList[c>h/2-i/2?"add":"remove"]("active")}}}),window.addEventListener("touchend",function(a){if(d){var e=d.querySelector(".toggle-handle"),f=d.clientWidth,g=e.clientWidth,h=f-g,i=!b&&!d.classList.contains("active")||b&&c>f/2-g/2;e.style.webkitTransform=i?"translate3d("+h+"px,0,0)":"translate3d(0,0,0)",d.classList[i?"add":"remove"]("active"),a=new CustomEvent("toggle",{detail:{isActive:i},bubbles:!0,cancelable:!0}),d.dispatchEvent(a),b=!1,d=!1}})}(); \ No newline at end of file