Added a list with links to all the hymns with the same melody as the …

…searched hymn. Closes (#1) Some minor cleanup in search.js
joelabr · Mar 16, 2011 · 35142f6 · 35142f6
1 parent 1bd143e
commit 35142f6
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 16 deletions.
diff --git a/js/en.js b/js/en.js
@@ -17,7 +17,7 @@ var translations =
   "showmelody":"Show/Hide note sheet",
   "playpause":"Play/Pause",
   "downloadhymn":"Download melody",
-  "samemelody":"Hymns with the same melody:",
+  "samemelody":"Show hymns with the same melody",
   "hits":"Hits:&#009;",
   "hymnnumber":"Hymnnumber:&#009;",
   "hymntitle":"Title:&#009;",

diff --git a/js/search.js b/js/search.js
@@ -33,13 +33,15 @@ app = new function Application() {
   }
 
   //Changes melody
-  this.changeMelody = function(id, melody_id) {
-    var audio = document.getElementById('audio_'+id)
+  this.changeMelody = function(id) {
+    var audio = document.getElementById(id + "_audio")
+    var melodyId = document.getElementById(id + "_melodySelector").value;
+
     if (supports_audio())
     {
         audio.pause()
         var ext = get_audio_extension();
-        audio.src= "hymns/" + ext + "/" + melody_id + "." + ext
+        audio.src= "hymns/" + ext + "/" + melodyId + "." + ext
         audio.load()
     }
 
@@ -50,11 +52,14 @@ app = new function Application() {
     {
       if (elements[i].innerHTML === "D")
       {
-        elements[i].href = "hymns/midi/" + melody_id + ".mid";
+        elements[i].href = "hymns/midi/" + melodyId + ".mid";
 
         found = true;
       }
     }
+
+    // Change list with links to hymns with the same melody
+    app.updateListOfHymnsWithSameMelody(id);
   }
 
   this.clearSearchResults = function()
@@ -222,6 +227,42 @@ app = new function Application() {
   this.showSearchTips = function() {
     document.getElementById('searchtips').style.display='block'
   }
+
+  // Shows all the hymns with the same melody as the hymn with the given ID
+  this.showHymnsWithMelody = function(id)
+  {
+    var showHymnsList = document.getElementById(id + "_showHymnsSameMelody");
+
+    app.updateListOfHymnsWithSameMelody(id);
+    showElement(id + "_hymnsWithSameMelodyList", true);
+
+    var anchorParent = showHymnsList.parentNode;
+    anchorParent.removeChild(showHymnsList);
+  }
+
+  // Updates list of hymns with same melody as the hymn with the given ID
+  this.updateListOfHymnsWithSameMelody = function(id)
+  {
+    var hymnList = document.getElementById(id + "_hymnsWithSameMelodyList");
+    var hymnNumbers = document.getElementById(id + "_melodySelector").value.split("_");
+
+    hymnList.innerHTML = "";
+
+    var length, currentHymn;
+    for (var i = 0, length = hymnNumbers.length; i < length; i++)
+    {
+      currentHymn = hymnNumbers[i].match(/\d+/);
+
+      var tempA = document.createElement("a");
+        tempA.href = "javascript: app.searchHymn('" + new Number(currentHymn) + "')";
+        tempA.innerHTML = new Number(currentHymn);
+
+      var tempLi = document.createElement("li");
+        tempLi.appendChild(tempA);
+
+      hymnList.appendChild(tempLi);
+    }
+  }
 }
 
 //Helper for converting a XML Node (lists)

diff --git a/js/sv.js b/js/sv.js
@@ -17,7 +17,7 @@ var translations =
   "showmelody":"Visa/Göm noter",
   "playpause":"Spela/Pausa",
   "downloadhymn":"Ladda hem melodi",
-  "samemelody":"Psalmer med samma melodi:",
+  "samemelody":"Visa psalmer med samma melodi",
   "hits":"Träffar:&#009;",
   "hymnnumber":"Psalm:&#009;",
   "hymntitle":"Titel:&#009;",

diff --git a/xml/hymn.xsl b/xml/hymn.xsl
@@ -35,14 +35,11 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
           <xsl:apply-templates select="hymn/authors/author" />
         </div>
         <xsl:if test="contains(hymn/melodies/melody[1]/file, '_')">
-          <p class="overline smallText">
-            <span data-trans="samemelody">Psalmer som kan sjungas med samma melodi: </span>
-            <ul class="inlineMenu">
-            <!-- <xsl:call-template name="splitMelody">
-              <xsl:with-param name="inputString" select="substring-before(hymn/melodies/melody[1]/file, '.ogg')" />
-            </xsl:call-template> -->
+          <div class="overline smallText">
+            <a id="{$hymnID}_showHymnsSameMelody" data-trans="samemelody" href="javascript: app.showHymnsWithMelody('{$hymnID}')">Visa psalmer som kan sjungas med samma melodi</a>
+            <ul id="{$hymnID}_hymnsWithSameMelodyList" class="hidden inlineMenu">
             </ul>
-          </p>
+          </div>
         </xsl:if>
         <!-- <div class="overline">
           <a href="javascript:void(0)" onclick="app.sendErrorReport('')">Skicka felrapport</a>
@@ -56,17 +53,17 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
       <a data-trans="title=showmelody" class="iconFont rightAlign" href="javascript: toggleVisibility('{$melodyID}');" title="">E</a>
     </xsl:if>
     <xsl:if test="string-length(melody/file) > 0">
-      <a data-trans="title=downloadhymn" class="iconFont rightAlign" href="hymns/midi/{melody/file}.mid" title="">D</a>
+      <a data-trans="title=downloadmelody" class="iconFont rightAlign" href="hymns/midi/{melody/file}.mid" title="">D</a>
       <a data-trans="title=playpause" class="iconFont rightAlign" href="javascript: app.playPauseMelody('{$hymnID}');" title="">A</a>
     </xsl:if>
     <div class="inline rightAlign">
       <span data-trans="melody"></span>
-      <select class="lessMarginTop hymnselect" onchange="javascript: app.changeMelody('{$hymnID}', this.value)">
+      <select id="{$hymnID}_melodySelector" class="lessMarginTop hymnselect" onchange="javascript: app.changeMelody('{$hymnID}')">
         <xsl:for-each select="melody">
           <option value="{file}"><xsl:value-of select="id" /></option>
         </xsl:for-each>
       </select>
-      <audio id="audio_{$hymnID}">
+      <audio id="{$hymnID}_audio">
         <source src="hymns/ogg/{melody/file}.ogg" />
         <source src="hymns/mp3/{melody/file}.mp3" />
         <span data-trans="oldbrowser" />