From e1b9bd46b69b0cec5b6765bbce426aa242c4c3ca Mon Sep 17 00:00:00 2001 From: Jonathan Vogt Date: Mon, 25 Jan 2016 23:15:01 +0100 Subject: [PATCH 1/3] Update Time more smoothly (fade char-wise) --- css/main.css | 4 ++++ index.php | 2 +- js/time/time.js | 27 +++++++++++++++++++++------ 3 files changed, 26 insertions(+), 7 deletions(-) diff --git a/css/main.css b/css/main.css index 86a00c8302..61b7d5c1b4 100644 --- a/css/main.css +++ b/css/main.css @@ -110,6 +110,10 @@ html { color: #aaa; } +.hidden { + display: none; +} + .light { font-family: "HelveticaNeue-UltraLight", sans-serif; } diff --git a/index.php b/index.php index aa0c876ff7..8ebc134e27 100644 --- a/index.php +++ b/index.php @@ -13,8 +13,8 @@ -
+
diff --git a/js/time/time.js b/js/time/time.js index f2a5a28691..a38d55112b 100644 --- a/js/time/time.js +++ b/js/time/time.js @@ -1,8 +1,8 @@ var time = { timeFormat: config.time.timeFormat || 24, dateLocation: '.date', - timeLocation: '.time', - updateInterval: 1000, + timeLocation: '#time', + updateInterval: 10000, intervalId: null }; @@ -12,10 +12,25 @@ var time = { time.updateTime = function () { var _now = moment(), - _date = _now.format('dddd, LL'); - - $(this.dateLocation).html(_date); - $(this.timeLocation).html(_now.format(this._timeFormat+':mm[]ss[]')); + _date = _now.format('[]dddd,[]LL[]'); + + + $(this.dateLocation).updateWithText(_date, 1000); + $('.fade').removeClass('fade') + $('#timebuffer').html(_now.format('HH:mm').replace(/./g, "$&")); + $('#timebuffer').children().each(function( index ) { + var _text = $( this ).text(); + var _i = index+1; + var _text2 = $('#time span:nth-child('+_i+')').text(); + if (_text != _text2) { + $('#time span:nth-child('+_i+')').addClass('fade'); + $(this).addClass('fade'); + } + }); + $('.fade').fadeTo(400, 0.25, function() { + $('#time').html($('#timebuffer').html()); + $('#time').children().fadeTo(400, 1).removeClass('fade'); + }); } From 5be0d1c5e9e4d3ef025e0eefc9a5b99295840c67 Mon Sep 17 00:00:00 2001 From: Jonathan Vogt Date: Mon, 25 Jan 2016 23:57:28 +0100 Subject: [PATCH 2/3] Improved Code --- css/main.css | 4 ---- index.php | 2 +- js/time/time.js | 22 +++++++++++----------- 3 files changed, 12 insertions(+), 16 deletions(-) diff --git a/css/main.css b/css/main.css index 61b7d5c1b4..86a00c8302 100644 --- a/css/main.css +++ b/css/main.css @@ -110,10 +110,6 @@ html { color: #aaa; } -.hidden { - display: none; -} - .light { font-family: "HelveticaNeue-UltraLight", sans-serif; } diff --git a/index.php b/index.php index 8ebc134e27..89a5389df5 100644 --- a/index.php +++ b/index.php @@ -14,7 +14,7 @@
-
+
diff --git a/js/time/time.js b/js/time/time.js index a38d55112b..311f7b51ac 100644 --- a/js/time/time.js +++ b/js/time/time.js @@ -10,27 +10,26 @@ var time = { * Updates the time that is shown on the screen */ time.updateTime = function () { - - var _now = moment(), - _date = _now.format('[]dddd,[]LL[]'); + var timeLocation = this.timeLocation; + var _now = moment(); + var _date = _now.format('[]dddd,[ ]LL[]'); - $(this.dateLocation).updateWithText(_date, 1000); $('.fade').removeClass('fade') - $('#timebuffer').html(_now.format('HH:mm').replace(/./g, "$&")); - $('#timebuffer').children().each(function( index ) { + var diff = $('
').html(_now.format(this._timeFormat+':mm').replace(/./g, "$&")); + diff.children().each(function( index ) { var _text = $( this ).text(); var _i = index+1; - var _text2 = $('#time span:nth-child('+_i+')').text(); + var _text2 = $(timeLocation + ' span:nth-child('+_i+')').text(); if (_text != _text2) { - $('#time span:nth-child('+_i+')').addClass('fade'); + $(timeLocation +' span:nth-child('+_i+')').addClass('fade'); $(this).addClass('fade'); } }); $('.fade').fadeTo(400, 0.25, function() { - $('#time').html($('#timebuffer').html()); - $('#time').children().fadeTo(400, 1).removeClass('fade'); - }); + $(timeLocation).html(diff.html()); + $(timeLocation).children().fadeTo(400, 1).removeClass('fade'); + }).bind(this); } @@ -41,6 +40,7 @@ time.init = function () { } else { time._timeFormat = 'HH'; } + $(this.timeLocation).html(''); this.intervalId = setInterval(function () { this.updateTime(); From ed9f85f705da107ad3baa49dd1edafdbc01694ca Mon Sep 17 00:00:00 2001 From: Jonathan Vogt Date: Tue, 26 Jan 2016 00:53:52 +0100 Subject: [PATCH 3/3] Honor Config Option and do inital time update --- js/time/time.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/time/time.js b/js/time/time.js index 311f7b51ac..311ef2d4f0 100644 --- a/js/time/time.js +++ b/js/time/time.js @@ -44,6 +44,7 @@ time.init = function () { this.intervalId = setInterval(function () { this.updateTime(); - }.bind(this), 1000); + }.bind(this), this.updateInterval); + this.updateTime(); } \ No newline at end of file