[AddOn] Chatbox: Smiles integrado a janela!
+2
Daemon
JScript
6 participantes
Página 1 de 1 • Compartilhe
[AddOn] Chatbox: Smiles integrado a janela!
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:
Resultado:
Alguém teria mais ideias para acrescentar ao código?
JS
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 = [
"☎", "★", "", "♪", "✓",
"⧉", "", "𝒥𝒮", "█", "▓",
"◯", "☆", "", "✗", "ℱℳ"
],
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:
Alguém teria mais ideias para acrescentar ao código?
JS
Re: [AddOn] Chatbox: Smiles integrado a janela!
Muito bom JC!!! Nota 10 cara!
Re: [AddOn] Chatbox: Smiles integrado a janela!
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.
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.
Re: [AddOn] Chatbox: Smiles integrado a janela!
A respeito das 'abas', experimentem remover a seguinte linha:
Experimentem também trocar o seguinte loop:
Por apenas essa linha:
Em meus testes o desempenho foi muito superior, assim como simplificou mais ainda o código!
Ok pessoal, obrigado pelos feedbacks e dicas!
JS
- 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
Re: [AddOn] Chatbox: Smiles integrado a janela!
Ficou ótimo.
Mas, veja:
(Ao clicar, como o open não foi executado, ele retorna false)
Outra coisa interessante, seria: Ao clicar, fora do HTML, ele ser ocultado.
http://prntscr.com/75h63y
Mas, veja:
- Código:
http://i.imgur.com/uofZFjE.png
(Ao clicar, como o open não foi executado, ele retorna false)
Outra coisa interessante, seria: Ao clicar, fora do HTML, ele ser ocultado.
http://prntscr.com/75h63y
Re: [AddOn] Chatbox: Smiles integrado a janela!
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
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
Re: [AddOn] Chatbox: Smiles integrado a janela!
No meu fórum funcionou perfeitamente
Re: [AddOn] Chatbox: Smiles integrado a janela!
04.11.2019
Código atualizado por mim. Alterações do funcionalmente dos fóruns Forumeiros.
Código atualizado por mim. Alterações do funcionalmente dos fóruns Forumeiros.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7996
Pontos : 9259
Re: [AddOn] Chatbox: Smiles integrado a janela!
17-07-2023
Adaptado para a utilização no chatbox (investimento)
Adaptado para a utilização no chatbox (investimento)
- Código:
(function($) {
'use strict';
$(function() {
window.smile = {
Load: function() {
$.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 = [
"☎", "★", "Coração", "♪", "✓",
"⧉", "", "𝒥𝒮", "█", "▓",
"◯", "☆", "", "✗", "ℱℳ"
],
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>";
}*/
$("#chat-smiles-show").html(
htmlSmile.find("#simple-wrap, tbody:last").html()
);
}
}
});
$("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>"
);
$("body").append("<div id='chat-smiles-show' style='display: none;'></div>");
},
Show: function(event) {
var elenPos = $("#divsmilies"),
target = $("#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);
});
});
})(jQuery);
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7996
Pontos : 9259
Re: [AddOn] Chatbox: Smiles integrado a janela!
@tikky seria interessante adaptar esse código acima para utilização de twemoji!
Tópicos semelhantes
» [AddOn] Botão Imagem no Chatbox
» [Addon] Plugin /mute no chatbox
» [ADDON] Botão imagem no chatbox
» [AddOn] Sistema Anti-Flood no Chatbox
» [Resolvido]Fórum Integrado?
» [Addon] Plugin /mute no chatbox
» [ADDON] Botão imagem no chatbox
» [AddOn] Sistema Anti-Flood no Chatbox
» [Resolvido]Fórum Integrado?
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos