From be221aa88d8d3aa2e5853f906c4b69cd281c6a4f Mon Sep 17 00:00:00 2001
From: manuel <manuel@fritteli.ch>
Date: Fri, 4 Jul 2014 13:47:16 +0200
Subject: [PATCH] use Function.bind() instead of passing the 'this' object to
each and every function. but that's no nice solution either ...
---
js/uhr.js | 191 +++++++++++++++++++++++++++---------------------------
1 file changed, 94 insertions(+), 97 deletions(-)
diff --git a/js/uhr.js b/js/uhr.js
index 7e638a1..1fd1ece 100644
--- a/js/uhr.js
+++ b/js/uhr.js
@@ -52,26 +52,25 @@
// public interface methods (exported later)
var start = function start() {
- if (!isOn(this)) {
- var uhr = this;
+ if (!isOn.bind(this)()) {
this.timer = window.setInterval(function uhrTimer() {
- uhr.options.time = new Date();
- update(uhr);
- }, 1000);
- update(this);
- setCookie(this, 'uhr-status', 'on');
+ this.options.time = new Date();
+ update.bind(this)();
+ }.bind(this), 1000);
+ update.bind(this)();
+ setCookie.bind(this)('uhr-status', 'on');
}
};
var stop = function stop() {
- if (isOn(this)) {
+ if (isOn.bind(this)()) {
window.clearInterval(this.timer);
this.timer = null;
- update(this);
- setCookie(this, 'uhr-status', 'off');
+ update.bind(this)();
+ setCookie.bind(this)('uhr-status', 'off');
}
};
var toggle = function toggle() {
- if (isOn(this)) {
+ if (isOn.bind(this)()) {
this.stop();
} else {
this.start();
@@ -80,14 +79,13 @@
var setLanguage = function setLanugage(languageKey) {
if (languageKey !== this.options.language) {
this.options.language = languageKey;
- var renderer = new UhrRenderer(language(this), this.element.find('.letterarea'));
- var uhr = this;
- renderer.render(this, function () {
- uhr.currentMinute = -1;
- update(uhr);
- });
- setCookie(this, 'uhr-language', languageKey);
- update(this);
+ var renderer = new UhrRenderer(language.bind(this)(), this.element.find('.letterarea'));
+ renderer.render.bind(this)(function () {
+ this.currentMinute = -1;
+ update.bind(this)();
+ }.bind(this));
+ setCookie.bind(this)('uhr-language', languageKey);
+ update.bind(this)();
}
};
var setTheme = function setTheme(theme) {
@@ -95,7 +93,7 @@
this.element.removeClass(this.options.theme).addClass(theme);
$('#uhr-onoffswitch' + this.id).removeClass(this.options.theme).addClass(theme);
this.options.theme = theme;
- setCookie(this, 'uhr-theme', theme);
+ setCookie.bind(this)('uhr-theme', theme);
}
};
var setTime = function setTime(time) {
@@ -108,7 +106,7 @@
}
this.options.time = time;
}
- update(this);
+ update.bind(this)();
};
// private interface methods
@@ -120,16 +118,16 @@
if (this.options.time === undefined) {
this.options.time = new Date();
}
- setupHTML(this);
- wireFunctionality(this);
+ setupHTML.bind(this)();
+ wireFunctionality.bind(this)();
if (userTime !== undefined) {
this.time(userTime);
}
};
// private helper methods (not exported)
// set up
- var setupHTML = function setupHTML(uhr) {
- var e = uhr.element;
+ var setupHTML = function setupHTML() {
+ var e = this.element;
// Base clock area
e.addClass('uhr');
e.empty();
@@ -139,17 +137,17 @@
e.append('<span class="item dot dot4"></span>');
e.append('<div class="letterarea"></div>');
e.append('<div class="reflection"></div>');
- e.css('width', uhr.options.width);
+ e.css('width', this.options.width);
var realWidth = e.width();
e.width(realWidth);
e.height(realWidth);
e.css('font-size', (realWidth / 40) + 'px');
- if (uhr.options.controls) {
+ if (this.options.controls) {
// on/off switch
- 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 + '">'
+ 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 + '">'
+ '<div class="onoffswitch-inner"></div>'
+ '<div class="onoffswitch-switch"></div>'
+ '</label>');
@@ -157,7 +155,7 @@
// language chooser
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) {
languageChooser.append('<option value="' + item.code + '">' + item.language + '</option>');
});
@@ -166,7 +164,7 @@
// theme chooser
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) {
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
- var toggleSwitch = $('#uhr-onoffswitch-checkbox' + uhr.id);
+ var toggleSwitch = $('#uhr-onoffswitch-checkbox' + this.id);
toggleSwitch.on('click', function () {
- uhr.toggle();
- });
- var status = $.cookie('uhr-status' + uhr.id);
- if (status === undefined || uhr.options.force) {
- status = uhr.options.status;
+ this.toggle();
+ }.bind(this));
+ var status = $.cookie('uhr-status' + this.id);
+ if (status === undefined || this.options.force) {
+ status = this.options.status;
}
toggleSwitch.prop('checked', status === 'on');
if (status === 'on') {
- uhr.start();
+ this.start();
} else {
- uhr.stop();
+ this.stop();
}
// language chooser
- var languageChooser = $('#uhr-languagechooser' + uhr.id);
+ var languageChooser = $('#uhr-languagechooser' + this.id);
languageChooser.on('change', function () {
- uhr.language(this.value);
- });
- var selectedLanguage = $.cookie('uhr-language' + uhr.id);
- if (selectedLanguage === undefined || uhr.options.force) {
- selectedLanguage = uhr.options.language;
+ this.language(this.value);
+ }.bind(this));
+ var selectedLanguage = $.cookie('uhr-language' + this.id);
+ if (selectedLanguage === undefined || this.options.force) {
+ selectedLanguage = this.options.language;
}
var found = uhrGlobals.languages.some(function (item) {
return selectedLanguage === item.code;
@@ -215,17 +212,17 @@
selectedLanguage = fallbackLanguage;
}
languageChooser.val(selectedLanguage);
- uhr.options.language = "";
- uhr.language(selectedLanguage);
+ this.options.language = "";
+ this.language(selectedLanguage);
// theme chooser
- var themeChooser = $('#uhr-themechooser' + uhr.id);
+ var themeChooser = $('#uhr-themechooser' + this.id);
themeChooser.on('change', function () {
- uhr.theme(this.value);
- });
- var selectedTheme = $.cookie('uhr-theme' + uhr.id);
- if (selectedTheme === undefined || uhr.options.force) {
- selectedTheme = uhr.options.theme;
+ this.theme(this.value);
+ }.bind(this));
+ var selectedTheme = $.cookie('uhr-theme' + this.id);
+ if (selectedTheme === undefined || this.options.force) {
+ selectedTheme = this.options.theme;
}
found = uhrGlobals.themes.some(function (item) {
return selectedTheme === item.styleClass;
@@ -236,70 +233,70 @@
selectedTheme = fallbackTheme;
}
themeChooser.val(selectedTheme);
- uhr.options.theme = "";
- uhr.theme(selectedTheme);
+ this.options.theme = "";
+ this.theme(selectedTheme);
};
- var setCookie = function setCookie(uhr, cookieName, cookieValue) {
+ var setCookie = function setCookie(cookieName, cookieValue) {
var options = {};
- if (uhr.options.cookiePath !== undefined) {
- options = {expires: 365, path: uhr.options.cookiePath};
+ if (this.options.cookiePath !== undefined) {
+ options = {expires: 365, path: this.options.cookiePath};
} else {
options = {expires: 365};
}
- $.cookie(cookieName + uhr.id, cookieValue, options);
+ $.cookie(cookieName + this.id, cookieValue, options);
};
// business logic
- var isOn = function isOn(uhr) {
- return uhr.timer !== null;
+ var isOn = function isOn() {
+ return this.timer !== null;
};
- var update = function update(uhr) {
- if (isOn(uhr)) {
- var time = uhr.options.time;
- if (time.getMinutes() === uhr.currentMinute) {
+ var update = function update() {
+ if (isOn.bind(this)()) {
+ var time = this.options.time;
+ if (time.getMinutes() === this.currentMinute) {
return;
}
- uhr.currentMinute = time.getMinutes();
- show(uhr, time);
+ this.currentMinute = time.getMinutes();
+ show.bind(this)(time);
} else {
- clear(uhr);
- uhr.currentMinute = -1;
+ clear.bind(this)();
+ this.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');
+ var show = function show(time) {
+ var dotMinute = getDotMinute.bind(this)(time);
+ var hour = getHour.bind(this)(time);
+ var coarseMinute = getCoarseMinute.bind(this)(time);
+ clear.bind(this)();
+ highlight.bind(this)('on');
for (var i = 1; i <= dotMinute; i++) {
- highlight(uhr, 'dot' + i);
+ highlight.bind(this)('dot' + i);
}
- highlight(uhr, 'minute' + coarseMinute);
- highlight(uhr, 'hour' + hour);
+ highlight.bind(this)('minute' + coarseMinute);
+ highlight.bind(this)('hour' + hour);
};
- var highlight = function highlight(uhr, itemClass) {
- uhr.element.find('.item.' + itemClass).addClass('active');
+ var highlight = function highlight(itemClass) {
+ this.element.find('.item.' + itemClass).addClass('active');
};
- var clear = function clear(uhr) {
- uhr.element.find('.item').removeClass('active');
+ var clear = function clear() {
+ this.element.find('.item').removeClass('active');
};
- var getDotMinute = function getDotMinute(uhr, date) {
- if (typeof language(uhr).getDotMinute === 'function') {
- return language(uhr).getDotMinute(date);
+ var getDotMinute = function getDotMinute(date) {
+ if (typeof language.bind(this)().getDotMinute === 'function') {
+ return language.bind(this)().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);
+ var getCoarseMinute = function getCoarseMinute(date) {
+ if (typeof language.bind(this)().getCoarseMinute === 'function') {
+ return language.bind(this)().getCoarseMinute(date);
}
return date.getMinutes();
};
- var getHour = function getHour(uhr, date) {
- if (typeof language(uhr).getHour === 'function') {
- return language(uhr).getHour(date);
+ var getHour = function getHour(date) {
+ if (typeof language.bind(this)().getHour === 'function') {
+ return language.bind(this)().getHour(date);
}
var hour = date.getHours();
if (date.getMinutes() >= 25) {
@@ -308,10 +305,10 @@
return hour;
};
- var language = function language(uhr) {
+ var language = function language() {
var matchingLanguages = uhrGlobals.languages.filter(function (element) {
return (element.code === this.options.language);
- }, uhr);
+ }, this);
if (matchingLanguages.length > 0) {
return matchingLanguages[0];
}
@@ -345,7 +342,7 @@
* @param renderarea Das jQuery-gewrappte HTML-Element, auf dem gerendert werden soll.
*/
function UhrRenderer(layout, renderarea) {
- this.render = function render(uhr, beforeshow) {
+ this.render = function render(beforeshow) {
if (layout.parsed === undefined) {
switch (layout.version) {
case 2: