Κώδικες για επεξεργασία του chatbox

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω

Κώδικες για επεξεργασία του chatbox

Δημοσίευση από Nemo Την / Το Πεμ Μαρ 05, 2015 3:05 pm

Κώδικες για επεξεργασία του chatbox


Αυτός ο οδηγός σας δίνει τη δυνατότητα να χρησιμοποιήσετε κώδικες για να επεξεργαστείτε το chatbox ανάλογα με τις ανάγκες σας. Θα πρέπει να προσθέσετε τους κώδικες ( Javascript ή HTML** ) ακολουθώντας τα παρακάτω βήματα.

**Πιθανά ?archives=1 στους κώδικες πρέπει να αφαιρεθούν


Ήχος Ειδοποιήσης



Ένα script για να εγκαταστήσετε έναν ήχο όταν λαμβάνετε ένα νέο μήνυμα στο chatbox:
Πίνακας Διαχείρισης ► Λειτουργικές Μονάδες ► HTML & JAVASCRIPT ► Διαχείριση κωδικών Javascript
Title: Ότι θέλετε
Placement: In all the pages
Javascript 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('/sound'))
        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){}})
});

Οι Sounds περιέχουν μία συντόμευση η οποία αντιστοιχεία στην εντολή: URL του φακέλου του ήχου. Βοηθά στην εύκολη αλλαγή του ήχου.

Έπειτα, υπάρχουν κάποιες μεταβλητές που είναι προεπιλεγμένες.


  • default_sound: Περιέχει το URL του φακέλου του ήχου
  • default_freq: Ρυθμίζει για ποια μηνύματα θα δεχόμαστε μία ειδοποίηση. Διάφορες μεταβλητές υπάρχουν:

    - “all”: Θα υπάρχει ένας ήχος για όλα τα μηνύματα ( ακόμα και για τα δικά σας )
    - “new”: Θα υπάρει ένας ήχος για τα μηνύματα από τα άλλα μέλη

  • default_when: Ρυθμίζει το κάθε πότε θα εμφανίζονται οι ειδοποιήσεις. Διάφορες μεταβλητές υπάρχουν:

    - “always”: Θα υπάρχει ένας ήχος όταν είστε συνδεδεμένοι ή αποσυνδεδεμένοι από το chatbox.
    - “on”: Θα υπάρχει ένας ήχος μόνο όταν θα είστε συνδεδεμένοι στο chatbox.
    - “off”: Θα υπάρχει ένας ήχος μόνο όταν είστε αποσυνδεδεμένοι από το chatbox.
    -“once”: Θα υπάρχει ένας ήχος μόνο από μία ειδοποιήση αφότου συνδεθήκατε τελευταία.


Υπάρχουν επίσης επιπρόσθετες εντολές:


  • /sound : Ξεκινά τον ήχο
  • /sound https?: //* : Αλλάζει τον ήχο για ένα μοναδικό URL
  • /sound volume 0-100 : Αλλάζει την ένταση του ήχου ( 0 = 0% και 100 = 100% )
  • /sound default : Επαναφέρει τις προεπιλεγμένες ρυθμίσεις
  • /sound [pause | stop] : Διακόπτει ή σταματά τον ήχο που είναι σε εξέλιξη


Εικονική Ειδοποίηση





