[resolu]Long article avec une option de pagination chapitre par chapitre au sein de l'article.

gcyrillus-nomade · mars 2021

Cette discussion est partie en fumée du coté de strasbourg il y a quelque temps. En voici une copie

Bonjour,
Après plusieurs année d’absence, je souhaite reprendre un petit projet sur PluXml d'un coté avec des recettes de cuisine et d'un autre sur la mise en forme via CSS (rien de nouveau en fait).

Je souhaiterais savoir si ces dernières années un plugin ou une option permettant de paginer un article était disponible ou a reprendre. La fonction de recherche sur le forum ne m'a pas permis de trouver.

Si non, quelle serait la méthode envisageable qui correspondrait au mieux à l'esprit du code de PluXml ?

un plugin PHP en se basant sur les fonction de PluXml (article composé de <chapo> et <content> avec une option du style <chapo> <content> <content-1> <content-2> de façon a générer une suite D’URL en fin d'article pour naviguer d’un <content-x> à l'autre )

ou bien une approche en JavaScript / AJax. (en inserant par exemple un <hr data-next> pour couper le contenu ... et éventuellement le chapo , avec ou sans contenu derriere le <hr>, pour ne pas le resservir à chaque fois)

voir un mix des deux. (plutôt avec le hr du coup pour le coté plus simple, pour le coté ressource , les <content> <content-x> serait moins gourmand)

Depuis ces dernières année le code de PluXml s'est étoffé et je n'ai pas vraiment encore remis le nez dedans, d’où ma question , et une demande de conseil à défaut d'un truc déjà fait.

Portez vous bien,

Cdt

P.S.

quel méthode est à utiliser aujourd'hui pour créer un plugin ?

est ce que : https://wiki.pluxml.org/personnaliser/personnalisation/#developper-un-plugin est toujours d'actualité

y-a t-il un squelette normalisé téléchargeable comme base ?

Mots clés:
Plugins Article

Réponses
gcyrillus-nomade Member
27 févr. 27 févr. modifié

Quelques vues mais pas de réactions , c'est le ouais-ken ?

Pour émuler un peu le topic et avoir des retours et conseils , voici ce que j'ai pour le moment en JavaScript en se basant sur une class et un data-attribute : https://codepen.io/gc-nomade/pen/oNYqvgm .
script intégré tout en fin d'article, pour que cela fonctionne ... attendre que le contenu soit chargé .
Merci.

bazooka07
bazooka07 Member
28 févr.

Bonjour,
Ton script JS est une bonne idée.
Il y a quelques améliorations :
- tester si pagination_numbers_container n'est pas égal à "null" ou plutôt créer le container depuis JS si on trouve plusieurs éléments ".new-page"
- pour la fonction createPaginationNumbers(), plutôt que modifier à chaque boucle le innerHTML du container, utiliser une variable, et après la boucle "for" mettre le innerHTML du container à jour avec cette variable. Le navigateur sera moins sollicité pour mettre le DOM à jour.
- gérer l'évènement click au niveau du container plutôt qu'au niveau de chaque bouton
perso, je préfère utiliser les classes plutôt que les styles. Faire :

const hideAll = () => list.forEach((l) => (l.classList.remove('active'));
et :
.new-page:not(.active) { display: none; }

gcyrillus-nomade
1 mars

bonjour,

merci de tes suggestions , j'ai rapidement modifier quelques trucs selon tes conseils.
- display via class moins la balise noscript
- test si list.lenght n'est pas égal à 0 ou null
- container nav créer si besoin
- bouton créer après la boucle
maj du codepen : https://codepen.io/gc-nomade/pen/oNYqvgm

Par contre je n'ai pas compris gérer l'évènement click au niveau du container plutôt qu'au niveau de chaque bouton ce que tu voulais dire .
Bonne fin de journée

bazooka07 Member
1 mars

Bon, je crois que j'ai optimisé au maximum :
https://codepen.io/bazooka07/pen/dyOepxq
- insertion de la barre de navigation le plus tard possible
- Gestion du click au niveau de la barre de navigation
- suppression de data-title
- CSS optimisé pour .new-page
- encapsulation de tout le script dans une fonction anonyme pour éviter des effets de bord avec d'autres scripts
...

gcyrillus-nomade Member
2 mars 2 mars modifié

Merci beaucoup,

j’apprécie énormément ce petit cours et ce bon coup de nettoyage sur mon code de bricoleur.

J'ai refait un fork en y ajoutant aussi une class sur le bouton actif et un if (list.length > 1) {//affichage nav} au cas ou il n'y ait qu'un chapitre.

https://codepen.io/gc-nomade/pen/ExNLOXz Cela ressemble beaucoup a ce que je m’était bricolé . j’espère ne pas avoir trop salit ta reprise et qu'elle peut devenir en l'état utile à tous.

Cordialement,
GC
 >bazooka07
 > Gestion du click au niveau de la barre de navigation
maintenant j'ai compris et appris quelque chose à la vue du code

bazooka07 Member
2 mars

Effectivement quand in n'y a qu'un chapitre, la barre de navigation est inutile. Donc on ne la crée par et la variable innerHTML est inutile.
On recherche le(s) bouton(s) actifs uniquement dans la barre de navigation et pas dans tout le document. Et que les boutons actifs.
Attention que l'aspect des boutons dépend fortement du système d'exploiitation du visiteur de la page HTML. Cela restreint le choix pour les règles CSS à personnaliser.
J'ai mis à jour mon codepen :
https://codepen.io/bazooka07/pen/dyOepxq

gcyrillus-nomade Member
3 mars 3 mars modifié

Bonjour,

superbe!

Cependant pour une raison qui m'échappe, dans PluXml , le script ne fonctionne pas et aucun Chapitre n'est du coup visible (FF & Chrome latest versions)

tester avec le theme par défaut , sans feuille de style, et tester au hasard avec les thémes skya-1 et pluxmag sur laragon en local, l'hébergement en ligne que j'ai sous la main, free n'est plus compatible et une installation test sur néodomaine de PluXml ne fonctionne pas non plus (droit fichiers a refaire à la main puis liens relatifs ne fonctionnent pas) .

Le script embarqué dans une page HTML fonctionne quelque soit l'hébergement ou à partir de l'explorateur de fichier.

J'en déduis qu’il y a un truc avec PluXml

bazooka07 Member
3 mars

Bonjour,

Dans un article de PluXml, le DOM a plus de niveaux que ton exemple sur Codepen
Voir "const page0" sur mon Codepen.

L'hébergement chez Free.fr pose problème. On peut au maximum utiliser PHP 5.6 qui n'est plus maintenu depuis janvier 2019. Et cela fait longtemps que tout le monde attend le basculement vers la version au moins 7.0.13 sortie en 2016. Alors qu'aujourd'hui on est à la version 8.0. PHP 7.3 est uniquement disponible sur leur serveur perso117-g5.free.fr

bazooka07 Member
3 mars 3 mars modifié

Si tu cherches un hébergement gratuit avec un PHP récent, il y a AlwaysData :
- https://kazimentou.alwaysdata.net/pluxml/
- Pour faire une installation de PluXml plus rapidement que ton ombre, téléverse chez ton hébergeur zInstall2.php dispo ici :
https://kazimentou.fr/

gcyrillus-nomade Member
3 mars 3 mars modifié

Okay merci, probleme solutionné en changeant:
  `const page0 = list[0].parentElement;`
en
  `const page0 = list[0].parentNode;`
(je ne saisis pas trop la différence entre ces deux là)

edit .. il n'y en a pas et les deux fonctionnent, juste un cache à vider ...

et je jette un oeil sur AlwaysData

Encore merci de ta disponibilité et efficacité

bazooka07 Member
3 mars

parentElement fait partie du DOM. Il correspond à une balise HTML
parentNode peut être un fragment du contenu d'une balise HTML, comme une portion de texte, une ligne vide,...

<div>
Je suis dingue de
<a href="https://www.chocolat.com>chocolat</a>
Lanvin.
</div>

Dans <div> il y a 4 nodes :
1. le texte "je suis dingue de"
2. <a href="https://www.chocolat.com">chocolat</a>
3. la ligne vide
4. le texte "Lanvin"

et un élément du DOM :
<a>

gcyrillus-nomade Member
3 mars

Décidément, il faut que je me ressaisisse et que je sois plus rigoureux si je veut arrêter de bricoler ...

j'ai activé un hébergement chez AlwaysData

Sujet résolu pour la partie javascript , respects.

finalement j'ai opté pour le hook ThemeEndBody et pour me faciliter les prochaines fois trouver une réponse au début de ma question , je me suis concocté un plugin sur les deux HOOK du theme + 1 pour y injecter du code dans la structure HTML du thème.

Les curieux peuvent le trouver ici : https://github.com/gcyrillus/plx-hookMyTheme et les enthousiastes faire leur critique.

Pour moi, le sujet est doublement résolu