Staff en línea

Página 1 de 3. 1, 2, 3  Siguiente

[Javascript] Mencionar con autosugerencia de usuarios
Tema iniciado por y Añadir a favoritos

Mensaje  Chalo


Última edición por Chalo el Mar Jun 02, 2015 9:01 am, editado 2 veces
[codebox]Al colocar la arroba, y la primer letra del nombre sobre el editor rapido te despliega la lista de usuarios que inician con la primer letra escrita[/codebox]
[hidecode]
Código:
$(function(){$(function(){
  if (!$.sceditor) return;
 
  var faux = document.createElement('DIV'), l = document.createElement('DIV'), t = document.getElementById('text_editor_textarea'), sce = $(t).sceditor('instance'), txt = $('.sceditor-container textarea')[0];
 
  // faux textarea
  faux.id = 'faux-textarea';
  // apply a few styles to the faux textarea so the text properties are identical
  for (var style = ['margin:5px','z-index:-1','position:absolute','font-weight:normal','font-family:Verdana,Arial,Helvetica,sans-serif','font-size:13px','text-align:left','word-wrap:break-word','line-height:1.4em','visibility:hidden','overflow:auto','overflow-x:hidden'], i=0, j=style.length,p; i<j; i++) { p = style[i].split(':'); faux.style[p[0]] = p[1]; }
  txt.style.wordBreak = 'break-all'; // makes line wrapping similar to the faux textarea
  txt.parentNode.insertBefore(faux,txt);
 
  // suggestion list
  l.className = 'sceditor-dropdown sceditor-fontsize-picker';
  l.style.height = '100px';
  l.style.width = '150px';
  l.style.overflow = 'auto';
  l.style.overflowX = 'hidden';
  l.style.display = 'none';
 
  document.body.appendChild(l);
 
  sce.keyUp(function(){ mentionSuggest() });
  txt.onclick = mentionSuggest;
 
  // use a named function so we can execute it on different events, such as when we click inside a mention
  function mentionSuggest() {
    var c = 0, v = sce.val(), s, m, pseudo, mention;
    if (document.selection) {
      s = document.selection.createRange();
      s.moveStart('character', -txt.value.length);
      c = s.text.length;
    } else if (txt.selectionStart || txt.selectionStart == 0) c = txt.selectionStart;
    v = v.slice(0,c) + '{FAUX_CARET}' + v.slice(c, v.length); // slice the message and insert the faux caret
   
    // prevent HTML from formatting and replace breaks / spaces with their HTML equivalent
    // also formats both the mentions and faux caret ( the mention regex needs improvements )
    faux.innerHTML = v.replace(/</g,'<').replace(/>/g,'>').replace(/(@".*?"|@.*?\s|@.*?(\n|\r)|@.*?$)/g,'<a href="#">$1</a>').replace(/\n|\r/g,'<br>').replace(/\s/g,'&nbsp;').replace(/<a&nbsp;href="#">/g,'<a href="#">').replace(/{FAUX_CARET}/,'<span id="faux_caret" style="position:absolute;margin-left:-3px;">|</span>');
    faux.style.width = txt.style.width;
    faux.style.height = txt.style.height;
    faux.scrollTop = txt.scrollTop;
   
    // find the faux caret's parent and check if it's an anchor
    // since HTML isn't formatted it's the perfect way to identify mentions
    m = document.getElementById('faux_caret').parentNode;
    if (m.tagName == 'A') {
      // clean the mention string so that we can use it for both replacement and queries
      mention = m.innerHTML.replace(/<span.*?>\|<\/span>/,'').replace(/&nbsp;/g,' ').replace(/<br>/g,''), pseudo = mention.slice(1).replace(/(^"|"$)/g,'').trim();
     
      // sets the suggestion list position below where the mention is
      l.style.left = $(m).offset().left + 'px';
      l.style.top = ($(m).offset().top + 20) + 'px';
     
      // submit a query to the memberlist page with the pseudo
      pseudo.length && $.get('/memberlist?username='+encodeURIComponent(pseudo),function(d) {
        var u = $('.avatar-mini a, a.gen',d);
        if (!u.length) return;
        l.innerHTML = '';
       
        // loop through the results and form a list of username suggestions
        for (var i=0,j=u.length,a; i<j; i++) {
          a = document.createElement('A');
          a.href = '#';
          a.className = 'sceditor-fontsize-option';
          a.innerHTML = $(u[i]).text().trim();
          a.onclick = function() {
            sce.focus();
            // this is a little clunky at the moment, it globally replaces the mention variable with a's innerHTML
            // ex : all @a will be replaced with @"Ange Tuteur"
            sce.val(sce.val().replace(RegExp(mention,'g'),'@"'+$(this).text()+'"'));
            l.style.display = 'none';
            return false;
          };
          l.appendChild(a);
        }
        l.style.display = 'block';
      });
    } else l.style.display = 'none';
  }
})});
[/hidecode]
staff
Chalo
avatar

¿Que estoy pensando? :

los dias de ocio son geniales [table class=fecha_up][td]Se modifico:13/12/17 - 11:40 hrs. [/td][/table]


Banner en temas :

http://i.imgur.com/XlCMsAOh.jpeg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6465


Puntos :

8477


Me gusta :

967


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario http://www.opensourcephpbb3.com

Volver arriba Ir abajo

veamos que es esto.
arsenico
avatar

¿Que estoy pensando? :

Baneado del foro [table class=fecha_up][td]Se modifico:12/12/15 - 18:20 hrs.[/td][/table]


Banner en temas :

http://www.pagecovers.com/covers/electronic_music/music_drum_bass_beats.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

361


Puntos :

495


Me gusta :

52


ingreso :

10/03/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

firefox


Ver perfil de usuario http://losslesscity.foroactivo.com/

Volver arriba Ir abajo

chalo pon alguna explicacion de que funcion hace esto y si es con captura de imagen mejor todavia, gracias.
arsenico
avatar

¿Que estoy pensando? :

Baneado del foro [table class=fecha_up][td]Se modifico:12/12/15 - 18:20 hrs.[/td][/table]


Banner en temas :

http://www.pagecovers.com/covers/electronic_music/music_drum_bass_beats.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

361


Puntos :

495


Me gusta :

52


ingreso :

10/03/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

firefox


Ver perfil de usuario http://losslesscity.foroactivo.com/

Volver arriba Ir abajo

arsenico
avatar

¿Que estoy pensando? :

Baneado del foro [table class=fecha_up][td]Se modifico:12/12/15 - 18:20 hrs.[/td][/table]


Banner en temas :

http://www.pagecovers.com/covers/electronic_music/music_drum_bass_beats.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

361


Puntos :

495


Me gusta :

52


ingreso :

10/03/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

firefox


Ver perfil de usuario http://losslesscity.foroactivo.com/

Volver arriba Ir abajo

Mensaje  Chalo
ya lo puse en la descrpcion
staff
Chalo
avatar

¿Que estoy pensando? :

los dias de ocio son geniales [table class=fecha_up][td]Se modifico:13/12/17 - 11:40 hrs. [/td][/table]


Banner en temas :

http://i.imgur.com/XlCMsAOh.jpeg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6465


Puntos :

8477


Me gusta :

967


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario http://www.opensourcephpbb3.com

Volver arriba Ir abajo

ahora si , gracias amigo!
arsenico
avatar

¿Que estoy pensando? :

Baneado del foro [table class=fecha_up][td]Se modifico:12/12/15 - 18:20 hrs.[/td][/table]


Banner en temas :

http://www.pagecovers.com/covers/electronic_music/music_drum_bass_beats.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

361


Puntos :

495


Me gusta :

52


ingreso :

10/03/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

firefox


Ver perfil de usuario http://losslesscity.foroactivo.com/

Volver arriba Ir abajo

