Полноэкранный режим

Начиная с версии 3.3, библиотека включает расширение fullscreen. Эта функция позволяет развернуть компонент в полноэкранный режим с использованием FullScreen API, когда это поддерживается (проверьте список поддерживаемых браузеров).

Для старых браузеров грид настраивается так, чтобы занимать 100% размера окна.

Чтобы включить поддержку полноэкранного режима, активируйте плагин fullscreen с помощью метода gantt.plugins:

gantt.plugins({
    fullscreen: true
});

Компонент не поставляется с встроенным элементом управления для переключения полноэкранного режима. Вам нужно добавить его на вашу страницу или использовать пример, приведенный ниже:

<input id="fullscreen_button" type="button" value="Toggle Fullscreen"/>
 
<script>
var button = document.getElementById("fullscreen_button");
    button.addEventListener("click", function(){
        if (!gantt.getState().fullscreen) {
            // развернуть Гантт на весь экран
            gantt.expand();
        }
        else {
            // вернуть Гантт к нормальному размеру
            gantt.collapse();
        }
    }, false);
</script>

Нажатие кнопки будет переключать Гантт между его оригинальным размером и полноэкранным режимом.

Related sample:  Full Screen

Обзор API

Вы можете использовать два метода для управления режимом отображения Гантта:

• expand: Разворачивает Гантт в полноэкранный режим.

gantt.expand();

• collapse: Возвращает Гантт из полноэкранного режима в его нормальный размер.

gantt.collapse();

Поддерживаемые события

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

• onBeforeExpand
• onBeforeCollapse
• onExpand
• onCollapse

// Перед развертыванием Гантта на весь экран
gantt.attachEvent("onBeforeExpand",function(){
    // здесь пользовательская логика    
    return true;
});
 
// Перед выходом Гантта из полноэкранного режима
gantt.attachEvent("onBeforeCollapse",function(){
    // здесь пользовательская логика    
    return true;
});
 
// Когда Гантт развернут на весь экран
gantt.attachEvent("onExpand", function (){
    // здесь пользовательская логика
});
 
// Когда Гантт выходит из полноэкранного режима
gantt.attachEvent("onCollapse", function (){
    // здесь пользовательская логика
});

API для полноэкранного режима

Объект fullscreen предлагает четыре метода для управления полноэкранным режимом Гантта и его дополнительными элементами:

• expand(): Разворачивает Гантт на весь экран.

gantt.ext.fullscreen.expand();

• collapse(): Возвращает Гантт из полноэкранного режима в его нормальный размер.

gantt.ext.fullscreen.collapse();

• toggle(): Переключает между полноэкранным и нормальным режимами.

gantt.ext.fullscreen.toggle();

• getFullscreenElement(): Возвращает DOM-элемент, который будет развернут на весь экран.

gantt.ext.fullscreen.getFullscreenElement();

По умолчанию, getFullscreenElement() возвращает HTML-контейнер диаграммы Гантта. Вы можете изменить этот метод, если хотите включить дополнительные элементы в полноэкранный режим (узнайте как здесь).

Гантт с заголовком/панелью инструментов в полноэкранном режиме

Если вы хотите включить дополнительные элементы, такие как заголовок или панель инструментов в полноэкранном режиме, переопределите метод getFullscreenElement(), чтобы вернуть пользовательский контейнер:

<div id="myCover">
    <div class="gantt_control">
        <button id="toggle_fullscreen" 
                onclick="gantt.ext.fullscreen.toggle();">toggle fullscreen</button>
    </div>
        <div id="gantt_here"></div>
</div>

Затем обновите getFullscreenElement(), чтобы указать ваш пользовательский контейнер:

gantt.ext.fullscreen.getFullscreenElement = function() {
    return document.getElementById("myCover");
}
gantt.init("gantt_here");

Related sample:  Full Screen with additional elements

Устранение неполадок полноэкранного режима

Полноэкранный режим может не работать, если Гантт ограничен в развертывании. Это может произойти, если:

• Атрибут allowfullscreen или свойство allow="fullscreen" отсутствуют.
• Значение "fullscreen" не указано в свойстве allow.

Если эти условия не выполнены, Гантт не развернется на весь экран. Вы можете испытать это в нашем инструменте фрагментов (Пример 1, Пример 2).

Полноэкранный режим в Salesforce

Расширение Fullscreen несовместимо с приложениями Salesforce, использующими Locker Service. Locker Service предотвращает развертывание элементов на весь экран.

Это означает, что оно не будет работать с фреймворком Lightning Aura или Lightning Web Components, хотя может функционировать с фреймворком Visualforce.

Чтобы проверить доступность полноэкранного режима в вашем приложении, добавьте следующий фрагмент в ваш конфигурационный код:

console.log("document.body.requestFullscreen", document.body.requestFullscreen)

Если вывод показывает undefined, функция отключена, и Гантт не может развернуться на весь экран.

К началу