Add fullscreen and preview hide

Author: dark-flames

src/components/DefaultConfig.js

@@ -14,6 +14,8 @@ function set (obj, config) {
 
 export let defaultConfig = {
   height: '500px',
+  previewDisplay: 'normal',
+  fullscreen: false,
   parsers: [
     KatexParser
   ],

src/components/InputArea.vue

@@ -57,7 +57,10 @@ export default {
       }
 
       this.$emit('finish')
-    }
+    },
+      height: function (newHeight) {
+          this.editor.setSize('100%', newHeight)
+      }
   },
   data: function () {
     return {

src/components/LuoguMarkdownEditor.vue

@@ -1,110 +1,158 @@
 <template>
-    <div id="luogu-markdown-editor" class="editor-container">
+    <div id="luogu-markdown-editor" class="editor-container" :class="{'fullscreen': this.config.fullscreen}">
         <div id="editor-toolbar" class="editor-toolbar">
-            <toolbar @change="insert" @click="clickToolbar"  :toolbarConfig="editorConfig.toolbarConfig"></toolbar>
+            <toolbar @change="insert" @click="clickToolbar" @input="handleToolbarOperation"
+                     :toolbarConfig="editorConfig.toolbarConfig" ref="toolbar"></toolbar>
         </div>
         <div id="editor-area">
-            <div id="editor-input-area" class="editor-area input-area">
+            <div id="editor-input-area" class="input-area" :class="{
+                        'editor-area': this.config.previewDisplay === 'normal',
+                        'editor-area-full': this.config.previewDisplay === 'hide'
+                 }">
                 <input-area v-model="code"
+                            ref="inputArea"
                             @input="updateCode"
                             @finish="insertCode = null"
-                            :height="editorConfig.height"
+                            :height="editorHeight"
                             :insertCode="insertCode"
                             :editorOption="editorConfig.editorOption"></input-area>
             </div>
-            <div id="editor-preview-area" class="editor-area preview-area" >
-                <preview-area v-model="code" :height="editorConfig.height" :parsers="editorConfig.parsers"></preview-area>
+            <div id="editor-preview-area" class="editor-area preview-area" :class="{
+                        'editor-area': this.config.previewDisplay === 'normal',
+                        'editor-area-hide': this.config.previewDisplay === 'hide'
+                }">
+                <preview-area v-model="code" :height="editorHeight"
+                              :parsers="editorConfig.parsers" ref="previewArea"></preview-area>
             </div>
         </div>
         <div id="editor-dialog">
-            <editor-dialog v-if="showDialog" :request="dialogRequest" @finish="dialogFinish" @close="closeDialog"></editor-dialog>
+            <editor-dialog v-if="showDialog" :request="dialogRequest" @finish="dialogFinish"
+                           @close="closeDialog" ref="dialog"></editor-dialog>
         </div>
     </div>
 </template>
 
 <style>
     .editor-area {
-        width: 49%;
+        box-sizing: border-box;
+        width: 50%;
         float: left;
         border-bottom: 1px solid #ddd;
         border-top: 1px solid #ddd;
     }
+
+    .editor-area-full {
+        box-sizing: border-box;
+        width: 100%;
+        border: 1px solid #ddd;
+    }
+
+    .editor-area-hide {
+        display: none;
+    }
+
     .input-area {
         border-right: 1px solid #ddd;
         border-left: 1px solid #ddd;
     }
+
     .preview-area {
         border-right: 1px solid #ddd;
     }
