UP permet de réaliser de nombreuses actions dans les articles et modules personnalisés.
UP permet d'insérer des éléments comme une vidéo ou des prévisions météo, de modifier le comportement d'une table pour la rendre responsive, d'ajouter du code CSS/JS sans risque de suppression par les éditeurs wysiwyg.
A l'image du couteau suisse, UP très discret si on n'a pas besoin de lui (zéro octet sur la page), servira de chef d'orchestre pour lancer l'action demandée. Seuls les fichiers nécessaires à cette action seront chargés par le navigateur client.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat aequius Triarium aliquid de dissensione nostra iudicare. Idem etiam dolorem saepe perpetiuntur, ne, si id non faciant, incidant in maiorem. Equidem soleo etiam quod uno Graeci, si aliter non possum, idem pluribus verbis exponere. At negat Epicurus-hoc enim vestrum lumen estquemquam, qui honeste non vivat, iucunde posse vivere. Duo Reges: constructio interrete. Videmusne ut pueri ne verberibus quidem a contemplandis rebus perquirendisque deterreantur? Hoc ne statuam quidem dicturam pater aiebat, si loqui posset. Cur igitur, cum de re conveniat, non malumus usitate loqui? Dic in quovis conventu te omnia facere, ne doleas.
Tollitur beneficium, tollitur gratia, quae sunt vincla concordiae. Non est ista, inquam, Piso, magna dissensio. Qui igitur convenit ab alia voluptate dicere naturam proficisci, in alia summum bonum ponere? Et hercule-fatendum est enim, quod sentio -mirabilis est apud illos contextus rerum. Longum est enim ad omnia respondere, quae a te dicta sunt.
Ergo et avarus erit, sed finite, et adulter, verum habebit modum, et luxuriosus eodem modo. Ut enim consuetudo loquitur, id solum dicitur honestum, quod est populari fama gloriosum. Hic nihil fuit, quod quaereremus. Ut enim consuetudo loquitur, id solum dicitur honestum, quod est populari fama gloriosum. Quis enim potest ea, quae probabilia videantur ei, non probare? Tu vero, inquam, ducas licet, si sequetur; Idemque diviserunt naturam hominis in animum et corpus. Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. Si qua in iis corrigere voluit, deteriora fecit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuius similitudine perspecta in formarum specie ac dignitate transitum est ad honestatem dictorum atque factorum. Optime, inquam. Nihilne est in his rebus, quod dignum libero aut indignum esse ducamus? Quid Zeno? Nec vero intermittunt aut admirationem earum rerum, quae sunt ab antiquis repertae, aut investigationem novarum. Quod idem cum vestri faciant, non satis magnam tribuunt inventoribus gratiam. Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Duo Reges: constructio interrete. Atqui, inquam, Cato, si istud optinueris, traducas me ad te totum licebit. At iam decimum annum in spelunca iacet. Ut necesse sit omnium rerum, quae natura vigeant, similem esse finem, non eundem.
Aperiendum est igitur, quid sit voluptas; Cur post Tarentum ad Archytam? Mihi enim erit isdem istis fortasse iam utendum. Omnes enim iucundum motum, quo sensus hilaretur. Sed ego in hoc resisto; Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Quorum altera prosunt, nocent altera. De vacuitate doloris eadem sententia erit. Hoc dixerit potius Ennius: Nimium boni est, cui nihil est mali. An ea, quae per vinitorem antea consequebatur, per se ipsa curabit? In schola desinis.
Bork Atqui perspicuum est hominem e corpore animoque constare, cum primae sint animi partes, secundae corporis. Quae contraria sunt his, malane?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia? Quamvis enim depravatae non sint, pravae tamen esse possunt. Quod non faceret, si in voluptate summum bonum poneret. Non potes, nisi retexueris illa. Nonne videmus quanta perturbatio rerum omnium consequatur, quanta confusio? Duo Reges: constructio interrete. Atqui haec patefactio quasi rerum opertarum, cum quid quidque sit aperitur, definitio est. Nonne videmus quanta perturbatio rerum omnium consequatur, quanta confusio?
Ergo hoc quidem apparet, nos ad agendum esse natos. Que Manilium, ab iisque M. Profectus in exilium Tubulus statim nec respondere ausus; Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Istic sum, inquit.
Theophrastus mediocriterne delectat, cum tractat locos ab Aristotele ante tractatos? Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Ut optime, secundum naturam affectum esse possit. Sed tamen intellego quid velit. Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. Gloriosa ostentatio in constituendo summo bono. Immo vero, inquit, ad beatissime vivendum parum est, ad beate vero satis. Quare conare, quaeso.
3 :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ad rem redeamus; Re mihi non aeque satisfacit, et quidem locis pluribus. An potest, inquit ille, quicquam esse suavius quam nihil dolere? Easdemne res?
Negat enim summo bono afferre incrementum diem. Quod cum dixissent, ille contra.Conferam tecum, quam cuique verso rem subicias; Ait enim se, si uratur, Quam hoc suave! dicturum. Quae qui non vident, nihil umquam magnum ac cognitione dignum amaverunt. Si alia sentit, inquam, alia loquitur, numquam intellegam quid sentiat;
Nihil enim hoc differt. Duo Reges: constructio interrete. Igitur neque stultorum quisquam beatus neque sapientium non beatus. Rationis enim perfectio est virtus; Non semper, inquam; Ut in geometria, prima si dederis, danda sunt omnia. Quae qui non vident, nihil umquam magnum ac cognitione dignum amaverunt. A primo, ut opinor, animantium ortu petitur origo summi boni. Quis est tam dissimile homini. Sed in rebus apertissimis nimium longi sumus. Dolor ergo, id est summum malum, metuetur semper, etiamsi non aderit; Atqui iste locus est, Piso, tibi etiam atque etiam confirmandus, inquam;
une vidéo locale
et beaucoup d'autres choses, bidules, trucs ....
🆙 addclass : ajoute une classe à un sélecteur CSS (body par défaut.) ➠ DEMO
Il est possible : - de cibler le parent d'un sélecteur CSS ou être relatif à l'emplacement du shortcode - de créer la règle CSS avec l'option 'css-head=.foo[color:red]' syntaxe {up addclass=nom_classe} Utilisation : changer l'image de fond à partir d'un article
*
selector = body: balise cible. Ne pas oublier le point pour une classe ou le # pour un ID
parent: 1 si on cible le parent de selector, 2 le grand-père, ...
options secondaires
id: identifiant
css-head (base-css): code CSS pour head. Attention utiliser [] au lieu de {}
filter: conditions. Voir doc action filter (v1.8)
🆙 addcodehead : ajoute du code libre dans le head. ➠ DEMO
possibilité d'ajouter du code libre dans le head sans risque de nettoyage par un éditeur WYSIWYG syntaxe 1 {up addCodeHead=} syntaxe 2 {up addCodeHead=meta | property=og:title | content=Page title} Attention : l'option XXX doit être remplacée directement dans le shortcode par un nom d'attribut et sa valeur
🆙 addcsshead : ajoute du code ou fichier CSS dans le head. ➠ DEMO
sans risque de nettoyage par un éditeur WYSIWYG syntaxe 1 {up addCssHead=.foo[color:red]} Attention: mettre des [ ] au lieu de {} syntaxe 2 {up addCssHead}.foo{color:red}{/up addCssHead} syntaxe 3 {up addCssHead=chemin_fichier_css} Utilisation : charger un fichier CSS spécifique à une page
addfilehead: liste des fichiers ou URL. séparateur virgule
filter: conditions. Voir doc action filter (v1.8)
🆙 addscript : ajoute du code ou un fichier JS ou JQuery ➠ DEMO
Par défaut, le code est ajouté dans le head. Si le paramètre principal est body, le code est inséré à la position du shortcode syntaxe {up addScript=body | jquery }code ou fichier{/up addScript}
addscript = head: ou body pour insérer le code à la position du shortcode
jquery: 1: entoure avec appel jquery (sauf fichier)
filter: conditions. Voir doc action filter (v1.8)
id: identifiant
🆙 ajax_view : Affiche un bouton pour charger le contenu d'un article ou un fichier ➠ DEMO
il est possible de demander un mot de passe syntaxe {up ajax-view=999 | btn-label=Voir un article} syntaxe {up ajax-view=fichier.ext | btn-label=afficher un fichier} syntaxe {up ajax-view=fichier.jpg | btn-label=[img src='photo-mini.jpg'][br]Cliquer pour voir l'image en grand | password=1234}
ajax_view: id article ou chemin vers fichier txt ou image
Style du bouton d'appel du contenu ajax
btn-label = en=load content;fr=charger le contenu: texte sur le bouton appel
btn-style = btn btn-primary: style et classe du bouton appel
btn-tag = div: balise principale
Demande de mot de passe
password: mot de passe pour télécharger le fichier
options secondaires
HTML: 0= aucun traitement, 1=affiche le code, ou liste des tags à garder (ex: img,a)
EOL: forcer un retour à la ligne
ext-images = jpg,png,gif,webp: les extensions des fichiers images autorisés
Style
id: identifiant
main-tag (block) = div: balise principale
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
🆙 anim_aos : affiche du contenu avec des animations sur scroll de page (librarie en pure JS) ➠ DEMO
syntaxe 1 : anime le contenu du shortcode {up anim-aos} votre texte {/up anim-aos} syntaxe 2 : anime les tags indiqués dans le contenu {up anim-aos | repeat=liste tags} contenu avec les tags cibles {/up anim-aos} syntaxe 3 : anime tous les tags indiqués à partir de la position du shortcode jusqu'à la fin de l'article {up anim-aos | repeat=liste tags}
*
@author: Conseilgouz @version: UP-1.6.3 @license: GNU/GPLv3@credit: Script de michalsnik@tags: layout-dynamic
anim_aos = zoom-in-right: nom de l'animation
delay: délai en millisecondes (50-3000 ms)
duration: durée animation en millisecondes (50-3000 ms)
barcode = text: valeur alphanumérique du code code barre
type = EAN13: type de code-barres : C39,C39+,C39E,C39E+,C93,S25,S25+,I25,C128,C128A,C128B,EAN2,EAN5,EAN8,EAN13,UCPA,UPCE,MSI,MSI+,POSTNET,PLANET,RMS4CC,KIX,IMB,IMBPRE,CODABOR,CODE11,PHARMA,PHARMA2
format = html: format de sortie
height (h,hauteur) = 30: hauteur du code à barres
width (l,largeur,w) = 1: espacement des barres
color = #000: Couleur du code-barre. En mode PNG, on attend des valeurs RGB séparées par des virgules, sinon la couleur en forme texte.
align = center: alignement code barres et texte (left, center, right)
showtext = 1: montrer le texte ayant permis de générer le code barres
styles
id: identifiant
class: Class(s) pour bloc
style: Inline style pour bloc
css-head (base-css): Régles CSS définie par le webmaster (ajoutées dans head)
🆙 bbcode : Saisir du code HTML avec un éditeur WYSIWYG ➠ DEMO
multibox = 3-2-1: nombre de blocs sur la même ligne (desktop-tablet-mobile)
multibox-class = fg-vspace-between-1: classe(s) pour le bloc externe
multibox-style: style CSS pour le bloc externe
box
id:
class: classe(s) pour la box
style: style inline pour la box
title
title (titre): titre. Si vide et demandé : on prend le premier hx du contenu
title-tag = h4: balise pour titre
title-class: class user pour titre
title-style: style inline pour titre
title-link-class: class user pour titre avec lien
title-link-style: style inline pour titre avec lien
subtitle
subtitle: sous-titre
subtitle-tag = h5: mise en forme du sous-titre
subtitle-class: class user pour sous-titre
subtitle-style: style inline pour sous-titre
subtitle-link-class: class user pour sous-titre avec lien
subtitle-link-style: style inline pour sous-titre avec lien
image
image: image. Si vide et demandée : on prend la première image du contenu
image-alt: texte alternatif pour l'image. Par défaut, le nom du fichier humanisé
image-class: class user pour image
image-style: style inline pour image
image-link-class: class user pour image avec lien
image-link-style: style inline pour image avec lien
action
action: texte du bouton action
action-tag = div: mise en forme du bouton action
action-class: class user pour action
action-style: style inline pour action
action-link-class: class user pour action avec lien
action-link-style: style inline pour action avec lien
link
link: lien. . Si vide et demandé : on prend le premier lien sur title ou image
link-target: _blank pour nouvelle fenêtre
header
head-class: class pour le bloc entête. en général title, subtitle, image
head-style: style pour le bloc entête
body
body-class: class pour le bloc. en général content et action
body-style: style pour le bloc. en général content et action
general
css-head (base-css): style CSS inséré dans le HEAD
align-vertical = fg-vspace-between-1: type de repartition verticale en multibox
🆙 cache_cleaner : Efface les fichiers du cache ➠ DEMO
Supprime tous les fichiers PHP du sous-dossier indiqué en option. com_content par défaut syntaxe {up cache-cleaner=com_modules} // defaut : com_content
cache_cleaner = com_content: liste des dossiers du cache ou * pour tous (séparateur: point-virgule)
folder-exclude: chemin relatif (à folder-cache) des dossiers à conserver (séparateur: point-virgule)
folder-cache: dossier racine du cache. vide=celui défini dans la configuration Joomla
file-mask = *.php: masque pour sélectionner les fichiers. *.* = tous, *.{php,html} = php et html
🆙 cell : affiche de 1 à 6 blocs enfants sur une même ligne ➠ DEMO
syntaxe 1 : {up cell=x1-x2}contenu avec 2 blocs enfants{/up cell} syntaxe 2 : {up cell=x1-x2}contenu cell-1 {====} contenu cell-2{/up cell} x1-x2 sont les largeurs sur la base d'une grille de 12 colonnes exemple cell=6-6 pour 2 colonnes égales. On utilise les largeurs de la classe UP-width
@author: LOMART @version: UP-1.6 @license: GNU/GPLv3@tags: Body
corner: texte affiché dans le coin ou ruban
position, taille et style du corner
position = top-left: angle sous la forme top-left ou tl
width (l,largeur,w) = 100px: coté du carré
height (h,hauteur) = 100px: coté du carré
angle = 45: angle en valeur absolue
shadow: ajoute une ombre 'orientée' au corner. La valeur indiquée est la force de l'ombre
color = #ffffff: couleur du texte
bgcolor = #ff0000: couleur de fond du coin
style: styles CSS (non proposés ci-dessus) pour le coin
class: idem style
si le corner est clicable
url: lien
target = _blank: ou _self pour ouvrir le site dans le même onglet
style du bloc si le shortcode a un contenu
bloc-class: classe(s) pour bloc
bloc-style: style inline pour bloc
style et options secondaire
id: identifiant
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
filter: chaine de conditions. Voir documentation filter
🆙 countdown : affiche un compte à rebours ou une horloge digitale ➠ DEMO
syntaxe: {up countdown=201801010000} // délai jusqu'à une date {up countdown=120} // compte à rebours en secondes {up countdown} // affiche une horloge
countdown_simple: date cible ou délai si débute par +
model: CSS de base pour la présentation (digital, rainbow)
digit-view = YMDHMS: afficheurs. Mettre un X pour ne pas l'afficher. Pour les premiers non affichés, la valeur sera convertie et ajoutée au premier affiché
Textes ajoutés au compteur
intro-text: texte avant les afficheurs
close-text: texte après les afficheurs
prefix: texte avant valeur
suffix = lang[en=years,months,days,hours,minutes,seconds;fr=années,mois,jours,heures,minutes,secondes]: texte après valeur
elapsed-text = lang[en=Too late;fr=Trop tard]: Texte ou bbcode affiché si délai écoulé
style des chiffres
digit-class: classe(s) pour les chiffres
zero: ajoute un zéro devant les heures, minutes et secondes
style et options secondaires
id: identifiant
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
filter: condition d'éxécution
🆙 counter : Ajoute un compteur avec prefix et suffix ➠ DEMO
width (l,largeur,w): largeur minimal (par défaut en pixels)
mono = 1: force la police en monospace
style et options secondaires
id: identifiant
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
filter: conditions. Voir doc action filter (v1.8)
paramétres Javascript pour configuration du compteur
start: valeur de départ du compteur
end = 100: valeur d'arrivée du compteur
easing = swing: ou linear : effet
duration = 1500: durée du décompte en millisecondes
prefix: texte devant compteur. BBcode autorisé
suffix: texte après compteur. BBcode autorisé
🆙 csv2def : Conversion d'un contenu au format CSV en liste de définition (DL/DT/DD) ➠ DEMO
1/ {up csv2def=emplacement-fichier} // le contenu est lu dans un fichier 2/ {up csv2def} [=item=]definition [=item1; "item;2"; ...=] definition1 {===} definition 2 {/up csv2def}
HTML = b,a,span,strong,i,em,u,mark,small,img,code: 0= aucun traitement, 1=affiche le code, ou liste des tags a garder (strip_tags)
model = stack: nom de la classe modèle dans le fichier csv2list.css
Style des points de conduite
leaders: points de conduite
leaders-color: couleur points de conduite
style du bloc principal de la liste
class: classe(s) pour la balise UL
style: style inline pour la balise UL
bgcolor: couleur de fond. #FFF par defaut
style des lignes de la liste
col-style-*: style inline pour les nièmes balise SPAN
list-style: code hexadecimal et couleur du caractère (bb,red ou 26BD,#F00)
Style de l'entête
header: 0: pas de titre, 1: la première ligne du contenu sera le titre des colonnes
header-class: classe(s) pour la première balise LI si titre
header-style: style pour la première balise LI si titre
header-bgcolor: couleur de fond du titre
Style du pied de liste
footer: 0: pas de pied, 1: la dernière ligne du contenu sera le pied des colonnes
footer-class: classe(s) pour la dernière balise LI si pied
footer-style: style pour la dernière balise LI si pied
footer-bgcolor: couleur de fond de la dernière ligne
style et options secondaires
id: identifiant
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
🆙 csv2table : Conversion d'un contenu au format CSV en table ➠ DEMO
1/ le contenu est lu dans un fichier {up csv2table=emplacement-fichier} 2/ le contenu est saisi entre les shortcodes {up csv2table} article 1;5€ "article 2";25€ {/up csv2table}
title-tag = h4: pour utiliser une autre balise pour les titres
title-tag-preserve: 1 pour conserver 'title-tag' au lieu de div
title-class: classe pour le titre (onglet)
title-style: style inline pour le titre
Définition des panneaux
content-class: classe pour le contenu
content-style: style inline pour le contenu
style et options secondaires
id: identifiant
css-head (base-css): style ajouté dans le HEAD
🆙 field : Retourne la valeur d'un custom field pour le contenu courant ➠ DEMO
syntaxe {up field=id_or_name_field} // contenu brut du champ {up field=id_or_name_field | model=value} // contenu mis en forme du champ {up field=id_or_name_field | model=label : [b]%id_or_name_field%[/b]} // modèle avec BBCODE
model: modèle BBCODE avec id ou nom des champs entre signes %
separator: sépare les éléments d'un tableau pour rawvalue
tag: balise pour bloc principal
style et options secondaires
id: identifiant
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): style ajouté dans le HEAD de la page
🆙 file : Force le téléchargement d'un fichier ➠ DEMO
Propose un lien sur un fichier. Le fichier peut etre affiché (si prise en charge par navigateur client) ou le téléchargement peut-etre forcé avec changement de nom optionnel Une icône représentative est affichée devant le lien syntaxe : {up file=nomfichier.ext | download | icon |target } texte du lien {/up file}
password: mot de passe pour télécharger le fichier
template (item-template) = ##icon## ##filename-link## (##size## - ##date##) [small]##hit## ##lastdownload##[/small] [br]##info##: modèle de mise en page. keywords + bbcode
Définition du type de liste
main-tag (block) = ul: balise pour la liste des fichiers
main-style: style pour la liste des fichiers
main-class = list-none: classes pour la liste des fichiers
Définition d'une ligne pour un fichier
item-tag = li: balise pour un bloc fichier
item-style: style pour un bloc fichier
item-class: classes pour un bloc fichier
link-style: style pour le lien (classes admises)
icon = 32: chemin et nom de l'icône devant le lien ou taille de l'icône selon extension du fichier (16 ou 32)
format pour les mots-clés
format-date = lang[en=m/d/Y H:i;fr=d/m/Y H:i]: 'd/m/Y H:i' format pour la date
model-hit = téléchargé %s fois: présentation pour ##hit##
model-lastdownload = dernier téléchargement le %s: présentation pour ##lastdownload##
model-info = %s: présentation pour ##info##
style et options secondaires
id: identifiant
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
filter: condition pour exécuter l'action
🆙 file_in_content : Utilise tous les fichiers d'un dossier pour construire un article ➠ DEMO
syntaxe {up file-in-content=fichier ou dossier} Mots-clés ##title## : le nom du fichier txt ##content## : le contenu du fichier txt ##image## : fichier image de même nom que le fichier texte ##date## : la date du fichier
main-tag (block) = div: balise principale. 0 pour aucune
class: classe(s) pour bloc
style: style inline pour bloc
Mise en forme du fichier
HTML: 0= aucun traitement, 1=affiche le code, ou liste des tags à garder (ex: img,a)
EOL: forcer un retour à la ligne
style et options secondaires
id: identifiant
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
🆙 filter : affiche du contenu si toutes les conditions sont remplies ➠ DEMO
Reprise du plugin LM-Filter de Lomart SYNTAXE 1 (condition comme option): {up filter | datemax=20171225} contenu si vrai {====} contenu si faux {/up filter} Le contenu si faux est optionnel. Il doit être après le contenu si vrai et séparé par {===} (au minima 3 signes égal) SYNTAXE 2 (condition comme argument principal): {up filter=datemax:20171225} contenu si vrai {====} contenu si faux {/up filter} SYNTAXE 3 (mono-shortcode): {up filter | guest=0 | return-true=REGISTER | return-false=GUEST} --> guest=0 est vrai si un utilisateur est connecté --> la valeur retournée est saisie comme option SYNTAXE 4 (multi-conditions et négation): {up filter=!day:1,7 ; hperiod:0900-1200,1500-1900 | return-true=OUVERT | return-false=FERME} --> vrai si pas lundi ou dimanche et entre 9-12h ou 15-19h
filter: condition sous la forme cond1:val1,val2 ; cond2:val1,val2
Les conditions
datemax: vrai jusqu'à cette date AAAAMMJJHHMM
datemin: vrai à partir de cette date AAAAMMJJHHMM
period: vrai entre ces dates AAAAMMJJHHMM-AAAAMMJJHHMM
day: liste des jours autorisés. 1=lundi, 7=dimanche
month: liste des mois autorisés. 1=janvier, ...
hmax: vrai jusqu'à cette heure HHMM
hmin: vrai à partir de cette heure HHMM
hperiod: vrai entre ces heures HHMM-HHMM
guest: vrai si utilisateur invité
admin: vrai si admin connecté
user: liste des userid autorisé. ex: 700,790
username: liste des username autorisé. ex: admin,lomart
group: liste des usergroup autorisé. ex: 8,12
lang: liste des langues autorisées. ex: fr,ca
mobile: vrai si affiché sur un mobile
homepage: vrai si affiché sur la page d'accueil
server-host: vrai si le domaine du serveur contient un des termes de la liste
server-ip: vrai si l'adresse IP du serveur des dans la liste
artid: vrai si l'ID de l'article courant est dans la liste
catid: vrai si l'ID de la catégorie de l'article courant est dans la liste
menuid: vrai si l'ID du menu actif est dans la liste
retour pour version mono-shortcode
return-true = 1: valeur retournée si vrai et pas de contenu
return-false: valeur retournée si faux et pas de contenu
Divers
info: affiche les valeurs actuelles des arguments pour les conditions
id: identifiant
🆙 flexauto : une grille responsive sur plusieurs colonnes ➠ DEMO
syntaxe 1 : {up flexauto=x_ordi | tablet=x_tablet | mobile=x_mobile }contenu{/up flexauto} syntaxe 2 : {up flexauto=x_ordi-x_tablet-x_mobile }contenu{/up flexauto} x=1 à 12 est le nombre de colonnes sur grand écran et tablette. 4 sur mobile.
flexauto = 3: nombre de colonnes sur grand écran ou ordi-tablet-mobile
tablet = 2: nombre de colonnes sur moyen écran
mobile = 1: nombre de colonnes sur petit écran
Style
id: identifiant
class: classe(s) ajoutée(s) au bloc parent
style: style inline ajouté au bloc parent
bloc-style: style inline ajoutés au bloc enfant
css-head (base-css): style ajouté dans le HEAD de la page
🆙 flexbox : affiche des blocs enfants dans une grille FLEXBOX responsive ➠ DEMO
syntaxe 1 : {up flexbox=x1-x2}contenu avec plusieurs blocs enfants{/up flexbox} syntaxe 2 : {up flexbox=x1-x2}contenu bloc-1 {====} contenu bloc-2{/up flexbox} x1-x2 sont les largeurs relatives des colonnes exemple : flexbox=4-8 ou flexbox=33-66 pour 2 colonnes (équivalent: span4 et span8) Note : les options class-1 à class-6 et style-1 à style-6 sont à saisir directement dans le shortcode
flexbox: nombre de colonnes ou prefset sous la forme x-x-x-x
tablet: nombre de colonnes sur moyen écran sous la forme x-x-x-x
mobile: nombre de colonnes sur petit écran sous la forme x-x-x-x
Style
class: class bloc principal
style: style inline bloc parent
class-*: class pour tous les blocs colonnes. sinon voir class-1 à class-6
style-*: style inline pour tous les blocs colonnes. sinon voir style-1 à style-6
bloc-style: classe et style inline ajoutés au bloc enfant
css-head (base-css): style ajouté dans le HEAD de la page
id: identifiant
🆙 folder_list : retourne la liste mise en forme du contenu d'un dossier sur le serveur ➠ DEMO
syntaxe {up folder_list=folder_relative_path_on_server | template=##file## (##size)}0 ##file## : chemin/nom.extension - pour copier/coller comme argument shortcode ##dirname## : chemin (sans slash final) ##basename## : nom et extension ##filename## : nom sans extension (sans le point) ##extension## : extension ##relpath## : chemin relatif au chemin passé comme principal argument ##size## : taille du fichier ##date## : date dernière modification Motclé disponible pour le dossier en format liste (ul/li) ##foldername## : nom du dossier (sans l'arboresccence) ##folderpath## : chemin et nom du dossier (avec l'arboresccence)
🆙 icon : uniformise l'appel des icônes. Evite de passer en mode code pour la saisie ➠ DEMO
syntaxe 1 : {up icon=nom_icone} syntaxe 2 : {up icon=Ux1F7A7} syntaxe 3 : {up icon=images/icone.png} syntaxe 4 : {up icon=Ux1F7A7,#F00,2rem} Important : indiquer dans prefs.ini le préfixe pour la police d'icones installée sur le site
src: nom icône, code unicode, chemin image (indispensable si prefset)
size: taille icône ou coté du carré dans lequel est inscrit l'image. px, rem, em, % (px par defaut). Responsive= basesize, breakpoint1:size1, breakpointN:sizeN
color: couleur
color-hover: couleur lors survol icône (sauf image et unicode coloré)
Pour ajouter l'icône à un bloc sur la page
selector: selecteur CSS pour identifier le bloc ciblé
Divers
info: 1 affiche la liste des icônes définies dans prefs.ini comme un message debug, 2 la retourne pour affichage à la place du shortcode
title (titre): texte affiché au survol de l'icone
prefix = icon-: pour icomoon ou 'fa fa-' pour font-awesome (a mettre dans pref.ini)
fontname = icomoon: pour icomoon ou FontAwesome ou autres (a mettre dans pref.ini)
Style CSS
style: style inline
class: classe
id: identificateur
🆙 iframe : introduire un iFrame responsive dans un article ➠ DEMO
syntaxe {up iframe=URL}
@author: LOMART @version: UP-1.9.5 @license: GNU/GPLv3@credit: https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/ @tags: HTML
iframe: URL site distant
preview: image affichée avant chargement de l'iframe
paramétre de l'iframe
allowfullscreen = allowfullscreen: autorise le plein ecran
scrolling = no: affiche les ascenseurs si nécessaire
ratio = 16:9: sous forme largeur:hauteur ou ratio 0.5625 ou pourcentage 56.25%
height (h,hauteur): hauteur (utile pour mobile)
Style CSS
id: identifiant
class: classe(s) pour bloc externe
style: style inline pour bloc externe
css-head (base-css): style ajouté dans le HEAD de la page
Interne, conservé pour compatibilité
iframe-class: classe(s) pour bloc
iframe-style: style inline pour bloc
🆙 image_compare : comparaison de 2 images par déplacement d'un volet ➠ DEMO
🆙 image_gallery : Affiche une ou plusieurs images dans une lightbox ➠ DEMO
avec adaptation de la taille image à celle de l'appareil et légendes syntaxe 1 {up image-gallery=chemin_image | alt=texte} syntaxe 2 {up image-gallery=chemin_dossier} syntaxe 3 {up image-gallery}contenu avec des images{/up image-gallery}
language: liste motclé (bylineLabel,loadButtonLabel,loadingLabel) + traduction. Exemple:bylineLabel:lang[en=by %s;fr:par %s], loadingLabel:Loading...
options: liste des options supplémentaires . ex: showZoomCtrl:true,compass:true - Attention au min/maj. voir cette page
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): règles CSS définies par le webmaster (ajout dans le head)
paramètres Javascript pour configuration
panorama: chemin image (il est rempli automatiquement avec l'argument principal du shortcode)
preview: chemin image preview
type = equirectangular: type de l'image
title (titre): titre. pseudo BBCode et traduction acceptes
author: auteur. pseudo BBCode et traduction acceptes
authorURL: lien vers site auteur
autoLoad: chargement auto de l'image
autoRotate: rotation nombre de degrés par seconde
showControls = 1: 0 pour masquer tous les boutons
showZoomCtrl = 1: 0 pour masquer les boutons +/- du zoom
showFullscreenCtrl = 1: 0 pour masquer le bouton plein écran
hotSpotDebug: 1 pour afficher les coordonnées hotspot dans la console
🆙 image_random : Affiche aléatoirement une des images d'un dossier ➠ DEMO
Le dossier peut être un pattern valide pour la fonction PHP GLOB syntaxe 1 : {up image-random=folder} syntaxe 2 : {up image-random}image 1{===}image 2 avec lien{/up image-random} syntaxe 3 : {up image-random}content 1{===}content 2{/up image-random}
image_secure: chemin relatif vers image jpg ou png
folder-source = images: dossier racine des images originales
folder-strip = images/image-secure: dossier avec les images fractionnées
nb-strip = 5: nombre de bandes
alt: texte alternatif pour image. Si vide: nom du fichier humanisé
quality = 80: pourcentage qualité en JPG
reset: force la génération des images strip
delete-source: supprime l'image source après génération des strips
Style CSS
id: identifiant
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): style ajouté dans le HEAD de la page
🆙 imagemap : une image clicable et responsive ➠ DEMO
syntaxe {up imagemap=chemin_image} < area target="" alt="" title="" href="/" coords="" shape="">; OU pour prévenir l'effacement par editeur (remplacer les <> par []) [area target="" alt="" title="" href="/" coords="" shape=""]; {/up imagemap} utiliser un générateur en ligne pour définir les zones : www.image-map.net
jcat_image: dossier/chemin/url vers une image si la catégorie n'en possède pas
Style CSS
id: identifiant
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): style ajouté dans le HEAD de la page
🆙 jcategories_by_tags : liste des catégories d'un mot-clé (tag) ➠ DEMO
syntaxe : {up jcategories-by-tags=id-ou-nom-tag} MOTS-CLES : ##title## ##title-link## ##subtitle## ##link## ##intro## ##content## : la description de la catégorie en HTML ##intro-text## ##intro-text,100## : la description de la catégorie en TEXT ##image## ##image-link## ##image-src## ##image-alt## ##date-crea## ##date-modif## ##new## ##count## ##hits## ##tags-list##
jcategories_list: id catégorie ou vide pour toutes
component = Content: nom de l'extension pour laquelle récupérer les catégories
level: nombre de niveaux. O = tous
Modèles de présentation
template (item-template) = ##title-link##[small] (id:##id##) ##access## ##extension## ##language##[/small] ##note##: modèle de mise en page. keywords + bbcode
model-note = [i class="t-blue"]%s[/i]: présentation pour ##note##
Balise et style du bloc principal
main-tag (block) = ul: balise pour bloc parent
style: classes et styles
id: identifiant
Balise pour les lignes
item-tag = li: balise pour blocs enfants (lignes)
Style CSS
css-head (base-css): style ajouté dans le HEAD de la page
🆙 jcontent_by_categories (jnews) : liste des articles d'une catégorie ➠ DEMO
syntaxe 1 : {up jcontent-by-categories=id-catégorie(s) | template=##title-link##} syntaxe 2 : {up jcontent-by-categories=id-catégorie(s)}##title-link##{/up jcontent-by-categories} Une action très pratique pour lister les articles de la catégorie en cours, il suffit de taper {up article-category} Les mots-clés : ##title## ##title-link## ##subtitle## ##maintitle## ##link## ##intro## ##intro-text## ##intro-text,100## ##content## ##image## ##image-src## ##image-alt## ##date-crea## ##date-modif## ##date-publish## ##author## ##note## ##cat## ##cat-link## ##new## ##featured## ##hits## ##tags-list## ##CF_id_or_name## : valeur brute du custom field ##upnb## : nbre actions UP dans la page - ##uplist## : nbre par actions
no-content-html = Pas de nouvelles, bonnes nouvelles ...[br]No news, good news ...: texte si aucune correspondance. 0=aucun texte
Modèles de présentation
template (item-template): modèle de mise en page. Si vide le modèle est le contenu
Balise et style pour le bloc principal
main-tag (block) = div: balise pour le bloc englobant tous les articles. 0 pour aucun
main-style: classes et styles inline pour bloc principal
main-class: classe(s) pour bloc principal (obsolète)
Balise et style pour un article
item-tag = div: balise pour le bloc d'un article. 0 pour aucun
item-style: classes et styles inline pour un article
item-class: classe(s) pour un article (obsolète)
Paramètre pour l'image
image-src: lorempixel.com/300/300', // image par défaut
image-alt = news: image, texte alternatif par défaut
Format pour les mots-clés
date-format = %e %B %Y: format pour les dates
date-locale: localisation pour les dates. Par défaut, celle du navigateur client.
new-days = 30: nombre de jours depuis la création de l'article
new-html = [span class="badge bg-red t-white"]nouveau[/span]: code HTML pour badge NEW
featured-html = ⭐: code HTML pour article en vedette
tags-list-prefix: texte avant les autres éventuels tags
tags-list-style = badge;margin-right:4px: classe ou style affecté à une balise span par mot-clé
tags-list-separator: séparateur entre mots-clés
Style CSS
id: identifiant
css-head (base-css): code CSS dans le head
🆙 jcontent_by_subcat : Les articles par categories et sous-categories ➠ DEMO
syntaxe 1 : {up jcontent-by-subcat=id-categorie} liste des articles d'une catégorie et ses sous-catégories syntaxe 2 : {up jcontent-by-subcat} liste des articles de la catégorie en cours et ses sous-catégories syntaxe 3 : {up jcontent-by-subcat=0} liste des articles de toutes les catégories syntaxe 4 : {up jcontent-by-subcat}##title##{/up jcontent-by-subcat} variante : saisie template pour articles entre shortcodes Les mots-clés article: ##title## ##title-link## ##subtitle## ##link## ##intro## ##intro-text## ##intro-text,100## ##content## ##image## ##image-src## ##image-alt## ##date-crea## ##date-modif## ##date-publish## ##author## ##note## ##cat## ##new## ##featured## ##hits## ##tags-list## ##upnb## : nbre actions UP dans la page - ##uplist## : nbre par actions ##CF_id_or_name## : valeur brute du custom field Les mots-clés catégorie: ##catpath## : Chemin des categories depuis la categorie racine. ex: si on demande la categorie 2 avec 3 niveaux (subcat=3): 2.1 > 2.1.1 > 2.1.1.1 ##title## ##title-link## ##link## : titre et lien de la categorie ##alias## ##note## ##id## ##count## : nombre d'articles dans la catégorie
template (item-template) = ##content##: modèle de mise en page. Si vide le modèle est le contenu. BBCode accepté
balise & style du bloc principal
tag = _div: balise pour le bloc d'un article. _div = div si class ou style, sinon rien. = 0=jamais
id: identifiant
style: classes et styles inline pour un article
class: classe(s) pour un article (obsoléte)
Format pour les mots-clés
date-format = %e %B %Y: format pour les dates
date-locale: localisation pour les dates. Par défaut, celle du navigateur client.
featured-html = [b class="t-gris"]★[/b], [b class="t-jauneFonce"]★[/b]: présentation mise en vedette
tags-list-prefix: texte avant les autres eventuels tags
tags-list-style = badge;margin-right:4px: classe ou style affecte a une balise span par mot-cle
tags-list-separator: separateur entre mots-cles
path-separator = »: caractère ou bbcode pour séparer les items menus ou les catégories
path-current-class = b: style de l'élement terminal d'un chemin
path-parent-class = fs90: style des élements parents
path-order = asc: asc: élément terminal à la fin, desc : au début
path-link = 1: affiche les liens sur les éléments.
Style CSS
css-head (base-css): code CSS dans le head
🆙 jcontent_list (article_category) : liste des articles d'une catégorie ➠ DEMO
syntaxe : {up jcontent-list=id-catégorie(s)} Une action très pratique pour lister les articles de la catégorie en cours, il suffit de taper {up jcontent-list}
listup: style des puces (séparateur point-virgule) par niveaux (markers) (séparateur virgule)
Valeurs par défaut
ul-default = square;t-c1: type liste par défaut
ol-default = decimal;t-c1: type liste numérotée par défaut
Style CSS
id: identifiant
class: classe(s) pour bloc principal
style: class ou style inline pour bloc principal
style-*: class ou style pour les niveaux des puces
css-head (base-css): style ajouté dans le HEAD de la page
Divers
start: indice pour début liste numérotée
valid-type = rounded-alpha,squared-alpha,circled-decimal,rounded-decimal,decimal-leading-zero,lower-alpha,upper-alpha,lower-roman,upper-roman: types de liste (numérotée) autorisés
fonticon = FontAwesome: police d'icônes installée sur le site
. Syntaxe : {up lorem=liste des arguments ci-dessous } - (integer) - Nombre de paragraphes (P) générés. 4 par défaut - short, medium, medium, verylong - La longueur moyenne d'un paragraphe. - decorate - ajoute bold, italic, ... - link - ajoute des liens. - ul - ajoute listes. - ol - ajoute listes ordonnées. - dl - ajoute listes description. - bq - ajoute bloc citation - code - ajoute des exemples de code. - headers - ajoute des titre hx. - allcaps - TOUT EN MAJUSCULES. - prude - version prude. - plaintext - Retourne text sans balise HTML. exemple appel : https://loripsum.net/api/2/code/decorate . Pour avoir un texte sans aucun tag, utilisez : {up lorem=2,plaintext | tag=0}. Même sans balise P, le nombre de paragraphes influe sur la longueur du texte retourné.
lorem: nombre de paragraphe et mots-clés séparés par des virgules
Divers
max-char: nombre maxima de caractères
max-word: nombre maxima de mots
Style CSS
tag = div: (v1.6) tag du bloc contenant le texte en retour ou tag=0 pour aucun.
id: pour forcer l'id (sans effet, si tag=0)
class: classe(s) pour bloc (sans effet, si tag=0)
style: style inline pour bloc (sans effet, si tag=0)
🆙 lorem_flickr (lorempixel,lorem_placeimg) : affiche une image aleatoire ➠ DEMO
Syntax 1 : {up loremflickr=type | width=xx | height=xx} . Note : width & height sont les dimensions de l'image retournée par lorempixel. Pour l'afficher en remplissant le bloc parent, il faut ajouter style=width:100% Le site //lorempixel.com étant fermé, l'action utilise le site //loremflickr.com on peut appeler l'action par loremflickr ou lorempixel
Syntaxe : {up lorempixel=type | width=xx | height=xx } --> type = abstract, animals, business, cats, city, food, nightlife, fashion, people nature, sports, technics, transport . Note : width & height sont les dimensions de l'image retournée par lorempixel. Pour l'afficher en remplissant le bloc parent, il faut ajouter style=width:100%
model = base: style CSS dans .upmq-*style*. 0=aucun
height (h,hauteur) = 100px: hauteur defaut pour scroll vetical
Style CSS
out-class: classe(s) pour div out
out-style: style inline pour div out
msg-class: classe(s) pour div msg
msg-style: style inline pour div msg
lbl-class: classe(s) pour div label
lbl-style: style inline pour div label
lbl-pos: position label : left, right, top, bottom, none
lbl-nowrap: 1 = label sur une ligne
Divers
id: identifiant
filter: conditions. Voir doc action filter (v1.8)
Paramètres Javascript pour configuration
direction = left: right, up, down
loop = - 1: nombre d'affichage, -1 : infini
scrolldelay: delai en millisecondes
scrollamount = 50: vitesse
circular = 1: mode carousel. si contenu plus large que .str_wrap
drag = 1: deplacement msg avec souris
runshort = 1: scroll si texte court (visible sans scroll)
hoverstop = 1: pause lors survol
inverthover: scroll uniquement lors survol
🆙 masonry : Affiche des blocs dans une grille fluide et responsive ➠ DEMO
syntaxe {up masonry=breakpoint:nbCols*margeX*margeY} bloc-1 bloc-2 bloc-n {/up masonry} l'argument principal est la liste du nombre de colonnes et des marges par breakpoint. Exemple : {up masonry=960:4,1200:5} 4 colonnes au-dessus de 960px, 5 si 1200px {up masonry=960:4*10, 1200:5*10*20} idem plus marges XY de 10px pour 960 et marge X de 10px et Y de 20px pour 12000
masonry = 480:2,720:3,960:4,1200:5: colonnes et marges par breakpoint : bp:col*x*y. ex: 960:2*10*10,480:1
margin: marge en pixels. x*y pour des marges différentes en horizontal et vertical
Options annexes
preserve-order: 1: l'ordre des blocs est préservé. 0=priorité à l'égalité de la hauteur des colonnes
wait-images: 1: charge toutes les images avant le calcul. 0: calcul à chaque chargement d'image.
breakpoints-container: 0: breakpoints définis sur la largeur du navigateur. 1: largeur du bloc parent
mise en forme 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
🆙 media_plyr (vimeo,audio,video) : affiche un lecteur video ou audio qui s'inscrit au maxima dans son bloc parent ➠ DEMO
{up media_plyr=yt | code=bTqVqk7FSmY } {up media_plyr=vimeo | code=bTqVqk7FSmY } media_plyr : précisez yt ou youtube ou vimeo code : il s'agit du code figurant dans l'URL de la vidéo. . {up media_plyr=video | poster=url image | mp4 | webm | vtt | download } media_plyr : video pour indiquer l'URL vers la video. poster : nom de l'image fixe (obligatoire) mp4, webm, vtt, download : si URL non spécifiée, elle sera déduite de celle pour 'poster' . {up media_plyr=audio | mp3=url fichier mp3 | ogg} media_plyr : audio mp3 : url vers fichier MP3 (obligatoire) ogg : si URL non spécifiée, elle sera déduite de celle pour 'MP3' .
@author: DANEEL & LOMART @version: UP-1.1 @license: GNU/GPLv3@tags: Media
media_plyr (vimeo,audio,video): type de lecture : youtube, vimeo, video ou audio
code: code de la video (à la fin de l'url youtube ou vimeo)
poster: URL de l'image (obligatoire)
mp4: URL du fichier MP4. Si vide, on utilise le nom de poster
webm: URL du fichier WEBM. Si vide, on utilise le nom de poster
vtt: URL du fichier VTT pour sous-titrage. Si vide, on utilise le nom de poster
download: URL du fichier téléchargeable. Si vide, on utilise le nom du fichier MP4
mp3: URL du fichier audio mp3. (obligatoire)
ogg: URL du fichier audio ogg. Si vide, on utilise le nom du fichier MP3
Style CSS
id: identifiant
class: classe(s) ajoutée(s) au bloc extérieur
style: style inline ajouté au bloc extérieur
🆙 media_video : affiche une vidéo locale en HTML5 ➠ DEMO
il suffit d'indiquer le chemin et le nom du fichier (avec ou sans extension) pour utiliser toutes les vidéos de ce nom dans le dossier. Si le nom du fichier n'est pas indiqué ou contient des jokers, toutes les vidéos correspondantes seront retournées Supporte les formats video : mp4,webm,ogg Si une image (jpg,png,webp,gif) existe, elle sera utilisé comme preview (poster) syntaxe {up media-video=chemin_vers_videos}
@version: UP-3.1 @license: GNU/GPLv3@author: lomart @tags: media
media_video: chemin et nom du fichier vidéo. caractères joker autorisés
configuration du lecteur vidéo
autoplay: lancement automatique de la 1ere video
muted: coupe le son
loop: joue la vidéo en boucle
controls = 1: affiche les boutons de commande
preload = auto: none, metadata, auto.
legend: texte affiché au dessous des vidéo ou 1 pour le nom humanisé de chaque vidéo
legend-style: classe(s) et style pour la légende
Types des vidéos acceptées
types = mp4:mp4;webm:webm;ogv:ogg: liste extension fichier et type mime
codecs: liste type et codec supportés. ex: ogg:theora,vorbis; webm:vp8.0,vorbis
Messages si erreur
no-video = lang[en=no video;fr=aucune vidéo]: message si video non trouvée
no-support = lang[en=Your web browser does not support HTML5 video;fr=Votre navigateur Web ne prend pas en charge la vidéo HTML5: message si video non supportée
styles
id:
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): style ajouté dans le HEAD de la page
🆙 media_vimeo : affiche une video Viméo qui s'inscrit au maxima dans son bloc parent ➠ DEMO
{up media_vimeo=ID [| autoplay | portrait |title |muted |loop | play-on-visible]} ID : il s'agit du code figurant à la fin de l'URL de la vidéo. L'autoplay sous Firefox/Chrome est interdit si la video contient du son. Utilisez muted pour débloquer cela. voir https://vimeo.zendesk.com/hc/en-us/articles/115004485728-Autoplaying-and-looping-embedded-videos Les options title et portrait ne fonctionne que si la video le supporte.
@author: Pascal @version: UP-1.9.5 @license: GNU/GPLv3@tags: Media
media_vimeo: code de la video (à la fin de l'url vimeo)
width (l,largeur,w): largeur de la video en px ou %
autoplay: démarrage automatique
title (titre): afficher le titre de la vidéo
portrait: afficher l'image de profil de l'auteur (portrait)
loop: boucle en fin de video
muted: coupe le son
play-on-visible: démarre et arrête la video selon sa visibilité sur l'ecran
Style CSS
id: identifiant
class: classe pour bloc externe
style: code css libre pour bloc externe
Divers
rgpd = 1: 0 pour ne pas appliquer la règle pour le RGPD
🆙 media_youtube (youtube) : affiche une video Youtube qui s'inscrit au maxima dans son bloc parent ➠ DEMO
{up media-youtube=ID [|autoplay|play-on-visible|muted|loop]} ID : il s'agit du code figurant à la fin de l'URL de la vidéo.
@author: LOMART/ modifié par Pascal @version: UP-0.9 @license: GNU/GPLv3@tags: Media
media_youtube (youtube): code de la video (à la fin de l'url youtube)
ratio = 16/9: homothétie de la vidéo sous la forme 16/9 ou 1.77
width (l,largeur,w): largeur de la video en px ou %
autoplay: demarrage automatique
loop: boucle sur la video
muted: coupe le son
play-on-visible: démarre et arrête la video selon sa visibilité sur l'ecran
Style CSS
id: Identifiant
class: classe pour bloc externe
style: code css libre pour bloc externe
Divers
rgpd = 1: 0 pour ne pas appliquer la règle pour le RGPD
🆙 meteo_concept : Retourne les prévisions météo pour à date donnée pout une ville FRANCAISE donnée
Cliquer pour lire la documentation
Basée sur l'API de Météo Concept permettant aux développeurs de site internet ou d'applications d'intégrer des données météorologiques de prévisions ou d'observations pour un lieu ou une station météo souhaitée. Pour commencer à l'utiliser l'API, il est nécessaire de s'inscrire sur le site internet de Météo Concept. La formule gratuite permet de faire jusqu'à 500 requêtes par jour. Cette inscription fourni une authentification et une autorisation grâce à une clé d'API, appelé communément « token ». syntaxe 1 {up meteo=Date ou dateheure de la prévision |insee=code |token=Token fourni par Météo Concept } syntaxe 2 {up meteo=Date ou dateheure de la prévision |insee=code |token=Token fourni par Météo Concept } modèle de texte avec mots-clés {/up meteo} trouver un code insee : https://www.insee.fr/fr/recherche/recherche-geographique ---- MOTS CLES ##insee## Code Insee de la commune ##cp## Code postal de la commune ##name## Nom de la commune ##latitude## Latitude décimale de la commune ##longitude## Longitude décimale de la commune ##altitude## Altitude de la commune en mètres ##dirwind10m## ou ##winddirs## Direction du vent ##gust10m## Rafales de vent à 10 mètres en km/h ##gustx## Rafale de vent potentielle sous orage ou grain en km/h ##probafog## Probabilité de brouillard entre 0 et 100% ##probafrost## Probabilité de gel entre 0 et 100% ##rainprob## ou ##probarain## Probabilité de pluie entre 0 et 100% ##probawind100## Probabilité de vent >70 km/h entre 0 et 100% ##probawind70## Probabilité de vent >100 km/h entre 0 et 100% ##rainmax## ou ##rr1## Cumul de pluie maximal sur la journée en mm ##rain## ou ##rr10## Cumul de pluie sur la journée en mm ##weather-text## Resenti météo sous forme de texte ##weather## Resenti météo index (nombre de 0 à 235) ##windspeed## ou ##wind10m## Vent moyen à 10 mètres en km/h ---- QUART DE JOURNEE UNIQUEMENT ##temp## ou ##temp2m## Température à 2 mètres en °C ---- JOURNEE ENTIERE UNIQUEMENT ##temp-max## ou ##tmax## Température maximale à 2 mètres en °C ##temp-min## ou ##tmin## Température minimale à 2 mètres en °C ##sun_hours## Ensoleillement en heures ##etp## Cumul d'évapotranspiration en mm
orientation = v: bloc horizontal (H) ou vertical (V)
block (bloc) = p: balise HTML autour du module météo
Style CSS
id: Identifiant
class: classe(s) pour bloc parent
style: style inline pour bloc parent
🆙 modal : Affiche du contenu dans une fenêtre modale (popup) ➠ DEMO
les types autorisés sont : inline, iframe, image, video, ajax syntaxe 1 : {up modal=contenu popup | label=texte du lien} syntaxe 2 : {up modal=vide,'html','images' ou contenu | label=texte lien}contenu{/up modal} si vide ou 'html' : le contenu du popup est le code entre les shortcodes si 'img' : chaque image du code entre les shortcodes sera un popup sinon on analyse la valeur du paramètre pour déterminer son type - video vimeo, youtube ou dailymotion {up modal=//youtu.be/H9fa9aWFbLM} - image unique si {up modal=images/xx.jpg} ou png, ... - bloc inline si id de bloc {up modal=#bloc} - iframe si url {up modal=//lomart.fr} ou {up modal=doc/xx.pdf} ou {up modal=?index/...} on peut forcer le type par type=inline, iframe, image, video, ajax
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
🆙 pdf : Affiche un PDF dans le contenu ou génère un bouton pour l'afficher dans une fenêtre ➠ DEMO
Le fichier PDF peut-être hébergé sur le serveur ou ailleurs (url absolue) syntaxe {up pdf=chemin du fichier PDF} integration libraire TurnJs http://turnjs.com/ depuis https://github.com/iberan/pdfjs-flipbook
pdf: chemin du fichier pdf ou masque si plusieurs (v311)
method (methode) = PDFJS: ou Google, Embed ... ou 0
maxi: nombre maxi de fichiers affichés. 0 sans limite
view = 1: 0 = masque le PDF
width (l,largeur,w) = 100%: largeur iframe
height (h,hauteur) = 500px: hauteur iframe
Gestion du lien pour télécharger le PDF
download = 1: 1 pour afficher lien téléchargement
download-name: nom du fichier téléchargé
download-text = en=Download %s;fr=Telecharger %s: texte pour lien
download-icon: image affichée devant le lien
download-class: class(s) pour bouton lien seul
download-style: style inline pour bouton lien seul
Gestion bouton pour afficher le PDF
btn (bouton): 1 pour afficher un bouton
btn-target = _blank: cible : _blank, _parent, popup ou _popup
btn-text = voir %s: texte pour bouton
btn-icon: image affichée devant le texte du bouton
btn-class = btn btn-primary: class(s) pour bouton lien seul
btn-style: style inline pour bouton lien seul
Divers
close-left: 1=croix de fermeture en haut à gauche. 0=haut-droite par défaut
flip: activer le mode flipbook uniquement si PDFJS
background: couleur fond perdu du PDF au format #rrggbb
pdfjs-model = web: ou mobile (non opérationnel)
Style CSS
id: identifiant
class: classe(s) pour bloc parent
style: style inline pour bloc parent
tag = div: balise pour bloc parent - v2.9
css-head (base-css): style ajouté dans le HEAD de la page
🆙 pdf_gallery : Affiche une liste des PDF contenus dans un dossier ➠ DEMO
syntaxe {up pdf-gallery=dossier} syntaxe {up pdf-gallery=dossier}template{/up pdf-gallery} Template pour définir le rendu ##name## : nom et extension du fichier sans le prefixe date ##full-name## : nom et extension du fichier avec le prefixe date ##human-name## : nom du fichier sans les tirets ##size## : taille du fichier ##date## : date du fichier ou prefixe date du nom de fichier ##info## : fichier .info de même nom que le PDF avec texte descriptif ##image## : fichier jpg ou png de même nom que le PDF ##image-view## : idem ##image## avec lien pour afficher PDF dans fenêtre modale ##btn-view## : lien pour afficher PDF dans fenêtre modale. Texte selon btn-view-text ##btn-download##, ##name-download## : lien pour télécharger le PDF. Texte selon btn-download-text ##preview## : vue du PDF avec la méthode jsviewer de l'action PDF. ATTENTION ##preview## charge tous les fichiers PDF lors de l'affichage de la page
css-head (base-css): style ajouté dans le HEAD de la page
filter: conditions. Voir doc action filter
paramètres Javascript pour la configuration du popover
width (l,largeur,w) = 250: largeur du popover en px
top (t) = false: true : popover au-dessus du trigger, sinon au-dessous
arrow = true: affichage de la fleche
offset: décalage entre trigger et popover
viewportSideMargin = 10: Espace à laisser sur le côté lorsqu'il est contre le bord de la fenêtre (pixels)
fadeInDuration = 65: Durée de l'animation de fondu enchaîné popover (ms)
fadeOutDuration = 65: Durée de l'animation de fondu sortant du popover (ms)
preventHide = true: Empêcher le masquage lors d'un clic dans le popover
onShow: fonction à exécuter lorsque le popover est affiché. c'est l'élément déclencheur et le premier argument passé à la fonction est l'élément popover (tous deux enveloppés dans jQuery).
onHide: Callback à exécuter lorsque le popover est masqué. Identique à onShow.
🆙 popup : Ouvre un popup après un délai ou une position dans la page ➠ DEMO
syntaxe {up popup=5s}contenu popup{/up popup} Ouvre le popup 5 secondes après le chargement de la page syntaxe {up popup=50%}contenu popup{/up popup} Ouvre le popup à la moitié de la page syntaxe {up popup=#bloc}contenu popup{/up popup} Ouvre le popup quand le haut du bloc #bloc est en haut de la zone visible du navigateur
@author: LOMART @version: UP-3.0 @license: GNU/GPLv3@tags: HTML
Mode et conditions d'exécution
popup = 5s: Délai en sec (15s), position dans la page (50%) ou sélecteur de bloc (#bloc)
scroll-offset = 3: x = tolérance avant-après pour le scroll. x1-x2 = avant et après
filter: condition pour exécuter l'action
cookie-duration: nombre de jours de conservation des cookies. 0 pour la session ou -1 pour ignorer
Position et style de la fenêtre surgissante
popup-position: position YX du popup : TL, TC, TR, CL, CC, CR, BL, BC, BR
popup-style: classe ou style pour la fenetre popup
Arrière-plan
overlay-lock = 1: 1: le popup bloque la navigation sur la page
overlay-style: classe ou style pour masquer/atténuer le contenu
Bouton fermeture popup
close-only-button = 1: 1: fermeture uniquement par le bouton, 0: en cliquant hors du popup
close-style: classe ou style pour la fenetre popup
close-label = ×: texte ou symbole pour le bouton. BBCode et action UP admis
Animation
animation-in: classe unique pour animation ouverture du popup
animation-out: classe unique pour animation fermeture du popup
animation-target = popup: popup ou overlay: cible de l'animation
Divers
id: id genérée automatiquement par UP
css-head (base-css): style ajouté dans le HEAD de la page
🆙 printer : Ajoute un bouton pour proposer l'impression d'une partie de la page ➠ DEMO
syntaxe {up printer=texte bouton} le contenu à imprimer {/up printer}
qrcode = text: type de QRCode : text/url/sms/email/phone/location/wifi/contact
size = 200: Largeur
Les types de contenus
name: nom pour contact
text: texte libre pour text, sms, email, contact
phone: numéro de téléphone pour sms, tel, contact
url: site Internet pour url, contact
email: adresse email pour email, contact
subject: sujet pour email
latitude: pour geo
longitude: pour geo
address: adresse pour contact
ssid: identifiant point d'accés pour wifi
auth = WPA: WPA ou WEP pour wifi
password: clé wifi du point d'accés pour wifi
Divers
alt: texte alternatif, si le qrcode n'est pas affiché
encoding = UTF-8: code pour texte
Style CSS
id: identifiant
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
🆙 random : sélectionne une ou plusieurs valeurs dans une liste ou un dossier ➠ DEMO
syntaxe {up random=1;2;3} -> une des 3 valeurs au hasard {up random=1;2;3 | maxi=2 | sep-out=;} -> deux des 3 valeurs au hasard séparées par un point virgule {up random=1,2,3 | sep-in=,} -> une des 3 valeurs séparées par une virgule au hasard {up random=dossier/*.{jpg,ˆpng}} -> un des fichiers jpg ou png dans le dossier {up random=dossier/fichier.csv} -> une des valeurs dans le fichier csv {up random}val1{===}val2{===}val3{===}valN{/up random} -> une des valeurs au hasard
@author: Lomart @version: UP-1.0 @license: GNU/GPLv3@credit: script de Matt@tags: layout-dynamic
readmore: texte bouton OUVRIR (idem textmore)
btn-position = after: emplacement des boutons. before=au-dessus, after=au-dessous
Texte et style des boutons
textmore = lire la suite: texte bouton OUVRIR
textmore-style: classe et style pour le bouton OUVRIR
textmore-class: classe et style pour le bouton OUVRIR
textless = replier: texte bouton FERMER
textless-style: classe et style pour le bouton FERMER
textless-class: classe et style pour le bouton FERMER
Style pour le panneau contenu
panel-style: classes et style pour le contenu (v2.6)
panel-visible: hauteur visible du contenu quand masqué (px ou sélecteur CSS)
panel-actif: événement javascript sur la partie visible du contenu pour dérouler/ enrouler le contenu.
panel-overlay: affiche un dégradé pour masque le bas du panel-visible. (vide=style standard ou règles CSS)
panel-speed: vitesse d'apparition du contenu. Par défaut: 750ms
Style CSS des boutons
id: identifiant
class = bg-grisPale bg-gris bg-hover-grisClair p1 tc: classe(s) pour les boutons OUVRIR et FERMER
style: idem
css-head (base-css): règles CSS ajoutées dans le HEAD
🆙 sameheight : égalise la hauteur des enfants directs du bloc (p ou div) ➠ DEMO
syntaxe: {up sameheight} < div>...< /div> < div>...< /div> {/up sameheight} note: gestion de la largeur avec l'option "css-head" qui ajoute du code css dans le head exemple: css-head=.sameheight[float:left;width:30%;] Attention: remplacer les {} par []
@author: Lomart @version: UP-1.0 @license: GNU/GPLv3@credit: un vieux script de mes archives @tags: HTML
sameheight: inutilisé
id:
class: classe(s) pour bloc principal
style: style pour bloc principal
css-head (base-css): code css libre dans le head. attention: ] au lieu de }
🆙 scroll_indicator : Affiche la position dans la page dans un cercle autour du curseur ➠ DEMO
scroller: nombre d'élément ou hauteur du bloc en px
Style CSS
id: Identifiant
class: classe(s) pour la balise principale
style: style inline pour la balise principale
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
paramètres Javascript pour configuration
newsPerPage = 4: nombre de blocs par page. Idem option principale
navigation = true: affiche la navigation haut/bas
autoplay = true: active la lecture automatique
direction = up: sens de défilement (up/down)
animationSpeed = normal: normal, slow ou fast
newsTickerInterval = 4000: autoplay interval en ms
pauseOnHover = true: arrêt défilement lors survol souris
🆙 site_stat : comptabilise le nombre d'appel de cette action et affiche le nombre de visite ➠ DEMO
syntaxe : {up site-stats} : incrémente le fichier dir-logs/id-alias_article.log {up site-stats=*} : Calcule et affiche les stats pour TOUS les fichiers {up site-stats=0} : Calcule et affiche les stats pour l'article courant {up site-stats=12} : Calcule et affiche les stats pour l'article d'ID=12 {up site-stats=mask} : affiche les stats des fichiers correspondant au mask L'affichage est réalisé à l'aide de templates et de mots clés : --- tmpl-lign : résultat pour un fichier log (un article) ##count## : nombre total de visites uniques pour un article ##id##, ##alias##, ##title##, ##created##, ##updated## : données de l'article ##catid##, ##catalias## : id et alias de la catégorie de l'article ##detail## : affiche le détail des visites par année, mois, langue --- tmpl-detail-period : modèle pour une période de ##detail## Les mots clés pour les sous-templates de ##detail## Détail par articles : ##PERIOD##, ##TOTAL##, ##LANG## Motif répété pour ##LANG## : ##LANG##, ##COUNT## Détail par nombre de pges vues par un visteur : ##PERIOD##, ##TOTAL##, ##PAGES-VISITORS## Motif répété pour ##PAGES-VISITORS## : ##NBPAGES##, ##NBVISITORS## :
site_stat: vide : enregistre l'accès, sinon masque= *:tous, 1:courant, ID article ou masque fichiers (id-alias)
catid-include: liste des id catégories à inclure, séparateur virgule
catid-exclude: liste des id catégories à exclure, séparateur virgule
usergroup-list: liste des groupes d'utilisateurs à exclure, séparateur virgule
ip-list = 127.0.0.8, localhost: liste des IP à ignorer. les botnets sont ignorés, séparateur virgule
bots-list = bot,spider,crawler,libwww,search,archive,slurp,teoma,facebook,twitter: liste de bots exclus
Options pour affichage résultats
view-catid-include: liste des catégories prise en compte
detail-max-month: Nombre de mois affichés. 0: tous
tmpl-lign = ##ALIAS## ##CATALIAS## ##DETAIL##: modele d'affichage pour un article ou total
tmpl-detail-period = [b class="t-blue bg-grisClair ph1"]##PERIOD##[/b] ([b]##TOTAL##[/b] - ##LANG##): template pour une période
tmpl-detail-period-lang = [i]##LANG##[/i]:[b]##COUNT##[/b]: Sous-template pour un langage
tmpl-total-detail-period = [b class="t-blanc bg-brun ph1"]##PERIOD##[/b] ([b]##TOTAL##[/b] - ##PAGES-VISITORS##): template pour le nombre de pages vues par les visiteurs
tmpl-total-detail-PV = [i]##NBPAGES##p[/i]:##COUNT##: Sous-template groupe de nombres de pages par visiteurs
date-format = lang[en=%B %se, %Y; fr=%e %B %Y]: format pour la date
no-content-html = lang[en=No statistical data; fr=Aucune donnée statistique]: message affiché si aucun résultat pour la sélection
Paramètres consolidation pour prefs.ini
keep-days = 3: nombre de jours non compactés en mois. Aujourd'hui non inclus. Ces jours ne sont pas comptabilisé dans leur mois
keep-months = 12: nombre minimum de mois non compactés en années. (0=année courante, 12=année courante et précédente)
delay-unique = 300: delai (en secondes) entre 2 visites d'une page par une IP pour la considerer comme unique
bots-nbpages = 200: nb pages/jour pour suspision de robots
Classe(s) et style(s) pour la ligne total
total-style = bg-grisClair: style pour la dernière ligne
Gestion style d'une ligne
item-tag: balise pour les lignes de la liste
item-class: classe pour les lignes de la liste
item-style: style pour les lignes de la liste
Gestion style du bloc principal
main-tag (block): balise pour la liste
id: identifiant
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): style ajouté dans le HEAD de la page
Pour webmaster - à ajouter dans le fichier prefs.ini
dir-logs = up/site-stat: dossier pour logs
🆙 site_visit : comptabilise le nombre d'appel de cette action et affiche le nombre de visite ➠ DEMO
syntaxe : {up site-visit} : incrémente le fichier log-path/alias_article.stat {up site-visit=nom} : incrémente le fichier log-path/nom.stat {up site-visit | info} : liste le contenu de tous les fichiers .stat dans log-path {up site-visit | info=xxx} : liste le contenu de tous les fichiers action-xxx.stat dans log-path Les données sauvées dans xxx.stat sont ##alias## : le nom du fichier, puis dans l'ordre : ##counter## : le cumul des visites ##lastdate## : la date dernère consultation ##id##, ##alias##, ##title##, ##created##, ##updated## : données de l'article ##catid##, ##catalias## : id et alias de la catégorie de l'article ##detail## : affiche le détail des visites par année, mois, langue
max-height = 1: égalise la hauteur de tous les blocs
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
JS : autoplay
autoPlay: 0 ou durée affichage image en millisecondes
slideSpeed = 200: vitesse de transition en millisecondes
JS : pagination
paginationSpeed: durée changement en millisecondes
pagination = true: affiche pagination
paginationNumbers: affiche numéros à l'intérieur des boutons de pagination
JS : navigation
goToFirst = 1: Retour sur premier élément si lecture automatique à la fin
goToFirstSpeed = 1000: vitesse de l'option goToFirst en millisecondes
navigation = false: affichage boutons "next" et "prev"
navigationText = "prev,next": boutons sans texte: "navigationText: false"
JS : nombre d'images selon largeur écran
responsive = true: adaptation sur petits ecrans
items: nombre maxi d'éléments affichés en même temps sur la plus grande largeur de navigateur
itemsDesktop = [1199, 4]: cela vous permet de prédéfinir le nombre de diapositives visibles avec une largeur de navigateur particulière. Le format est [x, y] où x = largeur du navigateur et y = nombre de diapositives affichées. Par exemple, [1199,4] signifie que si (window <= 1199) {affiche 4 diapositives par page} Vous pouvez également utiliser "itemsDesktop: false" pour ignorer ces paramètres. Pour bien comprendre comment cela fonctionne, consultez ma démo personnalisée
itemsDesktopSmall = [979, 3]: voir ci-dessus
itemsTablet = [768, 2]: voir ci-dessus
itemsMobile = [479, 1]: voir ci-dessus
🆙 slideshow_billboard : Slideshow responsive d'images avec légendes et liens ➠ DEMO
syntaxe 1: {up slideshow_billboard=chemin_sous_dossier} syntaxe 2: {up slideshow_billboard} < img src="/images/img.jpg" alt="légende"> // image avec légende dans alt < a href="#">< img src="/img.jpg">< /a> // image avec lien {/up slideshow_billboard}
navType = list: "controls", "list", "both" or "none"
styleNav = 1: applies default styles to nav
includeFooter = 1: afficher/masquer le pied de page (légende et navigation)
autosize = 1: hauteur diaporama fixe. calcul sur 1ère image
resize: tente de détecter automatiquement la taille de chaque diapositive
stretch = 1: étire les images pour remplir le conteneur
🆙 snippet : créer et charger des petits fichiers texte (snippet) ➠ DEMO
Syntaxe : {up snippet=foo} // charge un fichier up/snippet/foo.html {up snippet=foo}texte{/up snippet} // écrit le texte dans le fichier up/snippet/foo.snippet {up snippet} // affiche la liste de tous les fichiers du dossier up/snippet/ {up snippet=* | delete} // supprime tous les snippets
dbinfos: vide= la liste des tables OU nom_table = la liste des colonnes
mise en forme du résultat
presentation = table: présentation du résultat : list,table,div ou 0
template (item-template): modèle mise en page
header: 1 ou vide pour utiliser les mots-clés, sinon titres séparés par des points-virgules
sort: type de tri par colonne sous la forme: i,3-f-s. i:int, s:string, f:float. ,3 indique un tri secondaire sur la 3e colonne
sort-first: nom ou position de la colonne triée en premier
col: alignement et largeur des colonnes sous la forme x-D-C5-100 pour rien-droite-centre 5%-100% (voir doc)
no-content-html = aucun résultat: essage si echec requete
Style CSS pour afficher le résultat
id: identifiant
main-class = up: classe(s) pour bloc
main-style: style inline pour bloc
item-class: classe(s) pour ligne
item-style: style inline pour ligne
css-head (base-css): style ajouté dans le HEAD de la page
🆙 tab : affiche du contenu dans des panneaux avec onglets en haut, à gauche ou à droite. ➠ DEMO
Mode responsive avec gestion de l'espacement vertical {up tab} < h4>texte onglet< /h4> < p>texte du panneau< /p> < img src="/.."> {/up tab} Sur mobile ou sur demande, l'affichage est en mode accordion script JS adapté par Lomart pour gestion répartition verticale
@author: Lomart @version: UP-1.0 @license: GNU/GPLv3@credit: Script de bhaveshcmedhekar@tags: layout-dynamic
tab = tab: tab ou accordion
auto: 0 ou delai en millisecondes pour changement automatique d'onglet
Style des titres (onglets)
title-tag = h4: balise utilisée pour les titres onglets
title-style: classe(s) et style inline onglets
title-class: classe(s) onglets (obsolète)
Style des panneaux de contenu
content-style: classe(s) et style inline contenu
content-class: classe(s) contenu (obsolète)
espace-vertical = 1: 0, 1 ou 2 : niveau des éléments à répartir
Style du bloc principal
id: identifiant
style: classe(s) et style(s) bloc principal
class: classe(s) bloc principal (obsolète)
css-head (base-css): règles CSS mises dans le head
paramètres Javascript pour configuration
side: left ou right
active_tab: 1 a N
plugin_type: accordion (interne, ne pas modifier)
content_display = block: interne, ne pas modifier, défini par espace-vertical
🆙 table_by_columns (table_par_colonnes) : tables responsives par empilement des lignes d'une colonne. ➠ DEMO
Syntaxe {up table-par-colonnes} < table> ... < /table> {/up table-par-colonnes} Les lignes sont empilées par colonnes. Très pratique pour des plannings
@author: lomart @version: UP-1.0 @license: GNU/GPLv3@credit: John Polacek@tags: Responsive
table_by_columns (table_par_colonnes): rien
model = up-stacktable: nom d'un fichier CSS prévu par le webmaster pour toutes les tables de la page
max-height: permet de limiter la place en hauteur par l'affichage d'un ascenseur
breakpoint = 720px: bascule en vue responsive
key-width = 35%: largeur de la première colonne en vue responsive
title-style: style pour la ligne titre en vue responsive
Style CSS
id: Identifiant
style: style inline pour balise table
class: classe(s) pour balise table (obsolète)
css-head (base-css): permet d'ajouter des style à la table incluse
🆙 table_by_rows (table_par_lignes) : tables responsives par empilement des colonnes par lignes. ➠ DEMO
{up table-par-lignes} < table> ... < /table> {/up table-par-lignes} les colonnes sont empilées par lignes avec la possibilité de les déplacer, de les fusionner, de supprimer le titre, d'afficher seulement certaines colonnes. https://github.com/codefog/restables/blob/master/README.md . IMPERATIF : Les titres des colonnes doivent être dans une balise HEAD
css-head (base-css): permet d'ajouter des style à la table incluse
paramètres Javascript pour configuration
merge: fusion de colonnes. 1:[2,3],5:[6] = 2&3 avec 1 et 6 avec 5
move: déplacement colonne. 1:0,6:1 = 1 au debut et 6 en 2eme
skip: non visible. [3,5] = col 3 et 5 non visible
span: [2,4] = valeur sans libellé (eq: colspan)
🆙 table_fixe : tables responsives: ligne entete reste visible ➠ DEMO
{up table-fixe} < table> ... < /table> {/up table-fixe} col-left : nombre de colonnes toujours visible. Une barre de défilement est ajoutée pour les autres colonnes.
Inversion colonnes/lignes. les titres de colonnes deviennent la 1ère colonne et reste visibles. Une barre de défilement est ajoutée pour les autres colonnes. {up table-flip} < table> ... < /table> {/up table-flip}
@author: lomart @version: UP-1.0 @license: GNU/GPLv3@credit: Jason Gross@tags: Responsive
table_flip (table_permute): aucun argument
Style CSS
id: identifiant
style: classes et styles inline pour balise table
class: classe(s) pour balise table (obsolète)
css-head (base-css): permet d'ajouter des style à la table incluse
🆙 table_sort : Trier, filtrer et paginer une table ➠ DEMO
col-type: mode de tri des colonnes. n=numerique, a=alphanum, i=alphanum case insensitive, d=date
col-init: n° de la colonne triée au chargement et sens (asc, desc)
champs pour recherche
placeholder = lang[en=Search;fr=Rechercher]: texte dans la zone recherche
globalSearch: vide= recherche sur toutes les colonnes, sinon liste des colonnes (1,2,5)
Pagination
pagination: nombre de lignes par pages ou 0 pour désactiver
pagination-class: classe pour les boutons
pagination-class-active: classe pour le bouton actif
Style CSS
id: id genérée automatiquement par UP
class: classe(s) ajoutées à la table
style: style inline ajouté à la table
css-head (base-css): style ajouté dans le HEAD de la page
paramétres JS
sortable = 1: Activer le tri
searchable = 1: Activer la recherche
🆙 tabslide : ajoute des onglets pour ouvrir un panneau sur les bords de la fenêtre ➠ DEMO
syntaxe {up tabslide=btn-text | tabLocation=top}contenu{/up tabslide} utilisation : - un sommaire sur le coté du site - un module connexion
@author: Lomart @version: UP-1.0 @credit: script de hawk-ip@license: GNU/GPLv3@tags: Body
l'onglet
tabslide: titre de l'onglet
tab-style: classes et styles inline pour onglets
tab-class: classe(s) pour onglet (obsolète)
le panneau
id: identifiant
panel-style: classes et styles inline pour panneau
panel-class: classe(s) pour panneau (obsolète)
Options JS disparues - conservés pour compatibilité
speed = 300: OBSOLETE voir bounceSpeed
positioning = fixed: or absolute, so tabs move when window scrolls
toggleButton = .tab-opener: not often used
paramétres JS : définition de l'onglet
tabLocation = left: position : left, right, top ou bottom
onLoadSlideOut: slide out after DOM load
clickScreenToClose = 1: fermer l'onglet lorsque le reste de l'écran est cliqué
tabHandle = .handle: Sélecteur JQuery pour l'onglet, peut utiliser #
action = click: mode ouverture : 'hover' ou 'click'
hoverTimeout = 5000: sélai en ms pour garder l'onglet ouvert après la fin du survol - uniquement si action = 'hover'
offset = 200px: distance pour top or left (bottom or right si offsetReverse est vrai)
offsetReverse: true= aligné a droite ou en bas
otherOffset = null: si défini, la taille du panneau est définie pour maintenir cette distance à partir du bas ou de la droite (haut ou gauche si offsetReverse)
handleOffset = null: Si null, détecte la bordure du panneau pour bien aligner la poignée, sinon la distance en px
handleOffsetReverse: si vrai, poignée alignée avec la droite ou le bas du panneau
paramétres JS : Animation
bounceDistance = 50px: distance autorisée pour le rebond
bounceTimes = 4: nombre de rebonds si 'bounce' est appelé
bounceSpeed = 300: vitesse d'animation des rebonds
paramétres JS : image pour l'onglet
pathToTabImage = null: image facultative à afficher dans l'onglet
imageHeight = null: hauteur image
imageWidth = null: largeur image
paramétres JS : pour expert
onOpen = function () {}: appelé après l'ouverture
onClose = function () {}: appelé après la fermeture
onSlide = function () {}: appelé après l'ouverture ou la fermeture
🆙 text_fit : Ajuste un texte à son conteneur ➠ DEMO
syntaxe {up up text-fit=option_principale}texte{/up text-fit}
🆙 upactionslist : Liste des UP actions avec infos et paramètres ➠ DEMO
{up upactionslist} toutes les actions {up upactionslist=action1, action2} une ou plusieurs actions {up upactionslist | md} fichier marknote {up upactionslist | csv} fichier CSV
*
*
@version: UP-1.0 @author: Lomart @update: 2019-10-25 @license: GNU/GPLv3@tags: UP
Sélection des actions listées
upactionslist: liste des actions à récupérer. toutes par défaut
exclude-prefix = _,x_: prefix des actions non listées. Separateur = comma
without-custom: affiche les infos du dossier custom de l'action. 1 pour les masquer
Affichage du lien vers la démo
demo = 1: afficher le lien vers la demo
Générer les fichiers JSON synonymes des noms utilisés par UP 'dico'
make-dico: consolide le fichier principal dico.json avec ceux des actions
Création des fichiers documentation
csv: fichier doc-actions.csv avec les options des actions
comment: fichier 'comment-actions.csv' avec les infos des entêtes scripts pour analyse
md: enregistre la documentation au format markdown dans plugins/content/up/doc-actions.md
Style CSS
id: identifiant
style: style ou class
class: idem style
filter: condition pour exécuter l'action
🆙 upbtn_makefile : Création des fichiers HTML pour le plugin editors-xtd ➠ DEMO
syntaxe {up upbtn_makefile}
@author: LOMART @version: UP-2.1 @license: GNU/GPLv3@tags: UP
Sélection des actions listées
upbtn_makefile: Vide pour toutes les actions, sinon liste des actions à inclure ou exclure (list-exclude=1).
list-exclude: 0:uniquement les actions indiquées, 1: toutes sauf les actions indiquées
without-custom: 1 sans les infos dans prefs.ini (v2.6)
mode d'affichage
top10: liste des actions à dupliquer dans un groupe au début de la liste
by-tags = 1: si 0, les actions sont dans l'ordre alpha sans notion de groupes (sauf top10)
Exportation des fichiers
export-folder: sous-dossier de TMP pour sauver l'arborescence. ex : up-pref-foo
🆙 upprefset : Affiche la liste de tous les prefsets de UP pour le site ➠ DEMO
syntaxe {up upPrefSet}
@author: LOMART @version: UP-1.8 @license: GNU/GPLv3@tags: UP
Sélection des actions
upprefset: liste des actions ou vide pour toutes
action-exclude: 1: toutes les actions sauf celles du paramétre principal
prefset-exclude = icons,options: sections exclues
Format de la mise en page
action-template = [h4]##action##[/h4]: présentation pour ##action##
prefset-template = [b class="t-vertFonce"]##prefset##[/b] : [small]##options##[/small]: présentation pour ##prefset##
info-template = [div class="bd-grey ph1"]##info##[/div]: présentation pour ##info##
prefset-separator = [br]: séparateur entre items
options-separator = [b class="t-vert"] | [/b]: les underscrores sont remplacés par des espaces
exportation des fichiers
export-prefs: ou sous-dossier de TMP pour sauver l'arborescence. ex : up-pref-foo
Style CSS
action-class: classes et style pour le bloc d'une action
id: identifiant
class: classe(s) pour bloc
style: style inline pour bloc
css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
🆙 upscsscompiler : Compile tous les fichiers SCSS dans les dossiers des actions ➠ DEMO
syntaxe: {up upscsscompiler} toutes les actions {up upscsscompiler=action1, action2} une ou plusieurs actions note: les fichiers SCSS & CSS sont en racine des dossiers actions
@author: LOMART @version: UP-1.2 @license: GNU/GPLv3@credit: https://github.com/leafo/scssphp @tags: UP
Sélection des actions
upscsscompiler: liste des actions à recompiler. toutes par défaut. 0 pour inactiver
without-custom: sans prise en compte des personnalisations. Usage interne pour créer le zip de UP
force: force la compilation de tous les SCSS. Par défaut: les SCSS plus récents que leur CSS.
force-filter: oblige force si la condition est remplie