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

347
js/uhr.js
View file

@ -18,14 +18,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
"id": 0,
"languages": [],
"themes": [],
register: function register(code, language) {
this.languages.reduce(function(element) {
registerLanguage: function registerLanguage(code, language) {
var alreadyExists = this.languages.reduce(function (exists, element) {
if (exists) {
return true;
}
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 + "'!");
return false;
}
return true;
}, true);
}
return false;
}, false);
if (!alreadyExists) {
language.code = code;
this.languages.push(language);
}
}
};
if (window.uhr !== undefined) {
@ -36,16 +43,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
id: 0,
languages: [],
themes: [],
register: function (code, language) {
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);
}
register: uhrGlobals.registerLanguage
};
// auto-detect themes
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) {
window.uhr.themes.push({});
}
$.widget("fritteli.uhr", {
options: {
width: '100%',
status: 'on',
language: 'de_CH',
theme: window.uhr.themes[0].styleClass,
force: false,
controls: true
},
start: function () {
if (!this._isOn()) {
// public interface methods (exported later)
var start = function start() {
if (!isOn(this)) {
var uhr = this;
this._timer = window.setInterval(function() {
this._timer = window.setInterval(function uhrTimer() {
uhr.options.time = new Date();
uhr._update();
update(uhr);
}, 1000);
this._update();
this._setCookie('uhr-status', 'on');
} else {
update(this);
setCookie(this, 'uhr-status', 'on');
}
},
stop: function () {
if (this._isOn()) {
};
var stop = function stop() {
if (isOn(this)) {
window.clearInterval(this._timer);
this._timer = null;
this._update();
this._setCookie('uhr-status', 'off');
update(this);
setCookie(this, 'uhr-status', 'off');
}
},
toggle: function () {
if (this._isOn()) {
};
var toggle = function toggle() {
if (isOn(this)) {
this.stop();
} else {
this.start();
}
},
language: function (languageKey) {
};
var setLanguage = function setLanugage(languageKey) {
if (languageKey !== this.options.language) {
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;
renderer.render(this, function () {
uhr._currentMinute = -1;
uhr._update();
update(uhr);
});
this._setCookie('uhr-language', languageKey);
this._update();
setCookie(this, 'uhr-language', languageKey);
update(this);
}
},
theme: function (theme) {
};
var setTheme = function setTheme(theme) {
if (theme !== this.options.theme) {
this.element.removeClass(this.options.theme).addClass(theme);
$('#uhr-onoffswitch' + this._id).removeClass(this.options.theme).addClass(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;
if (time === null) {
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._update();
},
// private variables
_id: -1,
_timer: null,
_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 () {
update(this);
};
// private interface methods
var create = function create() {
this._id = window.uhr.id++;
var userTime = this.options.time;
if (this.options.time === undefined) {
this.options.time = new Date();
}
this._setupHTML();
this._wireFunctionality();
setupHTML(this);
wireFunctionality(this);
if (userTime !== undefined) {
this.time(userTime);
}
},
_setupHTML: function () {
var e = this.element;
};
// private helper methods (not exported)
// set up
var setupHTML = function setupHTML(uhr) {
var e = uhr.element;
// Base clock area
e.addClass('uhr');
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('<div class="letterarea"></div>');
e.append('<div class="reflection"></div>');
e.css('width', this.options.width);
e.css('width', uhr.options.width);
var realWidth = e.width();
e.width(realWidth);
e.height(realWidth);
e.css('font-size', (realWidth / 40) + 'px');
if (this.options.controls) {
if (uhr.options.controls) {
// on/off switch
var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + this._id + '"></div>');
toggleSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-onoffswitch-checkbox' + this._id + '" checked="checked" />');
toggleSwitch.append('<label class="onoffswitch-label" for="uhr-onoffswitch-checkbox' + this._id + '">'
var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + uhr._id + '"></div>');
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' + uhr._id + '">'
+ '<div class="onoffswitch-inner"></div>'
+ '<div class="onoffswitch-switch"></div>'
+ '</label>');
@ -246,7 +168,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
// language chooser
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++) {
var language = window.uhr.languages[i];
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
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++) {
var theme = window.uhr.themes[i];
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);
}
}
},
_wireFunctionality: function () {
var uhr = this;
};
var wireFunctionality = function wireFunctionality(uhr) {
// on/off switch
var toggleSwitch = $('#uhr-onoffswitch-checkbox' + this._id);
var toggleSwitch = $('#uhr-onoffswitch-checkbox' + uhr._id);
toggleSwitch.on('click', function () {
uhr.toggle();
});
var status = $.cookie('uhr-status' + this._id);
if (status === undefined || this.options.force) {
status = this.options.status;
var status = $.cookie('uhr-status' + uhr._id);
if (status === undefined || uhr.options.force) {
status = uhr.options.status;
}
toggleSwitch.prop('checked', status === 'on');
if (status === 'on') {
this.start();
uhr.start();
} else {
this.stop();
uhr.stop();
}
// language chooser
var languageChooser = $('#uhr-languagechooser' + this._id);
var languageChooser = $('#uhr-languagechooser' + uhr._id);
languageChooser.on('change', function () {
uhr.language(this.value);
});
var selectedLanguage = $.cookie('uhr-language' + this._id);
if (selectedLanguage === undefined || this.options.force) {
selectedLanguage = this.options.language;
var selectedLanguage = $.cookie('uhr-language' + uhr._id);
if (selectedLanguage === undefined || uhr.options.force) {
selectedLanguage = uhr.options.language;
}
var found = false;
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;
}
languageChooser.val(selectedLanguage);
this.options.language = "";
this.language(selectedLanguage);
uhr.options.language = "";
uhr.language(selectedLanguage);
// theme chooser
var themeChooser = $('#uhr-themechooser' + this._id);
var themeChooser = $('#uhr-themechooser' + uhr._id);
themeChooser.on('change', function () {
uhr.theme(this.value);
});
var selectedTheme = $.cookie('uhr-theme' + this._id);
if (selectedTheme === undefined || this.options.force) {
selectedTheme = this.options.theme;
var selectedTheme = $.cookie('uhr-theme' + uhr._id);
if (selectedTheme === undefined || uhr.options.force) {
selectedTheme = uhr.options.theme;
}
found = false;
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;
}
themeChooser.val(selectedTheme);
this.options.theme = "";
this.theme(selectedTheme);
},
_setCookie: function (cookieName, cookieValue) {
uhr.options.theme = "";
uhr.theme(selectedTheme);
};
var setCookie = function setCookie(uhr, cookieName, cookieValue) {
var options = {};
if (this.options.cookiePath !== undefined) {
options = {expires: 365, path: this.options.cookiePath};
if (uhr.options.cookiePath !== undefined) {
options = {expires: 365, path: uhr.options.cookiePath};
} else {
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.