Staff en línea

Página 2 de 2. Precedente  1, 2

[javascript] añade un boton en el editor para buscar gif animados de giphy
Tema iniciado por y Añadir a favoritos

staff


Última edición por Chalo el Vie Ago 26, 2016 9:29 am, editado 1 vez
Recuerdo del primer mensaje :

[codebox]Con este code puedes añadir un botón en el editor para buscar e insertar gif de giphy, como en el chat de facebook
[javascript] añade un boton en el editor para buscar gif animados de giphy - Página 2 WesLjgYh
[/codebox]

[hidecode]
Código:

        (function() {
          // return if gifactif has been initialized
          if (window.gifactif) {
            if (window.console && console.warn) {
              console.warn('gifactif has already been initialized');
            }
            return;
          }
       
       
          // setup global object
          window.gifactif = {
            key : 'API_KEY', // authorization
            limit : 26, // max image results
            delay : 200, // delay before searches commence (200ms)
            auto_close : true,
       
            // general language settings
            lang : {
              searching : 'Buscando...',
              not_found : 'No se encontraron resultados.. <img src="https://2img.net/i/fa/i/smiles/icon_sad.gif" style="margin:0;vertical-align:middle;"/>'
            },
       
            // dropdown markup
            dropDown : $(
              '<div>'+
                '<input type="text" id="gifactif_search" placeholder="Search for a GIF..." style="width:90%;"/>'+
                '<div id="gifactif_results" onscroll="gifactif.scrolling(this);"><div id="gifactif_images"></div></div>'+
                '<div id="giphy_attribution_mark"></div>'+
              '</div>'
            )[0],
       
       
            // initial setup of the SCEditor command
            init : function () {
              if ($.sceditor && window.toolbar) {
       
                // set the gifactif command
                $.sceditor.command.set('gifactif', {
       
                  tooltip : 'Buscar un Gif',
       
                  // Dropdown and general functionality for gifactif
                  dropDown : function (editor, caller, callback) {
                    gifactif.reset();
                    gifactif.editor = editor;
                    gifactif.callback = callback;
                    editor.createDropDown(caller, 'gifactif', gifactif.dropDown);
       
                    $('#gifactif_search', gifactif.dropDown)[0].focus(); // focus the search area
                  },
       
       
                  // WYSIWYG MODE
                  exec : function(caller) {
                    var editor = this;
       
                    $.sceditor.command.get('gifactif').dropDown(editor, caller, function(gif) {
                      editor.insert('[img]' + gif + '[/img]');
                    });
                  },
       
       
                  // SOURCE MODE
                  txtExec : function(caller) {
                    var editor = this;
       
                    $.sceditor.command.get('gifactif').dropDown(editor, caller, function(gif) {
                      editor.insertText('[img]' + gif + '[/img]');
                    });
                  }
       
                });
       
       
                // add gifactif to the editor toolbar
                toolbar = toolbar.replace('image,', 'image,gifactif,');
       
                // add CSS for button image and dropdown
                $('head').append(
                  '<style type="text/css">'+
                    '.sceditor-button-gifactif div { background-image:url(https://i.servimg.com/u/f35/18/21/60/73/giphy10.png) !important; }'+
                    '.sceditor-button-gifactif:after, .sceditor-button-gifactif:before { content:""; }'+ // Forumactif Edge override
                    '#gifactif_results { width:300px; margin:10px auto; min-height:30px; max-height:300px; overflow-x:hidden; overflow-y:auto; }'+
                    '.gifactif_imagelist { line-height:0; column-count:2; column-gap:3px; }'+
                    '.gifactif_imagelist img { margin-bottom:3px; cursor:pointer; width:100%; }'+
                    'html #giphy_attribution_mark { background:url(https://i.servimg.com/u/f35/18/21/60/73/powere11.png) no-repeat 50% 50% transparent !important; height:22px !important; width:100%; !important; min-width:200px !important; display:block !important; visibility:visible !important; opacity:1 !important; }'+
                  '</style>'
                );
              }
       
            },
       
       
            // search for a GIPHY gif
            search : function (query) {
              if (gifactif.timeout) {
                gifactif.abort(); // abort ongoing searches and requests
              }
       
              if (query) {
       
                // set a small timeout in case the user is still typing
                gifactif.timeout = window.setTimeout(function() {
                  gifactif.reset(true, gifactif.lang.searching);
                  gifactif.query = encodeURIComponent(query);
       
                  gifactif.request = $.get('http://api.giphy.com/v1/gifs/search?q=' + gifactif.query + '&limit=' + gifactif.limit + '&rating=pg-13&api_key=' + gifactif.key, function(data) {
                    // update global data such as page offsets for scrolling
                    gifactif.request = null;
                    gifactif.offset = data.pagination.offset + gifactif.limit;
                    gifactif.offset_total = data.pagination.total_count;
       
                    gifactif.reset(true); // reset HTML content
                    gifactif.addGIF(data); // send data to be parsed
                  });
       
                }, gifactif.delay);
       
              } else {
                gifactif.reset(true);
              }
            },
       
       
            // abort ongoing searches and requests
            abort : function () {
              if (gifactif.timeout) {
                window.clearInterval(gifactif.timeout);
                gifactif.timeout = null;
              }
       
              if (gifactif.request) {
                gifactif.request.abort();
                gifactif.request = null;
              }
            },
       
       
            // add gifs to the result list
            addGIF : function (data, loadMore) {
              // setup data and begin parsing results
              var gif = data.data,
                  i = 0,
                  j = gif.length,
                  list = $('<div class="gifactif_imagelist" />')[0];
       
              if (j) {
                for (; i < j; i++) {
                  list.appendChild($('<img id="' + gif[i].id + '" src="' + gif[i].images.fixed_width.url + '" />').click(gifactif.insert)[0]);
                }
              } else if (!loadMore) {
                gifactif.reset(true, gifactif.lang.not_found);
              }
       
              // add results to the result list
              $('#gifactif_results', gifactif.dropDown).append(list);
            },
       
       
            // listen to the scrolling so we can add more gifs when the user reaches the bottom
            scrolling : function (that) {
              if (that.scrollHeight - that.scrollTop === that.clientHeight) {
                gifactif.loadMore();
              }
            },
       
       
            // load more results once the user has scrolled through the last results
            loadMore : function () {
              if (gifactif.offset < gifactif.offset_total) {
                gifactif.request = $.get('http://api.giphy.com/v1/gifs/search?q=' + gifactif.query + '&offset=' + gifactif.offset + '&limit=' + gifactif.limit + '&rating=pg-13&api_key=' + gifactif.key, function(data) {
                  gifactif.request = null;
                  gifactif.offset = data.pagination.offset + gifactif.limit;
                  gifactif.offset_total = data.pagination.total_count;
       
                  gifactif.addGIF(data, true); // send data to be parsed
                });
              }
            },
       
       
            // inserts the gif into the editor
            insert : function () {
              // add the gif to the editor and close the dropdown
              gifactif.callback('http://media0.giphy.com/media/' + this.id + '/giphy.gif');
       
              if (gifactif.auto_close) {
                gifactif.editor.closeDropDown(true);
                gifactif.reset();
              }
            },
       
       
            // reset the dropdown fields
            reset : function (resultsOnly, newContent) {
              $('#gifactif_results', gifactif.dropDown).html(newContent ? newContent : '');
       
              if (!resultsOnly) {
                $('#gifactif_search', gifactif.dropDown).val('');
              }
            }
          };
       
       
          // bind keyup event to search input
          $('#gifactif_search', gifactif.dropDown)[0].onkeyup = function(e) {
            var k = e.keyCode;
       
            // ignore specific key inputs to prevent unnecessary requests
            if (k && (k == 16 || k == 17 || k == 18 || k == 20 || k == 37 || k == 38 || k == 39 || k == 40)) {
              return;
            } else {
              gifactif.search(this.value);
            }
          };
       
          // initilize gifactif
          $(gifactif.init);
        }());


Posibles modificaciones

1. Limite:
La variable de limit determina la cantidad máxima de GIF que se cargan en los resultados de búsqueda a la vez. De forma predeterminada, 26 GIF se cargan en los resultados cuando busca o se desplaza hasta el final de los resultados. Incremente o disminuya este valor para mostrar más o menos resultados a la vez.

2. Delay:
La variable delay define un pequeño retraso antes de que los resultados de la búsqueda se envíen a Giphy. Esto ayuda a reducir la frecuencia de las solicitudes mientras todavía está escribiendo. Por defecto, el retraso es de 200 ms, si desea que sea más largo o más corto, simplemente modifique el valor de esta variable.

3. Autocerrado
La variable auto_close le permite elegir si el menú desplegable de búsqueda Giphy se cierra una vez que elige una imagen. Por defecto, el menú desplegable se cierra cuando elige un GIF. Si desea que el menú desplegable permanezca abierto después de elegir un GIF, simplemente cambie el valor de esta opción a falso.

4. Idioma
Si desea cambiar el idioma general de este complemento, simplemente busque y edite el objeto lang y el elemento dropDown:
El objeto lang contiene los textos básicos, mientras que dropDown se refiere a la estructura de búsqueda desplegable.

5. API key
La variable key es para la clave API proporcionada por Giphy a todos: es necesaria para enviar búsquedas de la gran maravilla que ofrece Giphy. No debería necesitar editar esta variable.

Para una correcta instalación debes obtener una API key de Giphy, Mira este tutorial para mayor información.
[/hidecode]

Codigo actualizado y optimizado por @Fibo el 01/11/2019
Chalo
Chalo

¿Que estoy pensando? :

jugando con un ping de 999 [table class=fecha_up][td]Se modifico:25/05/20 - 10:57 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/ikntDYIh.jpeg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

7134


Puntos :

9266


Me gusta :

1063


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


https://www.opensourcephpbb3.com

Volver arriba Ir abajo

staff
Vuelvo a comentar para instalarlo en mi foro

EDITO: No me funciona.. cuando intento buscar un gif sólo se queda en "Searching..buscando..." y no sale nada... Si cambio todo a español los textos correspoindientes en las variables no busca nada
YoshiGM
YoshiGM

¿Que estoy pensando? :

Hola =) [table class=fecha_up][td]Se modifico:18/05/20 - 8:58 hrs. [/td][/table]


Banner en temas :

https://i.servimg.com/u/f19/13/45/80/80/banner10.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #555


Mensajes :

1313


Puntos :

1743


Me gusta :

258


ingreso :

17/12/2014


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


https://www.yoshifansclub.net/forum

Volver arriba Ir abajo

staff
Esto esta simpatico jajajjaja
Athan
Athan

¿Que estoy pensando? :

Athan [table class=fecha_up][td]Se modifico:8/03/16 - 10:55 hrs.[/td][/table]


Banner en temas :

https://2img.net/h/oi68.tinypic.com/2dr5nit.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

205


Puntos :

279


Me gusta :

52


ingreso :

10/02/2016


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


http://www.indiosrojiblancos.net/

Volver arriba Ir abajo

Esta aplicación está en el AYUDA.
Busco que funcione en el modernbb -> phpbb ..

Ella es bastante divertida y parece con el (discord).
muykay
muykay

¿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 :

https://2img.net/h/oi64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

67


Puntos :

70


Me gusta :

3


ingreso :

07/09/2017


Sexo :

Masculino

Plataforma :

punBB


Navegador :

Chrome


Volver arriba Ir abajo

como mola, a ver si me funciona
Himnoshistoricos
Himnoshistoricos

¿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 :

https://c2.staticflickr.com/2/1445/25839638916_404acbe82c_b.jpg


Color de titulos :

#fff


Sombra titulo :

0 1px #000


Mensajes :

515


Puntos :

678


Me gusta :

97


ingreso :

04/02/2016


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

firefox


http://www.niunpasoatras.org/

Volver arriba Ir abajo

Voy a ver que onda el post! Gracias de todas formas
iRodrigo
iRodrigo

¿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 :

https://2img.net/h/oi64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

145


Puntos :

178


Me gusta :

11


ingreso :

06/09/2019


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


http://lucianomicle.foroactivo.com/

Volver arriba Ir abajo

si quieres que funcione, debes cambiar el api kei.
Lo obtendrás creando una cuenta en ghiphy.

Giphy

Editado por Fibo: Actualizo link.
fascicularia
fascicularia

¿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://davesgarden.com/guides/pf/thumbnail.php?image=2006/10/11/Calif_Sue/aad8bf.jpg


Color de titulos :

#576d00


Sombra titulo :

1px 1px 1px #fff


Mensajes :

237


Puntos :

282


Me gusta :

29


ingreso :

20/01/2016


Sexo :

Femenino

Plataforma :

PhpBB2


Navegador :

Opera


Volver arriba Ir abajo

[info]Código actualizado y optimizado para Foros phpBb3.[/info]
Fibo
Fibo

¿Que estoy pensando? :

No dejes de pensar. [table class=fecha_up][td]Se modifico:3/02/20 - 15:14 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/zVxw0kMh.png


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

667


Puntos :

2033


Me gusta :

210


ingreso :

11/09/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


http://www.opensourcephpbb3.com

Volver arriba Ir abajo

Invitado
Genial voy a probarlo, como siempre gracias por tus aportes
Invitado
Anonymous

Volver arriba Ir abajo

Que bueno! pues voy a probarlo a ver si me funciona, muchas gracias
citrato
citrato

¿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 :

https://2img.net/h/oi64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

102


Puntos :

130


Me gusta :

8


ingreso :

13/05/2020


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

Muchas gracias! Voy a probarlo
Aria
Aria

¿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://static.tumblr.com/ee5c516eb48ee3e839f133da0917acf8/zcxvzo8/6Womvw4se/tumblr_static_keru_cover.jpg


Color de titulos :

#fff


Sombra titulo :

0 1px #000


Mensajes :

80


Puntos :

99


Me gusta :

11


ingreso :

10/03/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

 En la misma categoria


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