Valider 9ab7d6b7 rédigé par cerdic's avatar cerdic
Parcourir les fichiers

formulaire de recherche de l'espace prive, suite. 

- Fonctionnel :

le formulaire de recherche est derogatoire : on attend de lui qu'il envoie en GET pour pouvoir avoir &recherche dans l'url, utiliser l'historique de navigation, et se passer un lien de recherche. Mais ce faisant il embarque aussi les variables du submit, ce qui est disgracieux. Si en plus on veut l'ajaxer il faut y ajouter les parametres techniques du CVT, ce qui est pire et peu acceptable en GET. 
On choisit donc d'implementer le fonctionnement attendu par du javascript qui reporte le &recherche=xx dans un lien, ce qui fait que le formulaire se comporte comme un lien en presence de javascript et comme un formulaire en GET en son absence.
Corrolairement, si on y passe une classe ajax, le formulaire se comportera comme un lien ajax (ou comme un bouton action), provoquant le rechargement du plus petit conteneur ajax, avec &recherche=xxx dans les parametres.
La syntaxe de cet usage est donc :
#FORMULAIRE_RECHERCHE_ECRIRE{#SELF,ajax}

- Visuel : on separe visuellement le bouton submit du champ de saisie et on revoit la css pour que saisie et submit soient tout de meme dans un bloc unique quelle que soit la hauteur du champ de saisie (taille de police). Ca pourra encore bouger de ce cote la.
parent 91b93a26

prive/formulaires/recherche_ecrire.html

+16 −12
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff 
<div class="formulaire_spip formulaire_recherche">

<form action="[(#ENV{action})]" method="post"><div>

	#ACTION_FORMULAIRE

<form action="[(#ENV{action})]" method="get"><div>

	[(#ENV{action}|form_hidden)]

	[<input type="hidden" name="lang" value="(#ENV{lang})" />]

	<label for="#ENV{id,recherche}"><:info_rechercher_02:></label>

	<label for="#ENV{id_champ,recherche}"><:info_rechercher_02:></label>

	<input type="text"

				 class="text[(#ENV{recherche}|oui) cancelable]"

				 size="10"

				 name="recherche"

				 id="#ENV{id,recherche}"[ value="(#ENV{recherche}|sinon{<:info_rechercher:>})"]

				 id="#ENV{id_champ,recherche}"[ value="(#ENV{recherche}|sinon{<:info_rechercher:>})"]

	[(#ENV{recherche}|non) onfocus="if(!$(this).attr('data-done')){$(this).val('');$(this).attr('data-done','1');}"]

	/><input type='image'

	/>[<a

	(#ENV{recherche}|oui)

		class="cancel[ (#ENV{class,''})]"

		href="[(#ENV{action}|parametre_url{'recherche',''})]"

		onclick="$(this).siblings('input.text').val('')"

		title='<:annuler_recherche|attribut_html:>'>[(#CHEMIN_IMAGE{fermer-16.png}

	|balise_img

	|inserer_attribut{alt,<:annuler_recherche:>})]</a>]<input type='image'

					 src='[(#CHEMIN_IMAGE{rechercher-20.png})]'

					 name='submit'

					 class="image"

					 alt='<:info_rechercher|attribut_html:>' />[<a

	(#ENV{recherche}|oui)

		class="cancel"

		href="#ENV{action}"

		onclick="$(this).siblings('input.text').val('').siblings('input.image').click();return false;"

		title='<:annuler_recherche|attribut_html:>'>[(#CHEMIN_IMAGE{fermer-16.png}|balise_img|inserer_attribut{alt,<:annuler_recherche:>})]</a>]

					 alt='<:info_rechercher|attribut_html:>'

					 onclick="var a=$(this).siblings('a.refresh');a.attr('href',parametre_url(a.attr('href'),'recherche',$(this).siblings('input.text').val())).followLink();return false;"

	/><a class="none[ (#ENV{class,''})] refresh" href="[(#ENV{action}|parametre_url{'recherche',''})]"><:info_rechercher:></a>

</div></form>



</div>

prive/formulaires/recherche_ecrire.php

+3 −2
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -13,7 +13,7 @@ 
if (!defined('_ECRIRE_INC_VERSION')) return;



// chargement des valeurs par defaut des champs du formulaire

function formulaires_recherche_ecrire_charger_dist($action = ''){

function formulaires_recherche_ecrire_charger_dist($action = '',$class=''){

	if ($GLOBALS['spip_lang'] != $GLOBALS['meta']['langue_site'])

		$lang = $GLOBALS['spip_lang'];

	else
@@ -23,7 +23,8 @@ function formulaires_recherche_ecrire_charger_dist($action = ''){ 
		array(

			'action' => ($action ? $action : generer_url_ecrire('recherche')), # action specifique, ne passe pas par Verifier, ni Traiter

			'recherche' => _request('recherche'),

			'lang' => $lang

			'lang' => $lang,

			'class' => $class,

		);

}

prive/style_prive.html

+4 −4
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -440,12 +440,12 @@ div.brouteur_rubrique_on div a { color: #000; } 
.spip_recherche .recherche { float:[(#GET{left})];padding:3px;padding-#GET{right}:30px;width: 186px;font-size: 10px; border: 1px solid #fff; background-color: #GET{foncee}; color: #fff; margin: 0 0 6px; }

.spip_recherche .submit {float: [(#GET{left})];margin-#GET{left}:-24px;margin-top:1px;}

/* version moderne */

.formulaire_spip.formulaire_recherche { float: [(#GET{right})]; border:0;background:none;}

.formulaire_spip.formulaire_recherche .text{ float:[(#GET{left})];padding:3px;padding-#GET{right}:30px;width: 220px;font-size: 10px; border: 1px solid #fff; background-color: #GET{foncee}; color: #fff; margin: 0 0 6px; }

.formulaire_spip.formulaire_recherche { float: [(#GET{right})]; border:0;background:none;border: 1px solid #fff; background-color: [#(#GET{foncee}|couleur_foncer)]; margin: 0 0 6px;}

.formulaire_spip.formulaire_recherche .text{ float:[(#GET{left})];padding:3px;width: 200px;background-color:#GET{foncee};border:none;border-right:1px solid #fff;font-size: 10px; color: #fff;  margin:0;min-height:20px;}

.formulaire_spip.formulaire_recherche .text.cancelable {padding-#GET{left}:20px}

.formulaire_spip.formulaire_recherche .cancel {float: [(#GET{left})];margin-#GET{left}:-218px;margin-top:3px;}

.formulaire_spip.formulaire_recherche .cancel {float: [(#GET{left})];margin-#GET{left}:-198px;margin-top:2px;line-height:1px;}

.formulaire_spip.formulaire_recherche label {display:none;}

.formulaire_spip.formulaire_recherche .submit,.formulaire_spip.formulaire_recherche .image {float: [(#GET{left})];margin-#GET{left}:-24px;margin-top:1px;}

.formulaire_spip.formulaire_recherche .submit,.formulaire_spip.formulaire_recherche .image {float: [(#GET{left})];margin-top:0px;padding:0 2px;}



.boutonlien { font-weight: bold; font-size: 9px; }

a.boutonlien:hover { color: #454545; text-decoration: none; }

Forge communautaire SPIP | Charte d'utilisation | Signaler un problème sur ce site