-    .editor-toolbar {
-        width: 98%;
-        padding-right: 1px;
-        min-height: 35px;
-        border-right: 1px solid #ddd;
-        border-left: 1px solid #ddd;
-        border-top: 1px solid #ddd;
 
+    .fullscreen {
+        position: fixed;
+        z-index: 9997;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
     }
 </style>
 
 <script>
-import InputArea from './InputArea.vue'
-import PreviewArea from './PreviewArea.vue'
-import Toolbar from './Toolbar.vue'
-import EditorDialog from './Dialog.vue'
+    import InputArea from './InputArea.vue'
+    import PreviewArea from './PreviewArea.vue'
+    import Toolbar from './Toolbar.vue'
+    import EditorDialog from './Dialog.vue'
 
-import { defaultConfig, getConfig } from './DefaultConfig'
+    import {defaultConfig, getConfig} from './DefaultConfig'
 
-export default {
-  name: 'luogu-markdown-editor',
-  props: {
-    value: {
-      type: String
-    },
-    config: {
-      type: Object,
-      default: function () {
-        return defaultConfig
-      }
-    }
-  },
-  data () {
-    return {
-      code: '',
-      showDialog: false,
-      dialogRequest: {},
-      insertCode: null,
-      editorConfig: getConfig(this.config)
-    }
-  },
-  mounted () {
-    this.code = this.value
-  },
-  components: {
-    InputArea,
-    PreviewArea,
-    Toolbar,
-    EditorDialog
-  },
-  methods: {
-    updateCode (code) {
-      this.$emit('input', code)
-    },
-    insert (code) {
-      if (code !== null) { this.insertCode = code }
-    },
-    closeDialog () {
-      this.showDialog = false
-    },
-    dialogFinish (request) {
-      this.insert(request.callback(request.data))
-      this.closeDialog()
-    },
-    clickToolbar (request) {
-      if (this.showDialog) { return }
-      this.dialogRequest = request
-      this.showDialog = true
+    export default {
+        name: 'luogu-markdown-editor',
+        props: {
+            value: {
+                type: String
+            },
+            config: {
+                type: Object,
+                default: function () {
+                    return defaultConfig
+                }
+            }
+        },
+        data() {
+            let config = getConfig(this.config)
+            return {
+                code: '',
+                showDialog: false,
+                dialogRequest: {},
+                insertCode: null,
+                editorConfig: config,
+                editorHeight: config.height
+            }
+        },
+        mounted() {
+            this.code = this.value
+        },
+        components: {
+            InputArea,
+            PreviewArea,
+            Toolbar,
+            EditorDialog
+        },
+        methods: {
+            updateCode(code) {
+                this.$emit('input', code)
+            },
+            insert(code) {
+                if (code !== null) {
+                    this.insertCode = code
+                }
+            },
+            closeDialog() {
+                this.showDialog = false
+            },
+            dialogFinish(request) {
+                this.insert(request.callback(request.data))
+                this.closeDialog()
+            },
+            clickToolbar(request) {
+                if (this.showDialog) {
+                    return
+                }
+                this.dialogRequest = request
+                this.showDialog = true
+            },
+            handleToolbarOperation(operation) {
+                if (operation === 'hide') {
+                    if (this.config.previewDisplay === 'normal')
+                        this.config.previewDisplay = 'hide'
+                    else
+                        this.config.previewDisplay = 'normal'
+                }
+                if (operation === 'fullscreen') {
+                    if(!this.config.fullscreen) {
+                        this.config.fullscreen = true
+                        this.editorHeight = (screen.height - this.$refs.toolbar.$el.clientHeight).toString() + 'px'
+                        console.log(this.editorHeight)
+
+                    } else {
+                        this.config.fullscreen = false
+                        this.editorHeight = this.editorConfig.height
+                    }
+                }
+            }
+        }
     }
-  }
-}
 </script>

src/components/Toolbar.vue

@@ -12,6 +12,17 @@
 </template>
 
 <style>
+
+    #toolbar {
+        box-sizing: border-box;
+        width: 100%;
+        padding-right: 1px;
+        min-height: 35px;
+        border-right: 1px solid #ddd;
+        border-left: 1px solid #ddd;
+        border-top: 1px solid #ddd;
+    }
+
     #editor-menu>li>a {
         outline: 0;
         color: #666;
@@ -98,9 +109,13 @@ export default {
       this.$emit('click', request)
     },
     handleAction (action) {
-      if (action.insert) {
+    if(action.event) {
+        this.$emit('input', action.event)
+    }
+      else if (action.insert) {
         this.insertCode(action.insert)
-      } else if (action.request) {
+      }
+      else if (action.request) {
         this.requestData(action.request)
       }
     }

src/components/toolbar-button/btn-fullscreen.js

@@ -0,0 +1,8 @@
+export default {
+    name: 'fullscreen',
+    icon: 'fa-arrows-alt',
+    title: '全屏',
+    action: {
+        event: 'fullscreen'
+    }
+}

src/components/toolbar-button/btn-hide.js

@@ -0,0 +1,8 @@
+export default {
+    name: 'hide',
+    icon: 'fa-eye',
+    title: '隐藏',
+    action: {
+        event: 'hide'
+    }
+}

src/components/toolbar-button/toolbarBtn.js

@@ -10,6 +10,8 @@ import BtnUl from './btn-ul'
 import BtnOl from './btn-ol'
 import BtnHr from './btn-hr'
 import BtnCode from './btn-code'
+import BtnHide from './btn-hide'
+import BtnFullscreen from './btn-fullscreen'
 
 export let defaultBtns = [
   BtnBold,
@@ -30,7 +32,10 @@ export let defaultBtns = [
   BtnImg,
   BtnLink,
   BtnCode,
-  BtnTable
+  BtnTable,
+  Divider,
+  BtnHide,
+    BtnFullscreen
 ]
 
 function getDefaultBtnsMap () {