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

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

quick_info

QuickInfo extension

Чтобы начать использовать расширение, просто активируйте плагин "Quick Info" с помощью метода gantt.plugins.

gantt.plugins({
    quick_info: true
});

Если вы хотите отключить расширение quick_info, установите свойство show_quick_info в false:

gantt.config.show_quick_info = false;
gantt.init("gantt_here");

Обзор API

Расширение Quick Info предоставляет набор 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

По умолчанию расширение Quick Info автоматически показывает всплывающее окно над выбранной задачей.

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

Объект gantt.ext.quickInfo предлагает следующие методы:

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

Если не указаны ни header, ни buttons, соответствующие секции окна будут скрыты.

####Отображение Quick Info

Всплывающее окно можно показать для конкретной задачи, ссылки, панели ресурсов или в произвольном месте экрана с помощью метода 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: "Assigned tasks: " + 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 = "Start to start";
    } else if (link.type === gantt.config.links.start_to_finish){
        linkDescr = "Start to finish";
    } else if (link.type === gantt.config.links.finish_to_finish){
        linkDescr = "Finish to Finish";
    } else {
        linkDescr = "Finish to start";
    }

    quickInfo.setContent({
        header: {
            title: `${linkDescr} link`,
            date: ""
        },
        content: `Source: ${sourceTask.text}


                    Target: ${targetTask.text}`,
        buttons: []
    });
});

####Скрытие Quick Info

Чтобы закрыть всплывающее окно, используйте метод 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, окно всегда закрывается мгновенно.

####Создание собственного QuickInfo

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

quick_default

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

gantt.locale.labels.custom_button = "My button"
gantt.ext.quickInfo.setContent({
    header:{
        title: "My custom header",
        date: "18th of February, 2020"
    },
    content: "some content here",
    buttons: ["custom_button"]
})

В результате появится всплывающее окно quick info такого вида:

quick_custom

####Добавление пользовательских кнопок с собственной логикой

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

gantt.config.quickinfo_buttons="[""icon_delete","icon_edit","advanced_details_button"];
gantt.locale.labels["advanced_details_button"] = "Advanced Info";
gantt.init("gantt_here");
 
gantt.$click.buttons.advanced_details_button="function(id){"
    gantt.message("These are advanced details");
    return false; //блокирует стандартное поведение
};

####Указание контейнера для QuickInfo

Используйте gantt.ext.quickInfo.setContainer(), чтобы отобразить всплывающее окно quick info внутри пользовательского контейнера:

const quickInfo = gantt.ext.quickInfo;
quickInfo.setContainer(document.body); /*!*/
gantt.ext.quickInfo.show(1300,100);
gantt.locale.labels.custom_button = "My button"
gantt.ext.quickInfo.setContent({
    header:{
        title: "My custom header",
        date: "18th of February, 2020"
    },
    content: "some content here",
    buttons: ["custom_button"]
});

Теперь окно с пользовательским содержимым появится внутри document.body, вне контейнера Gantt:

quick_container

Обзор API​

Объект QuickInfo​

Обзор API

Объект QuickInfo