Расширение quickInfo

Подробности об расширении quickInfo можно найти в статье Quick Info (Touch Support).

Объект quickInfo имеет следующий API:

Методы

• show (id): void - отображает всплывающее окно быстрой информации для указанного элемента
  • id - (number | string) - идентификатор задачи

gantt.ext.quickInfo.show("1");

• show (x, y): void - отображает окно быстрой информации по заданным координатам
  • x - (number | string) - горизонтальная координата
  • y - (number | string) - вертикальная координата

gantt.ext.quickInfo.show(10,30);

• hide (force): HTMLElement - скрывает всплывающее окно быстрой информации. Когда gantt.config.quick_info_detached установлен в false, окно быстрой информации не исчезнет мгновенно, а после короткой анимации. Передача значения true в качестве аргумента отменит анимацию и немедленно удалит всплывающее окно.
  • force? - (boolean) - определяет, будет ли всплывающее окно скрыто немедленно без анимации

gantt.config.quick_info_detached = false;
gantt.init("gantt_here");
 
// скрыть всплывающее окно после короткой анимации
gantt.ext.quickInfo.hide();
 
// скрыть всплывающее окно мгновенно
gantt.ext.quickInfo.hide(true);

• setContainer (container): void - устанавливает контейнер, в котором будет отображаться быстрая информация. Если не указан пользовательский контейнер, QuickInfo будет размещаться в первом найденном узле: gantt.$task, gantt.$grid, gantt.$root
  • container - (HTMLElement | string) - элемент контейнера или его ID

gantt.ext.quickInfo.setContainer(document.body);
gantt.ext.quickInfo.show(1300,100);

• getNode (): HTMLElement | null - возвращает HTMLElement всплывающего окна быстрой информации. Возвращает null, если быстрая информация не инициализирована

const node = gantt.ext.quickInfo.getNode();

Возвращаемый DOM-элемент отображаемой быстрой информации выглядит следующим образом:

• setContent (config): void - помещает содержимое в быструю информацию
  • config? - (object) - необязательно, объект конфигурации быстрой информации, который может включать следующие атрибуты:
    • taskId? - (string | number) - необязательно, идентификатор задачи, к которому будут привязаны кнопки действий быстрой информации
    • header? - (object) - необязательно, заголовок формы поп-ап редактирования, который может включать:
      • title? - (string) - необязательно, заголовок формы поп-ап редактирования
      • date? - (string) - необязательно, дата формы поп-ап редактирования
    • content? - (string) - необязательно, содержимое формы поп-ап редактирования
    • buttons? - (string[]) - необязательно, кнопки, размещаемые в форме поп-ап редактирования

Если ни заголовок, ни кнопки не указаны, соответствующие области всплывающего окна быстрой информации будут скрыты.

Ниже приведён пример того, как может выглядеть объект конфигурации метода setContent:

const quickInfo = gantt.ext.quickInfo;
var task = gantt.getTask(10);
quickInfo.show(task.id);
quickInfo.setContent({
    taskId: task.id,
    header: {
        title: gantt.templates.quick_info_title(task.start_date, task.end_date, task),
        date: gantt.templates.quick_info_date(task.start_date, task.end_date, task)
    },
    content: gantt.templates.quick_info_content(task.start_date, task.end_date, task),
    buttons: gantt.config.quickinfo_buttons
});

или

Вы можете создать настраиваемое всплывающее окно без заголовка и кнопок:

const quickInfo = gantt.ext.quickInfo;
quickInfo.show(100, 100);
quickInfo.setContent({
    content: "my custom html",
    buttons: []
});