editor improves

Author: antfu

src/components/Editor.vue

@@ -1,47 +1,99 @@
 <template>
 <div class="editor">
-  <div class="header">
-
-  </div>
+  <spinner v-if="loading"/>
   <iframe src="https://ide.wy-lang.org/embed?show-bars" ref="iframe"/>
 </div>
 </template>
 
 <script>
+import Spinner from './Spinner.vue'
+
 export default {
   name: 'Editor',
   props: {
     snippet: Object
   },
+  data() {
+    return {
+      loading: true,
+    }
+  },
+  components: {
+    Spinner,
+  },
   methods: {
-    updateCode() {
+    send(data){
+      this.$refs.iframe.contentWindow.postMessage(data, '*')
+    },
+    initEditor() {
       this.$refs.iframe.onload = () => {
-        this.$refs.iframe.contentWindow.postMessage({ action: 'config', field:'title', value: this.snippet.title }, '*')
-        this.$refs.iframe.contentWindow.postMessage({ action: 'code', value: this.snippet.code }, '*')
-        this.$refs.iframe.contentWindow.postMessage({ action: 'run' }, '*')
+        this.send({ 
+          action: 'custom', 
+          value: [{
+            id: 'save',
+            icon: 'content-save',
+          }, {
+            id: 'fullscreen',
+            icon: 'fullscreen',
+            align: 'right'
+          }]
+        })
+        this.send({ action: 'config', field: 'title', value: this.snippet.title })
+        this.send({ action: 'code', value: this.snippet.code })
+        this.send({ action: 'run' })
+        this.loading = false
+      }
+    },
+    registerListener () {
+      window.addEventListener('message', this.onListener)
+    },
+    unregisterListener(){
+      window.removeEventListener('message', this.onListener)
+    },
+    onListener(e) {
+      const { action, source, id } = e.data
+      if (source !== 'wenyan-ide')
+        return
+      if (action === 'custom'){
+        switch (id){
+          case 'fullscreen':
+            this.$emit('fullscreen', true)
+        }
       }
     }
   },
-  watch:{
+  watch: {
     snippet() {
-      this.updateCode()
+      this.initEditor()
     }
   },
-  mounted(){
-    this.updateCode()
+  mounted() {
+    this.registerListener()
+    this.initEditor()
+  },
+  destroyed() {
+    this.unregisterListener()
   }
 }
 </script>
 
 <style lang="stylus" scoped>
 .editor
   border 1px solid gainsboro
-  border-radius 5px
   background white
+  position relative
+  height 100%
+  width 100%
 
   iframe
     border 0
     width 100%
     min-height 30rem
     height 100%
+
+  .spinner
+    position absolute
+    top 50%
+    left 50%
+    transform translate(-50%, -50%)
 </style>

src/components/Home.vue

@@ -18,8 +18,11 @@
     />
   </div>
   <div class="modal" v-if="editing" @click='editing = null'>
-    <div class="dialog">
-      <editor :snippet="editing"></editor>
+    <div class="dialog" :class="{fullscreen: editingFullscreen}">
+      <editor 
+        :snippet="editing"
+        @fullscreen="i=>editingFullscreen=i"
+      ></editor>
     </div>
   </div>
   <spinner v-show="loading"/>
@@ -47,7 +50,8 @@ export default {
       snippets: [],
       page: 0,
       totalPages: 9999,
-      editing: null
+      editing: null,
+      editingFullscreen: false,
     }
   },
   computed: {
@@ -149,6 +153,16 @@ $max-width = 85rem
     top 5rem
     bottom 5rem
     right 5rem
+    border-radius 5px
+    overflow hidden
+
+    &.fullscreen
+      left 0
+      top 0
+      bottom 0
+      right 0
+      height 100vh
+      border-radius 0
 
 .end-of-pages
   padding 2rem

src/components/SnippetPreview.vue

@@ -7,7 +7,7 @@
 
     <div class='right-aligned'>
       <icon-button @click.native="openAndRun" icon="play"/>
-      <icon-button @click.native="edit" icon="pencil"/>
+      <icon-button @click.native="edit" icon="pencil" v-if="snippet.token === 'public'"/>
       <icon-button @click.native="fork" icon="source-fork"/>
     </div>
   </div>

src/components/Spinner.vue

@@ -1,5 +1,5 @@
 <template>
-<div style="text-align:center">
+<div class="spinner" style="text-align:center">
   <span class="lds-ring">
     <div></div>
   </span>