Merge pull request #14 from Coding/tencent

Tencent

Author: 春秋一语

app/commands/commandBindings/tab.js

@@ -35,4 +35,36 @@ export default {
       Tab.moveTabToPane(c.context.id, newPaneId)
     )
   },
+
+  'tab:zenmode': () => {
+    const tab = document.querySelector('.tab-content-item.active');
+    const datasetExt = tab.dataset.ext;
+    const ext = datasetExt && datasetExt.toLowerCase();
+    if (['md', 'markdown', 'html'].includes(ext)) {
+      tab.classList.add('zenmode_preview');
+    } else {
+      tab.classList.add('zenmode');
+    }
+    if (tab.requestFullscreen) {
+      tab.requestFullscreen();
+    } else if (tab.webkitRequestFullscreen) {
+      tab.webkitRequestFullscreen();
+    } else if (tab.mozRequestFullScreen) {
+      tab.mozRequestFullScreen();
+    } else if (tab.msRequestFullscreen) {
+      tab.msRequestFullscreen();
+    }
+  }
+}
+
+function exitFullScreen() {
+  const isFull = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement;
+  if (!isFull) {
+    const tab = document.querySelector('.tab-content-item.active');
+    tab.classList.remove('zenmode', 'zenmode_preview');
+  }
 }
+document.addEventListener('fullscreenchange', () => exitFullScreen());
+document.addEventListener('webkitfullscreenchange', () => exitFullScreen());
+document.addEventListener('mozfullscreenchange', () => exitFullScreen());
+document.addEventListener('msfullscreenchang', () => exitFullScreen());

app/commands/keymaps.js

@@ -24,6 +24,7 @@ if (isMac) {
     'ctrl+g': 'editor:goto',
     'alt+l': 'edit:toggle_format',
     'cmd+/': 'edit:toggle_comment',
+    'cmd+f11': 'tab:zenmode',
   }
   modifierKeysMap = {
     ctrl: '⌃',
@@ -51,6 +52,7 @@ if (isMac) {
     'ctrl+g': 'editor:goto',
     'alt+l': 'edit:toggle_format',
     'ctrl+/': 'edit:toggle_comment',
+    'ctrl+f11': 'tab:zenmode',
   }
   modifierKeysMap = {
     ctrl: 'Ctrl',

app/commons/Tab/TabContent.jsx

@@ -10,11 +10,12 @@ export const TabContent = ({ children }) => (
 )
 
 export const TabContentItem = observer(({ tab, children }) => {
+  const ext = tab.title && tab.title.split('.')[1];
   if (tab.isActive && tab.onActive) {
     tab.onActive()
   }
   return (
-    <div className={cx('tab-content-item', { active: tab.isActive })}>
+    <div className={cx('tab-content-item', { active: tab.isActive })} data-ext={ext}>
       {children}
     </div>
   )

app/components/MonacoEditor/Editors/scrollMixin.js

@@ -14,8 +14,10 @@ function buildScrollMap($lines) {
 }
 
 function scrollMixin(monaco, previewDOM) {
+    let mousedown = false;
     let active = 'editor';
     const $lines = previewDOM.getElementsByClassName('line');
+    const editorDOM = monaco.getDomNode();
     const map = buildScrollMap($lines);
     const array = Object.keys(map);
     const length = array.length;
@@ -24,15 +26,21 @@ function scrollMixin(monaco, previewDOM) {
     let preMap = { top: 0, current: 0, next: 0 };
     let nextMap = { top: 0, current: 0, next: 0 };
     let areaStep = 1;
-    previewDOM.addEventListener('mouseover', () => active = 'preview');
-    monaco.getDomNode().addEventListener('mouseover', () => active = 'editor');
+    document.addEventListener('mousedown', () => mousedown = true);
+    document.addEventListener('mouseup', () => mousedown = false);
+    previewDOM.addEventListener('mouseover', () => {
+        if (!mousedown) {
+            active = 'preview';
+        }
+    });
+    editorDOM.addEventListener('mouseover', () => active = 'editor');
     monaco.onDidScrollChange((event) => {
         if (active === 'preview') {
             return;
         }
         let mapItem;
         const line = Math.ceil(event.scrollTop / 20); // 20px each line
-        if (line > array[length - 1]) {
+        if (line > (array[length - 1] - editorDOM.offsetHeight / 20)) {
             previewDOM.scrollTop = lastMap.top;
             return;
         }
@@ -41,7 +49,7 @@ function scrollMixin(monaco, previewDOM) {
             const next = array[i + 1];
             if (line == cur) {
                 mapItem = map[line];
-            } else if (line - cur > 0 && line - cur < 6 && next - line > 0 && next - line < 6) {
+            } else if (line - cur > 0 && line - cur < 6 && next - line > 0 && next - line < 6) { // 6 line range
                 mapItem = map[next];
             }
         }

app/styles/core-ui/Tab.styl

@@ -35,6 +35,18 @@ $tab-control-width = $tab-height*0.5;
 .tab-content-item {
   width: 100%;
   height: 100%;
+  display: none;
+  &.active {
+    display: block;
+  }
+  &.zenmode {
+    padding-left: calc(50% - 600px);
+    padding-right: calc(50% - 600px);
+    background-color: #000;
+  }
+  &.zenmode_preview {
+    background-color: #000;
+  }
 }
 
 .tab-bar {
@@ -193,10 +205,3 @@ $tab-control-width = $tab-height*0.5;
   }
 
 }
-
-.tab-content-item {
-  display: none;
-  &.active {
-    display: block;
-  }
-}