[Addon] Adicionar botão de GIFS (GIPHY) no SCEditor

Características e aplicação

Resultado da aplicação

Local de instalação

Código:

(function() {
  'GIFACTIF - GIPHY PLUGIN FOR THE FORUMACTIF SCEDITOR';
  'REPOSITORY : https://github.com/SethClydesdale/gifactif';
  'SEARCH API BY : https://github.com/Giphy/GiphyAPI';
 
 
  // Retornar se gifactif foi inicializado
  if (window.gifactif) {
    if (window.console && console.warn) {
      console.warn('gifactif has already been initialized');
    }
    return;
  }
 
 
  // Configurar o objeto global
  window.gifactif = {
    key : 'dc6zaTOxFJmzC', // PUBLIC BETA KEY
    limit : 26, // max image results
    delay : 200, // delay before searches commence (200ms)
    auto_close : true,
 
    // Configurações gerais de idioma
    lang : {
      searching : 'Procurando...',
      not_found : 'Não encontrei nada.. <img src="https://2img.net/i/fa/i/smiles/icon_sad.gif" style="margin:0;vertical-align:middle;"/>'
    },
 
    // Marcação suspensa
    dropDown : $(
      '<div>'+
        '<input type="text" id="gifactif_search" placeholder="Procurar por uma 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],
 
 
    // Configuração inicial do comando SCEditor
    init : function () {
      if ($.sceditor && window.toolbar) {
        $.sceditor.command.set('gifactif', {
          tooltip : 'Encontrar uma GIF',
          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();
          },
 
          // WYSIWYG MODE
          exec : function(caller) {
            var editor = this;
 
            $.sceditor.command.get('gifactif').dropDown(editor, caller, function(gif) {
              editor.insert('[img]' + gif + '[/img]');
            });
          },
 
          txtExec : function(caller) {
            var editor = this;
 
            $.sceditor.command.get('gifactif').dropDown(editor, caller, function(gif) {
              editor.insertText('[img]' + gif + '[/img]');
            });
          }
 
        });
        toolbar = toolbar.replace('image,', 'image,gifactif,');
        $('head').append(
          '<style type="text/css">'+
            '.sceditor-button-gifactif div { background-image:url(https://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(https://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 : function (query) {
      if (gifactif.timeout) {
        gifactif.abort();
      }
      if (query) {
        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 : function () {
      if (gifactif.timeout) {
        window.clearInterval(gifactif.timeout);
        gifactif.timeout = null;
      }
 
      if (gifactif.request) {
        gifactif.request.abort();
        gifactif.request = null;
      }
    },
    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);
    },
 
    scrolling : function (that) {
      if (that.scrollHeight - that.scrollTop === that.clientHeight) {
        gifactif.loadMore();
      }
    },
    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
        });
      }
    },
    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 : function (resultsOnly, newContent) {
      $('#gifactif_results', gifactif.dropDown).html(newContent ? newContent : '');
 
      if (!resultsOnly) {
        $('#gifactif_search', gifactif.dropDown).val('');
      }
    }
  };
  $('#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);
    }
  };
  $(gifactif.init);
}());