Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Поделиться ссылкой

Мы в социальных сетях



- Правила форума -

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: JPG-Net Видео фоторедактор Транслит
Видео-туториалы
Настройка шапки форума
Категории и подфорумы - 1
Создание портала
Модули
Виджеты
Как присваивать награды
Выброс кубиков
Pop-up для входа на форум
Настроение в профиле

Чат на панели инструментов

Предыдущая тема Следующая тема Перейти вниз

Чат на панели инструментов

Сообщение автор Феникс в Вс 11 Сен - 21:03




Чат на панели инструментов форума

 Скрипт. Расположение: На всех страницах:

Код:
$(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,''); };
})});


Результат:




На скрине анимашка быстро показывает всплывающее окно с чатом. На самом деле происходит плавней. 

Если у вас возникли вопросы, связанные с чатом создайте новую тему со следующим названием:
Чат на панели инструментов
В таблицу CSS
Код:
#fa_chat_container {
  background:#FFF;
  border:1px solid #556682;
  border-radius:3px;
  position:fixed;
  right:3px;
  z-index:999;
  overflow:hidden;
  min-width:500px;
  min-height:250px;
  transition:300ms;
}
 
#fa_chat {
  border:none;
  width:100%;
  height:100%;
}
 
#fa_chat_button {
  color:#FFF;
  line-height:30px;
  margin-left:10px;
  padding:0 5px;
  cursor:pointer;
}
 
#fa_chat_button.fa_chat_active {
  color:#333;
  background:#FFF;
}



Если первый скрипт не заработает, пробуйте этот.

