Olá, pessoal. Este é um tutorial bem básico que estou criando para quem tiver interesse em desenvolver pequenos plugins para o Chatbox. Basicamente: se você tiver interesse em criar alguma funcionalidade, alterar o design ou cores, ou manipular mensagens (codificar/decodificar texto, mostrar apenas mensagens de um usuário específico, etc), pode programar um pequeno script e melhorar sua experiência.
Não é algo oficial, seria algo mais parecido com uma brincadeira, eu diria. Você precisará ter um conhecimento mínimo com Javascript (ou pelo menos em alguma linguagem de programação, não é nada tão complexo assim) e usar o "Inspecionar Elemento" no seu navegador.
É, eu sei que isso não tem lá muita utilidade para a maioria das pessoas, mas achei válido deixar pelo menos uma explicação aqui. Já bolei muitos scripts durante esse tempo (alguns úteis, outros não muito úteis, e outros apenas pela zoeira) e gostaria de tentar deixar aqui pelo menos um ensinamento básico para quem acabar se interessando. Pessoalmente, acho que é bacana saber que você pode controlar e personalizar não só o chat, mas também o próprio fórum, com cores e designs que você goste. Com um pouco de criatividade, dá para fazer coisas bem legais.
Introdução
Então... o Chatbox que todos nós vemos nada mais é do que um HTML montado com uma certa estrutura. As mensagens são contidas em elementos <li>, boa parte dos dados que vemos na mensagem (como o nome do usuário, a cor do nome, etc) podem ser obtidos e alterados tranquilamente. O problema é que eles estão bagunçados, com um monte de elementos <div> e <a> no caminho. Sendo assim, precisamos "peneirar" o HTML e tirar o que queremos de lá, isso inclui tanto os dados da mensagem como também os elementos HTML mais relevantes.
Entra então o Chatbox Script Loader, um script presente na página do Chatbox que facilita a obtenção de tudo isso e permite a inserção de novos scripts com uma função insertCustomScript(). Neste tutorial, irei apresentá-lo e demonstrar com um exemplo o que dá para ser feito com ele. Nada tão aprofundado, no entanto (se bem que o Script Loader é tão simples que mesmo este tutorial já deve até ser o suficiente).
Iniciando
Vamos começar com um script "vazio"...
Código: Selecionar todos
/**
* Script vazio.
*/
insertCustomScript("script-vazio", function(message, index, raw) {
// ...
});
Parâmetro "message"
Um objeto contendo dados "peneirados" relevantes (não todos) de cada elemento <li> que for percorrido, e suas propriedades são:
- nick: Nome do autor da mensagem.
- datetime: Data de envio da mensagem.
- photo: Avatar de perfil do autor da mensagem.
- content: Conteúdo da mensagem. Este, porém, é o conteúdo já "processado". Pode-se obter o conteúdo não-formatado usando raw.dataset.mchatMessage.
- html: Elementos HTML que compõem toda a estrutura da mensagem.
- rootLi
- photoDiv
- photoA
- photoImg
- mbodyDiv
- mbodyHeader
- mbodyHeaderA
- mbodyHeaderSpan
- mbodyContent
Parâmetro "index"
O Script Loader lê todas as mensagens do Chatbox em sequência. Basicamente, este valor é o índice da mensagem atual.
Parâmetro "raw"
É o próprio elemento HTML da mensagem. Você também pode obtê-lo usando message.html.rootLi.
Script de exemplo: marcar mensagens de um usuário em específico
Como exemplo, vamos fazer um script bem simples: buscaremos pelas mensagens de um usuário em especial e trocaremos a cor delas para que fiquem em destaque. Nada demais, certo?
Código: Selecionar todos
/**
* Script de exemplo. Insira-o via Inspecionar Elemento.
*
* @author MrRafael
* @profile http://tgmbr.redscreensoft.com/memberlist.php?mode=viewprofile&u=1397
*/
insertCustomScript("highlight-teste", function(message, index, raw) {
// Como demonstração, buscaremos pelo nome de um usuário e suas
// mensagens deverão aparecer para nós com uma cor de destaque. Usamos
// o "message" por este objeto já ter boa parte dos dados dos elementos
// <li> filtrados e organizados. Com isso, fica algo tão fácil quanto
// simplesmente perguntar se o nickname é o de quem estamos querendo:
if(message.nick == "MrRafael") {
// Copiamos o atributo "style" atual do elemento <li> e criamos uma
// outra variável contendo a propriedade CSS que queremos juntar.
// Está organizado assim para que o exemplo seja fácil de ser
// acompanhado:
var rawAttr = raw.getAttribute("style") || "";
var liColor = "background-color: #98e3e6;";
// Feito isso, juntamos o "style":
raw.setAttribute("style", rawAttr + liColor);
}
}
});
Código: Selecionar todos
/**
* Script de exemplo. Insira-o via Inspecionar Elemento.
*
* @author MrRafael
* @profile http://tgmbr.redscreensoft.com/memberlist.php?mode=viewprofile&u=1397
*/
insertCustomScript("highlight-teste", function(message, index, raw) {
if(message.nick == "MrRafael") {
var rawAttr = raw.getAttribute("style") || "";
var liColor = "background-color: #98e3e6;";
raw.setAttribute("style", rawAttr + liColor);
}
});
Código: Selecionar todos
/**
* Script de exemplo. Insira-o via Inspecionar Elemento.
*
* @author MrRafael
* @profile http://tgmbr.redscreensoft.com/memberlist.php?mode=viewprofile&u=1397
*/
insertCustomScript("highlight-teste", function(message, index, raw) {
// Um pequeno truque para executar uma ação apenas uma única vez para cada
// mensagem. É requisitado no "raw" porque ele é o próprio elemento <li>
// percorrido. A ideia é que, se a propriedade "read" não existir (e ela
// nunca vai existir na primeira vez), a ação é executada e depois ela é
// criada, com valor "true".
if(raw.read != true) {
// Como demonstração, buscaremos pelo nome de um usuário e suas
// mensagens deverão aparecer para nós com uma cor de destaque. Usamos
// o "message" por este objeto já ter boa parte dos dados dos elementos
// <li> filtrados e organizados. Com isso, fica algo tão fácil quanto
// simplesmente perguntar se o nickname é o de quem estamos querendo:
if(message.nick == "MrRafael") {
// Copiamos o atributo "style" atual do elemento <li> e criamos uma
// outra variável contendo a propriedade CSS que queremos juntar.
// Está organizado assim para que o exemplo seja fácil de ser
// acompanhado:
var rawAttr = raw.getAttribute("style") || "";
var liColor = "background-color: #98e3e6;";
// Feito isso, juntamos o "style" e declaramos o atributo "read",
// que impedirá que este processo seja executado outra vez.
raw.setAttribute("style", rawAttr + liColor);
raw.read = true;
}
}
});
Código: Selecionar todos
/**
* Script de exemplo. Insira-o via Inspecionar Elemento.
*
* @author MrRafael
* @profile http://tgmbr.redscreensoft.com/memberlist.php?mode=viewprofile&u=1397
*/
insertCustomScript("highlight-teste", function(message, index, raw) {
if(raw.read != true) {
if(message.nick == "MrRafael") {
var rawAttr = raw.getAttribute("style") || "";
var liColor = "background-color: #98e3e6;";
raw.setAttribute("style", rawAttr + liColor);
raw.read = true;
}
}
});
Testando o script via "Inspecionar Elemento"
Abra a página do Chatbox e clique com o botão direito do mouse nela. Escolha a opção "Inspecionar elemento...".
![Imagem](http://imgserv.com/images/2016/09/08/oyqDj.png)
Você deverá ver agora do lado direito ou embaixo da página uma tela contendo várias informações. Procure no topo dela pela opção "console" e clique.
![Imagem](http://imgserv.com/images/2016/09/08/U690ylx.jpg)
A partir daí, não há mais muito a ser feito. Apenas copie o script, cole na caixa de comando (a que está mais abaixo) e dê Enter. Se o código estiver limpo (sem erros), você já deverá sentir os efeitos do script. No caso do exemplo, programei para que qualquer mensagem minha no Chatbox tivesse uma cor diferente das demais. Eis o resultado:
![Imagem](http://imgserv.com/images/2016/09/08/wcIBjDqSM.png)
Feito isso, feche o "Inspecionar Elemento" (deve ter um X num dos lados dele).
A mudança, porém, não é permanente. Ao atualizar a página, o script não terá mais efeito. Entenda também que este código é client-side, ou seja, somente você verá os efeitos (para que outra pessoa também os veja, é necessário que você passe o script para ela, e ela deverá fazer esse mesmo procedimento).
Ah, e tem uma coisa: nunca executem um script se não confiarem no usuário ou se o código possuir alguma parte que você considere "esquisita"! Preferencialmente, distribuam seus scripts de forma organizada e comentada (para ganhar confiança) e busquem dar uma olhada neles antes de rodá-los (mesmo que você não entenda de programação, faça isso... não custa nada garantir). Isso foi algo que sempre levei em consideração quando fazia os meus, justamente para que não houvessem complicações.
![:detetive:](./images/smilies/nyu/757120.gif)
Fim
Bom... é isso. Eu sei que o exemplo não é tão complexo ou útil assim, mas fiquem à vontade para tentar criar algo para vocês. Já havia feito várias coisas usando isso, começando por reimplementações de algumas funcionalidades do antigo Chatbox (comando "/me", "/clear", etc), alteração de cores do nome, jogos (SIM, inacreditavelmente eu já consegui fazer até jogos usando isso
![Lulz :rsrs:](./images/smilies/nyu/icon_lol.gif)
![Emoji :u:](./images/smilies/nyan/ohitotally.gif)
o/