Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[AWESOMEBB] Problème avec le script autosugestion


2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

MathisB
MathisB
http://www.dixily.fr

MessageMathisB Mar 14 Avr 2020 - 13:08

  • Version du forum :
    AWESOMEBB
  • Templates modifiés :
    oui
  • Navigateur :
    Autre
Bonjour, il y a plusieurs mois, j'avais ouvert ce sujet:
https://www.milouze14.com/t32233-corbeilleawesomebb-probleme-avec-le-tuto-autosuggestion?highlight=corbeille

Je disais dans celui-ci que le script d'autosuggestion ne fonctionnait pas. Milouze m'avait répondu que de son côté il fonctionnait correctement et je ne comprenais pas pourquoi quand je le testais sur un forum vierge il ne fonctionnait pas.

Voici la capture fournie par Milouze:
[AWESOMEBB] Problème avec le script autosugestion 126

En effet sur la capture il fonctionne mais j'ai compris pourquoi! Sur la capture Milouze test le script en écrivant un "@". Sauf que le script ne fonctionne pas à partir du moment où l'on commence à taper le pseudo du membre:
[AWESOMEBB] Problème avec le script autosugestion 2020-011

Donc le script ne fonctionne pas sur AwesomeBB et ma question est pourquoi?
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 non trouvé'
                  },
                  // 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(),
                  //  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"]', '.avatar.mini 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?change_version=prosilver' + 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;
                  }
                });
              }
            })});

Merci d'avance :D


Dernière édition par MathisB le Jeu 16 Avr 2020 - 10:24, édité 1 fois
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 14 Avr 2020 - 18:14

Hello Mathis,

Donc le script ne fonctionne pas sur AwesomeBB et ma question est pourquoi?

Tout simplement que cette version est encore en phase bêta et effectivement, il y a un soucis que je n'arrive pas a résoudre.


Tu peux tester ce script:
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 non trouvé'
                  },
                  // 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(),
                  // cache 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"]', '.avatar.mini 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 ajouter ceci dans ta feuille de style:


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:

a.fa_mention_suggestion[href*="mode_comment"],
a.fa_mention_suggestion[href*="public"]
{display:none;}

Penser a cliquer sur le bouton [AWESOMEBB] Problème avec le script autosugestion Sans_t10

MathisB
MathisB
http://www.dixily.fr

MessageMathisB Mer 15 Avr 2020 - 11:50

Bonjour Phil,

Merci, ça fonctionne :D

Autre question, est-ce possible de faire fonctionne le script également dans la réponse rapide de cette version. Même si j'active le script sur toutes les pages il n'agit pas sur la zone de texte de l'éditeur rapide.
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 15 Avr 2020 - 15:32

Hello Mathis,
malheureusement non car cet éditeur est totalement indépendant .
Désolé.
MathisB
MathisB
http://www.dixily.fr

MessageMathisB Jeu 16 Avr 2020 - 10:24

Bonjour,

D'accord merci Milouze c'est résolu 😁
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 16 Avr 2020 - 11:36

De rien Mathis,


Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande clin oeil



Voir le sujet précédent Voir le sujet suivant Revenir en haut

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

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum