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

Начиная с версии 3.3, библиотека предоставляет расширение fullscreen.

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

В старых браузерах Gantt просто растягивается на 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 на весь экран
            gantt.expand();
        }
        else {
            // вернуть gantt к обычному размеру
            gantt.collapse();
        }
    }, false);
</script>

При нажатии на кнопку Gantt будет переключаться между исходным размером и полноэкранным режимом.

Related sample:  Full Screen

Обзор API

Существует два основных метода для управления режимом отображения Gantt:

• expand — переводит Gantt в полноэкранный режим

gantt.expand();

• collapse — возвращает Gantt из полноэкранного режима к обычному виду

gantt.collapse();

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

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

• onBeforeExpand
• onBeforeCollapse
• onExpand
• onCollapse

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

Fullscreen API

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

• expand() — переводит Gantt в полноэкранный режим

gantt.ext.fullscreen.expand();

• collapse() — выходит из полноэкранного режима и возвращает Gantt к обычному размеру

gantt.ext.fullscreen.collapse();

• toggle() — переключает между полноэкранным и обычным режимами

gantt.ext.fullscreen.toggle();

• getFullscreenElement() — возвращает DOM-элемент, который будет развёрнут на весь экран при вызове expand()

gantt.ext.fullscreen.getFullscreenElement();

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

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

API Gantt позволяет расширить полноэкранный режим на другие элементы с помощью метода getFullscreenElement() объекта fullscreen:

gantt.ext.fullscreen.getFullscreenElement();

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

<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

Почему полноэкранный режим может не работать?

Расширение fullscreen работает только в том случае, если Gantt разрешено переходить в полноэкранный режим.

Если Gantt находится внутри iframe, в котором:

• отсутствует атрибут allowfullscreen или разрешение allow="fullscreen"
• или атрибут allow не содержит "fullscreen"

то Gantt не сможет перейти в полноэкранный режим (проверьте это в нашем snippet tool (Example 1, Example 2)).

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

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

В частности, расширение не будет работать с Lightning Aura или Lightning Web Components, но может работать с фреймворком Visualforce.

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

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

Если в выводе будет undefined, полноэкранный режим отключён и Gantt не сможет перейти в полноэкранный режим.

К началу