Всплывающие сообщения и модальные окна

Сообщения в диаграмме Ганта служат уведомлениями для различных целей, таких как ошибки, подтверждения или выбор опций. Эти сообщения построены на форке репозитория dhtmlxMessage, поэтому все его функции применимы и здесь.

Существует два основных типа сообщений: простое всплывающее сообщение и модальное сообщение с кнопками, которые приостанавливают выполнение приложения.

Модальные сообщения бывают трех типов:

• Окно сообщения Alert
• Окно сообщения Confirm
• Modalbox

Простое всплывающее сообщение

Для создания простого всплывающего сообщения используется метод gantt.message. Обязательный параметр для этого метода — текст сообщения:

gantt.message("Задача обновлена");

Существуют три стиля окон сообщений:

• Окно сообщения по умолчанию (type:"info")

• Окно сообщения об ошибке (type:"error")

• Окно предупреждающего сообщения (type:"warning")

Чтобы указать тип окна сообщения, используйте свойство type с желаемым значением:

// создание окна сообщения об ошибке
gantt.message({type:"error", text:"Неверный формат данных"});

Related sample:  Gantt message types

Чтобы применить пользовательские стили к окну сообщения, можно назначить CSS-класс, используя параметр type, как объяснено здесь.

Позиционирование окон сообщений

По умолчанию всплывающие сообщения появляются в правом верхнем углу окна и не прерывают работу основного приложения, в отличие от модальных окон сообщений, которые накладываются и блокируют приложение. Положение окна сообщения можно изменить, используя свойство gantt.message.position:

gantt.message.position = 'bottom';

Related sample:  Позиция сообщения

Доступные варианты позиционирования:

• top - размещает окно сообщения в правом верхнем углу (по умолчанию).
• bottom - размещает окно сообщения в правом нижнем углу.
• left - позиционирует окно сообщения на левой стороне под диаграммой Ганта.
• right - размещает окно сообщения на правой стороне под диаграммой Ганта.

Интервал времени показа

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

Интервал можно изменить или полностью отключить, установив параметр expire в "-1". В этом случае сообщение исчезнет только при клике на него.

gantt.message({
    type:"error", 
    text:"Неверный формат данных",
    expire:10000
});

Скрытие окна сообщения с помощью API

Чтобы вручную скрыть окно сообщения, не дожидаясь его автоматического исчезновения, можно использовать метод gantt.message.hide(boxId). Метод требует:

• boxId - идентификатор, присвоенный окну при его создании.

gantt.message({
    id:"myBox",
    text:"Страница загружена"
});
 
gantt.message.hide("myBox");

Модальные окна сообщений

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

Существует три типа модальных окон сообщений:

• Окно сообщения Alert - окно с одной кнопкой.
• Окно сообщения Confirm - окно подтверждения с двумя кнопками (например, подтвердить или отменить).
• Modalbox - модальное окно с несколькими кнопками.

Общие свойства для этих окон включают:

• id - уникальный идентификатор для окна.
• title - текст заголовка.
• type - тип сообщения (например, предупреждение или ошибка).
• text - основной контент окна.
• ok - метка для кнопки "ОК".
• cancel - метка для кнопки "Отмена" (для окон подтверждения).
• callback - функция, вызываемая при нажатии кнопки, принимающая true или false в зависимости от нажатой кнопки.
• position - в настоящее время поддерживает "top"; другие значения выравнивают окно по центру.
• width - ширина окна (например, "100px", "50%").
• height - высота окна (например, "100px", "50%").

Окно сообщения Alert

Окно alert включает кнопку "ОК". Текст для этой кнопки можно задать с помощью параметра ok.

• Краткая форма (указываются только текст сообщения, остальные параметры используют значения по умолчанию):

gantt.alert("Текст");

• Полная форма (указываются дополнительные параметры):

gantt.alert({
    text:"некоторый текст",
    title:"Ошибка!",
    ok:"Да",
    callback:function(){...}
});

Окно сообщения Confirm

Окно confirm имеет две кнопки: "ОК" и "Отмена". Их метки можно настроить с помощью соответствующих свойств.

