From: pifou <pifou@02bbb61a-6d21-0410-aba0-cb053bdfd66a>
Date: Wed, 13 Jun 2007 13:29:30 +0000 (+0000)
Subject: ADD Ajout d'option de recherche (acteur, genre, realisateur, pays).
X-Git-Url: http://git.euphorik.ch/index.cgi?a=commitdiff_plain;h=5994f8f0dab3e0f66bd8107536e9cbccd208be40;p=pompage.git

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
--- a/css/yopyop.css
+++ b/css/yopyop.css
@@ -68,39 +68,55 @@ div.entete img {
 
 div.entete h1 {
 	float: left;     
-   margin-top: 10px;
+   margin-top: 8px;
 }
 
-div.pied {
-   position: fixed;
-   bottom: 0px;
-   height: 50px;
-   width: 90%;
-   background-image: url(../img/collines.png)
-}
-
-div form {
-	float: right;
+div.entete form {
+   float: right;
    padding-right: 10px;
    padding-top: 5px;
+   margin-right: 30px;
 }
 
-div form input {
+div.entete form input {
    font-size: 16pt;
    background-color: #B1F1A9;
+   margin: 0px;
+   padding: 0px;
 }
 
-div form button {
+div.entete form button {
    position: relative;
-   top: -5px;
    height: 25px;
    width: 25px;
-   margin: 2px;
-   background-color: #B1F1A9;
    border: 0px;
+   background-color: #B1F1A9;
    background-image: url(../img/clear.png);
    background-position: center;
    background-repeat: no-repeat;
+   vertical-align: top;
+}
+
+div.entete form p {
+	color: black;
+	font-size: 7pt;
+	margin-top: 1px;
+}
+
+div.entete form p label {
+	margin-right: 4px;
+}
+
+div.entete form input[type='checkbox'] {
+	border:2px solid red;
+}
+
+div.pied {
+   position: fixed;
+   bottom: 0px;
+   height: 50px;
+   width: 90%;
+   background-image: url(../img/collines.png)
 }
 
 div.contenu {
diff --git a/js/yopyop.js b/js/yopyop.js
index 7232cc9..67417bd 100644
--- a/js/yopyop.js
+++ b/js/yopyop.js
@@ -4,8 +4,42 @@
   */
 
 /**
-  * Callback appelé lorsque un film est clické.
+  * Vire les espaces aux extremités d'une chaine.
+  * s [String] : une chaine
+  */
+function trim(s)
+{
+	return rtrim(ltrim(s));
+}
+
+/**
+  * Vire les espaces au début d'une chaine.
+  * s [String] : une chaine
+  */
+function ltrim(s)
+{
+	var l=0;
+	while(l < s.length && s[l] == ' ')
+	{	l++; }
+	return s.substring(l, s.length);
+}
+
+/**
+  * Vire les espaces à la fin d'une chaine.
+  * s [String] : une chaine
+  */
+function rtrim(s)
+{
+	var r=s.length -1;
+	while(r > 0 && s[r] == ' ')
+	{	r-=1;	}
+	return s.substring(0, r+1);
+}
+
+/**
+  * Callback appelé lorsque un film est cliqué.
   * Affiche ou cache les informations détaillés pour ce film.
+  * id [int] : l'identificateur du film
   */
 function detailFilm(id)
 {
@@ -20,31 +54,78 @@ function detailFilm(id)
 
 /**
   * Effectue une recherche, n'affiche que les films qui contiennent le motif recherché.
+  * Recherche dans le titre, le realisateur, les acteurs, les genres et les pays en fonction des checkbox respectives.
   */
 function doRecherche()
 {
+   var afficherTout = false;
+   // si aucun choix n'est fait pour la recherche on affiche tout
+   if (!document.getElementById("checkRechercheTitre").checked 
+      && !document.getElementById("checkRechercheGenres").checked
+      && !document.getElementById("checkRechercheRealisateurs").checked
+      && !document.getElementById("checkRechercheActeurs").checked
+      && !document.getElementById("checkRecherchePays").checked)
+      afficherTout = true;
+
    var motif = document.getElementById("recherche").value
    var rechercheRegExp = new RegExp(".*" + motif + ".*", "i")
-
+   
    var liste = document.getElementById("liste")
    var lignes = liste.childNodes
    for(i = 1; i < lignes.length; i += 2)
    {
       var titre = lignes[i].firstChild.innerHTML
-      if (rechercheRegExp.exec(titre) == null)      
+      var tableDetails = lignes[i+1].firstChild.firstChild.childNodes
+      var genres = tableDetails[0].firstChild.nextSibling.textContent
+      var realisateurs = tableDetails[1].firstChild.nextSibling.textContent
+      var acteurs = tableDetails[2].firstChild.nextSibling.textContent
+      var pays = tableDetails[3].firstChild.nextSibling.textContent
+      if (
+         afficherTout ||
+         document.getElementById("checkRechercheTitre").checked && rechercheRegExp.exec(titre) != null
+         || document.getElementById("checkRechercheGenres").checked && rechercheRegExp.exec(genres) != null
+         || document.getElementById("checkRechercheRealisateurs").checked && rechercheRegExp.exec(realisateurs) != null
+         || document.getElementById("checkRechercheActeurs").checked && rechercheRegExp.exec(acteurs) != null
+         || document.getElementById("checkRecherchePays").checked && rechercheRegExp.exec(pays) != null)      
       {
-         lignes[i].style.display = "none"
-         lignes[i+1].firstChild.firstChild.style.display = "none"
+         lignes[i].style.display = "table-row"   
       }
       else
       {
-         lignes[i].style.display = "table-row"   
+         lignes[i].style.display = "none"
+         lignes[i+1].firstChild.firstChild.style.display = "none"
       }
    }
 }
 
+/**
+  * Initialise la recherche.
+  */
 function viderRecherche()
-{
+{   
+   document.getElementById("checkRechercheTitre").checked = true
+   document.getElementById("checkRechercheGenres").checked = true
+   document.getElementById("checkRechercheRealisateurs").checked = true
+   document.getElementById("checkRechercheActeurs").checked = true
+   document.getElementById("checkRecherchePays").checked = true
    document.getElementById("recherche").value = ""
    doRecherche()
+}
+
+/**
+  * Recherche d'un genre, pays, réalisateur, etc..
+  * texte [String] : une chaine quelconque à rechercher
+  * type [String] : dans quel champ porte la recherche. Valeurs possibles : 'Titre', 'Genres', 'Realisateurs', 'Acteurs', 'Pays'
+  */ 
+function rechercheElement(texte, type)
+{
+   texte = trim(texte)
+   document.getElementById("checkRechercheTitre").checked = false
+   document.getElementById("checkRechercheGenres").checked = false
+   document.getElementById("checkRechercheRealisateurs").checked = false
+   document.getElementById("checkRechercheActeurs").checked = false
+   document.getElementById("checkRecherchePays").checked = false
+   document.getElementById("checkRecherche"+type).checked = true
+   document.getElementById("recherche").value = texte
+   doRecherche()
 }
\ No newline at end of file
diff --git a/xsl/yopyop.xsl b/xsl/yopyop.xsl
index 7e46785..11cc6c0 100644
--- a/xsl/yopyop.xsl
+++ b/xsl/yopyop.xsl
@@ -11,9 +11,18 @@
     <div class="entete">
      <h1>DivX - TV</h1>
      <img src="../img/logo.png" />
-     <form>
-      <input type="text" onkeyup="doRecherche()" id="recherche" />
-      <button onclick="viderRecherche()" ></button>
+     <form class="formulaireRecherche">
+      <p>
+       <input type="text" onkeyup="doRecherche()" id="recherche" />
+       <button onclick="viderRecherche()" ></button>
+      </p>
+      <p>
+       <input onclick="doRecherche()" id="checkRechercheTitre" type="checkbox" checked="checked" /><label for="checkRechercheTitre">titre</label>
+       <input onclick="doRecherche()" id="checkRechercheRealisateurs" type="checkbox" checked="checked" /><label for="checkRechercheRealisateurs">realisateurs</label>
+       <input onclick="doRecherche()" id="checkRechercheActeurs" type="checkbox" checked="checked" /><label for="checkRechercheActeurs">acteurs</label>
+       <input onclick="doRecherche()" id="checkRechercheGenres" type="checkbox" checked="checked" /><label for="checkRechercheGenres">genres</label>
+       <input onclick="doRecherche()" id="checkRecherchePays" type="checkbox" checked="checked" /><label for="checkRecherchePays">pays</label>
+      </p>
      </form>
     </div>
     <div class="contenu">
@@ -39,11 +48,26 @@
        <tr>
         <td colspan="5" class="detail">
          <table class="detail" id="detail{@id}">
-          <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>
-          <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>
-          <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>
-          <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>
-          <tr><td class="titreDetail">Synopsis</td><td><xsl:value-of select="synopsis"/></td></tr>
+          <tr>
+           <td class="titreDetail">Genre<xsl:if test="count(genres/genre) > 1">s</xsl:if></td>
+           <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>
+          </tr>
+          <tr>
+           <td class="titreDetail">Réalisateur<xsl:if test="count(realisateurs/realisateur) > 1">s</xsl:if></td>
+           <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>
+          </tr>
+          <tr>
+           <td class="titreDetail">Acteur<xsl:if test="count(acteurs/acteur) > 1">s</xsl:if></td>
+           <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>
+          </tr>
+          <tr>
+           <td class="titreDetail">Pays</td>
+           <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>
+          </tr>
+          <tr>
+           <td class="titreDetail">Synopsis</td>
+           <td><xsl:value-of select="synopsis"/></td>
+          </tr>
          </table>
         </td>
        </tr>