Расширенное меню
Расширенное меню — еще одна возможность получить доступ к функциям чата. Вся
навигация по чату — внешнее меню, навигация, статусы, некоторые настройки, —
может быть объединено в одну структуру, которая называется "расширенное меню". Расширенное
меню располагается в окне сообщений сверху или снизу, в зависимости от выбранного
направления вывода фраз, занимает всю ширину окна и всего несколько пикселов в высоту,
что нисколько не мешает нормальному общению в чате. Расширенное меню состоит из двух частей:
индикатора событий в виде тонкой линии во всю ширину и главного меню. В обычном состоянии
главное меню скрыто и на экране отображается только индикатор событий. Вызов расширенного
меню осуществляется аналогично навигации — наведением мышки на индикатор событий.
Расширенное меню оказывается очень эффективным на устройствах, имеющие экран с низким
разрешением (нетбуки, планшетные компьютеры), на которых не могут быть отображены все
элементы чата, в связи с чем ограничен доступ к некоторым функциям (например, настройкам).
Главное меню состоит из разделов, по которым осуществляется навигация. В начальной конфигурации
главное меню содержит следующие разделы: функции внешнего меню, функции навигации, статусы и выбор
дизайна. Программный код расширенного меню содержит интерфейс прикладного программирования (API),
что позволяет с помощью внешних скриптов легко модифицировать меню, удаляя или добавляя нужные
разделы. Ниже будет дано описание программного интерфейса расширенного меню и приведен пример
добавления в меню некоторых настроек.
Индикатор событий выполняет две функции. Во первых, через него осуществляется вывод расширенного
меню на экран, т.к. оно всегда скрыто, чтобы не занимать пространство на экране. Во вторых, индикатор
событий может сигнализировать о наступлении некоторого события (отсюда и название), в этом случае
индикатор событий начинает мигать двумя цветами, что привлечет внимание. Управление индикатором
событий также осуществляется через API.
Команды меню
- /menu
выполняет запуск расширенного меню в стандартной конфигурации;
- /menu register id название
регистрация раздела в меню. Все разделы в меню имеют свой уникальный id, по которому
осуществляется обращение к этому разделу. Перед тем, как добавить новый раздел в меню его необходимо
зарегистрировать — указать его id и название, которое будет отображаться на экране.
Стандартные разделы меню имеют следующие id:
- main — Главное окно
- menu — Меню
- nav — Навигация
- status — Статусы
- design — Дизайны
- /menu insert id
добавляет в меню раздел с указанным id;
- /menu delete id
удаляет из меню раздел с заданным id;
- /menu rename id название
меняет название раздела на новое.
API
Программирование расширенного меню производится через внешние скрипты. Требования к внешним
скриптам изложены в разделе документации Загрузка
внешних скриптов.
ВАЖНО! Интерфейс прикладного программирования предназначен для программистов, имеющие
достаточный опыт и знания языка JavaScript, на котором осуществляется управление расширенным
меню. Неумелое использование скриптов может стать причиной неработоспособности чата.
API расширенного меню предоставляет следующие возможности:
- Регистрация раздела
- Добавление раздела
- Удаление раздела
- Переименовывание раздела
- Управление индикатором событий
Прежде, чем использовать API расширенного меню необходимо создать объект раздела, описанием
которого является функция-класс раздела, эта функция определяет внешний вид меню раздела и
обрабатывает действия пользователя.
Прототип функции-класса раздела выглядит следующим образом:
function название_функции_раздела () {
название_функции_раздела.superclass.constructor.apply (this, arguments)
this.id = "id_раздела"
// возвращает размер массива, из которого будет строиться меню
this.size = function () {
...
}
// возвращает один элемент массива
this.item = function ( i ) {
...
}
// обработчик действий пользователя
this.handler = function ( el, i ) {
...
}
}
august_extend (название_функции_раздела, august_menu_base)
Для создания функции-класса раздела применяется ООП. Функция-класс раздела должна наследовать все
свойства от базового класса august_menu_base, для этого требуется выполнить два вызова (хотя
в JavaScript и отсутствует понятие класса, для лучшего описания происходящего будем применять этот
термин, как это принято во многих языках высокого уровня, а в JavaScript класс объекта определяется
функцией, которая его создала).
Первый — вызов функции august_extend:
august_extend (название_функции_раздела, august_menu_base)
Данный вызов делает класс название_функции_раздела потомком класса
august_menu_base.
Второй — вызов конструктора базового класса august_menu_base:
название_функции_раздела.superclass.constructor.apply (this, arguments)
Имя функции название_функции_раздела выбирается исходя из назначения
данного раздела.
Каждый класс раздела должен содержать свой уникальный id, для этого переменной
id присваивается id_раздела, который в дальнейшем используется в API. В
формировании меню принимают участие две функции-методы: size() и item(). Т.к. меню состоит
из набора пунктов, удобнее всего меню описать с помощью массива. Функция-метод size() должна
возвращать размер этого массива, а функция-метод item() — один элемент из этого массива,
в аргументе функции будет передан индекс элемента. Если по каким-либо причинам данный пункт не должен
отображаться в меню, то функция-метод item() должна вернуть false. Если есть необходимость
в необычном меню, то создание меню можно взять под свой контроль. В этом случае определять
функции-методы size() и item() не следует, а необходимо определить функцию-метод html(),
которая должна возвращать готовый html-код меню. Обработку действий пользователя осуществляет
функция-метод handler(), первым аргументом этой функции передается ссылка на html-элемент,
на котором произошло событие, вторым аргументом — номер пункта меню (отсчет идет от 0).
Пример простого раздела, меню которого состоит из двух пунктов и на действия пользователя
выводится номер пункта, на котором был клик мышкой.
function alert_example () {
alert_example.superclass.constructor.apply (this, arguments)
this.id = "alert"
var Menu = ["Меню 1", "Меню 2"]
this.size = function () {
return Menu.length
}
this.item = function ( i ) {
return Menu [i]
}
this.handler = function ( el, i ) {
alert (i)
}
}
august_extend (alert_example, august_menu_base)
Регистрация раздела
AugustMenu.registerMenu (id, name)
Функция регистрирует раздел с id и назначает ему имя name,
которое будет выведено на экран при добавлении раздела. Раздел регистрируется один раз в начальный
момент перед началом использования остальных функций API.
Добавление раздела
AugustMenu.insertMenu (menu)
Функция вставляет раздел в расширенное меню и раздел сразу же отображается. В функцию
необходимо передать новый объект раздела, описание класса которого дано выше.
Удаление раздела
AugustMenu.deleteMenu (id)
Функция удаляет раздел с id из расширенного меню, раздел сразу же
удаляется с экрана, раздел при этом остается зарегистрированным.
Переименовывание раздела
AugustMenu.renameMenu (id, name)
Функция назначает разделу с id новое имя, которое сразу же отображается
на экране.
Управление индикатором событий
AugustMenu.blink (id, a)
Полный пример
При программировании расширенного меню следует учитывать тот факт, что оно в чате автоматически
не запускается и перед выполнением каких-либо действий следует проверить, запущено оно или нет и
если нет, то запустить его самостоятельно. Для запуска расширенного меню из внешних скриптов
используется следующий код:
(function () {
if (!window.AugustMenu) {
if (!arguments.callee.init)
August.menu ()
arguments.callee.init = 1
setTimeout (arguments.callee, 100)
return
}
if (window.MyChatSuperModule)
return
window.MyChatSuperModule = this
// код раздела
}) ()
С учетом всего вышеописанного и правил оформления внешних скриптов, полный пример простого раздела
будет выглядеть следующим образом:
(function () {
if (!window.AugustMenu) {
if (!arguments.callee.init)
August.menu ()
arguments.callee.init = 1
setTimeout (arguments.callee, 100)
return
}
if (window.AlertExampleMenu)
return
window.AlertExampleMenu = this
function alert_example () {
alert_example.superclass.constructor.apply (this, arguments)
this.id = "alert"
var Menu = ["Меню 1", "Меню 2"]
this.size = function () {
return Menu.length
}
this.item = function ( i ) {
return Menu [i]
}
this.handler = function ( el, i ) {
alert (i)
}
}
august_extend (alert_example, august_menu_base)
AugustMenu.registerMenu ("alert", "Алерт меню")
AugustMenu.insertMenu (new alert_example)
}) ()
Более практичные примеры можно взять отсюда: