[PhpBB2] Mise en forme des liens

**fascicularia** · **fascicularia** Mer 25 Sep 2019 - 17:38

Version du forum :
PhpBB2
Templates modifiés :
oui
Navigateur :
Opera

Bonjour,

Philippe m'a donné un coup de main il y a peu sur le forum de support sur une demande permettant de mettre en forme
certains liens.

Voici le lien de la demande d'aide sur le forum de support
https://forum.forumactif.com/t401130-faire-le-distingo-entre-le-lien-d-une-image-et-un-lien-simple

et le js qui a découlé de cette aide.

Code:: $(function(){ $('.postbody').find('a[href]:not(:has(>img))').wrap('<button class="btn btn-3 btn-3d icon-cog"></button>'); });

et le css qui lui ai affilié

Code:: .btn-3d{padding:25px 60px 25px 120px!important;border-radius:14px}.btn-3{background:#fff!important;color:#fff!important}.btn{border:none;font-size:12px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#333!important;background:0 0;cursor:pointer;padding:25px 80px;display:inline-block;margin:15px 30px;letter-spacing:1px;font-weight:700;outline:0;position:relative;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.btn-3:before{position:absolute;height:100%;left:0;top:0;line-height:3;font-size:140%;width:60px}.btn-3d:before{background:#406001;color:#fcad26;z-index:2;border-radius:14px 0 0 14px}.icon-cog:before{content:"\e010"}.btn:before,.icon-file:before{font-family:icomoon;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;position:relative;-webkit-font-smoothing:antialiased}.btn-3d:after{width:20px!important;height:20px!important;background:#406001!important;z-index:1!important;left:55px!important;top:50%!important;margin:-10px 0 0 -10px!important;-webkit-transform:rotate(45deg)!important;-moz-transform:rotate(45deg)!important;-ms-transform:rotate(45deg)!important;transform:rotate(45deg)!important}.btn:after{content:'';position:absolute;z-index:-1;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.btn-3:before{position:absolute;height:100%;left:0;top:0;line-height:3;font-size:140%;width:60px}.icon-cog:before{content:"\e010"}

J'ai hélas fermé la demande un peu vite. Je me suis aperçu après coup que le js agissait également sur d'autres liens dont certains sont gérés via js.

J'ai tenté de comprendre le fonctionnement de cette partie

Code:: .find('a[href]:not(:has(>img))')

pour rajouter d'autres éléments sur lequel le script ne doit pas agir mais tous mes essais se sont soldés par des échecs.

Philippe, si tu pouvais apporter de l'eau à mon moulin impeccable

ps : je peux fournir les js affiliés si nécessaire.

Merci par avance pour votre aide

Ps : rien d'urgent; cette demande est de l'ordre de la fioriture (Philippe, pas de codage à 4h du matin dis donc toi

; au dodo garnement clin oeil

)

**Milouze14** · **Milouze14** Mer 25 Sep 2019 - 17:46

Coucou Stéphane,

je code bien avant 4h00 du matin car je me lève à 3h15 lOL

.

Pour ta question:

J'ai tenté de comprendre le fonctionnement de cette partie

Ceci:

Code:: .find('a[href]:not(:has(>img))')

Veut dire, on recherche un lien ou il n'y a pas d'image .

Que veux tu proscrire exactement ?

**fascicularia** · **fascicularia** Mer 25 Sep 2019 - 18:48

Re Philippe,
Voici les identifiants qu'il faudrait exclure en plus de celui déjà installé dans le js
1 a.xaxim
2 a.mentiontag.tooltipstered
3 a.fa_post_card
4 a.M14_AncoR_PosT + un à déterminer qui correspond à l'identifiant d'un compte membre ex : U1 (a[href*="/u"] ? j'extrapole très certainement xxxbncnn

)
5 a[href*="/register"] et a[href*="/login"]

Pour compléter les infos, voici la liste des js qui agissent sur les liens et les séquences obtenues avec les outils du navigateur
1/

Code:: /* Mettre les balises img automatiquement*/ $(function() { var links = $('.post a'), local = document.URL.replace(location.hash, '').replace(location.pathname, ''), reg = /\.(png|jpg|jpeg|gif)$/i; for(var i = 0, l; (l = links[i++]); ) { if(l.innerHTML !== l.href) continue; if(reg.test(l.href)) l.innerHTML = '<span class="resizebox gensmall clearfix" style="width:600px"><span class="resize_border clearfix"><span class="resize_content clearfix"><a href="#" class="xaxim">Le système de redimensionnement n'est pas disponible pour les images apposées sans les balises img.<br><i class="fas fa-arrows-alt" style="color: #5d7f27;padding-right: 13px;padding-left: 23px;font-family: FontAwesome!important;"></i>Cliquez sur l'image pour la voir en taille réelle sur une autre page.</a></span></span></span><br><img class="M14_not_tag"style="max-width:600px;height:auto;" alt="' + l.href + '" src="' + l.href + '">'; if(l.href.indexOf(local) === 0) l.innerHTML = l.href.substring(l.href.lastIndexOf('/')); } $('.postbody').each(function(){$(this).find('.M14_not_tag').attr('id', function(img) { return 'M14_img_' +img; }) }); });;

La séquence

Code:: <a href="https://i.servimg.com/u/f57/18/66/22/79/hpim1511.jpg" target="_blank" rel="nofollow"><span class="resizebox gensmall clearfix" style="width:600px"><span class="resize_border clearfix"><span class="resize_content clearfix"><a href="#" class="xaxim">Le système de redimensionnement n'est pas disponible pour les images apposées sans les balises img.<br><i class="fas fa-arrows-alt" style="color: #5d7f27;padding-right: 13px;padding-left: 23px;font-family: FontAwesome!important;"></i>Cliquez sur l'image pour la voir en taille réelle sur une autre page.</a></span></span></span><br><img class="M14_not_tag" style="max-width:600px;height:auto;" alt="https://i.servimg.com/u/f57/18/66/22/79/hpim1511.jpg" src="https://i.servimg.com/u/f57/18/66/22/79/hpim1511.jpg" id="M14_img_0"></a>

2/ pas de js affilié, il s'agit du tag des utilisateurs
la séquence

Code:: <a href="/u1" rel="nofollow" data-id="1" class="mentiontag tooltipstered">@demeter</a>

3/ Postcard
le js

Code:: /*POSTCARD*/ $(function(){"DEVELOPED BY ANGE TUTEUR";"NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR";"ORIGIN : https://fmdesign.forumotion.com/t515-post-cards#7069";var a=$(".postbody a"),t=$(".bodylinewidth")[0]?0:document.getElementById("wrap")?1:$("div.pun")[0]?2:document.getElementById("ipbwrapper")?3:"badapple";if("badapple"==t||!window.JSON||!window.localStorage){var r='The plugin "fa_post_card" could not be executed because : ';return"badapple"==t&&(r+="\nYour forum version is not supported."),window.JSON||(r+="\nJSON is not supported by your browser"),window.localStorage||(r+="\nThe Storage API is not supported by your browser."),void(window.console&&console.error?console.error(r):alert(r))}window.fa_post_card={summary_length:300,cache_time:36e5,lang:{error:{name:"Error",title:"POST NOT FOUND",summary:"Sujet inacessible."},no_name:"Anonyme",no_avatar:"https://2img.net/i/fa/invision/pp-blank-thumb-38px.png",no_title:"Titre incorrect",no_summary:"Aucun résumé de disponible",no_origin:"Sujet indisponible",tooltip:"Cliquer pour voir le sujet"},a:a,index:-1,quota:a.length,version:t,select:{content:[".postbody > div",".content > div",".entry-content > div:first > div",".post-entry > div:first"],title:[".postdetails:has(.sprite-icon_miniposted)",".topic-title",".posthead a",".postbody-head a"],avatar:[".poster-profile a img",".postprofile dt img",".user-basic-info img:first",".postprofile dt img"],username:[".name",".postprofile dt > strong",".username",".postprofile dt > strong"]},sanitize:function(a){return a?a.replace(/<|>/gm,function(a){switch(a){case"<":return"<";case">":return">"}}):""},createCard:function(a,t,r){var e,o={username:t?$(fa_post_card.select.username[r],t).text():fa_post_card.lang.error.name,avatar:t?$(fa_post_card.select.avatar[r],t).attr("src"):fa_post_card.lang.no_avatar,title:t?$(fa_post_card.select.title[r],t).text():fa_post_card.lang.error.title,summary:t?$(fa_post_card.select.content[r],t).text():fa_post_card.lang.error.summary,origin:a.innerHTML},i=o.origin.replace(/.*?#(\d+)$/,"$1"),s=localStorage.fa_post_cards?JSON.parse(localStorage.fa_post_cards):{};for(e in o)o[e]=fa_post_card.sanitize(o[e]);a.className+=" fa_post_card",a.title=fa_post_card.lang.tooltip,a.innerHTML='<div class="fa_card_inner"><div class="fa_card_left"><img class="fa_card_avatar" src="'+(o.avatar?o.avatar:fa_post_card.lang.no_avatar)+'"/><div class="fa_card_username">'+(o.username?o.username:fa_post_card.lang.no_name)+'</div></div><div class="fa_card_right"><div class="fa_card_title"><h2>'+(o.title?o.title:fa_post_card.lang.no_title)+'</h2></div><div class="fa_card_summary"><p>'+(o.summary?o.summary.length>fa_post_card.summary_length?o.summary.slice(0,fa_post_card.summary_length)+"...":o.summary:fa_post_card.lang.no_summary)+'</p></div><div class="fa_card_origin">'+(o.origin?o.origin.replace(/http:\/\//,""):fa_post_card.lang.no_origin)+'</div></div><div class="fa_card_clear"></div></div>',s[a.host]||(s[a.host]={}),s[a.host]["card"+i]={data:a.innerHTML,expires:+new Date},localStorage.fa_post_cards=JSON.stringify(s)},get:function(){var a,t,r=fa_post_card.a[++fa_post_card.index],e=localStorage.fa_post_cards?JSON.parse(localStorage.fa_post_cards):{},o=/#\d+$/;r&&o.test(r.innerHTML)&&o.test(r.href)&&(a=r.href.replace(/.*?#(\d+)$/,"$1"),t=$(".post--"+a)[0],e[r.host]&&e[r.host]["card"+a]&&e[r.host]["card"+a].data&&e[r.host]["card"+a].expires>+new Date-fa_post_card.cache_time?(r.className+=" fa_post_card",r.title=fa_post_card.lang.tooltip,r.innerHTML=e[r.host]["card"+a].data):t?fa_post_card.createCard(r,t,fa_post_card.version):$.get(r.href.replace(o,"")+"?change_version=prosilver",function(t){var e=$(".post--"+a,t)[0];fa_post_card.createCard(r,e,1)}).error(function(){fa_post_card.createCard(r)})),fa_post_card.index<fa_post_card.quota&&fa_post_card.get()}},fa_post_card.get()}),document.write('<style type="text/css">a.fa_post_card{font-size:12px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;text-decoration:none!important;color:#333!important;background:#FFF;border:2px solid #4b7101;border-radius:14px;display:block;width:800px;max-width:100%;min-height:100px;overflow:hidden;position:relative;margin:3px 0}.fa_card_inner{margin-left:125px}.fa_card_left{ color: white!important; text-align: center;background: #406001; border-right: 1px solid #4b7101; position: absolute; top: 0; left: 0; bottom: 0; width: 125px; border-radius: 10px 0px 0px 10px;} .fa_card_avatar{height:50px;width:50px;position:absolute;top:50%;left:50%;margin:-35px 0 0 -25px;border-radius: 30px;}.fa_card_username{font-size:12px;font-weight:700;position:absolute;top:50%;left:0;right:0;margin-top:20px}.fa_card_title h2{color:#333;font-size:14px;font-weight:700;border:none;margin:0}.fa_card_summary p{font-size:12px;margin:0}.fa_card_origin{color:#999}.fa_card_origin,.fa_card_summary p,.fa_card_title h2{padding:3px 10px}.fa_card_origin,.fa_card_title h2,.fa_card_username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fa_card_clear{clear:both}</style>');

La séquence

Code:: <a href="/t70-le-lorem-ipsum-est-simplement-du-faux-texte-employe-dans-la-composition-et-la-mise-en-page-avant-impression-le-lorem-ipsum-est-le-faux-texte-standard-de-l-imprimerie-depuis-les-annees-1500-quand-un-peintre-anonyme-assembla-ensemble-des-morceaux-de-texte#454" class=" fa_post_card" title="Cliquer pour voir le sujet"><div class="fa_card_inner"><div class="fa_card_left"><img class="fa_card_avatar" src="http://images.forum-auto.com/mesimages/922227/impatient.png"><div class="fa_card_username">fascicularia</div></div><div class="fa_card_right"><div class="fa_card_title"><h2> Re: Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte</h2></div><div class="fa_card_summary"><p>bououloua a</p></div><div class="fa_card_origin">https://floratropica.forumactif.org/t70-le-lorem-ipsum-est-simplement-du-faux-texte-employe-dans-la-composition-et-la-mise-en-page-avant-impression-le-lorem-ipsum-est-le-faux-texte-standard-de-l-imprimerie-depuis-les-annees-1500-quand-un-peintre-anonyme-assembla-ensemble-des-morceaux-de-texte#454</div></div><div class="fa_card_clear"></div></div></a>

4/

Code:: /* Citation avec ancre*/ $(function(){ $('a[href*="&mode=quote"]').on('click',function(t){t.preventDefault(); var a=$(this).attr('href'); var e=$(this).closest('table').next().find('a.M14_topic[href^="/t"]').attr('href'); var f=$(this).closest('table').next().find('a.M14_topic[href^="/t"]').text(); $.get(a,function(t){quote_text_info=$("textarea",t).val(),$(".sceditor-container").find("textarea").sceditor("instance").val('<a class="M14_AncoR_PosT"href="'+e+'"title="'+f+'"></a>\n'+quote_text_info+'\n'),$("html, body").animate({scrollTop:$(".sceditor-container").find("textarea").offset().top-100},500,function(){$(".sceditor-container").find("textarea").focus()})})}),$("a[href*='-quotetestdesforums#']").each(function(){$(this).prependTo($(this).next().find("cite:first"))})}); /* Citation avec ancre modification de l' ancien système*/ $(function(){ $('img[src="https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png"]').each(function(){ $(this).replaceWith('<span class="M14_AncoR_PosT"></span>');});});

Les séquences

Code:: <a class="M14_AncoR_PosT" href="undefined" title=""></a>

et

Code:: <a href="/u1" rel="nofollow" title="Voir le profil : demeter">@demeter</a>

5 les liens qui apparaissent sur cette phrase en étant déconnecté :
[Vous devez être inscrit et connecté pour voir ce lien]
Les séquences

Code:: <a href="/register?redirect=%2Ft86-pour-philippe">inscrit</a>

et

Code:: <a href="/login?redirect=%2Ft86-pour-philippe">connecté</a>

**Milouze14** · **Milouze14** Mer 25 Sep 2019 - 19:20

Punaise, tu me gâtes dis donc,
ce script pourrait atténuer le propagation du tag, mais pour le script Postcard, cela me parait très compromit :

Code:: $(function(){ $('tr[class*="post--"]').find('.postbody').find('a[href]:not(:has(>img))').not('a[href*="/register"],a[href*="/login"]').not('.xaxim,.mentiontag,.fa_post_card,.M14_AncoR_PosT').wrap('<button class="btn btn-3 btn-3d icon-cog"></button>'); });

**fascicularia** · **fascicularia** Mer 25 Sep 2019 - 19:35

tu trouves?

Alors, je viens de tester le nouveau js en ayant pris la précaution de vider les caches

il agit bien sur :
1 le tag des utilisateurs
2 sur la phrase : [Vous devez être inscrit et connecté pour voir ce lien]

Code:: a[href*="/register"],a[href*="/login"]

il est inactif par contre sur toute cette partie

Code:: .not('.xaxim,.mentiontag,.fa_post_card,.M14_AncoR_PosT')

et

Code:: <a href="/u1" rel="nofollow" title="Voir le profil : demeter">@demeter</a>

**Milouze14** · **Milouze14** Jeu 26 Sep 2019 - 18:52

Coucou Stéphane,

peux tu tester ce script stp:

Code:: $(function(){ $('tr[class*="post--"]').find('.postbody').find('a[href]:not(.poplight,.fa_post_card,.xaxim,.mentiontag,.fa_post_card,.M14_AncoR_PosT,[title^="Voir le profil"]):not(:has(>img,>div))').not('a[href^="/register"],a[href^="/login"]').wrap('<button class="btn btn-3 btn-3d icon-cog"></button>'); });

**fascicularia** · **fascicularia** Jeu 26 Sep 2019 - 20:47

Bonjour Philippe,
le button class agit encore sur .fa_post_card et .xaxim. le reste est nickel.

j'ai laissé le script en place pour que tu puisses visualiser le résultat sur ce topic

https://floratropica.forumactif.org/t86-pour-philippe#481

**Milouze14** · **Milouze14** Ven 27 Sep 2019 - 4:24

Coucou Stéphane,
on va agir alors sur les conteneurs img ,div , span alors:

Code:: $(function(){ $('tr[class*="post--"]').find('.postbody').find('a[href]:not(:has(>img):has>div):has(>span))').not('a[href$="jpeg"],a[href$="gif"],a[href$="png"],a[href$="jpg"],a[href^="/register"],a[href^="/login"]').wrap('<button class="btn btn-3 btn-3d icon-cog"></button>'); });

**fascicularia** · **fascicularia** Ven 27 Sep 2019 - 14:20

Bonjour Philippe,
le nouveau js annule toute mise en forme y compris sur un lien de type :
https://forum.forumactif.com/t401171-encadrement-des-image-via-js

Je pense qu'on va laisser tomber l'affaire à moins que no_way ait une idée. Je m'en veux de te faire bosser à des heures aussi matinales pour une simple fioriture timidesortdutrou

**fascicularia** · **fascicularia** Sam 28 Sep 2019 - 2:14

Bonjour Philippe,

en rajoutant

Code:: a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"],a[href$=".bmp"],a[href^="/"],a[href^="#"],a[href^="?"],a[href^="http://' + location.host + '"]

ainsi

Code:: $(function(){ $('tr[class*="post--"]').find('.postbody').find('a[href]:not(.poplight,.fa_post_card,.xaxim,.mentiontag,.fa_post_card,.M14_AncoR_PosT,[title^="Voir le profil"]):not(:has(>img,>div))').not('a[href^="/register"],a[href^="/login"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"],a[href$=".bmp"],a[href^="/"],a[href^="#"],a[href^="?"],a[href^="http://' + location.host + '"] ').wrap('<button class="btn btn-3 btn-3d icon-cog"></button>'); });

c'est presque nickel; hormis le lien du premier message d'un sujet, tout le reste fonctionne parfaitement.

j'ai juste rajouter la séquence dans la partie du deuxième not.

Pour ce qui est de l'intégration par contre, j'ai fait ça à la porcasse ouiillle

.

ps : je n'ai aucun mérite, j'ai trouvé la séquence sur un autre js
https://hotrofm.forumvi.com/t236-topic

**Milouze14** · **Milouze14** Sam 28 Sep 2019 - 5:57

Coucou Stéphane,
franchement,je ne passe pas beaucoup de temps car je suis en plein changement de F.A.I.
Mes connexions étant très limitées,je passe par le partage de connexion via mon Android actuellement, je profites du peu de temps pour l'administratif etc.

Je viens d'aller voir rapidement sur le fofo d'essais et je vais sauvegarder le script actuel et en tester d'autres.

Edit:
Je rend les armes car je n'arrive à rien de mon côté.
J'ai juste ajouté une class à la div receveuse postbody div dans le template:viewtopic_body :

Code:: <div class="M14_postBoDy">{postrow.displayed.MESSAGE}</div>

Et modifié le script :

Code:: $(function(){ $('tr[class*="post--"]').find('.postbody').find('a[href]:not(.poplight,.fa_post_card,.xaxim,.mentiontag,.fa_post_card,.M14_AncoR_PosT,[title^="Voir le profil"]):not(:has(>img,>div))').not('a[href^="/register"],a[href^="/login"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"],a[href$=".bmp"],a[href^="/"],a[href^="#"],a[href^="?"],a[href^="http://' + location.host + '"] ').wrap('<button class="btn btn-3 btn-3d icon-cog"></button>'); });

Par:

Code:: $(function(){ $('.M14_postBoDy').each(function(){ $(this).find('a[href]:not(.poplight,.fa_post_card,.xaxim,.mentiontag,.fa_post_card,.M14_AncoR_PosT,[title^="Voir le profil"]):not(:has(>img,>div))').not('a[href^="/register"],a[href^="/login"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"],a[href$=".bmp"],a[href^="/"],a[href^="#"],a[href^="?"],a[href^="http://' + location.host + '"]').wrap('<button class="btn btn-3 btn-3d icon-cog"></button>'); });});

Mais je ne pense pas que tu puisse faire quelque chose de correcte avec les postcards:

https://floratropica.forumactif.org/t87-test-stephane#486
https://floratropica.forumactif.org/t86-pour-philippe#476

**Milouze14** · **Milouze14** Jeu 3 Oct 2019 - 5:21

Hello

Entraide corbeillée

5 jours sans réponse de ta part

Merci de lire à nouveau le règlement .

[PhpBB2] Mise en forme des liens

[PhpBB2] Mise en forme des liens

Re: [PhpBB2] Mise en forme des liens

Re: [PhpBB2] Mise en forme des liens

Re: [PhpBB2] Mise en forme des liens

Re: [PhpBB2] Mise en forme des liens

Re: [PhpBB2] Mise en forme des liens

Re: [PhpBB2] Mise en forme des liens

Re: [PhpBB2] Mise en forme des liens

Re: [PhpBB2] Mise en forme des liens

Re: [PhpBB2] Mise en forme des liens

Re: [PhpBB2] Mise en forme des liens

Re: [PhpBB2] Mise en forme des liens

Créer un compte ou se connecter pour répondre

S'enregistrer

Connexion