diff --git a/.jshintrc b/.jshintrc
new file mode 100644
index 0000000..21f287e
--- /dev/null
+++ b/.jshintrc
@@ -0,0 +1,72 @@
+{
+ // Settings
+ "passfail" : false, // Stop on first error.
+ "maxerr" : 100, // Maximum error before stopping.
+
+
+ // Predefined globals whom JSHint will ignore.
+ "browser" : true, // Standard browser globals e.g. `window`, `document`.
+
+ "node" : false,
+ "rhino" : false,
+ "couch" : false,
+ "wsh" : true, // Windows Scripting Host.
+
+ "jquery" : true,
+ "ender" : true,
+ "prototypejs" : false,
+ "mootools" : false,
+ "dojo" : false,
+
+ "predef" : [
+ "suite",
+ "test"
+ ],
+
+
+ // Development.
+ "debug" : false, // Allow debugger statements e.g. browser breakpoints.
+ "devel" : true, // Allow developments statements e.g. `console.log();`.
+
+
+ // ECMAScript 5.
+ "es5" : true, // Allow ECMAScript 5 syntax.
+ "strict" : true, // Require `use strict` pragma in every file.
+ "globalstrict" : false, // Allow global "use strict" (also enables 'strict').
+
+
+ // The Good Parts.
+ "asi" : false, // Tolerate Automatic Semicolon Insertion (no semicolons).
+ "laxbreak" : true, // Tolerate unsafe line breaks e.g. `return [\n] x` without semicolons.
+ "bitwise" : true, // Prohibit bitwise operators (&, |, ^, etc.).
+ "boss" : false, // Tolerate assignments inside if, for & while. Usually conditions & loops are for comparison, not assignments.
+ "curly" : true, // Require {} for every new block or scope.
+ "eqeqeq" : true, // Require triple equals i.e. `===`.
+ "eqnull" : false, // Tolerate use of `== null`.
+ "evil" : false, // Tolerate use of `eval`.
+ "expr" : false, // Tolerate `ExpressionStatement` as Programs.
+ "forin" : false, // Tolerate `for in` loops without `hasOwnPrototype`.
+ "immed" : true, // Require immediate invocations to be wrapped in parens e.g. `( function(){}() );`
+ "latedef" : true, // Prohipit variable use before definition.
+ "loopfunc" : false, // Allow functions to be defined within loops.
+ "noarg" : true, // Prohibit use of `arguments.caller` and `arguments.callee`.
+ "regexp" : true, // Prohibit `.` and `[^...]` in regular expressions.
+ "regexdash" : false, // Tolerate unescaped last dash i.e. `[-...]`.
+ "scripturl" : true, // Tolerate script-targeted URLs.
+ "shadow" : false, // Allows re-define variables later in code e.g. `var x=1; x=2;`.
+ "supernew" : false, // Tolerate `new function () { ... };` and `new Object;`.
+ "undef" : true, // Require all non-global variables be declared before they are used.
+
+
+ // Personal styling preferences.
+ "newcap" : true, // Require capitalization of all constructor functions e.g. `new F()`.
+ "noempty" : true, // Prohibit use of empty blocks.
+ "nonew" : true, // Prohibit use of constructors for side-effects.
+ "nomen" : true, // Prohibit use of initial or trailing underbars in names.
+ "onevar" : false, // Allow only one `var` statement per function.
+ "plusplus" : false, // Prohibit use of `++` & `--`.
+ "sub" : false, // Tolerate all forms of subscript notation besides dot notation e.g. `dict['key']` instead of `dict.key`.
+ "trailing" : true, // Prohibit trailing whitespaces.
+ "white" : true, // Check against strict whitespace and indentation rules.
+ "indent" : 0 // Specify indentation spacing
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index af017ec..1c4d44f 100644
--- a/README.md
+++ b/README.md
@@ -9,10 +9,11 @@ Du willst Bärneruhr auf deiner Website verwenden? Dank des jQuery-Plugins geht
* uhr.css
* Binde zusätzlich mindestens eine der folgenden CSS-Dateien im HTML ein, je nach dem, welche Farben deine Uhr unterstützen soll:
* uhr-black.css
- * uhr-blue.css
- * uhr-green.css
- * uhr-red.css
* uhr-white.css
+ * uhr-red.css
+ * uhr-yellow.css
+ * uhr-green.css
+ * uhr-blue.css
* uhr-pink.css
Beim Einbinden muss das attribut `data-class` angegeben werden, welches die CSS-Klasse des Themes definiert. Optional kann mit `data-name` ein im Dropdown anzuzeigender Name angegeben werden. Beispiel:
@@ -25,7 +26,7 @@ Beim Einbinden muss das attribut `data-class` angegeben werden, welches die CSS-
* 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:
+* Binde mindestens eine der folgenden Javascript-Dateien im HTML nach uhr.js ein, je nach dem, welche Sprachen deine Uhr unterstützen soll:
* uhr-de_CH.js
* uhr-de_CH_genau.js
* uhr-de.js
@@ -33,7 +34,7 @@ Beim Einbinden muss das attribut `data-class` angegeben werden, welches die CSS-
* uhr-fr.js
* uhr-it.js
-`uhr-de_CH_genau.js` ist eine Variante von Berndeutsch, bei der zur vollen Stunde zusätlich das Wort "genau" angezeigt wird (also z.B. "ES ISCH GENAU DRÜ").
+`uhr-de_CH_genau.js` ist eine Variante von Berndeutsch, bei der zur vollen Stunde zusätlich das Wort "genau" angezeigt wird (also z.B. um 15:00 Uhr "ES ISCH GENAU DRÜ").
2. Uhr-Element im HTML-Dokument einfügen
----------------------------------------
@@ -55,6 +56,8 @@ Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst:
* Die Uhr ist eingeschaltet
* Die Bedienelemente werden angezeigt
+Mit den Bedienelementen kannst du die Uhr ein- und ausschalten sowie Sprache und Farbe wechseln.
+
Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt.
Es kann natürlich auch eine Collection von Elementen übergeben werden. Mit
@@ -69,8 +72,8 @@ 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)
+ theme: 'black', // 'black' (default), 'white', 'red', 'yellow', 'green', 'blue' oder 'pink' (je nach eingebundenen Theme-Stylesheets)
+ language: 'de_CH', // 'de_CH' (default), 'de_CH_genau', 'de', 'en', 'fr' oder 'it' (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
@@ -80,7 +83,7 @@ Der uhr()-Methode kann ein Options-Objekt mitgegeben werden:
5. Sonderfunktionen
-------------------
-Es gibt noch einen zusätzlichen Konfigurationsparameter. Mit
+Es gibt noch einen zusätzlichen Konfigurationsparameter. Mittels
{
time: new Date()
@@ -95,15 +98,15 @@ 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
+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
+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
+You should have received a copy of the GNU General Public License
along with this program. If not, see .
diff --git a/uhr-black.css b/css/uhr-black.css
similarity index 100%
rename from uhr-black.css
rename to css/uhr-black.css
diff --git a/uhr-blue.css b/css/uhr-blue.css
similarity index 100%
rename from uhr-blue.css
rename to css/uhr-blue.css
diff --git a/uhr-green.css b/css/uhr-green.css
similarity index 100%
rename from uhr-green.css
rename to css/uhr-green.css
diff --git a/uhr-pink.css b/css/uhr-pink.css
similarity index 100%
rename from uhr-pink.css
rename to css/uhr-pink.css
diff --git a/uhr-red.css b/css/uhr-red.css
similarity index 100%
rename from uhr-red.css
rename to css/uhr-red.css
diff --git a/uhr-white.css b/css/uhr-white.css
similarity index 100%
rename from uhr-white.css
rename to css/uhr-white.css
diff --git a/uhr-yellow.css b/css/uhr-yellow.css
similarity index 100%
rename from uhr-yellow.css
rename to css/uhr-yellow.css
diff --git a/uhr.css b/css/uhr.css
similarity index 77%
rename from uhr.css
rename to css/uhr.css
index 45c84e4..f2e60ed 100644
--- a/uhr.css
+++ b/css/uhr.css
@@ -14,7 +14,7 @@ along with this program. If not, see .
*/
@font-face {
font-family: 'Uhrenfont';
- src: url('uhr.woff') format('woff');
+ src: url('../resources/uhr.woff') format('woff');
}
body {
font-family: 'Uhrenfont', sans-serif;
@@ -164,7 +164,54 @@ body {
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
- right: 0px;
+ right: 0;
+}
+
+a.uhr-configlink {
+ cursor: pointer;
+ background: url("../resources/settings.png") no-repeat;
+ width: 24px;
+ height: 24px;
+ display: inline-block;
+ margin: 2px;
+}
+.uhr-controlpanel {
+ background-color: rgba(0,0,0,0.5);
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+}
+@media (max-width: 400px) {
+ .uhr-controlpanel .content {
+ height: 100%;
+ }
+}
+@media (min-width: 401px) {
+ .uhr-controlpanel .content {
+ margin-left: auto;
+ margin-right: auto;
+ width: 10em;
+ top : 1em;
+ border-radius: 0.5em;
+ box-shadow: 0 0 1em black;
+ }
+}
+.uhr-controlpanel .content {
+ background-color: #fff;
+ padding: 2em;
+ position: relative;
+}
+a.uhr-closecontrolpanel {
+ cursor: pointer;
+ display: inline-block;
+ position: absolute;
+ right: 3px;
+ top: 3px;
+ width: 24px;
+ height: 24px;
+ background: url("../resources/close.png") no-repeat;
}
#disclaimer {
font-size: 0.5em;
diff --git a/index.html b/index.html
index 8762468..08049c1 100644
--- a/index.html
+++ b/index.html
@@ -21,31 +21,52 @@ along with this program. If not, see .
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+