Guillaume Burel
12 years ago
commit
c33ae9e61b
Binary file not shown.
Binary file not shown.
@ -1 +1,24 @@ |
||||
<h3>balance</h3> |
||||
<h3>Balance</h3> |
||||
<h4>Equivalence de masses</h4> |
||||
|
||||
<p>Les différents poids se posent sur les deux plateaux afin de trouver l'équilibre de la balance. Une série de poids doivent être combinés dans le plateau de gauche pour retrouver la masse présente dans le plateau de droite.</p> |
||||
<p>Pour ajouter un poids sur le plateau de gauche, il faut faire un glisser-déposer du poids sur le plateau.</p> |
||||
|
||||
<p>Les hypothèses peuvent être saisies sur le tableau (en dehors de l'interactivité) ou testées directement sur la balance.</p> |
||||
|
||||
|
||||
<p>Le bouton “Recharger” retire les poids qui figurent sur le plateau de gauche.</p> |
||||
|
||||
<p>Le bouton "Modifier" vous permet de :</p> |
||||
<ul><li>choisir le thème de l’interactivité : tablette, ardoise ou aucun (par défaut tablette),</li> |
||||
déterminer la masse présente dans le plateau de droite,</li> |
||||
<li>déterminer le nombre de poids que vous voulez utiliser pour le plateau de gauche,</li> |
||||
<li>déterminer la masse des poids du plateau de gauche.</li></ul> |
||||
|
||||
<p>Pour déplacer un poids dans le plateau de droite, il faut faire un glisser-déposer du poids situé en haut à droite vers le plateau.</p> |
||||
|
||||
<p>Pour ajouter un poids, cliquez sur le bouton “+” et saisissez une masse.</p> |
||||
<p>Les poids utilisables pour le plateau de gauche possèdent par défaut un champ nombre. Cliquez sur la zone et saisissez les chiffres souhaités.</p> |
||||
|
||||
|
||||
<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p> |
||||
|
||||
@ -1 +1,15 @@ |
||||
<h3>Le disque</h3> |
||||
<h3>Cadran opératoire</h3> |
||||
<h4>Calcul mental</h4> |
||||
|
||||
<p>L’interactivité permet de travailler un nombre particulier (nombre du jour) avec des additions, soustractions, multiplications et divisions. Le but est d’effectuer l’opération de calcul mental en cliquant sur l'opérateur et le nombre pour ensuite vérifier le résultat en cliquant sur le point d'interrogation.</p> |
||||
|
||||
<p>Le bouton “Recharger” réinitialise la sélection effectuée.</p> |
||||
|
||||
<p>Le bouton "Modifier" vous permet de choisir :</p> |
||||
<ul><li>choisir le thème de l’interactivité : tablette, ardoise ou aucun (par défaut tablette),</li> |
||||
<li>modifier le nombre travaillé (au centre).</li></ul> |
||||
|
||||
<p>Pour modifier le nombre au centre, il suffit de cliquer dessus, de l'effacer et de le remplacer.</p> |
||||
|
||||
|
||||
<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p> |
||||
|
||||
@ -1 +1,16 @@ |
||||
<h3>Calcul rapide</h3> |
||||
<h3>Calcul</h3> |
||||
<h4>Calcul mental, opérations simples</h4> |
||||
|
||||
<p>L’interactivité permet d’additionner, de soustraire ou de multiplier des nombres. Le but est d’effectuer l’opération en inscrivant le résultat. Une fois la réponse saisie, le bouton “v” permet de vérifier la réponse. L’interactivité vérifie la réponse en passant l'opération en vert ou en rouge.</p> |
||||
<p>Une fois la série effectuée. L'interactivité affiche les calculs effectués.</p> |
||||
|
||||
<p>Le bouton “Recharger” génère automatiquement de nouveaux calculs.</p> |
||||
|
||||
<p>Le bouton "Modifier" vous permet de choisir :</p> |
||||
<ul><li>le thème de l’interactivité : tablette, ardoise ou aucun (par défaut tablette),</li> |
||||
<li>l’opération à effectuer (addition, soustraction, multiplication),</li> |
||||
<li>l’ordre de grandeur des nombres proposés,</li> |
||||
<li>le nombre d'éléments de l’opération (2 à 4),</li> |
||||
<li>le nombre d’opérations (1 à 5).</li></ul> |
||||
|
||||
<p>Le résultat des opérations n’est pas à inscrire dans le mode "Edition", il est calculé automatiquement par l‘interactivité.</p> |
||||
|
||||
@ -1,13 +1,16 @@ |
||||
<h3>Dés</h3> |
||||
<h4>Calcul oral ou jeux divers</h4> |
||||
<p>L'App dés vous permet d'afficher des faces de dés de manière aléatoire.</p> |
||||
<p>En cliquant sur la flèche ou "Lancer" vous afficher une nouvelle série de résultats. |
||||
Avec cette App, vous pouvez notamment travailler le calcul oral avec les résultats affichés ou en jouant "au compte est bon". |
||||
</p> |
||||
<p>Les calculs et le raisonnement peuvent être saisis sur le tableau (en dehors de l'App).</p> |
||||
|
||||
<p>Le bouton "éditer" vous permet de :</p> |
||||
<p>L'interactivité “Dés” vous permet d'afficher des faces de dés de manière aléatoire. </p> |
||||
|
||||
<p>En cliquant sur la flèche ou "Lancer" vous affichez une nouvelle série de résultats. </p> |
||||
|
||||
<p>Les calculs et le raisonnement peuvent être saisis sur le tableau (en dehors de l'interactivité). </p> |
||||
|
||||
<p>Le bouton “Modifier” vous permet :</p> |
||||
<ul> |
||||
<li>choisir le thème de l'interactivité : tablette, ardoise ou aucun (par défaut tablette),</li> |
||||
<li>déterminer le nombre de dés que vous voulez utiliser pour votre activité (2-6).</li> |
||||
</ul> |
||||
<li>de choisir le thème de l’interactivité : tablette, ardoise ou aucun (par défaut tablette), </li> |
||||
<li>de déterminer le nombre de dés que vous voulez utiliser pour votre activité (de 2 à 6). </li> |
||||
</ul> |
||||
|
||||
<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p> |
||||
@ -1,9 +1,14 @@ |
||||
<h3>Enveloppe</h3> |
||||
<h4>Représentation du nombre</h4> |
||||
<p>Glisser les trombones un à un dans l’enveloppe. Il suffit de cliquer sur l’enveloppe pour les faire réapparaître sur la page.</p> |
||||
<p>Le bouton "éditer" vous permet de :</p> |
||||
<h4>Représentation du nombre.</h4> |
||||
|
||||
<p>Glisser les trombones un à un dans l’enveloppe. Il suffit de cliquer sur l’enveloppe pour faire réapparaître les trombones sur la page. Ces derniers apparaissent dans une autre couleur. </p> |
||||
|
||||
<p>Le bouton "Recharger" replace tous les trombones sur la page.</p> |
||||
|
||||
<p>Le bouton “Modifier” vous permet : </p> |
||||
<ul> |
||||
<li>choisir le thème de l'interactivité : tablette, ardoise ou aucun (par défaut tablette),</li> |
||||
<li>modifier le nombre de trombone(s).</li> |
||||
<li>de choisir le thème de l’interactivité : tablette, ardoise ou aucun (par défaut tablette), </li> |
||||
<li>de déterminer le nombre de trombone(s) souhaités.</li> |
||||
</ul> |
||||
<p>Le bouton "Recharger" permet de recommencer le jeu</p> |
||||
|
||||
<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p> |
||||
@ -1,16 +1,27 @@ |
||||
<h3>Memory</h3> |
||||
<h4>Calcul mental, jeu d’association de cartes</h4> |
||||
<p>L’App Memory a pour but de faire des paires tout en mémorisant l’emplacement des différentes cartes.</p> |
||||
<p>Les cartes sont retournées face contre table de façon à ce que les images ne soient pas visibles. Le joueur découvre 2 cartes. Si elles sont identiques, elles restent découvertes. Si elles sont différentes, elles se retournent à nouveau.</p> |
||||
<p>La partie est terminée quand toutes les paires ont été trouvées.</p> |
||||
<h4>Jeu d’association de cartes.</h4> |
||||
|
||||
<p>Le bouton "éditer" vous permet de :</p> |
||||
<p>L’interactivité Memory a pour but de faire des paires tout en mémorisant l’emplacement des différentes cartes.</p> |
||||
|
||||
<p>Les cartes sont retournées face contre table, de manière à ce que les images ne soient pas visibles. Le joueur découvre 2 cartes. Si elles sont identiques, elles restent découvertes. Si elles sont différentes, elles se retournent à nouveau. La partie est terminée quand toutes les paires ont été trouvées.</p> |
||||
|
||||
<p>Les cartes sont disposées de manière aléatoire dans le mode jeu.</p> |
||||
L’interactivité est capable d’identifier les écritures mathématiques équivalentes (signes autorisés : “+”, “*”, “-”, “/” et les parenthèses). Evitez toutefois la division par 0.</p> |
||||
|
||||
<p>Le bouton “Recharger” réinitialise le memory.</p> |
||||
|
||||
|
||||
<p>Le bouton “Modifier” vous permet :</p> |
||||
<ul> |
||||
<li>modifier le thème de l'interactivité : tablette, ardoise ou aucun (par défaut tablette),</li> |
||||
<li>choisir le nombre de cartes (4, 6 ou 8 cartes),</li> |
||||
<li>sélectionner le délai d’affichage des cartes retournées,</li> |
||||
<li>éditer directement une carte.</li> |
||||
</ul> |
||||
<p>Les cartes possèdent par défaut un champ texte. Pour insérer du texte, cliquez sur cette dernière et saisissez le texte désiré. Pour ajouter une image depuis votre bibliothèque, cochez la case “utiliser une image” et utilisez le glisser-déposer. Il faut au préalable retourner la carte avec le bouton bleu.</p> |
||||
<p>Les cartes sont disposées de manière aléatoire dans le mode jeu.</p> |
||||
<p>L’App est capable d’identifier les écritures mathématiques équivalentes (signes autorisés : “+”, “*”, “-”, “/” et les parenthèses).</p> |
||||
<li>de choisir le thème de l’interactivité : tablette, ardoise ou aucun (par défaut tablette),</li> |
||||
<li>de choisir le nombre de cartes (4, 6 ou 8 cartes),</li> |
||||
<li>de sélectionner le délai d’affichage des cartes retournées,</li> |
||||
<li>d’éditer directement une carte (insérer une image ou modifier le texte).</li></ul> |
||||
|
||||
<p>Les paires de cartes sont en colonne (même chiffre indiqué sous chaque carte).</p> |
||||
<p>Les cartes possèdent par défaut un champ texte.</p> |
||||
<p>Pour insérer du texte, cliquez sur la carte et saisissez le texte désiré.</p> |
||||
<p>Pour utiliser des images, cochez la case “utiliser une image” et glissez-déposez sur la carte l’image depuis votre bibliothèque.</p> |
||||
<p>Le bouton bleu permet de simuler l’activité.</p> |
||||
|
||||
<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p> |
||||
|
||||
@ -1,21 +1,21 @@ |
||||
<h3>Morpion</h3> |
||||
<h3>Version calcul mental</h3> |
||||
<h4>Version calcul mental.</h4> |
||||
|
||||
<p> |
||||
Les deux joueurs choisissent, répondent et font valider tour à tour une opération dans une case.<br/> |
||||
Une fois la réponse saisie, la “coche” permet de vérifier la réponse. L’App corrige la réponse.<br/> |
||||
Si la réponse est correcte, la case est marquée d’une croix (X) ou d’un cercle (O) selon le joueur.<br/> |
||||
Si la réponse est fausse, l’autre joueur prend la main. |
||||
</p> |
||||
<p>Le nom du joueur figure à gauche : JOUEUR 1 (X), JOUEUR 2 (O).</p> |
||||
<p>Les joueurs choisissent, répondent et font valider tour à tour une opération dans une case.</p> |
||||
<p>Une fois la réponse saisie, le bouton “v” permet de vérifier la réponse. L’interactivité calcule l’opération et vérifie la réponse.</p> |
||||
|
||||
<p>Le premier joueur qui parvient à aligner trois de ses symboles (X ou O) gagne la partie.</p> |
||||
<p>Si la réponse est correcte, la case est marquée d’une croix (X) ou d’un cercle (O) selon le joueur.</p> |
||||
<p>Si la réponse est fausse, l’autre joueur prend la main.</p> |
||||
<p>Le nom du joueur figure à gauche : JOUEUR 1 (X), JOUEUR 2 (O) .</p> |
||||
<p>Le premier joueur qui réussit à aligner trois de ses symboles (X ou O) gagne la partie.</p> |
||||
|
||||
<p>Le bouton "éditer" vous permet de :</p> |
||||
<p>Le bouton “Recharger” permet de recommencer le jeu.</p> |
||||
|
||||
|
||||
<p>Le bouton “Modifier” vous permet :</p> |
||||
<ul> |
||||
<li>choisir le thème de l'interactivité : tablette, ardoise ou aucun (par défaut tablette),</li> |
||||
<li>modifier les calculs que vous voulez utiliser pour votre activité.</li> |
||||
</ul> |
||||
<p>L’App est capable d’identifier les écritures mathématiques (signes autorisés : “+”, “*”, “-”, “/” et les parenthèses).</p> |
||||
<li>de choisir le thème de l’interactivité : tablette, ardoise ou aucun (par défaut tablette),</li> |
||||
<li>modifier les calculs que vous voulez utiliser pour votre activité.</li></ul> |
||||
|
||||
<p>Le bouton "Recharger" permet de recommencer le jeu.</p> |
||||
<p>Insérez simplement le calcul dans chaque zone.<b>Le résultat des opérations n’est pas à inscrire dans le mode Edition, il est calculé automatiquement par l‘interactivité. </b></p> |
||||
<p>L’interactivité est capable d’identifier les écritures mathématiques (signes autorisés : “+”, “*”, “-”, “/” et les parenthèses).</p> |
||||
|
||||
@ -1,12 +1,15 @@ |
||||
<h3>Tableur</h3> |
||||
<h4>Calcul mental</h4> |
||||
|
||||
<p>L’App tableur permet de vérifier les propriétés des différentes opérations et de réviser les tables d’addition, de soustraction, de multiplication et de division. Cliquer dans la case voulue pour afficher ou masquer la réponse</p> |
||||
|
||||
<p>Le bouton "éditer" vous permet de choisir :</p> |
||||
<ul> |
||||
<li>le thème de l'interactivité : tablette, ardoise ou aucun (par défaut tablette),</li> |
||||
<li>l’opération,</li> |
||||
<li>le nombre de ligne et de colonnes (1-12),</li> |
||||
</ul> |
||||
<p>La flèche sur le tableau indique son sens de lecture.</p> |
||||
<h3>Tables</h3> |
||||
<h4>Calcul mental, propriétés des opérations</h4> |
||||
|
||||
<p>L’interactivité permet de réviser les tables d’addition, de soustraction, de multiplication et de division et de vérifier certaines propriétés.</p> |
||||
|
||||
<p>La flèche sur le tableau indique le sens de lecture.</p> |
||||
|
||||
<p>Le bouton “Recharger” réinitialise l’exercice.</p> |
||||
|
||||
<p>Le bouton "Modifier" vous permet de choisir : </p> |
||||
<ul><li>le thème de l’interactivité : tablette, ardoise ou aucun (par défaut tablette),</li> |
||||
<li>l’opération souhaitée : addition, soustraction, multiplication ou division,</li> |
||||
<li>le nombre de lignes et de colonnes (1 à 12).</li></ul> |
||||
|
||||
<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p> |
||||
|
||||
@ -1 +1,16 @@ |
||||
<h3>Le train</h3> |
||||
<h3>Train</h3> |
||||
<h4>Ranger par ordre croissant ou décroissant des nombres.</h4> |
||||
|
||||
<p>L’interactivité permet de travailler l'ordre croissant ou décroissant des nombres. Le but est de replacer les nombres dans le bon ordre en glissant-déposant les étiquettes au bon endroit.</p> |
||||
|
||||
<p>L'interactivité ne corrige pas le placement des nombres dans la série.</p> |
||||
|
||||
<p>Le bouton “Recharger” génère automatiquement de nouvelles étiquettes de nombres.</p> |
||||
|
||||
<p>Le bouton "Modifier" vous permet de choisir :</p> |
||||
<ul><li>le thème de l’interactivité : tablette, ardoise ou aucun (par défaut tablette),</li> |
||||
<li>le nombre d'éléments à ranger (2 à 6),</li> |
||||
<li>l’ordre de grandeur des nombres proposés,</li> |
||||
<li>l’ordre dans lequel classer les nombres (croissant ou décroissant).</li></ul> |
||||
|
||||
<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p> |
||||
|
||||
@ -1,18 +1,20 @@ |
||||
<h3>Boîte à transformation</h3 |
||||
<h4>Émettre des hypothèses</h4> |
||||
<h3>Boîte à transformation</h3> |
||||
<h4>Emettre des hypothèses</h4> |
||||
|
||||
<p>Les cartes passent à travers une boite et subissent une action. Le but est d’identifier l'opération effectuée par la boîte en utilisant un minimum de cartes.</p> |
||||
<p>Les cartes passent à travers une boîte et subissent une action. Le but est d’identifier l'opération effectuée par cette dernière en utilisant un minimum de cartes.</p> |
||||
<p>Pour faire passer une carte à travers la boîte, il suffit de cliquer sur celle-ci.</p> |
||||
|
||||
<p>Les hypothèses peuvent être saisies sur le tableau (en dehors de l'App).</p> |
||||
<p>Les hypothèses peuvent être saisies sur le tableau (en dehors de l'interactivité).</p> |
||||
|
||||
<p>Pour faire passer une carte à travers la boîte, il suffit de cliquer sur celle-ci.</p> |
||||
<p>Le bouton “Recharger” réinitialise l'exercice.</p> |
||||
|
||||
<p>Le bouton "Modifier" vous permet :</p> |
||||
<ul><li>de choisir le thème de l’interactivité : tablette, ardoise ou aucun (par défaut tablette),</li> |
||||
<li>de déterminer le nombre de cartes que vous voulez utiliser,</li> |
||||
<li>de déterminer les cartes avant et après transformation.</li></ul> |
||||
|
||||
<p>Le bouton "éditer" vous permet de :</p> |
||||
<ul> |
||||
<li>choisir le thème de l'interactivité : tablette, ardoise ou aucun (par défaut tablette),</li> |
||||
<li>déterminer le nombre de cartes que vous voulez utiliser,</li> |
||||
<li>paramétrer les cartes avant et après transformation.</li> |
||||
</ul> |
||||
<p>Les cartes possèdent par défaut un champ texte. Pour insérer du texte, cliquez sur cette dernière et saisissez le texte désiré. Pour ajouter une image depuis votre bibliothèque, cochez la case image et utilisez le glisser-déposer.</p> |
||||
<p>Les cartes possèdent par défaut un champ texte.</p> |
||||
<p>Pour insérer du texte, cliquez sur la carte et saisissez le texte souhaité.</p> |
||||
<p>Pour ajouter une image depuis votre bibliothèque, cochez la case image et utilisez le glisser-déposer depuis votre bibliothèque jusqu’à l’emplacement prévu.</p> |
||||
|
||||
<p>Le bouton "Recharger" replace les cartes sur la pile de gauche.</p> |
||||
<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p> |
||||
|
||||
@ -1,315 +1,315 @@ |
||||
html, body{ |
||||
width: 100%; |
||||
padding: 0; |
||||
height: auto; |
||||
background-color: white; |
||||
margin: 0; |
||||
} |
||||
|
||||
::-webkit-scrollbar { |
||||
width: 14px; |
||||
background-color:white; |
||||
} |
||||
|
||||
|
||||
::-webkit-scrollbar-thumb { |
||||
border-radius: 10px; |
||||
background-color:lightgray; |
||||
border: 2px solid gray; |
||||
} |
||||
|
||||
::-webkit-scrollbar-button:vertical:start{ |
||||
border-radius: 10px; |
||||
background-color:lightgray; |
||||
background-image: url(../images/trgUp.png); |
||||
background-size: 8px auto; |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
border: 2px solid gray; |
||||
} |
||||
|
||||
::-webkit-scrollbar-button:vertical:end{ |
||||
border-radius: 10px; |
||||
background-color:lightgray; |
||||
background-image: url(../images/trgDown.png); |
||||
background-size: 8px auto; |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
border: 2px solid gray; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
#disc_nav_cont{ |
||||
height: auto; |
||||
position: fixed; |
||||
left: 0; |
||||
bottom: 0; |
||||
width: 100%; |
||||
} |
||||
|
||||
.disclaimer{ |
||||
padding: 5px; |
||||
text-align: center; |
||||
background-color: #BBBBBB; |
||||
border-top: solid 4px #EEEEEE; |
||||
border-bottom: none; |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.resultFooter{ |
||||
width: 100%; |
||||
padding: 3px; |
||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||
font-weight: bold; |
||||
font-size: x-large; |
||||
text-align: center; |
||||
background-color: white; |
||||
} |
||||
|
||||
#searchResult { |
||||
overflow: hidden; |
||||
text-align: center; |
||||
margin-top: 50px; |
||||
margin-bottom: 50px; |
||||
} |
||||
|
||||
.search{ |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
padding: 5px; |
||||
background-color: #BBBBBB; |
||||
border-bottom: solid 4px #EEEEEE; |
||||
} |
||||
|
||||
.search, |
||||
.disclaimer { |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
} |
||||
|
||||
.searchInput{ |
||||
padding: 3px; |
||||
float: left; |
||||
width: 100%; |
||||
border-radius: 3px; |
||||
border-style: none; |
||||
height: 22px; |
||||
line-height: 18px; |
||||
vertical-align: middle; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
} |
||||
|
||||
.searchButton{ |
||||
background: url("../images/search_app.png") -38px -38px no-repeat; |
||||
width: 24px; |
||||
height: 24px; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
right: 30px; |
||||
top: 9px; |
||||
margin-left: -2px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.subSearch{ |
||||
margin: 0; |
||||
float: left; |
||||
} |
||||
|
||||
#subSearchInput{ |
||||
width: 100%; |
||||
float: left; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
padding: 5px; |
||||
padding-right: 26px; |
||||
} |
||||
|
||||
#subSearchFilter{ |
||||
width: 100%; |
||||
float: left; |
||||
display: none; |
||||
} |
||||
|
||||
.searchResult{ |
||||
width: 98%; |
||||
padding: 3px; |
||||
background-color:#123456; |
||||
} |
||||
|
||||
.imgContainer{ |
||||
display: inline-block; |
||||
padding: 3px; |
||||
margin: 3px; |
||||
text-align: center; |
||||
overflow: hidden; |
||||
font-size: small; |
||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||
border: 1px solid #666; |
||||
border-radius: 5px; |
||||
-webkit-box-shadow: #dadada -1px 0 4px; |
||||
-webkit-border-radius: 5px; |
||||
box-shadow: #666 -1px 0 4px; |
||||
vertical-align: top; |
||||
} |
||||
|
||||
|
||||
.filterContainer{ |
||||
float: left; |
||||
margin: 2px; |
||||
padding: 2px; |
||||
font-size: 14px; |
||||
|
||||
} |
||||
|
||||
.filterSelect{ |
||||
border-style:none; |
||||
-webkit-border-top-right-radius: 15px; |
||||
-webkit-border-bottom-right-radius: 15px; |
||||
-moz-border-radius-topright: 15px; |
||||
-moz-border-radius-bottomright: 15px; |
||||
border-top-right-radius: 15px; |
||||
margin-top: 2px; |
||||
width: 100%; |
||||
} |
||||
|
||||
span{ |
||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||
color: #666; |
||||
} |
||||
|
||||
[draggable] { |
||||
-webkit-user-select: none; |
||||
user-select: none; |
||||
} |
||||
|
||||
.toggleFilters{ |
||||
margin: 0; |
||||
padding: 0; |
||||
background-position: center; |
||||
background-image: url(../images/down.png); |
||||
position: absolute; |
||||
top: 11px; |
||||
right: 6px; |
||||
width: 20px; |
||||
height: 20px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.colors_line { |
||||
float: left; |
||||
margin: 4px; |
||||
margin-right: 0; |
||||
clear: left; |
||||
} |
||||
|
||||
.custom { |
||||
opacity: 0; |
||||
position: absolute; |
||||
left: -10000px; |
||||
} |
||||
|
||||
.filter_button.button.color { |
||||
display: inline-block; |
||||
width: 15px; |
||||
height: 15px; |
||||
border: 1px solid #EBEBEB; |
||||
padding: 0; |
||||
margin: 0; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
} |
||||
|
||||
.filter_button.button.color:hover { |
||||
border: 1px solid rgb(128,128,128); |
||||
cursor: pointer; |
||||
} |
||||
|
||||
input[type="radio"]:checked + .filter_button.button.color { |
||||
border: 1px solid rgb(255,255,255); |
||||
box-shadow: 0 0 0px 1px #000; |
||||
-webkit-box-shadow: 0 0 0px 1px #000; |
||||
} |
||||
|
||||
#allcolor { |
||||
background: white url('../images/search_app.png') -43px -144px no-repeat; |
||||
} |
||||
|
||||
#colored { |
||||
background: white url('../images/search_app.png') -43px -244px no-repeat; |
||||
} |
||||
|
||||
#grayed { |
||||
background: white url('../images/search_app.png') -45px -343px no-repeat; |
||||
} |
||||
|
||||
#black{ |
||||
background-color:#ffffff; |
||||
} |
||||
#blue{ |
||||
background-color:#0000FF; |
||||
} |
||||
#brown{ |
||||
background-color:rgba(139, 82, 16, 1); |
||||
} |
||||
|
||||
#gray{ |
||||
background-color:#999999; |
||||
} |
||||
|
||||
#green{ |
||||
background-color:#00CC00; |
||||
} |
||||
|
||||
#orange{ |
||||
background-color:#FB940B; |
||||
} |
||||
|
||||
#pink{ |
||||
background-color:#FF98BF; |
||||
} |
||||
|
||||
#purple{ |
||||
background-color:#762CA7; |
||||
} |
||||
|
||||
#red{ |
||||
background-color:#CC0000; |
||||
} |
||||
|
||||
#teal{ |
||||
background-color:#03C0C6; |
||||
} |
||||
|
||||
#white{ |
||||
background-color:#000000; |
||||
} |
||||
|
||||
#yellow{ |
||||
background-color:#FFFF00; |
||||
} |
||||
|
||||
.selectBox-dropdown, .selectBox-options li a { |
||||
line-height: 1.3 !important; |
||||
font-size: 13px; |
||||
} |
||||
|
||||
.pager_button { |
||||
padding: 3px 5px; |
||||
font-size: 16px; |
||||
color: black; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.pager_button.active { |
||||
border-radius: 3px; |
||||
-webkit-border-radius: 3px; |
||||
background-color: gray; |
||||
color: white; |
||||
} |
||||
html, body{ |
||||
width: 100%; |
||||
padding: 0; |
||||
height: auto; |
||||
background-color: white; |
||||
margin: 0; |
||||
} |
||||
|
||||
::-webkit-scrollbar { |
||||
width: 14px; |
||||
background-color:white; |
||||
} |
||||
|
||||
|
||||
::-webkit-scrollbar-thumb { |
||||
border-radius: 10px; |
||||
background-color:lightgray; |
||||
border: 2px solid gray; |
||||
} |
||||
|
||||
::-webkit-scrollbar-button:vertical:start{ |
||||
border-radius: 10px; |
||||
background-color:lightgray; |
||||
background-image: url(../images/trgUp.png); |
||||
background-size: 8px auto; |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
border: 2px solid gray; |
||||
} |
||||
|
||||
::-webkit-scrollbar-button:vertical:end{ |
||||
border-radius: 10px; |
||||
background-color:lightgray; |
||||
background-image: url(../images/trgDown.png); |
||||
background-size: 8px auto; |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
border: 2px solid gray; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
#disc_nav_cont{ |
||||
height: auto; |
||||
position: fixed; |
||||
left: 0; |
||||
bottom: 0; |
||||
width: 100%; |
||||
} |
||||
|
||||
.disclaimer{ |
||||
padding: 5px; |
||||
text-align: center; |
||||
background-color: #BBBBBB; |
||||
border-top: solid 4px #EEEEEE; |
||||
border-bottom: none; |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.resultFooter{ |
||||
width: 100%; |
||||
padding: 3px; |
||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||
font-weight: bold; |
||||
font-size: x-large; |
||||
text-align: center; |
||||
background-color: white; |
||||
} |
||||
|
||||
#searchResult { |
||||
overflow: hidden; |
||||
text-align: center; |
||||
margin-top: 50px; |
||||
margin-bottom: 85px; |
||||
} |
||||
|
||||
.search{ |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
padding: 5px; |
||||
background-color: #BBBBBB; |
||||
border-bottom: solid 4px #EEEEEE; |
||||
} |
||||
|
||||
.search, |
||||
.disclaimer { |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
} |
||||
|
||||
.searchInput{ |
||||
padding: 3px; |
||||
float: left; |
||||
width: 100%; |
||||
border-radius: 3px; |
||||
border-style: none; |
||||
height: 22px; |
||||
line-height: 18px; |
||||
vertical-align: middle; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
} |
||||
|
||||
.searchButton{ |
||||
background: url("../images/search_app.png") -38px -38px no-repeat; |
||||
width: 24px; |
||||
height: 24px; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
right: 30px; |
||||
top: 9px; |
||||
margin-left: -2px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.subSearch{ |
||||
margin: 0; |
||||
float: left; |
||||
} |
||||
|
||||
#subSearchInput{ |
||||
width: 100%; |
||||
float: left; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
padding: 5px; |
||||
padding-right: 26px; |
||||
} |
||||
|
||||
#subSearchFilter{ |
||||
width: 100%; |
||||
float: left; |
||||
display: none; |
||||
} |
||||
|
||||
.searchResult{ |
||||
width: 98%; |
||||
padding: 3px; |
||||
background-color:#123456; |
||||
} |
||||
|
||||
.imgContainer{ |
||||
display: inline-block; |
||||
padding: 3px; |
||||
margin: 3px; |
||||
text-align: center; |
||||
overflow: hidden; |
||||
font-size: small; |
||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||
border: 1px solid #666; |
||||
border-radius: 5px; |
||||
-webkit-box-shadow: #dadada -1px 0 4px; |
||||
-webkit-border-radius: 5px; |
||||
box-shadow: #666 -1px 0 4px; |
||||
vertical-align: top; |
||||
} |
||||
|
||||
|
||||
.filterContainer{ |
||||
float: left; |
||||
margin: 2px; |
||||
padding: 2px; |
||||
font-size: 14px; |
||||
|
||||
} |
||||
|
||||
.filterSelect{ |
||||
border-style:none; |
||||
-webkit-border-top-right-radius: 15px; |
||||
-webkit-border-bottom-right-radius: 15px; |
||||
-moz-border-radius-topright: 15px; |
||||
-moz-border-radius-bottomright: 15px; |
||||
border-top-right-radius: 15px; |
||||
margin-top: 2px; |
||||
width: 100%; |
||||
} |
||||
|
||||
span{ |
||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||
color: #666; |
||||
} |
||||
|
||||
[draggable] { |
||||
-webkit-user-select: none; |
||||
user-select: none; |
||||
} |
||||
|
||||
.toggleFilters{ |
||||
margin: 0; |
||||
padding: 0; |
||||
background-position: center; |
||||
background-image: url(../images/down.png); |
||||
position: absolute; |
||||
top: 11px; |
||||
right: 6px; |
||||
width: 20px; |
||||
height: 20px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.colors_line { |
||||
float: left; |
||||
margin: 4px; |
||||
margin-right: 0; |
||||
clear: left; |
||||
} |
||||
|
||||
.custom { |
||||
opacity: 0; |
||||
position: absolute; |
||||
left: -10000px; |
||||
} |
||||
|
||||
.filter_button.button.color { |
||||
display: inline-block; |
||||
width: 15px; |
||||
height: 15px; |
||||
border: 1px solid #EBEBEB; |
||||
padding: 0; |
||||
margin: 0; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
} |
||||
|
||||
.filter_button.button.color:hover { |
||||
border: 1px solid rgb(128,128,128); |
||||
cursor: pointer; |
||||
} |
||||
|
||||
input[type="radio"]:checked + .filter_button.button.color { |
||||
border: 1px solid rgb(255,255,255); |
||||
box-shadow: 0 0 0px 1px #000; |
||||
-webkit-box-shadow: 0 0 0px 1px #000; |
||||
} |
||||
|
||||
#allcolor { |
||||
background: white url('../images/search_app.png') -43px -144px no-repeat; |
||||
} |
||||
|
||||
#colored { |
||||
background: white url('../images/search_app.png') -43px -244px no-repeat; |
||||
} |
||||
|
||||
#grayed { |
||||
background: white url('../images/search_app.png') -45px -343px no-repeat; |
||||
} |
||||
|
||||
#black{ |
||||
background-color:#ffffff; |
||||
} |
||||
#blue{ |
||||
background-color:#0000FF; |
||||
} |
||||
#brown{ |
||||
background-color:rgba(139, 82, 16, 1); |
||||
} |
||||
|
||||
#gray{ |
||||
background-color:#999999; |
||||
} |
||||
|
||||
#green{ |
||||
background-color:#00CC00; |
||||
} |
||||
|
||||
#orange{ |
||||
background-color:#FB940B; |
||||
} |
||||
|
||||
#pink{ |
||||
background-color:#FF98BF; |
||||
} |
||||
|
||||
#purple{ |
||||
background-color:#762CA7; |
||||
} |
||||
|
||||
#red{ |
||||
background-color:#CC0000; |
||||
} |
||||
|
||||
#teal{ |
||||
background-color:#03C0C6; |
||||
} |
||||
|
||||
#white{ |
||||
background-color:#000000; |
||||
} |
||||
|
||||
#yellow{ |
||||
background-color:#FFFF00; |
||||
} |
||||
|
||||
.selectBox-dropdown, .selectBox-options li a { |
||||
line-height: 1.3 !important; |
||||
font-size: 13px; |
||||
} |
||||
|
||||
.pager_button { |
||||
padding: 3px 5px; |
||||
font-size: 16px; |
||||
color: black; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.pager_button.active { |
||||
border-radius: 3px; |
||||
-webkit-border-radius: 3px; |
||||
background-color: gray; |
||||
color: white; |
||||
} |
||||
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 214 B After Width: | Height: | Size: 214 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 931 B After Width: | Height: | Size: 931 B |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 475 B After Width: | Height: | Size: 475 B |
|
Before Width: | Height: | Size: 448 B After Width: | Height: | Size: 448 B |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
@ -1,253 +1,253 @@ |
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
||||
<html xmlns="http://www.w3.org/1999/xhtml"> |
||||
<head> |
||||
<title>Planete Sankore Image Search</title> |
||||
<link rel="stylesheet" type="text/css" href="css/basic.css"/> |
||||
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script> |
||||
<script type="text/javascript"> |
||||
var category = "audio"; |
||||
var thumbnails = false; |
||||
var minHeight = 180; |
||||
var minWidth = 150; |
||||
|
||||
var currentIndex = 0; |
||||
var currentTerm = ""; |
||||
var limit = 10; |
||||
var filtersDisplayed = false; //display or hide filters |
||||
|
||||
function addPaginationLinks(totalResults) { |
||||
var curPage = currentIndex; // check what page the app is on |
||||
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>"); |
||||
for (var i = 0; i < 8; i++) { |
||||
if (i * limit < totalResults) { |
||||
|
||||
var link = $("<a class='pager_button'></a>").attr('href', 'javascript:gotoPage('+i+');').html(i+1).appendTo(pagesDiv); |
||||
if (curPage == i) { |
||||
link.addClass('active'); |
||||
} |
||||
} |
||||
} |
||||
|
||||
$("#disc_nav_cont #resultFooter").remove(); |
||||
pagesDiv.insertBefore($('#disclaimer')); |
||||
|
||||
$(".imgContainer").each(function(){ |
||||
this.addEventListener("dragstart", imageDragging, false); |
||||
}) |
||||
|
||||
$(".imgContainer").each(function(){ |
||||
this.addEventListener("dragenter", imageDragenter, false); |
||||
}) |
||||
|
||||
$(".imgContainer").each(function(){ |
||||
this.addEventListener("dragleave", imageDragleave, false); |
||||
}) |
||||
|
||||
$(".imgContainer").each(function(){ |
||||
this.addEventListener("dragover", imageDragover, false); |
||||
}) |
||||
} |
||||
|
||||
function searchFail(jqXHR, textStatus, errorThrown) { |
||||
alert('Impossible to connect to Planete Sankore: ' + textStatus + ' ' + errorThrown); |
||||
} |
||||
|
||||
function searchComplete(json) { |
||||
// Grab our content div, clear it. |
||||
var totalResults = json.totalResults; |
||||
var contentDiv = $('#searchResult').empty(); |
||||
// Loop through our results, printing them to the page. |
||||
var results = json.rows; |
||||
for (var i = 0; i < results.length; i++) { |
||||
// For each result write it's title and image to the screen |
||||
var result = results[i]; |
||||
var imgContainer = $("<div class='imgContainer' draggable='true'>"); |
||||
var title = document.createElement('div'); |
||||
var iUrl = $("<input type='hidden'/>"); |
||||
var iContent = $("<input type='hidden'/>"); |
||||
var iHeight = $("<input type='hidden'/>"); |
||||
var iWidth = $("<input type='hidden'/>"); |
||||
var iTitle = $("<input type='hidden'/>"); |
||||
|
||||
// We use titleNoFormatting so that no HTML tags are left in the |
||||
// title |
||||
title.innerHTML = result.title; |
||||
var newImg = document.createElement('img'); |
||||
|
||||
// There is also a result.file property which has the escaped version |
||||
if (thumbnails) { |
||||
newImg.src = result.file; |
||||
} else { |
||||
newImg.src = "./images/thumbnail_icon.png"; |
||||
} |
||||
var imgWidth = (result.tbWidth > minWidth)?result.tbWidth:minWidth; |
||||
var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight; |
||||
imgContainer.width(imgWidth).height(imgHeight); |
||||
imgContainer.append($(newImg)); |
||||
iUrl.attr("value", result.file); |
||||
iContent.attr("value", result.title); |
||||
iHeight.attr("value", result.height); |
||||
iWidth.attr("value", result.width); |
||||
iTitle.attr("value",result.title); |
||||
imgContainer.append($(title)); |
||||
imgContainer.append(iUrl); |
||||
imgContainer.append(iContent); |
||||
imgContainer.append(iHeight); |
||||
imgContainer.append(iWidth); |
||||
imgContainer.append(iTitle); |
||||
|
||||
// Put our title + image in the content |
||||
imgContainer.appendTo(contentDiv); |
||||
|
||||
} |
||||
// Now add links to additional pages of search results. |
||||
addPaginationLinks(totalResults); |
||||
} |
||||
|
||||
function imageDragging(e){ |
||||
e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val()); |
||||
} |
||||
|
||||
function imageDragleave(e){ |
||||
return false; |
||||
} |
||||
|
||||
function imageDragover(e){ |
||||
return false; |
||||
} |
||||
|
||||
function imageDragenter(e){ |
||||
return false; |
||||
} |
||||
|
||||
$(document).ready(function(){ |
||||
|
||||
//variables |
||||
var mode = false; //search or view mode |
||||
var hide = false; //hide or no main panel |
||||
|
||||
//basic containers and elements |
||||
var disc_nav_cont = $("<div id='disc_nav_cont' class='disc_nav_cont'>").appendTo("body"); |
||||
var disclaimer = $("<div id='disclaimer' class='disclaimer'>Recherche de documents audio sur Planète Sankoré<div>").appendTo(disc_nav_cont); |
||||
var search = $("<div id='search' class='search'>").appendTo("body"); |
||||
|
||||
var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search); |
||||
var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages); |
||||
|
||||
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search); |
||||
var subSearchFilter = $("<div id='subSearchFilter' class='subSearch'>").appendTo(search); |
||||
|
||||
var searchInput = $("<input id='searchInput' class='searchInput' type='text'/>").appendTo(subSearchInput); |
||||
var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput); |
||||
// var toggleFilters = $("<div id='toggleFilters' class='toggleFilters'>").appendTo(subSearchInput); |
||||
|
||||
//adding filters to the wgt |
||||
var selectFilter = $("<select id='sizeFilter' class='filterSelect'>") |
||||
.append($("<option value='0'>Any</option>")) |
||||
.append($("<option value='1'>Small</option>")) |
||||
.append($("<option value='2'>Medium</option>")) |
||||
.append($("<option value='3'>Large</option>")) |
||||
.append($("<option value='4'>Extra large</option>")); |
||||
$("<div class='filterContainer'>").append("<span>Size:</span>").append(selectFilter).appendTo(subSearchFilter); |
||||
|
||||
//mouse click actions |
||||
/* |
||||
toggleFilters.click(function(){ |
||||
if(filtersDisplayed){ |
||||
subSearchFilter.hide(); |
||||
toggleFilters.css("background-image","url(images/down.png)"); |
||||
filtersDisplayed = false; |
||||
} else { |
||||
subSearchFilter.show(); |
||||
toggleFilters.css("background-image","url(images/up.png)"); |
||||
filtersDisplayed = true; |
||||
} |
||||
}); |
||||
*/ |
||||
|
||||
/*togglePages.click(function(event){ |
||||
if(mode){ |
||||
hide = false; |
||||
$("#search, #disclaimer").slideDown('slow', function(){ |
||||
toggleIcon.css("background-image","url(images/trgUp.png)"); |
||||
togglePages.appendTo("#search").css("top","").css("bottom","-14px"); |
||||
}); |
||||
mode = false; |
||||
} else { |
||||
hide = true; |
||||
$("#search, #disclaimer").slideUp('slow', function(){ |
||||
toggleIcon.css("background-image","url(images/trgDown.png)"); |
||||
togglePages.appendTo("body").css("top","0"); |
||||
}); |
||||
mode = true; |
||||
} |
||||
});*/ |
||||
|
||||
searchButton.click(function(){ |
||||
if(!hide){ |
||||
runSearch(searchInput.val(), 0); |
||||
//togglePages.trigger("click"); |
||||
} |
||||
}); |
||||
|
||||
searchInput.keydown(function(event){ |
||||
if(!hide){ |
||||
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){ |
||||
runSearch(searchInput.val(), 0); |
||||
//togglePages.trigger("click"); |
||||
} |
||||
|
||||
} |
||||
}); |
||||
( |
||||
$(".imgContainer").live("click",function(){ |
||||
sankore.sendFileMetadata(createMetaData($(this))); |
||||
})); |
||||
|
||||
/*$(window).resize(function(){ |
||||
disclaimer.width($("body").width()-20); |
||||
search.width($("body").width()-20); |
||||
toggleIcon.css("margin-left",(togglePages.width()/2 - 7)); |
||||
})*/ |
||||
|
||||
}); |
||||
|
||||
function gotoPage(i) { |
||||
runSearch(currentTerm, i); |
||||
} |
||||
|
||||
// launching the search on planete sankore |
||||
function runSearch(term, index) { |
||||
currentTerm = term; |
||||
currentIndex = index; |
||||
var start = index * limit; |
||||
var url = "http://planete.sankore.org/xwiki/bin/view/Search/Resources?xpage=plain&category=" + category + "&level=&sort=title&dir=ASC&terms=" + escape(term) + "&start=" + start + "&limit=" + limit; |
||||
$.ajax({ |
||||
url: url, |
||||
success: searchComplete, |
||||
error: searchFail, |
||||
dataType: "json" |
||||
}); |
||||
} |
||||
|
||||
function createMetaData(parent){ |
||||
var meta = ""; |
||||
//alert($(this).find("input:hidden").eq(0).val()); |
||||
meta = "<metadata><data><key>Type</key><value>Audio</value></data><data><key>Url</key><value>" + |
||||
parent.find("input:hidden").eq(0).val() + |
||||
"</value></data><data><key>Content</key><value>" + |
||||
parent.find("input:hidden").eq(1).val() + |
||||
"</value></data><data><key>Height</key><value>n/a</value></data>"+ |
||||
"<data><key>Width</key><value>n/a</value></data><data><key>Title</key><value>" + |
||||
parent.find("input:hidden").eq(4).val() + |
||||
"</value></data></metadata>"; |
||||
return meta; |
||||
} |
||||
</script> |
||||
|
||||
</head> |
||||
<body style="font-family: Arial;border: 0 none;"> |
||||
<div id="searchResult"></div> |
||||
</body> |
||||
</html> |
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
||||
<html xmlns="http://www.w3.org/1999/xhtml"> |
||||
<head> |
||||
<title>Planete Sankore Image Search</title> |
||||
<link rel="stylesheet" type="text/css" href="css/basic.css"/> |
||||
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script> |
||||
<script type="text/javascript"> |
||||
var category = "audio"; |
||||
var thumbnails = false; |
||||
var minHeight = 177; |
||||
var minWidth = 150; |
||||
|
||||
var currentIndex = 0; |
||||
var currentTerm = ""; |
||||
var limit = 10; |
||||
var filtersDisplayed = false; //display or hide filters |
||||
|
||||
function addPaginationLinks(totalResults) { |
||||
var curPage = currentIndex; // check what page the app is on |
||||
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>"); |
||||
for (var i = 0; i < 8; i++) { |
||||
if (i * limit < totalResults) { |
||||
|
||||
var link = $("<a class='pager_button'></a>").attr('href', 'javascript:gotoPage('+i+');').html(i+1).appendTo(pagesDiv); |
||||
if (curPage == i) { |
||||
link.addClass('active'); |
||||
} |
||||
} |
||||
} |
||||
|
||||
$("#disc_nav_cont #resultFooter").remove(); |
||||
pagesDiv.insertBefore($('#disclaimer')); |
||||
|
||||
$(".imgContainer").each(function(){ |
||||
this.addEventListener("dragstart", imageDragging, false); |
||||
}) |
||||
|
||||
$(".imgContainer").each(function(){ |
||||
this.addEventListener("dragenter", imageDragenter, false); |
||||
}) |
||||
|
||||
$(".imgContainer").each(function(){ |
||||
this.addEventListener("dragleave", imageDragleave, false); |
||||
}) |
||||
|
||||
$(".imgContainer").each(function(){ |
||||
this.addEventListener("dragover", imageDragover, false); |
||||
}) |
||||
} |
||||
|
||||
function searchFail(jqXHR, textStatus, errorThrown) { |
||||
alert('Impossible to connect to Planete Sankore: ' + textStatus + ' ' + errorThrown); |
||||
} |
||||
|
||||
function searchComplete(json) { |
||||
// Grab our content div, clear it. |
||||
var totalResults = json.totalResults; |
||||
var contentDiv = $('#searchResult').empty(); |
||||
// Loop through our results, printing them to the page. |
||||
var results = json.rows; |
||||
for (var i = 0; i < results.length; i++) { |
||||
// For each result write it's title and image to the screen |
||||
var result = results[i]; |
||||
var imgContainer = $("<div class='imgContainer' draggable='true'>"); |
||||
var title = document.createElement('div'); |
||||
var iUrl = $("<input type='hidden'/>"); |
||||
var iContent = $("<input type='hidden'/>"); |
||||
var iHeight = $("<input type='hidden'/>"); |
||||
var iWidth = $("<input type='hidden'/>"); |
||||
var iTitle = $("<input type='hidden'/>"); |
||||
|
||||
// We use titleNoFormatting so that no HTML tags are left in the |
||||
// title |
||||
title.innerHTML = result.title; |
||||
var newImg = document.createElement('img'); |
||||
|
||||
// There is also a result.file property which has the escaped version |
||||
if (thumbnails) { |
||||
newImg.src = result.file; |
||||
} else { |
||||
newImg.src = "./images/thumbnail_icon.png"; |
||||
} |
||||
var imgWidth = (result.tbWidth > minWidth)?result.tbWidth:minWidth; |
||||
var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight; |
||||
imgContainer.width(imgWidth).height(imgHeight); |
||||
imgContainer.append($(newImg)); |
||||
iUrl.attr("value", result.file); |
||||
iContent.attr("value", result.title); |
||||
iHeight.attr("value", result.height); |
||||
iWidth.attr("value", result.width); |
||||
iTitle.attr("value",result.title); |
||||
imgContainer.append($(title)); |
||||
imgContainer.append(iUrl); |
||||
imgContainer.append(iContent); |
||||
imgContainer.append(iHeight); |
||||
imgContainer.append(iWidth); |
||||
imgContainer.append(iTitle); |
||||
|
||||
// Put our title + image in the content |
||||
imgContainer.appendTo(contentDiv); |
||||
|
||||
} |
||||
// Now add links to additional pages of search results. |
||||
addPaginationLinks(totalResults); |
||||
} |
||||
|
||||
function imageDragging(e){ |
||||
e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val()); |
||||
} |
||||
|
||||
function imageDragleave(e){ |
||||
return false; |
||||
} |
||||
|
||||
function imageDragover(e){ |
||||
return false; |
||||
} |
||||
|
||||
function imageDragenter(e){ |
||||
return false; |
||||
} |
||||
|
||||
$(document).ready(function(){ |
||||
|
||||
//variables |
||||
var mode = false; //search or view mode |
||||
var hide = false; //hide or no main panel |
||||
|
||||
//basic containers and elements |
||||
var disc_nav_cont = $("<div id='disc_nav_cont' class='disc_nav_cont'>").appendTo("body"); |
||||
var disclaimer = $("<div id='disclaimer' class='disclaimer'>Recherche de documents audio sur Planète Sankoré<div>").appendTo(disc_nav_cont); |
||||
var search = $("<div id='search' class='search'>").appendTo("body"); |
||||
|
||||
var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search); |
||||
var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages); |
||||
|
||||
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search); |
||||
var subSearchFilter = $("<div id='subSearchFilter' class='subSearch'>").appendTo(search); |
||||
|
||||
var searchInput = $("<input id='searchInput' class='searchInput' type='text'/>").appendTo(subSearchInput); |
||||
var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput); |
||||
// var toggleFilters = $("<div id='toggleFilters' class='toggleFilters'>").appendTo(subSearchInput); |
||||
|
||||
//adding filters to the wgt |
||||
var selectFilter = $("<select id='sizeFilter' class='filterSelect'>") |
||||
.append($("<option value='0'>Any</option>")) |
||||
.append($("<option value='1'>Small</option>")) |
||||
.append($("<option value='2'>Medium</option>")) |
||||
.append($("<option value='3'>Large</option>")) |
||||
.append($("<option value='4'>Extra large</option>")); |
||||
$("<div class='filterContainer'>").append("<span>Size:</span>").append(selectFilter).appendTo(subSearchFilter); |
||||
|
||||
//mouse click actions |
||||
/* |
||||
toggleFilters.click(function(){ |
||||
if(filtersDisplayed){ |
||||
subSearchFilter.hide(); |
||||
toggleFilters.css("background-image","url(images/down.png)"); |
||||
filtersDisplayed = false; |
||||
} else { |
||||
subSearchFilter.show(); |
||||
toggleFilters.css("background-image","url(images/up.png)"); |
||||
filtersDisplayed = true; |
||||
} |
||||
}); |
||||
*/ |
||||
|
||||
/*togglePages.click(function(event){ |
||||
if(mode){ |
||||
hide = false; |
||||
$("#search, #disclaimer").slideDown('slow', function(){ |
||||
toggleIcon.css("background-image","url(images/trgUp.png)"); |
||||
togglePages.appendTo("#search").css("top","").css("bottom","-14px"); |
||||
}); |
||||
mode = false; |
||||
} else { |
||||
hide = true; |
||||
$("#search, #disclaimer").slideUp('slow', function(){ |
||||
toggleIcon.css("background-image","url(images/trgDown.png)"); |
||||
togglePages.appendTo("body").css("top","0"); |
||||
}); |
||||
mode = true; |
||||
} |
||||
});*/ |
||||
|
||||
searchButton.click(function(){ |
||||
if(!hide){ |
||||
runSearch(searchInput.val(), 0); |
||||
//togglePages.trigger("click"); |
||||
} |
||||
}); |
||||
|
||||
searchInput.keydown(function(event){ |
||||
if(!hide){ |
||||
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){ |
||||
runSearch(searchInput.val(), 0); |
||||
//togglePages.trigger("click"); |
||||
} |
||||
|
||||
} |
||||
}); |
||||
( |
||||
$(".imgContainer").live("click",function(){ |
||||
sankore.sendFileMetadata(createMetaData($(this))); |
||||
})); |
||||
|
||||
/*$(window).resize(function(){ |
||||
disclaimer.width($("body").width()-20); |
||||
search.width($("body").width()-20); |
||||
toggleIcon.css("margin-left",(togglePages.width()/2 - 7)); |
||||
})*/ |
||||
|
||||
}); |
||||
|
||||
function gotoPage(i) { |
||||
runSearch(currentTerm, i); |
||||
} |
||||
|
||||
// launching the search on planete sankore |
||||
function runSearch(term, index) { |
||||
currentTerm = term; |
||||
currentIndex = index; |
||||
var start = index * limit; |
||||
var url = "http://planete.sankore.org/xwiki/bin/view/Search/Resources?xpage=plain&category=" + category + "&level=&sort=title&dir=ASC&terms=" + escape(term) + "&start=" + start + "&limit=" + limit; |
||||
$.ajax({ |
||||
url: url, |
||||
success: searchComplete, |
||||
error: searchFail, |
||||
dataType: "json" |
||||
}); |
||||
} |
||||
|
||||
function createMetaData(parent){ |
||||
var meta = ""; |
||||
//alert($(this).find("input:hidden").eq(0).val()); |
||||
meta = "<metadata><data><key>Type</key><value>Audio</value></data><data><key>Url</key><value>" + |
||||
parent.find("input:hidden").eq(0).val() + |
||||
"</value></data><data><key>Content</key><value>" + |
||||
parent.find("input:hidden").eq(1).val() + |
||||
"</value></data><data><key>Height</key><value>n/a</value></data>"+ |
||||
"<data><key>Width</key><value>n/a</value></data><data><key>Title</key><value>" + |
||||
parent.find("input:hidden").eq(4).val() + |
||||
"</value></data></metadata>"; |
||||
return meta; |
||||
} |
||||
</script> |
||||
|
||||
</head> |
||||
<body style="font-family: Arial;border: 0 none;"> |
||||
<div id="searchResult"></div> |
||||
</body> |
||||
</html> |
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,315 +1,315 @@ |
||||
html, body{ |
||||
width: 100%; |
||||
padding: 0; |
||||
height: auto; |
||||
background-color: white; |
||||
margin: 0; |
||||
} |
||||
|
||||
::-webkit-scrollbar { |
||||
width: 14px; |
||||
background-color:white; |
||||
} |
||||
|
||||
|
||||
::-webkit-scrollbar-thumb { |
||||
border-radius: 10px; |
||||
background-color:lightgray; |
||||
border: 2px solid gray; |
||||
} |
||||
|
||||
::-webkit-scrollbar-button:vertical:start{ |
||||
border-radius: 10px; |
||||
background-color:lightgray; |
||||
background-image: url(../images/trgUp.png); |
||||
background-size: 8px auto; |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
border: 2px solid gray; |
||||
} |
||||
|
||||
::-webkit-scrollbar-button:vertical:end{ |
||||
border-radius: 10px; |
||||
background-color:lightgray; |
||||
background-image: url(../images/trgDown.png); |
||||
background-size: 8px auto; |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
border: 2px solid gray; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
#disc_nav_cont{ |
||||
height: auto; |
||||
position: fixed; |
||||
left: 0; |
||||
bottom: 0; |
||||
width: 100%; |
||||
} |
||||
|
||||
.disclaimer{ |
||||
padding: 5px; |
||||
text-align: center; |
||||
background-color: #BBBBBB; |
||||
border-top: solid 4px #EEEEEE; |
||||
border-bottom: none; |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.resultFooter{ |
||||
width: 100%; |
||||
padding: 3px; |
||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||
font-weight: bold; |
||||
font-size: x-large; |
||||
text-align: center; |
||||
background-color: white; |
||||
} |
||||
|
||||
#searchResult { |
||||
overflow: hidden; |
||||
text-align: center; |
||||
margin-top: 50px; |
||||
margin-bottom: 50px; |
||||
} |
||||
|
||||
.search{ |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
padding: 5px; |
||||
background-color: #BBBBBB; |
||||
border-bottom: solid 4px #EEEEEE; |
||||
} |
||||
|
||||
.search, |
||||
.disclaimer { |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
} |
||||
|
||||
.searchInput{ |
||||
padding: 3px; |
||||
float: left; |
||||
width: 100%; |
||||
border-radius: 3px; |
||||
border-style: none; |
||||
height: 22px; |
||||
line-height: 18px; |
||||
vertical-align: middle; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
} |
||||
|
||||
.searchButton{ |
||||
background: url("../images/search_app.png") -38px -38px no-repeat; |
||||
width: 24px; |
||||
height: 24px; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
right: 30px; |
||||
top: 9px; |
||||
margin-left: -2px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.subSearch{ |
||||
margin: 0; |
||||
float: left; |
||||
} |
||||
|
||||
#subSearchInput{ |
||||
width: 100%; |
||||
float: left; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
padding: 5px; |
||||
padding-right: 26px; |
||||
} |
||||
|
||||
#subSearchFilter{ |
||||
width: 100%; |
||||
float: left; |
||||
display: none; |
||||
} |
||||
|
||||
.searchResult{ |
||||
width: 98%; |
||||
padding: 3px; |
||||
background-color:#123456; |
||||
} |
||||
|
||||
.imgContainer{ |
||||
display: inline-block; |
||||
padding: 3px; |
||||
margin: 3px; |
||||
text-align: center; |
||||
overflow: hidden; |
||||
font-size: small; |
||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||
border: 1px solid #666; |
||||
border-radius: 5px; |
||||
-webkit-box-shadow: #dadada -1px 0 4px; |
||||
-webkit-border-radius: 5px; |
||||
box-shadow: #666 -1px 0 4px; |
||||
vertical-align: top; |
||||
} |
||||
|
||||
|
||||
.filterContainer{ |
||||
float: left; |
||||
margin: 2px; |
||||
padding: 2px; |
||||
font-size: 14px; |
||||
|
||||
} |
||||
|
||||
.filterSelect{ |
||||
border-style:none; |
||||
-webkit-border-top-right-radius: 15px; |
||||
-webkit-border-bottom-right-radius: 15px; |
||||
-moz-border-radius-topright: 15px; |
||||
-moz-border-radius-bottomright: 15px; |
||||
border-top-right-radius: 15px; |
||||
margin-top: 2px; |
||||
width: 100%; |
||||
} |
||||
|
||||
span{ |
||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||
color: #666; |
||||
} |
||||
|
||||
[draggable] { |
||||
-webkit-user-select: none; |
||||
user-select: none; |
||||
} |
||||
|
||||
.toggleFilters{ |
||||
margin: 0; |
||||
padding: 0; |
||||
background-position: center; |
||||
background-image: url(../images/down.png); |
||||
position: absolute; |
||||
top: 11px; |
||||
right: 6px; |
||||
width: 20px; |
||||
height: 20px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.colors_line { |
||||
float: left; |
||||
margin: 4px; |
||||
margin-right: 0; |
||||
clear: left; |
||||
} |
||||
|
||||
.custom { |
||||
opacity: 0; |
||||
position: absolute; |
||||
left: -10000px; |
||||
} |
||||
|
||||
.filter_button.button.color { |
||||
display: inline-block; |
||||
width: 15px; |
||||
height: 15px; |
||||
border: 1px solid #EBEBEB; |
||||
padding: 0; |
||||
margin: 0; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
} |
||||
|
||||
.filter_button.button.color:hover { |
||||
border: 1px solid rgb(128,128,128); |
||||
cursor: pointer; |
||||
} |
||||
|
||||
input[type="radio"]:checked + .filter_button.button.color { |
||||
border: 1px solid rgb(255,255,255); |
||||
box-shadow: 0 0 0px 1px #000; |
||||
-webkit-box-shadow: 0 0 0px 1px #000; |
||||
} |
||||
|
||||
#allcolor { |
||||
background: white url('../images/search_app.png') -43px -144px no-repeat; |
||||
} |
||||
|
||||
#colored { |
||||
background: white url('../images/search_app.png') -43px -244px no-repeat; |
||||
} |
||||
|
||||
#grayed { |
||||
background: white url('../images/search_app.png') -45px -343px no-repeat; |
||||
} |
||||
|
||||
#black{ |
||||
background-color:#ffffff; |
||||
} |
||||
#blue{ |
||||
background-color:#0000FF; |
||||
} |
||||
#brown{ |
||||
background-color:rgba(139, 82, 16, 1); |
||||
} |
||||
|
||||
#gray{ |
||||
background-color:#999999; |
||||
} |
||||
|
||||
#green{ |
||||
background-color:#00CC00; |
||||
} |
||||
|
||||
#orange{ |
||||
background-color:#FB940B; |
||||
} |
||||
|
||||
#pink{ |
||||
background-color:#FF98BF; |
||||
} |
||||
|
||||
#purple{ |
||||
background-color:#762CA7; |
||||
} |
||||
|
||||
#red{ |
||||
background-color:#CC0000; |
||||
} |
||||
|
||||
#teal{ |
||||
background-color:#03C0C6; |
||||
} |
||||
|
||||
#white{ |
||||
background-color:#000000; |
||||
} |
||||
|
||||
#yellow{ |
||||
background-color:#FFFF00; |
||||
} |
||||
|
||||
.selectBox-dropdown, .selectBox-options li a { |
||||
line-height: 1.3 !important; |
||||
font-size: 13px; |
||||
} |
||||
|
||||
.pager_button { |
||||
padding: 3px 5px; |
||||
font-size: 16px; |
||||
color: black; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.pager_button.active { |
||||
border-radius: 3px; |
||||
-webkit-border-radius: 3px; |
||||
background-color: gray; |
||||
color: white; |
||||
} |
||||
html, body{ |
||||
width: 100%; |
||||
padding: 0; |
||||
height: auto; |
||||
background-color: white; |
||||
margin: 0; |
||||
} |
||||
|
||||
::-webkit-scrollbar { |
||||
width: 14px; |
||||
background-color:white; |
||||
} |
||||
|
||||
|
||||
::-webkit-scrollbar-thumb { |
||||
border-radius: 10px; |
||||
background-color:lightgray; |
||||
border: 2px solid gray; |
||||
} |
||||
|
||||
::-webkit-scrollbar-button:vertical:start{ |
||||
border-radius: 10px; |
||||
background-color:lightgray; |
||||
background-image: url(../images/trgUp.png); |
||||
background-size: 8px auto; |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
border: 2px solid gray; |
||||
} |
||||
|
||||
::-webkit-scrollbar-button:vertical:end{ |
||||
border-radius: 10px; |
||||
background-color:lightgray; |
||||
background-image: url(../images/trgDown.png); |
||||
background-size: 8px auto; |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
border: 2px solid gray; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
#disc_nav_cont{ |
||||
height: auto; |
||||
position: fixed; |
||||
left: 0; |
||||
bottom: 0; |
||||
width: 100%; |
||||
} |
||||
|
||||
.disclaimer{ |
||||
padding: 5px; |
||||
text-align: center; |
||||
background-color: #BBBBBB; |
||||
border-top: solid 4px #EEEEEE; |
||||
border-bottom: none; |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.resultFooter{ |
||||
width: 100%; |
||||
padding: 3px; |
||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||
font-weight: bold; |
||||
font-size: x-large; |
||||
text-align: center; |
||||
background-color: white; |
||||
} |
||||
|
||||
#searchResult { |
||||
overflow: hidden; |
||||
text-align: center; |
||||
margin-top: 50px; |
||||
margin-bottom: 85px; |
||||
} |
||||
|
||||
.search{ |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
padding: 5px; |
||||
background-color: #BBBBBB; |
||||
border-bottom: solid 4px #EEEEEE; |
||||
} |
||||
|
||||
.search, |
||||
.disclaimer { |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
} |
||||
|
||||
.searchInput{ |
||||
padding: 3px; |
||||
float: left; |
||||
width: 100%; |
||||
border-radius: 3px; |
||||
border-style: none; |
||||
height: 22px; |
||||
line-height: 18px; |
||||
vertical-align: middle; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
} |
||||
|
||||
.searchButton{ |
||||
background: url("../images/search_app.png") -38px -38px no-repeat; |
||||
width: 24px; |
||||
height: 24px; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
right: 30px; |
||||
top: 9px; |
||||
margin-left: -2px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.subSearch{ |
||||
margin: 0; |
||||
float: left; |
||||
} |
||||
|
||||
#subSearchInput{ |
||||
width: 100%; |
||||
float: left; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
padding: 5px; |
||||
padding-right: 26px; |
||||
} |
||||
|
||||
#subSearchFilter{ |
||||
width: 100%; |
||||
float: left; |
||||
display: none; |
||||
} |
||||
|
||||
.searchResult{ |
||||
width: 98%; |
||||
padding: 3px; |
||||
background-color:#123456; |
||||
} |
||||
|
||||
.imgContainer{ |
||||
display: inline-block; |
||||
padding: 3px; |
||||
margin: 3px; |
||||
text-align: center; |
||||
overflow: hidden; |
||||
font-size: small; |
||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||
border: 1px solid #666; |
||||
border-radius: 5px; |
||||
-webkit-box-shadow: #dadada -1px 0 4px; |
||||
-webkit-border-radius: 5px; |
||||
box-shadow: #666 -1px 0 4px; |
||||
vertical-align: top; |
||||
} |
||||
|
||||
|
||||
.filterContainer{ |
||||
float: left; |
||||
margin: 2px; |
||||
padding: 2px; |
||||
font-size: 14px; |
||||
|
||||
} |
||||
|
||||
.filterSelect{ |
||||
border-style:none; |
||||
-webkit-border-top-right-radius: 15px; |
||||
-webkit-border-bottom-right-radius: 15px; |
||||
-moz-border-radius-topright: 15px; |
||||
-moz-border-radius-bottomright: 15px; |
||||
border-top-right-radius: 15px; |
||||
margin-top: 2px; |
||||
width: 100%; |
||||
} |
||||
|
||||
span{ |
||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||
color: #666; |
||||
} |
||||
|
||||
[draggable] { |
||||
-webkit-user-select: none; |
||||
user-select: none; |
||||
} |
||||
|
||||
.toggleFilters{ |
||||
margin: 0; |
||||
padding: 0; |
||||
background-position: center; |
||||
background-image: url(../images/down.png); |
||||
position: absolute; |
||||
top: 11px; |
||||
right: 6px; |
||||
width: 20px; |
||||
height: 20px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.colors_line { |
||||
float: left; |
||||
margin: 4px; |
||||
margin-right: 0; |
||||
clear: left; |
||||
} |
||||
|
||||
.custom { |
||||
opacity: 0; |
||||
position: absolute; |
||||
left: -10000px; |
||||
} |
||||
|
||||
.filter_button.button.color { |
||||
display: inline-block; |
||||
width: 15px; |
||||
height: 15px; |
||||
border: 1px solid #EBEBEB; |
||||
padding: 0; |
||||
margin: 0; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
} |
||||
|
||||
.filter_button.button.color:hover { |
||||
border: 1px solid rgb(128,128,128); |
||||
cursor: pointer; |
||||
} |
||||
|
||||
input[type="radio"]:checked + .filter_button.button.color { |
||||
border: 1px solid rgb(255,255,255); |
||||
box-shadow: 0 0 0px 1px #000; |
||||
-webkit-box-shadow: 0 0 0px 1px #000; |
||||
} |
||||
|
||||
#allcolor { |
||||
background: white url('../images/search_app.png') -43px -144px no-repeat; |
||||
} |
||||
|
||||
#colored { |
||||
background: white url('../images/search_app.png') -43px -244px no-repeat; |
||||
} |
||||
|
||||
#grayed { |
||||
background: white url('../images/search_app.png') -45px -343px no-repeat; |
||||
} |
||||
|
||||
#black{ |
||||
background-color:#ffffff; |
||||
} |
||||
#blue{ |
||||
background-color:#0000FF; |
||||
} |
||||
#brown{ |
||||
background-color:rgba(139, 82, 16, 1); |
||||
} |
||||
|
||||
#gray{ |
||||
background-color:#999999; |
||||
} |
||||
|
||||
#green{ |
||||
background-color:#00CC00; |
||||
} |
||||
|
||||
#orange{ |
||||
background-color:#FB940B; |
||||
} |
||||
|
||||
#pink{ |
||||
background-color:#FF98BF; |
||||
} |
||||
|
||||
#purple{ |
||||
background-color:#762CA7; |
||||
} |
||||
|
||||
#red{ |
||||
background-color:#CC0000; |
||||
} |
||||
|
||||
#teal{ |
||||
background-color:#03C0C6; |
||||
} |
||||
|
||||
#white{ |
||||
background-color:#000000; |
||||
} |
||||
|
||||
#yellow{ |
||||
background-color:#FFFF00; |
||||
} |
||||
|
||||
.selectBox-dropdown, .selectBox-options li a { |
||||
line-height: 1.3 !important; |
||||
font-size: 13px; |
||||
} |
||||
|
||||
.pager_button { |
||||
padding: 3px 5px; |
||||
font-size: 16px; |
||||
color: black; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.pager_button.active { |
||||
border-radius: 3px; |
||||
-webkit-border-radius: 3px; |
||||
background-color: gray; |
||||
color: white; |
||||
} |
||||
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 214 B After Width: | Height: | Size: 214 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 931 B After Width: | Height: | Size: 931 B |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 475 B After Width: | Height: | Size: 475 B |
|
Before Width: | Height: | Size: 448 B After Width: | Height: | Size: 448 B |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
@ -1,253 +1,253 @@ |
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
||||
<html xmlns="http://www.w3.org/1999/xhtml"> |
||||
<head> |
||||
<title>Planete Sankore Image Search</title> |
||||
<link rel="stylesheet" type="text/css" href="css/basic.css"/> |
||||
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script> |
||||
<script type="text/javascript"> |
||||
var category = "interactive"; |
||||
var thumbnails = false; |
||||
var minHeight = 180; |
||||
var minWidth = 150; |
||||
|
||||
var currentIndex = 0; |
||||
var currentTerm = ""; |
||||
var limit = 10; |
||||
var filtersDisplayed = false; //display or hide filters |
||||
|
||||
function addPaginationLinks(totalResults) { |
||||
var curPage = currentIndex; // check what page the app is on |
||||
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>"); |
||||
for (var i = 0; i < 8; i++) { |
||||
if (i * limit < totalResults) { |
||||
|
||||
var link = $("<a class='pager_button'></a>").attr('href', 'javascript:gotoPage('+i+');').html(i+1).appendTo(pagesDiv); |
||||
if (curPage == i) { |
||||
link.addClass('active'); |
||||
} |
||||
} |
||||
} |
||||
|
||||
$("#disc_nav_cont #resultFooter").remove(); |
||||
pagesDiv.insertBefore($('#disclaimer')); |
||||
|
||||
$(".imgContainer").each(function(){ |
||||
this.addEventListener("dragstart", imageDragging, false); |
||||
}) |
||||
|
||||
$(".imgContainer").each(function(){ |
||||
this.addEventListener("dragenter", imageDragenter, false); |
||||
}) |
||||
|
||||
$(".imgContainer").each(function(){ |
||||
this.addEventListener("dragleave", imageDragleave, false); |
||||
}) |
||||
|
||||
$(".imgContainer").each(function(){ |
||||
this.addEventListener("dragover", imageDragover, false); |
||||
}) |
||||
} |
||||
|
||||
function searchFail(jqXHR, textStatus, errorThrown) { |
||||
alert('Impossible to connect to Planete Sankore: ' + textStatus + ' ' + errorThrown); |
||||
} |
||||
|
||||
function searchComplete(json) { |
||||
// Grab our content div, clear it. |
||||
var totalResults = json.totalResults; |
||||
var contentDiv = $('#searchResult').empty(); |
||||
// Loop through our results, printing them to the page. |
||||
var results = json.rows; |
||||
for (var i = 0; i < results.length; i++) { |
||||
// For each result write it's title and image to the screen |
||||
var result = results[i]; |
||||
var imgContainer = $("<div class='imgContainer' draggable='true'>"); |
||||
var title = document.createElement('div'); |
||||
var iUrl = $("<input type='hidden'/>"); |
||||
var iContent = $("<input type='hidden'/>"); |
||||
var iHeight = $("<input type='hidden'/>"); |
||||
var iWidth = $("<input type='hidden'/>"); |
||||
var iTitle = $("<input type='hidden'/>"); |
||||
|
||||
// We use titleNoFormatting so that no HTML tags are left in the |
||||
// title |
||||
title.innerHTML = result.title; |
||||
var newImg = document.createElement('img'); |
||||
|
||||
// There is also a result.file property which has the escaped version |
||||
if (thumbnails) { |
||||
newImg.src = result.file; |
||||
} else { |
||||
newImg.src = "./images/thumbnail_icon.png"; |
||||
} |
||||
var imgWidth = (result.tbWidth > minWidth)?result.tbWidth:minWidth; |
||||
var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight; |
||||
imgContainer.width(imgWidth).height(imgHeight); |
||||
imgContainer.append($(newImg)); |
||||
iUrl.attr("value", result.file); |
||||
iContent.attr("value", result.title); |
||||
iHeight.attr("value", result.height); |
||||
iWidth.attr("value", result.width); |
||||
iTitle.attr("value",result.title); |
||||
imgContainer.append($(title)); |
||||
imgContainer.append(iUrl); |
||||
imgContainer.append(iContent); |
||||
imgContainer.append(iHeight); |
||||
imgContainer.append(iWidth); |
||||
imgContainer.append(iTitle); |
||||
|
||||
// Put our title + image in the content |
||||
imgContainer.appendTo(contentDiv); |
||||
|
||||
} |
||||
// Now add links to additional pages of search results. |
||||
addPaginationLinks(totalResults); |
||||
} |
||||
|
||||
function imageDragging(e){ |
||||
e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val()); |
||||
// alert($(this).find("input:hidden").eq(0).val()); |
||||
} |
||||
|
||||
function imageDragleave(e){ |
||||
return false; |
||||
} |
||||
|
||||
function imageDragover(e){ |
||||
return false; |
||||
} |
||||
|
||||
function imageDragenter(e){ |
||||
return false; |
||||
} |
||||
|
||||
$(document).ready(function(){ |
||||
|
||||
//variables |
||||
var mode = false; //search or view mode |
||||
var hide = false; //hide or no main panel |
||||
|
||||
//basic containers and elements |
||||
var disc_nav_cont = $("<div id='disc_nav_cont' class='disc_nav_cont'>").appendTo("body"); |
||||
var disclaimer = $("<div id='disclaimer' class='disclaimer'>Recherche de documents flash sur Planète Sankoré<div>").appendTo(disc_nav_cont); |
||||
var search = $("<div id='search' class='search'>").appendTo("body"); |
||||
|
||||
var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search); |
||||
var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages); |
||||
|
||||
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search); |
||||
var subSearchFilter = $("<div id='subSearchFilter' class='subSearch'>").appendTo(search); |
||||
|
||||
var searchInput = $("<input id='searchInput' class='searchInput' type='text'/>").appendTo(subSearchInput); |
||||
var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput); |
||||
// var toggleFilters = $("<div id='toggleFilters' class='toggleFilters'>").appendTo(subSearchInput); |
||||
|
||||
//adding filters to the wgt |
||||
var selectFilter = $("<select id='sizeFilter' class='filterSelect'>") |
||||
.append($("<option value='0'>Any</option>")) |
||||
.append($("<option value='1'>Small</option>")) |
||||
.append($("<option value='2'>Medium</option>")) |
||||
.append($("<option value='3'>Large</option>")) |
||||
.append($("<option value='4'>Extra large</option>")); |
||||
$("<div class='filterContainer'>").append("<span>Size:</span>").append(selectFilter).appendTo(subSearchFilter); |
||||
|
||||
//mouse click actions |
||||
/* |
||||
toggleFilters.click(function(){ |
||||
if(filtersDisplayed){ |
||||
subSearchFilter.hide(); |
||||
toggleFilters.css("background-image","url(images/down.png)"); |
||||
filtersDisplayed = false; |
||||
} else { |
||||
subSearchFilter.show(); |
||||
toggleFilters.css("background-image","url(images/up.png)"); |
||||
filtersDisplayed = true; |
||||
} |
||||
}); |
||||
*/ |
||||
|
||||
/*togglePages.click(function(event){ |
||||
if(mode){ |
||||
hide = false; |
||||
$("#search, #disclaimer").slideDown('slow', function(){ |
||||
toggleIcon.css("background-image","url(images/trgUp.png)"); |
||||
togglePages.appendTo("#search").css("top","").css("bottom","-14px"); |
||||
}); |
||||
mode = false; |
||||
} else { |
||||
hide = true; |
||||
$("#search, #disclaimer").slideUp('slow', function(){ |
||||
toggleIcon.css("background-image","url(images/trgDown.png)"); |
||||
togglePages.appendTo("body").css("top","0"); |
||||
}); |
||||
mode = true; |
||||
} |
||||
});*/ |
||||
|
||||
searchButton.click(function(){ |
||||
if(!hide){ |
||||
runSearch(searchInput.val(), 0); |
||||
//togglePages.trigger("click"); |
||||
} |
||||
}); |
||||
|
||||
searchInput.keydown(function(event){ |
||||
if(!hide){ |
||||
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){ |
||||
runSearch(searchInput.val(), 0); |
||||
//togglePages.trigger("click"); |
||||
} |
||||
|
||||
} |
||||
}); |
||||
( |
||||
$(".imgContainer").live("click",function(){ |
||||
sankore.sendFileMetadata(createMetaData($(this))); |
||||
})); |
||||
|
||||
/*$(window).resize(function(){ |
||||
disclaimer.width($("body").width()-20); |
||||
search.width($("body").width()-20); |
||||
toggleIcon.css("margin-left",(togglePages.width()/2 - 7)); |
||||
})*/ |
||||
|
||||
}); |
||||
|
||||
function gotoPage(i) { |
||||
runSearch(currentTerm, i); |
||||
} |
||||
|
||||
// launching the search on planete sankore |
||||
function runSearch(term, index) { |
||||
currentTerm = term; |
||||
currentIndex = index; |
||||
var start = index * limit; |
||||
var url = "http://planete.sankore.org/xwiki/bin/view/Search/Resources?xpage=plain&category=" + category + "&level=&sort=title&dir=ASC&terms=" + escape(term) + "&start=" + start + "&limit=" + limit; |
||||
$.ajax({ |
||||
url: url, |
||||
success: searchComplete, |
||||
error: searchFail, |
||||
dataType: "json" |
||||
}); |
||||
} |
||||
|
||||
function createMetaData(parent){ |
||||
var meta = ""; |
||||
meta = "<metadata><data><key>Type</key><value>Flash</value></data><data><key>Url</key><value>" + |
||||
parent.find("input:hidden").eq(0).val() + |
||||
"</value></data><data><key>Content</key><value>" + |
||||
parent.find("input:hidden").eq(1).val() + |
||||
"</value></data><data><key>Height</key><value>n/a</value></data>"+ |
||||
"<data><key>Width</key><value>n/a</value></data><data><key>Title</key><value>" + |
||||
parent.find("input:hidden").eq(4).val() + |
||||
"</value></data></metadata>"; |
||||
return meta; |
||||
} |
||||
</script> |
||||
|
||||
</head> |
||||
<body style="font-family: Arial;border: 0 none;"> |
||||
<div id="searchResult"></div> |
||||
</body> |
||||
</html> |
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
||||
<html xmlns="http://www.w3.org/1999/xhtml"> |
||||
<head> |
||||
<title>Planete Sankore Image Search</title> |
||||
<link rel="stylesheet" type="text/css" href="css/basic.css"/> |
||||
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script> |
||||
<script type="text/javascript"> |
||||
var category = "interactive"; |
||||
var thumbnails = false; |
||||
var minHeight = 177; |
||||
var minWidth = 150; |
||||
|
||||
var currentIndex = 0; |
||||
var currentTerm = ""; |
||||
var limit = 10; |
||||
var filtersDisplayed = false; //display or hide filters |
||||
|
||||
function addPaginationLinks(totalResults) { |
||||
var curPage = currentIndex; // check what page the app is on |
||||
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>"); |
||||
for (var i = 0; i < 8; i++) { |
||||
if (i * limit < totalResults) { |
||||
|
||||
var link = $("<a class='pager_button'></a>").attr('href', 'javascript:gotoPage('+i+');').html(i+1).appendTo(pagesDiv); |
||||
if (curPage == i) { |
||||
link.addClass('active'); |
||||
} |
||||
} |
||||
} |
||||
|
||||
$("#disc_nav_cont #resultFooter").remove(); |
||||
pagesDiv.insertBefore($('#disclaimer')); |
||||
|
||||
$(".imgContainer").each(function(){ |
||||
this.addEventListener("dragstart", imageDragging, false); |
||||
}) |
||||
|
||||
$(".imgContainer").each(function(){ |
||||
this.addEventListener("dragenter", imageDragenter, false); |
||||
}) |
||||
|
||||
$(".imgContainer").each(function(){ |
||||
this.addEventListener("dragleave", imageDragleave, false); |
||||
}) |
||||
|
||||
$(".imgContainer").each(function(){ |
||||
this.addEventListener("dragover", imageDragover, false); |
||||
}) |
||||
} |
||||
|
||||
function searchFail(jqXHR, textStatus, errorThrown) { |
||||
alert('Impossible to connect to Planete Sankore: ' + textStatus + ' ' + errorThrown); |
||||
} |
||||
|
||||
function searchComplete(json) { |
||||
// Grab our content div, clear it. |
||||
var totalResults = json.totalResults; |
||||
var contentDiv = $('#searchResult').empty(); |
||||
// Loop through our results, printing them to the page. |
||||
var results = json.rows; |
||||
for (var i = 0; i < results.length; i++) { |
||||
// For each result write it's title and image to the screen |
||||
var result = results[i]; |
||||
var imgContainer = $("<div class='imgContainer' draggable='true'>"); |
||||
var title = document.createElement('div'); |
||||
var iUrl = $("<input type='hidden'/>"); |
||||
var iContent = $("<input type='hidden'/>"); |
||||
var iHeight = $("<input type='hidden'/>"); |
||||
var iWidth = $("<input type='hidden'/>"); |
||||
var iTitle = $("<input type='hidden'/>"); |
||||
|
||||
// We use titleNoFormatting so that no HTML tags are left in the |
||||
// title |
||||
title.innerHTML = result.title; |
||||
var newImg = document.createElement('img'); |
||||
|
||||
// There is also a result.file property which has the escaped version |
||||
if (thumbnails) { |
||||
newImg.src = result.file; |
||||
} else { |
||||
newImg.src = "./images/thumbnail_icon.png"; |
||||
} |
||||
var imgWidth = (result.tbWidth > minWidth)?result.tbWidth:minWidth; |
||||
var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight; |
||||
imgContainer.width(imgWidth).height(imgHeight); |
||||
imgContainer.append($(newImg)); |
||||
iUrl.attr("value", result.file); |
||||
iContent.attr("value", result.title); |
||||
iHeight.attr("value", result.height); |
||||
iWidth.attr("value", result.width); |
||||
iTitle.attr("value",result.title); |
||||
imgContainer.append($(title)); |
||||
imgContainer.append(iUrl); |
||||
imgContainer.append(iContent); |
||||
imgContainer.append(iHeight); |
||||
imgContainer.append(iWidth); |
||||
imgContainer.append(iTitle); |
||||
|
||||
// Put our title + image in the content |
||||
imgContainer.appendTo(contentDiv); |
||||
|
||||
} |
||||
// Now add links to additional pages of search results. |
||||
addPaginationLinks(totalResults); |
||||
} |
||||
|
||||
function imageDragging(e){ |
||||
e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val()); |
||||
// alert($(this).find("input:hidden").eq(0).val()); |
||||
} |
||||
|
||||
function imageDragleave(e){ |
||||
return false; |
||||
} |
||||
|
||||
function imageDragover(e){ |
||||
return false; |
||||
} |
||||
|
||||
function imageDragenter(e){ |
||||
return false; |
||||
} |
||||
|
||||
$(document).ready(function(){ |
||||
|
||||
//variables |
||||
var mode = false; //search or view mode |
||||
var hide = false; //hide or no main panel |
||||
|
||||
//basic containers and elements |
||||
var disc_nav_cont = $("<div id='disc_nav_cont' class='disc_nav_cont'>").appendTo("body"); |
||||
var disclaimer = $("<div id='disclaimer' class='disclaimer'>Recherche de documents flash sur Planète Sankoré<div>").appendTo(disc_nav_cont); |
||||
var search = $("<div id='search' class='search'>").appendTo("body"); |
||||
|
||||
var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search); |
||||
var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages); |
||||
|
||||
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search); |
||||
var subSearchFilter = $("<div id='subSearchFilter' class='subSearch'>").appendTo(search); |
||||
|
||||
var searchInput = $("<input id='searchInput' class='searchInput' type='text'/>").appendTo(subSearchInput); |
||||
var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput); |
||||
// var toggleFilters = $("<div id='toggleFilters' class='toggleFilters'>").appendTo(subSearchInput); |
||||
|
||||
//adding filters to the wgt |
||||
var selectFilter = $("<select id='sizeFilter' class='filterSelect'>") |
||||
.append($("<option value='0'>Any</option>")) |
||||
.append($("<option value='1'>Small</option>")) |
||||
.append($("<option value='2'>Medium</option>")) |
||||
.append($("<option value='3'>Large</option>")) |
||||
.append($("<option value='4'>Extra large</option>")); |
||||
$("<div class='filterContainer'>").append("<span>Size:</span>").append(selectFilter).appendTo(subSearchFilter); |
||||
|
||||
//mouse click actions |
||||
/* |
||||
toggleFilters.click(function(){ |
||||
if(filtersDisplayed){ |
||||
subSearchFilter.hide(); |
||||
toggleFilters.css("background-image","url(images/down.png)"); |
||||
filtersDisplayed = false; |
||||
} else { |
||||
subSearchFilter.show(); |
||||
toggleFilters.css("background-image","url(images/up.png)"); |
||||
filtersDisplayed = true; |
||||
} |
||||
}); |
||||
*/ |
||||
|
||||
/*togglePages.click(function(event){ |
||||
if(mode){ |
||||
hide = false; |
||||
$("#search, #disclaimer").slideDown('slow', function(){ |
||||
toggleIcon.css("background-image","url(images/trgUp.png)"); |
||||
togglePages.appendTo("#search").css("top","").css("bottom","-14px"); |
||||
}); |
||||
mode = false; |
||||
} else { |
||||
hide = true; |
||||
$("#search, #disclaimer").slideUp('slow', function(){ |
||||
toggleIcon.css("background-image","url(images/trgDown.png)"); |
||||
togglePages.appendTo("body").css("top","0"); |
||||
}); |
||||
mode = true; |
||||
} |
||||
});*/ |
||||
|
||||
searchButton.click(function(){ |
||||
if(!hide){ |
||||
runSearch(searchInput.val(), 0); |
||||
//togglePages.trigger("click"); |
||||
} |
||||
}); |
||||
|
||||
searchInput.keydown(function(event){ |
||||
if(!hide){ |
||||
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){ |
||||
runSearch(searchInput.val(), 0); |
||||
//togglePages.trigger("click"); |
||||
} |
||||
|
||||
} |
||||
}); |
||||
( |
||||
$(".imgContainer").live("click",function(){ |
||||
sankore.sendFileMetadata(createMetaData($(this))); |
||||
})); |
||||
|
||||
/*$(window).resize(function(){ |
||||
disclaimer.width($("body").width()-20); |
||||
search.width($("body").width()-20); |
||||
toggleIcon.css("margin-left",(togglePages.width()/2 - 7)); |
||||
})*/ |
||||
|
||||
}); |
||||
|
||||
function gotoPage(i) { |
||||
runSearch(currentTerm, i); |
||||
} |
||||
|
||||
// launching the search on planete sankore |
||||
function runSearch(term, index) { |
||||
currentTerm = term; |
||||
currentIndex = index; |
||||
var start = index * limit; |
||||
var url = "http://planete.sankore.org/xwiki/bin/view/Search/Resources?xpage=plain&category=" + category + "&level=&sort=title&dir=ASC&terms=" + escape(term) + "&start=" + start + "&limit=" + limit; |
||||
$.ajax({ |
||||
url: url, |
||||
success: searchComplete, |
||||
error: searchFail, |
||||
dataType: "json" |
||||
}); |
||||
} |
||||
|
||||
function createMetaData(parent){ |
||||
var meta = ""; |
||||
meta = "<metadata><data><key>Type</key><value>Flash</value></data><data><key>Url</key><value>" + |
||||
parent.find("input:hidden").eq(0).val() + |
||||
"</value></data><data><key>Content</key><value>" + |
||||
parent.find("input:hidden").eq(1).val() + |
||||
"</value></data><data><key>Height</key><value>n/a</value></data>"+ |
||||
"<data><key>Width</key><value>n/a</value></data><data><key>Title</key><value>" + |
||||
parent.find("input:hidden").eq(4).val() + |
||||
"</value></data></metadata>"; |
||||
return meta; |
||||
} |
||||
</script> |
||||
|
||||
</head> |
||||
<body style="font-family: Arial;border: 0 none;"> |
||||
<div id="searchResult"></div> |
||||
</body> |
||||
</html> |
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,318 +1,318 @@ |
||||
html, body{ |
||||
width: 100%; |
||||
padding: 0; |
||||
height: auto; |
||||
background-color: white; |
||||
margin: 0; |
||||
} |
||||
|
||||
::-webkit-scrollbar { |
||||
width: 14px; |
||||
background-color:white; |
||||
} |
||||
|
||||
|
||||
::-webkit-scrollbar-thumb { |
||||
border-radius: 10px; |
||||
background-color:lightgray; |
||||
border: 2px solid gray; |
||||
} |
||||
|
||||
::-webkit-scrollbar-button:vertical:start{ |
||||
border-radius: 10px; |
||||
background-color:lightgray; |
||||
background-image: url(../images/trgUp.png); |
||||
background-size: 8px auto; |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
border: 2px solid gray; |
||||
} |
||||
|
||||
::-webkit-scrollbar-button:vertical:end{ |
||||
border-radius: 10px; |
||||
background-color:lightgray; |
||||
background-image: url(../images/trgDown.png); |
||||
background-size: 8px auto; |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
border: 2px solid gray; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
#disc_nav_cont{ |
||||
height: auto; |
||||
position: fixed; |
||||
left: 0; |
||||
bottom: 0; |
||||
width: 100%; |
||||
} |
||||
|
||||
.disclaimer{ |
||||
padding: 5px; |
||||
text-align: center; |
||||
background-color: #BBBBBB; |
||||
border-top: solid 4px #EEEEEE; |
||||
border-bottom: none; |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.resultFooter{ |
||||
width: 100%; |
||||
padding: 3px; |
||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||
font-weight: bold; |
||||
font-size: x-large; |
||||
text-align: center; |
||||
background-color: white; |
||||
} |
||||
|
||||
#searchResult { |
||||
overflow: hidden; |
||||
text-align: center; |
||||
margin-top: 50px; |
||||
margin-bottom: 50px; |
||||
} |
||||
|
||||
.search{ |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
padding: 5px; |
||||
background-color: #BBBBBB; |
||||
border-bottom: solid 4px #EEEEEE; |
||||
} |
||||
|
||||
.search, |
||||
.disclaimer { |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
} |
||||
|
||||
.toggleIcon{ |
||||
display: inline-block; |
||||
width: 14px; |
||||
height: 14px; |
||||
background: url(../images/trgUp.png) 50% no-repeat; |
||||
|
||||
} |
||||
|
||||
.searchInput{ |
||||
padding: 3px; |
||||
float: left; |
||||
width: 100%; |
||||
border-radius: 3px; |
||||
border-style: none; |
||||
height: 22px; |
||||
line-height: 18px; |
||||
vertical-align: middle; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
} |
||||
|
||||
.searchButton{ |
||||
background: url("../images/search_app.png") -38px -38px no-repeat; |
||||
width: 24px; |
||||
height: 24px; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
right: 30px; |
||||
top: 9px; |
||||
margin-left: -2px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.subSearch{ |
||||
margin: 0; |
||||
float: left; |
||||
} |
||||
|
||||
#subSearchInput{ |
||||
width: 100%; |
||||
float: left; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
padding: 5px; |
||||
padding-right: 26px; |
||||
} |
||||
|
||||
#subSearchFilter{ |
||||
width: 100%; |
||||
float: left; |
||||
display: none; |
||||
} |
||||
|
||||
.searchResult{ |
||||
width: 98%; |
||||
padding: 3px; |
||||
|
||||
background-color:#123456; |
||||
} |
||||
|
||||
.imgContainer{ |
||||
display: inline-block; |
||||
padding: 3px; |
||||
margin: 3px; |
||||
text-align: center; |
||||
overflow: hidden; |
||||
font-size: small; |
||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||
vertical-align: top; |
||||
} |
||||
|
||||
.filterContainer{ |
||||
float: left; |
||||
margin: 2px; |
||||
padding: 2px; |
||||
font-size: 14px; |
||||
|
||||
} |
||||
|
||||
.filterSelect{ |
||||
border-style:none; |
||||
-webkit-border-top-right-radius: 15px; |
||||
-webkit-border-bottom-right-radius: 15px; |
||||
-moz-border-radius-topright: 15px; |
||||
-moz-border-radius-bottomright: 15px; |
||||
border-top-right-radius: 15px; |
||||
margin-top: 2px; |
||||
width: 100%; |
||||
} |
||||
|
||||
span{ |
||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||
color: #666; |
||||
} |
||||
|
||||
[draggable] { |
||||
-webkit-user-select: none; |
||||
user-select: none; |
||||
} |
||||
|
||||
.toggleFilters{ |
||||
margin: 0; |
||||
padding: 0; |
||||
background-position: center; |
||||
background-image: url(../images/down.png); |
||||
position: absolute; |
||||
top: 11px; |
||||
right: 6px; |
||||
width: 20px; |
||||
height: 20px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.colors_line { |
||||
float: left; |
||||
margin: 4px; |
||||
margin-right: 0; |
||||
clear: left; |
||||
} |
||||
|
||||
.custom { |
||||
opacity: 0; |
||||
position: absolute; |
||||
left: -10000px; |
||||
} |
||||
|
||||
.filter_button.button.color { |
||||
display: inline-block; |
||||
width: 15px; |
||||
height: 15px; |
||||
border: 1px solid #EBEBEB; |
||||
padding: 0; |
||||
margin: 0; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
} |
||||
|
||||
.filter_button.button.color:hover { |
||||
border: 1px solid rgb(128,128,128); |
||||
cursor: pointer; |
||||
} |
||||
|
||||
input[type="radio"]:checked + .filter_button.button.color { |
||||
border: 1px solid rgb(255,255,255); |
||||
box-shadow: 0 0 0px 1px #000; |
||||
-webkit-box-shadow: 0 0 0px 1px #000; |
||||
} |
||||
|
||||
#allcolor { |
||||
background: white url('../images/search_app.png') -43px -144px no-repeat; |
||||
} |
||||
|
||||
#colored { |
||||
background: white url('../images/search_app.png') -43px -244px no-repeat; |
||||
} |
||||
|
||||
#grayed { |
||||
background: white url('../images/search_app.png') -45px -343px no-repeat; |
||||
} |
||||
|
||||
#black{ |
||||
background-color:#ffffff; |
||||
} |
||||
#blue{ |
||||
background-color:#0000FF; |
||||
} |
||||
#brown{ |
||||
background-color:rgba(139, 82, 16, 1); |
||||
} |
||||
|
||||
#gray{ |
||||
background-color:#999999; |
||||
} |
||||
|
||||
#green{ |
||||
background-color:#00CC00; |
||||
} |
||||
|
||||
#orange{ |
||||
background-color:#FB940B; |
||||
} |
||||
|
||||
#pink{ |
||||
background-color:#FF98BF; |
||||
} |
||||
|
||||
#purple{ |
||||
background-color:#762CA7; |
||||
} |
||||
|
||||
#red{ |
||||
background-color:#CC0000; |
||||
} |
||||
|
||||
#teal{ |
||||
background-color:#03C0C6; |
||||
} |
||||
|
||||
#white{ |
||||
background-color:#000000; |
||||
} |
||||
|
||||
#yellow{ |
||||
background-color:#FFFF00; |
||||
} |
||||
|
||||
.selectBox-dropdown, .selectBox-options li a { |
||||
line-height: 1.3 !important; |
||||
font-size: 13px; |
||||
} |
||||
|
||||
.pager_button { |
||||
padding: 3px 5px; |
||||
font-size: 16px; |
||||
color: black; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.pager_button.active { |
||||
border-radius: 3px; |
||||
-webkit-border-radius: 3px; |
||||
background-color: gray; |
||||
color: white; |
||||
} |
||||
html, body{ |
||||
width: 100%; |
||||
padding: 0; |
||||
height: auto; |
||||
background-color: white; |
||||
margin: 0; |
||||
} |
||||
|
||||
::-webkit-scrollbar { |
||||
width: 14px; |
||||
background-color:white; |
||||
} |
||||
|
||||
|
||||
::-webkit-scrollbar-thumb { |
||||
border-radius: 10px; |
||||
background-color:lightgray; |
||||
border: 2px solid gray; |
||||
} |
||||
|
||||
::-webkit-scrollbar-button:vertical:start{ |
||||
border-radius: 10px; |
||||
background-color:lightgray; |
||||
background-image: url(../images/trgUp.png); |
||||
background-size: 8px auto; |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
border: 2px solid gray; |
||||
} |
||||
|
||||
::-webkit-scrollbar-button:vertical:end{ |
||||
border-radius: 10px; |
||||
background-color:lightgray; |
||||
background-image: url(../images/trgDown.png); |
||||
background-size: 8px auto; |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
border: 2px solid gray; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
#disc_nav_cont{ |
||||
height: auto; |
||||
position: fixed; |
||||
left: 0; |
||||
bottom: 0; |
||||
width: 100%; |
||||
} |
||||
|
||||
.disclaimer{ |
||||
padding: 5px; |
||||
text-align: center; |
||||
background-color: #BBBBBB; |
||||
border-top: solid 4px #EEEEEE; |
||||
border-bottom: none; |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.resultFooter{ |
||||
width: 100%; |
||||
padding: 3px; |
||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||
font-weight: bold; |
||||
font-size: x-large; |
||||
text-align: center; |
||||
background-color: white; |
||||
} |
||||
|
||||
#searchResult { |
||||
overflow: hidden; |
||||
text-align: center; |
||||
margin-top: 50px; |
||||
margin-bottom: 85px; |
||||
} |
||||
|
||||
.search{ |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
padding: 5px; |
||||
background-color: #BBBBBB; |
||||
border-bottom: solid 4px #EEEEEE; |
||||
} |
||||
|
||||
.search, |
||||
.disclaimer { |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
} |
||||
|
||||
.toggleIcon{ |
||||
display: inline-block; |
||||
width: 14px; |
||||
height: 14px; |
||||
background: url(../images/trgUp.png) 50% no-repeat; |
||||
|
||||
} |
||||
|
||||
.searchInput{ |
||||
padding: 3px; |
||||
float: left; |
||||
width: 100%; |
||||
border-radius: 3px; |
||||
border-style: none; |
||||
height: 22px; |
||||
line-height: 18px; |
||||
vertical-align: middle; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
} |
||||
|
||||
.searchButton{ |
||||
background: url("../images/search_app.png") -38px -38px no-repeat; |
||||
width: 24px; |
||||
height: 24px; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
right: 30px; |
||||
top: 9px; |
||||
margin-left: -2px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.subSearch{ |
||||
margin: 0; |
||||
float: left; |
||||
} |
||||
|
||||
#subSearchInput{ |
||||
width: 100%; |
||||
float: left; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
padding: 5px; |
||||
padding-right: 26px; |
||||
} |
||||
|
||||
#subSearchFilter{ |
||||
width: 100%; |
||||
float: left; |
||||
display: none; |
||||
} |
||||
|
||||
.searchResult{ |
||||
width: 98%; |
||||
padding: 3px; |
||||
|
||||
background-color:#123456; |
||||
} |
||||
|
||||
.imgContainer{ |
||||
display: inline-block; |
||||
padding: 3px; |
||||
margin: 3px; |
||||
text-align: center; |
||||
overflow: hidden; |
||||
font-size: small; |
||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||
vertical-align: top; |
||||
} |
||||
|
||||
.filterContainer{ |
||||
float: left; |
||||
margin: 2px; |
||||
padding: 2px; |
||||
font-size: 14px; |
||||
|
||||
} |
||||
|
||||
.filterSelect{ |
||||
border-style:none; |
||||
-webkit-border-top-right-radius: 15px; |
||||
-webkit-border-bottom-right-radius: 15px; |
||||
-moz-border-radius-topright: 15px; |
||||
-moz-border-radius-bottomright: 15px; |
||||
border-top-right-radius: 15px; |
||||
margin-top: 2px; |
||||
width: 100%; |
||||
} |
||||
|
||||
span{ |
||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||
color: #666; |
||||
} |
||||
|
||||
[draggable] { |
||||
-webkit-user-select: none; |
||||
user-select: none; |
||||
} |
||||
|
||||
.toggleFilters{ |
||||
margin: 0; |
||||
padding: 0; |
||||
background-position: center; |
||||
background-image: url(../images/down.png); |
||||
position: absolute; |
||||
top: 11px; |
||||
right: 6px; |
||||
width: 20px; |
||||
height: 20px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.colors_line { |
||||
float: left; |
||||
margin: 4px; |
||||
margin-right: 0; |
||||
clear: left; |
||||
} |
||||
|
||||
.custom { |
||||
opacity: 0; |
||||
position: absolute; |
||||
left: -10000px; |
||||
} |
||||
|
||||
.filter_button.button.color { |
||||
display: inline-block; |
||||
width: 15px; |
||||
height: 15px; |
||||
border: 1px solid #EBEBEB; |
||||
padding: 0; |
||||
margin: 0; |
||||
box-sizing: border-box; |
||||
-webkit-box-sizing: border-box; |
||||
} |
||||
|
||||
.filter_button.button.color:hover { |
||||
border: 1px solid rgb(128,128,128); |
||||
cursor: pointer; |
||||
} |
||||
|
||||
input[type="radio"]:checked + .filter_button.button.color { |
||||
border: 1px solid rgb(255,255,255); |
||||
box-shadow: 0 0 0px 1px #000; |
||||
-webkit-box-shadow: 0 0 0px 1px #000; |
||||
} |
||||
|
||||
#allcolor { |
||||
background: white url('../images/search_app.png') -43px -144px no-repeat; |
||||
} |
||||
|
||||
#colored { |
||||
background: white url('../images/search_app.png') -43px -244px no-repeat; |
||||
} |
||||
|
||||
#grayed { |
||||
background: white url('../images/search_app.png') -45px -343px no-repeat; |
||||
} |
||||
|
||||
#black{ |
||||
background-color:#ffffff; |
||||
} |
||||
#blue{ |
||||
background-color:#0000FF; |
||||
} |
||||
#brown{ |
||||
background-color:rgba(139, 82, 16, 1); |
||||
} |
||||
|
||||
#gray{ |
||||
background-color:#999999; |
||||
} |
||||
|
||||
#green{ |
||||
background-color:#00CC00; |
||||
} |
||||
|
||||
#orange{ |
||||
background-color:#FB940B; |
||||
} |
||||
|
||||
#pink{ |
||||
background-color:#FF98BF; |
||||
} |
||||
|
||||
#purple{ |
||||
background-color:#762CA7; |
||||
} |
||||
|
||||
#red{ |
||||
background-color:#CC0000; |
||||
} |
||||
|
||||
#teal{ |
||||
background-color:#03C0C6; |
||||
} |
||||
|
||||
#white{ |
||||
background-color:#000000; |
||||
} |
||||
|
||||
#yellow{ |
||||
background-color:#FFFF00; |
||||
} |
||||
|
||||
.selectBox-dropdown, .selectBox-options li a { |
||||
line-height: 1.3 !important; |
||||
font-size: 13px; |
||||
} |
||||
|
||||
.pager_button { |
||||
padding: 3px 5px; |
||||
font-size: 16px; |
||||
color: black; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.pager_button.active { |
||||
border-radius: 3px; |
||||
-webkit-border-radius: 3px; |
||||
background-color: gray; |
||||
color: white; |
||||
} |
||||
|
||||
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 214 B After Width: | Height: | Size: 214 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 931 B After Width: | Height: | Size: 931 B |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue