Fullscreen on\off?

Question

[SteepNET]

Добрый день!
Хочу добавить fullscreen по кнопке , решил использовать данный jQuery plugin . В общем то сделал так

<li><a class="button button4" onclick="$(document).fullScreen(true)"><i class="fas fa-expand-arrows-alt fa-lg"></i></a></li>

<script>
    $(function() {
        $(".fullscreen-supported").toggle($(document).fullScreen() != null);
        $(".fullscreen-not-supported").toggle($(document).fullScreen() == null);
        $(document).bind("fullscreenchange", function(e) {
            console.log("Full screen changed.");
            $("#status").text($(document).fullScreen() ?
                "Full screen enabled" : "Full screen disabled");
        });
        $(document).bind("fullscreenerror", function(e) {
            console.log("Full screen error.");
            $("#status").text("Browser won't enter full screen mode for some reason.");
        });
    });
</script>

Работает,но вызвало затруднение сделать что бы когда fullscreen надо инвертить кнопку что бы срабатывал метод $(document).fullScreen(false); , другими словами в обычном режиме на кнопке метод $(document).fullScreen(true); а когда развернут браузер на кнопке был бы метод $(document).fullScreen(false);

На кнопку вешаю FA соответственно хотелось бы и ее менять в Full screen виде..
Добавил в теги Битрикс, пилю все на битриксе,хотя думаю это не играет тут особой разницы..

Comments

[PetrPo]

SteepNET, библиотекой этой не пользовался, не могу судить о ее преимуществах и недостатках.
По сути, примерно такого кода должно быть достаточно (с jQuery приведу пример, раз уж ты его используешь)

$(document).ready(function() {
	$('твой селектор').on('click', function() {
		if(document.fullscreenElement) {
			document.exitFullscreen();
		}
		else {
			document.documentElement.requestFullscreen();
		}		
	});
});

[PetrPo]

Менять <i class="fas fa-expand-arrows-alt fa-lg"></i> в зависимости от состояния, ты имеешь ввиду внешний вид?
Ну и про то что у тебя fullscreen сваливается при переходе на другую страницу, ты хочешь типа как fullscreen браузера при нажатии F11?

[SteepNET]

PetrPo, Ну иконку менять в зависимости от состояния не обязательно, но желательно хотелось бы визуально же более удобно воспринимать это..
Да, абсолютно верно, когда F11 то при переходах по разделам не сваливается этот режим, тут же с этим плагином он вываливается стоит перезагрузить документ, перейти в другой раздел и.т.д.., там в дискуссиях тое был такой вопрос но решения нет...
Необязательно через jQuery, просто уж нашел этот метод ,решил попробовать, он оказался вроде самым свежим , но имеет вот косяк с перезагрузокй документа, где то я все же видел тоже по кнопке fullscreen и он не сбрасывался..

[PetrPo]

SteepNET, ну менять иконку нет проблем, в jquery есть функции добавления/удаления класса addClass/removeClass
от этого класса пишешь css (ну или fa-fa-шки свои меняешь, если иконки подходящие есть)
А с fullscreen и переходом не знаю, все-таки F11 это браузерная опция, а ты javascript-ом оперируешь - то есть тут эмуляция как и вся другая эмуляция, оч. похоже, но не на 100%.
Попробовал просто при загрузке страницы сделать fullscreen, в консоли

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

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

[SteepNET]

PetrPo, Ясно, значит о Fullscreen мод можно забыть =( но было бы удобно если бы он был...

Answer 1

[Никита]

onclick с кнопки уберите и реализуйте все через js файл.

$(document).ready(function() {

    $('.button4').on('click', function () {
        if ($(this).hasClass('active-full')) {
            $(document).fullScreen(false);
            $(this).removeClass('active-full');
        } else {
            $(document).fullScreen(true);
            $(this).addClass('active-full');
        }
    });

});

Answer 2

[fixeri]

Есть же $(document).toggleFullScreen();

Comments

[SteepNET]

Подскажите как применить можно ?

[fixeri]

SteepNET,

<li><a class="button button4" onclick="$(document).toggleFullScreen()"><i class="fas fa-expand-arrows-alt fa-lg"></i></a></li>

[SteepNET]

fixeri, Да,действительно работает, конечно в идеале хотелось бы и <i class="fas fa-expand-arrows-alt fa-lg"></i> менять в зависимости от состояния...

[SteepNET]

И потом почему то получается что если перейти на сайте в другой раздел окно снова становиться обычным...