Problème avec le tutoriel du système des mentions

par helenecolin Lun 25 Mai 2015 - 16:25

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Safari
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.bbcsherlockfrance.com

Description du problème

Bonjour,

Je rencontre un problème avec le tutoriel concernant la mise en place du système de mentions. J'ai essayé séparément les trois façons différentes d'inclure la possibilité de faire des mentions mais aucune ne fonctionne. La gestion des codes javascript est bien activée, le problème se situe donc certainement ailleurs mais j'avoue ne pas savoir où regarder...
Si vous avez des idées à me suggérer, elles seraient les bienvenues.

D'avance merci.

par Neptunia Lun 25 Mai 2015 - 16:56

Bonjour ^^

Les tutoriels de ce forum sont conçus pour fonctionner avec des templates non modifiés. Ou du moins avec des templates dont les identifiants n'ont pas été chamboulés.

La structure (et les identifiants) du profil ayant été modifiés, il va falloir adapter le javascript en conséquence et nous fournir votre #template #viewtopic_body

Et pour les deux autres méthodes il doit en être de même mais impossible d'en être certain sans avoir la possibilité de poster sur votre forum.

Pour les options de message, le template est le même que pour le profil.

par helenecolin Lun 25 Mai 2015 - 17:01

Je me doutais que le problème venait de nos templates en effet Very Happy

.

Voici notre viewtopic_body:

Code:: <script type="text/javascript"> //<![CDATA[ var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" }; $(function(){ _atc.cwait = 0; $('.addthis_button').mouseup(function(){ if ($('#at15s').css('display') == 'block') { addthis_close(); addthis_close(); } }); }); //]]> </script> <table width="100%" border="0" cellspacing="2" cellpadding="0"> <tr> <td align="left" valign="middle" nowrap="nowrap"> <span class="nav">  <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>  </span> </td> <td align="left" valign="middle" nowrap="nowrap">  <span id="twitter_btn" style="margin-left: 6px; "> <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </span>   <span id="fb_likebtn" style="margin-left: 6px; "> <iframe src="http://www.facebook.com/plugins/like.php?href={FORUM_URL}{TOPIC_URL}&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe> </span>  </td> <td class="nav" valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td> <td align="right" valign="bottom" nowrap="nowrap" width="100%"> <span class="gensmall bold"> <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a> | <script type="text/javascript">//<![CDATA[ insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES}); //]]> </script> </span> </td> </tr> </table> <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> <tr align="right"> <td class="catHead" colspan="3" height="28"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="9%" class="noprint"> </td> <td align="center" class="t-title"> <h1 class="cattitle"> {TOPIC_TITLE}</h1> </td> <td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td> </tr> </table> </td> </tr>  <tr> <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td> </tr>  {POLL_DISPLAY} <tr> <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th> <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th> </tr>   <tr class="post"> <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"> <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong><div class="pseudoname" align="center"><strong>{postrow.displayed.POSTER_NAME}</strong></div></strong></span> <span class="postdetails poster-profile"> <div align="center">{postrow.displayed.POSTER_RANK}</div><br /> <center><div align="center">{postrow.displayed.RANK_IMAGE}</div></center><center>{postrow.displayed.POSTER_AVATAR}</center><br /><br />  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}  {postrow.displayed.POSTER_RPG} </span><br /> <img src="http://2img.net/i/_.gif" alt="" style="width:150px;height:1px" /> </td> <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT} <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td> <td valign="top" nowrap="nowrap" class="post-options"> {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG} </td> </tr> <tr> <td colspan="2" class="hr"> <hr /> </td> </tr> <tr> <td colspan="2">  <div class="vote gensmall">  <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>   <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">  <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>   <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>  </div>   <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>   <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>  </div>  <div class="postbody"> <div>{postrow.displayed.MESSAGE}</div>  <dl class="attachbox"> <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt> <dd>  <dl class="file"> <dt> <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />  <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}   {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}  </dt>  <dd> <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em> </dd>   <dd> <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em> </dd>  <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd> </dl>  </dd> </dl>  <div class="clear"></div> <div class="signature_div"> {postrow.displayed.SIGNATURE} </div> </div> <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span> </td> </tr> </table> </td> </tr> <tr> <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150"> <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td> <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="middle"> {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.contact_field.CONTENT} {postrow.displayed.ONLINE_IMG} </td> </tr> </table> </td> </tr>  </table> <br /> <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> <tr> <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th> <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th> </tr>    <tr> <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td> </tr>    <tr align="center"> <td class="row1" colspan="3" height="28"> <span class="genmed">{no_post.L_NO_POST}</span> </td> </tr>  <tr align="right"> <td class="catBottom" colspan="3" height="28"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="9%" class="noprint"> </td> <td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td> <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td> </tr> </table> </td> </tr> </table> <table class="forumline noprint" width="100%" border="0" cellspacing="1" cellpadding="0"> <tr> <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>  <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>  </tr>   <tr> <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td> </tr>   <tr> <td class="row2" colspan="2" align="center" style="padding:0px">  <a name="quickreply"></a> {QUICK_REPLY_FORM}<br />  </td> </tr> <tr> <td style="margin:0; padding: 0;" colspan="2"> <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''"> <tbody>  <tr> <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td> <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td> </tr>  <tr> <td class="catBottom" colspan="2" height="28"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>  </tr> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td style="margin:0; padding: 0;" colspan="2"> <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;"> <tbody> <tr> <td class="catBottom" colspan="2" height="28"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td> <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td> </tr> </table> </td> </tr> </tbody> </table> </td> </tr> </table> <form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}"> <table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center"> <tr> <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}> <span class="nav">  <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>  </span> </td> <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>  <td align="center"> <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span> </td> <td align="center" width="250"> <span class="gensmall"> </span> </td>  </tr> </table> </form>  <table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center"> <tr> <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br /> <form name="action" method="get" action="{S_FORM_MOD_ACTION}"> <input type="hidden" name="t" value="{TOPIC_ID}" /> <input type="hidden" name="sid" value="{S_SID}" /> <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span> </form> </td> </tr> </table>   <script type="text/javascript"> //<![CDATA[ $(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} })); //]]> </script>  <script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

Et voici la partie du CSS concernant l'affichage du nom de l'utilisateur au cas où:

Code:: .postdetails.poster-profile a img { border-top-left-radius:3px; border-top-right-radius:3px; border-bottom-right-radius:3px; border-bottom-left-radius:3px; border:url('http://i.imgbox.com/aawsSFNE.png') 5px solid; border-radius:2px 30px 2px 30px; -webkit-border-radius:2px 30px 2px 30px; -webkit-box-shadow:1px 1px 2px #a08a6b; -moz-box-shadow:1px 1px 2px #a08a6b; box-shadow:1px 1px 2px #a08a6b; } .pseudoname { font-size:24px; }

par Neptunia Lun 25 Mai 2015 - 17:44

Pour mentionner un utilisateur depuis le volet profil de ses messages, remplacer le javascript du tutoriel par celui-ci et placez le sur les sujets (je ne comprends pas d'ailleurs pourquoi le tuto le place sur toutes les pages.

Code:: /* FORUM VERSIONS * 0 = PHPBB2 * 1 = PHPBB3 * 2 = PUNBB * 3 = INVISION */ $(function() { var version = 0; if (/mode=reply/.test(window.location.search) && my_getcookie('fa_mention')) { document.post.message.value += '@"' + my_getcookie('fa_mention') + '" '; my_setcookie('fa_mention',''); } if (!/\/t\d+/.test(window.location.pathname)) return; for (var a = $(['.pseudoname strong a', '.postprofile dt strong a', '.username a', '.postprofile dt a ~ a'][version]), b, i = 0, j = a.length, t = document.getElementById('text_editor_textarea'); i<j; i++) { b = document.createElement('A'); b.title = 'Mentionner ' + $(a[i]).text(); b.style.marginRight = '3px'; b.className = 'fa-mention'; b.innerHTML = '@'; b.href = '#'; b.onclick = function() { var n = this.title.replace(/^.*?\s/,''); if ($.sceditor) t.insertText('@"' + n + '" '); else { my_setcookie('fa_mention', n); window.location.href = '/post?t=' + window.location.pathname.replace(/\/t(\d+)-.*/,'$1') + '&mode=reply'; } return false; }; a[i].parentNode.insertBefore(b, a[i]); } $(function(){ if (!$.sceditor) return; t=$(t).sceditor('instance'); }); });

Pour mentionner via les options de message, même chose, on remplace le script fourni par celui-ci toujours sur les sujets

Code:: /* FORUM VERSIONS * 0 = PHPBB2 * 1 = PHPBB3 * 2 = PUNBB * 3 = INVISION */ $(function() { var version = 0, image = 'http://i19.servimg.com/u/f19/18/21/60/73/mentio10.png'; if (/mode=reply/.test(window.location.search) && my_getcookie('fa_mention')) { document.post.message.value += '@"' + my_getcookie('fa_mention') + '" '; my_setcookie('fa_mention',''); } if (!/\/t\d+/.test(window.location.pathname)) return; for (var a = $(['.post-options', '.profile-icons', '.post-options', '.posting-icons'][version]), b, c, d = ['.pseudoname strong a', '.author a', '.username a', '.author a'][version], e, i = 0, j = a.length, t = document.getElementById('text_editor_textarea'), l = version == 1 || version == 3; i<j; i++) { b = document.createElement('IMG'); b.src = image; b.alt = 'Mentionner'; b.title = 'Mentionner ' + $(a[i]).closest('.post').find(d + ':not(.fa-mention)').text(); b.className = 'i_icon_mention'; b.onclick = function() { var n = this.title.replace(/^.*?\s/,''); if ($.sceditor) t.insertText('@"' + n + '" '); else { my_setcookie('fa_mention', n); window.location.href = '/post?t=' + window.location.pathname.replace(/\/t(\d+)-.*/,'$1') + '&mode=reply'; } }; if (l) { c = document.createElement('LI'); c.appendChild(b); } a[i].insertBefore(l ? c : b, a[i].firstChild); } $(function(){ if (!$.sceditor) return; t=$(t).sceditor('instance'); }); });

Dans les deux cas il suffisait de remplacer ['.name strong a par ['.pseudoname strong a

par helenecolin Lun 25 Mai 2015 - 17:54

Je me sens bête, je n'ai pas pensé une seule seconde à vérifier dans le code du tuto si la variable avait le même nom que la notre, alors que pourtant je voyais bien dans le css qu'on avait modifié le nom Embarassed

...

En revanche le @ à côté du pseudo n'apparait toujours pas malgré cet ajout, il doit y avoir une autre variable ailleurs qui empêche le javascript de fonctionner, je vais chercher un peu plus en profondeur dans les templates qu'on a modifié et si je ne trouve rien je reviendrais sur ce sujet encore demander de l'aide...

par Neptunia Lun 25 Mai 2015 - 18:01

Pour ma part j'ai testé en installant votre template sur un forum test.

Vous devriez regarder en priorité en désactivant les autres javascripts pour voir si cela vient de l'un d'eux.

par helenecolin Lun 25 Mai 2015 - 18:04

C'est mon seul javascript en réalité, aussi bien sur mon forum que sur celui de test Wink

par Neptunia Lun 25 Mai 2015 - 18:17

Dans la gestion des codes javascript assurez vous que ce dernier ne soit pas désactivé.

Dans le template overall_header assurez-vous qu'il contient bien la variable {HOSTING_JS}

Warning