Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Board Index » Forumotion » Tutorials  »  [OLD] Tutorials & Codes »[Javascript] Insert a chatbox tab at Forumotion Toolbar

Foto

[Javascript] Insert a chatbox tab at Forumotion Toolbar

by ,


View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Shadow

Shadow
Administrator
Administrator
2015-06-08, 16:40

[Javascript] Insert a chatbox tab at Forumotion Toolbar Alerte10
Tutorial: Insert a chatbox tab at Forumotion Toolbar

Do you want to have a quick pop-up chatbox in your Forumotion toolbar at the top of the forum? This tutorial will show you how to implement such feature.

Tutorial provided by Portuguese support forum


--> Tutorials, tips and tricks <--
Insert a chatbox tab at Forumotion Toolbar



1º - Configuration
Go to Admin Panel -> Modules -> Toolbar -> Fix the toolbar: No


2º - Javascript
Placement: In all pages

Code:
[panda=js]$(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';
  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,''); };
})});


3º - Preview
[Javascript] Insert a chatbox tab at Forumotion Toolbar 8XrTY4c



© PunBB Design


[Javascript] Insert a chatbox tab at Forumotion Toolbar Act_bottom If you have any questions related to this topic create a topic with the following title:
Insert a chatbox tab at Forumotion Toolbar

Powered by PunBB
Thanks
Currently 0 users have thanked Shadow for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

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

 

About PunBB Design

PunBB Design (ex. PunBB Community) Forum is Forumotion hosted forum created 2012 as a test forum for helping out members and improving design and quality of the Forumotion forums. Over the time it became bigger and bigger in term of content, members and activity. That's why several times Forumotion offered us a free domain name for our community (www.punbb.biz). Today we want to back it's old activity and make it even better! In 2013 PunBB Design is awarded for best Forumotion forum.

General Links

Forum Resources

Forumotion Links

BtT
  • This skin is designed by Shadow for PunBB Design™.