Com este tutorial será possível adicionar abas ao chat do Forumeiros.
Abas no chat
TUTORIAIS, DICAS E ASTÚCIAS |
Instalação do javascript As 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 das páginas Javascript Criar um novo javascript |
(clique na imagem para aumentar) | Título Correspondente ao nome da página JavaScript/jQuery que será criada. |
| Localização São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas. |
| Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery. |
| Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum. |
Em seguida, basta adicionar este código:
- Código:
/*globals jQuery, _userdata*/ /** * Adds tabs to the chat in which people can choose to talk separately. * * @author Kyo Panda * @see <a href="http://ajuda.forumeiros.com">Fórum dos Fóruns</a> * @license MIT */ FA = window.FA || {}; FA.Chatbox = FA.Chatbox || {}; FA.Chatbox.Tabs = (function($, config, i18n, style) { /** * Object initialization */ function Tabs() { /** * Language variable */ this.lang = {}; /** * Regex for translating tab tags in messages */ this.regex = new RegExp('\\[(' + $.map(config.tabs, function(tab) { return tab.label; }).join('|') + ')\\]'); /** * Tabs initialization */ $.each(config.tabs, function() { /** * Regex for removing the tags on messages */ this.regex = new RegExp('\\[' + this.label + '\\](\s?)', 'gi'); /** * Last message tab, for new messages notification */ this.lastMessage = 0; }); /** * Override chatbox */ this.overrideChatbox(); }; /** * Translation function */ Tabs.prototype.t = function(text) { return this.lang[text] ? this.lang[text] : text; }; /** * Initialization function */ Tabs.prototype.init = function() { /** * User language definition */ this.lang = window._userdata && i18n[_userdata.user_lang] ? i18n[_userdata.user_lang] : {} ; /** * Tabs creation */ this.build(); /** * Override chatbox refresh */ this.overrideChatboxRefresh(); /** * Override chatbox send */ this.overrideChatboxSend(); /** * Initial refresh */ this.refresh(); }; /** * Refresh data */ Tabs.prototype.refresh = function() { if (!this.source) { return this.context.chatbox.refresh(this.context.chatbox); } return this.context.chatbox.refresh(this.source); }; /** * Tabs creation */ Tabs.prototype.build = function() { var self = this; /** * Style creation */ $('head', this.context.document) .append($('<style>', { text: style })) ; /** * Parent HTML creation */ this.$tabs = $('<ul>', { id: 'chatbox_tabs' }) /** * Tab change function */ .on('click', 'li', function() { self.change($(this)); }) .appendTo($('#chatbox_header', this.context.document)) ; /** * Tabs HTML creation */ $.each(config.tabs, function(index, item) { /** * Don't create hidden tabs */ if (item.hidden) { return; } /** * Tab creation */ var $elem = $('<li>', { 'text': self.t(item.label), 'data-index': index, }); /** * Make tab active */ if (item.active) { self.active = item; $elem.addClass('active'); } /** * Hide properties of "all" tab */ if (item.all) { $elem.addClass('all'); } self.$tabs.append($elem); }); }; /** * Tab change function */ Tabs.prototype.change = function($elem) { /** * Set the active tab */ this.active = config.tabs[~~$elem.data('index')]; /** * Display the active tab */ this.$tabs.children('.active').removeClass('active'); $elem.addClass('active').removeClass('new-message'); this.refresh(); }; /** * Notification */ Tabs.prototype.notify = function(message) { var date = new Date(); this.source.messages.push({ userId: -10, action: 'msg', msgColor: 'green', date: date.toLocaleDateString(), datetime: date.toLocaleTimeString(), time: date.getTime(), msg: (this.active.all ? '' : '[' + this.active.label + '] ') + message.replace(/^\/sm\s/i, '') , }); }; /** * Mark tab with new messages */ Tabs.prototype.setNewMessageStatus = function(tab) { var self = this; this.$tabs.children().each(function() { var $this = $(this); var text = $this.text(); if ( tab.label === text || self.t(tab.label) === text ) { $this.addClass('new-message'); return false; } }); }; /** * Chatbox override */ Tabs.prototype.overrideChatbox = function() { var self = this; var insertChatBoxNew = window.insertChatBoxNew; window.insertChatBox = window.insertChatBoxNew = function() { insertChatBoxNew.apply(this, arguments); var chatbox = $('#frame_chatbox').get(0); if (chatbox.readyState === 'complete') { self.context = chatbox.contentWindow; return self.init(); } var onload = chatbox.onload; chatbox.onload = function(event) { if (onload) { onload.apply(this, arguments); } self.context = event.target.contentWindow; self.init(); }; }; }; /** * Override chatbox refresh */ Tabs.prototype.overrideChatboxRefresh = function() { var self = this; var refresh = this.context.Chatbox.prototype.refresh; this.context.Chatbox.prototype.refresh = function(data) { /** * Return if no new messages */ if (!data || !data.messages) { return refresh.call(this, data); } /** * Store the source data */ self.source = JSON.parse(JSON.stringify(data)); /** * Remove hidden messages */ data.messages = $.grep(data.messages, function(message) { return !config.hidden[message.action]; }); /** * Capture new messages from other tabs */ var hasNewMessages = []; var notifyNewMessages = true; $.each(data.messages, function() { var message = this; $.each(config.tabs, function() { if (message.msg.indexOf('[' + this.label + ']') === -1) { return; } if (this.lastMessage < message.time) { if (this.lastMessage === 0) { notifyNewMessages = false; } if (notifyNewMessages) { hasNewMessages.push(this); } this.lastMessage = message.time; } }); }); /** * Display the all tab */ if (self.active.all) { $.each(data.messages, function(index, message) { message.msg = message.msg.replace(self.regex, function(text, match) { return '[' + self.t(match) + ']'; }); }); return refresh.call(this, data); } /** * Display the tab messages */ data.messages = $.grep(data.messages, function(message) { if (message.action !== 'msg') { return true; } if (message.msg.indexOf('[' + self.active.label + ']') !== -1) { /** * Remove tag from active and translate others */ message.msg = message.msg .replace(self.active.regex, '$1') .replace(self.regex, function(text, match) { return '[' + self.t(match) + ']'; }) ; self.active.lastMessage = message.time; return true; } return false; }); /** * Notify new messages from other tabs */ $.each($.unique(hasNewMessages), function() { if (this.label === self.active.label) { return; } self.setNewMessageStatus(this); }); refresh.call(this, data); }; }; /** * Override chatbox send */ Tabs.prototype.overrideChatboxSend = function() { var self = this; var send = this.context.Chatbox.prototype.send; this.context.Chatbox.prototype.send = function() { /** * Store the send input */ if (!self.$message) { self.$message = $('#message', self.context.document); } var value = self.$message.val(); /** * Change tab */ if (value.indexOf('/ct ') === 0) { value = $.trim(value.replace(/^\/ct\s/i, '')); var tabFound = false; $.each(config.tabs, function(index) { if ( this.label.toLowerCase() === value.toLowerCase() || self.t(this.label).toLowerCase() === value.toLowerCase() ) { tabFound = true; var $elem = self.$tabs .children('[data-index="' + index + '"]') ; if ($elem.length) { self.change($elem); return false; } self.$tabs.children('.active').removeClass('active'); self.active = this; self.refresh(); return false; } }); if (!tabFound) { self.notify(self.t('The tab "%s" doesn\'t exists.').replace('%s', value)); } return self.refresh(); } /** * Notification command */ if (value.indexOf('/sm ') === 0) { self.notify(value); return self.refresh(); } /** * Add the tab tag to the input */ if (!self.active.all && value.indexOf('/') !== 0) { value = '[' + self.active.label + '] ' + value; } self.$message.val(value); send.apply(this, arguments); }; }; return new Tabs(); } (jQuery, /** * Configuration */ { /** * Tabs configuration * label : the tab label * all : if the tab should show all the messages * active : if the tab is active when first opening the chat * hidden : if the tab is hidden */ tabs: [{ label: 'All', all: true, }, { label: 'General', active: true, }, { label: 'Animes', }, { label: 'Games', }, { label: 'Illuminati', hidden: true, }], /** * Hidden system messages * connect : hide connection messages * disconnect : hide disconnect messages * timeout : hide timeout messages */ hidden: { connect: true, disconnect: true, timeout: true, }, }, /** * Internationalization settings */ { /** * Portuguese */ pt: { 'All': 'Todos', 'General': 'Geral', 'Animes': 'Animes', 'Games': 'Jogos', 'Illuminati': 'Illuminati', 'The tab "%s" doesn\'t exists.': 'A aba "%s" não existe.', }, }, /** * Style */ [ '#chatbox_header {', ' position: relative;', '}', '', '#chatbox_tabs {', ' position: absolute;', ' bottom: 0;', ' left: 180px;', ' list-style: none;', ' padding: 0 0 0 10px;', ' margin: 0;', ' overflow: hidden;', '}', '', '#chatbox_tabs li {', ' float: left;', ' height: 24px;', ' line-height: 24px;', ' margin-right: 10px;', ' padding: 0 5px 0 20px;', ' border: 1px #fff solid;', ' border-radius: 3px 3px 0 0;', ' cursor: pointer;', ' font-family: Arial, sans-serif;', ' color: #fff;', ' border-bottom: none;', ' position: relative;', '}', '', '#chatbox_tabs li:before {', ' content: " ";', ' position: absolute;', ' top: 50%;', ' left: 5px;', ' transform: translate(0, -50%);', ' background-color: #999;', ' width: 10px;', ' height: 10px;', ' border-radius: 50%;', '}', '', '#chatbox_tabs li.new-message:before {', ' background-color: green;', '}', '', '#chatbox_tabs li.all {', ' padding-left: 5px;', '}', '#chatbox_tabs li.all:before {', ' display: none;', '}', '', '#chatbox_tabs li.active {', ' background-color: #fff;', ' color: #333;', '}', ].join('\n') ));
Configurações::
Procure pelos códigos citados abaixo dentro do script para alterar as configurações:
- Código:
/** * Settings for the 'all' tab */ all: { enable: true, // If it is active or not label: 'All', // Its label },
Define se exibirá ou não a aba "Todos".
- enable: Defina como true para ativar e false para desativar.
- label: O nome da aba "Todos".
- Código:
/** * List of tabs labels */ tabs: [ 'General', 'Games', 'Animes', ],
Define as abas do chat. Cada nome de aba precisa estar entre apóstrofos (') e seguido de vírgula (,).
- Código:
/** * The default active tab */ default: 'General',
Define qual a aba que está ativa quando o usuário abre o chat.
- Código:
/** * Choose the types of messages you want to disable. */ hide: { connect: true, // Member connect disconnect: true, // Member disconnect timeout: true, // Member disconnect by timeout },
Define tipos de mensagens que serão ocultados no chat. Para cada item, defina true para ocultar e false para mostrar.
- connect: Mensagens de conexão de usuário.
- disconnect: Mensagens de desconexão de usuário.
- timeout: Mensagens de desconexão por tempo de inatividade.
- Código:
/** * Internationalization settings */ var i18n = { /** * English */ en: { 'All': 'All', 'General': 'General', 'Games': 'Games', 'Animes': 'Animes', }, /** * Spanish */ es: { 'All': 'Todos', 'General': 'General', 'Games': 'Juegos', 'Animes': 'Animes', }, /** * Portuguese */ pt: { 'All': 'Todos', 'General': 'Geral', 'Games': 'Jogos', 'Animes': 'Animes', }, };
Permite que as abas do seu chat sejam traduzidas em diversos idiomas. Mais idiomas podem ser adicionados à lista. O script utilizará as configurações de idioma definidas pelo usuário no seu perfil.
Logo após a aplicação, será possível visualizar o resultado.
Resultado do tutorial:
|