Как поставить условие?

Question

[lemonlimelike]

есть переменная

var videoElement = document.getElementById("video");

есть функция, которая включает полно экранный режим

function toggleFullScreen() {
		  if (!document.fullscreenElement &&    // alternative standard method
		      !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
		    if (document.documentElement.requestFullscreen) {
		      document.documentElement.requestFullscreen();
		    } else if (document.documentElement.mozRequestFullScreen) {
		      document.documentElement.mozRequestFullScreen();
		    } else if (document.documentElement.webkitRequestFullscreen) {
		      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
		    }
		  } else {
		    if (document.cancelFullScreen) {
		      document.cancelFullScreen();
		    } else if (document.mozCancelFullScreen) {
		      document.mozCancelFullScreen();
		    } else if (document.webkitCancelFullScreen) {
		      document.webkitCancelFullScreen();
		    }
		  }
		}

Как оформить это условие, если видео находится в полно экранном режиме, то.....
Так будет правильно?

if(videoElement == toggleFullScreen){
document.body.style.display = ('none');
}

Или есть что то получше?

Comments

[sim3x]

videoElement == toggleFullScreen
Сравниваем дом елемент с именем функции, которая ничего не возвращает

И чего вы ожидаете?

[lemonlimelike]

sim3x: Я ожидаю, что все пропадет, но оно нихрена не пропадает

[sim3x]

lemonlimelike:

У вас провал в базе знаний по жс
Стоит подтянуть и вопрос решится сам собой

[Андрей]

не совсем по теме то может будет интересно, используйте es6, сейчас же 2к17((

let toggleFullScreen = () => {
  const { requestFullscreen, mozRequestFullScreen, webkitRequestFullscreen } = document.documentElement;
  const { fullscreenElement, mozFullScreenElement, webkitFullscreenElement,
         cancelFullScreen, mozCancelFullScreen,webkitCancelFullScreen
  } = document;
  
      if (!fullscreenElement &&    // alternative standard method
          !mozFullScreenElement && !webkitFullscreenElement) {  // current working methods
        if (requestFullscreen) {
         requestFullscreen();
        } else if (mozRequestFullScreen) {
          mozRequestFullScreen();
        } else if (webkitRequestFullscreen) {
          webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
      } else {
        if (cancelFullScreen) {
          cancelFullScreen();
        } else if (mozCancelFullScreen) {
          mozCancelFullScreen();
        } else if (webkitCancelFullScreen) {
          webkitCancelFullScreen();
        }
      }
    }

или даже так

let toggleFullScreen = () => {
  const { requestFullscreen, mozRequestFullScreen, webkitRequestFullscreen } = document.documentElement;
  const { fullscreenElement, mozFullScreenElement, webkitFullscreenElement,
         cancelFullScreen, mozCancelFullScreen,webkitCancelFullScreen
  } = document;
  
      if (!fullscreenElement && !mozFullScreenElement && !webkitFullscreenElement) {  // current working methods
        requestFullscreen && requestFullscreen() || mozRequestFullScreen &&mozRequestFullScreen();
          || webkitRequestFullscreen && webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
      } else
        cancelFullScreen && cancelFullScreen() || mozCancelFullScreen && mozCancelFullScreen() 
          || webkitCancelFullScreen &&webkitCancelFullScreen();
        }
    }

[lemonlimelike]

sim3x: Потому что я новичок в этом, только начал его немного изучать

[sim3x]

lemonlimelike:

прекрасно
Новичкам нужно начинать с изучения азов

[lemonlimelike]

sim3x: Просто... скажите мне пожалуйста, как правильно поставить условие, чтоб когда видео бы находилось в fullscreen весь body становился display:none

Answer 1

[Андрей]

function toggleFullScreen() {
      if (!document.fullscreenElement &&    // alternative standard method
          !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
        if (document.documentElement.requestFullscreen) {
          document.documentElement.requestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
          document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
          document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
        return true
      } else {
        if (document.cancelFullScreen) {
          document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
        return false
      }
    }

toggleFullScreen() && document.body.style.display = ('none');

или

function toggleFullScreen() {
      if (!document.fullscreenElement &&    // alternative standard method
          !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
        if (document.documentElement.requestFullscreen) {
          document.documentElement.requestFullscreen() && return true;
        } else if (document.documentElement.mozRequestFullScreen) {
          document.documentElement.mozRequestFullScreen() && return true;
        } else if (document.documentElement.webkitRequestFullscreen) {
          document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT) && return true;
        }
      } else {
        if (document.cancelFullScreen) {
          document.cancelFullScreen() && return false;
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen() && return false;
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen() && return false
        }
      }
    }

toggleFullScreen() && document.body.style.display = ('none');

Comments

[lemonlimelike]

Что то не работает вот это toggleFullScreen() && document.body.style.display = ('none');

[Андрей]

lemonlimelike:

toggleFullScreen() && document.body.style.display = 'none';

или

if (toggleFullScreen())  {console.log('document.body.style'))
if (toggleFullScreen() === true)  {console.log('document.body.style'))
console.log(toggleFullScreen())

напиши это и смотри в консоль

[lemonlimelike]

Андрей: Появились:

document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);

Ошибка: Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

И вот тут console.log(toggleFullScreen()); пишет undefined

Answer 2

[Сергей Сосновский]

;(function(window, document) {
	const foreach = function(a, b) {
		for( let i = 0; i < b.length; i++ ) if( void 0 !== a[b[i]] ) {
			a[b[i]](); break;
		}
	};

	window['Fullscreen'] = {
		launch : function(a) {
			foreach(a || document.documentElement, [
				"requestFullscreen", "webkitRequestFullscreen", "mozRequestFullScreen", "msRequestFullscreen"
			]);
		},
		cancel : function(a) {
			foreach(a || document, [
				"exitFullscreen", "webkitExitFullscreen", "mozCancelFullScreen", "msExitFullscreen"
			]);
		},
		check : function() {
			return Boolean(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
		}
	};
})(window, document);

document.body.style.display = Fullscreen.check() ? 'none' : 'block';

Comments

[Kovalsky]

1. Массивы с ключами хранятся без всякой нужды,
2. Лишних циклов при каждом вызове можно избежать,
3. Кастомная реализация forEach будет выполняться медленнее, чем нативные аналоги,

4. Title case в JS community принято использовать для конструкторов.

[Сергей Сосновский]

Никита Полевой:
1. Не понял вас
2. А то ж тут много шиклов! (приведите свой пример, возьму его на заметку)
3. Согласен, но реализовал кастом, только ради break;

[Kovalsky]

1 & 2. Ну, массивы с ключами, которые вы каждый раз перебираете, они у вас хранятся без нужды, так обычно не делают. Можно один раз перебрать, выбрать нужный ключ и его уже использовать. Суть же не в том, что циклов много и они требуют много памяти или процессорного времени; конечно можно еще сотню-другую ключей в эти массивы положить, и разница в производительности будет почти незаметна. Просто чисто теоретически все эти операции совсем ни к чему. Мой пример - фильтруете каждый из массивов, достаёте ключ, его бросаете в замыкание, функция его использует. Массивы отсеиваются gc, каждая функция выполняет свой метод, не перебирает каждый раз.