[update] add useStyleFirst option as required in #5

README.md

@@ -70,7 +70,7 @@ Represent is fullscreen or not.
 * alias
   * addEventListener
 * Arguments
-  * {string} name: event's name, only can be 'fullscreenchange' and 'fullscreenerror'
+  * {string} name: event's name, only can be 'fullscreenchange',  'fullscreenerror' or 'esfullscreenmethodchange' (supported after [0.3.0](https://github.com/toxic-johann/es-fullscreen/releases/tag/0.3.0))
   * {Function} fn
   * {Element} element: default to be `document`
 * Details
@@ -93,6 +93,18 @@ esFullscreen.open(document.body); // change!
 
 Totally the same as `on`.
 
+### useStyleFirst
+
+> supported after [0.3.0](https://github.com/toxic-johann/es-fullscreen/releases/tag/0.4.0)
+
+* type
+  * boolean
+* default
+  * `false`
+* Details
+
+When it's true, we will use style to fullscreen but not native way. You can change it and it will emit 'esfullscreenmethodchange' event.
+
 ## Changelog
 
 Please read the [realase notes](https://github.com/toxic-johann/es-fullscreen/releases).

__tests__/error.js

@@ -2,7 +2,7 @@ import esFullscreen from '../src/index';
 describe('error check', () => {
   describe('on/off', () => {
     test('only can handle fullscreenchange and fullscreenerror event', () => {
-      expect(() => esFullscreen.on('click', () => {})).toThrow('ESFullScreen only handle "fullscreenchange" and "fullscreenerror" event, but not click. Pleas pass in an right event name.');
+      expect(() => esFullscreen.on('click', () => {})).toThrow('ESFullScreen only handle "fullscreenchange", "fullscreenerror" and "esfullscreenmethodchange" event, but not click. Pleas pass in an right event name.');
     });
     test('need a function', () => {
       expect(() => esFullscreen.on('fullscreenchange', 1)).toThrow('You must pass in an legal function, but not number.');

__tests__/native-support.js

@@ -12,4 +12,20 @@ document.body.requestFullscreen = document.requestFullscreen || (() => {
 });
 import tester from './base';
 const esFullscreen = require('../src/index.js').default;
-tester(esFullscreen);
+
+describe('use native to test', () => {
+  tester(esFullscreen);
+});
+
+describe('use style event when native is supported', () => {
+  beforeAll(() => {
+    esFullscreen.useStyleFirst = true;
+  });
+
+  tester(esFullscreen);
+
+  afterAll(() => {
+    esFullscreen.useStyleFirst = false;
+  });
+});
+

__tests__/use-style-first.js

@@ -0,0 +1,14 @@
+import esFullscreen from '../src/index';
+describe('use-style-fist', () => {
+  test('esfullscreenmethodchange', () => {
+    const fn = jest.fn();
+    esFullscreen.on('esfullscreenmethodchange', fn);
+    expect(fn).toHaveBeenCalledTimes(0);
+    esFullscreen.useStyleFirst = true;
+    expect(fn).toHaveBeenCalledTimes(1);
+    esFullscreen.useStyleFirst = true;
+    expect(fn).toHaveBeenCalledTimes(1);
+    esFullscreen.useStyleFirst = false;
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+});

demo/base/index.css

@@ -29,4 +29,10 @@ html, body {
 #events {
   padding: 5px;
   font-size: 1rem;
+}
+
+button {
+  position: fixed;
+  right: 10px;
+  top: 10px;
 }

demo/base/index.html

@@ -17,6 +17,7 @@
       I am node2
     </div>
     <section id="events"></section>
+    <button id="method-switch">use style</button>
     <!-- <script type="text/javascript" src="./dist.js"></script> -->
   </body>
 </html>

demo/base/index.js

@@ -11,6 +11,25 @@ setTimeout(() => {
         }
       });
   });
+
+  const button = document.getElementById('method-switch');
+
+  function setButtonText() {
+    const text = esFullscreen.useStyleFirst
+      ? 'use native'
+      : 'use style';
+    button.innerText = text;
+  }
+
+  if (esFullscreen.isNativelySupport) {
+    button.addEventListener('click', () => {
+      esFullscreen.useStyleFirst = !esFullscreen.useStyleFirst;
+      setButtonText();
+    });
+    document.addEventListener('esfullscreenmethodchange', setButtonText);
+  } else {
+    button.style.display = 'none';
+  }
 }, 1000);
 esFullscreen.on('fullscreenchange', evt => {
   const pre = document.createElement('pre');

src/index.js

@@ -4,6 +4,7 @@ import { DESKTOP_FULLSCREEN_STYLE, FULLSCREEN_CHANGE, FULLSCREEN_ERROR } from '.
 import { setStyle, native, dispatchEvent, supportDocument } from './utils';
 import { autobindClass, alias } from 'toxic-decorators';
 const fullscreenEnabled = native('fullscreenEnabled');
+let useStyleFirst = false;
 
 @autobindClass()
 class ESFullScreen {
@@ -15,12 +16,28 @@ class ESFullScreen {
   _htmlOverflow: string;
   isFullscreen: boolean;
   isNativelySupport: boolean;
+  useStyleFirst: boolean;
+  hasUsedStyle: boolean;
 
   _fullscreenElement = null;
   isNativelySupport = (defined(native('fullscreenElement')) &&
     (!defined(fullscreenEnabled) || fullscreenEnabled === true));
   _openKey = supportDocument ? native(document.body || document.documentElement, 'requestFullscreen', { keyOnly: true }) : '';
   _exitKey = native('exitFullscreen', { keyOnly: true });
+  _useStyleFirst = false;
+  hasUsedStyle = false;
+
+  get useStyleFirst(): boolean {
+    return useStyleFirst;
+  }
+
+  set useStyleFirst(value: boolean): boolean {
+    value = !!value;
+    if (value === useStyleFirst) return value;
+    useStyleFirst = value;
+    dispatchEvent(document, 'esfullscreenmethodchange');
+    return value;
+  }
 
   get fullscreenElement(): Element | null {
     const element = [
@@ -55,21 +72,23 @@ class ESFullScreen {
       this.exit();
     }
 
-    if (this.isNativelySupport) {
-      // $FlowFixMe: support computed key on HTMLElment here
-      isFunction(element[this._openKey]) && element[this._openKey]();
-      return true;
-    }
+    if (!this.useStyleFirst) {
+      if (this.isNativelySupport) {
+        // $FlowFixMe: support computed key on HTMLElment here
+        isFunction(element[this._openKey]) && element[this._openKey]();
+        return true;
+      }
 
-    // add wekitEnterFullscreen support as required in https://github.com/toxic-johann/es-fullscreen/issues/4
-    /* istanbul ignore if  */
-    if (element instanceof HTMLVideoElement &&
-      element.webkitSupportsFullscreen &&
-      // $FlowFixMe: support webkitEnterFullscreen on some werid safari
-      isFunction(element.webkitEnterFullscreen)) {
-      element.webkitEnterFullscreen();
-      this._fullscreenElement = element;
-      return true;
+      // add wekitEnterFullscreen support as required in https://github.com/toxic-johann/es-fullscreen/issues/4
+      /* istanbul ignore if  */
+      if (element instanceof HTMLVideoElement &&
+        element.webkitSupportsFullscreen &&
+        // $FlowFixMe: support webkitEnterFullscreen on some werid safari
+        isFunction(element.webkitEnterFullscreen)) {
+        element.webkitEnterFullscreen();
+        this._fullscreenElement = element;
+        return true;
+      }
     }
 
     this._savedStyles = Object.keys(DESKTOP_FULLSCREEN_STYLE)
@@ -91,14 +110,17 @@ class ESFullScreen {
       document.documentElement.style.overflow = 'hidden';
     }
     this._fullscreenElement = element;
+    this.hasUsedStyle = true;
     dispatchEvent(element, 'fullscreenchange');
     return true;
   }
 
   @alias('exitFullscreen')
   exit() {
     if (!this.isFullscreen) return false;
-    if (this.isNativelySupport) {
+    if (this.isNativelySupport &&
+      !this.useStyleFirst &&
+      !this.hasUsedStyle) {
       // $FlowFixMe: support document computed key here
       document[this._exitKey]();
       return true;
@@ -130,13 +152,18 @@ class ESFullScreen {
   _handleEvent(element: Element | Document, behavior: string, name: string, fn: Function) {
     /* istanbul ignore else  */
     if (process.env.NODE_ENV !== 'production') {
-      if (name !== 'fullscreenchange' && name !== 'fullscreenerror') throw new Error(`${this.constructor.name} only handle "fullscreenchange" and "fullscreenerror" event, but not ${name}. Pleas pass in an right event name.`);
+      if (name !== 'fullscreenchange' &&
+        name !== 'fullscreenerror' &&
+        name !== 'esfullscreenmethodchange'
+      ) throw new Error(`${this.constructor.name} only handle "fullscreenchange", "fullscreenerror" and "esfullscreenmethodchange" event, but not ${name}. Pleas pass in an right event name.`);
       if (!isFunction(fn)) throw new Error(`You must pass in an legal function, but not ${typeof fn}.`);
       if (!isElement(element) && element !== document) throw new Error(`You should passed in a legal element, but not ${typeof element}.`);
     }
     const names = name === 'fullscreenchange'
       ? FULLSCREEN_CHANGE
-      : FULLSCREEN_ERROR;
+      : name === 'fullscreenerror'
+        ? FULLSCREEN_ERROR
+        : [ name ];
     names.forEach(name => {
       // $FlowFixMe: support computed attribute here
       element[behavior](name, fn);