• Краткая форма:

gantt.confirm("Текст подтверждения");

• Полная форма:

gantt.confirm({
    text: "Продолжить?",
    ok:"Да", 
    cancel:"Нет",
    callback: function(result){
        gantt.message("Результат: "+result);
    }
});

Modal Box

Modalbox обладает некоторыми уникальными особенностями:

• Его text может содержать HTML-контент.
• Он может иметь несколько кнопок, определяемых в массиве buttons.
• Функция callback получает индекс выбранной кнопки.

gantt.modalbox({
    title:"Настройки",
    text: " ... html код здесь... ",
    buttons:["Сохранить", "По умолчанию", "Отмена"],
    callback: function(result){
        gantt.alert(result);
    }
});

Настройка кнопок Modalbox

Кнопки в modalbox можно настроить двумя способами:

• Краткая форма:

gantt.modalbox({
    // другие настройки
    buttons:["Сохранить", "Удалить", "Отмена"],
    callback: function(result){
        switch(result){
            case "0":
                // Сохранить
                break;
            case "1":
                // Удалить
                break;
            case "2":
                // Отмена
                break;
        }   
    }
});

Функция callback получает строковый индекс нажатой кнопки ("0", "1", "2" и т.д.). Каждая кнопка получает CSS-класс на основе своей метки, преобразованной в нижний регистр (например, gantt_save_button, gantt_delete_button, gantt_cancel_button). Эти классы можно стилизовать:

.gantt_delete_button div{
    background:red;
}

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

gantt.modalbox({
    // другие настройки
    type:"special_popup",
    buttons:["Сохранить", "Удалить", "Отмена"]
});

type добавляется как префикс "gantt_" и добавляется как имя класса к всплывающему окну:

.gantt_special_popup .gantt_delete_button div{
    background:red;
}

• Полная форма:

Этот подход позволяет явно настроить CSS-классы кнопок и значения callback:

gantt.modalbox({
    // другие настройки
    buttons: [
        { label:"Сохранить",   css:"link_save_btn",   value:"save" },
        { label:"Отмена", css:"link_cancel_btn", value:"cancel" },
        { label:"Удалить", css:"link_delete_btn", value:"delete" }
    ],
    callback: function(result){
        switch(result){
            case "save":
                // Сохранить
                break;
            case "cancel":
                // Отмена
                break;
            case "delete":
                // Удалить
                break;
        }
    }
});

Параметр label обязателен, а css и value являются необязательными. Если они не указаны, CSS создается из названия метки в нижнем регистре, а индекс кнопки используется как значение.

css добавляется как префикс "gantt_" и добавляется как имя класса к кнопке:

.gantt_link_delete_btn div{
    background:red;
}

Скрытие модальных окон сообщений

Чтобы вручную скрыть модальное окно сообщения, используйте метод gantt.modalbox.hide(). Он требует div-контейнер модального окна:

var box = gantt.modalbox({  
    title:"Настройки",
    text: " ... html код здесь... ",
    buttons:["Сохранить", "По умолчанию", "Отмена"],
    callback: function(result){
        gantt.alert(result);
    }
});
 
gantt.modalbox.hide(box);

Для модальных окон alert и confirm используется тот же метод:

var box = gantt.confirm({
    text: "Продолжить?",
    ok:"Да", 
    cancel:"Нет",
    callback: function(result){
        gantt.message("Результат: "+result);
    }
});
 
gantt.modalbox.hide(box);

Как Gantt обрабатывает кнопки Modalbox

По умолчанию кнопки в Gantt именуются простым текстом. Если вы используете HTML-элемент в качестве имени кнопки (например, делаете текст жирным или добавляете иконку), функция обратного вызова, вызываемая при нажатии кнопки, вернет null.

Это происходит потому, что Gantt проверяет определенные атрибуты в родительском элементе нажатого элемента. Если эти атрибуты отсутствуют, результат будет null. Кроме того, Gantt оборачивает все элементы кнопок, которые вы определяете, в теги <div>.

Таким образом, если вы нажмете на текстовый элемент, его родитель будет пустым <div> без необходимых атрибутов, что приведет к null. Однако нажатие вне текста на саму кнопку вызовет родительский элемент с ожидаемыми атрибутами, и результат будет более значимым:

• true/false для окон подтверждения
• Для модальных окон:
  • Индекс элемента в массиве (для краткой формы)
  • Значение параметра value (для полной формы)

Чтобы использовать HTML-элемент в качестве имени кнопки, вам нужно обернуть его в два элемента <div>, оба из которых имеют атрибут data-result. Вот пример:

gantt.confirm({
    ok:`<div data-result="yes"><div data-result="yes"><i>Да</i></div></div>`,
    cancel:`<div data-result="no"><div data-result="no"><i>Нет</i></div></div>`,
});
 
gantt.modalbox({
  buttons: [
   { label:`<div data-result="yes">
        <div data-result="yes"><i>Да</i></div>
     </div>`,   
     css:"link_save_btn", value:"yes" },
   { label:`<div data-result="no">
        <div data-result="no"><i>Нет</i></div>
     </div>`, 
     css:"link_cancel_btn", value:"no" },
   { label:`<div data-result="cancel">
        <div data-result="cancel"><i>Отмена</i></div>
     </div>`, 
     css:"link_cancel_btn", value:"cancel" },
  ],
});

Если вы хотите использовать другие элементы для имен кнопок, убедитесь, что все родительские элементы также имеют атрибут data-result. Например, в приведенном ниже примере теги <u> используются для имени кнопки. Эти теги, наряду с двумя родительскими элементами <div>, включают атрибут data-result:

gantt.confirm({
  ok:`<div data-result="yes">
    <div data-result="yes"><u data-result="yes"><i>Да</i></u></div>
  </div>`,
  cancel:`<div data-result="no">
    <div data-result="no"><u data-result="no"><i>Нет</i></u></div>
  </div>`,
});
 
gantt.modalbox({
  buttons: [
    { label:`<div data-result="yes">
        <div data-result="yes">
            <u data-result="yes"><i>Да</i></u>
        </div>
      </div>`,   
      css:"link_save_btn",  value:"yes" },
    { label:`<div data-result="no">
        <div data-result="no">
            <u data-result="no"><i>Нет</i></u>
        </div>
      </div>`, 
      css:"link_cancel_btn", value:"no" },
    { label:`<div data-result="cancel">
        <div data-result="cancel">
            <u data-result="cancel"><i>Отмена</i></u>
        </div>
      </div>`, 
      css:"link_cancel_btn", value:"cancel" },
  ],
});

Стилизация

Вы можете настроить внешний вид любого окна сообщения, применив свои собственные стили. Обычно CSS-класс задается через параметр type. Этот класс определяет желаемый вид для окна сообщения.

Учтите следующие моменты при настройке параметра type:

• Для окон alert и confirm необходимо инициализировать их с использованием метода, связанного с окном, чтобы применить CSS-класс.
• Для окон message необходимо инициализировать их с использованием общего метода, чтобы применить CSS-класс.
• Имя CSS-класса должно начинаться с префикса gantt-.
• Чтобы стиль применялся правильно, определите класс как .gantt-some div, нацеливаясь на элементы внутри сообщения Gantt.

Вот пример:

<style type="text/css">
.gantt-myCss div{
    font-weight:bold;
    color:wheat;
    background-color:crimson;
}
</style>
 
gantt.message({ type:"myCss", text:"некоторый текст" });

Related sample:  Стилизация окон сообщений

Модальные окна и взаимодействие с клавиатурой

Функциональность клавиатуры для модальных окон управляется свойством gantt.message.keyboard, которое по умолчанию установлено в true.

По умолчанию модальные окна блокируют большинство событий клавиатуры на странице. Работают только несколько клавиш:

• "space" и "enter" - возвращают true как результат модального окна.
• "escape" - возвращает false как результат модального окна.

Если вы установите свойство keyboard в false, все события клавиатуры будут включены, и указанные выше клавиши больше не будут иметь своего стандартного поведения:

gantt.message.keyboard = false; 
gantt.modalbox({...});

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

К началу