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

[/codebox]

[hidecode]
Código:

(function() {
    'GIFACTIF - GIPHY PLUGIN FOR THE FORUMACTIF SCEDITOR';
    'REPOSITORY : https://github.com/SethClydesdale/gifactif';
    'SEARCH API BY : https://github.com/Giphy/GiphyAPI';


    // 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: 'dc6zaTOxFJmzC', // PUBLIC BETA KEY
        limit: 26, // max image results
        delay: 200, // delay before searches commence (200ms)
        auto_close: true,

        // general language settings
        lang: {
            searching: 'Searching...',
            not_found: 'No results found.. <img src="http://illiweb.com/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: 'Find a 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(http://i35.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(http://i35.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);
}());

[/hidecode]
Chalo
avatar

¿Que estoy pensando? :

Bienvenidosss!!! [table class=fecha_up][td]Se modifico:11/01/18 - 12:23 hrs. [/td][/table]


Banner en temas :

https://orig00.deviantart.net/2c56/f/2016/271/3/4/overwatch___mccree___facebookcover_by_beanousme-da03g04.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6513


Puntos :

8545


Me gusta :

985


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


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

Volver arriba Ir abajo

Oh genial, con lo que me encanta esa pagina y sus Gifs xDD
Muchas gracias por el code

+REP
YoshiGM
avatar

¿Que estoy pensando? :

1000 mensajes en OpenSource :D [table class=fecha_up][td]Se modifico:2/01/18 - 21:40 hrs. [/td][/table]


Banner en temas :

http://i19.servimg.com/u/f19/13/45/80/80/banner10.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #555


Mensajes :

1020


Puntos :

1365


Me gusta :

193


ingreso :

17/12/2014


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario https://www.yoshifansclub.net

Volver arriba Ir abajo

muy bueno chalo gracias
Roger
avatar

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

302


Puntos :

338


Me gusta :

28


ingreso :

30/03/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Muy interesante, lo probaré.
Daria
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://i64.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


Ver perfil de usuario

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
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://i64.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


Ver perfil de usuario

Volver arriba Ir abajo

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

¿Que estoy pensando? :

Caballo sin nombre... [table class=fecha_up][td]Se modifico:31/07/17 - 20:22 hrs. [/td][/table]


Banner en temas :

http://i.imgur.com/FzYAhXk.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

1481


Puntos :

2155


Me gusta :

396


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


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

Volver arriba Ir abajo

Yo tambien lo quiero
Roger
avatar

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

302


Puntos :

338


Me gusta :

28


ingreso :

30/03/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

@Dosh gracias por la sugerencia, intentaré de nuevo.
Daria
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://i64.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


Ver perfil de usuario

Volver arriba Ir abajo

@Dosh definitivamente era eso, gracias por la recomendación
Daria
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://i64.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


Ver perfil de usuario

Volver arriba Ir abajo

Vere que tal gracias por el aporte
kuke
avatar

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

119


Puntos :

203


Me gusta :

36


ingreso :

27/07/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.