Change to use a module based approach

Author: jsilvermist

.gitignore

@@ -1,3 +1,2 @@
-bower_components
 node_modules
 *.sublime-*

fullscreen-api.html

@@ -1,99 +1,110 @@
-(function(document) {
-  'use strict';
-
-  const apis = {
-    w3: {
-      enabled: "fullscreenEnabled",
-      element: "fullscreenElement",
-      request: "requestFullscreen",
-      exit:    "exitFullscreen",
-      events: {
-        change: "fullscreenchange",
-        error:  "fullscreenerror"
-      }
+const apis = {
+  w3: {
+    enabled: "fullscreenEnabled",
+    element: "fullscreenElement",
+    request: "requestFullscreen",
+    exit:    "exitFullscreen",
+    events: {
+      change: "fullscreenchange",
+      error:  "fullscreenerror",
     },
-    webkit: {
-      enabled: "webkitFullscreenEnabled",
-      element: "webkitCurrentFullScreenElement",
-      request: "webkitRequestFullscreen",
-      exit:    "webkitExitFullscreen",
-      events: {
-        change: "webkitfullscreenchange",
-        error:  "webkitfullscreenerror"
-      }
+  },
+  webkit: {
+    enabled: "webkitFullscreenEnabled",
+    element: "webkitCurrentFullScreenElement",
+    request: "webkitRequestFullscreen",
+    exit:    "webkitExitFullscreen",
+    events: {
+      change: "webkitfullscreenchange",
+      error:  "webkitfullscreenerror",
     },
-    moz: {
-      enabled: "mozFullScreenEnabled",
-      element: "mozFullScreenElement",
-      request: "mozRequestFullScreen",
-      exit:    "mozCancelFullScreen",
-      events: {
-        change: "mozfullscreenchange",
-        error:  "mozfullscreenerror"
-      }
+  },
+  moz: {
+    enabled: "mozFullScreenEnabled",
+    element: "mozFullScreenElement",
+    request: "mozRequestFullScreen",
+    exit:    "mozCancelFullScreen",
+    events: {
+      change: "mozfullscreenchange",
+      error:  "mozfullscreenerror",
     },
-    ms: {
-      enabled: "msFullscreenEnabled",
-      element: "msFullscreenElement",
-      request: "msRequestFullscreen",
-      exit:    "msExitFullscreen",
-      events: {
-        change: "MSFullscreenChange",
-        error:  "MSFullscreenError"
-      }
-    }
-  };
-
-  const w3 = apis.w3;
-  let api = null;
-  for (const vendor in apis) {
-    if (apis[vendor].enabled in document) {
-      api = apis[vendor];
-      break;
-    }
+  },
+  ms: {
+    enabled: "msFullscreenEnabled",
+    element: "msFullscreenElement",
+    request: "msRequestFullscreen",
+    exit:    "msExitFullscreen",
+    events: {
+      change: "MSFullscreenChange",
+      error:  "MSFullscreenError",
+    },
+  },
+};
+
+const w3 = apis.w3;
+let api = null;
+for (const vendor in apis) {
+  if (apis[vendor].enabled in document) {
+    api = apis[vendor];
+    break;
   }
+}
 
-  if (api && api !== w3) {
+const fullscreen = {};
+
+// Set initial static properties
+fullscreen[w3.enabled] = document[api.enabled];
+fullscreen[w3.element] = document[api.element];
 
-    document[w3.enabled] = document[api.enabled];
-    document[w3.element] = document[api.element];
+// Bind exit method
+fullscreen[w3.exit] = document[api.exit].bind(document);
 
-    document[w3.exit] = document[api.exit];
+// Call request for fullscreen on element
+fullscreen[w3.request] = function(target) {
+  target[api.request].call(target);
+};
 
-    Element.prototype[w3.request] = function() {
-      this[api.request].call(this);
-    };
+// Check if target is active fullscreen element
+fullscreen.fullscreenActive = function(target) {
+  return this[w3.enabled] && this[w3.element] === target;
+};
 
-    document.registerFullscreen = function(target) {
+// Register Fullscreen API to document or custom-element
+fullscreen.registerFullscreen = function(target) {
 
-      target = target || document;
+  target = target || document;
 
-      target.addEventListener(api.events.change, (e) => {
-        e.stopPropagation();
-        e.stopImmediatePropagation();
+  if (api && api !== w3) {
+
+    target.addEventListener(api.events.change, (e) => {
+      e.stopPropagation();
+      e.stopImmediatePropagation();
 
-        document[w3.enabled] = document[api.enabled];
-        document[w3.element] = document[api.element];
+      // Update static properties on change
+      this[w3.enabled] = document[api.enabled];
+      this[w3.element] = document[api.element];
 
-        document.dispatchEvent(new Event(w3.events.change));
-      });
+      // [TODO]: What should this be dispatched on? target || document || by-function
+      target.dispatchEvent(new CustomEvent(w3.events.change, {detail:{originalEvent:e}}));
+    });
 
-      target.addEventListener(api.events.error, (e) => {
-        document.dispatchEvent(new Event(w3.events.error));
-      });
+    target.addEventListener(api.events.error, (e) => {
+      // [TODO]: What should this be dispatched on? target || document || by-function
+      target.dispatchEvent(new CustomEvent(w3.events.error, {detail:{originalEvent:e}}));
+    });
 
-      return true;
-    };
+    return true;
 
-    // document.body.registerFullscreen.call(document);
-    document.registerFullscreen();
+  // [TODO]: Support official w3 api here
+  // } else if (api && api === w3) {
+  //   return true;
 
   } else {
 
-    document.registerFullscreen = function() {
-      return false;
-    };
+    return false;
 
   }
 
-})(document);
+};
+
+export default fullscreen;

fullscreen-api.js

@@ -1,7 +1,7 @@
 {
   "name": "@jsilvermist/fullscreen-api",
   "version": "0.1.0",
-  "description": "A Fullscreen API polyfill for use with custom elements",
+  "description": "A modular Fullscreen API interface",
   "main": "fullscreen-api.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"