Αυτό το script σας επιτρέπει να αλλάξετε την εικόνα και το κείμενο του παραθύρου του browser.
Πίνακας Διαχείρισης ► Λειτουργικές Μονάδες ► HTML & JAVASCRIPT ► Διαχείριση κωδικών Javascript
Title: Ότι θέλετε
Placement: In all the pages
Javascript Code: Εποκολλήστε τον εξής κώδικα:
Κώδικας:
window.localStorage && $(window).load(function() {
  var chatbox_script = function() {
    var t_icon = window.top.$.find('link[rel="shortcut icon"]')[0];
    var t_doc = window.top.document;
    var title = t_doc.title;
    var icon = t_icon.getAttribute('href');

    var rep_title = '!! New message !! '+title;
    var rep_icon = 'http://s301826463.onlinehome.fr/f/al.ico';

    $(window).on("focus", function(){ localStorage.cb_blurred='' }).on("blur", function(){ localStorage.cb_blurred=1; });
    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 != last_message) {
          var user = $.grep(data.users, function(v){return v.id==chatbox.userId});
          user = user.length ? user[0] : [{}];
          if(this.last_message!==undefined) {
            if(lm.userId!=chatbox.userId && user.username!=lm.username) {
              if(localStorage.cb_blurred) (function(){
                var blink = function(){
                  if(title == t_doc.title) {
                    if(!localStorage.cb_blurred) return;
                    var new_title = rep_title;
                    var new_icon = rep_icon;
                  } else {
                    var new_title = title;
                    var new_icon = icon;
                  }
                  t_doc.title = new_title;
                  var new_t_icon = t_icon.cloneNode(true);
                  new_t_icon.setAttribute('href', new_icon);
                  var t_icon_parent = t_icon.parentNode;
                  t_icon_parent.removeChild(t_icon);
                  t_icon_parent.appendChild(new_t_icon);
                  t_icon = new_t_icon;
                  setTimeout(blink, 500);
                };
                blink();
              })();
            } else {
              localStorage.cb_blurred='';
            }
          }
          this.last_message = 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){}})
});

Αλλαγή Τίτλου Chatbox





Αυτό το script σας δίνει τη δυνατότητα να αλλάξετε τον τίτλο του chatbox.
Πίνακας Διαχείρισης ► Λειτουργικές Μονάδες ► HTML & JAVASCRIPT ► Διαχείριση κωδικών Javascript
Title: Ότι θέλετε
Placement: In all the pages
Javascript Code: Εποκολλήστε τον εξής κώδικα:
Κώδικας:
$(window).load(function() {
  var chatbox_script = function() {
    $("a.chat-title").text("In Da Place");
  };

  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){}})
});

Αν αλλάξετε το “In Da Place”, αλλάζει και ο τίτλος του chatbox.


Διαγράψτε τις γραμμές "... εισήλθε στη συζήτηση & ... αποσυνδέθηκε"





Αυτό το script σας επιτρέπει να διαγράψετε τις γραμμές "εισήλθε" και "αποσυνδέθηκε".
Πίνακας Διαχείρισης ► Λειτουργικές Μονάδες ► HTML & JAVASCRIPT ► Διαχείριση κωδικών Javascript
Title: Ότι θέλετε
Placement: In all the pages
Javascript Code: Εποκολλήστε τον εξής κώδικα:
Κώδικας:
$(window).load(function() {
  var chatbox_script = function() {
    $('#chatbox > p > .msg > span').filter('[style="color:green"],[style="color:red"]').closest('p').remove();
    var overrided = Chatbox.prototype.refresh;
    Chatbox.prototype.refresh = function(data) {
      if (data.messages && data.messages.length) {
        data.messages = $.grep(data.messages, function(v) {
          return v.userId != -10 || $.inArray(v.msgColor, ["red", "green"]) == -1;
        });
      }
      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){}})
});

Στυλ avatars του chatbox



Αλλάξτε το μέγεθος των avatars μέσω του CSS κώδικα:
Πίνακας Διαχείρισης ► Εμφάνιση ► Εικόνες και χρώματα ► Χρώματα ► CSS Stylesheet
Κώδικας:
#chatbox .cb-avatar { background: transparent !important; box-shadow: none !important; }
body #chatbox .cb-avatar { border: none !important; /*retirer la bordure*/ }

Avatars με κυκλικό σχήμα:
Πίνακας Διαχείρισης ► Εμφάνιση ► Εικόνες και χρώματα ► Χρώματα ► CSS Stylesheet
Κώδικας:
#chatbox .cb-avatar > img{ border-radius: 50% !important; }

Το κείμενο στην ίδια γραμμή με το username:
Πίνακας Διαχείρισης ► Εμφάνιση ► Εικόνες και χρώματα ► Χρώματα ► CSS Stylesheet
Κώδικας:
#chatbox .user-msg .user, #chatbox .user-msg .msg {
    display: inline;
}



Προσθήκη Avatars όπου δεν υπάρχουν





Αυτό το script σας επιτρέπει να προσθέσετε avatars στη λίστα μελών και στα μηνύματα :
Πίνακας Διαχείρισης ► Λειτουργικές Μονάδες ► HTML & JAVASCRIPT ► Διαχείριση κωδικών Javascript
Title: Ότι θέλετε
Placement: In all the pages
Javascript Code: Εποκολλήστε τον εξής κώδικα:
Κώδικας:
$(window).load(function() {
  var chatbox_script = function() {
 
    var default_avatar = 'http://illiweb.com/fa/invision/pp-blank-thumb-38px.png';
    var ava_in_member_list = true;
    var ava_in_indirect_message = true;
 
    var avatars = {};
    var d;
    var set_avatar = function(pseudo, elem_to_prepend){
      var avatar = avatars[pseudo];
      var el = $(this);
      elem_to_prepend.find('.cb-avatar').remove();
      elem_to_prepend.prepend('<span class="cb-avatar"><img src="'+(avatar||default_avatar)+'"></span>&nbsp;');
      if(!avatar) {
        if(!d) {
          d = $.get('/memberlist?change_version=prosilver').done(function(c){
            $('.avatar-mini img', c).each(function(){
              avatars[$(this).parent().text().substr(1)]= $(this).attr('src')
            })
          })
        }
        d.done(function(){
          var avatar = avatars[pseudo];
          elem_to_prepend.find('.cb-avatar img').attr('src', avatar||default_avatar)
        })
      }
    };
    var overrided = Chatbox.prototype.refresh;
    Chatbox.prototype.refresh = function(data) {
      var next_scroll = false;
      if (data.messages && data.messages.length) {
        $.each(data.messages, function(_,m){
          if(ava_in_indirect_message)
            m.msgColor+='\' data-username=\''+$('<div/>').text(m.username).html();
          if(m.user && m.user.avatar)
            avatars[m.username] = m.user.avatar
        });
        next_scroll = !this.messages || this.messages.length != data.messages.length;
      }
      overrided.call(this, data);
      d = null;
      ava_in_member_list && $('#chatbox_members .chatbox-username').each(function(){
        set_avatar($(this).text(), $(this).parent());
      });
      ava_in_indirect_message && $('#chatbox p > .msg').wrap('<span class="user-msg indirect-user-msg" />').each(function(){
        set_avatar($(this).children().attr('data-username'), $(this).parent());
      });
      if(next_scroll) $("#chatbox")[0].scrollTop = $("#chatbox").prop('scrollHeight') * 2
    };
  };
  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){}})
});

Για να περιορίσετε το μέγεθος του avatar στη λίστα μελών, μπορείτε να προσθέσετε τον παρακάτω CSS κώδικα:
Πίνακας Διαχείρισης ► Εμφάνιση ► Εικόνες και χρώματα ► Χρώματα ► CSS Stylesheet
Κώδικας:
#chatbox_members .cb-avatar > img {
  height:30px;width:30px;
  vertical-align: middle;
}

Για να μην υπάρχουν τα avatars στη λίστα μελών, μπορείτε να αντικαταστήσετε τη μεταβλητή true του ava_in_member_list με false.

Για να μην υπάρχουν τα avatars στα μηνύματα, μπορείτε να αντικαταστήσετε τη μεταβλητή true του ava_in_indirect_message με false.

Άνοιγμα αρχείου σε νέο tab



Κλικάροντας στο Αρχείο, ανοίγει ένα νέο tab αντί να γίνεται ανανέωση του ίδιου παραθύρου. Είναι πολύ χρήσιμο ειδικά όταν χρησιμοποιούνται άλλα scripts ( που δεν λειτουργούν έπειτα από το κλικ στο Αρχείο ).
Πίνακας Διαχείρισης ► Λειτουργικές Μονάδες ► HTML & JAVASCRIPT ► Διαχείριση κωδικών Javascript
Title: Ότι θέλετε
Placement: In all the pages
Javascript Code: Εποκολλήστε τον εξής κώδικα:
Κώδικας:
$(window).load(function() {
  var chatbox_script = function() {
    $("#chatbox_option_with_archives a").attr('target', 'ChatBox');
  };
  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){}})
});