pues ya tenia esa funcion instalada en el foro, te pongo el codigo para que lo compares y me digas cual es mejor de los dos.

[hidecode]
Código:

var aagtags={question:"¿Deseas etiquetar un usuario?",username:"Introduce el nombre del usuario a etiquetar",notify:"¿Deseas que sea notificado por inbox? (ACEPTAR es la mejor opción)",notif_subject:"Fuiste etiquetado en : ",notif_message:"Hola {USERNAME}, Te he etiquetado en : "};(function(d){function b(){if(/\/?t\d+.*/.test(window.location.pathname)||/\/?post.*/.test(window.location.pathname)){c=d("#text_editor_textarea").sceditor("instance"),c[a](function(){if("@"==c.val().split("")[c.val().length-1]){var h=!c.inSourceMode();if(confirm(aagtags.question)){var g=prompt(aagtags.username).replace(/\s/g,"+");h?c.wysiwygEditorInsertHtml('<a href="http://'+window.location.hostname+"/profile?mode=viewprofile&u="+g+'">'+g+"</a>"):c.insert("[url=http://"+window.location.hostname+"/profile?mode=viewprofile&u="+g+"]"+g+"[/url]");/\/?t\d+.*/.test(window.location.pathname)&&f(g)}}})}}function f(e){var h=aagtags.notif_subject.replace(/\s/g,"+")+document.title,g=aagtags.notif_message.replace(/\s/g,"+")+"[url="+window.location+"]"+document.title+"[/url]";d.get("/privmsg?mode=post",function(j){j=d(j).find('form[action="/privmsg"]').serialize()+"&post=Send";j=j.replace("username%5B%5D=","username%5B%5D="+e).replace("subject=","subject="+h).replace("message=","message="+g);d.post("/privmsg",j)})}var c,a=function(){var h=window.navigator.userAgent,g=h.indexOf("MSIE "),i=h.indexOf("Trident/");return 0<g?!0:0<i?(h.indexOf("rv:"),!0):!1}()?"keyDown":"keyUp";d(window).load(function(){(void 0==aagtags.users||RegExp(aagtags.users.replace(/,\s?/g,"|")).test(document.getElementById("i_icon_mini_logout").alt.replace(/.*\[ (.*) \]/,"$1")))&&b()})})(jQuery);
[/hidecode]
arsenico
avatar

¿Que estoy pensando? :

Baneado del foro [table class=fecha_up][td]Se modifico:12/12/15 - 18:20 hrs.[/td][/table]


Banner en temas :

http://www.pagecovers.com/covers/electronic_music/music_drum_bass_beats.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

361


Puntos :

495


Me gusta :

52


ingreso :

10/03/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

firefox


Ver perfil de usuario http://losslesscity.foroactivo.com/

Volver arriba Ir abajo

Mensaje  Chalo
son distintos, el de este tema solo busca los nombres y usarias la notificacion de foroactivo, el de la mencion, el que pones debes escribir el nick y se envia un mp, debes escoger que quieres mas
staff
Chalo
avatar

¿Que estoy pensando? :

los dias de ocio son geniales [table class=fecha_up][td]Se modifico:13/12/17 - 11:40 hrs. [/td][/table]


Banner en temas :

http://i.imgur.com/XlCMsAOh.jpeg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6465


Puntos :

8477


Me gusta :

967


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario http://www.opensourcephpbb3.com

Volver arriba Ir abajo

Publico para ver
Fusilet
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://fbcoversking.com/wp-content/uploads/2012/01/waves-of-colour-facebook-cover.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

43


Puntos :

58


Me gusta :

5


ingreso :

05/05/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Mensaje  Faxter
Posteo para ver
staff
Faxter
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://img05.deviantart.net/f3c4/i/2016/256/3/3/izuku_midoriya___bakugou_katsuki_by_faxterd-dahjpvi.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #333


Mensajes :

282


Puntos :

468


Me gusta :

78


ingreso :

15/02/2015


Sexo :

Masculino

Plataforma :

punBB


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.