screenfull.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "(function () {\n",
    "\t'use strict';\n",
    "\n",
    "\tvar document = typeof window !== 'undefined' && typeof window.document !== 'undefined' ? window.document : {};\n",
    "\tvar isCommonjs = typeof module !== 'undefined' && module.exports;\n",
    "\n",
    "\tvar fn = (function () {\n",
    "\t\tvar val;\n",
    "\n",
    "\t\tvar fnMap = [\n",
    "\t\t\t[\n",
    "\t\t\t\t'requestFullscreen',\n",
    "\t\t\t\t'exitFullscreen',\n",
    "\t\t\t\t'fullscreenElement',\n",
    "\t\t\t\t'fullscreenEnabled',\n",
    "\t\t\t\t'fullscreenchange',\n",
    "\t\t\t\t'fullscreenerror'\n",
    "\t\t\t],\n",
    "\t\t\t// New WebKit\n",
    "\t\t\t[\n",
    "\t\t\t\t'webkitRequestFullscreen',\n",
    "\t\t\t\t'webkitExitFullscreen',\n",
    "\t\t\t\t'webkitFullscreenElement',\n",
    "\t\t\t\t'webkitFullscreenEnabled',\n",
    "\t\t\t\t'webkitfullscreenchange',\n",
    "\t\t\t\t'webkitfullscreenerror'\n",
    "\n",
    "\t\t\t],\n",
    "\t\t\t// Old WebKit\n",
    "\t\t\t[\n",
    "\t\t\t\t'webkitRequestFullScreen',\n",
    "\t\t\t\t'webkitCancelFullScreen',\n",
    "\t\t\t\t'webkitCurrentFullScreenElement',\n",
    "\t\t\t\t'webkitCancelFullScreen',\n",
    "\t\t\t\t'webkitfullscreenchange',\n",
    "\t\t\t\t'webkitfullscreenerror'\n",
    "\n",
    "\t\t\t],\n",
    "\t\t\t[\n",
    "\t\t\t\t'mozRequestFullScreen',\n",
    "\t\t\t\t'mozCancelFullScreen',\n",
    "\t\t\t\t'mozFullScreenElement',\n",
    "\t\t\t\t'mozFullScreenEnabled',\n",
    "\t\t\t\t'mozfullscreenchange',\n",
    "\t\t\t\t'mozfullscreenerror'\n",
    "\t\t\t],\n",
    "\t\t\t[\n",
    "\t\t\t\t'msRequestFullscreen',\n",
    "\t\t\t\t'msExitFullscreen',\n",
    "\t\t\t\t'msFullscreenElement',\n",
    "\t\t\t\t'msFullscreenEnabled',\n",
    "\t\t\t\t'MSFullscreenChange',\n",
    "\t\t\t\t'MSFullscreenError'\n",
    "\t\t\t]\n",
    "\t\t];\n",
    "\n",
    "\t\tvar i = 0;\n",
    "\t\tvar l = fnMap.length;\n",
    "\t\tvar ret = {};\n",
    "\n",
    "\t\tfor (; i < l; i++) {\n",
    "\t\t\tval = fnMap[i];\n",
    "\t\t\tif (val && val[1] in document) {\n",
    "\t\t\t\tfor (i = 0; i < val.length; i++) {\n",
    "\t\t\t\t\tret[fnMap[0][i]] = val[i];\n",
    "\t\t\t\t}\n",
    "\t\t\t\treturn ret;\n",
    "\t\t\t}\n",
    "\t\t}\n",
    "\n",
    "\t\treturn false;\n",
    "\t})();\n",
    "\n",
    "\tvar eventNameMap = {\n",
    "\t\tchange: fn.fullscreenchange,\n",
    "\t\terror: fn.fullscreenerror\n",
    "\t};\n",
    "\n",
    "\tvar screenfull = {\n",
    "\t\trequest: function (element) {\n",
    "\t\t\treturn new Promise(function (resolve, reject) {\n",
    "\t\t\t\tvar onFullScreenEntered = function () {\n",
    "\t\t\t\t\tthis.off('change', onFullScreenEntered);\n",
    "\t\t\t\t\tresolve();\n",
    "\t\t\t\t}.bind(this);\n",
    "\n",
    "\t\t\t\tthis.on('change', onFullScreenEntered);\n",
    "\n",
    "\t\t\t\telement = element || document.documentElement;\n",
    "\n",
    "\t\t\t\tvar returnPromise = element[fn.requestFullscreen]();\n",
    "\n",
    "\t\t\t\tif (returnPromise instanceof Promise) {\n",
    "\t\t\t\t\treturnPromise.then(onFullScreenEntered).catch(reject);\n",
    "\t\t\t\t}\n",
    "\t\t\t}.bind(this));\n",
    "\t\t},\n",
    "\t\texit: function () {\n",
    "\t\t\treturn new Promise(function (resolve, reject) {\n",
    "\t\t\t\tif (!this.isFullscreen) {\n",
    "\t\t\t\t\tresolve();\n",
    "\t\t\t\t\treturn;\n",
    "\t\t\t\t}\n",
    "\n",
    "\t\t\t\tvar onFullScreenExit = function () {\n",
    "\t\t\t\t\tthis.off('change', onFullScreenExit);\n",
    "\t\t\t\t\tresolve();\n",
    "\t\t\t\t}.bind(this);\n",
    "\n",
    "\t\t\t\tthis.on('change', onFullScreenExit);\n",
    "\n",
    "\t\t\t\tvar returnPromise = document[fn.exitFullscreen]();\n",
    "\n",
    "\t\t\t\tif (returnPromise instanceof Promise) {\n",
    "\t\t\t\t\treturnPromise.then(onFullScreenExit).catch(reject);\n",
    "\t\t\t\t}\n",
    "\t\t\t}.bind(this));\n",
    "\t\t},\n",
    "\t\ttoggle: function (element) {\n",
    "\t\t\treturn this.isFullscreen ? this.exit() : this.request(element);\n",
    "\t\t},\n",
    "\t\tonchange: function (callback) {\n",
    "\t\t\tthis.on('change', callback);\n",
    "\t\t},\n",
    "\t\tonerror: function (callback) {\n",
    "\t\t\tthis.on('error', callback);\n",
    "\t\t},\n",
    "\t\ton: function (event, callback) {\n",
    "\t\t\tvar eventName = eventNameMap[event];\n",
    "\t\t\tif (eventName) {\n",
    "\t\t\t\tdocument.addEventListener(eventName, callback, false);\n",
    "\t\t\t}\n",
    "\t\t},\n",
    "\t\toff: function (event, callback) {\n",
    "\t\t\tvar eventName = eventNameMap[event];\n",
    "\t\t\tif (eventName) {\n",
    "\t\t\t\tdocument.removeEventListener(eventName, callback, false);\n",
    "\t\t\t}\n",
    "\t\t},\n",
    "\t\traw: fn\n",
    "\t};\n",
    "\n",
    "\tif (!fn) {\n",
    "\t\tif (isCommonjs) {\n",
    "\t\t\tmodule.exports = {isEnabled: false};\n",
    "\t\t} else {\n",
    "\t\t\twindow.screenfull = {isEnabled: false};\n",
    "\t\t}\n",
    "\n",
    "\t\treturn;\n",
    "\t}\n",
    "\n",
    "\tObject.defineProperties(screenfull, {\n",
    "\t\tisFullscreen: {\n",
    "\t\t\tget: function () {\n",
    "\t\t\t\treturn Boolean(document[fn.fullscreenElement]);\n",
    "\t\t\t}\n",
    "\t\t},\n",
    "\t\telement: {\n",
    "\t\t\tenumerable: true,\n",
    "\t\t\tget: function () {\n",
    "\t\t\t\treturn document[fn.fullscreenElement];\n",
    "\t\t\t}\n",
    "\t\t},\n",
    "\t\tisEnabled: {\n",
    "\t\t\tenumerable: true,\n",
    "\t\t\tget: function () {\n",
    "\t\t\t\t// Coerce to boolean in case of old WebKit\n",
    "\t\t\t\treturn Boolean(document[fn.fullscreenEnabled]);\n",
    "\t\t\t}\n",
    "\t\t}\n",
    "\t});\n",
    "\n",
    "\tif (isCommonjs) {\n",
    "\t\tmodule.exports = screenfull;\n",
    "\t} else {\n",
    "\t\twindow.screenfull = screenfull;\n",
    "\t}\n",
    "})();"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipyvuetify as v\n",
    "import ipywidgets as widgets\n",
    "\n",
    "from traitlets import (Any, Unicode, List, Instance, Bool)\n",
    "\n",
    "\n",
    "class Fullscreen(v.VuetifyTemplate):    \n",
    "    widget = Instance(widgets.Widget).tag(sync=True, **widgets.widget_serialization)\n",
    "    items = List(['red', 'green', 'purple']).tag(sync=True)\n",
    "    fullscreen = Bool(False).tag(sync=True)\n",
    "    template = Unicode('''\n",
    "<template>\n",
    "<div style=\"height: 100px; position: relative; background: red\" class=\"ma-6\">\n",
    "    <v-btn\n",
    "      absolute\n",
    "      fab\n",
    "      bottom\n",
    "      right\n",
    "      v-if=\"!fullscreen\"\n",
    "      @click=\"toggle()\"\n",
    "    >\n",
    "      <v-icon>mdi-fullscreen</v-icon>\n",
    "    </v-btn>\n",
    "    <jupyter-widget :widget=\"widget\"></jupyter-widget>\n",
    "</div>\n",
    "</template>\n",
    "\n",
    "<script>\n",
    "\n",
    "    module.exports = {\n",
    "        created () {\n",
    "            console.log('dsa')\n",
    "            screenfull.onchange(() => {\n",
    "                this.fullscreen = screenfull.isFullscreen;\n",
    "            });\n",
    "        },\n",
    "        methods: {\n",
    "            toggle(el) {\n",
    "                console.log(this.$el)\n",
    "                if(screenfull.isEnabled)\n",
    "                    screenfull.request(this.$el)\n",
    "            }\n",
    "        }\n",
    "    }\n",
    "</script>\n",
    "''').tag(sync=True)\n",
    "    \n",
    "        \n",
    "Fullscreen(widget=v.Btn(children=['Hi']))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}