Система всплывающих сообщений
 

В общем, решил сделать вот такую систему всплывающих сообщений-подсказок. Надеюсь, кому-нибудь пригодится. :)

Версия 2.0
Работает в IE7+
В IE7-8 не отображается тень и круглые углы
В IE7-9 не работают эффекты анимации

Подключение:
Для подключения необходимо подключить в head (не обязательно в head, но лучше в head) вашего документа *js и *css файлы:

<link href="Message-2.0.css" rel="stylesheet" type="text/css">
<script src="Message-2.0.js" type="text/javascript"></script>

Все файлы Вы сможете найти в архиве, который прикреплён ниже.

Настройка:
В *js файле Вы можете найти в самом начале следующие переменные:

var DELAY = 5000, //длительность отображения сообщения, 1000 = 1 секунда. По умолчанию 5000 (5 секунды).
	ICON = '', //иконка, которая будет устанавливаться по умолчанию, если не передан параметр «icon».
	ICON_DIR = '', //директория к папке с иконками, например: '/desing/icons/'. Это позволит сократить Ваш код и не прописывать каждый раз полную директорию к файлу иконки.
	ICON_FORMAT = ''; //формат иконок, например: 'png'. Это позволит сократить Ваш код и не прописывать к каждой иконке формат

Рекомендуется хранить все иконки в одной папке и в одном формате (например *png), и указать эти данные в переменные ICON_DIR и ICON_FORMAT. Благодаря этому, вместо пути к иконке можно будет просто указывать имя файла нужной иконки - это позволит очень даже облегчить написание кода, а также снизит его объём. :)

Документация:

Для создания всплывающего окна используется следующий класс (красным помечены обязательные параметры):
Message(title, text, icon)

• title[String] — заголовок сообщения (см. подробное описание ниже).
• text[String] — текст сообщения.
• icon[String] — путь к иконке, графическому изображению (см. подробное описание ниже).

Свойства:

• color[String] — цвет текста сообщения.
• delay[Number] — длительность отображения сообщения (1000 = 1 секунда). По умолчанию используется значение константы DELAY, но если она не указана, то - 5000 (5 секунд).
• icon[String] — путь к иконке, графическому изображению. Рекомендуется использовать *png изображения с размером 64x64. По умолчанию используется значение константы ICON. Также свойство работает совместно с константами ICON_DIR и ICON_FORMAT, однако если указать путь с http(s) или /, то значения констант не будет использоваться - всё это позволит с лёгкостью указывать путь не только к уникальной папке с иконками, но и использовать альтернативные пути.
• text[String] — текст сообщения.
• title[String] — заголовок сообщения. Заголовок не должен быть слишком большим по количеству символов, старайтесь его описать как можно короче, например: «Ошибка», «Успех», «Совет», «Предупреждение» и т.д.
• visible[Boolean] (только для чтения) — если true - значит сообщение находится на экране в видимом состоянии, если false - значит сообщение не отображено.

Методы:

• hide(onhide = null) — скрывает сообщение с экрана, если оно видимо.

• onhide[Function] — дополнительное событие, которое сработает после исчезновения сообщения. Этот параметр не обязателен.

• remove(forcibly = false) — удаляет сообщение с экрана и из памяти.

• forcibly[Boolean] — если параметр указан в виде истинного значения, то сообщение мгновенно будет удалено с экрана без эффекта плавного исчезновения.

• show(newText = Message.text, remove = false, forcibly = false) — выводит сообщение на экран.

• newText[String] — новый текст сообщения. По умолчанию берётся текст, переданный в экземпляр класса Message.
• remove[Boolean] — если параметр указан в виде истинного значения, то сообщение будет удалено из памяти после его исчезновения с экрана.
• forcibly[Boolean] — если параметр указан в виде истинного значения и данное сообщение уже находится в видимом состоянии, то оно будет принудительно скрыто и отобразится заново.

