@deck.gl/widgets 9.0.0-beta.1 → 9.0.0-beta.11

package/src/components.tsx

@@ -1,9 +1,9 @@
 export const IconButton = props => {
   const {className, label, onClick} = props;
   return (
-    <div className="deck-widget-button-border">
+    <div className="deck-widget-button">
       <button
-        className={`deck-widget-button ${className}`}
+        className={`deck-widget-icon-button ${className}`}
         type="button"
         onClick={onClick}
         title={label}
@@ -13,3 +13,22 @@ export const IconButton = props => {
     </div>
   );
 };
+
+export const ButtonGroup = props => {
+  const {children, orientation} = props;
+  return <div className={`deck-widget-button-group ${orientation}`}>{children}</div>;
+};
+
+export const GroupedIconButton = props => {
+  const {className, label, onClick} = props;
+  return (
+    <button
+      className={`deck-widget-icon-button ${className}`}
+      type="button"
+      onClick={onClick}
+      title={label}
+    >
+      <div className="deck-widget-icon" />
+    </button>
+  );
+};

package/src/fullscreen-widget.tsx

@@ -21,7 +21,13 @@ interface FullscreenWidgetProps {
    * Tooltip message when fullscreen.
    */
   exitLabel?: string;
+  /**
+   * CSS inline style overrides.
+   */
   style?: Partial<CSSStyleDeclaration>;
+  /**
+   * Additional CSS class.
+   */
   className?: string;
 }
 
@@ -30,7 +36,7 @@ export class FullscreenWidget implements Widget<FullscreenWidgetProps> {
   props: FullscreenWidgetProps;
   placement: WidgetPlacement = 'top-left';
 
-  deck?: Deck;
+  deck?: Deck<any>;
   element?: HTMLDivElement;
 
   fullscreen: boolean = false;
@@ -44,7 +50,7 @@ export class FullscreenWidget implements Widget<FullscreenWidgetProps> {
     this.props = props;
   }
 
-  onAdd({deck}: {deck: Deck}): HTMLDivElement {
+  onAdd({deck}: {deck: Deck<any>}): HTMLDivElement {
     const {style, className} = this.props;
     const el = document.createElement('div');
     el.classList.add('deck-widget', 'deck-widget-fullscreen');

package/src/index.ts

@@ -1,3 +1,5 @@
 export {FullscreenWidget} from './fullscreen-widget';
+export {CompassWidget} from './compass-widget';
+export {ZoomWidget} from './zoom-widget';
 
 export * from './themes';

package/src/stylesheet.css

@@ -2,12 +2,9 @@
   margin: var(--widget-margin, 12px);
 }
 
-.deck-widget-button-border {
-  width: var(--button-size, 28px);
-  height: var(--button-size, 28px);
-  box-sizing: border-box;
-  flex-shrink: 0;
-
+/* Common button container styles */
+.deck-widget-button,
+.deck-widget-button-group {
   background: var(--button-stroke, rgba(255, 255, 255, 0.3));
   border-radius: var(--button-corner-radius, 8px);
   box-shadow: var(--button-shadow, 0px 0px 8px 0px rgba(0, 0, 0, 0.25));
@@ -17,12 +14,34 @@
   justify-content: center;
 }
 
-.deck-widget-button-border button {
+/* Single button */
+.deck-widget-button {
+  width: var(--button-size, 28px);
+  height: var(--button-size, 28px);
+}
+
+/* Button group */
+.deck-widget-button-group {
+  width: calc(var(--button-size, 28px) - 2);
+  height: calc((var(--button-size, 28px) * 2) - 1);
+  
+  flex-direction: row;
+  padding: 1px;
+  gap: 1px;
+}
+
+.deck-widget-button-group.vertical {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+/* Common button styles */
+.deck-widget-button-group button,
+.deck-widget-button button {
   width: calc(var(--button-size, 28px) - 2px);
   height: calc(var(--button-size, 28px) - 2px);
-  box-sizing: border-box;
-  flex-shrink: 0;
 
+  box-sizing: border-box;
   background: var(--button-background, #fff);
   backdrop-filter: var(--button-backdrop-filter, unset);
   border: var(--button-inner-stroke, unset);
@@ -34,8 +53,35 @@
   padding: 0;
 }
 
+/* Border radius adjustments for grouped buttons */
+.deck-widget-button-group.vertical > *:not(:last-child),
+.deck-widget-button-group.vertical > *:not(:last-child) > button {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.deck-widget-button-group.vertical > *:not(:first-child),
+.deck-widget-button-group.vertical > *:not(:first-child) > button {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+
+.deck-widget-button-group.horizontal > *:not(:last-child),
+.deck-widget-button-group.horizontal > *:not(:last-child) > button {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.deck-widget-button-group.horizontal > *:not(:first-child),
+.deck-widget-button-group.horizontal > *:not(:first-child) > button {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+/* Icon button styles */
 .deck-widget button .deck-widget-icon {
-  background-color: var(--button-icon-idle, rgba(97, 97, 102, 1));
+  background-color: var(--button-icon-idle, #616166);
   background-position: 50%;
   background-repeat: no-repeat;
   display: block;
@@ -44,9 +90,10 @@
 }
 
 .deck-widget button .deck-widget-icon:hover {
-  background-color: var(--button-icon-hover, rgba(24, 24, 26, 1));
+  background-color: var(--button-icon-hover, rgb(24, 24, 26));
 }
 
+/* Fullscreen styles */
 .deck-widget.deck-widget-fullscreen button.deck-widget-fullscreen-enter .deck-widget-icon {
   mask-image: var(
     --icon-fullscreen-enter,
@@ -77,3 +124,26 @@
   width: 100% !important;
   z-index: 99999;
 }
+
+/* Zoom styles */
+.deck-widget.deck-widget-zoom button.deck-widget-zoom-in .deck-widget-icon {
+  mask-image: var(
+    --icon-zoom-in,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 26 26" fill="black"><path d="M12.1029 13.8971H7.89332C7.64334 13.8971 7.43196 13.8105 7.25918 13.6373C7.08639 13.4641 7 13.2521 7 13.0014C7 12.7508 7.08639 12.5396 7.25918 12.368C7.43196 12.1963 7.64334 12.1105 7.89332 12.1105H12.1029V7.90097C12.1029 7.65161 12.1895 7.43912 12.3627 7.26348C12.5359 7.08783 12.7479 7 12.9986 7C13.2492 7 13.4604 7.08783 13.632 7.26348C13.8037 7.43912 13.8895 7.65161 13.8895 7.90097V12.1105H18.099C18.3484 12.1105 18.5609 12.1971 18.7365 12.3703C18.9122 12.5436 19 12.7555 19 13.0062C19 13.2569 18.9122 13.468 18.7365 13.6397C18.5609 13.8113 18.3484 13.8971 18.099 13.8971H13.8895V18.1067C13.8895 18.3567 13.8029 18.568 13.6297 18.7408C13.4564 18.9136 13.2445 19 12.9938 19C12.7431 19 12.532 18.9136 12.3603 18.7408C12.1887 18.568 12.1029 18.3567 12.1029 18.1067V13.8971Z"/></svg>')
+  );
+  -webkit-mask-image: var(
+    --icon-zoom-in,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 26 26" fill="black"><path d="M12.1029 13.8971H7.89332C7.64334 13.8971 7.43196 13.8105 7.25918 13.6373C7.08639 13.4641 7 13.2521 7 13.0014C7 12.7508 7.08639 12.5396 7.25918 12.368C7.43196 12.1963 7.64334 12.1105 7.89332 12.1105H12.1029V7.90097C12.1029 7.65161 12.1895 7.43912 12.3627 7.26348C12.5359 7.08783 12.7479 7 12.9986 7C13.2492 7 13.4604 7.08783 13.632 7.26348C13.8037 7.43912 13.8895 7.65161 13.8895 7.90097V12.1105H18.099C18.3484 12.1105 18.5609 12.1971 18.7365 12.3703C18.9122 12.5436 19 12.7555 19 13.0062C19 13.2569 18.9122 13.468 18.7365 13.6397C18.5609 13.8113 18.3484 13.8971 18.099 13.8971H13.8895V18.1067C13.8895 18.3567 13.8029 18.568 13.6297 18.7408C13.4564 18.9136 13.2445 19 12.9938 19C12.7431 19 12.532 18.9136 12.3603 18.7408C12.1887 18.568 12.1029 18.3567 12.1029 18.1067V13.8971Z"/></svg>')
+  );
+}
+
+.deck-widget.deck-widget-zoom button.deck-widget-zoom-out .deck-widget-icon {
+  mask-image: var(
+    --icon-zoom-out,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 26 26" fill="black"> wBox="0 0 26 26" fill="none"><path d="M7.89332 13.8866C7.64334 13.8866 7.43196 13.8 7.25918 13.6268C7.08639 13.4535 7 13.2416 7 12.9909C7 12.7403 7.08639 12.5291 7.25918 12.3575C7.43196 12.1858 7.64334 12.1 7.89332 12.1H18.099C18.349 12.1 18.5617 12.1866 18.737 12.3598C18.9123 12.5331 19 12.745 19 12.9957C19 13.2463 18.9123 13.4575 18.737 13.6291C18.5617 13.8008 18.349 13.8866 18.099 13.8866H7.89332Z"/></svg>')
+  );
+  -webkit-mask-image: var(
+    --icon-zoom-out,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 26 26" fill="black"> wBox="0 0 26 26" fill="none"><path d="M7.89332 13.8866C7.64334 13.8866 7.43196 13.8 7.25918 13.6268C7.08639 13.4535 7 13.2416 7 12.9909C7 12.7403 7.08639 12.5291 7.25918 12.3575C7.43196 12.1858 7.64334 12.1 7.89332 12.1H18.099C18.349 12.1 18.5617 12.1866 18.737 12.3598C18.9123 12.5331 19 12.745 19 12.9957C19 13.2463 18.9123 13.4575 18.737 13.6291C18.5617 13.8008 18.349 13.8866 18.099 13.8866H7.89332Z"/></svg>')
+  );
+}

package/src/themes.ts

@@ -5,7 +5,9 @@ export const LightTheme = {
   '--button-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25)',
   '--button-backdrop-filter': 'unset',
   '--button-icon-idle': 'rgba(97, 97, 102, 1)',
-  '--button-icon-hover': 'rgba(24, 24, 26, 1)'
+  '--button-icon-hover': 'rgba(24, 24, 26, 1)',
+  '--icon-compass-north-color': '#F05C44',
+  '--icon-compass-south-color': '#C2C2CC'
 };
 
 export const DarkTheme = {
@@ -15,7 +17,9 @@ export const DarkTheme = {
   '--button-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25)',
   '--button-backdrop-filter': 'unset',
   '--button-icon-idle': 'rgba(158, 157, 168, 1)',
-  '--button-icon-hover': 'rgba(215, 214, 229, 1)'
+  '--button-icon-hover': 'rgba(215, 214, 229, 1)',
+  '--icon-compass-north-color': '#F05C44',
+  '--icon-compass-south-color': '#C2C2CC'
 };
 
 export const LightGlassTheme = {
@@ -26,7 +30,9 @@ export const LightGlassTheme = {
     '0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset',
   '--button-backdrop-filter': 'blur(4px)',
   '--button-icon-idle': 'rgba(97, 97, 102, 1)',
-  '--button-icon-hover': 'rgba(24, 24, 26, 1)'
+  '--button-icon-hover': 'rgba(24, 24, 26, 1)',
+  '--icon-compass-north-color': '#F05C44',
+  '--icon-compass-south-color': '#C2C2CC'
 };
 
 export const DarkGlassTheme = {
@@ -37,5 +43,7 @@ export const DarkGlassTheme = {
     '0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset',
   '--button-backdrop-filter': 'blur(4px)',
   '--button-icon-idle': 'rgba(158, 157, 168, 1)',
-  '--button-icon-hover': 'rgba(215, 214, 229, 1)'
+  '--button-icon-hover': 'rgba(215, 214, 229, 1)',
+  '--icon-compass-north-color': '#F05C44',
+  '--icon-compass-south-color': '#C2C2CC'
 };

package/src/zoom-widget.tsx

@@ -0,0 +1,128 @@
+/* global document */
+import {FlyToInterpolator} from '@deck.gl/core';
+import type {Deck, Viewport, Widget, WidgetPlacement} from '@deck.gl/core';
+import {render} from 'preact';
+import {ButtonGroup, GroupedIconButton} from './components';
+
+interface ZoomWidgetProps {
+  id: string;
+  placement?: WidgetPlacement;
+  /**
+   * View to attach to and interact with. Required when using multiple views.
+   */
+  viewId?: string | null;
+  /**
+   * Button orientation.
+   */
+  orientation?: 'vertical' | 'horizontal';
+  /**
+   * Tooltip message on zoom in button.
+   */
+  zoomInLabel?: string;
+  /**
+   * Tooltip message on zoom out button.
+   */
+  zoomOutLabel?: string;
+  /**
+   * Zoom transition duration in ms.
+   */
+  transitionDuration?: number;
+  /**
+   * CSS inline style overrides.
+   */
+  style?: Partial<CSSStyleDeclaration>;
+  /**
+   * Additional CSS class.
+   */
+  className?: string;
+}
+
+export class ZoomWidget implements Widget<ZoomWidgetProps> {
+  id = 'zoom';
+  props: ZoomWidgetProps;
+  placement: WidgetPlacement = 'top-left';
+  orientation: 'vertical' | 'horizontal' = 'vertical';
+  viewId?: string | null = null;
+  viewport?: Viewport;
+  deck?: Deck<any>;
+  element?: HTMLDivElement;
+
+  constructor(props: ZoomWidgetProps) {
+    this.id = props.id || 'zoom';
+    this.viewId = props.viewId || null;
+    this.placement = props.placement || 'top-left';
+    this.orientation = props.orientation || 'vertical';
+    props.transitionDuration = props.transitionDuration || 200;
+    props.zoomInLabel = props.zoomInLabel || 'Zoom In';
+    props.zoomOutLabel = props.zoomOutLabel || 'Zoom Out';
+    props.style = props.style || {};
+    this.props = props;
+  }
+
+  onAdd({deck}: {deck: Deck<any>}): HTMLDivElement {
+    const {style, className} = this.props;
+    const element = document.createElement('div');
+    element.classList.add('deck-widget', 'deck-widget-zoom');
+    if (className) element.classList.add(className);
+    if (style) {
+      Object.entries(style).map(([key, value]) => element.style.setProperty(key, value as string));
+    }
+    const ui = (
+      <ButtonGroup orientation={this.orientation}>
+        <GroupedIconButton
+          onClick={() => this.handleZoomIn()}
+          label={this.props.zoomInLabel}
+          className="deck-widget-zoom-in"
+        />
+        <GroupedIconButton
+          onClick={() => this.handleZoomOut()}
+          label={this.props.zoomOutLabel}
+          className="deck-widget-zoom-out"
+        />
+      </ButtonGroup>
+    );
+    render(ui, element);
+
+    this.deck = deck;
+    this.element = element;
+
+    return element;
+  }
+
+  onRemove() {
+    this.deck = undefined;
+    this.element = undefined;
+  }
+
+  setProps(props: Partial<ZoomWidgetProps>) {
+    Object.assign(this.props, props);
+  }
+
+  onViewportChange(viewport) {
+    this.viewport = viewport;
+  }
+
+  handleZoom(nextZoom: number) {
+    const viewId = this.viewId || 'default-view';
+    const nextViewState = {
+      ...this.viewport,
+      zoom: nextZoom,
+      transitionDuration: this.props.transitionDuration,
+      transitionInterpolator: new FlyToInterpolator()
+    };
+    // @ts-ignore Using private method temporary until there's a public one
+    this.deck._onViewStateChange({viewId, viewState: nextViewState, interactionState: {}});
+  }
+
+  handleZoomIn() {
+    if (this.viewport) {
+      this.handleZoom(this.viewport.zoom + 1);
+    }
+  }
+
+  handleZoomOut() {
+    if (this.viewport) {
+      this.handleZoom(this.viewport.zoom - 1);
+    }
+  }
+}

package/dist/es5/components.js

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.IconButton = void 0;
-
-var IconButton = function IconButton(props) {
-  var className = props.className,
-      label = props.label,
-      onClick = props.onClick;
-  return h("div", {
-    className: "deck-widget-button-border"
-  }, h("button", {
-    className: "deck-widget-button ".concat(className),
-    type: "button",
-    onClick: onClick,
-    title: label
-  }, h("div", {
-    className: "deck-widget-icon"
-  })));
-};
-
-exports.IconButton = IconButton;
-//# sourceMappingURL=components.js.map

package/dist/es5/components.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components.tsx"],"names":["IconButton","props","className","label","onClick"],"mappings":";;;;;;;AAAO,IAAMA,UAAU,GAAG,SAAbA,UAAa,CAAAC,KAAK,EAAI;AACjC,MAAOC,SAAP,GAAoCD,KAApC,CAAOC,SAAP;AAAA,MAAkBC,KAAlB,GAAoCF,KAApC,CAAkBE,KAAlB;AAAA,MAAyBC,OAAzB,GAAoCH,KAApC,CAAyBG,OAAzB;AACA,SACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AACE,IAAA,SAAS,+BAAwBF,SAAxB,CADX;AAEE,IAAA,IAAI,EAAC,QAFP;AAGE,IAAA,OAAO,EAAEE,OAHX;AAIE,IAAA,KAAK,EAAED;AAJT,KAME;AAAK,IAAA,SAAS,EAAC;AAAf,IANF,CADF,CADF;AAYD,CAdM","sourcesContent":["export const IconButton = props => {\n  const {className, label, onClick} = props;\n  return (\n    <div className=\"deck-widget-button-border\">\n      <button\n        className={`deck-widget-button ${className}`}\n        type=\"button\"\n        onClick={onClick}\n        title={label}\n      >\n        <div className=\"deck-widget-icon\" />\n      </button>\n    </div>\n  );\n};\n"],"file":"components.js"}

package/dist/es5/fullscreen-widget.js

@@ -1,272 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FullscreenWidget = void 0;
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _core = require("@deck.gl/core");
-
-var _preact = require("preact");
-
-var _components = require("./components");
-
-var FullscreenWidget = function () {
-  function FullscreenWidget(props) {
-    (0, _classCallCheck2.default)(this, FullscreenWidget);
-    this.id = 'fullscreen';
-    this.props = void 0;
-    this.placement = 'top-left';
-    this.deck = void 0;
-    this.element = void 0;
-    this.fullscreen = false;
-    this.id = props.id || 'fullscreen';
-    this.placement = props.placement || 'top-left';
-    props.enterLabel = props.enterLabel || 'Enter Fullscreen';
-    props.exitLabel = props.exitLabel || 'Exit Fullscreen';
-    props.style = props.style || {};
-    this.props = props;
-  }
-
-  var _proto = FullscreenWidget.prototype;
-
-  _proto.onAdd = function onAdd(_ref) {
-    var deck = _ref.deck;
-    var _this$props = this.props,
-        style = _this$props.style,
-        className = _this$props.className;
-    var el = document.createElement('div');
-    el.classList.add('deck-widget', 'deck-widget-fullscreen');
-    if (className) el.classList.add(className);
-
-    if (style) {
-      Object.entries(style).map(function (_ref2) {
-        var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-            key = _ref3[0],
-            value = _ref3[1];
-
-        return el.style.setProperty(key, value);
-      });
-    }
-
-    this.deck = deck;
-    this.element = el;
-    this.update();
-    document.addEventListener('fullscreenchange', this.onFullscreenChange.bind(this));
-    return el;
-  };
-
-  _proto.onRemove = function onRemove() {
-    this.deck = undefined;
-    this.element = undefined;
-    document.removeEventListener('fullscreenchange', this.onFullscreenChange.bind(this));
-  };
-
-  _proto.update = function update() {
-    var _this$props2 = this.props,
-        enterLabel = _this$props2.enterLabel,
-        exitLabel = _this$props2.exitLabel;
-    var el = this.element;
-
-    if (!el) {
-      return;
-    }
-
-    var ui = h(_components.IconButton, {
-      onClick: this.handleClick.bind(this),
-      label: this.fullscreen ? exitLabel : enterLabel,
-      className: this.fullscreen ? 'deck-widget-fullscreen-exit' : 'deck-widget-fullscreen-enter'
-    });
-    (0, _preact.render)(ui, el);
-  };
-
-  _proto.setProps = function setProps(props) {
-    var oldProps = this.props;
-    var el = this.element;
-
-    if (el) {
-      if (oldProps.className !== props.className) {
-        if (oldProps.className) el.classList.remove(oldProps.className);
-        if (props.className) el.classList.add(props.className);
-      }
-
-      if (!(0, _core._deepEqual)(oldProps.style, props.style, 1)) {
-        if (oldProps.style) {
-          Object.entries(oldProps.style).map(function (_ref4) {
-            var _ref5 = (0, _slicedToArray2.default)(_ref4, 1),
-                key = _ref5[0];
-
-            return el.style.removeProperty(key);
-          });
-        }
-
-        if (props.style) {
-          Object.entries(props.style).map(function (_ref6) {
-            var _ref7 = (0, _slicedToArray2.default)(_ref6, 2),
-                key = _ref7[0],
-                value = _ref7[1];
-
-            return el.style.setProperty(key, value);
-          });
-        }
-      }
-    }
-
-    Object.assign(this.props, props);
-  };
-
-  _proto.getContainer = function getContainer() {
-    var _this$deck, _this$deck$getCanvas;
-
-    return this.props.container || ((_this$deck = this.deck) === null || _this$deck === void 0 ? void 0 : (_this$deck$getCanvas = _this$deck.getCanvas()) === null || _this$deck$getCanvas === void 0 ? void 0 : _this$deck$getCanvas.parentElement);
-  };
-
-  _proto.onFullscreenChange = function onFullscreenChange() {
-    var prevFullscreen = this.fullscreen;
-    var fullscreen = document.fullscreenElement === this.getContainer();
-
-    if (prevFullscreen !== fullscreen) {
-      this.fullscreen = !this.fullscreen;
-    }
-
-    this.update();
-  };
-
-  _proto.handleClick = function () {
-    var _handleClick = (0, _asyncToGenerator2.default)(_regenerator.default.mark(function _callee() {
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (!this.fullscreen) {
-                _context.next = 5;
-                break;
-              }
-
-              _context.next = 3;
-              return this.exitFullscreen();
-
-            case 3:
-              _context.next = 7;
-              break;
-
-            case 5:
-              _context.next = 7;
-              return this.requestFullscreen();
-
-            case 7:
-              this.update();
-
-            case 8:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, this);
-    }));
-
-    function handleClick() {
-      return _handleClick.apply(this, arguments);
-    }
-
-    return handleClick;
-  }();
-
-  _proto.requestFullscreen = function () {
-    var _requestFullscreen = (0, _asyncToGenerator2.default)(_regenerator.default.mark(function _callee2() {
-      var container;
-      return _regenerator.default.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              container = this.getContainer();
-
-              if (!(container !== null && container !== void 0 && container.requestFullscreen)) {
-                _context2.next = 6;
-                break;
-              }
-
-              _context2.next = 4;
-              return container.requestFullscreen({
-                navigationUI: 'hide'
-              });
-
-            case 4:
-              _context2.next = 7;
-              break;
-
-            case 6:
-              this.togglePseudoFullscreen();
-
-            case 7:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2, this);
-    }));
-
-    function requestFullscreen() {
-      return _requestFullscreen.apply(this, arguments);
-    }
-
-    return requestFullscreen;
-  }();
-
-  _proto.exitFullscreen = function () {
-    var _exitFullscreen = (0, _asyncToGenerator2.default)(_regenerator.default.mark(function _callee3() {
-      return _regenerator.default.wrap(function _callee3$(_context3) {
-        while (1) {
-          switch (_context3.prev = _context3.next) {
-            case 0:
-              if (!document.exitFullscreen) {
-                _context3.next = 5;
-                break;
-              }
-
-              _context3.next = 3;
-              return document.exitFullscreen();
-
-            case 3:
-              _context3.next = 6;
-              break;
-
-            case 5:
-              this.togglePseudoFullscreen();
-
-            case 6:
-            case "end":
-              return _context3.stop();
-          }
-        }
-      }, _callee3, this);
-    }));
-
-    function exitFullscreen() {
-      return _exitFullscreen.apply(this, arguments);
-    }
-
-    return exitFullscreen;
-  }();
-
-  _proto.togglePseudoFullscreen = function togglePseudoFullscreen() {
-    var _this$getContainer;
-
-    (_this$getContainer = this.getContainer()) === null || _this$getContainer === void 0 ? void 0 : _this$getContainer.classList.toggle('deck-pseudo-fullscreen');
-  };
-
-  return FullscreenWidget;
-}();
-
-exports.FullscreenWidget = FullscreenWidget;
-//# sourceMappingURL=fullscreen-widget.js.map