From 7d361c6e697463b2ccd515c85559122934fe2185 Mon Sep 17 00:00:00 2001 From: Pranav Date: Mon, 29 Sep 2014 15:24:26 +0530 Subject: [PATCH 01/95] Initial commit --- css/layouts/side-menu-old-ie.css | 259 +++++++++++++++++++++++++++++++ css/layouts/side-menu.css | 238 ++++++++++++++++++++++++++++ index.html | 49 ++++++ js/ui.js | 25 +++ plan.html | 49 ++++++ 5 files changed, 620 insertions(+) create mode 100644 css/layouts/side-menu-old-ie.css create mode 100644 css/layouts/side-menu.css create mode 100644 index.html create mode 100644 js/ui.js create mode 100644 plan.html diff --git a/css/layouts/side-menu-old-ie.css b/css/layouts/side-menu-old-ie.css new file mode 100644 index 0000000..c4987b5 --- /dev/null +++ b/css/layouts/side-menu-old-ie.css @@ -0,0 +1,259 @@ +body { + color: #777; +} + +.pure-img-responsive { + max-width: 100%; + height: auto; +} + +/* +Add transition to containers so they can push in and out. +*/ + +#layout, +#menu, +.menu-link { + -webkit-transition: all 0.2s ease-out; + -moz-transition: all 0.2s ease-out; + -ms-transition: all 0.2s ease-out; + -o-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +/* +This is the parent `
` that contains the menu and the content area. +*/ + +#layout { + position: relative; + padding-left: 0; +} + +#layout.active { + position: relative; + left: 150px; +} + +#layout.active #menu { + left: 150px; + width: 150px; +} + +#layout.active .menu-link { + left: 150px; +} + +/* +The content `
` is where all your content goes. +*/ + +.content { + margin: 0 auto; + padding: 0 2em; + max-width: 800px; + margin-bottom: 50px; + line-height: 1.6em; +} + +.header { + margin: 0; + color: #333; + text-align: center; + padding: 2.5em 2em 0; + border-bottom: 1px solid #eee; +} + +.header h1 { + margin: 0.2em 0; + font-size: 3em; + font-weight: 300; +} + +.header h2 { + font-weight: 300; + color: #ccc; + padding: 0; + margin-top: 0; +} + +.content-subhead { + margin: 50px 0 20px 0; + font-weight: 300; + color: #888; +} + +/* +The `#menu` `
` is the parent `
` that contains the `.pure-menu` that +appears on the left side of the page. +*/ + +#menu { + margin-left: -150px; + /* "#menu" width */ + width: 150px; + position: fixed; + top: 0; + left: 0; + bottom: 0; + z-index: 1000; + /* so the menu or its navicon stays above all content */ + background: #191818; + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} + +/* + All anchors inside the menu should be styled like this. + */ + +#menu a { + color: #999; + border: none; + padding: 0.6em 0 0.6em 0.6em; +} + +/* + Remove all background/borders, since we are applying them to #menu. + */ + +#menu .pure-menu, +#menu .pure-menu ul { + border: none; + background: transparent; +} + +/* + Add that light border to separate items into groups. + */ + +#menu .pure-menu ul, +#menu .pure-menu .menu-item-divided { + border-top: 1px solid #333; +} + +/* + Change color of the anchor links on hover/focus. + */ + +#menu .pure-menu li a:hover, +#menu .pure-menu li a:focus { + background: #333; +} + +/* + This styles the selected menu item `
  • `. + */ + +#menu .pure-menu-selected, +#menu .pure-menu-heading { + background: #1f8dd6; +} + +/* + This styles a link within a selected menu item `
  • `. + */ + +#menu .pure-menu-selected a { + color: #fff; +} + +/* + This styles the menu heading. + */ + +#menu .pure-menu-heading { + font-size: 110%; + color: #fff; + margin: 0; +} + +/* -- Dynamic Button For Responsive Menu -------------------------------------*/ + +/* +The button to open/close the Menu is custom-made and not part of Pure. Here's +how it works: +*/ + +/* +`.menu-link` represents the responsive menu toggle that shows/hides on +small screens. +*/ + +.menu-link { + position: fixed; + display: block; + /* show this only on small screens */ + top: 0; + left: 0; + /* "#menu width" */ + background: #000; + background: rgba(0,0,0,0.7); + font-size: 10px; + /* change this value to increase/decrease button size */ + z-index: 10; + width: 2em; + height: auto; + padding: 2.1em 1.6em; +} + +.menu-link:hover, +.menu-link:focus { + background: #000; +} + +.menu-link span { + position: relative; + display: block; +} + +.menu-link span, +.menu-link span:before, +.menu-link span:after { + background-color: #fff; + width: 100%; + height: 0.2em; +} + +.menu-link span:before, +.menu-link span:after { + position: absolute; + margin-top: -0.6em; + content: " "; +} + +.menu-link span:after { + margin-top: 0.6em; +} + +/* -- Responsive Styles (Media Queries) ------------------------------------- */ + +/* +Hides the menu at `48em`, but modify this based on your app's needs. +*/ + +.header, +.content { + padding-left: 2em; + padding-right: 2em; +} + +#layout { + padding-left: 150px; + /* left col width "#menu" */ + left: 0; +} + +#menu { + left: 150px; +} + +.menu-link { + position: fixed; + left: 150px; + display: none; +} + +#layout.active .menu-link { + left: 150px; +} \ No newline at end of file diff --git a/css/layouts/side-menu.css b/css/layouts/side-menu.css new file mode 100644 index 0000000..32add10 --- /dev/null +++ b/css/layouts/side-menu.css @@ -0,0 +1,238 @@ +body { + color: #777; +} + +.pure-img-responsive { + max-width: 100%; + height: auto; +} + +/* +Add transition to containers so they can push in and out. +*/ +#layout, +#menu, +.menu-link { + -webkit-transition: all 0.2s ease-out; + -moz-transition: all 0.2s ease-out; + -ms-transition: all 0.2s ease-out; + -o-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +/* +This is the parent `
    ` that contains the menu and the content area. +*/ +#layout { + position: relative; + padding-left: 0; +} + #layout.active { + position: relative; + left: 150px; + } + #layout.active #menu { + left: 150px; + width: 150px; + } + + #layout.active .menu-link { + left: 150px; + } +/* +The content `
    ` is where all your content goes. +*/ +.content { + margin: 0 auto; + padding: 0 2em; + height: 48em; + margin-bottom: 50px; + line-height: 1.6em; +} + +.header { + margin: 0; + color: #333; + text-align: center; + padding: 2.5em 2em 0; + border-bottom: 1px solid #eee; + } + .header h1 { + margin: 0.2em 0; + font-size: 3em; + font-weight: 300; + } + .header h2 { + font-weight: 300; + color: #ccc; + padding: 0; + margin-top: 0; + } + +.content-subhead { + margin: 50px 0 20px 0; + font-weight: 300; + color: #888; +} + + + +/* +The `#menu` `
    ` is the parent `
    ` that contains the `.pure-menu` that +appears on the left side of the page. +*/ + +#menu { + margin-left: -150px; /* "#menu" width */ + width: 150px; + position: fixed; + top: 0; + left: 0; + bottom: 0; + z-index: 1000; /* so the menu or its navicon stays above all content */ + background: #191818; + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} + /* + All anchors inside the menu should be styled like this. + */ + #menu a { + color: #999; + border: none; + padding: 0.6em 0 0.6em 0.6em; + } + + /* + Remove all background/borders, since we are applying them to #menu. + */ + #menu .pure-menu, + #menu .pure-menu ul { + border: none; + background: transparent; + } + + /* + Add that light border to separate items into groups. + */ + #menu .pure-menu ul, + #menu .pure-menu .menu-item-divided { + border-top: 1px solid #333; + } + /* + Change color of the anchor links on hover/focus. + */ + #menu .pure-menu li a:hover, + #menu .pure-menu li a:focus { + background: #333; + } + + /* + This styles the selected menu item `
  • `. + */ + #menu .pure-menu-selected, + #menu .pure-menu-heading { + background: #1f8dd6; + } + /* + This styles a link within a selected menu item `
  • `. + */ + #menu .pure-menu-selected a { + color: #fff; + } + + /* + This styles the menu heading. + */ + #menu .pure-menu-heading { + font-size: 110%; + color: #fff; + margin: 0; + } + +/* -- Dynamic Button For Responsive Menu -------------------------------------*/ + +/* +The button to open/close the Menu is custom-made and not part of Pure. Here's +how it works: +*/ + +/* +`.menu-link` represents the responsive menu toggle that shows/hides on +small screens. +*/ +.menu-link { + position: fixed; + display: block; /* show this only on small screens */ + top: 0; + left: 0; /* "#menu width" */ + background: #000; + background: rgba(0,0,0,0.7); + font-size: 10px; /* change this value to increase/decrease button size */ + z-index: 10; + width: 2em; + height: auto; + padding: 2.1em 1.6em; +} + + .menu-link:hover, + .menu-link:focus { + background: #000; + } + + .menu-link span { + position: relative; + display: block; + } + + .menu-link span, + .menu-link span:before, + .menu-link span:after { + background-color: #fff; + width: 100%; + height: 0.2em; + } + + .menu-link span:before, + .menu-link span:after { + position: absolute; + margin-top: -0.6em; + content: " "; + } + + .menu-link span:after { + margin-top: 0.6em; + } + + +/* -- Responsive Styles (Media Queries) ------------------------------------- */ + +/* +Hides the menu at `48em`, but modify this based on your app's needs. +*/ +@media (min-width: 48em) { + + .header, + .content { + padding-left: 2em; + padding-right: 2em; + } + + #layout { + padding-left: 150px; /* left col width "#menu" */ + left: 0; + } + #menu { + left: 150px; + } + + .menu-link { + position: fixed; + left: 150px; + display: none; + } + + #layout.active .menu-link { + left: 150px; + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..20e33ab --- /dev/null +++ b/index.html @@ -0,0 +1,49 @@ + + + + + + + Side Menu – + + + + + + + +
    + + + + + + +
    +
    +

    Home

    +

    Home

    +
    +
    +
    +
    +
    + + + + + \ No newline at end of file diff --git a/js/ui.js b/js/ui.js new file mode 100644 index 0000000..b225fe3 --- /dev/null +++ b/js/ui.js @@ -0,0 +1,25 @@ +$(document).ready(function() { + var layout = $('#layout'), + menu = $('#menu'), + menuLink = $('#menuLink'); + menuLink.click(function(evt) { + var active = 'active'; + evt.preventDefault(); + layout.toggleClass(active); + menu.toggleClass(active); + menuLink.toggleClass(active); + }); + + function initialize() { + var mapOptions = { + center: { + lat: -34.397, + lng: 150.644 + }, + zoom: 8 + }; + var map = new google.maps.Map(document.getElementById('map-canvas'), + mapOptions); + } + google.maps.event.addDomListener(window, 'load', initialize); +}); \ No newline at end of file diff --git a/plan.html b/plan.html new file mode 100644 index 0000000..b101a7b --- /dev/null +++ b/plan.html @@ -0,0 +1,49 @@ + + + + + + + Side Menu – + + + + + + + +
    + + + + + + +
    +
    +

    Plan

    +

    Plan a spot fix

    +
    +
    +
    +
    +
    + + + + + \ No newline at end of file From 71f9bceed2eabad413fec83ea6523a027d39be45 Mon Sep 17 00:00:00 2001 From: Pranav Date: Mon, 29 Sep 2014 16:35:06 +0530 Subject: [PATCH 02/95] Speed up page load --- css/layouts/side-menu.css | 190 +++++++----- css/nprogress.css | 75 +++++ index.html | 3 + js/nprogress.js | 476 +++++++++++++++++++++++++++++ js/turbolinks.js | 619 ++++++++++++++++++++++++++++++++++++++ js/ui.js | 27 +- plan.html | 3 + 7 files changed, 1310 insertions(+), 83 deletions(-) create mode 100644 css/nprogress.css create mode 100644 js/nprogress.js create mode 100644 js/turbolinks.js diff --git a/css/layouts/side-menu.css b/css/layouts/side-menu.css index 32add10..6fdc257 100644 --- a/css/layouts/side-menu.css +++ b/css/layouts/side-menu.css @@ -82,9 +82,29 @@ The `#menu` `
    ` is the parent `
    ` that contains the `.pure-menu` that appears on the left side of the page. */ +/* -------------------------- + * Main Navigation Bar Styles + * -------------------------- +*/ + +/* Add transition to containers so they can push in and out */ +#layout, +#menu, +.menu-link { + -webkit-transition: all 0.2s ease-out; + -moz-transition: all 0.2s ease-out; + -ms-transition: all 0.2s ease-out; + -o-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +#layout.active .menu-link { + left: 160px; +} + #menu { - margin-left: -150px; /* "#menu" width */ - width: 150px; + margin-left: -160px; /* "#menu" width */ + width: 184px; position: fixed; top: 0; left: 0; @@ -94,117 +114,131 @@ appears on the left side of the page. overflow-y: auto; -webkit-overflow-scrolling: touch; } - /* - All anchors inside the menu should be styled like this. - */ #menu a { color: #999; border: none; - padding: 0.6em 0 0.6em 0.6em; + white-space: normal; + padding: 0.625em 1em; } - /* - Remove all background/borders, since we are applying them to #menu. - */ - #menu .pure-menu, - #menu .pure-menu ul { + #menu .pure-menu-open { + background: transparent; + border: 0; + } + + #menu .pure-menu ul { border: none; background: transparent; } - /* - Add that light border to separate items into groups. - */ #menu .pure-menu ul, #menu .pure-menu .menu-item-divided { border-top: 1px solid #333; } - /* - Change color of the anchor links on hover/focus. - */ + #menu .pure-menu li a:hover, #menu .pure-menu li a:focus { background: #333; } - /* - This styles the selected menu item `
  • `. - */ - #menu .pure-menu-selected, - #menu .pure-menu-heading { - background: #1f8dd6; + .menu-link { + position: fixed; + display: block; /* show this only on small screens */ + top: 0; + left: 0; /* "#menu width" */ + background: #000; + background: rgba(0,0,0,0.7); + font-size: 11px; /* change this value to increase/decrease button size */ + z-index: 10; + width: 4em; + height: 4em; + padding: 1em; } - /* - This styles a link within a selected menu item `
  • `. - */ - #menu .pure-menu-selected a { - color: #fff; + + .menu-link:hover, + .menu-link:focus { + background: #000; } - /* - This styles the menu heading. - */ - #menu .pure-menu-heading { - font-size: 110%; - color: #fff; - margin: 0; - } + .menu-link span { + position: relative; + display: block; + margin-top: 0.9em; + } + + .menu-link span, + .menu-link span:before, + .menu-link span:after { + background-color: #fff; + width: 100%; + height: .2em; + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -ms-transition: all 0.4s; + -o-transition: all 0.4s; + transition: all 0.4s; + } -/* -- Dynamic Button For Responsive Menu -------------------------------------*/ + .menu-link span:before, + .menu-link span:after { + position: absolute; + top: -.55em; + content: " "; + } -/* -The button to open/close the Menu is custom-made and not part of Pure. Here's -how it works: -*/ + .menu-link span:after { + top: .55em; + } -/* -`.menu-link` represents the responsive menu toggle that shows/hides on -small screens. -*/ -.menu-link { - position: fixed; - display: block; /* show this only on small screens */ - top: 0; - left: 0; /* "#menu width" */ - background: #000; - background: rgba(0,0,0,0.7); - font-size: 10px; /* change this value to increase/decrease button size */ - z-index: 10; - width: 2em; - height: auto; - padding: 2.1em 1.6em; -} + .menu-link.active span { + background: transparent; + } - .menu-link:hover, - .menu-link:focus { - background: #000; - } + .menu-link.active span:before { + -webkit-transform: rotate(45deg) translate(.5em, .4em); + -moz-transform: rotate(45deg) translate(.5em, .4em); + -ms-transform: rotate(45deg) translate(.5em, .4em); + -o-transform: rotate(45deg) translate(.5em, .4em); + transform: rotate(45deg) translate(.5em, .4em); + } - .menu-link span { - position: relative; - display: block; + .menu-link.active span:after { + -webkit-transform: rotate(-45deg) translate(.4em, -.3em); + -moz-transform: rotate(-45deg) translate(.4em, -.3em); + -ms-transform: rotate(-45deg) translate(.4em, -.3em); + -o-transform: rotate(-45deg) translate(.4em, -.3em); + transform: rotate(-45deg) translate(.4em, -.3em); + } + + #menu .pure-menu-heading { + font-size: 125%; + font-weight: 300; + letter-spacing: 0.1em; + color: #fff; + margin-top: 0; + padding: 0.5em 0.8em; + } + #menu .pure-menu-heading:hover, + #menu .pure-menu-heading:focus { + color: #999; } - .menu-link span, - .menu-link span:before, - .menu-link span:after { - background-color: #fff; - width: 100%; - height: 0.2em; + #menu .pure-menu-selected { + background: #1f8dd6; } - .menu-link span:before, - .menu-link span:after { - position: absolute; - margin-top: -0.6em; - content: " "; + #menu .pure-menu-selected a { + color: #fff; } - .menu-link span:after { - margin-top: 0.6em; + #menu li.pure-menu-selected a:hover, + #menu li.pure-menu-selected a:focus { + background: none; } + + /* -- Responsive Styles (Media Queries) ------------------------------------- */ /* diff --git a/css/nprogress.css b/css/nprogress.css new file mode 100644 index 0000000..a848d92 --- /dev/null +++ b/css/nprogress.css @@ -0,0 +1,75 @@ +/* Make clicks pass-through */ +#nprogress { + pointer-events: none; +} + +#nprogress .bar { + background: #29d; + + position: fixed; + z-index: 1031; + top: 0; + left: 0; + + width: 100%; + height: 2px; +} + +/* Fancy blur effect */ +#nprogress .peg { + display: block; + position: absolute; + right: 0px; + width: 100px; + height: 100%; + box-shadow: 0 0 10px #29d, 0 0 5px #29d; + opacity: 1.0; + + -webkit-transform: rotate(3deg) translate(0px, -4px); + -ms-transform: rotate(3deg) translate(0px, -4px); + transform: rotate(3deg) translate(0px, -4px); +} + +/* Remove these to get rid of the spinner */ +/*#nprogress .spinner { + display: block; + position: fixed; + z-index: 1031; + top: 15px; + right: 15px; +} + +#nprogress .spinner-icon { + width: 18px; + height: 18px; + box-sizing: border-box; + + border: solid 2px transparent; + border-top-color: #29d; + border-left-color: #29d; + border-radius: 50%; + + -webkit-animation: nprogress-spinner 400ms linear infinite; + animation: nprogress-spinner 400ms linear infinite; +} + +.nprogress-custom-parent { + overflow: hidden; + position: relative; +} + +.nprogress-custom-parent #nprogress .spinner, +.nprogress-custom-parent #nprogress .bar { + position: absolute; +} + +@-webkit-keyframes nprogress-spinner { + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); } +} +@keyframes nprogress-spinner { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +*/ \ No newline at end of file diff --git a/index.html b/index.html index 20e33ab..b0bd3ff 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@ + @@ -44,6 +45,8 @@

    Home

    • + + \ No newline at end of file diff --git a/js/nprogress.js b/js/nprogress.js new file mode 100644 index 0000000..124351e --- /dev/null +++ b/js/nprogress.js @@ -0,0 +1,476 @@ +/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress + * @license MIT */ + +;(function(root, factory) { + + if (typeof define === 'function' && define.amd) { + define(factory); + } else if (typeof exports === 'object') { + module.exports = factory(); + } else { + root.NProgress = factory(); + } + +})(this, function() { + var NProgress = {}; + + NProgress.version = '0.1.6'; + + var Settings = NProgress.settings = { + minimum: 0.08, + easing: 'ease', + positionUsing: '', + speed: 200, + trickle: true, + trickleRate: 0.02, + trickleSpeed: 800, + showSpinner: true, + barSelector: '[role="bar"]', + spinnerSelector: '[role="spinner"]', + parent: 'body', + template: '
    ' + }; + + /** + * Updates configuration. + * + * NProgress.configure({ + * minimum: 0.1 + * }); + */ + NProgress.configure = function(options) { + var key, value; + for (key in options) { + value = options[key]; + if (value !== undefined && options.hasOwnProperty(key)) Settings[key] = value; + } + + return this; + }; + + /** + * Last number. + */ + + NProgress.status = null; + + /** + * Sets the progress bar status, where `n` is a number from `0.0` to `1.0`. + * + * NProgress.set(0.4); + * NProgress.set(1.0); + */ + + NProgress.set = function(n) { + var started = NProgress.isStarted(); + + n = clamp(n, Settings.minimum, 1); + NProgress.status = (n === 1 ? null : n); + + var progress = NProgress.render(!started), + bar = progress.querySelector(Settings.barSelector), + speed = Settings.speed, + ease = Settings.easing; + + progress.offsetWidth; /* Repaint */ + + queue(function(next) { + // Set positionUsing if it hasn't already been set + if (Settings.positionUsing === '') Settings.positionUsing = NProgress.getPositioningCSS(); + + // Add transition + css(bar, barPositionCSS(n, speed, ease)); + + if (n === 1) { + // Fade out + css(progress, { + transition: 'none', + opacity: 1 + }); + progress.offsetWidth; /* Repaint */ + + setTimeout(function() { + css(progress, { + transition: 'all ' + speed + 'ms linear', + opacity: 0 + }); + setTimeout(function() { + NProgress.remove(); + next(); + }, speed); + }, speed); + } else { + setTimeout(next, speed); + } + }); + + return this; + }; + + NProgress.isStarted = function() { + return typeof NProgress.status === 'number'; + }; + + /** + * Shows the progress bar. + * This is the same as setting the status to 0%, except that it doesn't go backwards. + * + * NProgress.start(); + * + */ + NProgress.start = function() { + if (!NProgress.status) NProgress.set(0); + + var work = function() { + setTimeout(function() { + if (!NProgress.status) return; + NProgress.trickle(); + work(); + }, Settings.trickleSpeed); + }; + + if (Settings.trickle) work(); + + return this; + }; + + /** + * Hides the progress bar. + * This is the *sort of* the same as setting the status to 100%, with the + * difference being `done()` makes some placebo effect of some realistic motion. + * + * NProgress.done(); + * + * If `true` is passed, it will show the progress bar even if its hidden. + * + * NProgress.done(true); + */ + + NProgress.done = function(force) { + if (!force && !NProgress.status) return this; + + return NProgress.inc(0.3 + 0.5 * Math.random()).set(1); + }; + + /** + * Increments by a random amount. + */ + + NProgress.inc = function(amount) { + var n = NProgress.status; + + if (!n) { + return NProgress.start(); + } else { + if (typeof amount !== 'number') { + amount = (1 - n) * clamp(Math.random() * n, 0.1, 0.95); + } + + n = clamp(n + amount, 0, 0.994); + return NProgress.set(n); + } + }; + + NProgress.trickle = function() { + return NProgress.inc(Math.random() * Settings.trickleRate); + }; + + /** + * Waits for all supplied jQuery promises and + * increases the progress as the promises resolve. + * + * @param $promise jQUery Promise + */ + (function() { + var initial = 0, current = 0; + + NProgress.promise = function($promise) { + if (!$promise || $promise.state() == "resolved") { + return this; + } + + if (current == 0) { + NProgress.start(); + } + + initial++; + current++; + + $promise.always(function() { + current--; + if (current == 0) { + initial = 0; + NProgress.done(); + } else { + NProgress.set((initial - current) / initial); + } + }); + + return this; + }; + + })(); + + /** + * (Internal) renders the progress bar markup based on the `template` + * setting. + */ + + NProgress.render = function(fromStart) { + if (NProgress.isRendered()) return document.getElementById('nprogress'); + + addClass(document.documentElement, 'nprogress-busy'); + + var progress = document.createElement('div'); + progress.id = 'nprogress'; + progress.innerHTML = Settings.template; + + var bar = progress.querySelector(Settings.barSelector), + perc = fromStart ? '-100' : toBarPerc(NProgress.status || 0), + parent = document.querySelector(Settings.parent), + spinner; + + css(bar, { + transition: 'all 0 linear', + transform: 'translate3d(' + perc + '%,0,0)' + }); + + if (!Settings.showSpinner) { + spinner = progress.querySelector(Settings.spinnerSelector); + spinner && removeElement(spinner); + } + + if (parent != document.body) { + addClass(parent, 'nprogress-custom-parent'); + } + + parent.appendChild(progress); + return progress; + }; + + /** + * Removes the element. Opposite of render(). + */ + + NProgress.remove = function() { + removeClass(document.documentElement, 'nprogress-busy'); + removeClass(document.querySelector(Settings.parent), 'nprogress-custom-parent') + var progress = document.getElementById('nprogress'); + progress && removeElement(progress); + }; + + /** + * Checks if the progress bar is rendered. + */ + + NProgress.isRendered = function() { + return !!document.getElementById('nprogress'); + }; + + /** + * Determine which positioning CSS rule to use. + */ + + NProgress.getPositioningCSS = function() { + // Sniff on document.body.style + var bodyStyle = document.body.style; + + // Sniff prefixes + var vendorPrefix = ('WebkitTransform' in bodyStyle) ? 'Webkit' : + ('MozTransform' in bodyStyle) ? 'Moz' : + ('msTransform' in bodyStyle) ? 'ms' : + ('OTransform' in bodyStyle) ? 'O' : ''; + + if (vendorPrefix + 'Perspective' in bodyStyle) { + // Modern browsers with 3D support, e.g. Webkit, IE10 + return 'translate3d'; + } else if (vendorPrefix + 'Transform' in bodyStyle) { + // Browsers without 3D support, e.g. IE9 + return 'translate'; + } else { + // Browsers without translate() support, e.g. IE7-8 + return 'margin'; + } + }; + + /** + * Helpers + */ + + function clamp(n, min, max) { + if (n < min) return min; + if (n > max) return max; + return n; + } + + /** + * (Internal) converts a percentage (`0..1`) to a bar translateX + * percentage (`-100%..0%`). + */ + + function toBarPerc(n) { + return (-1 + n) * 100; + } + + + /** + * (Internal) returns the correct CSS for changing the bar's + * position given an n percentage, and speed and ease from Settings + */ + + function barPositionCSS(n, speed, ease) { + var barCSS; + + if (Settings.positionUsing === 'translate3d') { + barCSS = { transform: 'translate3d('+toBarPerc(n)+'%,0,0)' }; + } else if (Settings.positionUsing === 'translate') { + barCSS = { transform: 'translate('+toBarPerc(n)+'%,0)' }; + } else { + barCSS = { 'margin-left': toBarPerc(n)+'%' }; + } + + barCSS.transition = 'all '+speed+'ms '+ease; + + return barCSS; + } + + /** + * (Internal) Queues a function to be executed. + */ + + var queue = (function() { + var pending = []; + + function next() { + var fn = pending.shift(); + if (fn) { + fn(next); + } + } + + return function(fn) { + pending.push(fn); + if (pending.length == 1) next(); + }; + })(); + + /** + * (Internal) Applies css properties to an element, similar to the jQuery + * css method. + * + * While this helper does assist with vendor prefixed property names, it + * does not perform any manipulation of values prior to setting styles. + */ + + var css = (function() { + var cssPrefixes = [ 'Webkit', 'O', 'Moz', 'ms' ], + cssProps = {}; + + function camelCase(string) { + return string.replace(/^-ms-/, 'ms-').replace(/-([\da-z])/gi, function(match, letter) { + return letter.toUpperCase(); + }); + } + + function getVendorProp(name) { + var style = document.body.style; + if (name in style) return name; + + var i = cssPrefixes.length, + capName = name.charAt(0).toUpperCase() + name.slice(1), + vendorName; + while (i--) { + vendorName = cssPrefixes[i] + capName; + if (vendorName in style) return vendorName; + } + + return name; + } + + function getStyleProp(name) { + name = camelCase(name); + return cssProps[name] || (cssProps[name] = getVendorProp(name)); + } + + function applyCss(element, prop, value) { + prop = getStyleProp(prop); + element.style[prop] = value; + } + + return function(element, properties) { + var args = arguments, + prop, + value; + + if (args.length == 2) { + for (prop in properties) { + value = properties[prop]; + if (value !== undefined && properties.hasOwnProperty(prop)) applyCss(element, prop, value); + } + } else { + applyCss(element, args[1], args[2]); + } + } + })(); + + /** + * (Internal) Determines if an element or space separated list of class names contains a class name. + */ + + function hasClass(element, name) { + var list = typeof element == 'string' ? element : classList(element); + return list.indexOf(' ' + name + ' ') >= 0; + } + + /** + * (Internal) Adds a class to an element. + */ + + function addClass(element, name) { + var oldList = classList(element), + newList = oldList + name; + + if (hasClass(oldList, name)) return; + + // Trim the opening space. + element.className = newList.substring(1); + } + + /** + * (Internal) Removes a class from an element. + */ + + function removeClass(element, name) { + var oldList = classList(element), + newList; + + if (!hasClass(element, name)) return; + + // Replace the class name. + newList = oldList.replace(' ' + name + ' ', ' '); + + // Trim the opening and closing spaces. + element.className = newList.substring(1, newList.length - 1); + } + + /** + * (Internal) Gets a space separated list of the class names on the element. + * The list is wrapped with a single space on each end to facilitate finding + * matches within the list. + */ + + function classList(element) { + return (' ' + (element.className || '') + ' ').replace(/\s+/gi, ' '); + } + + /** + * (Internal) Removes an element from the DOM. + */ + + function removeElement(element) { + element && element.parentNode && element.parentNode.removeChild(element); + } + + return NProgress; +}); + diff --git a/js/turbolinks.js b/js/turbolinks.js new file mode 100644 index 0000000..aae3dcf --- /dev/null +++ b/js/turbolinks.js @@ -0,0 +1,619 @@ +// Generated by CoffeeScript 1.4.0 +(function() { + var CSRFToken, Click, ComponentUrl, Link, browserCompatibleDocumentParser, browserIsntBuggy, browserSupportsCustomEvents, browserSupportsPushState, browserSupportsTurbolinks, bypassOnLoadPopstate, cacheCurrentPage, cacheSize, changePage, constrainPageCacheTo, createDocument, currentState, enableTransitionCache, executeScriptTags, extractTitleAndBody, fetch, fetchHistory, fetchReplacement, historyStateIsDefined, initializeTurbolinks, installDocumentReadyPageEventTriggers, installHistoryChangeHandler, installJqueryAjaxSuccessPageUpdateTrigger, loadedAssets, manuallyTriggerHashChangeForFirefox, pageCache, pageChangePrevented, pagesCached, popCookie, processResponse, recallScrollPosition, referer, reflectNewUrl, reflectRedirectedUrl, rememberCurrentState, rememberCurrentUrl, rememberReferer, removeNoscriptTags, requestMethodIsSafe, resetScrollPosition, setAutofocusElement, transitionCacheEnabled, transitionCacheFor, triggerEvent, visit, xhr, _ref, + __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }, + __hasProp = {}.hasOwnProperty, + __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }, + __slice = [].slice; + + pageCache = {}; + + cacheSize = 10; + + transitionCacheEnabled = false; + + currentState = null; + + loadedAssets = null; + + referer = null; + + createDocument = null; + + xhr = null; + + fetch = function(url) { + var cachedPage; + url = new ComponentUrl(url); + rememberReferer(); + cacheCurrentPage(); + if (transitionCacheEnabled && (cachedPage = transitionCacheFor(url.absolute))) { + fetchHistory(cachedPage); + return fetchReplacement(url); + } else { + return fetchReplacement(url, resetScrollPosition); + } + }; + + transitionCacheFor = function(url) { + var cachedPage; + cachedPage = pageCache[url]; + if (cachedPage && !cachedPage.transitionCacheDisabled) { + return cachedPage; + } + }; + + enableTransitionCache = function(enable) { + if (enable == null) { + enable = true; + } + return transitionCacheEnabled = enable; + }; + + fetchReplacement = function(url, onLoadFunction) { + var _this = this; + if (onLoadFunction == null) { + onLoadFunction = function() {}; + } + triggerEvent('page:fetch', { + url: url.absolute + }); + if (xhr != null) { + xhr.abort(); + } + xhr = new XMLHttpRequest; + xhr.open('GET', url.withoutHashForIE10compatibility(), true); + xhr.setRequestHeader('Accept', 'text/html, application/xhtml+xml, application/xml'); + xhr.setRequestHeader('X-XHR-Referer', referer); + xhr.onload = function() { + var doc; + triggerEvent('page:receive', { + url: url.absolute + }); + if (doc = processResponse()) { + reflectNewUrl(url); + changePage.apply(null, extractTitleAndBody(doc)); + manuallyTriggerHashChangeForFirefox(); + reflectRedirectedUrl(); + onLoadFunction(); + return triggerEvent('page:load'); + } else { + return document.location.href = url.absolute; + } + }; + xhr.onloadend = function() { + return xhr = null; + }; + xhr.onerror = function() { + return document.location.href = url.absolute; + }; + return xhr.send(); + }; + + fetchHistory = function(cachedPage) { + if (xhr != null) { + xhr.abort(); + } + changePage(cachedPage.title, cachedPage.body); + recallScrollPosition(cachedPage); + return triggerEvent('page:restore'); + }; + + cacheCurrentPage = function() { + var currentStateUrl; + currentStateUrl = new ComponentUrl(currentState.url); + pageCache[currentStateUrl.absolute] = { + url: currentStateUrl.relative, + body: document.body, + title: document.title, + positionY: window.pageYOffset, + positionX: window.pageXOffset, + cachedAt: new Date().getTime(), + transitionCacheDisabled: document.querySelector('[data-no-transition-cache]') != null + }; + return constrainPageCacheTo(cacheSize); + }; + + pagesCached = function(size) { + if (size == null) { + size = cacheSize; + } + if (/^[\d]+$/.test(size)) { + return cacheSize = parseInt(size); + } + }; + + constrainPageCacheTo = function(limit) { + var cacheTimesRecentFirst, key, pageCacheKeys, _i, _len, _results; + pageCacheKeys = Object.keys(pageCache); + cacheTimesRecentFirst = pageCacheKeys.map(function(url) { + return pageCache[url].cachedAt; + }).sort(function(a, b) { + return b - a; + }); + _results = []; + for (_i = 0, _len = pageCacheKeys.length; _i < _len; _i++) { + key = pageCacheKeys[_i]; + if (!(pageCache[key].cachedAt <= cacheTimesRecentFirst[limit])) { + continue; + } + triggerEvent('page:expire', pageCache[key]); + _results.push(delete pageCache[key]); + } + return _results; + }; + + changePage = function(title, body, csrfToken, runScripts) { + triggerEvent('page:before-unload'); + document.title = title; + document.documentElement.replaceChild(body, document.body); + if (csrfToken != null) { + CSRFToken.update(csrfToken); + } + setAutofocusElement(); + if (runScripts) { + executeScriptTags(); + } + currentState = window.history.state; + triggerEvent('page:change'); + return triggerEvent('page:update'); + }; + + executeScriptTags = function() { + var attr, copy, nextSibling, parentNode, script, scripts, _i, _j, _len, _len1, _ref, _ref1; + scripts = Array.prototype.slice.call(document.body.querySelectorAll('script:not([data-turbolinks-eval="false"])')); + for (_i = 0, _len = scripts.length; _i < _len; _i++) { + script = scripts[_i]; + if (!((_ref = script.type) === '' || _ref === 'text/javascript')) { + continue; + } + copy = document.createElement('script'); + _ref1 = script.attributes; + for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) { + attr = _ref1[_j]; + copy.setAttribute(attr.name, attr.value); + } + if (!script.hasAttribute('async')) { + copy.async = false; + } + copy.appendChild(document.createTextNode(script.innerHTML)); + parentNode = script.parentNode, nextSibling = script.nextSibling; + parentNode.removeChild(script); + parentNode.insertBefore(copy, nextSibling); + } + }; + + removeNoscriptTags = function(node) { + node.innerHTML = node.innerHTML.replace(//ig, ''); + return node; + }; + + setAutofocusElement = function() { + var autofocusElement, list; + autofocusElement = (list = document.querySelectorAll('input[autofocus], textarea[autofocus]'))[list.length - 1]; + if (autofocusElement && document.activeElement !== autofocusElement) { + return autofocusElement.focus(); + } + }; + + reflectNewUrl = function(url) { + if ((url = new ComponentUrl(url)).absolute !== referer) { + return window.history.pushState({ + turbolinks: true, + url: url.absolute + }, '', url.absolute); + } + }; + + reflectRedirectedUrl = function() { + var location, preservedHash; + if (location = xhr.getResponseHeader('X-XHR-Redirected-To')) { + location = new ComponentUrl(location); + preservedHash = location.hasNoHash() ? document.location.hash : ''; + return window.history.replaceState(currentState, '', location.href + preservedHash); + } + }; + + rememberReferer = function() { + return referer = document.location.href; + }; + + rememberCurrentUrl = function() { + return window.history.replaceState({ + turbolinks: true, + url: document.location.href + }, '', document.location.href); + }; + + rememberCurrentState = function() { + return currentState = window.history.state; + }; + + manuallyTriggerHashChangeForFirefox = function() { + var url; + if (navigator.userAgent.match(/Firefox/) && !(url = new ComponentUrl).hasNoHash()) { + window.history.replaceState(currentState, '', url.withoutHash()); + return document.location.hash = url.hash; + } + }; + + recallScrollPosition = function(page) { + return window.scrollTo(page.positionX, page.positionY); + }; + + resetScrollPosition = function() { + if (document.location.hash) { + return document.location.href = document.location.href; + } else { + return window.scrollTo(0, 0); + } + }; + + popCookie = function(name) { + var value, _ref; + value = ((_ref = document.cookie.match(new RegExp(name + "=(\\w+)"))) != null ? _ref[1].toUpperCase() : void 0) || ''; + document.cookie = name + '=; expires=Thu, 01-Jan-70 00:00:01 GMT; path=/'; + return value; + }; + + triggerEvent = function(name, data) { + var event; + if (typeof Prototype !== 'undefined') { + Event.fire(document, name, data, true); + } + event = document.createEvent('Events'); + if (data) { + event.data = data; + } + event.initEvent(name, true, true); + return document.dispatchEvent(event); + }; + + pageChangePrevented = function(url) { + return !triggerEvent('page:before-change', { + url: url + }); + }; + + processResponse = function() { + var assetsChanged, clientOrServerError, doc, extractTrackAssets, intersection, validContent; + clientOrServerError = function() { + var _ref; + return (400 <= (_ref = xhr.status) && _ref < 600); + }; + validContent = function() { + return xhr.getResponseHeader('Content-Type').match(/^(?:text\/html|application\/xhtml\+xml|application\/xml)(?:;|$)/); + }; + extractTrackAssets = function(doc) { + var node, _i, _len, _ref, _results; + _ref = doc.head.childNodes; + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + node = _ref[_i]; + if ((typeof node.getAttribute === "function" ? node.getAttribute('data-turbolinks-track') : void 0) != null) { + _results.push(node.getAttribute('src') || node.getAttribute('href')); + } + } + return _results; + }; + assetsChanged = function(doc) { + var fetchedAssets; + loadedAssets || (loadedAssets = extractTrackAssets(document)); + fetchedAssets = extractTrackAssets(doc); + return fetchedAssets.length !== loadedAssets.length || intersection(fetchedAssets, loadedAssets).length !== loadedAssets.length; + }; + intersection = function(a, b) { + var value, _i, _len, _ref, _results; + if (a.length > b.length) { + _ref = [b, a], a = _ref[0], b = _ref[1]; + } + _results = []; + for (_i = 0, _len = a.length; _i < _len; _i++) { + value = a[_i]; + if (__indexOf.call(b, value) >= 0) { + _results.push(value); + } + } + return _results; + }; + if (!clientOrServerError() && validContent()) { + doc = createDocument(xhr.responseText); + if (doc && !assetsChanged(doc)) { + return doc; + } + } + }; + + extractTitleAndBody = function(doc) { + var title; + title = doc.querySelector('title'); + return [title != null ? title.textContent : void 0, removeNoscriptTags(doc.body), CSRFToken.get(doc).token, 'runScripts']; + }; + + CSRFToken = { + get: function(doc) { + var tag; + if (doc == null) { + doc = document; + } + return { + node: tag = doc.querySelector('meta[name="csrf-token"]'), + token: tag != null ? typeof tag.getAttribute === "function" ? tag.getAttribute('content') : void 0 : void 0 + }; + }, + update: function(latest) { + var current; + current = this.get(); + if ((current.token != null) && (latest != null) && current.token !== latest) { + return current.node.setAttribute('content', latest); + } + } + }; + + browserCompatibleDocumentParser = function() { + var createDocumentUsingDOM, createDocumentUsingParser, createDocumentUsingWrite, testDoc, _ref; + createDocumentUsingParser = function(html) { + return (new DOMParser).parseFromString(html, 'text/html'); + }; + createDocumentUsingDOM = function(html) { + var doc; + doc = document.implementation.createHTMLDocument(''); + doc.documentElement.innerHTML = html; + return doc; + }; + createDocumentUsingWrite = function(html) { + var doc; + doc = document.implementation.createHTMLDocument(''); + doc.open('replace'); + doc.write(html); + doc.close(); + return doc; + }; + try { + if (window.DOMParser) { + testDoc = createDocumentUsingParser('

    test'); + return createDocumentUsingParser; + } + } catch (e) { + testDoc = createDocumentUsingDOM('

    test'); + return createDocumentUsingDOM; + } finally { + if ((testDoc != null ? (_ref = testDoc.body) != null ? _ref.childNodes.length : void 0 : void 0) !== 1) { + return createDocumentUsingWrite; + } + } + }; + + ComponentUrl = (function() { + + function ComponentUrl(original) { + this.original = original != null ? original : document.location.href; + if (this.original.constructor === ComponentUrl) { + return this.original; + } + this._parse(); + } + + ComponentUrl.prototype.withoutHash = function() { + return this.href.replace(this.hash, ''); + }; + + ComponentUrl.prototype.withoutHashForIE10compatibility = function() { + return this.withoutHash(); + }; + + ComponentUrl.prototype.hasNoHash = function() { + return this.hash.length === 0; + }; + + ComponentUrl.prototype._parse = function() { + var _ref, _ref1; + ((_ref = this.link) != null ? _ref : this.link = document.createElement('a')).href = this.original; + _ref1 = this.link, this.href = _ref1.href, this.protocol = _ref1.protocol, this.host = _ref1.host, this.hostname = _ref1.hostname, this.port = _ref1.port, this.pathname = _ref1.pathname, this.search = _ref1.search, this.hash = _ref1.hash; + this.origin = [this.protocol, '//', this.hostname].join(''); + if (this.port.length !== 0) { + this.origin += ":" + this.port; + } + this.relative = [this.pathname, this.search, this.hash].join(''); + return this.absolute = this.href; + }; + + return ComponentUrl; + + })(); + + Link = (function(_super) { + + __extends(Link, _super); + + Link.HTML_EXTENSIONS = ['html']; + + Link.allowExtensions = function() { + var extension, extensions, _i, _len; + extensions = 1 <= arguments.length ? __slice.call(arguments, 0) : []; + for (_i = 0, _len = extensions.length; _i < _len; _i++) { + extension = extensions[_i]; + Link.HTML_EXTENSIONS.push(extension); + } + return Link.HTML_EXTENSIONS; + }; + + function Link(link) { + this.link = link; + if (this.link.constructor === Link) { + return this.link; + } + this.original = this.link.href; + this.originalElement = this.link; + this.link = this.link.cloneNode(false); + Link.__super__.constructor.apply(this, arguments); + } + + Link.prototype.shouldIgnore = function() { + return this._crossOrigin() || this._anchored() || this._nonHtml() || this._optOut() || this._target(); + }; + + Link.prototype._crossOrigin = function() { + return this.origin !== (new ComponentUrl).origin; + }; + + Link.prototype._anchored = function() { + var current; + return ((this.hash && this.withoutHash()) === (current = new ComponentUrl).withoutHash()) || (this.href === current.href + '#'); + }; + + Link.prototype._nonHtml = function() { + return this.pathname.match(/\.[a-z]+$/g) && !this.pathname.match(new RegExp("\\.(?:" + (Link.HTML_EXTENSIONS.join('|')) + ")?$", 'g')); + }; + + Link.prototype._optOut = function() { + var ignore, link; + link = this.originalElement; + while (!(ignore || link === document)) { + ignore = link.getAttribute('data-no-turbolink') != null; + link = link.parentNode; + } + return ignore; + }; + + Link.prototype._target = function() { + return this.link.target.length !== 0; + }; + + return Link; + + })(ComponentUrl); + + Click = (function() { + + Click.installHandlerLast = function(event) { + if (!event.defaultPrevented) { + document.removeEventListener('click', Click.handle, false); + return document.addEventListener('click', Click.handle, false); + } + }; + + Click.handle = function(event) { + return new Click(event); + }; + + function Click(event) { + this.event = event; + if (this.event.defaultPrevented) { + return; + } + this._extractLink(); + if (this._validForTurbolinks()) { + if (!pageChangePrevented(this.link.absolute)) { + visit(this.link.href); + } + this.event.preventDefault(); + } + } + + Click.prototype._extractLink = function() { + var link; + link = this.event.target; + while (!(!link.parentNode || link.nodeName === 'A')) { + link = link.parentNode; + } + if (link.nodeName === 'A' && link.href.length !== 0) { + return this.link = new Link(link); + } + }; + + Click.prototype._validForTurbolinks = function() { + return (this.link != null) && !(this.link.shouldIgnore() || this._nonStandardClick()); + }; + + Click.prototype._nonStandardClick = function() { + return this.event.which > 1 || this.event.metaKey || this.event.ctrlKey || this.event.shiftKey || this.event.altKey; + }; + + return Click; + + })(); + + bypassOnLoadPopstate = function(fn) { + return setTimeout(fn, 500); + }; + + installDocumentReadyPageEventTriggers = function() { + return document.addEventListener('DOMContentLoaded', (function() { + triggerEvent('page:change'); + return triggerEvent('page:update'); + }), true); + }; + + installJqueryAjaxSuccessPageUpdateTrigger = function() { + if (typeof jQuery !== 'undefined') { + return jQuery(document).on('ajaxSuccess', function(event, xhr, settings) { + if (!jQuery.trim(xhr.responseText)) { + return; + } + return triggerEvent('page:update'); + }); + } + }; + + installHistoryChangeHandler = function(event) { + var cachedPage, _ref; + if ((_ref = event.state) != null ? _ref.turbolinks : void 0) { + if (cachedPage = pageCache[(new ComponentUrl(event.state.url)).absolute]) { + cacheCurrentPage(); + return fetchHistory(cachedPage); + } else { + return visit(event.target.location.href); + } + } + }; + + initializeTurbolinks = function() { + rememberCurrentUrl(); + rememberCurrentState(); + createDocument = browserCompatibleDocumentParser(); + document.addEventListener('click', Click.installHandlerLast, true); + window.addEventListener('hashchange', function(event) { + rememberCurrentUrl(); + return rememberCurrentState(); + }, false); + return bypassOnLoadPopstate(function() { + return window.addEventListener('popstate', installHistoryChangeHandler, false); + }); + }; + + historyStateIsDefined = window.history.state !== void 0 || navigator.userAgent.match(/Firefox\/2[6|7]/); + + browserSupportsPushState = window.history && window.history.pushState && window.history.replaceState && historyStateIsDefined; + + browserIsntBuggy = !navigator.userAgent.match(/CriOS\//); + + requestMethodIsSafe = (_ref = popCookie('request_method')) === 'GET' || _ref === ''; + + browserSupportsTurbolinks = browserSupportsPushState && browserIsntBuggy && requestMethodIsSafe; + + browserSupportsCustomEvents = document.addEventListener && document.createEvent; + + if (browserSupportsCustomEvents) { + installDocumentReadyPageEventTriggers(); + installJqueryAjaxSuccessPageUpdateTrigger(); + } + + if (browserSupportsTurbolinks) { + visit = fetch; + initializeTurbolinks(); + } else { + visit = function(url) { + return document.location.href = url; + }; + } + + this.Turbolinks = { + visit: visit, + pagesCached: pagesCached, + enableTransitionCache: enableTransitionCache, + allowLinkExtensions: Link.allowExtensions, + supported: browserSupportsTurbolinks + }; + +}).call(this); diff --git a/js/ui.js b/js/ui.js index b225fe3..f48aee4 100644 --- a/js/ui.js +++ b/js/ui.js @@ -1,4 +1,7 @@ -$(document).ready(function() { +/* Initialize Menu and Map */ +var ready; +ready = function() { + /* Menu Expand/Collapse */ var layout = $('#layout'), menu = $('#menu'), menuLink = $('#menuLink'); @@ -9,7 +12,7 @@ $(document).ready(function() { menu.toggleClass(active); menuLink.toggleClass(active); }); - + /* Map Initialize */ function initialize() { var mapOptions = { center: { @@ -18,8 +21,22 @@ $(document).ready(function() { }, zoom: 8 }; - var map = new google.maps.Map(document.getElementById('map-canvas'), - mapOptions); + var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); } - google.maps.event.addDomListener(window, 'load', initialize); + google.maps.event.addDomListener(document, 'page:change', initialize); +}; + +/* Draw Map */ +$(document).ready(ready); +$(document).on('page:load', ready); + +/* NProgress */ +$(document).on('page:fetch', function() { + NProgress.start(); +}); +$(document).on('page:change', function() { + NProgress.done(); +}); +$(document).on('page:restore', function() { + NProgress.remove(); }); \ No newline at end of file diff --git a/plan.html b/plan.html index b101a7b..01e7712 100644 --- a/plan.html +++ b/plan.html @@ -11,6 +11,7 @@ + @@ -44,6 +45,8 @@

    Plan a spot fix

    + + \ No newline at end of file From d536a4a2455a9885353aeb3712e9064f9fad8546 Mon Sep 17 00:00:00 2001 From: Pranav Date: Mon, 29 Sep 2014 16:54:13 +0530 Subject: [PATCH 03/95] Fix menu on small screen devices --- css/layouts/side-menu.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/css/layouts/side-menu.css b/css/layouts/side-menu.css index 6fdc257..31b1832 100644 --- a/css/layouts/side-menu.css +++ b/css/layouts/side-menu.css @@ -99,12 +99,12 @@ appears on the left side of the page. } #layout.active .menu-link { - left: 160px; + left: 140px; } #menu { margin-left: -160px; /* "#menu" width */ - width: 184px; + width: 160px; position: fixed; top: 0; left: 0; @@ -148,10 +148,10 @@ appears on the left side of the page. left: 0; /* "#menu width" */ background: #000; background: rgba(0,0,0,0.7); - font-size: 11px; /* change this value to increase/decrease button size */ + font-size: 10px; /* change this value to increase/decrease button size */ z-index: 10; - width: 4em; - height: 4em; + width: 2em; + height: 2em; padding: 1em; } @@ -267,6 +267,6 @@ Hides the menu at `48em`, but modify this based on your app's needs. } #layout.active .menu-link { - left: 150px; + left: 140px; } } From 6de413cc76f35dca1ce2c480fa8f0e6626b92ac8 Mon Sep 17 00:00:00 2001 From: Pranav Date: Mon, 29 Sep 2014 17:14:18 +0530 Subject: [PATCH 04/95] Fix menu collapse --- js/ui.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/ui.js b/js/ui.js index f48aee4..b02124a 100644 --- a/js/ui.js +++ b/js/ui.js @@ -28,7 +28,7 @@ ready = function() { /* Draw Map */ $(document).ready(ready); -$(document).on('page:load', ready); +$(document).on('page:chnage', ready); /* NProgress */ $(document).on('page:fetch', function() { From b13f3a5eaa9330ff06b5b1d85f594ad996c32a67 Mon Sep 17 00:00:00 2001 From: Pranav Date: Mon, 29 Sep 2014 17:22:35 +0530 Subject: [PATCH 05/95] Add join and report pages --- index.html | 4 ++-- join.html | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++ plan.html | 4 ++-- report.html | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 108 insertions(+), 4 deletions(-) create mode 100644 join.html create mode 100644 report.html diff --git a/index.html b/index.html index b0bd3ff..0d92ce1 100644 --- a/index.html +++ b/index.html @@ -29,8 +29,8 @@
  • Plan
    • -
  • Join
    • -
  • Report
    • +
  • Join
    • +
  • Report
    • diff --git a/join.html b/join.html new file mode 100644 index 0000000..fbddf1f --- /dev/null +++ b/join.html @@ -0,0 +1,52 @@ + + + + + + + Side Menu – + + + + + + + + +
    + + + + + + +
    +
    +

    Join

    +

    Join a spot

    +
    +
    +
    +
    +
    + + + + + + + \ No newline at end of file diff --git a/plan.html b/plan.html index 01e7712..41ac477 100644 --- a/plan.html +++ b/plan.html @@ -29,8 +29,8 @@
  • Plan
    • -
  • Join
    • -
  • Report
    • +
  • Join
    • +
  • Report
    • diff --git a/report.html b/report.html new file mode 100644 index 0000000..5a42b06 --- /dev/null +++ b/report.html @@ -0,0 +1,52 @@ + + + + + + + Side Menu – + + + + + + + + +
    + + + + + + +
    +
    +

    Report

    +

    Report a spot fix

    +
    +
    +
    +
    +
    + + + + + + + \ No newline at end of file From 6a250cf16e309d7245f8b3f23af2b9687e99a9f9 Mon Sep 17 00:00:00 2001 From: Pranav Date: Mon, 29 Sep 2014 17:34:54 +0530 Subject: [PATCH 06/95] Add search form on plan spot fix --- css/layouts/side-menu.css | 4 ++++ plan.html | 6 ++++++ 2 files changed, 10 insertions(+) diff --git a/css/layouts/side-menu.css b/css/layouts/side-menu.css index 31b1832..cba22e9 100644 --- a/css/layouts/side-menu.css +++ b/css/layouts/side-menu.css @@ -270,3 +270,7 @@ Hides the menu at `48em`, but modify this based on your app's needs. left: 140px; } } + +form { + padding-left: 1em; +} \ No newline at end of file diff --git a/plan.html b/plan.html index 41ac477..6d03570 100644 --- a/plan.html +++ b/plan.html @@ -39,6 +39,12 @@

    Plan

    Plan a spot fix

    +
    +
    + + +
    +
    From 54f7880350e05e8012d769e647771e368c52b275 Mon Sep 17 00:00:00 2001 From: pranavpr Date: Mon, 29 Sep 2014 20:41:34 +0530 Subject: [PATCH 07/95] Add geocoding on Plan page --- js/ui.js | 53 +++++++++++++++++++++++++++++++++++++++++++++-------- plan.html | 12 +++++++----- 2 files changed, 52 insertions(+), 13 deletions(-) diff --git a/js/ui.js b/js/ui.js index b02124a..0bcd96c 100644 --- a/js/ui.js +++ b/js/ui.js @@ -1,5 +1,7 @@ /* Initialize Menu and Map */ var ready; +var map; +var geocoder; ready = function() { /* Menu Expand/Collapse */ var layout = $('#layout'), @@ -14,18 +16,53 @@ ready = function() { }); /* Map Initialize */ function initialize() { - var mapOptions = { - center: { - lat: -34.397, - lng: 150.644 - }, - zoom: 8 - }; - var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition(function(position) { + initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); + var mapOptions = { + center: initialLocation, + zoom: 12 + }; + map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); + }); + } } google.maps.event.addDomListener(document, 'page:change', initialize); }; +function searchAddress() { + var address = $("#address").val(); + var postalcode = $("#pincode").val(); + var country = $("#country").val(); + geocoder = new google.maps.Geocoder(); + geocoder.geocode({ + 'address': address + country + postalcode, + 'region': 'IN' + }, function(results, status) { + if (status == google.maps.GeocoderStatus.OK) { + var marker = new google.maps.Marker({ + position: results[0].geometry.location, + map: map, + title: results[0].formatted_address + }); + var infowindow = new google.maps.InfoWindow({ + content: results[0].formatted_address + }); + map.setCenter(results[0].geometry.location); + map.setZoom(16); + google.maps.event.addListener(marker, 'click', function() { + infowindow.open(map, marker); + }); + } else { + alert(address + " not found."); + } + }); +} + +$("#search").click(function(evt) { + evt.preventDefault(); + searchAddress(); +}); /* Draw Map */ $(document).ready(ready); $(document).on('page:chnage', ready); diff --git a/plan.html b/plan.html index 6d03570..484676f 100644 --- a/plan.html +++ b/plan.html @@ -40,11 +40,13 @@

    Plan

    Plan a spot fix

    -
    - - -
    -
    +
    + + + + +
    +
    From efb9a4a2b70844a0007f59a5fa4720ceb8b50977 Mon Sep 17 00:00:00 2001 From: pranavpr Date: Mon, 29 Sep 2014 21:30:21 +0530 Subject: [PATCH 08/95] Improve pages --- css/layouts/side-menu.css | 16 ++++++++++------ join.html | 4 ++-- js/ui.js | 14 ++++++++++---- plan.html | 4 ++-- report.html | 2 +- 5 files changed, 25 insertions(+), 15 deletions(-) diff --git a/css/layouts/side-menu.css b/css/layouts/side-menu.css index cba22e9..d45c420 100644 --- a/css/layouts/side-menu.css +++ b/css/layouts/side-menu.css @@ -99,12 +99,12 @@ appears on the left side of the page. } #layout.active .menu-link { - left: 140px; + left: 150px; } #menu { - margin-left: -160px; /* "#menu" width */ - width: 160px; + margin-left: -150px; /* "#menu" width */ + width: 150px; position: fixed; top: 0; left: 0; @@ -267,10 +267,14 @@ Hides the menu at `48em`, but modify this based on your app's needs. } #layout.active .menu-link { - left: 140px; + left: 150px; } } -form { - padding-left: 1em; +#top-form { + padding-left: 0.75em; +} + +.pure-form fieldset { + padding-top: 0.75em; } \ No newline at end of file diff --git a/join.html b/join.html index fbddf1f..5b8cd1c 100644 --- a/join.html +++ b/join.html @@ -23,13 +23,13 @@