[AddOn] Chatbox: Smiles integrado a janela!

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

  • 0

[AddOn] Chatbox: Smiles integrado a janela! Empty [AddOn] Chatbox: Smiles integrado a janela!

Mensagem por JScript em 14.05.15 22:21

Olá pessoal!

Nós sabemos que os smiles do chat aparecem dentro de uma outra janela em pop up, então eu pensei em integrá-los na própria janela do chat!

O código é fácil de entender e modificar, o investimento é apenas no índice:
Código:
(function($) {
  'use strict';

$(function() {
  if (_userdata.session_logged_in) {
      // Here will be checked if the chat is within the object tag, if it is, changes to iframe!
      if (jQuery('object#frame_chatbox').length) {
        jQuery('#frame_chatbox').replaceWith('<iframe src="/chatbox/?archives" id="frame_chatbox" scrolling="yes" width="100%" height="100%" type="text/html" style="border: 0px;" />');
      }
  }
});
 
$(window).load(function() {
  if (_userdata.session_logged_in) {
      // Calls the customization feature of the chat...
      chatFunction();
 
      // Here is the solution to a problem: When the iframe is changed, the function is called again!
      $('#frame_chatbox').load(function() {
        chatFunction();
      });
  }
});
 
// Function for customizing the chat.
function chatFunction() {
  var oIframe = (document.getElementById("frame_chatbox").contentWindow.document || document.getElementById("frame_chatbox").contentDocument),
      script = oIframe.createElement("script"),
      chatbox_script = function() {
        window.smile = {
            Load: function() {
              jQuery.ajax({
                  url: "/post?mode=smilies",
                  cache: true,
                  type: "get",
                  dataType: "text",
                  success: function(response, status, xhr) {
                    if (xhr.status == 200) {
                        var htmlSmile = $("<div>" + response + "</div>");
                        htmlSmile.find("#smilies_categ, p, span").remove();
                        var oTarget = htmlSmile.find("a"),
                          oThis, patt, regex;
                        for (var i = 0, len = oTarget.length; i < len; i++) {
                          oThis = $(oTarget[i]);
                          patt = /\('(.*?)'\)/i.exec(oThis.attr("href"))[1];
                          oThis.attr({
                              href: "#",
                              onclick: "smile.Insert('" + patt + "');return false;"
                          });
                        }
                        /*var aSmiles = [
                              "&phone;", "&starf;", "Coração", "&sung;", "&check;",
                              "&boxbox;", "©", "&Jscr;&Sscr;", "&block;", "&blk34;",
                              "&xcirc;", "&star;", "♣", "&cross;", "&Fscr;&Mscr;"
                          ],
                          sSmiles = "<p>";
                        for (var i = 0, len = aSmiles.length; i < len; i++) {
                          sSmiles += "<a href='#' onclick='smile.Insert(\"" + aSmiles[i] + "\");return false;'>" + aSmiles[i] + "</a>";
                        }*/
                        jQuery("#chat-smiles-show").html(
                          htmlSmile.find("#simple-wrap, tbody:last").html()
                        );
                    }
                  }
              });
              jQuery("head").append(
                  "<style type='text/css'>" +
                  "#chat-smiles-show {" +
                  "  background: none no-repeat scroll center center rgb(255, 255, 255);" +
                  "  border: 2px solid #d2d2d2;" +
                  "  height: 250px;" +
                  "  overflow: auto;" +
                  "  padding-top: 6px;" +
                  "  position: absolute;" +
                  "  width: 225px;" +
                  "  z-index: 99999;" +
                  "}" +
                  "#chat-smiles-show > p {" +
                  "  margin: 0;" +
                  "}" +
                  "#chat-smiles-show p a {" +
                  "  margin-bottom: 14px;" +
                  "}" +
                  "#chat-smiles-show a {" +
                  "  display: inline-block;" +
                  "  font-size: 18px;" +
                  "  margin-bottom: 5px;" +
                  "  margin-left: 10px;" +
                  "  text-decoration: none;" +
                  "}" +
                  "</style>"
              );
              jQuery("body").append("<div id='chat-smiles-show' style='display: none;'></div>");
            },
 
            Show: function(event) {
              var elenPos = jQuery("#divsmilies"),
                  target = jQuery("#chat-smiles-show");
              target.css({
                  "left": (elenPos.offset().left + elenPos.outerWidth()) - target.outerWidth(),
                  "top": elenPos.offset().top - target.outerHeight()
              });
              return (target[0].style.display == "none") ? target.fadeIn("fast") : target.fadeOut("fast");
            },
 
            Insert: function(smile) {
              var id = document.getElementById("message");
              id.focus();
              id.value += " " + smile + " ";
              document.getElementById("chat-smiles-show").style.display = "none";
            }
        };
 
        smile.Load();
 
        $("#divsmilies").unbind("click").bind("click", function (event) {
            smile.Show(event);
        });
      };
  script.type = "text/javascript";
  script.innerHTML = "(" + chatbox_script.toString() + ")();";
  oIframe.getElementsByTagName("head")[0].appendChild(script);
}

})(jQuery);