• toggle(show) — выводит/удаляет сообщение в зависимости от его видимости и параметра show. Если параметр show не указан, то сообщение будет скрыто если оно видимо, и наоборот.

• show[Boolean] — если true, то сообщение будет показано (аналогично методу show), если false - сообщение будет скрыто (аналогично методу hide).

События:

• onclick[Function] — событие вызываемое по клику на сообщение. Если функция вернёт false, то сообщение по клику скрыто не будет.
• onhide[Function] — событие вызываемое после исчезновения сообщения с экрана.

Свойства и методы основного объекта Message:

• Свойства

• Message.lastItem — ссылка на последний созданный экземпляр Message.
• Message.items — массив со всеми созданными экземплярами Message.
• Message.visibleLength (только для чтения) — количество видимых сообщений на экране.

• Методы

• Message.each(callback[Function]) — вызовет callback для каждого экземпляра Message. В callback будет передано два аргумента: item (экземпляр Message), index (индекс экземпляра Message).
• Message.hideAll() — скроет все видимые сообщения.
• Message.removeAll(forcibly[Boolean]) — удалит все сообщения из памяти, предварительно скрыв видимые сообщения. Если параметр forcibly указан в виде истинного значения, то все видимые сообщения будут мгновенно скрыты без эффекта плавного исчезновения.
• Message.showAll(stepTime[Number]) — отобразит все скрытые сообщения. Если параметр stepTime указан в виде числа, то сообщения будут показываться по очереди с интервалом stepTime (1000 = 1 секунда).

Примеры использования:

//Создаём сообщение
var msg = new Message('Заголовок', 'Текст');

//Устанавливаем нужные параметры
msg.delay = 3000; //3 секунды
msg.icon = '/files/icons/myIcon.png';

//Вешаем события
msg.onclick = function() {
    alert('Вы кликнули по всплывающему сообщению!');
}
msg.onhide = function() {
    alert('Сообщение исчезло!');
}

//Выводим сообщение на экран
msg.show();


//Создаём одноразовое сообщение и сразу выводим его, после исчезновения сообщение будет удалено из памяти
new Message('Приветствие', 'Всем привет!', '/icons/hello.png').show(null, true);

Живые примеры:
http://learn.javascript.ru/play/blUGbb

Скачать:
Вложение 2531

А можно лучше пример на jsfiddle, а то сам знаешь что с learn.javascript.ru :(
Я ради забавы недавно тоже написал уведомлялку, хотелось бы сравнить)

Safort, добавил ссылку на jsfiddle.net :)

Ruslan_xDD,
я уже скачал и у себя запустил)
Скажем так, плеер у тебя лучше выглядел :)

Ruslan_xDD,
font-size: 9pt; в ie невлазит

Safort, на белом фоне не очень смотрится. :) Если фон подогнать на весь документ, то вполне нормально должно смотреться, так как сами "сообщения" немного прозрачные. Но в любом случае, стили можно под себя подправить. Позже ещё сделаю тёмную версию. :)

рони, спасибо, поправим, не тестил просто в IE. ;)

рони, протестировал на IE9-11, всё нормально работает. Можешь скрин сделать?

UPD: немного изменил стили, думаю теперь лучше смотрится.

Ruslan_xDD,
может быть это только у меня так

рони, ну ничего себе у тебя в IE шрифт большой, спасибо. :) Есть какие-нибудь идеи по этому поводу? Может в самом font-family проблемы?

Ruslan_xDD,
если font-family: указать тогда всё нормально :-?

рони, странно, что font-family с родителя не применяется. :-?

Насчет transitionend - нет. Это ненадежное событие. Я, к примеру, парсил свойство transition-duration. Хотя разнообразие временных единиц измерения и префиксы доставят хлопот.

В целом - с виду не плохо. Люблю минимализм в коде. Но было бы здорово предусмотреть особое поведение при переполнении экрана (правда хз че за поведение должно быть).

danik.js, тоже сначала думал распарсить transition-duration, но как-то очень-очень-очень влом, да и зачем? :)

