Staff en línea

Página 1 de 2. 1, 2  Siguiente

[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
[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 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
Oh genial, con lo que me encanta esa pagina y sus Gifs xDD
Muchas gracias por el code

+REP
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

muy bueno chalo gracias
Roger
Roger

¿Que estoy pensando? :

Probando el status del foro [table class=fecha_up][td]Se modifico:9/03/17 - 9:13 hrs.[/td][/table]


Banner en temas :

http://thedesigninspiration.com/wp-content/uploads/2012/06/Facebook-Covers-029.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

305


Puntos :

343


Me gusta :

30


ingreso :

30/03/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

Muy interesante, lo probaré.
Daria
Daria

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

26


Puntos :

34


Me gusta :

8


ingreso :

31/08/2016


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

@Chalo es normal que no se pueda ver el código después de haber comentado, me muero de ganas por tener esta herramienta.
Daria
Daria

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

26


Puntos :

34


Me gusta :

8


ingreso :

31/08/2016


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

staff
Asi es @Daria cada ves que entres al post deberás comentar para quitar el bloqueo...
Dosh
Dosh

¿Que estoy pensando? :

Vuelve el hijo prodigo... [table class=fecha_up][td]Se modifico:1/010/18 - 15:59 hrs. [/td][/table]


Banner en temas :

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


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

1700


Puntos :

2460


Me gusta :

468


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


http://www.telefoneros.com/

Volver arriba Ir abajo

Yo tambien lo quiero
Roger
Roger

¿Que estoy pensando? :

Probando el status del foro [table class=fecha_up][td]Se modifico:9/03/17 - 9:13 hrs.[/td][/table]


Banner en temas :

http://thedesigninspiration.com/wp-content/uploads/2012/06/Facebook-Covers-029.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

305


Puntos :

343


Me gusta :

30


ingreso :

30/03/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

@Dosh gracias por la sugerencia, intentaré de nuevo.
Daria
Daria

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

26


Puntos :

34


Me gusta :

8


ingreso :

31/08/2016


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

@Dosh definitivamente era eso, gracias por la recomendación [javascript] añade un boton en el editor para buscar gif animados de giphy 953422333
Daria
Daria

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

26


Puntos :

34


Me gusta :

8


ingreso :

31/08/2016


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

Vere que tal gracias por el aporte
kuke
kuke

¿Que estoy pensando? :

diseñar y hacer amigos[table class=fecha_up][td]Se modifico:14/8/15 - 1:07 hrs.[/td][/table]


Banner en temas :

https://cherieroedirksen.files.wordpress.com/2012/11/a-new-dawn-facebook-cover.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

120


Puntos :

208


Me gusta :

40


ingreso :

27/07/2015


Sexo :

Masculino

Plataforma :

punBB


Navegador :

Chrome


Volver arriba Ir abajo

 En la misma categoria


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