Resultado:
[AddOn] Chatbox: Smiles integrado a janela! SsrzQ1N

Alguém teria mais ideias para acrescentar ao código?

JS
JScript

JScript
Membro do Fórum

Masculino
Inscrito dia : 15/03/2013
Mensagens : 1449
Pontos Ativos : 1901

http://jscript.forumeiros.com/

[AddOn] Chatbox: Smiles integrado a janela! Empty Re: [AddOn] Chatbox: Smiles integrado a janela!

Mensagem por Daemon em 15.05.15 1:16

Muito bom JC!!! Nota 10 cara!

Piscada
Daemon

Daemon
Membro do Fórum

Masculino
Inscrito dia : 02/03/2012
Mensagens : 1127
Pontos Ativos : 1732

http://bestskins.forumeiros.com/

[AddOn] Chatbox: Smiles integrado a janela! Empty Re: [AddOn] Chatbox: Smiles integrado a janela!

Mensagem por MateusA em 15.05.15 1:28

Funcionou perfeitamente aqui, ótimo código.  ^^
Mas a respeito de ideias, as 'abas':
http://prntscr.com/75bm4w
(Selecionar categoria dos smyles, memes, etc..)
Na próxima versão, poderia importa-las também. Muito feliz
MateusA

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

[AddOn] Chatbox: Smiles integrado a janela! Empty Re: [AddOn] Chatbox: Smiles integrado a janela!

Mensagem por JScript em 15.05.15 13:06

A respeito das 'abas', experimentem remover a seguinte linha:
Código:
htmlSmile.find("#smilies_categ, p, span").remove();

Experimentem também trocar o seguinte loop:
Código:

                        var oTarget = htmlSmile.find("a"),
                          oThis, patt, regex;
                        for (var i = 0, len = oTarget.length; i < len; i++) {
                          oThis = $(oTarget[i]);
                          patt = /\('(.*?)'\)/i.exec(oThis.attr("href"))[1];
                          oThis.attr({
                              href: "#",
                              onclick: "smile.Insert('" + patt + "');return false;"
                          });
                        }

Por apenas essa linha:
Código:
htmlSmile.html(htmlSmile.html().replace(/insert_chatboxsmilie/g, "smile.Insert"));

Em meus testes o desempenho foi muito superior, assim como simplificou mais ainda o código!

Ok pessoal, obrigado pelos feedbacks e dicas!

JS
JScript

JScript
Membro do Fórum

Masculino
Inscrito dia : 15/03/2013
Mensagens : 1449
Pontos Ativos : 1901

http://jscript.forumeiros.com/

[AddOn] Chatbox: Smiles integrado a janela! Empty Re: [AddOn] Chatbox: Smiles integrado a janela!

Mensagem por MateusA em 15.05.15 14:31

Ficou ótimo. Muito feliz

Mas, veja:
Código:
http://i.imgur.com/uofZFjE.png
Agora ele também geta o 'Fechar a Janela', claro, podemos remover facilmente.
(Ao clicar, como o open não foi executado, ele retorna false)


Outra coisa interessante, seria: Ao clicar, fora do HTML, ele ser ocultado.

[AddOn] Chatbox: Smiles integrado a janela! CrbxuGC
http://prntscr.com/75h63y
MateusA

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

[AddOn] Chatbox: Smiles integrado a janela! Empty Re: [AddOn] Chatbox: Smiles integrado a janela!

Mensagem por JScript em 15.05.15 14:44

Ok, eu irei corrigir essa falha do 'Fechar Janela' e será ocultado dessa forma!

Nota: Esse código é a base do mesmo código usado no editor de mensagens do chat, então eu farei as alterações em paralelo!

JS
JScript

JScript
Membro do Fórum

Masculino
Inscrito dia : 15/03/2013
Mensagens : 1449
Pontos Ativos : 1901

http://jscript.forumeiros.com/

[AddOn] Chatbox: Smiles integrado a janela! Empty Re: [AddOn] Chatbox: Smiles integrado a janela!

Mensagem por TheDarkPlay em 01.11.15 17:09

No meu fórum funcionou perfeitamente Muito feliz
TheDarkPlay

TheDarkPlay
Nível 9

Masculino
Inscrito dia : 09/07/2015
Mensagens : 165
Pontos Ativos : 279

http://typegames.forumeiros.com/

[AddOn] Chatbox: Smiles integrado a janela! Empty Re: [AddOn] Chatbox: Smiles integrado a janela!

Mensagem por Pedxz em 04.11.19 23:09

04.11.2019

Código atualizado por mim. Alterações do funcionalmente dos fóruns Forumeiros.


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Pedxz Moderadeiro
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 3256
Pontos Ativos : 3913

https://power-pixel.net

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum