Script auto-suggestion tag des membres ne fonctionne pas

par pizinette Ven 17 Mar 2023 - 15:25

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://whistledown.forumactif.com

Description du problème

Bonjour,

J'ai tenté d'installer sur mon forum le code d'auto-suggestion des tags en libre service que j'ai trouvé <a href="https://fmdesign.forumotion.com/t943-auto-suggest-mentions-as-you-type">ici</a>

Comme j'ai modifié les templates, j'ai modifié la zone correspondante avec je crois, les bonnes informations.
Si le script semble fonctionner, j'ai toutefois toujours "Utilisateur inconnu" qui s'affiche alors même que je tape mon nom.

Voici le javascript :

Code:: !window.fa_mentionner && !/\/privmsg|\/profile\?mode=editprofile&page_profil=signature/.test(window.location.href) && $(function(){$(function(){ 'SCEDITOR @HANDLE AUTO-SUGGEST'; 'DEVELOPED BY ANGE TUTEUR'; 'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR'; 'ORIGIN : http://fmdesign.forumotion.com/t943-auto-suggest-mentions-as-you-type#19157'; var container = $('.sceditor-container')[0], text_editor = document.getElementById('text_editor_textarea'), frame, instance; if (container && text_editor) { frame = $('iframe', container); instance = $(text_editor).sceditor('instance'); window.fa_mentionner = { suggest_delay : 100, // delay before suggestions show up (100ms) // language presets lang : { placeholder : 'Recherche...', not_found : 'Utilisateur inconnu' }, // colors of the suggestion popup color : { font : '#333', hover_font : '#FFF', error_font : '#F00', background : '#FFF', hover_background : '#69C', border : '#CCC', shadow : 'rgba(0, 0, 0, 0.176)' }, // sceditor instance and rangeHelper instance : instance, rangeHelper : instance.getRangeHelper(), // cached nodes for listening and modifications frame : frame[0], body : frame.contents().find('body')[0], textarea : $('textarea', container)[0], // faux textarea and suggestion list faux_textarea : $('<div id="faux_text_editor" />')[0], // helps us mirror the cursor position in source mode list : $('<div id="fa_mention_suggestions" style="position:absolute;" />')[0], // version specific selectors selectors : $('.bodyline')[0] ? ['a.gen[href^="/u"]', '.vava_memberlist a'] : document.getElementById('ipbwrapper') ? ['.membername', '.mini-avatar'] : null, // adjusts the scroll position of the faux textarea so the caret stays in line adjustScroll : function() { fa_mentionner.faux_textarea.scrollTop = fa_mentionner.textarea.scrollTop; }, // updates the content in the faux textarea updateFauxTextarea : function(active, key) { if (key == 16) { // 16 = SHIFT return; // return when specific keys are pressed } // clear suggestion queue when suggestions aren't active if (active != true) { fa_mentionner.clearSuggestions(); } else { return; // return when interactive keys are pressed while suggesting ; up, down, enter } // use another method if in WYSIWYG mode if (!fa_mentionner.instance.inSourceMode()) { key != 32 ? fa_mentionner.searchWYSIWYG() : fa_mentionner.clearSuggestions(); return; } var val = fa_mentionner.instance.val(), range = 0, selection, faux_caret, username; // get the position of the caret if (document.selection) { selection = document.selection.createRange(); selection.moveStart('character', -fa_mentionner.textarea.length); range = selection.text.length; } else if (fa_mentionner.textarea.selectionStart || fa_mentionner.textarea.selectionStart == 0) { range = fa_mentionner.textarea.selectionStart; } // set the position of the caret val = val.slice(0, range) + '{FAUX_CARET}' + val.slice(range, val.length); // parse and sanitize the faux textarea content $(fa_mentionner.faux_textarea).html( val.replace(/</g, '<') .replace(/>/g, '>') .replace(/@"(.*?)"|@(.*?)(?:\s|\r|\n|$)/g, function(M, $1, $2) { var lastChar = M.substr(-1), name = ($1 || $2 || '').replace(/\{FAUX_CARET\}|"/g, ''); return '<a href="#' + name + '">' + (/\s|\r|\n/.test(M) ? M.slice(0, M.length - 1) + '</a>' + lastChar : M + '</a>'); }) .replace(/\{FAUX_CARET\}/, '<span id="faux_caret" style="position:absolute;margin-left:-3px;">|</span>') ); faux_caret = document.getElementById('faux_caret'); // mentions are parsed as <a>nchors, so when the faux caret is inside one we'll show some suggestions if (faux_caret && faux_caret.parentNode.tagName == 'A') { fa_mentionner.value = val; fa_mentionner.delay = window.setTimeout(function() { fa_mentionner.suggest(faux_caret.parentNode.href.replace(/.*?#(.*)/, '$1'), $(faux_caret).offset()); }, fa_mentionner.suggest_delay); } fa_mentionner.adjustScroll(); }, // search for active mentions in wysiwyg mode searchWYSIWYG : function() { var selected = fa_mentionner.rangeHelper.cloneSelected(), mentions = selected.startContainer.data && selected.startContainer.data.match(/(@".*?")|(@.*?)(?:\s|\r|\n|$)/g), offset, offset_marker, hit, i; console.log(mentions); if (mentions && mentions[0]) { // clean up whitespace for (i in mentions) { mentions[i] = mentions[i].replace(/\s$/g, ''); } // search for the mention that's currently being modified for (i in mentions) { if (!fa_mentionner.wysiwyg_mentions || (mentions[i] != fa_mentionner.wysiwyg_mentions[i])) { hit = true; fa_mentionner.delay = window.setTimeout(function() { fa_mentionner.rangeHelper.insertMarkers(); // insert markers to help get the caret offset offset = $(fa_mentionner.frame).offset(); offset_marker = $('#sceditor-end-marker', fa_mentionner.body).show().offset(); // add the marker offsets to the iframe offsets offset.left += offset_marker.left; offset.top += offset_marker.top - fa_mentionner.body.scrollTop; fa_mentionner.suggest(mentions[i].slice(1).replace(/^"|"$/g, ''), offset, true); fa_mentionner.wysiwyg_active = mentions[i]; // save the active mention for later use in finish() }, fa_mentionner.suggest_delay); break; } } // hide the suggestion list if there's no newly modified mentions if (!hit) { fa_mentionner.list.style.display = 'none'; fa_mentionner.focused = null; } fa_mentionner.wysiwyg_mentions = mentions; // update the list of mentions } }, // suggest a list of users based on the passed username suggest : function(username, offset, wysiwyg) { // insert the suggestion list to show that it's searching fa_mentionner.list.innerHTML = '<span class="fam-info">' + fa_mentionner.lang.placeholder + '</span>'; $(fa_mentionner.list).css({ left : offset.left + 'px', top : offset.top + 'px', display : 'block', overflowY : 'auto' }); document.body.appendChild(fa_mentionner.list); // send a query request to the memeberlist to find users who match the typed username fa_mentionner.request = $.get('/memberlist?username=' + username, function(d) { fa_mentionner.request = null; var suggestion = $(fa_mentionner.selectors ? fa_mentionner.selectors[0] : '.avatar-mini a', d), ava = fa_mentionner.selectors ? $(fa_mentionner.selectors[1], d) : null, i = 0, j = suggestion.length, name; fa_mentionner.list.innerHTML = ''; if (j) { for (; i < j; i++) { name = $(suggestion[i]).text().replace(/^\s+|\s+$/g, ''); fa_mentionner.list.insertAdjacentHTML('beforeend', '<a href="javascript:fa_mentionner.finish(\'' + name.replace(/'/g, '\\\'') + '\', ' + wysiwyg + ');" class="fa_mention_suggestion">'+ '<img class="fa_suggested_avatar" src="' + $(fa_mentionner.selectors ? ava[i] : suggestion[i]).find('img').attr('src') + '"/>'+ '<span class="fa_suggested_name">' + name + '</span>'+ '</a>' ); } // change overflowY property when it exceeds 7 suggestions -- prevents unsightly scroll bug fa_mentionner.list.style.overflowY = j > 7 ? 'scroll' : 'auto'; // update the focused suggestion and scroll it into view fa_mentionner.list.firstChild.className += ' fam-focus'; fa_mentionner.focused = fa_mentionner.list.firstChild; fa_mentionner.scrollSuggestions(); } else { fa_mentionner.list.innerHTML = '<span class="fam-info" style="color:' + fa_mentionner.color.error_font + ';">' + fa_mentionner.lang.not_found + '</span>'; } }); }, // kill the suggestion timeout while typing persists clearSuggestions : function() { if (fa_mentionner.delay) { window.clearTimeout(fa_mentionner.delay); fa_mentionner.delay = null; fa_mentionner.list.style.display = 'none'; fa_mentionner.focused = null; } if (fa_mentionner.request) { fa_mentionner.request.abort(); fa_mentionner.request = null; } }, // finish the username finish : function(username, wysiwyg) { var mention, index, i; // hide and clear suggestions fa_mentionner.clearSuggestions(); fa_mentionner.focused = null; fa_mentionner.list.style.display = 'none'; if (!wysiwyg) { fa_mentionner.value = fa_mentionner.value.replace(/(?:@".[^"]*?\{FAUX_CARET\}.*?"|@\{FAUX_CARET\}.*?(\s|\n|\r|$)|@.[^"\s]*?\{FAUX_CARET\}.*?(\s|\n|\r|$))/, function(M, $1, $2) { mention = '@"' + username + '"'; return '{MENTION_POSITION}' + ( $1 ? $1 : $2 ? $2 : '' ); }); // get the index where the mention should be index = fa_mentionner.value.indexOf('{MENTION_POSITION}'); fa_mentionner.value = fa_mentionner.value.replace('{MENTION_POSITION}', ''); // save current scroll position for application after the value has been updated fa_mentionner.scrollIndex = fa_mentionner.textarea.scrollTop; // update the textarea with the completed mention fa_mentionner.instance.val(''); fa_mentionner.instance.insert(fa_mentionner.value.slice(0, index) + mention, fa_mentionner.value.slice(index, fa_mentionner.value.length)); // restore the scroll position for the textareas fa_mentionner.textarea.scrollTop = fa_mentionner.scrollIndex; fa_mentionner.adjustScroll(); // update the fake textarea fa_mentionner.updateFauxTextarea(); } else { // save the caret range in WYSIWYG so we can restore it after replacing the HTML fa_mentionner.rangeHelper.saveRange(); fa_mentionner.body.innerHTML = fa_mentionner.body.innerHTML.replace(new RegExp(fa_mentionner.wysiwyg_active.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + '(<span.*?id="sceditor-end-marker".*?>)'), '@"' + username + '"$1'); fa_mentionner.body.focus(); fa_mentionner.rangeHelper.restoreRange(); // update the wysiwyg mention array so no new suggestions appear for (i in fa_mentionner.wysiwyg_mentions) { if (fa_mentionner.wysiwyg_mentions[i] == fa_mentionner.wysiwyg_active) { fa_mentionner.wysiwyg_mentions[i] = '@"' + username + '"'; break; } } } }, // scroll the selected suggestion into view scrollSuggestions : function() { $(fa_mentionner.list).scrollTop( ( $(fa_mentionner.focused).offset().top - $(fa_mentionner.list).offset().top + $(fa_mentionner.list).scrollTop() ) - (26 * 3) // 26 = the height of the suggestions, so display 3 suggestions above while scrolling ); } }; // get computed styles for the textarea and apply them to the faux textarea for (var css = window.getComputedStyle(fa_mentionner.textarea, null), i = 0, j = css.length, str = ''; i < j; i++) { str += css[i] + ':' + css.getPropertyValue(css[i]) + ';'; } // add styles to the head $('head').append('<style type="text/css">'+ '#faux_text_editor {' + str + '}'+ '#faux_text_editor { position:absolute; left:0; bottom:0; z-index:-1; visibility:hidden; display:block; overflow-y:auto; }'+ '#fa_mention_suggestions { color:' + fa_mentionner.color.font + '; font-size:10px; font-family:arial, verdana, sans-serif; background:' + fa_mentionner.color.background + '; border:1px solid ' + fa_mentionner.color.border + '; margin-top:20px; z-index:999; max-height:182px; overflow-x:hidden; box-shadow:0 6px 12px ' + fa_mentionner.color.shadow + '; }'+ 'a.fa_mention_suggestion, .fam-info { color:' + fa_mentionner.color.font + '; height:26px; line-height:26px; padding:0 3px; display:block; white-space:nowrap; cursor:pointer; }'+ 'a.fa_mention_suggestion.fam-focus { color:' + fa_mentionner.color.hover_font + '; background:' + fa_mentionner.color.hover_background + '; }'+ '.fa_suggested_avatar { height:20px; width:20px; vertical-align:middle; margin-right:3px; }'+ '</style>'); // insert faux textarea into document fa_mentionner.textarea.parentNode.insertBefore(fa_mentionner.faux_textarea, fa_mentionner.textarea); // apply event handlers fa_mentionner.textarea.onclick = fa_mentionner.updateFauxTextarea; fa_mentionner.textarea.onscroll = fa_mentionner.adjustScroll; // update the faux textarea on keyup fa_mentionner.instance.keyUp(function(e) { if (fa_mentionner.focused && e && (e.keyCode == 13 || e.keyCode == 38 || e.keyCode == 40)) { fa_mentionner.updateFauxTextarea(true, e.keyCode); return false; } else { fa_mentionner.updateFauxTextarea(false, e.keyCode); } }); // key events for the suggested mentions $([document, fa_mentionner.body]).on('keydown', function(e) { var that = e.target; if (fa_mentionner.focused && e && e.keyCode && (that.tagName == 'TEXTAREA' || that.tagName == 'BODY')) { // move selection down if (e.keyCode == 40) { var next = fa_mentionner.focused.nextSibling; if (next) { $(fa_mentionner.focused).removeClass('fam-focus'); next.className += ' fam-focus'; fa_mentionner.focused = next; fa_mentionner.scrollSuggestions(); } return false; } // move selection up if (e.keyCode == 38) { var prev = fa_mentionner.focused.previousSibling; if (prev) { $(fa_mentionner.focused).removeClass('fam-focus'); prev.className += ' fam-focus'; fa_mentionner.focused = prev; fa_mentionner.scrollSuggestions(); } return false; } // apply selection if (e.keyCode == 13) { fa_mentionner.focused.click(); return false; } } }); // update focused suggestion on hover $(document).on('mouseover', function(e) { var that = e.target; if (/fa_mention_suggestion/.test(that.className)) { $(fa_mentionner.focused).removeClass('fam-focus'); that.className += ' fam-focus'; fa_mentionner.focused = that; } }); } })});

et voici mon template memberlist_body :

Code:: <div class="title_page_memberlist">liste des membres de Whistledown</div> <form action="{S_MODE_ACTION}" method="get"> <div class="panel"> <h2 class="sous_titre_member">{L_ORDER_OR_SELECT}</h2> <p style="text-align:right; margin: 0; padding: 0;"> {L_USER_SELECT} <input type="text" class="inputbox tiny" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" /> {L_SELECT_SORT_METHOD} {S_MODE_SELECT} {L_ORDER} {S_ORDER_SELECT}   {S_HIDDEN_SID} <input class="button2" type="submit" name="submit" value="{L_SUBMIT}" /> </p> </div> </form> <div class="memberlist_body">  <div class="listmember"> <div class="memberlist_name"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div> <div class="infos_memberlist"> <div class="vava_memberlist">{memberrow.AVATAR_IMG}</div> <div class="contakt_member">  <div>{memberrow.GROUPS}</div>  <div class="lastvisit">{memberrow.LASTVISIT}</div> <div class="nmbrposts">{memberrow.POSTS} messages</div> <div class="mpsite">{memberrow.PM_IMG}   {memberrow.WWW_IMG}</div> </div> </div> </div>   <tr class="row1"> <td colspan="{switch_no_user.COLSPAN_NUMBER}">{switch_no_user.L_NO_USER}</td> </tr>  </div> <div class="pagination" style="float:none;">  {PAGINATION}<br /><br />  </div>

Je ne comprends pas du tout pourquoi ça ne fonctionne pas :/

Vous serait-il possible de me venir en aide ?

Je vous remercie par avance,

par Le Grand Duc Ven 17 Mar 2023 - 15:45

Dans un cas comme ça, première chose à faire : ouvrir la console (clé F12) et vérifier s'il n'y a pas une erreur signalée dans le javascript.
Une erreur Javascript qui arrive souvent (ça m'a pris des jours pour la comprendre) est la suivante :
Pour tous les navigateurs, si un énoncé se termine par un saut de ligne sans le point-virgule, le point-virgule est supposé et tout se passe normalement.
Mais sur FA, nos Javascripts sont compactés en une seule ligne sans que les point-virgule soient ajoutés, et là les navigateurs protestent.

par pizinette Ven 17 Mar 2023 - 16:29

Le Grand Duc a écrit:Dans un cas comme ça, première chose à faire : ouvrir la console (clé F12) et vérifier s'il n'y a pas une erreur signalée dans le javascript.
Une erreur Javascript qui arrive souvent (ça m'a pris des jours pour la comprendre) est la suivante :
Pour tous les navigateurs, si un énoncé se termine par un saut de ligne sans le point-virgule, le point-virgule est supposé et tout se passe normalement.
Mais sur FA, nos Javascripts sont compactés en une seule ligne sans que les point-virgule soient ajoutés, et là les navigateurs protestent.

Bonjour @"Le Grand Duc"

Merci pour cette indication, j'ai essayé et voici ce que j'obtiens :

Script auto-suggestion tag des membres ne fonctionne pas 0dvF85P

Script auto-suggestion tag des membres ne fonctionne pas 0dvF85P

Toutefois je ne comprends pas bien ce que cela signifie... excepté qu'il ne semble pas trouver là où chercher malgré mes indications pale

par Le Grand Duc Ven 17 Mar 2023 - 17:08

Bon, je ne vois pas d'erreur Javascript. Il faudra chercher ailleurs.

par pizinette Ven 17 Mar 2023 - 17:15

Le Grand Duc a écrit:Bon, je ne vois pas d'erreur Javascript. Il faudra chercher ailleurs.

Merci beaucoup à toi @"Le Grand Duc" d'avoir regardé en tout cas.

par Milouze14 Sam 18 Mar 2023 - 11:35

Hello pizinette,

ce script devrait fonctionner en fonction des modifications apportées dans ton template "memberlist_name" :

Code:: !window.fa_mentionner && !/\/privmsg|\/profile\?mode=editprofile&page_profil=signature/.test(window.location.href) && $(function(){$(function(){ 'SCEDITOR @HANDLE AUTO-SUGGEST'; 'DEVELOPED BY ANGE TUTEUR'; 'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR'; 'ORIGIN : http://fmdesign.forumotion.com/t943-auto-suggest-mentions-as-you-type#19157'; var container = $('.sceditor-container')[0], text_editor = document.getElementById('text_editor_textarea'), frame, instance; if (container && text_editor) { frame = $('iframe', container); instance = $(text_editor).sceditor('instance'); window.fa_mentionner = { suggest_delay : 100, // delay before suggestions show up (100ms) // language presets lang : { placeholder : 'Recherche...', not_found : 'Utilisateur inconnu' }, // colors of the suggestion popup color : { font : '#333', hover_font : '#FFF', error_font : '#F00', background : '#FFF', hover_background : '#69C', border : '#CCC', shadow : 'rgba(0, 0, 0, 0.176)' }, // sceditor instance and rangeHelper instance : instance, rangeHelper : instance.getRangeHelper(), // cached nodes for listening and modifications frame : frame[0], body : frame.contents().find('body')[0], textarea : $('textarea', container)[0], // faux textarea and suggestion list faux_textarea : $('<div id="faux_text_editor" />')[0], // helps us mirror the cursor position in source mode list : $('<div id="fa_mention_suggestions" style="position:absolute;" />')[0], // version specific selectors selectors : $('.bodyline')[0] ? ['a.gen[href^="/u"]', '.memberlist_name a'] : document.getElementById('ipbwrapper') ? ['.membername', '.mini-avatar'] : null, // adjusts the scroll position of the faux textarea so the caret stays in line adjustScroll : function() { fa_mentionner.faux_textarea.scrollTop = fa_mentionner.textarea.scrollTop; }, // updates the content in the faux textarea updateFauxTextarea : function(active, key) { if (key == 16) { // 16 = SHIFT return; // return when specific keys are pressed } // clear suggestion queue when suggestions aren't active if (active != true) { fa_mentionner.clearSuggestions(); } else { return; // return when interactive keys are pressed while suggesting ; up, down, enter } // use another method if in WYSIWYG mode if (!fa_mentionner.instance.inSourceMode()) { key != 32 ? fa_mentionner.searchWYSIWYG() : fa_mentionner.clearSuggestions(); return; } var val = fa_mentionner.instance.val(), range = 0, selection, faux_caret, username; // get the position of the caret if (document.selection) { selection = document.selection.createRange(); selection.moveStart('character', -fa_mentionner.textarea.length); range = selection.text.length; } else if (fa_mentionner.textarea.selectionStart || fa_mentionner.textarea.selectionStart == 0) { range = fa_mentionner.textarea.selectionStart; } // set the position of the caret val = val.slice(0, range) + '{FAUX_CARET}' + val.slice(range, val.length); // parse and sanitize the faux textarea content $(fa_mentionner.faux_textarea).html( val.replace(/</g, '<') .replace(/>/g, '>') .replace(/@"(.*?)"|@(.*?)(?:\s|\r|\n|$)/g, function(M, $1, $2) { var lastChar = M.substr(-1), name = ($1 || $2 || '').replace(/\{FAUX_CARET\}|"/g, ''); return '<a href="#' + name + '">' + (/\s|\r|\n/.test(M) ? M.slice(0, M.length - 1) + '</a>' + lastChar : M + '</a>'); }) .replace(/\{FAUX_CARET\}/, '<span id="faux_caret" style="position:absolute;margin-left:-3px;">|</span>') ); faux_caret = document.getElementById('faux_caret'); // mentions are parsed as <a>nchors, so when the faux caret is inside one we'll show some suggestions if (faux_caret && faux_caret.parentNode.tagName == 'A') { fa_mentionner.value = val; fa_mentionner.delay = window.setTimeout(function() { fa_mentionner.suggest(faux_caret.parentNode.href.replace(/.*?#(.*)/, '$1'), $(faux_caret).offset()); }, fa_mentionner.suggest_delay); } fa_mentionner.adjustScroll(); }, // search for active mentions in wysiwyg mode searchWYSIWYG : function() { var selected = fa_mentionner.rangeHelper.cloneSelected(), mentions = selected.startContainer.data && selected.startContainer.data.match(/(@".*?")|(@.*?)(?:\s|\r|\n|$)/g), offset, offset_marker, hit, i; console.log(mentions); if (mentions && mentions[0]) { // clean up whitespace for (i in mentions) { mentions[i] = mentions[i].replace(/\s$/g, ''); } // search for the mention that's currently being modified for (i in mentions) { if (!fa_mentionner.wysiwyg_mentions || (mentions[i] != fa_mentionner.wysiwyg_mentions[i])) { hit = true; fa_mentionner.delay = window.setTimeout(function() { fa_mentionner.rangeHelper.insertMarkers(); // insert markers to help get the caret offset offset = $(fa_mentionner.frame).offset(); offset_marker = $('#sceditor-end-marker', fa_mentionner.body).show().offset(); // add the marker offsets to the iframe offsets offset.left += offset_marker.left; offset.top += offset_marker.top - fa_mentionner.body.scrollTop; fa_mentionner.suggest(mentions[i].slice(1).replace(/^"|"$/g, ''), offset, true); fa_mentionner.wysiwyg_active = mentions[i]; // save the active mention for later use in finish() }, fa_mentionner.suggest_delay); break; } } // hide the suggestion list if there's no newly modified mentions if (!hit) { fa_mentionner.list.style.display = 'none'; fa_mentionner.focused = null; } fa_mentionner.wysiwyg_mentions = mentions; // update the list of mentions } }, // suggest a list of users based on the passed username suggest : function(username, offset, wysiwyg) { // insert the suggestion list to show that it's searching fa_mentionner.list.innerHTML = '<span class="fam-info">' + fa_mentionner.lang.placeholder + '</span>'; $(fa_mentionner.list).css({ left : offset.left + 'px', top : offset.top + 'px', display : 'block', overflowY : 'auto' }); document.body.appendChild(fa_mentionner.list); // send a query request to the memeberlist to find users who match the typed username fa_mentionner.request = $.get('/memberlist?username=' + username, function(d) { fa_mentionner.request = null; var suggestion = $(fa_mentionner.selectors ? fa_mentionner.selectors[0] : '.memberlist_name a', d), ava = fa_mentionner.selectors ? $(fa_mentionner.selectors[1], d) : null, i = 0, j = suggestion.length, name; fa_mentionner.list.innerHTML = ''; if (j) { for (; i < j; i++) { name = $(suggestion[i]).text().replace(/^\s+|\s+$/g, ''); fa_mentionner.list.insertAdjacentHTML('beforeend', '<a href="javascript:fa_mentionner.finish(\'' + name.replace(/'/g, '\\\'') + '\', ' + wysiwyg + ');" class="fa_mention_suggestion">'+ '<img class="fa_suggested_avatar" src="' + $(fa_mentionner.selectors ? ava[i] : suggestion[i]).find('img').attr('src') + '"/>'+ '<span class="fa_suggested_name">' + name + '</span>'+ '</a>' ); } // change overflowY property when it exceeds 7 suggestions -- prevents unsightly scroll bug fa_mentionner.list.style.overflowY = j > 7 ? 'scroll' : 'auto'; // update the focused suggestion and scroll it into view fa_mentionner.list.firstChild.className += ' fam-focus'; fa_mentionner.focused = fa_mentionner.list.firstChild; fa_mentionner.scrollSuggestions(); } else { fa_mentionner.list.innerHTML = '<span class="fam-info" style="color:' + fa_mentionner.color.error_font + ';">' + fa_mentionner.lang.not_found + '</span>'; } }); }, // kill the suggestion timeout while typing persists clearSuggestions : function() { if (fa_mentionner.delay) { window.clearTimeout(fa_mentionner.delay); fa_mentionner.delay = null; fa_mentionner.list.style.display = 'none'; fa_mentionner.focused = null; } if (fa_mentionner.request) { fa_mentionner.request.abort(); fa_mentionner.request = null; } }, // finish the username finish : function(username, wysiwyg) { var mention, index, i; // hide and clear suggestions fa_mentionner.clearSuggestions(); fa_mentionner.focused = null; fa_mentionner.list.style.display = 'none'; if (!wysiwyg) { fa_mentionner.value = fa_mentionner.value.replace(/(?:@".[^"]*?\{FAUX_CARET\}.*?"|@\{FAUX_CARET\}.*?(\s|\n|\r|$)|@.[^"\s]*?\{FAUX_CARET\}.*?(\s|\n|\r|$))/, function(M, $1, $2) { mention = '@"' + username + '"'; return '{MENTION_POSITION}' + ( $1 ? $1 : $2 ? $2 : '' ); }); // get the index where the mention should be index = fa_mentionner.value.indexOf('{MENTION_POSITION}'); fa_mentionner.value = fa_mentionner.value.replace('{MENTION_POSITION}', ''); // save current scroll position for application after the value has been updated fa_mentionner.scrollIndex = fa_mentionner.textarea.scrollTop; // update the textarea with the completed mention fa_mentionner.instance.val(''); fa_mentionner.instance.insert(fa_mentionner.value.slice(0, index) + mention, fa_mentionner.value.slice(index, fa_mentionner.value.length)); // restore the scroll position for the textareas fa_mentionner.textarea.scrollTop = fa_mentionner.scrollIndex; fa_mentionner.adjustScroll(); // update the fake textarea fa_mentionner.updateFauxTextarea(); } else { // save the caret range in WYSIWYG so we can restore it after replacing the HTML fa_mentionner.rangeHelper.saveRange(); fa_mentionner.body.innerHTML = fa_mentionner.body.innerHTML.replace(new RegExp(fa_mentionner.wysiwyg_active.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + '(<span.*?id="sceditor-end-marker".*?>)'), '@"' + username + '"$1'); fa_mentionner.body.focus(); fa_mentionner.rangeHelper.restoreRange(); // update the wysiwyg mention array so no new suggestions appear for (i in fa_mentionner.wysiwyg_mentions) { if (fa_mentionner.wysiwyg_mentions[i] == fa_mentionner.wysiwyg_active) { fa_mentionner.wysiwyg_mentions[i] = '@"' + username + '"'; break; } } } }, // scroll the selected suggestion into view scrollSuggestions : function() { $(fa_mentionner.list).scrollTop( ( $(fa_mentionner.focused).offset().top - $(fa_mentionner.list).offset().top + $(fa_mentionner.list).scrollTop() ) - (26 * 3) // 26 = the height of the suggestions, so display 3 suggestions above while scrolling ); } }; // get computed styles for the textarea and apply them to the faux textarea for (var css = window.getComputedStyle(fa_mentionner.textarea, null), i = 0, j = css.length, str = ''; i < j; i++) { str += css[i] + ':' + css.getPropertyValue(css[i]) + ';'; } // add styles to the head $('head').append('<style type="text/css">'+ '#faux_text_editor {' + str + '}'+ '#faux_text_editor { position:absolute; left:0; bottom:0; z-index:-1; visibility:hidden; display:block; overflow-y:auto; }'+ '#fa_mention_suggestions { color:' + fa_mentionner.color.font + '; font-size:10px; font-family:arial, verdana, sans-serif; background:' + fa_mentionner.color.background + '; border:1px solid ' + fa_mentionner.color.border + '; margin-top:20px; z-index:999; max-height:182px; overflow-x:hidden; box-shadow:0 6px 12px ' + fa_mentionner.color.shadow + '; }'+ 'a.fa_mention_suggestion, .fam-info { color:' + fa_mentionner.color.font + '; height:26px; line-height:26px; padding:0 3px; display:block; white-space:nowrap; cursor:pointer; }'+ 'a.fa_mention_suggestion.fam-focus { color:' + fa_mentionner.color.hover_font + '; background:' + fa_mentionner.color.hover_background + '; }'+ '.fa_suggested_avatar { height:20px; width:20px; vertical-align:middle; margin-right:3px; }'+ '</style>'); // insert faux textarea into document fa_mentionner.textarea.parentNode.insertBefore(fa_mentionner.faux_textarea, fa_mentionner.textarea); // apply event handlers fa_mentionner.textarea.onclick = fa_mentionner.updateFauxTextarea; fa_mentionner.textarea.onscroll = fa_mentionner.adjustScroll; // update the faux textarea on keyup fa_mentionner.instance.keyUp(function(e) { if (fa_mentionner.focused && e && (e.keyCode == 13 || e.keyCode == 38 || e.keyCode == 40)) { fa_mentionner.updateFauxTextarea(true, e.keyCode); return false; } else { fa_mentionner.updateFauxTextarea(false, e.keyCode); } }); // key events for the suggested mentions $([document, fa_mentionner.body]).on('keydown', function(e) { var that = e.target; if (fa_mentionner.focused && e && e.keyCode && (that.tagName == 'TEXTAREA' || that.tagName == 'BODY')) { // move selection down if (e.keyCode == 40) { var next = fa_mentionner.focused.nextSibling; if (next) { $(fa_mentionner.focused).removeClass('fam-focus'); next.className += ' fam-focus'; fa_mentionner.focused = next; fa_mentionner.scrollSuggestions(); } return false; } // move selection up if (e.keyCode == 38) { var prev = fa_mentionner.focused.previousSibling; if (prev) { $(fa_mentionner.focused).removeClass('fam-focus'); prev.className += ' fam-focus'; fa_mentionner.focused = prev; fa_mentionner.scrollSuggestions(); } return false; } // apply selection if (e.keyCode == 13) { fa_mentionner.focused.click(); return false; } } }); // update focused suggestion on hover $(document).on('mouseover', function(e) { var that = e.target; if (/fa_mention_suggestion/.test(that.className)) { $(fa_mentionner.focused).removeClass('fam-focus'); that.className += ' fam-focus'; fa_mentionner.focused = that; } }); } })});

a++

par pizinette Sam 18 Mar 2023 - 16:26

@"Milouze14"
Salut Phil, contente de te retrouver par ici Smile

J'ai essayé le code sur le forum mais ça ne fonctionne pas. Cette fois plus rien n'apparaît :/

par Milouze14 Sam 18 Mar 2023 - 18:58

Re pisinette,
on se connait ?
il y a une erreur sur le script donné:
Il n'est pas clôturé!!!!!

Est-ce que tu cumules les scripts à la suite ?

a++

par pizinette Sam 18 Mar 2023 - 19:15

@"Milouze14"
Oui ! J’étais Pizi sur ton site. Tu m’as beaucoup aidé pour un ancien projet de forum : Esteria Smile

J’ai plusieurs feuilles de script oui.
Il y en a un qui poserait problème du coup. C’est bien cela?
Pourtant aucun de ces script ne concerne la liste des membres. Seulement celui-ci…

par Milouze14 Sam 18 Mar 2023 - 19:18

Re,
ah oui Pizi, je me souviens , heureux de te retrouver Wink

.
Ou tu as une erreur dans ta gestion des scripts mais faut le trouver fautif Wink

.

a++

par pizinette Sam 18 Mar 2023 - 19:21

@"Milouze14"
Ah… je vais les retirer et les remettre un par un alors.
Les clôtures sur javascript ce sont les ; ) et } c’est ça?

par Milouze14 Sam 18 Mar 2023 - 19:24

Re,

pizinette a écrit:Les clôtures sur javascript ce sont les ; ) et } c’est ça?

Pas toujours mais majoritairement , c'est plutôt ceci:

Code:: });

a++

par pizinette Sam 18 Mar 2023 - 19:50

Milouze14 a écrit:Re,

pizinette a écrit:Les clôtures sur javascript ce sont les ; ) et } c’est ça?

Pas toujours mais majoritairement , c'est plutôt ceci:
Code:
});

a++

Merci beaucoup pour cette indication @"Milouze".
J’ai trouvé où c’était mal clôturé et ça fonctionne Smile

Néanmoins les avatars ne semblent pas apparaître :/

par Milouze14 Dim 19 Mar 2023 - 7:35

Hello pizinette,
alors ce nouveau script fonctionne pour avoir l'avatar (penses bien à tout sélectionner cette fois ci Very Happy

) :
Il a fallut batailler avec le sélecteur pour avoir l'avatar ici:

Code:: '<img class="fa_suggested_avatar" src="' + $(fa_mentionner.selectors ? ava[i] : suggestion[i]).closest('.listmember').find('.vava_memberlist img').attr('src') + '"/>'+

Code:: !window.fa_mentionner && !/\/privmsg|\/profile\?mode=editprofile&page_profil=signature/.test(window.location.href) && $(function(){$(function(){ 'SCEDITOR @HANDLE AUTO-SUGGEST'; 'DEVELOPED BY ANGE TUTEUR'; 'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR'; 'ORIGIN : http://fmdesign.forumotion.com/t943-auto-suggest-mentions-as-you-type#19157'; var container = $('.sceditor-container')[0], text_editor = document.getElementById('text_editor_textarea'), frame, instance; if (container && text_editor) { frame = $('iframe', container); instance = $(text_editor).sceditor('instance'); window.fa_mentionner = { suggest_delay : 100, // delay before suggestions show up (100ms) // language presets lang : { placeholder : 'Recherche...', not_found : 'Utilisateur inconnu' }, // colors of the suggestion popup color : { font : '#333', hover_font : '#FFF', error_font : '#F00', background : '#FFF', hover_background : '#69C', border : '#CCC', shadow : 'rgba(0, 0, 0, 0.176)' }, // sceditor instance and rangeHelper instance : instance, rangeHelper : instance.getRangeHelper(), // cached nodes for listening and modifications frame : frame[0], body : frame.contents().find('body')[0], textarea : $('textarea', container)[0], // faux textarea and suggestion list faux_textarea : $('<div id="faux_text_editor" />')[0], // helps us mirror the cursor position in source mode list : $('<div id="fa_mention_suggestions" style="position:absolute;" />')[0], // version specific selectors selectors : $('.bodyline')[0] ? ['a.gen[href^="/u"]', '.memberlist_name a'] : document.getElementById('ipbwrapper') ? ['.membername', '.mini-avatar'] : null, // adjusts the scroll position of the faux textarea so the caret stays in line adjustScroll : function() { fa_mentionner.faux_textarea.scrollTop = fa_mentionner.textarea.scrollTop; }, // updates the content in the faux textarea updateFauxTextarea : function(active, key) { if (key == 16) { // 16 = SHIFT return; // return when specific keys are pressed } // clear suggestion queue when suggestions aren't active if (active != true) { fa_mentionner.clearSuggestions(); } else { return; // return when interactive keys are pressed while suggesting ; up, down, enter } // use another method if in WYSIWYG mode if (!fa_mentionner.instance.inSourceMode()) { key != 32 ? fa_mentionner.searchWYSIWYG() : fa_mentionner.clearSuggestions(); return; } var val = fa_mentionner.instance.val(), range = 0, selection, faux_caret, username; // get the position of the caret if (document.selection) { selection = document.selection.createRange(); selection.moveStart('character', -fa_mentionner.textarea.length); range = selection.text.length; } else if (fa_mentionner.textarea.selectionStart || fa_mentionner.textarea.selectionStart == 0) { range = fa_mentionner.textarea.selectionStart; } // set the position of the caret val = val.slice(0, range) + '{FAUX_CARET}' + val.slice(range, val.length); // parse and sanitize the faux textarea content $(fa_mentionner.faux_textarea).html( val.replace(/</g, '<') .replace(/>/g, '>') .replace(/@"(.*?)"|@(.*?)(?:\s|\r|\n|$)/g, function(M, $1, $2) { var lastChar = M.substr(-1), name = ($1 || $2 || '').replace(/\{FAUX_CARET\}|"/g, ''); return '<a href="#' + name + '">' + (/\s|\r|\n/.test(M) ? M.slice(0, M.length - 1) + '</a>' + lastChar : M + '</a>'); }) .replace(/\{FAUX_CARET\}/, '<span id="faux_caret" style="position:absolute;margin-left:-3px;">|</span>') ); faux_caret = document.getElementById('faux_caret'); // mentions are parsed as <a>nchors, so when the faux caret is inside one we'll show some suggestions if (faux_caret && faux_caret.parentNode.tagName == 'A') { fa_mentionner.value = val; fa_mentionner.delay = window.setTimeout(function() { fa_mentionner.suggest(faux_caret.parentNode.href.replace(/.*?#(.*)/, '$1'), $(faux_caret).offset()); }, fa_mentionner.suggest_delay); } fa_mentionner.adjustScroll(); }, // search for active mentions in wysiwyg mode searchWYSIWYG : function() { var selected = fa_mentionner.rangeHelper.cloneSelected(), mentions = selected.startContainer.data && selected.startContainer.data.match(/(@".*?")|(@.*?)(?:\s|\r|\n|$)/g), offset, offset_marker, hit, i; console.log(mentions); if (mentions && mentions[0]) { // clean up whitespace for (i in mentions) { mentions[i] = mentions[i].replace(/\s$/g, ''); } // search for the mention that's currently being modified for (i in mentions) { if (!fa_mentionner.wysiwyg_mentions || (mentions[i] != fa_mentionner.wysiwyg_mentions[i])) { hit = true; fa_mentionner.delay = window.setTimeout(function() { fa_mentionner.rangeHelper.insertMarkers(); // insert markers to help get the caret offset offset = $(fa_mentionner.frame).offset(); offset_marker = $('#sceditor-end-marker', fa_mentionner.body).show().offset(); // add the marker offsets to the iframe offsets offset.left += offset_marker.left; offset.top += offset_marker.top - fa_mentionner.body.scrollTop; fa_mentionner.suggest(mentions[i].slice(1).replace(/^"|"$/g, ''), offset, true); fa_mentionner.wysiwyg_active = mentions[i]; // save the active mention for later use in finish() }, fa_mentionner.suggest_delay); break; } } // hide the suggestion list if there's no newly modified mentions if (!hit) { fa_mentionner.list.style.display = 'none'; fa_mentionner.focused = null; } fa_mentionner.wysiwyg_mentions = mentions; // update the list of mentions } }, // suggest a list of users based on the passed username suggest : function(username, offset, wysiwyg) { // insert the suggestion list to show that it's searching fa_mentionner.list.innerHTML = '<span class="fam-info">' + fa_mentionner.lang.placeholder + '</span>'; $(fa_mentionner.list).css({ left : offset.left + 'px', top : offset.top + 'px', display : 'block', overflowY : 'auto' }); document.body.appendChild(fa_mentionner.list); // send a query request to the memeberlist to find users who match the typed username fa_mentionner.request = $.get('/memberlist?username=' + username, function(d) { fa_mentionner.request = null; var suggestion = $(fa_mentionner.selectors ? fa_mentionner.selectors[0] : '.memberlist_name a', d), ava = fa_mentionner.selectors ? $(fa_mentionner.selectors[1], d) : null, i = 0, j = suggestion.length, name; fa_mentionner.list.innerHTML = ''; if (j) { for (; i < j; i++) { name = $(suggestion[i]).text().replace(/^\s+|\s+$/g, ''); fa_mentionner.list.insertAdjacentHTML('beforeend', '<a href="javascript:fa_mentionner.finish(\'' + name.replace(/'/g, '\\\'') + '\', ' + wysiwyg + ');" class="fa_mention_suggestion">'+ '<img class="fa_suggested_avatar" src="' + $(fa_mentionner.selectors ? ava[i] : suggestion[i]).closest('.listmember').find('.vava_memberlist img').attr('src') + '"/>'+ '<span class="fa_suggested_name">' + name + '</span>'+ '</a>' ); } // change overflowY property when it exceeds 7 suggestions -- prevents unsightly scroll bug fa_mentionner.list.style.overflowY = j > 7 ? 'scroll' : 'auto'; // update the focused suggestion and scroll it into view fa_mentionner.list.firstChild.className += ' fam-focus'; fa_mentionner.focused = fa_mentionner.list.firstChild; fa_mentionner.scrollSuggestions(); } else { fa_mentionner.list.innerHTML = '<span class="fam-info" style="color:' + fa_mentionner.color.error_font + ';">' + fa_mentionner.lang.not_found + '</span>'; } }); }, // kill the suggestion timeout while typing persists clearSuggestions : function() { if (fa_mentionner.delay) { window.clearTimeout(fa_mentionner.delay); fa_mentionner.delay = null; fa_mentionner.list.style.display = 'none'; fa_mentionner.focused = null; } if (fa_mentionner.request) { fa_mentionner.request.abort(); fa_mentionner.request = null; } }, // finish the username finish : function(username, wysiwyg) { var mention, index, i; // hide and clear suggestions fa_mentionner.clearSuggestions(); fa_mentionner.focused = null; fa_mentionner.list.style.display = 'none'; if (!wysiwyg) { fa_mentionner.value = fa_mentionner.value.replace(/(?:@".[^"]*?\{FAUX_CARET\}.*?"|@\{FAUX_CARET\}.*?(\s|\n|\r|$)|@.[^"\s]*?\{FAUX_CARET\}.*?(\s|\n|\r|$))/, function(M, $1, $2) { mention = '@"' + username + '"'; return '{MENTION_POSITION}' + ( $1 ? $1 : $2 ? $2 : '' ); }); // get the index where the mention should be index = fa_mentionner.value.indexOf('{MENTION_POSITION}'); fa_mentionner.value = fa_mentionner.value.replace('{MENTION_POSITION}', ''); // save current scroll position for application after the value has been updated fa_mentionner.scrollIndex = fa_mentionner.textarea.scrollTop; // update the textarea with the completed mention fa_mentionner.instance.val(''); fa_mentionner.instance.insert(fa_mentionner.value.slice(0, index) + mention, fa_mentionner.value.slice(index, fa_mentionner.value.length)); // restore the scroll position for the textareas fa_mentionner.textarea.scrollTop = fa_mentionner.scrollIndex; fa_mentionner.adjustScroll(); // update the fake textarea fa_mentionner.updateFauxTextarea(); } else { // save the caret range in WYSIWYG so we can restore it after replacing the HTML fa_mentionner.rangeHelper.saveRange(); fa_mentionner.body.innerHTML = fa_mentionner.body.innerHTML.replace(new RegExp(fa_mentionner.wysiwyg_active.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + '(<span.*?id="sceditor-end-marker".*?>)'), '@"' + username + '"$1'); fa_mentionner.body.focus(); fa_mentionner.rangeHelper.restoreRange(); // update the wysiwyg mention array so no new suggestions appear for (i in fa_mentionner.wysiwyg_mentions) { if (fa_mentionner.wysiwyg_mentions[i] == fa_mentionner.wysiwyg_active) { fa_mentionner.wysiwyg_mentions[i] = '@"' + username + '"'; break; } } } }, // scroll the selected suggestion into view scrollSuggestions : function() { $(fa_mentionner.list).scrollTop( ( $(fa_mentionner.focused).offset().top - $(fa_mentionner.list).offset().top + $(fa_mentionner.list).scrollTop() ) - (26 * 3) // 26 = the height of the suggestions, so display 3 suggestions above while scrolling ); } }; // get computed styles for the textarea and apply them to the faux textarea for (var css = window.getComputedStyle(fa_mentionner.textarea, null), i = 0, j = css.length, str = ''; i < j; i++) { str += css[i] + ':' + css.getPropertyValue(css[i]) + ';'; } // add styles to the head $('head').append('<style type="text/css">'+ '#faux_text_editor {' + str + '}'+ '#faux_text_editor { position:absolute; left:0; bottom:0; z-index:-1; visibility:hidden; display:block; overflow-y:auto; }'+ '#fa_mention_suggestions { color:' + fa_mentionner.color.font + '; font-size:10px; font-family:arial, verdana, sans-serif; background:' + fa_mentionner.color.background + '; border:1px solid ' + fa_mentionner.color.border + '; margin-top:20px; z-index:999; max-height:182px; overflow-x:hidden; box-shadow:0 6px 12px ' + fa_mentionner.color.shadow + '; }'+ 'a.fa_mention_suggestion, .fam-info { color:' + fa_mentionner.color.font + '; height:26px; line-height:26px; padding:0 3px; display:block; white-space:nowrap; cursor:pointer; }'+ 'a.fa_mention_suggestion.fam-focus { color:' + fa_mentionner.color.hover_font + '; background:' + fa_mentionner.color.hover_background + '; }'+ '.fa_suggested_avatar { height:20px; width:20px; vertical-align:middle; margin-right:3px; }'+ '</style>'); // insert faux textarea into document fa_mentionner.textarea.parentNode.insertBefore(fa_mentionner.faux_textarea, fa_mentionner.textarea); // apply event handlers fa_mentionner.textarea.onclick = fa_mentionner.updateFauxTextarea; fa_mentionner.textarea.onscroll = fa_mentionner.adjustScroll; // update the faux textarea on keyup fa_mentionner.instance.keyUp(function(e) { if (fa_mentionner.focused && e && (e.keyCode == 13 || e.keyCode == 38 || e.keyCode == 40)) { fa_mentionner.updateFauxTextarea(true, e.keyCode); return false; } else { fa_mentionner.updateFauxTextarea(false, e.keyCode); } }); // key events for the suggested mentions $([document, fa_mentionner.body]).on('keydown', function(e) { var that = e.target; if (fa_mentionner.focused && e && e.keyCode && (that.tagName == 'TEXTAREA' || that.tagName == 'BODY')) { // move selection down if (e.keyCode == 40) { var next = fa_mentionner.focused.nextSibling; if (next) { $(fa_mentionner.focused).removeClass('fam-focus'); next.className += ' fam-focus'; fa_mentionner.focused = next; fa_mentionner.scrollSuggestions(); } return false; } // move selection up if (e.keyCode == 38) { var prev = fa_mentionner.focused.previousSibling; if (prev) { $(fa_mentionner.focused).removeClass('fam-focus'); prev.className += ' fam-focus'; fa_mentionner.focused = prev; fa_mentionner.scrollSuggestions(); } return false; } // apply selection if (e.keyCode == 13) { fa_mentionner.focused.click(); return false; } } }); // update focused suggestion on hover $(document).on('mouseover', function(e) { var that = e.target; if (/fa_mention_suggestion/.test(that.className)) { $(fa_mentionner.focused).removeClass('fam-focus'); that.className += ' fam-focus'; fa_mentionner.focused = that; } }); } })});

a++

par pizinette Dim 19 Mar 2023 - 10:41

@"Milouze14"
Bonjour Phil,

Oh super ! Ça fonctionne merci beaucoup.
Problème résolu ! Smile

Script auto-suggestion tag des membres ne fonctionne pas