initial commit simple fullscreen demo

remy · remy · commit 9a5834465db0 · 2013-01-13T23:44:40.000Z
diff --git a/demos.json b/demos.json
@@ -1,4 +1,14 @@
 [
+  {
+    "desc": "Full screen of the page, and individual elements",
+    "url": "fullscreen",
+    "tags": "fullscreen",
+    "support": {
+      "live": "opera",
+      "nightly": "chrome firefox safari"
+    },
+    "test": ""
+  },
   {
     "desc": "Stream video and filter with canvas",
     "url": "gum-canvas",
diff --git a/demos/fullscreen.html b/demos/fullscreen.html
@@ -0,0 +1,51 @@
+<title>Simple Fullscreen API demo</title>
+<style>
+#status {
+  background: #c00;
+}
+
+#game {
+
+}
+</style>
+<article>
+  <p>This example shows how an element can request fullscreen support from the browser.</p>
+  <p id="unavailable">Not supported :(</p>
+  <div id="game">
+
+  </div>
+</article>
+<script>
+function $(id) {
+  return document.getElementById(id);
+}
+
+// fullscreen is a bit of mess due to mixed case support
+// taken from http://voxeljs.com/ the very cool game world
+// building toolkit by @maxogden, et al
+function shim(el) {
+  return (el.requestFullscreen ||
+    el.webkitRequestFullscreen ||
+    el.webkitRequestFullScreen ||
+    el.mozRequestFullscreen ||
+    el.mozRequestFullScreen ||
+    el.msRequestFullscreen ||
+    el.msRequestFullScreen ||
+    el.oRequestFullscreen ||
+    el.oRequestFullScreen)
+}
+
+function available() {
+  return !!shim(document.body)
+}
+
+var no = $('#unavailable');
+
+if (available()) {
+  no.parentNode.removeChild(no);
+}
+
+
+
+
+</script>