Код:
(function() {
  if (!window.FA) window.FA = {};
  if (FA.Chat) {
    if (window.console) console.warn('ФА.Чат был уже инициализирован');
    return;
  }
 
FA.Chat = {
 
    // настройки чата
config : {
height : '60%',
width : '70%',
    
live_notif : true,
sound_notif : {
enabled : true,
file : 'http://illiweb.com/fa/fdf/zelda.mono.mp3'
      },
notifRate : 10000
    },
 
    // языковые настройки
lang : {
chatbox : 'Чат',
new_msg : 'Новое сообщение было опубликовано в <a href="javascript:FA.Chat.toggle();"> Чате</a>.'
    },
 
    // технические данные ниже
node : {}, //узел кэша
users : 0, // пользователей в чате
messages : 'initial', // общий чат сообщения
actif : false, //рассказывает нам, если окно чата открыто
notifActif : false, // рассказывает нам, если уведомления активны
 
    // начальная настройка чата
init : function() {
      var right = document.getElementById('fa_right'),
container = document.createElement('DIV'),
button = document.createElement('A'),
audio;
 
button.id = 'fa_chat_button';
button.innerHTML = FA.Chat.lang.chatbox + ' <span id="fa_chatters">(0)</span>';
button.onclick = FA.Chat.toggle;
FA.Chat.node.button = button;
 
container.id = 'fa_chat_container';
container.innerHTML = '<iframe id="fa_chat" src="/chatbox/index.forum"></iframe>';
container.style.width = FA.Chat.config.width;
container.style.height = FA.Chat.config.height;
container.style.bottom = '-' + FA.Chat.config.height;
container.style.visibility = 'hidden';
 
      if (right) {
right.insertBefore(button, right.lastChild); // добавить  чат  в панели инструментов
document.body.appendChild(container);
      
        // создать оповещение звуковой элемент
        if (FA.Chat.config.sound_notif.enabled) {
audio = document.createElement('AUDIO');
audio.src = FA.Chat.config.sound_notif.file;
          if (audio.canPlayType) {
FA.Chat.node.audio = audio;
document.body.appendChild(audio);
          }
        }
 
FA.Chat.node.container = document.getElementById('fa_chat_container');
FA.Chat.node.chatters = document.getElementById('fa_chatters');
FA.Chat.node.frame = document.getElementById('fa_chat');
FA.Chat.node.frame.onload = FA.Chat.getFrame;
      }
    
      delete FA.Chat.init;
    },
 
    //получить раму окна, документа и элементов
getFrame : function() {
      if (FA.Chat.poll) window.clearInterval(FA.Chat.poll);
      if (this.contentDocument || this.contentWindow) {
FA.Chat.window = this.contentWindow;
FA.Chat.document = this.contentDocument ? this.contentDocument : FA.Chat.window.document;
      
FA.Chat.node.message = FA.Chat.document.getElementById('message');
FA.Chat.node.members = FA.Chat.document.getElementById('chatbox_members');
      
FA.Chat.poll = window.setInterval(FA.Chat.listen, 300); // прослушивать меняется каждые 0.3 секунды
      }
    },
  
    //слушайте для изменения в окне чата
listen : function() {
      var users = FA.Chat.node.members.getElementsByTagName('LI').length,
messages = FA.Chat.window.chatbox.messages.length;
    
      // обновление пользователя граф
      if (users > FA.Chat.users || users < FA.Chat.users) {
FA.Chat.users = users;
FA.Chat.node.chatters.innerHTML = '(' + FA.Chat.users + ')';
      }
    
      // начальная / активного обновления
      if ((FA.Chat.messages == 'initial' && messages) || FA.Chat.notifActif || FA.Chat.actif) FA.Chat.messages = messages;
    
      // уведомление новых сообщений при подключении и окно чата закрывается
      if (!FA.Chat.actif && !FA.Chat.notifActif && FA.Chat.window.chatbox.connected && (messages > FA.Chat.messages || messages < FA.Chat.messages)) {
FA.Chat.messages = messages; // обновление счетчика Сообщений
FA.Chat.notifActif = true;
      
        if (FA.Chat.config.live_notif) FA.Chat.notify(FA.Chat.lang.new_msg); // show live notification
        if (FA.Chat.config.sound_notif.enabled && FA.Chat.node.audio) FA.Chat.node.audio.play(); //проигрывать звук уведомления
      
        // ждать до уведомления Пользователя снова
window.setTimeout(function() {
FA.Chat.notifActif = false;
        }, FA.Chat.config.notifRate);
      }
    },
  
    // создание пользовательских уведомлений
notify : function(msg) {
    
      var notif = document.createElement('DIV'),
live = document.getElementById(Toolbar.LIVE_NOTIF);
        
notif.className = 'fa_notification';
notif.innerHTML = '<div class="content ellipsis">' + msg + '</div>';
notif.style.display = 'none';
    
$(notif).mouseover(function() { $(this).stop(true, true) });
$(notif).mouseleave(function() { $(this).delay(5000).fadeOut() });
    
live.insertBefore(notif, live.firstChild);
$(notif.firstChild).dotdotdot();
    
$(notif).fadeIn(100, function() { $(this).delay(10000).fadeOut() });
    },
  
    // включение и выключение отображения состояния чата
toggle : function() {
      var container = FA.Chat.node.container.style;
      
      if (/hidden/i.test(container.visibility)) {
FA.Chat.node.button.className = 'fa_chat_active';
FA.Chat.actif = true;
        
container.visibility = 'visible';
container.bottom = '3px';
        
        //автоматический фокус в поле сообщения
window.setTimeout(function() {
FA.Chat.node.message.focus();
        }, 350); // некоторые браузеры ( Firefox ) вам нужна отсрочка
      } else {
FA.Chat.node.button.className = '';
FA.Chat.actif = false;
        
container.visibility = 'hidden';
container.bottom = '-' + FA.Chat.config.height;
      }
    }
 
  };
 
$(function(){
    //инициализировать чат когда документ будет готов, и Пользователь регистрируется в
    if (_userdata.session_logged_in) $(FA.Chat.init);
  });
})();


Если вы подключены к чату, но он свёрнут, то в тулбаре будут высвечиваться текстовые уведомления и будет звуковое оповещение о новых сообщениях, если таковые есть.


• Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS
 
• Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки

• Где искать JavaScript?
ПА > Модули >  HTML & JAVASCRIPT > Управление кодами Javascript

Феникс
 
 

Пол : Мужчина
Сообщения : 430
Возраст : 44
Карма : Без предупреждений
Благодарности : 81
Регистрация : 2015-10-29

http://dayana.forum2x2.ru/

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения