Cette action utilise un fork d'un script de gurudaths. Il permet de rechercher et surligner du texte dans la page.
syntaxe
{up page-search}@author: LOMART @version: UP-2.7 @license: GNU/GPLv3 @credit: fork of script Fast Live Search de gurudaths @tags: Widget
- page_search = body: sélecteur CSS du bloc où rechercher. J3=.article-details OU J4=.com-content-article__body
Position de la zone de recherche
- search-top = 80px: position verticale de la zone de recherche. positif: top, négatif: bottom
- search-left = 80px: position horizontale de la zone de recherche. positif=left, négatif= right
Icone et texte de la zone de recherche
- search-icon = loupe-64-red.png: image pour le bouton. Si le chemin n'est pas indiqué, l'image est dans le dossier de l'action.
- search-text = lang[en=Search;fr=Rechercher]: texte indice dans la zone de recherche (Placeholder)
Mise en évidence du résultat
- highlight-bg = yellow: couleur de surlignage des mots trouvés
Style CSS
- id: id genérée automatiquement par UP
- class: classe(s) ajoutées au bloc principal
- style: style inline ajouté au bloc principal
- css-head (base-css): style ajouté dans le HEAD de la page
un exemple unique
Comme il n'est pas possible d'avoir plusieurs fois cette action sur une même page, ma démonstration se doit de montrer les possibilités.
Rassurez-vous, un shortcode simple comme {up page-search} est possible, comme vous pouvez le voir sur cette page.
{up page-search = .selon-votre-template
| search-left=-50 | search-top=-150
| search-icon=/plugins/content/up/actions/page_search/loupe.svg
| search-text=tapez ici le texte recherché
| highlight-bg=pink
| class=bg-orange p1 | style=border:red 2px dotted
| css-head=.highlight[color:white]}Ce shortcode affiche l'icône avec une loupe que vous pouvez voir en bas à droite. Une zone de saisie apparaît au survol. Au fur et à mesure de la saisie, le texte est surligné dans la page.
- page-search : l'option principale de l'action permet de définir le bloc dans lequel seront effectuées les recherches.
Par défaut, c'est body pour l'intégralité de la page, mais vous pouvez limiter au contenu en indiquant le sélecteur CSS du contenu.article-detailspour Joomla 3 et.com-contentpour Joomla 4 Cassiopeia. A adapter selon votre template. - search-left et search-right définissent la position en pixels de l'icône dans la fenêtre visible. Important : Une valeur positive place l'origine en haut et/ou à gauche, Alors qu'une valeur négative permet de placer l'icône en bas et /ou à droite. Par défaut, l'icône est à 100px du haut-gauche. Important: mettre uniquement la valeur sans mentionner l'unité.
- search-icon : l'image utilisée pour le bouton recherche. Par défaut, il s'agit de "loupe-64-red.png". Si le chemin n'est pas indiqué, l'image est recherchée dans le dossier de l'action. "/images/icon/loupe.png" utilisera l'image du dossier spécifié.
- search-text :il s'agit du texte indice (placeholder) dans la zone de recherche. Par défaut, le texte est proposé en anglais et français avec cette valeur :
lang[en=Search;fr=Rechercher] - highlight-bg : couleur du surlignage. Yellow par défaut. Le style peut être modifié avec la class highlight. Voir option css-head en ligne 7
- class et style : pour personnaliser le bloc de recherche
- css-head : définit des styles en inline. Ici, mettre en blanc le texte surligné.
Pour info, cette page utilise 4 action(s) :
upactionslist (1) page-search (1) listup (1) jcontent-info (1)
upactionslist (1) page-search (1) listup (1) jcontent-info (1)