From d7d30b46c014bc462b991f538070029b2d86af4f Mon Sep 17 00:00:00 2001 From: Billy Brawner Date: Sun, 18 Sep 2016 20:16:18 +0000 Subject: [PATCH] Improved the pre-loader, fixed the caching, added rest intervals, other improvements --- css/styles.css | 39 +++++++++++++----- index.html | 3 +- js/app.js | 81 ++++++++++++++++++++++++++++---------- sw.js | 105 +++++++++++++++++++++++++++++++++++++++---------- 4 files changed, 176 insertions(+), 52 deletions(-) diff --git a/css/styles.css b/css/styles.css index 11f6763..ca1b1fe 100644 --- a/css/styles.css +++ b/css/styles.css @@ -13,6 +13,7 @@ body { padding: 0; height: 100vh; width: 100vw; + position: relative; overflow: hidden; } @@ -21,6 +22,7 @@ a:link, a:hover, a:visited, a:active { } .no-timers { + display: block; padding: 20px; text-align: center; font-weight: normal; @@ -28,9 +30,8 @@ a:link, a:hover, a:visited, a:active { } .timers { - overflow: hidden; position: relative; - margin-top: 60px; + padding-top: 60px; } .timer { @@ -96,6 +97,7 @@ a:link, a:hover, a:visited, a:active { } .timer-interface { + display: none; position: absolute; top: 0; left: 0; @@ -183,6 +185,7 @@ a:link, a:hover, a:visited, a:active { header { position: absolute; + z-index: 999; top: 0; height: 60px; text-align: center; @@ -322,18 +325,23 @@ button.add-timer { } .new-timer { - position: absolute; + position: fixed; top: 100%; padding: 0; width: 100vw; - z-index: 99; + z-index: 999; background: #fff; - height: 100vh; + min-height: 100vh; opacity: 0; } +.new-timer.slideUp .top-menu { + position: fixed; +} + #timer-setup { - margin-top: 70px; + overflow: scroll; + padding-top: 62px; } #timer-setup input, #timer-setup textarea, #timer-setup select { @@ -433,16 +441,29 @@ button.add-timer { opacity: 0; } @keyframes loaderSpin { - 100% {transform: rotate(360deg);} + 100% {transform: translateX(-50%) rotate(360deg);} } .loader { - animation: loaderSpin 1s linear infinite; + animation: loaderSpin 0.25s linear infinite; width: 50px; position: absolute; top: 100px; left: 50%; - transform: translateX(-50%); + transform: translateX(-50%) rotate(0); display: block; + z-index: 9999 +} + +.loader-overlay { + display: block; + position: absolute; + top: 0; + left: 0; + right: 0; + background: #fff; + width: 100%; + height: 100vh; + z-index: 99; } .visible { diff --git a/index.html b/index.html index 8cd98a1..a6c5342 100644 --- a/index.html +++ b/index.html @@ -56,7 +56,8 @@
-
+
+

It looks like you haven't configured any timers yet. Click on the orange "+" icon below to get started!

diff --git a/js/app.js b/js/app.js index 17e4267..c7b9c8c 100644 --- a/js/app.js +++ b/js/app.js @@ -13,20 +13,36 @@ if (!window.indexedDB) { }) }); var defaultTimer = { - "name" : "Tabata", - "description" : "A short, yet very intense workout best completed with multiple cycles", - "warmUp.min": 5, - "warmUp.sec": 0, - "highIntensity.min" : 0, - "highIntensity.sec" : 20, - "lowIntensity.min" : 0, - "lowIntensity.sec" : 10, - "rest.min" : 5, - "rest.sec" : 0, - "coolDown.min" : 5, - "coolDown.sec" : 0, - "rounds" : 8, - "cycles": 6 + "id": 0, + "name": "", + "description": "", + "warmUp" : { + "min": 0, + "sec": 0, + "time": 0 + }, + "highIntensity" : { + "min": 0, + "sec": 0, + "time": 0 + }, + "lowIntensity" : { + "min": 0, + "sec": 0, + "time": 0 + }, + "coolDown" : { + "min": 0, + "sec": 0, + "time": 0 + }, + "rest" : { + "min": 0, + "sec": 0, + "time": 0 + }, + "rounds": 1, + "cycles": 1 }; app.controller('timerCtrl', ['$scope', '$cookies', '$indexedDB', function($scope, $cookies, $indexedDB) { $scope.defaults = defaultTimer; @@ -61,17 +77,18 @@ if (!window.indexedDB) { $indexedDB.openStore('timers', function(timers) { timers.getAll() .then(function(data) { - $scope.timersLoaded = true; $scope.timers = data; if (data.length == 0) { - $scope.noTimers = true; - } else { $scope.noTimers = false; + } else { + $scope.noTimers = true; } + $scope.timersLoaded = true; }) }) } $scope.setTimers(); + console.log("noTimers: " + $scope.noTimers); $scope.timer = {}; $scope.config = {}; $scope.initObj = new Promise(function(res, rej) { @@ -95,7 +112,10 @@ if (!window.indexedDB) { $scope.newTimerOpen = false; $scope.newTimerClosed = false; $scope.showTimerInterface = false; - $scope.setPeriod = function(period, playBeep = true) { + $scope.setPeriod = function(period, playBeep) { + if (typeof period == "undefined") { + period = true; + } clearInterval($scope.countdown); $scope[period].active = true; $scope.time = $scope.timer[period].time; @@ -188,7 +208,8 @@ if (!window.indexedDB) { $scope.getTimes = function() { $scope.periods.forEach(function(period) { var min = 0; - if (typeof $scope.timer[period].min == "number") { + console.log(period) + if (typeof $scope.timer[period].min == "number" && $scope.timer[period].min > 0) { min = $scope.timer[period].min * 60; } var sec = $scope.timer[period].sec; @@ -362,9 +383,27 @@ if (!window.indexedDB) { $scope.newTimerClosed = false; $scope.newTimerOpen = true; } + $scope.validateNewTimer = function(newTimer) { + timerSkel = $scope.defaults; + angular.merge(timerSkel, newTimer); + if (timerSkel.rounds < 1) { + timerSkel.rounds = 1; + } + if (timerSkel.cycles < 1) { + timerSkel.cycles = 1; + } + console.log(timerSkel) + return new Promise(function(res, rej) { + res(timerSkel); + }) + } $scope.saveNewTimer = function() { - $scope.saveTimer(); - $scope.closeNewTimer(); + $scope.validateNewTimer($scope.newTimer) + .then(function(newTimer) { + $scope.newTimer = newTimer; + $scope.saveTimer(); + $scope.closeNewTimer(); + }) } $scope.closeNewTimer = function() { $scope.newTimerOpen = false; diff --git a/sw.js b/sw.js index 9c7c4c9..08e856a 100644 --- a/sw.js +++ b/sw.js @@ -2,27 +2,90 @@ self.addEventListener('install', function(e) { e.waitUntil( caches.open('wbrawner-interval-timer').then(function(cache) { return cache.addAll([ - '/', - '/audio/beep-10.mp3', - '/audio/beep-09.mp3', - '/audio/button-42(1).mp3', - '/css/addtohomescreen.css', - '/css/font-awesome.min.css', - '/css/styles.css', - '/fonts/fontawesome-webfont.woff', - '/fonts/FontAwesome.otf', - '/fonts/fontawesome-webfont.svg', - '/fonts/fontawesome-webfont.woff2', - '/fonts/fontawesome-webfont.ttf', - '/fonts/fontawesome-webfont.eot', - '/index.html', - '/js/start.js', - '/js/angular-cookies.min.js', - '/js/addtohomescreen.min.js', - '/js/addtohomescreen.js', - '/js/angular.min.js', - '/js/app.js', - '/sw.js' + '/', + '/audio/beep-09.mp3', + '/audio/beep-10.mp3', + '/audio/button-42(1).mp3', + '/browserconfig.xml', + '/contributors.txt', + '/css/addtohomescreen.css', + '/css/font-awesome.min.css', + '/css/styles.css', + '/favicon.ico', + '/fonts/FontAwesome.otf', + '/fonts/fontawesome-webfont.eot', + '/fonts/fontawesome-webfont.svg', + '/fonts/fontawesome-webfont.ttf', + '/fonts/fontawesome-webfont.woff', + '/fonts/fontawesome-webfont.woff2', + '/img/action-icon-android.png', + '/img/action-icon-ios6.png', + '/img/action-icon-ios7.png', + '/img/android-chrome-144x144.png', + '/img/android-chrome-192x192.png', + '/img/android-chrome-256x256.png', + '/img/android-chrome-36x36.png', + '/img/android-chrome-384x384.png', + '/img/android-chrome-48x48.png', + '/img/android-chrome-512x512.png', + '/img/android-chrome-72x72.png', + '/img/android-chrome-96x96.png', + '/img/apple-touch-icon-114x114.png', + '/img/apple-touch-icon-114x114-precomposed.png', + '/img/apple-touch-icon-120x120.png', + '/img/apple-touch-icon-120x120-precomposed.png', + '/img/apple-touch-icon-144x144.png', + '/img/apple-touch-icon-144x144-precomposed.png', + '/img/apple-touch-icon-152x152.png', + '/img/apple-touch-icon-152x152-precomposed.png', + '/img/apple-touch-icon-180x180.png', + '/img/apple-touch-icon-180x180-precomposed.png', + '/img/apple-touch-icon-57x57.png', + '/img/apple-touch-icon-57x57-precomposed.png', + '/img/apple-touch-icon-60x60.png', + '/img/apple-touch-icon-60x60-precomposed.png', + '/img/apple-touch-icon-72x72.png', + '/img/apple-touch-icon-72x72-precomposed.png', + '/img/apple-touch-icon-76x76.png', + '/img/apple-touch-icon-76x76-precomposed.png', + '/img/apple-touch-icon.png', + '/img/apple-touch-icon-precomposed.png', + '/img/browserconfig.xml', + '/img/favicon-16x16.png', + '/img/favicon-194x194.png', + '/img/favicon-32x32.png', + '/img/favicon.ico', + '/img/favicons.zip', + '/img/icon-152x152.png', + '/img/icon-16x16.png', + '/img/icon-196x196.png', + '/img/icon.svg', + '/img/manifest.json', + '/img/menu-branding.png', + '/img/menu-logo.png', + '/img/mstile-144x144.png', + '/img/mstile-150x150.png', + '/img/mstile-310x310.png', + '/img/mstile-70x70.png', + '/img/safari-pinned-tab.svg', + '/img/spinner.png', + '/index.html', + '/js/addtohomescreen.js', + '/js/addtohomescreen.min.js', + '/js/angular-animate.min.js', + '/js/angular-cookies.min.js', + '/js/angular-indexed-db.min.js', + '/js/angular.min.js', + '/js/angular-touch.js', + '/js/angular-touch.min.js', + '/js/app.js', + '/js/item-swipe.js', + '/js/jquery-3.1.0.js', + '/js/jquery-3.1.0.min.js', + '/js/start.js', + '/manifest.json', + '/manifest.webapp', + '/sw.js' ]); }) );