kazzkiq · deadlyjack · Nov 14, 2018 · Nov 14, 2018 · Nov 14, 2018 · Nov 14, 2018
diff --git a/build/codeflask.min.js b/build/codeflask.min.js
diff --git a/build/codeflask.module.js b/build/codeflask.module.js
diff --git a/build/index.html b/build/index.html
@@ -1,25 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>CodeFlask Test Page</title>
   <script src="codeflask.min.js"></script>
   <style>
-    body {
-      font-family: Arial;
-      margin: 30px;
+    * {
+      margin: 0;
+      padding: 0;
     }
 
     .test {
       background: #eee;
+      height: 100%;
+      widows: 100%;
     }
   </style>
 </head>
-<body>
-  <h1 id="header1">Testing below:</h1>
 
+<body>
   <div class="test">// Feel free to play with the code. :)
 
 function Hey(phrase) {
@@ -44,4 +46,5 @@ <h1 id="header1">Testing below:</h1>
     window['flask'] = flask;
   </script>
 </body>
+
 </html>
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "rollup-plugin-commonjs": "^9.1.0",
     "rollup-plugin-node-resolve": "^3.0.3",
     "rollup-plugin-uglify": "^3.0.0",
-    "serve": "^7.0.0",
+    "serve": "^10.1.1",
     "wdio-chromedriver-service": "^0.1.3",
     "wdio-mocha-framework": "^0.5.13",
     "wdio-spec-reporter": "^0.1.4",
@@ -52,5 +52,8 @@
   "bugs": {
     "url": "https://github.com/kazzkiq/CodeFlask/issues"
   },
-  "homepage": "https://kazzkiq.github.io/CodeFlask/"
+  "homepage": "https://kazzkiq.github.io/CodeFlask/",
+  "directories": {
+    "test": "test"
+  }
 }
diff --git a/src/codeflask.js b/src/codeflask.js
@@ -1,7 +1,16 @@
-import { editor_css } from './styles/editor';
-import { inject_css } from './styles/injector';
-import { default_css_theme, FONT_SIZE } from './styles/theme-default';
-import { escape_html } from './utils/html-escape';
+import {
+  editor_css
+} from './styles/editor';
+import {
+  inject_css
+} from './styles/injector';
+import {
+  default_css_theme,
+  FONT_SIZE
+} from './styles/theme-default';
+import {
+  escape_html
+} from './utils/html-escape';
 import Prism from 'prismjs';
 
 export default class CodeFlask {
@@ -35,6 +44,7 @@ export default class CodeFlask {
     }
 
     this.opts = opts;
+    this.activeLineId = null;
     this.startEditor();
   }
 
@@ -52,6 +62,7 @@ export default class CodeFlask {
     this.createTextarea();
     this.createPre();
     this.createCode();
+    this.createHighlighter();
 
     this.runOptions();
     this.listenTextarea();
@@ -87,13 +98,51 @@ export default class CodeFlask {
     this.setLineNumber();
   }
 
+  createHighlighter() {
+    this.elHighlight = this.createElement('span', this.elWrapper);
+    this.elHighlight.classList.add('codeflask_active_line');
+    this.elHighlight.style.width = window.getComputedStyle(this.elWrapper).width;
+  }
+
   createElement(elementTag, whereToAppend) {
     const element = document.createElement(elementTag);
     whereToAppend.appendChild(element);
 
     return element;
   }
 
+  getCurrentLineNumber() {
+    const caretPos = this.elTextarea.selectionStart;
+    const text = this.elTextarea.value;
+    const allText = text.split('\n');
+    let sum = 0;
+    if (caretPos !== text.length) {
+      for (let i = 0; i < allText.length; ++i) {
+        // length is incremented to one becaus newline absence dunring split
+        sum += (allText[i].length + 1);
+        // if caret position is more than the previous line lenght
+        if (sum >= caretPos) {
+          //checks if last char is newline break
+          if (text[caretPos - 1] === '\n') return i + 2;
+          else return i + 1;
+        }
+      }
+    } else return allText.length;
+
+    return
+  }
+
+
+  activeLineHighlight(lineNumber) {
+    this.activeLineId = 'codeflask_line_number_' + lineNumber;
+    const activeLine = document.getElementById(this.activeLineId);
+    const activeLineStyle = activeLine && activeLine.getBoundingClientRect().top;
+    const wrapperStyle = this.elWrapper.getBoundingClientRect().top;
+    const y = parseFloat(activeLineStyle) - parseFloat(wrapperStyle);
+    this.elHighlight.style.transform = `translateY(${y}px)`;
+    // this.elHighlight.style.top = y + 'px';
+  }
+
   runOptions() {
     this.opts.rtl = this.opts.rtl || false;
     this.opts.tabSize = this.opts.tabSize || 2;
@@ -144,13 +193,14 @@ export default class CodeFlask {
   }
 
   updateLineNumbersCount() {
-    let numberList = '';
-
+    while (this.elLineNumbers.firstChild) this.elLineNumbers.firstChild.remove();
     for (let i = 1; i <= this.lineNumber; i++) {
-      numberList = numberList + `<span class="codeflask__lines__line">${i}</span>`;
+      let lineNumber = document.createElement('div');
+      lineNumber.className = 'codeflask__lines__line';
+      lineNumber.id = 'codeflask_line_number_' + i;
+      lineNumber.textContent = i;
+      this.elLineNumbers.appendChild(lineNumber);
     }
-
-    this.elLineNumbers.innerHTML = numberList;
   }
 
   listenTextarea() {
@@ -160,21 +210,34 @@ export default class CodeFlask {
       this.highlight();
       setTimeout(() => {
         this.runUpdate();
-        this.setLineNumber();
       }, 1);
 
+      this.handleSelfClosingCharacters(e);
+      this.handleNewLineIndentation(e);
     });
 
     this.elTextarea.addEventListener('keydown', (e) => {
       this.handleTabs(e);
-      this.handleSelfClosingCharacters(e);
-      this.handleNewLineIndentation(e);
+      setTimeout(() => {
+        this.setLineNumber();
+        this.activeLineHighlight(this.getCurrentLineNumber());
+      }, 1);
+    });
+
+    this.elTextarea.addEventListener('click', (e) => {
+      this.activeLineHighlight(this.getCurrentLineNumber());
+    });
+    this.elTextarea.addEventListener('mousedown', (e) => {
+      if (e.which === 2) e.preventDefault();
     });
 
     this.elTextarea.addEventListener('scroll', (e) => {
       this.elPre.style.transform = `translate3d(-${e.target.scrollLeft}px, -${e.target.scrollTop}px, 0)`;
       if (this.elLineNumbers) {
         this.elLineNumbers.style.transform = `translate3d(0, -${e.target.scrollTop}px, 0)`;
+        const activeLine = document.getElementById(this.activeLineId);
+        console.log(activeLine.getBoundingClientRect().top);
+        this.elHighlight.style.transform = `translateY(${activeLine.getBoundingClientRect().top}px)`;
       }
     });
   }
@@ -199,28 +262,28 @@ export default class CodeFlask {
 
   handleSelfClosingCharacters(e) {
     const openChars = ['(', '[', '{', '<'];
-    const key = e.key;
+    const key = e.data;
 
     if (!openChars.includes(key)) {
       return;
     }
 
-    switch(key) {
+    switch (key) {
       case '(':
-      this.closeCharacter(')');
-      break;
+        this.closeCharacter(')');
+        break;
 
       case '[':
-      this.closeCharacter(']');
-      break;
+        this.closeCharacter(']');
+        break;
 
       case '{':
-      this.closeCharacter('}');
-      break;
+        this.closeCharacter('}');
+        break;
 
       case '<':
-      this.closeCharacter('>');
-      break;
+        this.closeCharacter('>');
+        break;
     }
   }
 
@@ -233,7 +296,7 @@ export default class CodeFlask {
   }
 
   handleNewLineIndentation(e) {
-    if (e.keyCode !== 13) {
+    if (e.type !== 'input' || e.type !== 'input' && e.inputType !== 'insertLineBreak') {
       return;
     };
 
@@ -246,8 +309,10 @@ export default class CodeFlask {
     // const currentLine = lines.length;
     // const lastLine = lines[currentLine - 1];
 
-    // console.log(currentLine, allLines);
+    // const selection = this.textSelection;
+    // const charIndex = selection.focusOffset;
 
+    // console.log(selection);
     // if (lastLine !== undefined && currentLine < allLines) {
     //   e.preventDefault();
     //   const spaces = lastLine.match(/^ {1,}/);
@@ -256,6 +321,7 @@ export default class CodeFlask {
     //     console.log(spaces[0].length);
     //     const newCode = `${this.code.substring(0, selectionStart)}\n${' '.repeat(spaces[0].length)}${this.code.substring(selectionEnd)}`;
     //     this.updateCode(newCode);
+    //     console.log(newCode);
     //     setTimeout(() => {
     //       this.elTextarea.selectionEnd = selectionEnd + spaces[0].length + 1;
     //     }, 0);
@@ -278,6 +344,7 @@ export default class CodeFlask {
     this.elCode.innerHTML = escape_html(newCode);
     this.highlight();
     setTimeout(this.runUpdate.bind(this), 1);
+    this.activeLineHighlight(1);
   }
 
   updateLanguage(newLanguage) {
@@ -326,4 +393,4 @@ export default class CodeFlask {
   disableReadonlyMode() {
     this.elTextarea.removeAttribute('readonly');
   }
-}
+}
diff --git a/src/styles/editor.js b/src/styles/editor.js
@@ -1,12 +1,23 @@
-import { BACKGROUND_COLOR, LINE_HEIGHT, FONT_SIZE } from './theme-default';
-import { cssSupports } from '../utils/css-supports';
+import {
+  BACKGROUND_COLOR,
+  LINE_HEIGHT,
+  FONT_SIZE
+} from './theme-default';
+import {
+  cssSupports
+} from '../utils/css-supports';
 
 const FONT_FAMILY = `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`;
 const COLOR = (cssSupports('caret-color', '#000')) ? BACKGROUND_COLOR : '#ccc';
 const LINE_NUMBER_WIDTH = '40px'
 
 
 export const editor_css = `
+
+  textarea.codeflask__textarea.codeflask__flatten::selection {
+      background: #3332;
+  }
+
   .codeflask {
     position: absolute;
     width: 100%;
@@ -28,7 +39,6 @@ export const editor_css = `
     background: none;
     border: none;
     color: ${COLOR};
-    z-index: 1;
     resize: none;
     font-family: ${FONT_FAMILY};
     -webkit-appearance: pre;
@@ -49,7 +59,7 @@ export const editor_css = `
   }
 
   .codeflask__flatten {
-    padding: 10px;
+    padding: 0;
     font-size: ${FONT_SIZE};
     line-height: ${LINE_HEIGHT};
     white-space: pre;
@@ -63,7 +73,6 @@ export const editor_css = `
   }
 
   .codeflask--has-line-numbers .codeflask__flatten {
-    width: calc(100% - ${LINE_NUMBER_WIDTH});
     left: ${LINE_NUMBER_WIDTH};
   }
 
@@ -78,7 +87,7 @@ export const editor_css = `
   }
 
   .codeflask__lines {
-    padding: 10px 4px;
+    padding: 0 4px;
     font-size: 12px;
     line-height: ${LINE_HEIGHT};
     font-family: 'Cousine', monospace;
@@ -89,12 +98,30 @@ export const editor_css = `
     height: 100%;
     text-align: right;
     color: #999;
-    z-index: 2;
+    z-index: 9;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
   }
 
   .codeflask__lines__line {
     display: block;
   }
+
+  .codeflask_active_line{
+    z-index: 2;
+    user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -o-user-select: none;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: ${LINE_HEIGHT};
+    background-color: rgba(153, 153, 170, 0.2);
+  }
 
   .codeflask.codeflask--has-line-numbers {
     padding-left: ${LINE_NUMBER_WIDTH};
@@ -108,6 +135,6 @@ export const editor_css = `
     width: ${LINE_NUMBER_WIDTH};
     height: 100%;
     background: #eee;
-    z-index: 1;
+    z-index: 9;
   }
 `;