msc-any-fullscreen-popup

Imagine the feature to open a popup window in fullscreen mode. With window-management support, user could directly open a popup window in fullscreen mode in just one click. Once the user has granted the permission, Developers could use window.open method to do this fullscreen popup action.（For more detail check this page -「New origin trial for fullscreen popup windows」）

<msc-any-fullscreen-popup /> is a web component which wrap this feature. Developers could apply it to any element they like.

Basic Usage

<msc-any-fullscreen-popup /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-any-fullscreen-popup />'s html structure and everything will be all set.

• Required Script

<script
  type="module"
  src="https://your-domain/wc-msc-any-fullscreen-popup.js">        
</script>

• Structure

Put <msc-any-fullscreen-popup /> into HTML document. It will have different functions and looks with attribute mutation.

<msc-any-fullscreen-popup>
  <script type="application/json">
    {
      "winwidth": 450,
      "winheight": 300,
      "url": "https://developer.chrome.com/"
    }
  </script>

  <!-- Put any HTML element you like -->
  <button
    type="button"
    class="element-i-like-to-have-fullscreen-popup"
  >
    ...
    ...
    ...
  </button>
</msc-any-fullscreen-popup>

Otherwise, developers could also choose remoteconfig to fetch config for <msc-any-fullscreen-popup />.

<msc-any-fullscreen-popup
  remoteconfig="https://your-domain/api-path"
>
  ...
</msc-any-fullscreen-popup>

JavaScript Instantiation

<msc-any-fullscreen-popup /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module">
import { MscAnyFullscreenPopup } from 'https://your-domain/wc-msc-any-fullscreen-popup.js';

const template = document.querySelector('.my-template');

// use DOM api
const nodeA = document.createElement('msc-any-fullscreen-popup');
document.body.appendChild(nodeA);
nodeA.appendChild(template.content.cloneNode(true));
nodeA.url = 'https://developer.chrome.com/';

// new instance with Class
const nodeB = new MscAnyFullscreenPopup();
document.body.appendChild(nodeB);
nodeB.appendChild(template.content.cloneNode(true));
nodeB.winwidth = 450;
nodeB.winheight = 300;
nodeB.url = 'https://developer.chrome.com/';

// new instance with Class & default config
const config = {
  winwidth: 450,
  winheight: 300,
  url: 'https://developer.chrome.com/'
};
const nodeC = new MscAnyFullscreenPopup(config);
document.body.appendChild(nodeC);
nodeC.appendChild(template.content.cloneNode(true));
</script>

Attributes

<msc-any-fullscreen-popup /> supports some attributes to let it become more convenience & useful.

• winwidth

Set popup window width. Default is empty string.（Once winwidth & winheight not set, popup window size will be current viewport size.)

<msc-any-fullscreen-popup winwidth="450">
  ...
</msc-any-fullscreen-popup>

• winheight

Set popup window height. Default is is empty string.（Once winwidth & winheight not set, popup window size will be current viewport size.)

<msc-any-fullscreen-popup winheight="300">
  ...
</msc-any-fullscreen-popup>

• url

Set url addess for popup window. Default is is empty string.

<msc-any-fullscreen-popup url="https://developer.chrome.com/">
  ...
</msc-any-fullscreen-popup>

Properties

| Property Name | Type | Description | | ----------- | ----------- | ----------- | | winwidth | Number | Getter / Setter for popup window width. Default is empty string.（Once winwidth & winheight not set, popup window size will be current viewport size.) | | winheight | Number | Getter / Setter for popup window height. Default is empty string.（Once winwidth & winheight not set, popup window size will be current viewport size.) | | url | String | Getter / Setter url addess for popup window. Default is empty string. |

Methods

| Method Signature | Description | | ----------- | ----------- | | popup() | Popup window.（requires a user gesture） |

Events

| Event Signature | Description | | ----------- | ----------- | | msc-any-fullscreen-popup-click | Fired when <msc-any-fullscreen-popup /> clicked. | | msc-any-fullscreen-popup-error | Fired when error occured. Developers could get message througn event.detatil. |

Reference

• New origin trial for fullscreen popup windows
• Managing several displays with the Window Management API
• MDN > window.open
• <msc-any-fullscreen-popup /> demo
• YouTube > tutorial