Automatically toggle fullscreen for an element on page refresh (10.0.17)

Flow
1

Hi,

Im using screenfull to toggle fullscreen for an element like this:

<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../../bower_components/vaadin-ordered-layout/vaadin-vertical-layout.html">

<dom-module id="fullscreen-layout">
  <template strip-whitespace>
    <vaadin-vertical-layout theme="spacing" id="container">    
    <vaadin-button theme="icon-button" class=squarebutton id="fullscreen" on-click="openFullscreen" ><iron-icon icon="vaadin:expand-full"></iron-icon></vaadin-button>
    <slot></slot>
    </vaadin-vertical-layout>
  </template>

  <script>
  	
    class FullscreenButton extends Polymer.GestureEventListeners(Polymer.Element) {
      static get is() { return 'fullscreen-layout'; }

      openFullscreen() {
		if (screenfull.enabled) {
			screenfull.toggle(this);
		}
      }
   	}
    window.customElements.define(FullscreenButton.is, FullscreenButton);
    
  </script>
  <script src="../../../node_modules/screenfull/dist/screenfull.js"></script>
</dom-module>

Its working fine but I want to toggle fullscreen automatically if the user refreshes the page. I dont know how to do this since I cant access the fullscreen-layout from JS (because document.getElementById always returns null/undefined). Any way I can do this in JS or in java?

2

Not automatically, at least not with all browsers. I made [this add-on]
(https://vaadin.com/directory/component/fullscreen/overview) to toggle fullscreen mode, and in doing so, I discovered that at least some browsers require the fullscreen mode to be toggled from a user action, so in the add-on’s case it’s done with a button click. The browser will ignore the JavaScript call if you’re trying to execute it without user interaction.

3

Thing is, I can call this on attach listener and it toggles fullscreen for the whole page just fine.
UI.getCurrent().getPage().executeJavaScript("screenfull.toggle();");

But how do I get the fullscreen-layout element so I can pass it as a parameter to the toggle method? Something like this
UI.getCurrent().getPage().executeJavaScript("screenfull.toggle(fullscreenLayout);");

4

The executeJavaScript (or executeJS) method takes more optional parameters after the JavaScript string. There you can pass parameters, for example Elements. So
UI.getCurrent().getPage().executeJS("$0.someFunction()", someComponent.getElement()); will call the function someFunction() of the element for someComponent. Another way to achieve the same would be calling someComponent.getElement().callJsFunction("someFunction").

5

Oh cool thanks. I didn’t know you could pass elements directly to JS.
Probably should’ve checked the documentation on this :smiley: https://vaadin.com/docs/v10/flow/advanced/tutorial-execute-javascript.html

PS. I dont know how UI.getCurrent().getPage().executeJavaScript("screenfull.toggle();" ); worked before but it no longer does.
Lesson learned.

6

If it’s not working when it used to, it could be that there’s either some timing or scoping issue, but it’s hard to say without debugging the code. If there’s some error in the browser’s JavaScript console, that might tell more.