manuel/uhr
1
0
Fork 0
Code Issues 5 Pull requests Releases Wiki Activity

basically the whole thing is rewritten :)

Browse source
This commit is contained in:
Manuel Friedli 2014-07-03 20:10:55 +02:00
parent 7b0e77f16f
commit 5a9ec0e0df
1 changed files with 320 additions and 299 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

349
js/uhr.js
View file

@ -18,14 +18,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
"id": 0, "id": 0,
"languages": [], "languages": [],
"themes": [], "themes": [],
register: function register(code, language) { registerLanguage: function registerLanguage(code, language) {
this.languages.reduce(function(element) { var alreadyExists = this.languages.reduce(function (exists, element) {
if (exists) {
return true;
}
if (code === element.code) { if (code === element.code) {
console.error("Error: Language code '" + code + "' cannot be registered for language '" + language.language + "' because it is already registered for language '" + element.language + "'!"); console.error("Error: Language code '" + code + "' cannot be registered for language '" + language.language + "' because it is already registered for language '" + element.language + "'!");
return false;
}
return true; return true;
}, true); }
return false;
}, false);
if (!alreadyExists) {
language.code = code;
this.languages.push(language);
}
} }
}; };
if (window.uhr !== undefined) { if (window.uhr !== undefined) {
@ -36,16 +43,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
id: 0, id: 0,
languages: [], languages: [],
themes: [], themes: [],
register: function (code, language) { register: uhrGlobals.registerLanguage
for (var i = 0; i < this.languages.length; i++) {
if (code === this.languages[i].code) {
console.error('Error: Language code ' + code + ' cannot be registered for language "' + language.language + '" because it is already registered for language "' + this.languages[i].language + '"!');
return false;
}
}
language.code = code;
this.languages.push(language);
}
}; };
// auto-detect themes // auto-detect themes
var styleSheets = $('link[rel=stylesheet]'); var styleSheets = $('link[rel=stylesheet]');
@ -64,64 +62,56 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
if (window.uhr.themes.length === 0) { if (window.uhr.themes.length === 0) {
window.uhr.themes.push({}); window.uhr.themes.push({});
} }
$.widget("fritteli.uhr", {
options: { // public interface methods (exported later)
width: '100%', var start = function start() {
status: 'on', if (!isOn(this)) {
language: 'de_CH',
theme: window.uhr.themes[0].styleClass,
force: false,
controls: true
},
start: function () {
if (!this._isOn()) {
var uhr = this; var uhr = this;
this._timer = window.setInterval(function() { this._timer = window.setInterval(function uhrTimer() {
uhr.options.time = new Date(); uhr.options.time = new Date();
uhr._update(); update(uhr);
}, 1000); }, 1000);
this._update(); update(this);
this._setCookie('uhr-status', 'on'); setCookie(this, 'uhr-status', 'on');
} else {
} }
}, };
stop: function () { var stop = function stop() {
if (this._isOn()) { if (isOn(this)) {
window.clearInterval(this._timer); window.clearInterval(this._timer);
this._timer = null; this._timer = null;
this._update(); update(this);
this._setCookie('uhr-status', 'off'); setCookie(this, 'uhr-status', 'off');
} }
}, };
toggle: function () { var toggle = function toggle() {
if (this._isOn()) { if (isOn(this)) {
this.stop(); this.stop();
} else { } else {
this.start(); this.start();
} }
}, };
language: function (languageKey) { var setLanguage = function setLanugage(languageKey) {
if (languageKey !== this.options.language) { if (languageKey !== this.options.language) {
this.options.language = languageKey; this.options.language = languageKey;
var renderer = new UhrRenderer(this._language(), this.element.find('.letterarea')); var renderer = new UhrRenderer(language(this), this.element.find('.letterarea'));
var uhr = this; var uhr = this;
renderer.render(this, function() { renderer.render(this, function () {
uhr._currentMinute = -1; uhr._currentMinute = -1;
uhr._update(); update(uhr);
}); });
this._setCookie('uhr-language', languageKey); setCookie(this, 'uhr-language', languageKey);
this._update(); update(this);
} }
}, };
theme: function (theme) { var setTheme = function setTheme(theme) {
if (theme !== this.options.theme) { if (theme !== this.options.theme) {
this.element.removeClass(this.options.theme).addClass(theme); this.element.removeClass(this.options.theme).addClass(theme);
$('#uhr-onoffswitch' + this._id).removeClass(this.options.theme).addClass(theme); $('#uhr-onoffswitch' + this._id).removeClass(this.options.theme).addClass(theme);
this.options.theme = theme; this.options.theme = theme;
this._setCookie('uhr-theme', theme); setCookie(this, 'uhr-theme', theme);
} }
}, };
time: function (time) { var setTime = function setTime(time) {
this._currentMinute = -1; this._currentMinute = -1;
if (time === null) { if (time === null) {
this.options.time = new Date(); this.options.time = new Date();
@ -131,94 +121,26 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
} }
this.options.time = time; this.options.time = time;
} }
this._update(); update(this);
}, };
// private variables
_id: -1, // private interface methods
_timer: null, var create = function create() {
_currentMinute: -1,
// private methods
_isOn: function () {
return this._timer !== null;
},
_update: function () {
if (this._isOn()) {
var time = this.options.time;
if (time.getMinutes() === this._currentMinute) {
return;
}
this._currentMinute = time.getMinutes();
this._show(time);
} else {
this._clear();
this._currentMinute = -1;
}
},
_show: function (time) {
var dotMinute = this._getDotMinute(time);
var hour = this._getHour(time);
var coarseMinute = this._getCoarseMinute(time);
this._clear();
this._highlight('on');
for (var i = 1; i <= dotMinute; i++) {
this._highlight('dot' + i);
}
this._highlight('minute' + coarseMinute);
this._highlight('hour' + hour);
},
_language: function () {
for (var i = 0; i < window.uhr.languages.length; i++) {
var language = window.uhr.languages[i];
if (language.code == this.options.language) {
return language;
}
}
// fallback: return empty object
return {};
},
_highlight: function (itemClass) {
this.element.find('.item.' + itemClass).addClass('active');
},
_clear: function () {
this.element.find('.item').removeClass('active');
},
_getHour: function (date) {
if (typeof this._language().getHour === 'function') {
return this._language().getHour(date);
}
var hour = date.getHours();
if (date.getMinutes() >= 25) {
return (hour + 1) % 24;
}
return hour;
},
_getCoarseMinute: function (date) {
if (typeof this._language().getCoarseMinute === 'function') {
return this._language().getCoarseMinute(date);
}
return date.getMinutes();
},
_getDotMinute: function (date) {
if (typeof this._language().getDotMinute === 'function') {
return this._language().getDotMinute(date);
}
var minutes = date.getMinutes();
return minutes % 5;
},
_create: function () {
this._id = window.uhr.id++; this._id = window.uhr.id++;
var userTime = this.options.time; var userTime = this.options.time;
if (this.options.time === undefined) { if (this.options.time === undefined) {
this.options.time = new Date(); this.options.time = new Date();
} }
this._setupHTML(); setupHTML(this);
this._wireFunctionality(); wireFunctionality(this);
if (userTime !== undefined) { if (userTime !== undefined) {
this.time(userTime); this.time(userTime);
} }
}, };
_setupHTML: function () { // private helper methods (not exported)
var e = this.element; // set up
var setupHTML = function setupHTML(uhr) {
var e = uhr.element;
// Base clock area // Base clock area
e.addClass('uhr'); e.addClass('uhr');
e.empty(); e.empty();
@ -228,17 +150,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
e.append('<span class="item dot dot4"></span>'); e.append('<span class="item dot dot4"></span>');
e.append('<div class="letterarea"></div>'); e.append('<div class="letterarea"></div>');
e.append('<div class="reflection"></div>'); e.append('<div class="reflection"></div>');
e.css('width', this.options.width); e.css('width', uhr.options.width);
var realWidth = e.width(); var realWidth = e.width();
e.width(realWidth); e.width(realWidth);
e.height(realWidth); e.height(realWidth);
e.css('font-size', (realWidth / 40) + 'px'); e.css('font-size', (realWidth / 40) + 'px');
if (this.options.controls) { if (uhr.options.controls) {
// on/off switch // on/off switch
var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + this._id + '"></div>'); var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + uhr._id + '"></div>');
toggleSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-onoffswitch-checkbox' + this._id + '" checked="checked" />'); toggleSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-onoffswitch-checkbox' + uhr._id + '" checked="checked" />');
toggleSwitch.append('<label class="onoffswitch-label" for="uhr-onoffswitch-checkbox' + this._id + '">' toggleSwitch.append('<label class="onoffswitch-label" for="uhr-onoffswitch-checkbox' + uhr._id + '">'
+ '<div class="onoffswitch-inner"></div>' + '<div class="onoffswitch-inner"></div>'
+ '<div class="onoffswitch-switch"></div>' + '<div class="onoffswitch-switch"></div>'
+ '</label>'); + '</label>');
@ -246,7 +168,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
// language chooser // language chooser
if (window.uhr.languages.length > 1) { if (window.uhr.languages.length > 1) {
var languageChooser = $('<select id="uhr-languagechooser' + this._id + '"></select>'); var languageChooser = $('<select id="uhr-languagechooser' + uhr._id + '"></select>');
for (var i = 0; i < window.uhr.languages.length; i++) { for (var i = 0; i < window.uhr.languages.length; i++) {
var language = window.uhr.languages[i]; var language = window.uhr.languages[i];
languageChooser.append('<option value="' + language.code + '">' + language.language + '</option>'); languageChooser.append('<option value="' + language.code + '">' + language.language + '</option>');
@ -256,7 +178,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
// theme chooser // theme chooser
if (window.uhr.themes.length > 1) { if (window.uhr.themes.length > 1) {
var themeChooser = $('<select id="uhr-themechooser' + this._id + '"></select>'); var themeChooser = $('<select id="uhr-themechooser' + uhr._id + '"></select>');
for (var i = 0; i < window.uhr.themes.length; i++) { for (var i = 0; i < window.uhr.themes.length; i++) {
var theme = window.uhr.themes[i]; var theme = window.uhr.themes[i];
themeChooser.append('<option value="' + theme.styleClass + '">' + theme.name + '</option>'); themeChooser.append('<option value="' + theme.styleClass + '">' + theme.name + '</option>');
@ -264,34 +186,33 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
e.after(themeChooser); e.after(themeChooser);
} }
} }
}, };
_wireFunctionality: function () { var wireFunctionality = function wireFunctionality(uhr) {
var uhr = this;
// on/off switch // on/off switch
var toggleSwitch = $('#uhr-onoffswitch-checkbox' + this._id); var toggleSwitch = $('#uhr-onoffswitch-checkbox' + uhr._id);
toggleSwitch.on('click', function () { toggleSwitch.on('click', function () {
uhr.toggle(); uhr.toggle();
}); });
var status = $.cookie('uhr-status' + this._id); var status = $.cookie('uhr-status' + uhr._id);
if (status === undefined || this.options.force) { if (status === undefined || uhr.options.force) {
status = this.options.status; status = uhr.options.status;
} }
toggleSwitch.prop('checked', status === 'on'); toggleSwitch.prop('checked', status === 'on');
if (status === 'on') { if (status === 'on') {
this.start(); uhr.start();
} else { } else {
this.stop(); uhr.stop();
} }
// language chooser // language chooser
var languageChooser = $('#uhr-languagechooser' + this._id); var languageChooser = $('#uhr-languagechooser' + uhr._id);
languageChooser.on('change', function () { languageChooser.on('change', function () {
uhr.language(this.value); uhr.language(this.value);
}); });
var selectedLanguage = $.cookie('uhr-language' + this._id); var selectedLanguage = $.cookie('uhr-language' + uhr._id);
if (selectedLanguage === undefined || this.options.force) { if (selectedLanguage === undefined || uhr.options.force) {
selectedLanguage = this.options.language; selectedLanguage = uhr.options.language;
} }
var found = false; var found = false;
for (var i = 0; i < window.uhr.languages.length; i++) { for (var i = 0; i < window.uhr.languages.length; i++) {
@ -312,17 +233,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
selectedLanguage = fallback; selectedLanguage = fallback;
} }
languageChooser.val(selectedLanguage); languageChooser.val(selectedLanguage);
this.options.language = ""; uhr.options.language = "";
this.language(selectedLanguage); uhr.language(selectedLanguage);
// theme chooser // theme chooser
var themeChooser = $('#uhr-themechooser' + this._id); var themeChooser = $('#uhr-themechooser' + uhr._id);
themeChooser.on('change', function () { themeChooser.on('change', function () {
uhr.theme(this.value); uhr.theme(this.value);
}); });
var selectedTheme = $.cookie('uhr-theme' + this._id); var selectedTheme = $.cookie('uhr-theme' + uhr._id);
if (selectedTheme === undefined || this.options.force) { if (selectedTheme === undefined || uhr.options.force) {
selectedTheme = this.options.theme; selectedTheme = uhr.options.theme;
} }
found = false; found = false;
for (var i = 0; i < window.uhr.themes.length; i++) { for (var i = 0; i < window.uhr.themes.length; i++) {
@ -338,18 +259,118 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
selectedTheme = fallback; selectedTheme = fallback;
} }
themeChooser.val(selectedTheme); themeChooser.val(selectedTheme);
this.options.theme = ""; uhr.options.theme = "";
this.theme(selectedTheme); uhr.theme(selectedTheme);
}, };
_setCookie: function (cookieName, cookieValue) { var setCookie = function setCookie(uhr, cookieName, cookieValue) {
var options = {}; var options = {};
if (this.options.cookiePath !== undefined) { if (uhr.options.cookiePath !== undefined) {
options = {expires: 365, path: this.options.cookiePath}; options = {expires: 365, path: uhr.options.cookiePath};
} else { } else {
options = {expires: 365}; options = {expires: 365};
} }
$.cookie(cookieName + this._id, cookieValue, options); $.cookie(cookieName + uhr._id, cookieValue, options);
};
// business logic
var isOn = function isOn(uhr) {
return uhr._timer !== null;
};
var update = function update(uhr) {
if (isOn(uhr)) {
var time = uhr.options.time;
if (time.getMinutes() === uhr._currentMinute) {
return;
} }
uhr._currentMinute = time.getMinutes();
show(uhr, time);
} else {
clear(uhr);
uhr._currentMinute = -1;
}
};
var show = function show(uhr, time) {
var dotMinute = getDotMinute(uhr, time);
var hour = getHour(uhr, time);
var coarseMinute = getCoarseMinute(uhr, time);
clear(uhr);
highlight(uhr, 'on');
for (var i = 1; i <= dotMinute; i++) {
highlight(uhr, 'dot' + i);
}
highlight(uhr, 'minute' + coarseMinute);
highlight(uhr, 'hour' + hour);
};
var highlight = function highlight(uhr, itemClass) {
uhr.element.find('.item.' + itemClass).addClass('active');
};
var clear = function clear(uhr) {
uhr.element.find('.item').removeClass('active');
};
var getDotMinute = function getDotMinute(uhr, date) {
if (typeof language(uhr).getDotMinute === 'function') {
return language(uhr).getDotMinute(date);
}
var minutes = date.getMinutes();
return minutes % 5;
};
var getCoarseMinute = function getCoarseMinute(uhr, date) {
if (typeof language(uhr).getCoarseMinute === 'function') {
return language(uhr).getCoarseMinute(date);
}
return date.getMinutes();
};
var getHour = function getHour(uhr, date) {
if (typeof language(uhr).getHour === 'function') {
return language(uhr).getHour(date);
}
var hour = date.getHours();
if (date.getMinutes() >= 25) {
return (hour + 1) % 24;
}
return hour;
};
var language = function language(uhr) {
var matchingLanguages = window.uhr.languages.filter(function (element) {
return (element.code === this.options.language)
}, uhr);
if (matchingLanguages.length > 0) {
return matchingLanguages[0];
}
// fallback: return empty object
return {};
/* for (var i = 0; i < window.uhr.languages.length; i++) {
var language = window.uhr.languages[i];
if (language.code == uhr.options.language) {
return language;
}
}
// fallback: return empty object
return {};*/
};
$.widget("fritteli.uhr", {
"options": {
width: '100%',
status: 'on',
language: 'de_CH',
theme: window.uhr.themes[0].styleClass,
force: false,
controls: true
},
"start": start,
"stop": stop,
"toggle": toggle,
"language": setLanguage,
"theme": setTheme,
"time": setTime,
// constructor method
"_create": create,
// private variables
"_id": -1,
"_timer": null,
"_currentMinute": -1
}); });
/** /**
* Hilfsklasse zum Rendern der Uhr. * Hilfsklasse zum Rendern der Uhr.