[TUTORIAL] Abas no chat

Instalação do javascript

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.

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')
));

Código:

      /**
       * Settings for the 'all' tab
       */
      all: {
         enable: true,      // If it is active or not
         label: 'All',      // Its label
      },

• 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',
      ],

Código:

      /**
       * The default active tab
       */
      default: 'General',

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
      },

• 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',
      },
   };