Προσθήκη μηνύματος στη σύνδεση





Αυτό το script προσθέτει ένα μήνυμα σύνδεσης στο chatbox.
Πίνακας Διαχείρισης ► Λειτουργικές Μονάδες ► HTML & JAVASCRIPT ► Διαχείριση κωδικών Javascript
Title: Ότι θέλετε
Placement: In all the pages
Javascript Code: Εποκολλήστε τον εξής κώδικα:
Κώδικας:
$(window).load(function() {
  var chatbox_script = function() {
    $('#chatbox_option_co').click(function(){
      $('#chatbox').addClass('recently-connected');
      setTimeout(function(){ $('#chatbox').removeClass('recently-connected') }, 60000)
    })
  };
  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){}})
});

Στον κώδικα μπορείτε να αλλάξετε το 60000 ( = 60 δευτερόλεπτα ) και το μήνυμα που εμφανίζεται με τον παρακάτω CSS κώδικα:
Πίνακας Διαχείρισης ► Εμφάνιση ► Εικόνες και χρώματα ► Χρώματα ► CSS Stylesheet
Κώδικας:
#chatbox.recently-connected:after {
  font-family: "trebuchet ms", serif;
  font-size: 1.5em; line-height:1.5em; font-weight: bold; color: #8BC34A;
  box-shadow:0 0 5px #AED581; display:block; background: #F1F8E9; margin:auto;
  width:80%; margin:1.5% auto; padding:1%; white-space: pre;
  content: "Welcome to the chatbox =D \a If you are alone, place a log on the fire.";
}

Στον CSS κώδικα, το μήνυμα χαρακτηρίζεται από το content, μπορείτε να προσθέσετε κείμενο ανάμεσα στα εισαγωγικά ( “” ) και να προσθέσετε μία γραμμή γράφοντας /a .


Αλλαγή εικονιδίου συντονιστή





Αυτό το script θα αντικαταστήσει ή διαγράψει το @ που βρίσκεται πριν από το όνομα του συντονιστή του chatbox :
Πίνακας Διαχείρισης ► Λειτουργικές Μονάδες ► HTML & JAVASCRIPT ► Διαχείριση κωδικών Javascript
Title: Ότι θέλετε
Placement: In all the pages
Javascript Code: Εποκολλήστε τον εξής κώδικα:
Κώδικας:
$(window).load(function() {
  var chatbox_script = function() {
    var overrided = Chatbox.prototype.refresh;
    Chatbox.prototype.refresh = function(data) {
      overrided.call(this, data);
      $('.chatbox-username').each(function(){
        this.previousSibling&&$.trim(this.previousSibling.nodeValue)=="@"&&$(this.previousSibling).replaceWith('<img src="http://i.imgur.com/zICIAne.png" /> ')
      })
    };
  };
  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){}})
});

Μπορείτε να αντικαταστήσετε το με την εικόνα της επιλογής σας ή με απλό κενό για να αφαιρεθεί κάθε εικονίδιο.

Αυτόματη σύνδεση

Αυτό το script θα σας συνδέει αυτόματα στο chatbox μόλις επισκέπτεστε την σελίδα στην οποία βρίσκεται :
Πίνακας Διαχείρισης ► Λειτουργικές Μονάδες ► HTML & JAVASCRIPT ► Διαχείριση κωδικών Javascript
Title: Ότι θέλετε
Placement: In all the pages
Javascript 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){}})
});

Ο οδηγός δημιουργήθηκε από Βuttercup & Ange Tuteur του Aγγλικού Φόρουμ Υποστήριξης και μεταφράστηκε στα Ελληνικά από Nemo.
avatar

Nemo
Υπεύθυνος Φόρουμ
Υπεύθυνος Φόρουμ

Άντρας
Τόπος : Αθήνα, Ελλάδα
Δημοσιεύσεις : 1205

Nemo ο/η συγγραφέας σας ευχαριστήσε για την απάντησή σας.

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή


Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης