Merge pull request #115 from arduino/feature/remember-scroll-position

Feature/remember scroll position

Author: murilopolese

ui/arduino/views/components/elements/editor.js

@@ -3,26 +3,43 @@ class CodeMirrorEditor extends Component {
     super()
     this.editor = null
     this.content = '# empty file'
+    this.scrollTop = 0
   }
 
+  createElement(content) {
+    if (content) this.content = content
+    return html`<div id="code-editor"></div>`
+  }
+
+
   load(el) {
     const onCodeChange = (update) => {
-      // console.log('code change', this.content)
       this.content = update.state.doc.toString()
       this.onChange()
     }
     this.editor = createEditor(this.content, el, onCodeChange)
-  }
 
-  createElement(content) {
-    if (content) this.content = content
-    return html`<div id="code-editor"></div>`
+    setTimeout(() => {
+      this.editor.scrollDOM.addEventListener('scroll', this.updateScrollPosition.bind(this))
+      this.editor.scrollDOM.scrollTo({
+        top: this.scrollTop,
+        left: 0
+      })
+    }, 10)
   }
 
   update() {
     return false
   }
 
+  unload() {
+    this.editor.scrollDOM.removeEventListener('scroll', this.updateScrollPosition)
+  }
+
+  updateScrollPosition(e) {
+    this.scrollTop = e.target.scrollTop
+  }
+
   onChange() {
     return false
   }

ui/arduino/views/components/elements/tab.js

@@ -57,7 +57,7 @@ function Tab(args) {
   }
 
   function selectTab(e) {
-    if(e.target.tagName === 'BUTTON' || e.target.tagName === 'IMG') return
+    if(e.target.classList.contains('close-tab')) return
     onSelectTab(e)
   }
 
@@ -71,9 +71,9 @@ function Tab(args) {
       <div class="text">
         ${hasChanges ? '*' : ''} ${text}
       </div>
-      <div class="options">
-        <button onclick=${onCloseTab}>
-          <img class="icon" src="media/close.svg" />
+      <div class="options close-tab">
+        <button class="close-tab" onclick=${onCloseTab}>
+          <img class="close-tab icon" src="media/close.svg" />
         </button>
       </div>
     </div>