Com este tutorial poderás inovar o chatbox do teu fórum, adicionado ele na barra de ferramentas do fórum.
Chatbox na barra de ferramentas
TUTORIAIS, DICAS E ASTÚCIAS |
Ativar a barra de ferramentas Antes de mais nada, precisamos ativar a Barra de ferramentas para que o efeito seja sobre posto sobre ela:
Painel de Controle Módulos Barra de ferramentas Configuração |
| Ativar barra de ferramentasCorrespondente a ativação da barra de ferramentas em teu fórum. |
| Fixar barra de ferramentas É destinada a escolher se haverá scrolling ao rolar a pagina e a barra de ferramentar mover juntamente com a página. |
| Cor Cor da barra de ferramentas, se refere a ela toda. |
| Cor do texto A cor do texto que ficará na barra de ferramentas. |
Instalação do código JavascriptAs páginas javascript ativas em seu fórum possibilita inserir scripts e jQuery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.
Painel de Controle Módulos HTML e Javascript Gestão dos códigos Javascript Criar um novo javascript |
| Habilitar o gerenciamento dos códigos Javascript - Permite ativar os scripts personalizados criados pelo administrador no fórum. Este recurso não tem qualquer impacto nos scripts nativos do fórum. |
| Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum. |
| Investimento - Define o local em específico que este script será executado. Você pode investir o script para vários locais no fórum (Todas as páginas) ou pode definir para certos locais disponíveis na tela de investimento. Neste caso, estaremos investindo em todas às páginas. |
| Código Javascript - Espaço destinado a receber o script que será ativado pelo administrador. Antes de aplicar o script ao fórum, é importante revisá-lo para ter certeza de seu funcionamento. | Código:
- Código:
$(function(){$(function(){ var config = { width : '700px', height : '350px', mod_icon : 'default', msgnotif : true, timestamp : true, connection_logs : true }, fa_chat = cre('IFRAME'), fa_button = cre('A'), fa_members = cre('SPAN'), fa_style = cre('STYLE'), fa_right = getId('fa_right'), frame, css = '#fa_chat_button{line-height:30px;padding:0 5px;color:#FFF;cursor:pointer;} .fa_actif{background:#FFF !important;color:#000 !important;} .fa_new{background:#FF8 !important;color:#000 !important;} #fa_chat{background:#FFF;width:'+config.width+';height:'+config.height+';border:1px solid #000;border-top:none;position:absolute;top:30px;right:39px;}'; if (!fa_right || !_userdata.session_logged_in) return; // set stylesheet fa_style.type = 'text/css'; if (fa_style.styleSheet) fa_style.styleSheet.cssText = css; else fa_style.appendChild(document.createTextNode(css)); document.getElementsByTagName('HEAD')[0].appendChild(fa_style); // members attributes fa_members.id = 'fa_members'; fa_members.innerHTML = '(0)'; // fa_button attributes fa_button.innerHTML = 'Chat '; fa_button.id = 'fa_chat_button'; fa_button.className = 'rightHeaderLink'; fa_button.appendChild(fa_members); fa_right.insertBefore(fa_button,fa_right.lastChild); // fa_chat attributes fa_chat.id = 'fa_chat'; fa_chat.src = '/chatbox/index.forum'; fa_chat.style.display = 'none'; fa_right.insertBefore(fa_chat,fa_right.lastChild); fa_chat.onload = function() { if (fa_chat.contentDocument) frame = fa_chat.contentDocument; else if (fa_chat.contentWindow) frame = fa_chat.contentWindow.document; var memb_thn = getLength('chatbox_members','LI'), memb_now = memb_thn, msg_thn = getLength('chatbox','P'), msg_now = msg_thn; // set some data.. fa_members.innerHTML = '('+memb_thn+')'; // kill the interval if archives are enabled var a = frame.getElementsByTagName('A'); for (i=0; i<a.length; i++) if (/archives/.test(a[i].href)) a[i].onclick = function() { window.clearInterval(fa_chat_refresh) }; // execute code in an interval fa_chat_refresh = window.setInterval(function() { // START chat members memb_now = getLength('chatbox_members','LI'), msg_now = getLength('chatbox','P'); if (memb_now > memb_thn || memb_now < memb_thn) { memb_thn = memb_now; fa_members.innerHTML = '('+memb_now+')' } // END chat members // START chat notification if (config.msgnotif) { if (msg_now > msg_thn || msg_now < msg_thn) { if (!/fa_new/.test(fa_button.className) && chatState(/none/) && !/none/.test(frame.getElementById('chatbox_option_autorefresh').style.display)) fa_button.className += ' fa_new'; msg_thn = msg_now; } } // END chat notification // START timestamp if (!config.timestamp) { var date = frame.getElementsByTagName('SPAN'),i; for (i=0; i<date.length; i++) if (/date-and-time/.test(date[i].className) && date[i].style.display != 'none') date[i].style.display = 'none'; } // END timestamp // START connection logs if (!config.connection_logs) { var logs = frame.getElementsByTagName('SPAN'),i; for (i=0; i<logs.length; i++) if (/red/i.test(logs[i].style.color) || /green/i.test(logs[i].style.color)) if (!/none/.test(logs[i].parentNode.parentNode.style.display)) logs[i].parentNode.parentNode.style.display = 'none'; } // END connection logs // START mod icon if (config.mod_icon.toLowerCase() != 'default') { var s = frame.getElementsByTagName('STRONG'),i; for (i=0; i<s.length; i++) if (/@/.test(s[i].innerHTML) && s[i].innerHTML.length === 1 && !/msg/.test(s[i].parentNode.parentNode.className)) s[i].innerHTML = config.mod_icon; } // END mod icon },1); }; // toggle chat display fa_button.onclick = function() { if (/welcome/.test(fa_right.className)) removeClass(fa_right, /welcome/); if (/notification/.test(fa_right.className)) removeClass(fa_right, /notification/); if (chatState(/none/)) { fa_chat.style.display = 'block'; fa_button.className += ' fa_actif'; if (/fa_new/.test(fa_button.className)) removeClass(fa_button, /fa_new/); frame.getElementById('chatbox').scrollTop = 99999; } else hideChat(); }; // hide chat when toolbar options clicked getId('fa_welcome').onclick = function() { hideChat() }; getId('fa_notifications').onclick = function() { hideChat() }; getId('fa_hide').onclick = function() { hideChat() }; // chatbox functions function hideChat() { if (chatState(/block/)) fa_chat.style.display = 'none'; removeClass(fa_button, /fa_actif/) }; function chatState(reg) { return reg.test(fa_chat.style.display) }; function getLength(id, tag) { return frame.getElementById(id).getElementsByTagName(tag).length }; // basic functions function getId(id) { return document.getElementById(id) }; function cre(el) { return document.createElement(el) }; function removeClass(el, reg) { el.className = el.className.replace(reg,''); }; })}); Após a instalação, o código já estará a resultar.
Resultado do tutorial
|