diff --git a/README b/README deleted file mode 100644 index 909b843..0000000 --- a/README +++ /dev/null @@ -1,71 +0,0 @@ -Bärneruhr - -Du willst Bärneruhr auf deiner Website verwenden? Das geht ganz einfach. - -1. Benötigte Dateien einbinden - -Binde folgende Javascript-Dateien im HTML-Dokument ein: -- jquery-2.0.3.min.js (Falls nicht bereits vorhanden) -- jquery.cookie.js (Falls nicht bereits vorhanden) -- uhr.js - -Binde mindestens eine der folgenden Javascript-Dateien im HTML ein, je nach dem, welche Sprachen deine Uhr unterstützen soll: -- uhr-de_CH.js -- uhr-de.js -- uhr-en.js - -Binde folgende CSS-Dateien im HTML-Dokument ein: -- uhr.css -- uhr-black.css -- uhr-blue.css -- uhr-green.css -- uhr-red.css -- uhr-white.css - -Die möglichen Themes (Farbschemata) sind im Moment noch hartcodiert, deshalb sollten alle Dateien eingebunden werden. - -2. Uhr-Element im HTML-Dokument einfügen - -Erstelle ein leeres
mit einer ID: -
- -3. Uhr per Javascript konfigurieren - -Initialisiere die Uhr mit einer einzigen Zeile Javascript: -new Uhr(jQuery('#meineuhr')); - -Als Parameter wird ein jQuery-gewrapptes HTML-Element erwartet. - -Dies erzeugt eine Uhr in der Standardkonfiguration. Das heisst: -- Breite ist 100% des Eltenelements -- Farbe ist Schwarz -- Sprache ist Bärndütsch -- Die Uhr ist eingeschaltet - -Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt - -4. Weitere Optionen -Der Uhr()-Methode kann ein Options-Objekt mitgegeben werden: -new Uhr(jQuery('#uhrcontainer'), { - status: 'on', // 'on' oder 'off' - theme: 'red', // 'black', 'red', 'blue', 'green' oder 'white' - layout: 'en', // 'de_EC', 'de' oder 'en' (je nach eingebundenen Sprachdateien - width: '20em' // eine CSS-Grössenangabe -}); - -Viel Spass! - -A. Lizenzbestimmungen - -This program is free software: you can redistribute it and/or modify -it under the terms of the GNU General Public License as published by -the Free Software Foundation, either version 3 of the License, or -(at your option) any later version. - -This program is distributed in the hope that it will be useful, -but WITHOUT ANY WARRANTY; without even the implied warranty of -MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -GNU General Public License for more details. - -You should have received a copy of the GNU General Public License -along with this program. If not, see . diff --git a/README.md b/README.md new file mode 100644 index 0000000..26b944c --- /dev/null +++ b/README.md @@ -0,0 +1,94 @@ +Bärneruhr +========= + +Du willst Bärneruhr auf deiner Website verwenden? Dank des jQuery-Plugins geht das so einfach, dass es sogar deine Grossmutter tun könnte! + +1. Benötigte Dateien einbinden +------------------------------ +* Binde folgende Javascript-Dateien im HTML-Dokument ein: + * jquery-2.0.3.min.js (Falls nicht bereits vorhanden) + * jquery-ui-1.10.3.custom.min.js (Falls nicht bereits vorhanden) + * Von jquery-ui werden die Komponenten 'core' und 'widget' benötigt. + * jquery-cookie-1.4.0.js (Falls nicht bereits vorhanden) + * uhr.js +* Binde mindestens eine der folgenden Javascript-Dateien im HTML ein, je nach dem, welche Sprachen deine Uhr unterstützen soll: + * uhr-de_CH.js + * uhr-de.js + * uhr-en.js +* Binde folgende CSS-Dateien im HTML-Dokument ein: + * uhr.css + * uhr-black.css + * uhr-blue.css + * uhr-green.css + * uhr-red.css + * uhr-white.css +* Die möglichen Themes (Farbschemata) sind im Moment noch hartcodiert, deshalb sollten alle Dateien eingebunden werden. + +2. Uhr-Element im HTML-Dokument einfügen +---------------------------------------- +Erstelle ein leeres `
` mit einer ID: + +
+3. Uhr per Javascript konfigurieren +----------------------------------- +Initialisiere die Uhr mit einer einzigen Zeile Javascript: + + jQuery('#uhrcontainer').uhr(); + +Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst: + +* Breite ist 100% des Eltenelements +* Farbe ist Schwarz +* Sprache ist Bärndütsch +* Die Uhr ist eingeschaltet + +Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt. + +Es kann natürlich auch eine Collection von Elementen übergeben werden. Mit + + jQuery('div').uhr(); + +würde also jedes `
`-Element der Seite in eine Uhr umgewandelt + +4. Weitere Optionen +------------------- +Der uhr()-Methode kann ein Options-Objekt mitgegeben werden: + + jQuery('#uhrcontainer').uhr({ + status: 'on', // 'on' (default) oder 'off' + theme: 'black', // 'black' (default), 'red', 'blue', 'green' oder 'white' + language: 'de_CH', // 'de_CH' (default), 'de' oder 'en' (je nach eingebundenen Sprachdateien) + width: '100%', // eine CSS-Grössenangabe (default: 100%) + force: false, // false (default): Falls ein Cookie im Browser besteht, werden dessen Konfigurationswerte übernommen; + // true: immer die angegebene Konfiguration verwenden + }); + +5. Sonderfunktionen +------------------- +Es gibt noch einen zusätzlichen Konfigurationsparameter. Mit + + { + time: new Date() + } +kann die Uhr auf eine fixe Zeit eingestellt werden. Sie bleibt dann statisch und aktualisiert sich nicht, sondern zeigt immer diese Zeit an. Beim Klick auf den On/Off-Schalter oder beim Wechsel der Sprache wird dies allerdings rückgängig gemacht und die Uhr nimmt das Standardverhalten mit der aktuellen Systemzeit an. + +Die Zeit kann auch über einen Methodenaufruf dynamisch eingestellt werden: + + jQuery('#uhrcontainer').uhr("time", new Date()); + +Viel Spass! + +A. Lizenzbestimmungen +===================== +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU General Public License for more details. + +You should have received a copy of the GNU General Public License +along with this program. If not, see . diff --git a/favicon.png b/favicon.png new file mode 100644 index 0000000..2f2008f Binary files /dev/null and b/favicon.png differ diff --git a/index.html b/index.html index 54ef49b..4a59561 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,8 @@ along with this program. If not, see . Die Zeit als Wort - in HTML, CSS und JS - + + @@ -25,6 +26,7 @@ along with this program. If not, see . + @@ -34,15 +36,14 @@ along with this program. If not, see . diff --git a/jquery.cookie.js b/jquery-cookie-1.4.0.js similarity index 100% rename from jquery.cookie.js rename to jquery-cookie-1.4.0.js diff --git a/jquery-ui-1.10.3.custom.min.js b/jquery-ui-1.10.3.custom.min.js new file mode 100644 index 0000000..c7f8a65 --- /dev/null +++ b/jquery-ui-1.10.3.custom.min.js @@ -0,0 +1,6 @@ +/*! jQuery UI - v1.10.3 - 2014-01-11 +* http://jqueryui.com +* Includes: jquery.ui.core.js, jquery.ui.widget.js +* Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */ + +(function(t,e){function n(e,n){var r,s,o,a=e.nodeName.toLowerCase();return"area"===a?(r=e.parentNode,s=r.name,e.href&&s&&"map"===r.nodeName.toLowerCase()?(o=t("img[usemap=#"+s+"]")[0],!!o&&i(o)):!1):(/input|select|textarea|button|object/.test(a)?!e.disabled:"a"===a?e.href||n:n)&&i(e)}function i(e){return t.expr.filters.visible(e)&&!t(e).parents().addBack().filter(function(){return"hidden"===t.css(this,"visibility")}).length}var r=0,s=/^ui-id-\d+$/;t.ui=t.ui||{},t.extend(t.ui,{version:"1.10.3",keyCode:{BACKSPACE:8,COMMA:188,DELETE:46,DOWN:40,END:35,ENTER:13,ESCAPE:27,HOME:36,LEFT:37,NUMPAD_ADD:107,NUMPAD_DECIMAL:110,NUMPAD_DIVIDE:111,NUMPAD_ENTER:108,NUMPAD_MULTIPLY:106,NUMPAD_SUBTRACT:109,PAGE_DOWN:34,PAGE_UP:33,PERIOD:190,RIGHT:39,SPACE:32,TAB:9,UP:38}}),t.fn.extend({focus:function(e){return function(n,i){return"number"==typeof n?this.each(function(){var e=this;setTimeout(function(){t(e).focus(),i&&i.call(e)},n)}):e.apply(this,arguments)}}(t.fn.focus),scrollParent:function(){var e;return e=t.ui.ie&&/(static|relative)/.test(this.css("position"))||/absolute/.test(this.css("position"))?this.parents().filter(function(){return/(relative|absolute|fixed)/.test(t.css(this,"position"))&&/(auto|scroll)/.test(t.css(this,"overflow")+t.css(this,"overflow-y")+t.css(this,"overflow-x"))}).eq(0):this.parents().filter(function(){return/(auto|scroll)/.test(t.css(this,"overflow")+t.css(this,"overflow-y")+t.css(this,"overflow-x"))}).eq(0),/fixed/.test(this.css("position"))||!e.length?t(document):e},zIndex:function(n){if(n!==e)return this.css("zIndex",n);if(this.length)for(var i,r,s=t(this[0]);s.length&&s[0]!==document;){if(i=s.css("position"),("absolute"===i||"relative"===i||"fixed"===i)&&(r=parseInt(s.css("zIndex"),10),!isNaN(r)&&0!==r))return r;s=s.parent()}return 0},uniqueId:function(){return this.each(function(){this.id||(this.id="ui-id-"+ ++r)})},removeUniqueId:function(){return this.each(function(){s.test(this.id)&&t(this).removeAttr("id")})}}),t.extend(t.expr[":"],{data:t.expr.createPseudo?t.expr.createPseudo(function(e){return function(n){return!!t.data(n,e)}}):function(e,n,i){return!!t.data(e,i[3])},focusable:function(e){return n(e,!isNaN(t.attr(e,"tabindex")))},tabbable:function(e){var i=t.attr(e,"tabindex"),r=isNaN(i);return(r||i>=0)&&n(e,!r)}}),t("").outerWidth(1).jquery||t.each(["Width","Height"],function(n,i){function r(e,n,i,r){return t.each(s,function(){n-=parseFloat(t.css(e,"padding"+this))||0,i&&(n-=parseFloat(t.css(e,"border"+this+"Width"))||0),r&&(n-=parseFloat(t.css(e,"margin"+this))||0)}),n}var s="Width"===i?["Left","Right"]:["Top","Bottom"],o=i.toLowerCase(),a={innerWidth:t.fn.innerWidth,innerHeight:t.fn.innerHeight,outerWidth:t.fn.outerWidth,outerHeight:t.fn.outerHeight};t.fn["inner"+i]=function(n){return n===e?a["inner"+i].call(this):this.each(function(){t(this).css(o,r(this,n)+"px")})},t.fn["outer"+i]=function(e,n){return"number"!=typeof e?a["outer"+i].call(this,e):this.each(function(){t(this).css(o,r(this,e,!0,n)+"px")})}}),t.fn.addBack||(t.fn.addBack=function(t){return this.add(null==t?this.prevObject:this.prevObject.filter(t))}),t("").data("a-b","a").removeData("a-b").data("a-b")&&(t.fn.removeData=function(e){return function(n){return arguments.length?e.call(this,t.camelCase(n)):e.call(this)}}(t.fn.removeData)),t.ui.ie=!!/msie [\w.]+/.exec(navigator.userAgent.toLowerCase()),t.support.selectstart="onselectstart"in document.createElement("div"),t.fn.extend({disableSelection:function(){return this.bind((t.support.selectstart?"selectstart":"mousedown")+".ui-disableSelection",function(t){t.preventDefault()})},enableSelection:function(){return this.unbind(".ui-disableSelection")}}),t.extend(t.ui,{plugin:{add:function(e,n,i){var r,s=t.ui[e].prototype;for(r in i)s.plugins[r]=s.plugins[r]||[],s.plugins[r].push([n,i[r]])},call:function(t,e,n){var i,r=t.plugins[e];if(r&&t.element[0].parentNode&&11!==t.element[0].parentNode.nodeType)for(i=0;r.length>i;i++)t.options[r[i][0]]&&r[i][1].apply(t.element,n)}},hasScroll:function(e,n){if("hidden"===t(e).css("overflow"))return!1;var i=n&&"left"===n?"scrollLeft":"scrollTop",r=!1;return e[i]>0?!0:(e[i]=1,r=e[i]>0,e[i]=0,r)}})})(jQuery);(function(t,e){var i=0,s=Array.prototype.slice,o=t.cleanData;t.cleanData=function(e){for(var i,s=0;null!=(i=e[s]);s++)try{t(i).triggerHandler("remove")}catch(n){}o(e)},t.widget=function(i,s,o){var n,r,a,l,h={},c=i.split(".")[0];i=i.split(".")[1],n=c+"-"+i,o||(o=s,s=t.Widget),t.expr[":"][n.toLowerCase()]=function(e){return!!t.data(e,n)},t[c]=t[c]||{},r=t[c][i],a=t[c][i]=function(t,i){return this._createWidget?(arguments.length&&this._createWidget(t,i),e):new a(t,i)},t.extend(a,r,{version:o.version,_proto:t.extend({},o),_childConstructors:[]}),l=new s,l.options=t.widget.extend({},l.options),t.each(o,function(i,o){return t.isFunction(o)?(h[i]=function(){var t=function(){return s.prototype[i].apply(this,arguments)},e=function(t){return s.prototype[i].apply(this,t)};return function(){var i,s=this._super,n=this._superApply;return this._super=t,this._superApply=e,i=o.apply(this,arguments),this._super=s,this._superApply=n,i}}(),e):(h[i]=o,e)}),a.prototype=t.widget.extend(l,{widgetEventPrefix:r?l.widgetEventPrefix:i},h,{constructor:a,namespace:c,widgetName:i,widgetFullName:n}),r?(t.each(r._childConstructors,function(e,i){var s=i.prototype;t.widget(s.namespace+"."+s.widgetName,a,i._proto)}),delete r._childConstructors):s._childConstructors.push(a),t.widget.bridge(i,a)},t.widget.extend=function(i){for(var o,n,r=s.call(arguments,1),a=0,l=r.length;l>a;a++)for(o in r[a])n=r[a][o],r[a].hasOwnProperty(o)&&n!==e&&(i[o]=t.isPlainObject(n)?t.isPlainObject(i[o])?t.widget.extend({},i[o],n):t.widget.extend({},n):n);return i},t.widget.bridge=function(i,o){var n=o.prototype.widgetFullName||i;t.fn[i]=function(r){var a="string"==typeof r,l=s.call(arguments,1),h=this;return r=!a&&l.length?t.widget.extend.apply(null,[r].concat(l)):r,a?this.each(function(){var s,o=t.data(this,n);return o?t.isFunction(o[r])&&"_"!==r.charAt(0)?(s=o[r].apply(o,l),s!==o&&s!==e?(h=s&&s.jquery?h.pushStack(s.get()):s,!1):e):t.error("no such method '"+r+"' for "+i+" widget instance"):t.error("cannot call methods on "+i+" prior to initialization; "+"attempted to call method '"+r+"'")}):this.each(function(){var e=t.data(this,n);e?e.option(r||{})._init():t.data(this,n,new o(r,this))}),h}},t.Widget=function(){},t.Widget._childConstructors=[],t.Widget.prototype={widgetName:"widget",widgetEventPrefix:"",defaultElement:"
",options:{disabled:!1,create:null},_createWidget:function(e,s){s=t(s||this.defaultElement||this)[0],this.element=t(s),this.uuid=i++,this.eventNamespace="."+this.widgetName+this.uuid,this.options=t.widget.extend({},this.options,this._getCreateOptions(),e),this.bindings=t(),this.hoverable=t(),this.focusable=t(),s!==this&&(t.data(s,this.widgetFullName,this),this._on(!0,this.element,{remove:function(t){t.target===s&&this.destroy()}}),this.document=t(s.style?s.ownerDocument:s.document||s),this.window=t(this.document[0].defaultView||this.document[0].parentWindow)),this._create(),this._trigger("create",null,this._getCreateEventData()),this._init()},_getCreateOptions:t.noop,_getCreateEventData:t.noop,_create:t.noop,_init:t.noop,destroy:function(){this._destroy(),this.element.unbind(this.eventNamespace).removeData(this.widgetName).removeData(this.widgetFullName).removeData(t.camelCase(this.widgetFullName)),this.widget().unbind(this.eventNamespace).removeAttr("aria-disabled").removeClass(this.widgetFullName+"-disabled "+"ui-state-disabled"),this.bindings.unbind(this.eventNamespace),this.hoverable.removeClass("ui-state-hover"),this.focusable.removeClass("ui-state-focus")},_destroy:t.noop,widget:function(){return this.element},option:function(i,s){var o,n,r,a=i;if(0===arguments.length)return t.widget.extend({},this.options);if("string"==typeof i)if(a={},o=i.split("."),i=o.shift(),o.length){for(n=a[i]=t.widget.extend({},this.options[i]),r=0;o.length-1>r;r++)n[o[r]]=n[o[r]]||{},n=n[o[r]];if(i=o.pop(),s===e)return n[i]===e?null:n[i];n[i]=s}else{if(s===e)return this.options[i]===e?null:this.options[i];a[i]=s}return this._setOptions(a),this},_setOptions:function(t){var e;for(e in t)this._setOption(e,t[e]);return this},_setOption:function(t,e){return this.options[t]=e,"disabled"===t&&(this.widget().toggleClass(this.widgetFullName+"-disabled ui-state-disabled",!!e).attr("aria-disabled",e),this.hoverable.removeClass("ui-state-hover"),this.focusable.removeClass("ui-state-focus")),this},enable:function(){return this._setOption("disabled",!1)},disable:function(){return this._setOption("disabled",!0)},_on:function(i,s,o){var n,r=this;"boolean"!=typeof i&&(o=s,s=i,i=!1),o?(s=n=t(s),this.bindings=this.bindings.add(s)):(o=s,s=this.element,n=this.widget()),t.each(o,function(o,a){function l(){return i||r.options.disabled!==!0&&!t(this).hasClass("ui-state-disabled")?("string"==typeof a?r[a]:a).apply(r,arguments):e}"string"!=typeof a&&(l.guid=a.guid=a.guid||l.guid||t.guid++);var h=o.match(/^(\w+)\s*(.*)$/),c=h[1]+r.eventNamespace,p=h[2];p?n.delegate(p,c,l):s.bind(c,l)})},_off:function(t,e){e=(e||"").split(" ").join(this.eventNamespace+" ")+this.eventNamespace,t.unbind(e).undelegate(e)},_delay:function(t,e){function i(){return("string"==typeof t?s[t]:t).apply(s,arguments)}var s=this;return setTimeout(i,e||0)},_hoverable:function(e){this.hoverable=this.hoverable.add(e),this._on(e,{mouseenter:function(e){t(e.currentTarget).addClass("ui-state-hover")},mouseleave:function(e){t(e.currentTarget).removeClass("ui-state-hover")}})},_focusable:function(e){this.focusable=this.focusable.add(e),this._on(e,{focusin:function(e){t(e.currentTarget).addClass("ui-state-focus")},focusout:function(e){t(e.currentTarget).removeClass("ui-state-focus")}})},_trigger:function(e,i,s){var o,n,r=this.options[e];if(s=s||{},i=t.Event(i),i.type=(e===this.widgetEventPrefix?e:this.widgetEventPrefix+e).toLowerCase(),i.target=this.element[0],n=i.originalEvent)for(o in n)o in i||(i[o]=n[o]);return this.element.trigger(i,s),!(t.isFunction(r)&&r.apply(this.element[0],[i].concat(s))===!1||i.isDefaultPrevented())}},t.each({show:"fadeIn",hide:"fadeOut"},function(e,i){t.Widget.prototype["_"+e]=function(s,o,n){"string"==typeof o&&(o={effect:o});var r,a=o?o===!0||"number"==typeof o?i:o.effect||i:e;o=o||{},"number"==typeof o&&(o={duration:o}),r=!t.isEmptyObject(o),o.complete=n,o.delay&&s.delay(o.delay),r&&t.effects&&t.effects.effect[a]?s[e](o):a!==e&&s[a]?s[a](o.duration,o.easing,n):s.queue(function(i){t(this)[e](),n&&n.call(s[0]),i()})}})})(jQuery); \ No newline at end of file diff --git a/manifest.appcache b/manifest.appcache index 8fbf817..84b7334 100644 --- a/manifest.appcache +++ b/manifest.appcache @@ -1,18 +1,20 @@ CACHE MANIFEST -# 3.0.8 +# 4.0.0 COPYING +favicon.png index.html jquery-2.0.3.min.js -jquery.cookie.js -uhr.js -uhr-de_CH.js -uhr-de.js -uhr-en.js -uhr.css +jquery-cookie-1.4.0.js +jquery-ui-1.10.3.custom.min.js uhr-black.css -uhr-red.css uhr-blue.css +uhr-de.js +uhr-de_CH.js +uhr-en.js uhr-green.css +uhr-red.css uhr-white.css +uhr.css +uhr.js uhr.woff diff --git a/uhr-de.js b/uhr-de.js index 4a009ed..7c0d461 100644 --- a/uhr-de.js +++ b/uhr-de.js @@ -27,4 +27,4 @@ var layout = { [h('Z', 10), h('E', 10),h('H', 10),h('N', 9, 10),h('E', 9),h('U', 9),h('N', 9),l('K'),l('U'),l('H'),l('R')] ] }; -Uhr.register('de', layout); +window._uhr.languages['de'] = layout; diff --git a/uhr-de_CH.js b/uhr-de_CH.js index f10605b..874ae1c 100644 --- a/uhr-de_CH.js +++ b/uhr-de_CH.js @@ -27,4 +27,4 @@ var layout = { [h('Z', 12), h('W', 12),h('Ö', 12),h('U', 12),h('F', 12),h('I', 12),l('N'),l('A'),l('U'),l('H'),l('R')] ] }; -Uhr.register('de_CH', layout); +window._uhr.languages['de_CH'] = layout; diff --git a/uhr-en.js b/uhr-en.js index 59dfc15..bca4c8e 100644 --- a/uhr-en.js +++ b/uhr-en.js @@ -34,4 +34,4 @@ var layout = { return hour; } }; -Uhr.register('en', layout); +window._uhr.languages['en'] = layout; diff --git a/uhr.js b/uhr.js index 7b2408e..0f527cf 100644 --- a/uhr.js +++ b/uhr.js @@ -12,250 +12,269 @@ GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see . */ -/** - * Die Uhr. - * @param clockarea Das jQuery-gewrappte HTML-Element, auf dem die Uhr angezeigt werden soll. - * @param themeElement Das HTML-Stylesheet-Tag, das das Theme-CSS referenziert. - */ -//if (typeof Uhr === 'undefined') { -function Uhr(clockarea, settings) { - this.id = Uhr.id++; - this.timer = null; - this.currentTheme = null; - this.currentLayout = {}; - this.currentMinute = -1; - this.initHTMLElements(clockarea, settings || {}); -} -Uhr.id = 0; -Uhr.layouts = new Array(); -Uhr.register = function (locale, layout) { - Uhr.layouts[locale] = layout; -} -Uhr.prototype.toggle = function() { - if (this.isOn()) { - this.stop(); - } else { - this.start(); +(function($) { + "use strict"; + + if (window._uhr !== undefined) { + return; } -} -Uhr.prototype.start = function() { - if (!this.isOn()) { - var uhr = this; - this.timer = window.setInterval(function() {uhr.update();}, 1000); - this.update(); - jQuery.cookie('status' + this.id, 'on', {expires: 365, path: '/'}); - } -} -Uhr.prototype.stop = function() { - if (this.isOn()) { - window.clearInterval(this.timer); - this.timer = null; - this.update(); - jQuery.cookie('status' + this.id, 'off', {expires: 365, path: '/'}); - } -} -Uhr.prototype.isOn = function() { - return this.timer != null; -} -Uhr.prototype.setLayout = function(locale) { - var newLayout = Uhr.layouts[locale]; - if (newLayout !== undefined && newLayout != this.currentLayout) { - this.currentLayout = newLayout; - var renderer = new UhrRenderer(this.currentLayout, this.letterarea); - renderer.render(this); - jQuery.cookie('layout' + this.id, locale, {expires: 365, path: '/'}); - } -} -Uhr.prototype.setTheme = function(theme) { - if (theme != this.currentTheme) { - this.clockarea.removeClass(this.currentTheme); - this.toggleSwitch.removeClass(this.currentTheme); - this.clockarea.addClass(theme); - this.toggleSwitch.addClass(theme); - this.currentTheme = theme; - jQuery.cookie('theme' + this.id, theme, {expires: 365, path: '/'}); - } -} -Uhr.prototype.update = function() { - if (this.isOn()) { - var now = new Date(); - if (now.getMinutes() == this.currentMinute) { - return; + + window._uhr = { + id: 0, + languages: new Array() + }; + $.widget("fritteli.uhr", { + options: { + width: '100%', + status: 'on', + language: 'de_CH', + theme: 'black', + force: false + }, + start: function() { + if (!this._isOn()) { + var uhr = this; + this._timer = window.setInterval(function() { + uhr._update(); + }, 1000); + this._update(); + $.cookie('uhr-status' + this._id, 'on', {expires: 365, path: '/'}); + } else { + } + }, + stop: function() { + if(this._isOn()) { + window.clearInterval(this._timer); + this._timer = null; + this._update(); + $.cookie('uhr-status' + this._id, 'off', {expires: 365, path: '/'}); + } + }, + toggle: function() { + if(this._isOn()) { + this.stop(); + } else { + this.start(); + } + }, + language: function(languageKey) { + if (languageKey !== this.options.language) { + this.options.language = languageKey; + var renderer = new UhrRenderer(this._language(), this.element.find('.letterarea')); + var uhr = this; + renderer.render(this, function() { + uhr._currentMinute = -1; + uhr._update(); + }); + $.cookie('uhr-language' + this._id, languageKey, {expires: 365, path: '/'}); + this._update(); + } + }, + theme: function(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; + $.cookie('uhr-theme' + this._id, theme, {expires: 365, path: '/'}); + } + }, + time: function(time) { + this.options.time = time; + if (time == null) { + this._currentMinute = -1; + this._update(); + } else { + if (this._timer != null) { + window.clearInterval(this._timer); + } + var renderer = new UhrRenderer(this._language(), this.element.find('.letterarea')); + var uhr = this; + renderer.render(this, function() { + uhr._show(time); + }); + + } + }, + // private variables + _id: -1, + _timer: null, + _currentMinute: -1, + // private methods + _isOn: function() { + return this._timer !== null; + }, + _update: function() { + if (this._isOn()) { + var time = new Date(); + 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); + hour = this._normalizeHour(hour); + this._highlight('hour' + hour); + if (coarseMinute == 0) { + this._highlight('sharphour'); + } + }, + _language: function() { + return window._uhr.languages[this.options.language]; + }, + _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; + } + return hour; + }, + _getCoarseMinute: function(date) { + if (typeof this._language().getCoarseMinute === 'function') { + return this._language().getCoarseMinute(date); + } + var minutes = date.getMinutes(); + return minutes - this._getDotMinute(date); + }, + _getDotMinute: function(date) { + if (typeof this._language().getDotMinute === 'function') { + return this._language().getDotMinute(date); + } + var minutes = date.getMinutes(); + return minutes % 5; + }, + _normalizeHour: function(hour) { + if (hour > 12) { + hour %= 12; + } + if (hour == 0) { + return 12; + } + return hour; + }, + _create: function() { + this._id = window._uhr.id++; + this._setupHTML(); + this._wireFunctionality(); + if (this.options.time !== undefined) { + this.time(this.options.time); + } + }, + _setupHTML: function() { + var e = this.element; + // Base clock area + e.addClass('uhr'); + e.empty(); + e.append(''); + e.append(''); + e.append(''); + e.append(''); + e.append('
'); + e.append('
'); + e.css('width', this.options.width); + var realWidth = e.width() + e.width(realWidth); + e.height(realWidth); + e.css('font-size', (realWidth / 40) + 'px'); + + // on/off switch + var toggleSwitch = $('
'); + toggleSwitch.append(''); + toggleSwitch.append(''); + e.after(toggleSwitch); + + // language chooser + var languageChooser = $('') + for (var code in window._uhr.languages) { + if (window._uhr.languages.hasOwnProperty(code)) { + var language = window._uhr.languages[code]; + languageChooser.append(''); + } + } + e.after(languageChooser); + + // theme chooser + var themeChooser = $(''); + themeChooser.append(''); + themeChooser.append(''); + themeChooser.append(''); + themeChooser.append(''); + themeChooser.append(''); + e.after(themeChooser); + }, + _wireFunctionality: function() { + var e = this.element; + var uhr = this; + + // on/off switch + var toggleSwitch = $('#uhr-onoffswitch-checkbox' + this._id); + toggleSwitch.on('click', function() { + uhr.toggle(); + }); + 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') { + this.start(); + } else { + this.stop(); + } + + // language chooser + var languageChooser = $('#uhr-languagechooser' + this._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; + } + languageChooser.val(selectedLanguage); + this.options.language = ""; + this.language(selectedLanguage); + + // theme chooser + var themeChooser = $('#uhr-themechooser' + this._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; + } + themeChooser.val(selectedTheme); + this.options.theme = ""; + this.theme(selectedTheme); } - this.currentMinute = now.getMinutes(); - var dotMinute = this.getDotMinute(now); - var hour = this.getHour(now); - var coarseMinute = this.getCoarseMinute(now); - this.clear(); - this.highlight('on'); - for (var i = 1; i <= dotMinute; i++) { - this.highlight('dot' + i); - } - this.highlight('minute' + coarseMinute); - hour = this.normalizeHour(hour); - this.highlight('hour' + hour); - if (coarseMinute == 0) { - this.highlight('sharphour'); - } - } else { - this.clear(); - this.currentMinute = -1; - } -} -Uhr.prototype.clear = function() { - this.clockarea.find('.item').removeClass('active'); -} -Uhr.prototype.highlight = function(itemClass) { - this.clockarea.find('.item.' + itemClass).addClass('active'); -} -Uhr.prototype.getHour = function(date) { - if (typeof this.currentLayout.getHour === 'function') { - return this.currentLayout.getHour(date); - } - var hour = date.getHours(); - if (date.getMinutes() >= 25) { - return hour + 1; - } - return hour; -} -Uhr.prototype.getCoarseMinute = function(date) { - if (typeof this.currentLayout.getCoarseMinute === 'function') { - return this.currentLayout.getCoarseMinute(date); - } - var minutes = date.getMinutes(); - return minutes - this.getDotMinute(date); -} -Uhr.prototype.getDotMinute = function(date) { - if (typeof this.currentLayout.getDotMinute === 'function') { - return this.currentLayout.getDotMinute(date); - } - var minutes = date.getMinutes(); - return minutes % 5; -} -Uhr.prototype.normalizeHour = function(hour) { - if (hour > 12) { - hour %= 12; - } - if (hour == 0) { - return 12; - } - return hour; -} -Uhr.prototype.initHTMLElements = function(clockarea, presets) { - this.createHTMLElements(clockarea, presets.width); - var force = presets.force || false; - this.initToggleSwitch(presets.status, force); - this.initLayoutSwitch(presets.layout, force); - this.initThemeSwitch(presets.theme, force); -} -Uhr.prototype.createHTMLElements = function(clockarea, width) { - this.createClockarea(clockarea, width) - this.letterarea = this.clockarea.find('.letterarea'); - this.createToggleSwitch(); - this.createLayoutSwitch(); - this.createThemeSwitch(); -} -Uhr.prototype.createClockarea = function(clockarea, width) { - clockarea.addClass('uhr'); - clockarea.empty(); - clockarea.append(''); - clockarea.append(''); - clockarea.append(''); - clockarea.append(''); - clockarea.append('
'); - clockarea.append('
'); - if(width == undefined) { - width = '100%'; - } - clockarea.css('width', width); - var realWidth = clockarea.width() - clockarea.width(realWidth); - clockarea.height(realWidth); - clockarea.css('font-size', (realWidth / 40) + 'px'); - this.clockarea = clockarea -} -Uhr.prototype.createToggleSwitch = function() { - this.toggleSwitch = jQuery('
'); - var input = jQuery(''); - this.toggleSwitch.append(input); - this.toggleSwitch.append(''); - this.clockarea.after(this.toggleSwitch); -} -Uhr.prototype.createLayoutSwitch = function () { - this.layoutSwitch = jQuery('') - for (var code in Uhr.layouts) { - if (Uhr.layouts.hasOwnProperty(code)) { - var layout = Uhr.layouts[code]; - var option = jQuery('') - this.layoutSwitch.append(option); - } - } - this.clockarea.after(this.layoutSwitch); -} -Uhr.prototype.createThemeSwitch = function () { - this.themeSwitch = jQuery(''); - this.themeSwitch.append(''); - this.themeSwitch.append(''); - this.themeSwitch.append(''); - this.themeSwitch.append(''); - this.themeSwitch.append(''); - this.clockarea.after(this.themeSwitch); -} -Uhr.prototype.initToggleSwitch = function(defaultValue, overrideCookie) { - var input = jQuery('#onoffswitch' + this.id); - var uhr = this; - input.on('click', function() { - uhr.toggle(); }); - var status = jQuery.cookie('status' + this.id); - if (status == undefined || (overrideCookie && (defaultValue != undefined))) { - status = defaultValue; - } - if (status == undefined || status == 'undefined') { - status = 'on'; - } - if (status == 'on') { - this.start(); - input.prop('checked', true); - } else { - this.stop(); - input.prop('checked', false); - } -} -Uhr.prototype.initLayoutSwitch = function(defaultValue, overrideCookie) { - var uhr = this; - this.layoutSwitch.on('change', function() { - uhr.setLayout(this.value); - }); - var selectedLayout = jQuery.cookie('layout' + this.id); - if (selectedLayout == undefined || (overrideCookie && (defaultValue != undefined))) { - selectedLayout = defaultValue; - } - if (selectedLayout == undefined) { - // FIXME not nice, hardcoded default-value - selectedLayout = 'de_CH'; - } - this.layoutSwitch.val(selectedLayout); - this.setLayout(selectedLayout); -} -Uhr.prototype.initThemeSwitch = function(defaultValue, overrideCookie) { - var uhr = this; - this.themeSwitch.on('change', function() { - uhr.setTheme(this.value); - }); - var selectedTheme = jQuery.cookie('theme' + this.id); - if (selectedTheme == undefined || (overrideCookie && (defaultValue != undefined))) { - selectedTheme = defaultValue; - } - if (selectedTheme == undefined || selectedTheme == 'undefined') { - selectedTheme = 'black'; - } - this.themeSwitch.val(selectedTheme); - this.setTheme(selectedTheme); -} +})(jQuery); /** * Hilfsklasse zum Rendern der Uhr. @@ -266,7 +285,7 @@ function UhrRenderer(layout, renderarea) { this.layout = layout; this.renderarea = renderarea; } -UhrRenderer.prototype.render = function(uhr) { +UhrRenderer.prototype.render = function(uhr, beforeshow) { var renderer = this; this.renderarea.fadeOut('fast', function() { renderer.renderarea.empty(); @@ -279,12 +298,12 @@ UhrRenderer.prototype.render = function(uhr) { renderer.renderarea.append('
'); } } - uhr.currentMinute = -1; - uhr.update(); + if (typeof beforeshow === 'function') { + beforeshow(); + } renderer.renderarea.fadeIn('fast'); }); } - /** * Ein Buchstabe. Hilfsklasse für den Renderer und Inhalt der Layout-Arrays. * @param value Der Buchstabe, der Dargestellt werden soll. @@ -317,7 +336,7 @@ function l(letter, style) { * * @param letter string: Der Buchstabe, der angezeigt werden soll * @param hours... integer: Eine Aufzählung von Stundenwerten, zu welchen der Buchstabe als aktiv angezeigt werden soll - * @example h('Z', 2), 11 erzeugt den Buchstaben 'Z', der um 2:xx, 11:xx, 14:xx und 23:xx aktiv angezeigt wird + * @example h('Z', 2, 11) erzeugt den Buchstaben 'Z', der um 2:xx, 11:xx, 14:xx und 23:xx aktiv angezeigt wird */ function h(letter) { var style = ''; @@ -340,4 +359,3 @@ function m(letter) { } return l(letter, style); } -//}