3 files changed, 23 insertions(+), 19 deletions(-)

M assets/atom2html.xslt
M assets/script.js
M assets/style.css

@@ 119,7 119,7 @@
                 </a><br class='br'/>
                 <span class="categories">
                   <xsl:for-each select="a:category">
-                    <i><xsl:value-of select="@label"/></i>,
+                    <a onclick="toggleCategory(this)" class="category cat_{generate-id(key('CategorY',@term))}"><xsl:value-of select="@label"/></a>,
                   </xsl:for-each>
                   .
                 </span>


@@ 130,13 130,13 @@
 
         <h2 style="clear:left">Schlagworte</h2>
 
-        <ul id="categories">
+        <ul id="categories" class="categories">
           <!-- http://stackoverflow.com/a/16328207 -->
           <xsl:for-each select="a:entry/a:category[generate-id() = generate-id(key('CategorY',@term))]">
             <xsl:sort select="@label"/>
             <xsl:sort select="@term"/>
             <li id="{generate-id(key('CategorY',@term))}">
-              <a onclick="toggleCategory(this)" class="cat_{generate-id(key('CategorY',@term))}"><xsl:value-of select="@label"/></a><xsl:text> </xsl:text><xsl:value-of select="count(../../a:entry[a:category/@term = current()/@term])"/>
+              <a onclick="toggleCategory(this)" class="category cat_{generate-id(key('CategorY',@term))}"><xsl:value-of select="@label"/></a><xsl:text> </xsl:text><xsl:value-of select="count(../../a:entry[a:category/@term = current()/@term])"/>
             </li>
           </xsl:for-each>
         </ul>

@@ 2,17 2,21 @@
 var active = {};
 
 function toggleCategory(elem) {
-  var clz = '.cat_' + elem.parentNode.getAttribute('id');
-  if( active[clz] ) {
-    $(clz).removeClass('active');
-    delete active[clz];
-  } else {
-    $(clz).addClass('active');
-    active[clz] = true;
-  }
-  if( 0 == Object.keys(active).length ) {
-    $('#photos').removeClass('active');
-  } else {
-    $('#photos').addClass('active');
+  var m = elem.getAttribute('class').match(/cat_[^ ]+/); 
+  if( m ) {
+    var clz = '.' + m[0];
+    console.log(clz);
+    if( active[clz] ) {
+      $(clz).removeClass('active');
+      delete active[clz];
+    } else {
+      $(clz).addClass('active');
+      active[clz] = true;
+    }
+    if( 0 == Object.keys(active).length ) {
+      $('#photos').removeClass('active');
+    } else {
+      $('#photos').addClass('active');
+    }
   }
 }

@@ 64,13 64,13 @@ br { display:none; }
 br.br { display:inline; }
 
 
-#categories a {
-  text-decoration: underline;
+.categories a {
+  font-style: italic;
 }
-#categories a:hover {
+.categories a:hover {
   cursor: pointer;
 }
-#categories a.active {
+.categories a.active {
   color: orange;
   font-weight: bold;
 }