From 1bc60d7a1b250be86705d062b08d40a0fb61a98f Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Sat, 28 Jun 2014 10:54:28 +0200
Subject: [PATCH] use data-class and data-name attributes on stylesheets to
 define styleclass and pretty-name of themes

---
 index.html | 12 ++++++------
 uhr.js     | 19 ++++++++++++-------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 92f2665..8e8c9b7 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/uhr.js b/uhr.js
index a2f3110..1d00bbb 100644
--- a/uhr.js
+++ b/uhr.js
@@ -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);
 			}