Modifying Chatbox

Forum Type: phpBB2
Forum URL: http://iopw.forumotion.com/


Okay. So I'm trying to make some modifications to the standard FM chatbox - primarily, making it accessible on every page of my forum and adding audio notifications, and allowing for automatic login on page visit. Anyway, I've found codes for all those things elsewhere on these help forums but am having trouble implementing them, and I'm not quite sure what I'm doing wrong.


This first JavaScript works, and relegates the chatbox to a pop-up down in the lower-right corner.

Code:

$(function() {
  if (_userdata.session_logged_in == 0) return;
  var chat = document.createElement('IFRAME'), bouton = document.createElement('DIV'), frame;
  chat.src = '/chatbox';
  chat.setAttribute('style','width:700px;height:350px;display:none;border:1px solid #666;position:fixed;bottom:40px;right:0;z-index:99999;');
  bouton.innerHTML = 'Chat (0)';
  bouton.setAttribute('style','cursor:pointer;position:fixed;bottom:0;right:0;padding:5px 10px;border:1px solid #666;background:#333;color:#FFF;z-index:99999;');
  document.body.appendChild(bouton);
  document.body.appendChild(chat);
  
  bouton.onclick = function() {
    if (/none/.test(chat.style.display)) chat.style.display = 'block';
    else chat.style.display = 'none';
  };
  chat.onload = function() {    
    if (chat.contentDocument) frame = chat.contentDocument;
    else if (chat.contentWindow) frame = chat.contentWindow.document;
    var memb_thn = frame.getElementById('chatbox_members').getElementsByTagName('LI').length, memb_now = memb_thn, a = frame.getElementsByTagName('A');
    bouton.innerHTML = 'Chat ('+memb_thn+')';
    for (i=0; i<a.length; i++) if (/archives/.test(a[i].href)) a[i].onclick = function() { window.clearInterval(_refresh) };
    _refresh = window.setInterval(function() {memb_now = frame.getElementById('chatbox_members').getElementsByTagName('LI').length;if (memb_now > memb_thn || memb_now < memb_thn) {memb_thn = memb_now;bouton.innerHTML = 'Chat ('+memb_now+')'}},1);
  };
});

(found here)




I can't get either of these next two to work, however. The first adds sounds and the second allows for automatic login.

Code:

window.localStorage && $(window).load(function() {
  var chatbox_script = function() {
    var sounds = {
      'future': 'http://illiweb.com/fa/fdf/future.mp3',
      'hal': 'http://illiweb.com/fa/fdf/hal.mp3',
      'secret': 'http://illiweb.com/fa/fdf/secret.mp3',
      'zelda': 'http://illiweb.com/fa/fdf/zelda.mp3'
    };
    var default_sound = sounds['zelda'];
    var default_freq = 'new';
    var default_when = 'once';
    var default_volume = 100;

 
    if(localStorage.cb_sound && !localStorage.cb_sound.indexOf('https://dl.dropboxusercontent.com/u/181621985/')) localStorage.removeItem('cb_sound');
    var a = document.createElement('audio');
    if(!a.canPlayType) return;
    a.volume = Math.min(1, Math.max(0, localStorage.cb_volume||(default_volume/100)));
  
    var origin_send = Chatbox.prototype.send;
    Chatbox.prototype.send = function(params) {
      var m = $.trim($("#message").val());
      if(m.indexOf('/sound')&&m.indexOf('/soudn'))
        return origin_send.call(this, params);
      m = $.trim(m.substr(6)).split(/\s+/,3);
      var bad_apple = false;
      switch(m[0].toLowerCase()) {
        case "":
          if(!a.src) {
            a.src = localStorage.cb_sound||default_sound;
            a.load();
        }
          a.play();
          break;
        case "all":
        case "new":
          localStorage.cb_freq = m[0]; break;
        case "always":
        case "off":
        case "on":
        case "once":
        case "never":
          localStorage.cb_when = m[0]; break;
        case "stop":
          if(!a.paused) a.pause();
          if(!a.ended) a.currentTime = 0;
          break;
        case "pause":
          if(!a.paused) a.pause();
          break;
        case "volume":
          if(m.length>1) {
            localStorage.cb_volume = Math.min(1, Math.max(0, parseFloat(m[1].replace(',','.'))/100));
            a.volume = localStorage.cb_volume;
            break
          }
        default:
          bad_apple = true;
      };
      if(bad_apple) {
        if(m[0] in sounds) {
          m[0]= sounds[m[0]];
        }
        if(m[0]=="default") {
          m[0]=default_sound;
          localStorage.removeItem('cb_sound');
          localStorage.removeItem('cb_freq');
          localStorage.removeItem('cb_volume');
          localStorage.removeItem('cb_when');
          a.volume = Math.min(1, Math.max(0, default_volume/100));
        }
        if(/^https?:\/\/.+/.test(m[0])) {
          localStorage.cb_sound = m[0];
          a.pause();
          a.src = m[0];
          a.load();
          a.play();
        } else {
          var message = $('#message').val();
          alert('/sound [all | new]\n/sound [always | off | on | once | never]\n/sound [stop | pause]\n/sound default\n/sound volume 0-100\n/sound ['+$.map(sounds,function(_,k){return k}).join(' | ')+']\n/sound [http://* | https://*]');
          setTimeout(function(){ $("#message").val(message).select().focus(); }, 100);
          return;
        }
      }
      return $("#message").val('').focus();
    };

    $(window).on("focus", function(){ localStorage.removeItem('cb_once'); localStorage.removeItem('cb_blurred') }).on("blur", function(){ localStorage.cb_blurred=1; });

    var play_sound = function(){
      if(a.paused || a.ended) {
        a.currentTime=0;
        if(!a.src) {
          a.src = localStorage.cb_sound||default_sound;
          a.load()
        }
        a.play()
      }
    };
    var overrided = Chatbox.prototype.refresh;
    Chatbox.prototype.refresh = function(data) {
      if (data.messages && data.messages.length) {
        var lm = data.messages.slice(-1)[0];
        var last_message = lm.time+','+lm.action+','+lm.msg;
        if(this.last_message_sound != last_message) {
          var user = $.grep(data.users, function(v){return v.id==chatbox.userId});
          user = user.length ? user[0] : [{}];
          if(this.last_message_sound!==undefined) {
            var freq = (localStorage.cb_freq||default_freq);
            var when = (localStorage.cb_when||default_when);
            console.log([when, freq, localStorage.cb_blurred, localStorage.cb_once]);
            if(when != "never" && (when != "off" || localStorage.cb_blurred) && (when != "on" || !localStorage.cb_blurred) && (when != "once" || (localStorage.cb_blurred && !localStorage.cb_once))) {
              console.log([when, freq, localStorage.cb_blurred, localStorage.cb_once]);
              if(freq =="all" || (lm.userId!=chatbox.userId && user.username!=lm.username)) {
                if(when!="once" || !localStorage.cb_once) {
                  play_sound();
                  localStorage.cb_once = 1;
                }
              }
            }
          }
          this.last_message_sound = lm;
        }
      }
      overrided.call(this, data);
    };
  };
  var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox/index.forum"],iframe[src^="/chatbox/index.forum"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
});


Code:

$(window).load(function() {
  var chatbox_script = function() {
    setTimeout(function(){ $('#chatbox_option_co:visible').click() }, 1000);
  };
  var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox/index.forum"],iframe[src^="/chatbox/index.forum"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
});


(both found here)




Is there something in the first JS that would preclude the latter two from working properly? Or is there something else I'm just overlooking or not picking up on?


Any assistance or insight is greatly appreciated.

If I may advertise my own product: the AvacWeb Chat displays on every page, allows for audio notifications and automatic log-ins all at the same time and is able to be customized to your forum's needs, in both form and function.

You can find a link in the spoiler below, if you're interested.

Spoiler: