Un autre petit plugin vite-fait-sur-le-gaz comme aurait dit San Antonio: cette fois-ci, il s'agit de styler les commentaires et articles offline pour les repérer plus simplement.
offlineClass
Le plugin se contente d'ajouter une classe de votre choix (à configurer) dans la ligne de tout commentaire ou article hors ligne.
Comme pour le précédent, il injecte un JS qui ajoute la classe au tr qui contient une liste offline.
Une fois activé, configurez le plugin en lui donnant la classe à utiliser ( par exemple «offline» ) puis ajoutez votre css à votre thème.
C'est tout. Mais visuellement, c'est autre chose !
[Edit du 02-09]
J'ai ajouté la possibilité de déplacer tout item offline en début de liste quelle que soit sa date... Utile si vous avez tendance à accumuler le boulot en retard au point que certains disparaissent dans la pagination...
Si tu publies des bouts de code sur pluXML, tu as sans doute remarqué que ce dernier est pour le moins psychorigide avec les antislashes: il les vire sans ménagement... pourtant, on aimerait bien qu'il conserve les regex en l'état dans un code par exemple.
Je suis pas stupide, je comprends bien qu'il s'agit là d'un souci de sécurité, mais quand même, ça fait ch***.
Le souci,c'est que pluXML filtre les antislashes dans les $_POST très très tôt dans le code, bien avant tout hook de plugin: il le fait dans le prepend.php de l'admin, ligne 43.
Ben mon con, comment tu vas faire si tu peux pas intervenir en php via un hook pour modifier le $_POST?
Ze solouchonne
Ben tu le modifies en JS dans la page article lors du submit du formulaire
Donc, j'injecte un petit script JS via le hook AdminArticleFoot et il se charge d'intervenir lorsque le navigateur a terminé de créer l'objet formData: c'est d'ailleurs cet évènement qu'on va utiliser dans addEventListener au lieu du submit habituel.
Code du script injecté
(function (){
let chapo = document.getElementById("id_chapo");
var content = document.getElementById("id_content");
var form = document.getElementById("form_article");
function saveSlashes(str){
return str.replace(/[\\]/g, '\\$&');
}
form.addEventListener('formdata',function(e){
let formData = e.formData;
formData.set('chapo', saveSlashes(formData.get('chapo')));
formData.set('content', saveSlashes(formData.get('content')));
});
})();
Ze saiquiouriti ?
Niveau sécurité, le plugin n'intervient que sur la page article.php et uniquement sur les champs chapo et content du formulaire. Il ne bloque pas le plxUtils::unSlash($_POST) du prepend.php. Je pense donc qu'il n'ouvre pas de faille majeure.
La vie est mal faite: je découvre document.execCommand() permettant de faire du richtext dans un élément contentEditable juste quand il est officiellement déclaré obsolète...
Bon, en même temps, sur stackoverflow, the holy baïbol, certains affirment que:
oui, il est obsolète mais n'a pas d'alternative
execCommand semble requis pour tout navigateur prétendant sortir sur le marché,
son implémentation semble sujette à variations selon le navigateur (le fameux internet explorer syndrome de triste mémoire)
Petite note sur un usage du dataset en js (l'attribut «data-quelquechose»)
Ici il utilise un attribut «data-json» pour stocker, modifier des données et transformer le formulaire dynamiquement.
Petit bout de code fait à la va-vite dans le but de vérifier la validité des liens d'une page. Mon objectif est de pouvoir à terme montrer automatiquement les liens ne répondant plus sur la page où je regroupe les liens de téléchargement illégal
Le bout de code actuel
Dans le code ci-dessous, j'utilise fetch et les promesses pour lancer des requêtes afin de styler les liens testés:
function checkLinks(nodelist){
function checkUrl(link){
return fetch(link).then(function(response){
return response.status;
}).catch(function(error){
return error.status;
});
}
if (!nodelist){
checkLinks(document.querySelectorAll('.checkLink'));
return;
}
for (let obj of nodelist){
if (obj.tagName=="A"){
checkUrl(obj.href).then(function(response){obj.classList.add("status"+response);});
}else if (obj.hasAttribute("src")){
checkUrl(obj.src).then(function(response){obj.classList.add("status"+response);});
}else{
checkLinks(obj.querySelectorAll("*[href],*[src]"));
}
}
}
checkLinks();
Explication rapide
Étape 1
J'ai d'abord fait une fonction qui appelle une URL et renvoie une promesse qui, une fois résolue, renverra le statut de la requête. On y retrouve .then qui renvoie le statut d'une requête qui aboutit et .catch qui renvoie celui d'une requête se soldant par une erreur.
Les plus coquinous d'entre-vous me feront remarquer à juste titre que, vu ce que je renvoie, je pouvais me contenter de
function checkUrl(link){
return fetch(link).then(function(response){
return response.status;
});
}
Ceci dit, en prévoyant les deux cas, je m'autorise à gérer le retour différemment selon si ça aboutit ou pas (par exemple retourner «ok200» ou «error404»
Étape 2:
Ce block n'est là que pour simplifier la vie de l'utilisateur en lui évitant de procéder lui-même au querySelectorAll()
if (!nodelist){
checkLinks(document.querySelectorAll('.checkLink'));
return;
}
Étape 3:
Je parcours la nodeList en vérifiant l'URL passée en href (pour les A) ou en src (pour les img par exemple).
Le dernier cas est celui où l'on souhaite vérifier les liens contenus dans un div portant la classe .checkLink : il suffit d'appeler la même fonction de façon récursive en lui fournissant le nodeList des liens contenus das le DIV en question. (ça permet de vérifier un grand nombre de liens sans avoir à leur ajouter individuellement la classe .checkLink, ce qui est particulièrement utile quand on publie des articles en utilisant markdown )
for (let obj of nodelist){
if (obj.tagName=="A"){
checkUrl(obj.href).then(function(response){obj.classList.add("status"+response);});
}else if (obj.hasAttribute("src")){
checkUrl(obj.src).then(function(response){obj.classList.add("status"+response);});
}else{
checkLinks(obj.querySelectorAll("a,img"));
}
}
Comment on l'utilise ?
Il suffit de mettre la classe .checkLink à tout objet dont on veut tester les liens et de coller la fonction dans la page puis de l'appeler via un checkLinks(); de bon aloi.
En l'état, la fonction ajoutera une classe .status200 pour les liens ok ou .status404 pour les URL qui ne répondent plus.
Il ne reste plus qu'à styler ces classes en changeant la couleur, le fond ou en ajoutant des emoji avec un petit content. On peut même éventuellement masquer un objet dont l'URL ne répond pas...
Limites
Le script étant en JS, il se heurte évidemment aux règles de la politique CORS: toute requête hors du domaine en cours va échouer à moins de redéfinir le CORS dans le Head de la page via
Comme d'habitude, il s'agit autant d'un proof of concept que d'une truc utile... en tout cas, n'hésitez pas à en faire rigoureusement ce que vous voulez: c'est cadeau...
Merci @Timo pour ce résumé qui explique bien des déboires personnels avec le Drag&drop.
Je me résume ça ici:
un élément acceptera un 👉drop et déclenchera ⚡ondrop si et seulement si l’élément a un ⚡onDragEnter ET un ⚡onDragOver.
🔧event.target != 🔧event.currentTarget:
event.target est l'objet qui reçoit l'événement alors que event.currentTarget est celui quel les gestionnaires d'événements sont attachés et ils peuvent être différents dans le cas d'objets imbriqués.
Si toi aussi tu veux te faire un petit bookmarklet pour envoyer des données de la page courante vers un autre site, alors tu vas kiffer 😍 parce que ce petit bout de code te permet de le faire sans rien coder 😎.
Heing ?! 🤨
J'explique:
Si on veut pouvoir:
rechercher une sélection sur un site particulier (genre sur wikipedia, jeux videos.com, allocine...) ,
envoyer le titre de la page en cours et/ou son URL vers un site qui va s'en servir (par exemple pour bookmarker la page en cours),
alors ça peut se faire ici.
Fais voir ?
Voici deux exemples:
Quid ?
Pour faire simple,
on donne un nom au bookmarklet,
on choisit les données qui doivent être envoyées,
on spécifie l'URL vers laquelle elles doivent être envoyées.
Le bookmarklet est généré en temps réel et une fois les réglages faits, il suffit de glisser-déposer le lien du bas.
J'ai ajouté la possibilité de modifier la variable permettant de passer les données; en effet, duckduckgo utilisera q=[recherche] mais un autre site pourra demander query=[recherche]...
De plus, on peut spécifier de ne pas utiliser le format URL?variable=[donnée] mais URL/[donnée] pour les sites ayant une rewriteurl (comme wikipedia qui exige un format fr.wikipedia.org/wiki/[RECHERCHE] )
Enfin, si vous spécifiez une URL contenant déjà des paramètres GET (comme mespagesquejaime.com/ajouter.php?user=MOI&apikey=321fd5613e32), le script le prendra en compte et les nouveaux paramètres s'ajouteront correctement
( mespagesquejaime.com/ajouter.php?user=MOI&apikey=321fd5613e32&title=mon cul sur la commode&url=www.monculsurlacommode.fr )
Exemple ?
Vous pouvez essayer de générer un bookmarklet pour rechercher directement la sélection sur youtube:
donnez le nom «rechercher sur youtube»
cochez le premier item : «le texte sélectionné» et renommez la variable en «search_query»
J'adore Mastodon : tu suis quelqu'un parce que tu l'as trouvé drôle et tu apprends qu'il a un blog sur le javascript qu'il partage parce que « il se dit qu'il ne doit pas être le seul javascripteur sur la planète.»
Si vous vous dites, mouais encore un blog sur JS, gardez à l'esprit que voilà un bloggueur qui intitule un billet «jQuery doit mourir», qui écrit qu'XMLHttpRequest est «inutilement compliqué» mais que dieu merci on a créé fetch, même si on ne comprend pas toujours bien ce qu'il renvoie...
Comme mon cerveau ne cesse jamais vraiment d'avoir des idées et que le confinement est propice aux réflexions, à la créativité et aux projets, j'ai à l'idée de nouvelles applis de travail pour mes élèves.
Hélas, il me faudrait une bibliothèque JS qui me permette de faire de la synthèse vocale.
Mais attention, hein: je suis prof de langue, il me faut donc une synthèse vocale CORRECTE.
A la recherche de la bibliothèque perdue
J'ai eu beau chercher, je n'ai RIEN trouvé pour le moment, car il faut dire que je cherche une bibliothèque:
qui fasse bien son boulot: oui parce que la synthèse vocale de l'API native, pardon... je me croirais revenu à mon adolescence quand on faisait mumuse avec la synthèse vocale de l'atariST en écrivant «beesoo» pour obtenir un semblant de trucs vaguement compréhensible bien que particulièrement offensant à toute oreille humaine... Merci de ne pas plaisanter: nous sommes en 2021, j'estime pouvoir compter sur un minimum phonétique.
qui n'ait pas besoin d'un framework délirant pour fonctionner (genre REAC, Node.js etc). Si le projet doit embarquer plus de framework que de code natif et qu'il faut passer les six prochains mois à se former, je vois pas l'intérêt: une lib est censée FACILITER de travail.
qui n'utilise pas google: je chie à longueur d'année sur le G du gafam, c'est pas pour me précipiter dessus à la moindre déconvenue... ou alors en leur piquant une lib que j'hébergerais par la suite et qui ne fasse AUCUN appel à leurs serveurs.
qui soit gratuite: parce que. (oui, j'ai pas d'argument particulier mais j'aime pas payer des entreprises )
qui soit pérenne s'il s'agit d'un service tiers, je risque un beau matin d'en être privé sans prévenir et de me retrouver grosjean comme devant.
offlineClass
avant de submit le formulaire. C'est une méthode dont j'ai trouvé l'idée ici 
