Быстрая информация (Поддержка касания)

Библиотека включает в себя расширение Быстрая информация, которое позволяет отображать всплывающее окно с деталями задачи при касании задачи на экране.

Related sample: QuickInfo extension

Чтобы использовать это расширение, необходимо включить плагин "Быстрая информация" с помощью метода gantt.plugins.

gantt.plugins({
    quick_info: true
});

Обзор API

Расширение Быстрая информация предоставляет API, который позволяет настраивать его параметры, контролировать его поведение или изменять внешний вид всплывающего окна. Вы можете работать либо с объектом gantt.ext.quickInfo, либо использовать публичный API dhtmlxGantt, который включает в себя следующее:

Методы

showQuickInfo - отображает форму всплывающего окна для конкретной задачи
hideQuickInfo - скрывает форму всплывающего окна, если она в данный момент видна

События

onQuickInfo - срабатывает, когда появляется форма всплывающего окна
onAfterQuickInfo - срабатывает после закрытия формы всплывающего окна

Свойства

quick_info_detached - определяет, появляется ли всплывающее окно рядом с выбранной задачей или сбоку экрана
quickinfo_buttons - содержит коллекцию кнопок в форме деталей задачи всплывающего окна

Шаблоны

quick_info_class - задает CSS класс для формы всплывающего окна
quick_info_content - определяет содержимое формы всплывающего окна
quick_info_date - задает дату формы всплывающего окна
quick_info_title - задает заголовок формы всплывающего окна

Объект QuickInfo

По умолчанию расширение Быстрая информация автоматически отображает всплывающее окно над выбранной задачей.

Начиная с версии 7.0, функциональность Быстрой информации была расширена. Теперь объект gantt.ext.quickInfo предоставляет методы для ручного управления всплывающим окном.

Вот доступные методы в объекте gantt.ext.quickInfo:

show() - открывает всплывающее окно быстрой информации для конкретной задачи. Принимает:
- id - (string|number) идентификатор задачи/ссылки/ресурса
show() - открывает всплывающее окно быстрой информации по конкретным координатам. Параметры включают:
- top - (number) координата X
- left - (number) координата Y
hide() - закрывает всплывающее окно быстрой информации. Опционально принимает:
- [ force ] - (boolean) определяет, закрывается ли всплывающее окно сразу, когда gantt.config.quick_info_detached установлено в false. Если передано true, всплывающее окно закрывается мгновенно; в противном случае оно исчезает с короткой анимацией.
setContainer() - определяет контейнер для всплывающего окна быстрой информации.
- container - (string|HTMLElement) контейнер QuickInfo. Если не указан, QuickInfo по умолчанию будет использовать первый найденный узел: gantt.$task, gantt.$grid, gantt.$layout
getNode() - извлекает элемент HTMLElement всплывающего окна быстрой информации. Возвращает null, если не инициализировано.
setContent(config) - (object) обновляет содержимое быстрой информации. Принимает объект конфигурации со следующей структурой:
- taskId - (string|number) опционально, идентификатор задачи, связанной с кнопками быстрой информации
- header - опционально, определяет заголовок всплывающего окна, который может включать:
- title - (string) опционально, заголовок всплывающего окна
- date - (string) опционально, дата всплывающего окна
- content - (string) опционально, основное содержимое всплывающего окна
- buttons - (string[]) опционально, кнопки для отображения во всплывающем окне
  Если ни заголовок, ни кнопки не предоставлены, эти области всплывающего окна будут скрыты.

Отображение Быстрой информации

Вы можете отобразить всплывающее окно для конкретной задачи, ссылки или панели ресурсов, или установить пользовательскую позицию на экране, используя метод gantt.ext.quickInfo.show():

// отображение всплывающего окна для конкретной задачи
var task = gantt.getTask(10);
gantt.ext.quickInfo.show(task.id);
 
// отображение всплывающего окна по конкретным координатам
gantt.ext.quickInfo.show(100, 200);

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

const quickInfo = gantt.ext.quickInfo;
gantt.attachEvent("onGanttReady", function(){
    quickInfo.setContainer(document.body);
})
 
