steve
/
mybuddy
mirror of https://github.com/snachodog/mybuddy.git
1
0
Fork 0
Code Issues 3 Packages Projects 1 Releases Wiki Activity

Use visibilityjs and momentjs to update a running timer when it's detail page becomes visible. 

This commit is intended to improve the mobile experience by updating the timer detail page with the correct, current duration when, for example, a phone is unlocked after having been locked for a while with the timer detail page open.
This commit is contained in:
Christopher Charbonneau Wells 2017-10-27 22:28:38 -04:00
parent 6e936df1bc
commit c339062fba
4 changed files with 37 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
core/static_src/js/timer.js
View File

@ -8,11 +8,14 @@
*/
BabyBuddy.Timer = function ($) {
var runIntervalId = null;
var timerId = null;
var timerElement = null;
var lastUpdate = moment();
var Timer = {
run: function(id) {
timerElement = $('#' + id);
run: function(timer_id, element_id) {
timerId = timer_id;
timerElement = $('#' + element_id);
if (timerElement.length == 0) {
console.error('BBTimer: Timer element not found.');
@ -27,7 +30,17 @@ BabyBuddy.Timer = function ($) {
}
runIntervalId = setInterval(this.tick, 1000);
return runIntervalId;
// If the page just came in to view, update the timer data with the
// current actual duration. This will (potentially) help mobile
// phones that lock with the timer page open.
Visibility.change(function (e, state) {
if (state == 'visible' && moment().diff(lastUpdate) > 2000) {
clearInterval(runIntervalId);
Timer.update();
runIntervalId = setInterval(Timer.tick, 1000);
}
});
},
tick: function() {
@ -54,6 +67,18 @@ BabyBuddy.Timer = function ($) {
var h = timerElement.find('.timer-hours');
var hours = Number(h.text());
h.text(hours + 1);
},
update: function() {
$.get('/api/timers/' + timerId + '/', function(data) {
if (data && 'duration' in data) {
var duration = moment.duration(data.duration);
timerElement.find('.timer-hours').text(duration.hours());
timerElement.find('.timer-minutes').text(duration.minutes());
timerElement.find('.timer-seconds').text(duration.seconds());
lastUpdate = moment();
}
});
}
};

3
gulpfile.js/config.js
View File

@ -27,7 +27,8 @@ module.exports = {
'node_modules/popper.js/dist/umd/popper.js',
'node_modules/bootstrap/dist/js/bootstrap.js',
'node_modules/moment/moment.js',
'node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.js'
'node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.js',
'node_modules/visibilityjs/lib/visibility.core.js'
],
graph: [
'node_modules/plotly.js/dist/plotly-cartesian.js'

5
package-lock.json generated
View File

@ -8048,6 +8048,11 @@
"source-map": "0.5.6"
}
},
"visibilityjs": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/visibilityjs/-/visibilityjs-1.2.5.tgz",
"integrity": "sha512-6FrRTnSvw0FrxzEOnxAJzuJ4Emy8Vw9tnwMfqxsKLmR41NFO5nJh972WeWnSh0Y434q4ThTM7l+oHast5Hqcvw=="
},
"vt-pbf": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-2.1.4.tgz",

3
package.json
View File

@ -36,7 +36,8 @@
"pump": "^1.0.2",
"require-dir": "^0.3.2",
"run-sequence": "^2.2.0",
"tempusdominus-bootstrap-4": "^5.0.0-alpha9"
"tempusdominus-bootstrap-4": "^5.0.0-alpha9",
"visibilityjs": "^1.2.5"
},
"scripts": {
"heroku-postbuild": "npm rebuild node-sass && gulp build"