the order in which JS and CSS files are included MATTERS! autodetection of

themes works, as a first draft.
This commit is contained in:
Manuel Friedli 2014-06-28 01:04:53 +02:00
parent 455068d069
commit 09a53b0883
3 changed files with 13 additions and 17 deletions

View file

@ -1,13 +1,10 @@
(function($) { (function($) {
'use strict'; 'use strict';
$(document).ready(function() {
console.log('detector');
var uhrCSSs = $('link[rel=stylesheet][href^=uhr-]'); var uhrCSSs = $('link[rel=stylesheet][href^=uhr-]');
var matcher = /^(.*)uhr-(.+).css$/;
for (var i = 0; i < uhrCSSs.length; i++) { for (var i = 0; i < uhrCSSs.length; i++) {
var name = $(uhrCSSs[i]).attr('href'); var name = $(uhrCSSs[i]).attr('href');
var matcher = /^(.*)uhr-(.+).css$/;
var code = name.match(matcher)[2]; var code = name.match(matcher)[2];
console.log(name+": "+code); window._uhr.themes.push(code);
} }
});
})(jQuery); })(jQuery);

View file

@ -16,11 +16,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<html manifest="manifest.appcache"> <html manifest="manifest.appcache">
<head> <head>
<title>Bärneruhr - Die Zeit im Wort</title> <title>Bärneruhr - Die Zeit im Wort</title>
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="jquery-cookie-1.4.0.js"></script>
<script type="text/javascript" src="uhr.js"></script>
<script type="text/javascript" src="detector.js"></script>
<link rel="stylesheet" type="text/css" href="uhr.css" /> <link rel="stylesheet" type="text/css" href="uhr.css" />
<link rel="stylesheet" type="text/css" href="uhr-black.css" /> <link rel="stylesheet" type="text/css" href="uhr-black.css" />
<link rel="stylesheet" type="text/css" href="uhr-blue.css" /> <link rel="stylesheet" type="text/css" href="uhr-blue.css" />
@ -28,6 +23,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<link rel="stylesheet" type="text/css" href="uhr-red.css" /> <link rel="stylesheet" type="text/css" href="uhr-red.css" />
<link rel="stylesheet" type="text/css" href="uhr-white.css" /> <link rel="stylesheet" type="text/css" href="uhr-white.css" />
<link rel="stylesheet" type="text/css" href="uhr-pink.css" /> <link rel="stylesheet" type="text/css" href="uhr-pink.css" />
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="jquery-cookie-1.4.0.js"></script>
<script type="text/javascript" src="uhr.js"></script>
<script type="text/javascript" src="detector.js"></script>
<link rel="shortcut icon" type="image/png" href="favicon.png" /> <link rel="shortcut icon" type="image/png" href="favicon.png" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" /> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />

13
uhr.js
View file

@ -21,7 +21,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
window._uhr = { window._uhr = {
id: 0, id: 0,
languages: [] languages: [],
themes: []
}; };
$.widget("fritteli.uhr", { $.widget("fritteli.uhr", {
options: { options: {
@ -222,12 +223,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
// theme chooser // theme chooser
var themeChooser = $('<select id="uhr-themechooser' + this._id + '"></select>'); var themeChooser = $('<select id="uhr-themechooser' + this._id + '"></select>');
themeChooser.append('<option value="black">Schwarz</option>'); for (var i = 0; i < window._uhr.themes.length; i++) {
themeChooser.append('<option value="red">Rot</option>'); var theme = window._uhr.themes[i];
themeChooser.append('<option value="blue">Blau</option>'); themeChooser.append('<option value="' + theme + '">' + theme + '</option>');
themeChooser.append('<option value="green">Grün</option>'); }
themeChooser.append('<option value="white">Weiss</option>');
themeChooser.append('<option value="pink">Pink</option>');
e.after(themeChooser); e.after(themeChooser);
} }
}, },