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

use Function.bind() instead of passing the 'this' object to each and every

Browse source 
function. but that's no nice solution either ...
This commit is contained in:
Manuel Friedli 2014-07-04 13:47:16 +02:00
parent b23a56f866
commit be221aa88d
1 changed files with 94 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

191
js/uhr.js
View file

@ -52,26 +52,25 @@
// public interface methods (exported later) // public interface methods (exported later)
var start = function start() { var start = function start() {
if (!isOn(this)) { if (!isOn.bind(this)()) {
var uhr = this;
this.timer = window.setInterval(function uhrTimer() { this.timer = window.setInterval(function uhrTimer() {
uhr.options.time = new Date(); this.options.time = new Date();
update(uhr); update.bind(this)();
}, 1000); }.bind(this), 1000);
update(this); update.bind(this)();
setCookie(this, 'uhr-status', 'on'); setCookie.bind(this)('uhr-status', 'on');
} }
}; };
var stop = function stop() { var stop = function stop() {
if (isOn(this)) { if (isOn.bind(this)()) {
window.clearInterval(this.timer); window.clearInterval(this.timer);
this.timer = null; this.timer = null;
update(this); update.bind(this)();
setCookie(this, 'uhr-status', 'off'); setCookie.bind(this)('uhr-status', 'off');
} }
}; };
var toggle = function toggle() { var toggle = function toggle() {
if (isOn(this)) { if (isOn.bind(this)()) {
this.stop(); this.stop();
} else { } else {
this.start(); this.start();
@ -80,14 +79,13 @@
var setLanguage = function setLanugage(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(language(this), this.element.find('.letterarea')); var renderer = new UhrRenderer(language.bind(this)(), this.element.find('.letterarea'));
var uhr = this; renderer.render.bind(this)(function () {
renderer.render(this, function () { this.currentMinute = -1;
uhr.currentMinute = -1; update.bind(this)();
update(uhr); }.bind(this));
}); setCookie.bind(this)('uhr-language', languageKey);
setCookie(this, 'uhr-language', languageKey); update.bind(this)();
update(this);
} }
}; };
var setTheme = function setTheme(theme) { var setTheme = function setTheme(theme) {
@ -95,7 +93,7 @@
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;
setCookie(this, 'uhr-theme', theme); setCookie.bind(this)('uhr-theme', theme);
} }
}; };
var setTime = function setTime(time) { var setTime = function setTime(time) {
@ -108,7 +106,7 @@
} }
this.options.time = time; this.options.time = time;
} }
update(this); update.bind(this)();
}; };
// private interface methods // private interface methods
@ -120,16 +118,16 @@
if (this.options.time === undefined) { if (this.options.time === undefined) {
this.options.time = new Date(); this.options.time = new Date();
} }
setupHTML(this); setupHTML.bind(this)();
wireFunctionality(this); wireFunctionality.bind(this)();
if (userTime !== undefined) { if (userTime !== undefined) {
this.time(userTime); this.time(userTime);
} }
}; };
// private helper methods (not exported) // private helper methods (not exported)
// set up // set up
var setupHTML = function setupHTML(uhr) { var setupHTML = function setupHTML() {
var e = uhr.element; var e = this.element;
// Base clock area // Base clock area
e.addClass('uhr'); e.addClass('uhr');
e.empty(); e.empty();
@ -139,17 +137,17 @@
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', uhr.options.width); e.css('width', this.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 (uhr.options.controls) { if (this.options.controls) {
// on/off switch // on/off switch
var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + uhr.id + '"></div>'); var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + this.id + '"></div>');
toggleSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-onoffswitch-checkbox' + uhr.id + '" checked="checked" />'); 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' + uhr.id + '">' toggleSwitch.append('<label class="onoffswitch-label" for="uhr-onoffswitch-checkbox' + this.id + '">'
+ '<div class="onoffswitch-inner"></div>' + '<div class="onoffswitch-inner"></div>'
+ '<div class="onoffswitch-switch"></div>' + '<div class="onoffswitch-switch"></div>'
+ '</label>'); + '</label>');
@ -157,7 +155,7 @@
// language chooser // language chooser
if (uhrGlobals.languages.length > 1) { if (uhrGlobals.languages.length > 1) {
var languageChooser = $('<select id="uhr-languagechooser' + uhr.id + '"></select>'); var languageChooser = $('<select id="uhr-languagechooser' + this.id + '"></select>');
uhrGlobals.languages.forEach(function (item) { uhrGlobals.languages.forEach(function (item) {
languageChooser.append('<option value="' + item.code + '">' + item.language + '</option>'); languageChooser.append('<option value="' + item.code + '">' + item.language + '</option>');
}); });
@ -166,7 +164,7 @@
// theme chooser // theme chooser
if (uhrGlobals.themes.length > 1) { if (uhrGlobals.themes.length > 1) {
var themeChooser = $('<select id="uhr-themechooser' + uhr.id + '"></select>'); var themeChooser = $('<select id="uhr-themechooser' + this.id + '"></select>');
uhrGlobals.themes.forEach(function (item) { uhrGlobals.themes.forEach(function (item) {
themeChooser.append('<option value="' + item.styleClass + '">' + item.name + '</option>'); themeChooser.append('<option value="' + item.styleClass + '">' + item.name + '</option>');
}); });
@ -174,32 +172,31 @@
} }
} }
}; };
var wireFunctionality = function wireFunctionality(uhr) { var wireFunctionality = function wireFunctionality() {
// on/off switch // on/off switch
var toggleSwitch = $('#uhr-onoffswitch-checkbox' + uhr.id); var toggleSwitch = $('#uhr-onoffswitch-checkbox' + this.id);
toggleSwitch.on('click', function () { toggleSwitch.on('click', function () {
uhr.toggle(); this.toggle();
}); }.bind(this));
var status = $.cookie('uhr-status' + uhr.id); var status = $.cookie('uhr-status' + this.id);
if (status === undefined || uhr.options.force) { if (status === undefined || this.options.force) {
status = uhr.options.status; status = this.options.status;
} }
toggleSwitch.prop('checked', status === 'on'); toggleSwitch.prop('checked', status === 'on');
if (status === 'on') { if (status === 'on') {
uhr.start(); this.start();
} else { } else {
uhr.stop(); this.stop();
} }
// language chooser // language chooser
var languageChooser = $('#uhr-languagechooser' + uhr.id); var languageChooser = $('#uhr-languagechooser' + this.id);
languageChooser.on('change', function () { languageChooser.on('change', function () {
uhr.language(this.value); this.language(this.value);
}); }.bind(this));
var selectedLanguage = $.cookie('uhr-language' + uhr.id); var selectedLanguage = $.cookie('uhr-language' + this.id);
if (selectedLanguage === undefined || uhr.options.force) { if (selectedLanguage === undefined || this.options.force) {
selectedLanguage = uhr.options.language; selectedLanguage = this.options.language;
} }
var found = uhrGlobals.languages.some(function (item) { var found = uhrGlobals.languages.some(function (item) {
return selectedLanguage === item.code; return selectedLanguage === item.code;
@ -215,17 +212,17 @@
selectedLanguage = fallbackLanguage; selectedLanguage = fallbackLanguage;
} }
languageChooser.val(selectedLanguage); languageChooser.val(selectedLanguage);
uhr.options.language = ""; this.options.language = "";
uhr.language(selectedLanguage); this.language(selectedLanguage);
// theme chooser // theme chooser
var themeChooser = $('#uhr-themechooser' + uhr.id); var themeChooser = $('#uhr-themechooser' + this.id);
themeChooser.on('change', function () { themeChooser.on('change', function () {
uhr.theme(this.value); this.theme(this.value);
}); }.bind(this));
var selectedTheme = $.cookie('uhr-theme' + uhr.id); var selectedTheme = $.cookie('uhr-theme' + this.id);
if (selectedTheme === undefined || uhr.options.force) { if (selectedTheme === undefined || this.options.force) {
selectedTheme = uhr.options.theme; selectedTheme = this.options.theme;
} }
found = uhrGlobals.themes.some(function (item) { found = uhrGlobals.themes.some(function (item) {
return selectedTheme === item.styleClass; return selectedTheme === item.styleClass;
@ -236,70 +233,70 @@
selectedTheme = fallbackTheme; selectedTheme = fallbackTheme;
} }
themeChooser.val(selectedTheme); themeChooser.val(selectedTheme);
uhr.options.theme = ""; this.options.theme = "";
uhr.theme(selectedTheme); this.theme(selectedTheme);
}; };
var setCookie = function setCookie(uhr, cookieName, cookieValue) { var setCookie = function setCookie(cookieName, cookieValue) {
var options = {}; var options = {};
if (uhr.options.cookiePath !== undefined) { if (this.options.cookiePath !== undefined) {
options = {expires: 365, path: uhr.options.cookiePath}; options = {expires: 365, path: this.options.cookiePath};
} else { } else {
options = {expires: 365}; options = {expires: 365};
} }
$.cookie(cookieName + uhr.id, cookieValue, options); $.cookie(cookieName + this.id, cookieValue, options);
}; };
// business logic // business logic
var isOn = function isOn(uhr) { var isOn = function isOn() {
return uhr.timer !== null; return this.timer !== null;
}; };
var update = function update(uhr) { var update = function update() {
if (isOn(uhr)) { if (isOn.bind(this)()) {
var time = uhr.options.time; var time = this.options.time;
if (time.getMinutes() === uhr.currentMinute) { if (time.getMinutes() === this.currentMinute) {
return; return;
} }
uhr.currentMinute = time.getMinutes(); this.currentMinute = time.getMinutes();
show(uhr, time); show.bind(this)(time);
} else { } else {
clear(uhr); clear.bind(this)();
uhr.currentMinute = -1; this.currentMinute = -1;
} }
}; };
var show = function show(uhr, time) { var show = function show(time) {
var dotMinute = getDotMinute(uhr, time); var dotMinute = getDotMinute.bind(this)(time);
var hour = getHour(uhr, time); var hour = getHour.bind(this)(time);
var coarseMinute = getCoarseMinute(uhr, time); var coarseMinute = getCoarseMinute.bind(this)(time);
clear(uhr); clear.bind(this)();
highlight(uhr, 'on'); highlight.bind(this)('on');
for (var i = 1; i <= dotMinute; i++) { for (var i = 1; i <= dotMinute; i++) {
highlight(uhr, 'dot' + i); highlight.bind(this)('dot' + i);
} }
highlight(uhr, 'minute' + coarseMinute); highlight.bind(this)('minute' + coarseMinute);
highlight(uhr, 'hour' + hour); highlight.bind(this)('hour' + hour);
}; };
var highlight = function highlight(uhr, itemClass) { var highlight = function highlight(itemClass) {
uhr.element.find('.item.' + itemClass).addClass('active'); this.element.find('.item.' + itemClass).addClass('active');
}; };
var clear = function clear(uhr) { var clear = function clear() {
uhr.element.find('.item').removeClass('active'); this.element.find('.item').removeClass('active');
}; };
var getDotMinute = function getDotMinute(uhr, date) { var getDotMinute = function getDotMinute(date) {
if (typeof language(uhr).getDotMinute === 'function') { if (typeof language.bind(this)().getDotMinute === 'function') {
return language(uhr).getDotMinute(date); return language.bind(this)().getDotMinute(date);
} }
var minutes = date.getMinutes(); var minutes = date.getMinutes();
return minutes % 5; return minutes % 5;
}; };
var getCoarseMinute = function getCoarseMinute(uhr, date) { var getCoarseMinute = function getCoarseMinute(date) {
if (typeof language(uhr).getCoarseMinute === 'function') { if (typeof language.bind(this)().getCoarseMinute === 'function') {
return language(uhr).getCoarseMinute(date); return language.bind(this)().getCoarseMinute(date);
} }
return date.getMinutes(); return date.getMinutes();
}; };
var getHour = function getHour(uhr, date) { var getHour = function getHour(date) {
if (typeof language(uhr).getHour === 'function') { if (typeof language.bind(this)().getHour === 'function') {
return language(uhr).getHour(date); return language.bind(this)().getHour(date);
} }
var hour = date.getHours(); var hour = date.getHours();
if (date.getMinutes() >= 25) { if (date.getMinutes() >= 25) {
@ -308,10 +305,10 @@
return hour; return hour;
}; };
var language = function language(uhr) { var language = function language() {
var matchingLanguages = uhrGlobals.languages.filter(function (element) { var matchingLanguages = uhrGlobals.languages.filter(function (element) {
return (element.code === this.options.language); return (element.code === this.options.language);
}, uhr); }, this);
if (matchingLanguages.length > 0) { if (matchingLanguages.length > 0) {
return matchingLanguages[0]; return matchingLanguages[0];
} }
@ -345,7 +342,7 @@
* @param renderarea Das jQuery-gewrappte HTML-Element, auf dem gerendert werden soll. * @param renderarea Das jQuery-gewrappte HTML-Element, auf dem gerendert werden soll.
*/ */
function UhrRenderer(layout, renderarea) { function UhrRenderer(layout, renderarea) {
this.render = function render(uhr, beforeshow) { this.render = function render(beforeshow) {
if (layout.parsed === undefined) { if (layout.parsed === undefined) {
switch (layout.version) { switch (layout.version) {
case 2: case 2: