From 042a22afe3ea687e9158325164b19459debe12c1 Mon Sep 17 00:00:00 2001
From: leecason <leecason0722@gmail.com>
Date: Mon, 30 Mar 2020 20:48:04 +0800
Subject: [PATCH] =?UTF-8?q?fix(fullscreen):=20=F0=9F=90=9B=20use=20fixed?=
 =?UTF-8?q?=20position=20instead=20fullscreen=20API=20because=20the=20appe?=
 =?UTF-8?q?nd-to-body=20element=20is=20invisble=20in=20fullscreen=20mode?=
 =?UTF-8?q?=20https://github.com/Leecason/element-tiptap/issues/21#issueco?=
 =?UTF-8?q?mment-605615794?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ElementTiptap.vue              |  9 ++-
 .../MenuCommands/FullscreenCommandButton.vue  | 35 ++--------
 src/styles/editor.scss                        | 13 +++-
 src/utils/fullscreen.ts                       | 65 -------------------
 4 files changed, 22 insertions(+), 100 deletions(-)
 delete mode 100644 src/utils/fullscreen.ts

diff --git a/src/components/ElementTiptap.vue b/src/components/ElementTiptap.vue
index 3dd05f25..bddc9fac 100644
--- a/src/components/ElementTiptap.vue
+++ b/src/components/ElementTiptap.vue
@@ -2,6 +2,7 @@
   <div
     v-if="editor"
     :style="editorSizeStyle"
+    :class="{ 'el-tiptap-editor--fullscreen': isFullscreen }"
     class="el-tiptap-editor"
   >
     <menu-bubble
@@ -41,7 +42,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Watch, Model, Mixins } from 'vue-property-decorator';
+import { Component, Prop, Watch, Provide, ProvideReactive, Model, Mixins } from 'vue-property-decorator';
 import { Editor, EditorContent, Extension, EditorUpdateEvent } from 'tiptap';
 import { Placeholder } from 'tiptap-extensions';
 import { EditorProps } from 'prosemirror-view';
@@ -245,6 +246,12 @@ export default class ElTiptap extends Mixins(i18nMixin) {
     this.$emit(this.genEvent(EVENTS.UPDATE), output, options);
   }
 
+  // TODO: provide to fullscreen command button, need to be optimized
+  @ProvideReactive() isFullscreen = false;
+  @Provide() toggleFullscreen () {
+    this.isFullscreen = !this.isFullscreen;
+  }
+
   private genEvent (event: EVENTS) {
     return `on${capitalize(event)}`;
   }
diff --git a/src/components/MenuCommands/FullscreenCommandButton.vue b/src/components/MenuCommands/FullscreenCommandButton.vue
index 20624d99..36f491a1 100644
--- a/src/components/MenuCommands/FullscreenCommandButton.vue
+++ b/src/components/MenuCommands/FullscreenCommandButton.vue
@@ -1,6 +1,6 @@
 <template>
   <command-button
-    :command="toggleFullScreen"
+    :command="toggleFullscreen"
     :tooltip="buttonTooltip"
     :icon="isFullscreen ? 'compress' : 'expand'"
     :is-active="isFullscreen"
@@ -8,15 +8,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator';
+import { Component, Inject, InjectReactive, Mixins } from 'vue-property-decorator';
 import i18nMixin from '@/mixins/i18nMixin';
-import {
-  fullscreenStatus,
-  requestFullscreen,
-  exitFullscreen,
-  onFullScreenEvent,
-  offFullScreenEvent,
-} from '@/utils/fullscreen';
 import CommandButton from './CommandButton.vue';
 
 @Component({
@@ -25,33 +18,13 @@ import CommandButton from './CommandButton.vue';
   },
 })
 export default class FullscreenCommandButton extends Mixins(i18nMixin) {
-  isFullscreen = false;
+  @Inject() readonly toggleFullscreen!: Function;
+  @InjectReactive() readonly isFullscreen!: boolean;
 
   private get buttonTooltip () {
     return this.isFullscreen
       ? this.t('editor.extensions.Fullscreen.tooltip.exit_fullscreen')
       : this.t('editor.extensions.Fullscreen.tooltip.fullscreen');
   }
-
-  private mounted () {
-    onFullScreenEvent(this.onFullscreenChange);
-  }
-
-  private beforeDestroy () {
-    offFullScreenEvent(this.onFullscreenChange);
-  }
-
-  onFullscreenChange () {
-    this.isFullscreen = fullscreenStatus();
-  }
-
-  toggleFullScreen () {
-    if (this.isFullscreen) {
-      exitFullscreen();
-    } else {
-      const editorEl = this.$el.closest('.el-tiptap-editor');
-      if (editorEl) requestFullscreen(editorEl);
-    }
-  }
 };
 </script>
diff --git a/src/styles/editor.scss b/src/styles/editor.scss
index fd222a2f..14ee8ea6 100644
--- a/src/styles/editor.scss
+++ b/src/styles/editor.scss
@@ -10,13 +10,20 @@
   position: relative;
   width: 100%;
 
-  &:fullscreen {
-    border-radius: 0;
+  &--fullscreen {
+    border-radius: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    position: fixed !important;
+    right: 0 !important;
+    top: 0 !important;
+    margin: 0 !important;
+    z-index: 500;
 
     #{$root}__menu-bar,
     #{$root}__content,
     #{$root}__footer {
-      border-radius: 0;
+      border-radius: 0 !important;
     }
   }
 
diff --git a/src/utils/fullscreen.ts b/src/utils/fullscreen.ts
deleted file mode 100644
index 369e4a0a..00000000
--- a/src/utils/fullscreen.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-// @ts-nocheck
-import Logger from '@/utils/logger';
-
-export function supportFullScreen (): boolean {
-  const doc = document.documentElement;
-
-  return ('requestFullscreen' in doc) ||
-    ('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) ||
-    ('msRequestFullscreen' in doc && document.msFullscreenEnabled) ||
-    ('webkitRequestFullScreen' in doc);
-}
-
-export function fullscreenStatus (): boolean {
-  if (document.fullscreen ||
-    document.mozFullScreen ||
-    document.fullscreenElement ||
-    document.msFullscreenElement ||
-    document.webkitIsFullScreen) {
-    return true;
-  } else {
-    return false;
-  }
-}
-
-export function requestFullscreen (element: Element): void {
-  if (element.requestFullscreen) {
-    element.requestFullscreen();
-  } else if (element.webkitRequestFullscreen) {
-    element.webkitRequestFullscreen();
-  } else if (element.mozRequestFullScreen) {
-    element.mozRequestFullScreen();
-  } else if (element.msRequestFullscreen) {
-    element.msRequestFullscreen();
-  } else {
-    Logger.warn('Fullscreen API is not supported');
-  }
-}
-
-export function exitFullscreen (): void {
-  if (document.exitFullscreen) {
-    document.exitFullscreen();
-  } else if (document.webkitExitFullscreen) {
-    document.webkitExitFullscreen();
-  } else if (document.mozCancelFullScreen) {
-    document.mozCancelFullScreen();
-  } else if (document.msExitFullscreen) {
-    document.msExitFullscreen();
-  } else {
-    Logger.warn('Fullscreen API is not supported');
-  }
-}
-
-export function onFullScreenEvent (callback: EventListenerOrEventListenerObject): void {
-  document.addEventListener('fullscreenchange', callback);
-  document.addEventListener('mozfullscreenchange', callback);
-  document.addEventListener('MSFullscreenChange', callback);
-  document.addEventListener('webkitfullscreenchange', callback);
-}
-
-export function offFullScreenEvent (callback: EventListenerOrEventListenerObject): void {
-  document.removeEventListener('fullscreenchange', callback);
-  document.removeEventListener('mozfullscreenchange', callback);
-  document.removeEventListener('MSFullscreenChange', callback);
-  document.removeEventListener('webkitfullscreenchange', callback);
-}