The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Chatbox Tabs

Page 2 of 2 Previous  1, 2

View previous topic View next topic Go down

Do you agree or disagree ?

92% 92% 
[ 23 ]
8% 8% 
[ 2 ]
 
Total Votes : 25

Chatbox Tabs

Post by Vanityy on January 28th 2016, 4:22 am

First topic message reminder :

I saw a suggestion similar to this where you can chat with friends on their profile. In this suggestion, I'd like to talk about adding a tab feature for chat rooms.

On default, there wild be a tab that says "Global" and next to it will be a smaller tab that has a "+" icon. This will be similar to when using a browswer where you have tabs on the window and a "+" icon to open a new tab. When hitting the "+" it will request a username, you can type the exact username or "Find a username (the feature they already have by)" and then have a chat with that person. People can limit it so only friends can request conversations and there could even be a report feature just in case.

The feature could be added at the top right above where you can see messages. Basically located under the text "Chatbox", to the right, on the area where you see text, but located at the top. Scrolling would not affect the tabs so people wouldn't need to scroll all the way to the top to see tabs or anything. This feature could also be added between the Chatbox and its bar type thing and could be above the "Online" and text part.

Example:


Last edited by Genesis on May 11th 2016, 4:36 am; edited 1 time in total
avatar
Vanityy
Helper
Helper

Male Posts : 2336
Reputation : 323
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down


Re: Chatbox Tabs

Post by Vanityy on March 16th 2016, 4:03 am

Bump!
avatar
Vanityy
Helper
Helper

Male Posts : 2336
Reputation : 323
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Re: Chatbox Tabs

Post by Vanityy on March 19th 2016, 3:12 am

Bump!
avatar
Vanityy
Helper
Helper

Male Posts : 2336
Reputation : 323
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Re: Chatbox Tabs

Post by Vanityy on March 22nd 2016, 1:06 am

Bump!
avatar
Vanityy
Helper
Helper

Male Posts : 2336
Reputation : 323
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Re: Chatbox Tabs

Post by Vanityy on March 27th 2016, 5:41 am

Bump.
avatar
Vanityy
Helper
Helper

Male Posts : 2336
Reputation : 323
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Re: Chatbox Tabs

Post by LGforum on March 28th 2016, 3:55 am

Have you seen Avacweb Chat? It's a chat box modification for Forumotion. It has tabbed chat rooms just like this and so much more!

Check it out here: http://chat.avacweb.net
avatar
LGforum
Hyperactive

Male Posts : 2262
Reputation : 260
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Re: Chatbox Tabs

Post by Guest on March 28th 2016, 4:26 am

What you suggested has already been developed by @LGforum . I've been using AWC (AvacWeb Chat) for about 3 years now and I don't want / need anything else no more. Here's a snapshot to prove my point:


Hello Samantha

Guest
Guest


Back to top Go down

Re: Chatbox Tabs

Post by Vanityy on April 9th 2016, 10:29 pm

Sorry for late reply.

I will look into it but still I still think the Chatbox could use this feature. For example, not everyone knows about this modification and it would take time to implement. If the Chatbox were to have some updates including this, I think many users on Forumotion would be glad to have this.
avatar
Vanityy
Helper
Helper

Male Posts : 2336
Reputation : 323
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Re: Chatbox Tabs

Post by Vanityy on April 18th 2016, 8:08 pm

Bump.
avatar
Vanityy
Helper
Helper

Male Posts : 2336
Reputation : 323
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Re: Chatbox Tabs

Post by Vanityy on April 21st 2016, 5:56 am

Bump.

Thanks to the anonymous voters for voting!
avatar
Vanityy
Helper
Helper

Male Posts : 2336
Reputation : 323
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Re: Chatbox Tabs

Post by Legionheart on April 25th 2016, 9:52 am

I voted a yes. This would be a great addition to the chatbox!
Thanks- @Genesis!
avatar
Legionheart
Forumember

Male Posts : 683
Reputation : 102
Language : English & Ecclesiastical Latin
Location : San Venganza

http://help.forumotion.com/forum

Back to top Go down

Re: Chatbox Tabs

Post by Vanityy on April 25th 2016, 11:44 am

Thanks for your vote!
avatar
Vanityy
Helper
Helper

Male Posts : 2336
Reputation : 323
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Re: Chatbox Tabs

Post by Draxion on April 25th 2016, 12:02 pm

Agreed! Yes.


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1856
Reputation : 232
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: Chatbox Tabs

Post by Vanityy on April 25th 2016, 12:47 pm

Thanks for your vote!
avatar
Vanityy
Helper
Helper

Male Posts : 2336
Reputation : 323
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Re: Chatbox Tabs

Post by Elementar on April 25th 2016, 12:51 pm

I like the suggestion. I'm voting yes. Could you also create more permanent rooms as well, or just temporary friend chats?
avatar
Elementar
Forum Reviewer
Forum Reviewer

Male Posts : 373
Reputation : 61
Language : English & Basic Italian

http://pokeforumunity.forumotion.com/

Back to top Go down

Re: Chatbox Tabs

Post by Vanityy on April 28th 2016, 12:09 am

The tabs would remain there unless you clicked (X) on the tab.

Thanks for yor vote!
avatar
Vanityy
Helper
Helper

Male Posts : 2336
Reputation : 323
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Re: Chatbox Tabs

Post by Vanityy on May 11th 2016, 4:37 am

Title renamed to "Chatbox Tabs" + bump.
avatar
Vanityy
Helper
Helper

Male Posts : 2336
Reputation : 323
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Re: Chatbox Tabs

Post by Ddril on August 13th 2016, 9:01 pm

It's a good idea !

I vote.

Good evening.
avatar
Ddril
New Member

Posts : 2
Reputation : 1
Language : French

http://dungeon-demon-strip.forumactif.org/

Back to top Go down

Re: Chatbox Tabs

Post by TonnyKamper on July 8th 2017, 4:18 pm

Voted yes Very Happy
avatar
TonnyKamper
Forumember

Female Posts : 160
Reputation : 11
Language : Dutch/English
Location : The Netherlands

http://test-tube.actieforum.com/

Back to top Go down

Re: Chatbox Tabs

Post by Luiz~ on July 11th 2017, 12:41 am

Hi,

@Kyo Panda, moderator of the Portuguese / Brazilian support forum made a JavaScript code that creates this effect.
Code:
/*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')
));


o/
avatar
Luiz~
New Member

Male Posts : 16
Reputation : 7
Language : PT
Location : Brazil

http://ajuda.forumeiros.com/

Back to top Go down

Page 2 of 2 Previous  1, 2

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum