ADD Ajout d'option de recherche (acteur, genre, realisateur, pays).

git-svn-id: svn://euphorik.ch/pompage@13 02bbb61a-6d21-0410-aba0-cb053bdfd66a

diff --git a/css/yopyop.css b/css/yopyop.css
index 6f9e440..122c0d8 100644 (file)
--- a/css/yopyop.css
+++ b/css/yopyop.css
@@ -68,39 +68,55 @@ div.entete img {
 \r
 div.entete h1 {\r
        float: left;     \r
-   margin-top: 10px;\r
+   margin-top: 8px;\r
 }\r
 \r
-div.pied {\r
-   position: fixed;\r
-   bottom: 0px;\r
-   height: 50px;\r
-   width: 90%;\r
-   background-image: url(../img/collines.png)\r
-}\r
-\r
-div form {\r
-       float: right;\r
+div.entete form {\r
+   float: right;\r
    padding-right: 10px;\r
    padding-top: 5px;\r
+   margin-right: 30px;\r
 }\r
 \r
-div form input {\r
+div.entete form input {\r
    font-size: 16pt;\r
    background-color: #B1F1A9;\r
+   margin: 0px;\r
+   padding: 0px;\r
 }\r
 \r
-div form button {\r
+div.entete form button {\r
    position: relative;\r
-   top: -5px;\r
    height: 25px;\r
    width: 25px;\r
-   margin: 2px;\r
-   background-color: #B1F1A9;\r
    border: 0px;\r
+   background-color: #B1F1A9;\r
    background-image: url(../img/clear.png);\r
    background-position: center;\r
    background-repeat: no-repeat;\r
+   vertical-align: top;\r
+}\r
+\r
+div.entete form p {\r
+       color: black;\r
+       font-size: 7pt;\r
+       margin-top: 1px;\r
+}\r
+\r
+div.entete form p label {\r
+       margin-right: 4px;\r
+}\r
+\r
+div.entete form input[type='checkbox'] {\r
+       border:2px solid red;\r
+}\r
+\r
+div.pied {\r
+   position: fixed;\r
+   bottom: 0px;\r
+   height: 50px;\r
+   width: 90%;\r
+   background-image: url(../img/collines.png)\r
 }\r
 \r
 div.contenu {\r

diff --git a/js/yopyop.js b/js/yopyop.js
index 7232cc9..67417bd 100644 (file)
--- a/js/yopyop.js
+++ b/js/yopyop.js
@@ -4,8 +4,42 @@
   */\r
 \r
 /**\r
-  * Callback appelé lorsque un film est clické.\r
+  * Vire les espaces aux extremités d'une chaine.\r
+  * s [String] : une chaine\r
+  */\r
+function trim(s)\r
+{\r
+       return rtrim(ltrim(s));\r
+}\r
+\r
+/**\r
+  * Vire les espaces au début d'une chaine.\r
+  * s [String] : une chaine\r
+  */\r
+function ltrim(s)\r
+{\r
+       var l=0;\r
+       while(l < s.length && s[l] == ' ')\r
+       {       l++; }\r
+       return s.substring(l, s.length);\r
+}\r
+\r
+/**\r
+  * Vire les espaces à la fin d'une chaine.\r
+  * s [String] : une chaine\r
+  */\r
+function rtrim(s)\r
+{\r
+       var r=s.length -1;\r
+       while(r > 0 && s[r] == ' ')\r
+       {       r-=1;   }\r
+       return s.substring(0, r+1);\r
+}\r
+\r
+/**\r
+  * Callback appelé lorsque un film est cliqué.\r
   * Affiche ou cache les informations détaillés pour ce film.\r
+  * id [int] : l'identificateur du film\r
   */\r
 function detailFilm(id)\r
 {\r
@@ -20,31 +54,78 @@ function detailFilm(id)
 \r
 /**\r
   * Effectue une recherche, n'affiche que les films qui contiennent le motif recherché.\r
+  * Recherche dans le titre, le realisateur, les acteurs, les genres et les pays en fonction des checkbox respectives.\r
   */\r
 function doRecherche()\r
 {\r
+   var afficherTout = false;\r
+   // si aucun choix n'est fait pour la recherche on affiche tout\r
+   if (!document.getElementById("checkRechercheTitre").checked \r
+      && !document.getElementById("checkRechercheGenres").checked\r
+      && !document.getElementById("checkRechercheRealisateurs").checked\r
+      && !document.getElementById("checkRechercheActeurs").checked\r
+      && !document.getElementById("checkRecherchePays").checked)\r
+      afficherTout = true;\r
+\r
    var motif = document.getElementById("recherche").value\r
    var rechercheRegExp = new RegExp(".*" + motif + ".*", "i")\r
-\r
+   \r
    var liste = document.getElementById("liste")\r
    var lignes = liste.childNodes\r
    for(i = 1; i < lignes.length; i += 2)\r
    {\r
       var titre = lignes[i].firstChild.innerHTML\r
-      if (rechercheRegExp.exec(titre) == null)      \r
+      var tableDetails = lignes[i+1].firstChild.firstChild.childNodes\r
+      var genres = tableDetails[0].firstChild.nextSibling.textContent\r
+      var realisateurs = tableDetails[1].firstChild.nextSibling.textContent\r
+      var acteurs = tableDetails[2].firstChild.nextSibling.textContent\r
+      var pays = tableDetails[3].firstChild.nextSibling.textContent\r
+      if (\r
+         afficherTout ||\r
+         document.getElementById("checkRechercheTitre").checked && rechercheRegExp.exec(titre) != null\r
+         || document.getElementById("checkRechercheGenres").checked && rechercheRegExp.exec(genres) != null\r
+         || document.getElementById("checkRechercheRealisateurs").checked && rechercheRegExp.exec(realisateurs) != null\r
+         || document.getElementById("checkRechercheActeurs").checked && rechercheRegExp.exec(acteurs) != null\r
+         || document.getElementById("checkRecherchePays").checked && rechercheRegExp.exec(pays) != null)      \r
       {\r
-         lignes[i].style.display = "none"\r
-         lignes[i+1].firstChild.firstChild.style.display = "none"\r
+         lignes[i].style.display = "table-row"   \r
       }\r
       else\r
       {\r
-         lignes[i].style.display = "table-row"   \r
+         lignes[i].style.display = "none"\r
+         lignes[i+1].firstChild.firstChild.style.display = "none"\r
       }\r
    }\r
 }\r
 \r
+/**\r
+  * Initialise la recherche.\r
+  */\r
 function viderRecherche()\r
-{\r
+{   \r
+   document.getElementById("checkRechercheTitre").checked = true\r
+   document.getElementById("checkRechercheGenres").checked = true\r
+   document.getElementById("checkRechercheRealisateurs").checked = true\r
+   document.getElementById("checkRechercheActeurs").checked = true\r
+   document.getElementById("checkRecherchePays").checked = true\r
    document.getElementById("recherche").value = ""\r
    doRecherche()\r
+}\r
+\r
+/**\r
+  * Recherche d'un genre, pays, réalisateur, etc..\r
+  * texte [String] : une chaine quelconque à rechercher\r
+  * type [String] : dans quel champ porte la recherche. Valeurs possibles : 'Titre', 'Genres', 'Realisateurs', 'Acteurs', 'Pays'\r
+  */ \r
+function rechercheElement(texte, type)\r
+{\r
+   texte = trim(texte)\r
+   document.getElementById("checkRechercheTitre").checked = false\r
+   document.getElementById("checkRechercheGenres").checked = false\r
+   document.getElementById("checkRechercheRealisateurs").checked = false\r
+   document.getElementById("checkRechercheActeurs").checked = false\r
+   document.getElementById("checkRecherchePays").checked = false\r
+   document.getElementById("checkRecherche"+type).checked = true\r
+   document.getElementById("recherche").value = texte\r
+   doRecherche()\r
 }
\ No newline at end of file

diff --git a/xsl/yopyop.xsl b/xsl/yopyop.xsl
index 7e46785..11cc6c0 100644 (file)
--- a/xsl/yopyop.xsl
+++ b/xsl/yopyop.xsl
@@ -11,9 +11,18 @@
     <div class="entete">
      <h1>DivX - TV</h1>\r
      <img src="../img/logo.png" />\r
-     <form>\r
-      <input type="text" onkeyup="doRecherche()" id="recherche" />\r
-      <button onclick="viderRecherche()" ></button>\r
+     <form class="formulaireRecherche">\r
+      <p>\r
+       <input type="text" onkeyup="doRecherche()" id="recherche" />\r
+       <button onclick="viderRecherche()" ></button>\r
+      </p>\r
+      <p>\r
+       <input onclick="doRecherche()" id="checkRechercheTitre" type="checkbox" checked="checked" /><label for="checkRechercheTitre">titre</label>\r
+       <input onclick="doRecherche()" id="checkRechercheRealisateurs" type="checkbox" checked="checked" /><label for="checkRechercheRealisateurs">realisateurs</label>\r
+       <input onclick="doRecherche()" id="checkRechercheActeurs" type="checkbox" checked="checked" /><label for="checkRechercheActeurs">acteurs</label>\r
+       <input onclick="doRecherche()" id="checkRechercheGenres" type="checkbox" checked="checked" /><label for="checkRechercheGenres">genres</label>\r
+       <input onclick="doRecherche()" id="checkRecherchePays" type="checkbox" checked="checked" /><label for="checkRecherchePays">pays</label>\r
+      </p>\r
      </form>\r
     </div>\r
     <div class="contenu">
@@ -39,11 +48,26 @@
        <tr>\r
         <td colspan="5" class="detail">\r
          <table class="detail" id="detail{@id}">\r
-          <tr><td class="titreDetail">Genre<xsl:if test="count(genres/genre) > 1">s</xsl:if></td><td><xsl:for-each select="genres/genre"><xsl:value-of select="."/><xsl:if test="not(position() = last())">, </xsl:if></xsl:for-each></td></tr>\r
-          <tr><td class="titreDetail">Réalisateur<xsl:if test="count(realisateurs/realisateur) > 1">s</xsl:if></td><td><xsl:for-each select="realisateurs/realisateur"><xsl:value-of select="."/><xsl:if test="not(position() = last())">, </xsl:if></xsl:for-each></td></tr>\r
-          <tr><td class="titreDetail">Acteur<xsl:if test="count(acteurs/acteur) > 1">s</xsl:if></td><td><xsl:for-each select="acteurs/acteur"><xsl:value-of select="."/><xsl:if test="not(position() = last())">, </xsl:if></xsl:for-each></td></tr>\r
-          <tr><td class="titreDetail">Pays</td><td><xsl:for-each select="lespays/pays"><xsl:value-of select="."/><xsl:if test="not(position() = last())">, </xsl:if></xsl:for-each></td></tr>\r
-          <tr><td class="titreDetail">Synopsis</td><td><xsl:value-of select="synopsis"/></td></tr>\r
+          <tr>\r
+           <td class="titreDetail">Genre<xsl:if test="count(genres/genre) > 1">s</xsl:if></td>\r
+           <td><xsl:for-each select="genres/genre"><a onclick="rechercheElement('{.}', 'Genres')"><xsl:value-of select="."/></a><xsl:if test="not(position() = last())">, </xsl:if></xsl:for-each></td>\r
+          </tr>\r
+          <tr>\r
+           <td class="titreDetail">Réalisateur<xsl:if test="count(realisateurs/realisateur) > 1">s</xsl:if></td>\r
+           <td><xsl:for-each select="realisateurs/realisateur"><a onclick="rechercheElement('{.}', 'Realisateurs')"><xsl:value-of select="."/></a><xsl:if test="not(position() = last())">, </xsl:if></xsl:for-each></td>\r
+          </tr>\r
+          <tr>\r
+           <td class="titreDetail">Acteur<xsl:if test="count(acteurs/acteur) > 1">s</xsl:if></td>\r
+           <td><xsl:for-each select="acteurs/acteur"><a onclick="rechercheElement('{.}', 'Acteurs')"><xsl:value-of select="."/></a><xsl:if test="not(position() = last())">, </xsl:if></xsl:for-each></td>\r
+          </tr>\r
+          <tr>\r
+           <td class="titreDetail">Pays</td>\r
+           <td><xsl:for-each select="lespays/pays"><a onclick="rechercheElement('{.}', 'Pays')"><xsl:value-of select="."/></a><xsl:if test="not(position() = last())">, </xsl:if></xsl:for-each></td>\r
+          </tr>\r
+          <tr>\r
+           <td class="titreDetail">Synopsis</td>\r
+           <td><xsl:value-of select="synopsis"/></td>\r
+          </tr>\r
          </table>\r
         </td>\r
        </tr>