Ну ведь на практике вряд ли такое будет допустимо, чтобы куча сообщений вылазило. :)
Например, в той же форме если будет вылазить ошибка, либо ID присвоить для "сообщения", либо дисейблить саму кнопку формы на какое-то время, чтобы по ней нельзя было так часто делать проверку на валидацию, вызывая сообщение.

Ruslan_xDD,
круто. но проработай над репкой - гитбах, тестирование, вики и связки с фреймворками.... бла бла бла)




ЗЫ практика показывает, что важно не только хорошо кодить, но и уметь представить свой продукт, чего я не умел и чему всем желаю обучиться

melky, гитбах. :D В нём я пока не разобрался, но думаю со временем разберусь, спасибо :)

Вот тут не очень понял, можно подробнее? А то я в таких делах нуб. :)

вики - документация

связки - обвязка твоего скрипта для быстрого старта на каком-нибудь фреймворке. например, плагин для jquery, директива\сервис для angular и компонент для react

хотя последнее, наверное, будет излишним :)

melky, ясно, спасибо. Ну чтож, буду разбираться. :)

:-? В операх до 17 = не работает...

Поставил +
Фишка достаточно востребована

Deff, спасибо. :) Странно, а консоль что пишет? :-?

P.S.: проверил на 12-ой опере - всё работает на ура. Как-нибудь можно мою оперу 25+ эмулировать на 17-ю версию?

Ruslan_xDD, ООП где?

new Message(/*{Object}*/options);
new Message(option1, option1, option1, ...); // или

message.show();
message.hide();
// message.show().then();
// message.hide().then();
message.remove();

new MessageManager(messages) {}

manager.add(message);
manager.add(message);
manager.remove(message);
manager.clear();
manager.entries();

manager.showAll();

:)

nerv_, а как насчет функции message, которая возвращает объект?
Что-то вроде window.open(). По-моему так удобней.
Иконку сделать третьим необязательным параметром.

Кстати нафиг там проверка '\v' != 'v' ?

danik.js, это для поддержки IE8 будет служить, хотел вчера сделать, но решил на потом отложить, забыл убрать. :)

nerv_, а зачем оно? Тут то простые сообщения, ничего такого. Не понимаю даже, для чего могут пригодиться методы для принудительного скрытия сообщения. :) Это как new Alert() :D

P.S.: сегодня может ещё допилю, что-нибудь переделаю. :)

это же ООП :)

Это как жуквери, который все ненавидят.

// пишешь
$(some);
// а по факту происходит
new jQuery(some);

кто-то не видит разницы между модальными окнами и не модальными

т.к. время жизни сообщения может быть не ограниченным (например, пока пользователь не закроет или не придет ответ с сервера)

Впрочем, если ты не понимаешь зачем здесь ООП, думаю, не буду объяснять :)

nerv_, в принципе я понял, о чём ты. Буду ещё продумывать.

Думаю, тогда сейчас переделаю весь JS код, сделаю в стиле ОПП: new Message(title, text).

nerv_, не соглашусь тут. Учитывая что большинству нафиг не нужен объект для управления, то вариант с функцией выглядит лучше.

new Message('bla bla');
..
new Message('bla bla');

Выглядит странновато. Оно просто тут не нужно.

document.createElement('img');
//а по факту происходит
new Image();

:) Правда тут скорее наоборот, ибо создаваемый элемент имеет связи с document, но речь не об этом.

А вот код реализации переписать - это да, тут аргумент ООП уже не оспоришь.

В общем, нашёл вчера время и полностью переписал весь код. Обновил до версии 2.0, теперь всё на ООП. :) Смотрите первый пост.

если нажать на совет и подождать пока пропадет - при повторном нажатии ошибка

nice_try, в самом примере ошибка была, исправил.

Уже не знаю, ибо на http://learn.javascript.ru/play/blUGbb - всё работает,
Я писал когда тест был в теле первого сообщения

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