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

use data-class and data-name attributes on stylesheets to define 

styleclass and pretty-name of themes
This commit is contained in:
Manuel Friedli 2014-06-28 10:54:28 +02:00
parent a4a440c8f0
commit 1bc60d7a1b
2 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -22,12 +22,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<meta name="apple-mobile-web-app-title" content="Bärneruhr" />
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1" />
<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-blue.css" />
<link rel="stylesheet" type="text/css" href="uhr-green.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-pink.css" />
<link rel="stylesheet" type="text/css" href="uhr-black.css" data-class="black" data-name="Schwarz" />
<link rel="stylesheet" type="text/css" href="uhr-blue.css" data-class="blue" data-name="Blau" />
<link rel="stylesheet" type="text/css" href="uhr-green.css" data-class="green" data-name="Grün" />
<link rel="stylesheet" type="text/css" href="uhr-red.css" data-class="red" data-name="Rot" />
<link rel="stylesheet" type="text/css" href="uhr-white.css" data-class="white" data-name="Weiss" />
<link rel="stylesheet" type="text/css" href="uhr-pink.css" data-class="pink" data-name="Pink" />
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>

19
uhr.js
View File

@ -25,12 +25,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
themes: []
};
// auto-detect themes
var uhrCSSs = $('head link[rel=stylesheet][href^=uhr-]');
var matcher = /^(.*)uhr-(.+).css$/;
for (var i = 0; i < uhrCSSs.length; i++) {
var name = $(uhrCSSs[i]).attr('href');
var code = name.match(matcher)[2];
window._uhr.themes.push(code);
var styleSheets = $('head link[rel=stylesheet]');
for (var i = 0; i < styleSheets.length; i++) {
var styleSheet = $(styleSheets[i]);
var styleClass = styleSheet.attr('data-class');
if (styleClass !== undefined) {
var name = styleSheet.attr('data-name');
if (name === undefined) {
name = styleClass;
}
window._uhr.themes.push({'class': styleClass, 'name': name});
}
}
$.widget("fritteli.uhr", {
options: {
@ -233,7 +238,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
var themeChooser = $('<select id="uhr-themechooser' + this._id + '"></select>');
for (var i = 0; i < window._uhr.themes.length; i++) {
var theme = window._uhr.themes[i];
themeChooser.append('<option value="' + theme + '">' + theme + '</option>');
themeChooser.append('<option value="' + theme.class + '">' + theme.name + '</option>');
}
e.after(themeChooser);
}