gantt.attachEvent("onEmptyClick", function (e) {
  const domHelpers = gantt.utils.dom;
  const resourceElement = domHelpers.closest(e.target, "[data-resource-id]");
  if(resourceElement){
    const resourceId = resourceElement.getAttribute("data-resource-id");
    const resource = gantt.$resourcesStore.getItem(resourceId);
    const position = resourceElement.getBoundingClientRect();
    quickInfo.show(position.right, position.top);
 
    const assignedTasks = gantt.getResourceAssignments(resourceId).map(function(assign){
        return gantt.getTask(assign.task_id).text;
    });
 
    quickInfo.setContent({
        header: {
        title: resource.text,
        date: ""
    },
        content: "Назначенные задачи: " + assignedTasks.join(", "),
        buttons: []
    });
  }
});

И вот пример для отображения всплывающего окна для конкретной ссылки:

const quickInfo = gantt.ext.quickInfo;
gantt.attachEvent("onLinkClick", function(id,e){
    // любая пользовательская логика
    const link = gantt.getLink(id);
    const linksFormatter = gantt.ext.formatters.linkFormatter();
 
    const domHelpers = gantt.utils.dom;
    const position = domHelpers.getRelativeEventPosition(e, gantt.$task_data);
 
    const sourceTask = gantt.getTask(link.source);
    const targetTask = gantt.getTask(link.target);
    quickInfo.show(position.x, position.y);
 
    let linkDescr = "";
 
    if (link.type === gantt.config.links.start_to_start){
        linkDescr = "Начало к началу";
    } else if (link.type === gantt.config.links.start_to_finish){
        linkDescr = "Начало к завершению";
    } else if (link.type === gantt.config.links.finish_to_finish){
        linkDescr = "Завершение к завершению";
    } else {
        linkDescr = "Завершение к началу";
    }
 
    quickInfo.setContent({
        header: {
            title: `${linkDescr} ссылка`,
            date: ""
        },
        content: `Источник: ${sourceTask.text}<br>
                    Цель: ${targetTask.text}`,
        buttons: []
    });
});

Скрытие Быстрой информации

Чтобы закрыть всплывающее окно, используйте метод gantt.ext.quickInfo.hide(). Он работает по-разному в зависимости от настройки gantt.config.quick_info_detached:

Если параметры не переданы, всплывающее окно исчезает с короткой анимацией:

gantt.config.quick_info_detached = false;
gantt.init("gantt_here");
 
// исчезновение всплывающего окна
gantt.ext.quickInfo.hide();

Если вы хотите закрыть всплывающее окно мгновенно, передайте true в качестве параметра:

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

Когда gantt.config.quick_info_detached установлено в true, всплывающее окно всегда закрывается мгновенно.

Создание пользовательской Быстрой информации

Всплывающее окно по умолчанию включает заголовок, дату, содержимое и кнопки, и выглядит так:

Если вы хотите изменить внешний вид всплывающего окна или создать собственное, вы можете определить пользовательский HTML-контент, используя метод gantt.ext.quickInfo.setContent():

gantt.locale.labels.custom_button = "Моя кнопка"
gantt.ext.quickInfo.setContent({
    header:{
        title: "Мой пользовательский заголовок",
        date: "18 февраля, 2020"
    },
    content: "некоторое содержимое здесь",
    buttons: ["custom_button"]
})

Это приведет к появлению всплывающего окна такого вида:

Добавление пользовательских кнопок с пользовательским поведением

Объект $click позволяет определять пользовательские действия для кнопок во всплывающем окне:

gantt.config.quickinfo_buttons=["icon_delete","icon_edit","advanced_details_button"];
gantt.locale.labels["advanced_details_button"] = "Подробная информация";
gantt.init("gantt_here");
 
gantt.$click.buttons.advanced_details_button=function(id){
    gantt.message("Это подробная информация");
    return false; // останавливает поведение по умолчанию
};

Установка контейнера для Быстрой информации

Вы можете использовать метод gantt.ext.quickInfo.setContainer() для отображения всплывающего окна в пользовательском контейнере:

const quickInfo = gantt.ext.quickInfo;
quickInfo.setContainer(document.body); gantt.ext.quickInfo.show(1300,100);
gantt.locale.labels.custom_button = "Моя кнопка"
gantt.ext.quickInfo.setContent({
    header:{
        title: "Мой пользовательский заголовок",
        date: "18 февраля, 2020"
    },
    content: "некоторое содержимое здесь",
    buttons: ["custom_button"]
});

С этой настройкой всплывающее окно будет отображаться в document.body, вне контейнера Gantt:

К началу