Presentation mode (#57)

* presentation mode

* fix attrs

* add distraction-free mode

aka hide footer in normal window
and hide header and footer in full-screen

* add indicator

* tweaks

* extract presentation control panel as a component

* enable arrow keys in preview mode

* extract writing modes control panel

support using ctrl/cmd + shift + \ to switch mode

* fix lint

* fix typo

* update print result for presentation

* add more animations

* fix lint

Author: egoist

app/eme/menu.js

@@ -205,6 +205,13 @@ module.exports = cb => {
         {
           type: 'separator'
         },
+        {
+          label: 'Toggle Distraction Free mode',
+          accelerator: 'CmdOrCtrl+J',
+          click(item, focusedWindow) {
+            if (focusedWindow) focusedWindow.webContents.send('toggle-distraction-free-mode')
+          }
+        },
         {
           label: 'Toggle Focus Mode',
           accelerator: 'CmdOrCtrl+\\',

app/eme/window.js

@@ -47,6 +47,14 @@ class Window {
       web.send('win-focus')
     })
 
+    win.on('enter-full-screen', () => {
+      web.send('enter-full-screen')
+    })
+
+    win.on('leave-full-screen', () => {
+      web.send('leave-full-screen')
+    })
+
     if (isDev) {
       const installExtension = require('electron-devtools-installer')
       installExtension.default(installExtension.VUEJS_DEVTOOLS)

app/vendor/css/print.css

@@ -0,0 +1,3 @@
+.slide:not(:last-child) {
+  margin-bottom: 30px;
+}

app/welcome-guide.md

@@ -6,4 +6,36 @@ EME is trying to give you the best experience of writing in Markdown.
 
 Markdown shines ✨
 
-![shiny](http://ww4.sinaimg.cn/large/a15b4afegw1f6499jo5ruj20iw0anmxv.jpg)
+![shiny](http://ww4.sinaimg.cn/large/a15b4afegw1f6499jo5ruj20iw0anmxv.jpg)
+
+## Focus Mode
+
+The first feature that most markdown editors do not have is, focus the paragraph you are actually writing. It reduces a lot of distractions when you are working on a long post. Use <kbd>Ctrl/CMD + \</kbd> to toggle it.
+
+## Distraction Free Mode
+
+One step further, you may want to hide the header and footer when you are writing in full-screen. Use <kbd>Ctrl/CMD + J</kbd> to toggle it.
+
+## Vim Mode
+
+For developers, you may miss the vim key binding, here it is. Use <kbd>Ctrl/CMD + I</kbd> to toggle it.
+
+## Presentation Mode
+
+You can event write markdown and render then in slides! Here's a example:
+
+```markdown
+# title 
+# subtitle
+
+---
+
+# another title
+## another subtitle
+```
+
+Use <kbd>Ctrl/CMD + K</kbd> to toggle it!
+
+## Shortcuts
+
+Please view: https://github.com/egoist/eme/wiki/Key-bindings

package.json

@@ -26,6 +26,7 @@
     "editor"
   ],
   "devDependencies": {
+    "autoprefixer": "^6.4.0",
     "babel-eslint": "^6.1.2",
     "babel-loader": "^6.2.4",
     "babel-plugin-transform-runtime": "^6.9.0",
@@ -64,6 +65,7 @@
     "webpack-visualizer-plugin": "^0.1.5"
   },
   "dependencies": {
+    "animate.css": "^3.5.1",
     "babel-runtime": "^6.9.2",
     "codemirror": "^5.17.0",
     "highlight.js": "^9.5.0",

scripts/webpack.config.js

@@ -55,7 +55,10 @@ module.exports = {
       require('postcss-nested'),
       require('postcss-simple-vars'),
       require('postcss-import')(),
-      require('postcss-mixins')
+      require('postcss-mixins'),
+      require('autoprefixer')({
+        browsers: ['last 2 Chrome versions']
+      })
     ],
     loaders: {
       css: ExtractTextPlugin.extract(

src/app.vue

@@ -1,25 +1,66 @@
 <style src="hint.css/hint.css"></style>
+<style src="animate.css/animate.css"></style>
 <style src="./css/reset"></style>
 <style src="./css/editor-reset"></style>
 
 <template>
-  <div id="app">
-    <app-header></app-header>
+  <div id="app"
+    :class="{
+      'distraction-free': isDistractionFreeMode,
+      'full-screen': isFullScreen
+    }">
+    <app-header v-if="!isDistractionFreeMode || (isDistractionFreeMode && !isFullScreen)"></app-header>
     <app-main></app-main>
-    <app-footer></app-footer>
+    <app-footer v-if="showFooter()"></app-footer>
   </div>
 </template>
 
 <script>
+  import {ipcRenderer, remote} from 'electron'
+
   import appHeader from './components/header'
   import appMain from './components/main'
   import appFooter from './components/footer'
+  import {$} from 'utils/dom'
+
+  const currentWindow = remote.getCurrentWindow()
 
   export default {
+    data() {
+      return {
+        isDistractionFreeMode: false,
+        isFullScreen: currentWindow.isFullScreen()
+      }
+    },
+    vuex: {
+      getters: {
+        tabsAmount: state => state.editor.tabs.length,
+      }
+    },
     components: {
       appHeader,
       appMain,
       appFooter
+    },
+    ready() {
+      ipcRenderer.on('toggle-distraction-free-mode', () => {
+        this.isDistractionFreeMode = !this.isDistractionFreeMode
+      })
+      ipcRenderer.on('enter-full-screen', () => {
+        this.isFullScreen = true
+      })
+      ipcRenderer.on('leave-full-screen', () => {
+        this.isFullScreen = false
+      })
+    },
+    methods: {
+      showFooter() {
+        return this.tabsAmount > 0 &&
+          (
+            !this.isDistractionFreeMode ||
+            (this.isDistractionFreeMode && !this.isFullScreen)
+          )
+      }
     }
   }
 </script>

src/components/footer.vue

@@ -81,6 +81,9 @@
     path {
       fill: #666;
     }
+    .disabled & path {
+      fill: #ccc;
+    }
   }
   .presentation-footer-control,
   .writing-modes {
@@ -94,51 +97,21 @@
 </style>
 
 <template>
-  <footer class="footer" v-if="showFooter" :class="{'mac-footer': isMac}">
+  <footer class="footer" :class="{'mac-footer': isMac}">
     <span class="file-path" v-if="status.filePath">{{ status.filePath }}</span>
     <span class="word-count">{{ status.wordCount }} words</span>
     <span class="pdf-link clickable-link" v-if="status.pdf" @click="openPDF(status.pdf)">PDF</span>
     <div class="footer-right">
-      <div class="footer-icon-group presentation-footer-control" v-if="status.isPresentationMode">
-        <span
-          aria-label="Previous Slide"
-          class="footer-icon-item hint--top-left hint--rounded"
-          @click="moveSlide('left')">
-          <svg-icon name="arrowLeft" class="footer-icon"></svg-icon>
-        </span>
-        <span class="footer-icon-item">
-          {{ status.slides.current + 1 }}/{{ status.slides.total }}
-        </span>
-        <span
-          aria-label="Next Slide"
-          class="footer-icon-item hint--top-right hint--rounded"
-          @click="moveSlide('right')">
-          <svg-icon name="arrowRight" class="footer-icon"></svg-icon>
-        </span>
-      </div>
-      <div class="footer-icon-group writing-modes" v-if="status.writingMode">
-        <span
-          aria-label="Editor only"
-          class="footer-icon-item writing-mode hint--top-left hint--rounded"
-          :class="{active: status.writingMode === 'writing'}"
-          @click="setWritingMode('writing')">
-          <svg-icon name="pencil" class="footer-icon"></svg-icon>
-        </span>
-        <span
-          aria-label="Editor and Preview"
-          class="footer-icon-item writing-mode hint--top-left hint--rounded"
-          :class="{active: status.writingMode === 'default'}"
-          @click="setWritingMode('default')">
-          <svg-icon name="alignHorizontalMiddle" class="footer-icon"></svg-icon>
-        </span>
-        <span
-          aria-label="Preview only"
-          class="footer-icon-item writing-mode hint--top-left hint--rounded"
-          :class="{active: status.writingMode === 'preview'}"
-          @click="setWritingMode('preview')">
-          <svg-icon name="eye" class="footer-icon"></svg-icon>
-        </span>
-      </div>
+      <presentation-control
+        :slides="status.slides"
+        :writing-mode="status.writingMode"
+        v-if="status.isPresentationMode">
+      </presentation-control>
+      <writing-modes
+        :writing-mode="status.writingMode"
+        :current-tab-index="currentTabIndex"
+        v-if="status.writingMode">
+      </writing-modes>
     </div>
   </footer>
 </template>
@@ -147,12 +120,13 @@
   import tildify from 'tildify'
   import {isMac} from 'utils/os'
   import {shell} from 'electron'
-  import SvgIcon from 'components/svg-icon'
+
+  import PresentationControl from 'components/presentation-control'
+  import WritingModes from 'components/writing-modes'
 
   export default {
     vuex: {
       getters: {
-        showFooter: state => state.editor.tabs.length > 0,
         currentTabIndex: state => state.editor.currentTabIndex,
         status: state => {
           const editor = state.editor.tabs[state.editor.currentTabIndex] || {}
@@ -170,17 +144,6 @@
             }
           }
         }
-      },
-      actions: {
-        setWritingMode({dispatch}, mode) {
-          dispatch('SET_WRITING_MODE', {
-            index: this.currentTabIndex,
-            mode
-          })
-        },
-        moveSlide({dispatch}, direction) {
-          dispatch('MOVE_SLIDE', direction)
-        }
       }
     },
     data() {
@@ -194,7 +157,8 @@
       }
     },
     components: {
-      SvgIcon
+      PresentationControl,
+      WritingModes
     }
   }
 </script>

src/components/header.vue

@@ -9,6 +9,9 @@
     -webkit-app-region: drag;
     &.is-mac {
       padding-left: 80px;
+      .full-screen & {
+        padding-left: 0;
+      }
     }
     .tab {
       height: $header-height;

src/components/main.vue

@@ -5,10 +5,13 @@
 
 <style>
   .main {
+    /* total - header - footer */
     height: calc(100% - 36px - 25px);
+    .distraction-free.full-screen & {
+      height: 100%;
+    }
   }
   .tab-body {
-    /* total - header - footer */
     height: 100%;
     display: flex;
     &.resizing {
@@ -55,6 +58,10 @@
   }
   .preview {
     padding: 10px;
+    overflow-x: hidden;
+    &.preview-presentation {
+      padding: 0;
+    }
     &::-webkit-scrollbar {
       width: 0;
     }
@@ -105,7 +112,13 @@
         <div class="resize-bar" @mousedown="resizeStart($event, $index)"></div>
       </div>
       <div
-        :class="'preview preview-' + $index"
+        :class="[
+          'preview',
+          'preview-' + $index,
+          {
+            'preview-presentation': tab.isPresentationMode
+          }
+        ]"
         :style="{ width: (100 - tab.split) + '%' }"
         v-show="currentTab && currentTab.writingMode !== 'writing'">
         <presentation :slides="tab.html" v-if="tab.isPresentationMode"></presentation>
@@ -531,10 +544,13 @@
           })
           if (filePath) {
             const html = makeHTML({
-              html: `<div class="markdown-body">${this.currentTab.html}</div>`,
+              html: Array.isArray(this.currentTab.html) ?
+                this.currentTab.html.map(html => `<div class="slide markdown-body">${html}</div>`).join('') :
+                `<div class="markdown-body">${this.currentTab.html}</div>`,
               css: [
                 appPath('vendor/github-markdown-css/github-markdown.css'),
-                appPath('vendor/katex/katex.min.css')
+                appPath('vendor/katex/katex.min.css'),
+                appPath('vendor/css/print.css')
               ]
             })
             ipcRenderer.send('print-to-pdf', html, filePath)