added line numbers functionality

bot2x · Feb 20, 2024 · f337fc2 · f337fc2
1 parent baf12e0
commit f337fc2
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 123 deletions.
diff --git a/index.css b/index.css
diff --git a/index.html b/index.html
@@ -4,89 +4,8 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>📋 Line Numbers for Textarea</title>
-    <style>
-      .editor {
-        display: inline-flex;
-        gap: 10px;
-        font-family: monospace;
-        line-height: 21px;
-        background: #282a3a;
-        border-radius: 2px;
-        padding: 20px 10px;
-        height: 200px;
-        overflow-y: auto;
-      }
-
-      .line-numbers {
-        width: 20px;
-        text-align: right;
-        height: 9999px;
-      }
-
-      .line-numbers span {
-        counter-increment:  linenumber;
-      }
-
-      .line-numbers span::before {
-        content: counter(linenumber);
-        display: block;
-        color: #506882;
-      }
-
-      textarea {
-        height: 9999px;
-        line-height: 21px;
-        overflow-y: hidden;
-        padding: 0;
-        border: 0;
-        background: #282a3a;
-        color: #FFF;
-        min-width: 500px;
-        outline: none;
-        resize: none;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="editor">
-      <div class="line-numbers">
-        <span></span>
-      </div>
-      <textarea></textarea>
-    </div>
-
-    <script>
-      const textarea = document.querySelector('textarea')
-      const lineNumbers = document.querySelector('.line-numbers')
-
-      textarea.addEventListener('keyup', event => {
-        const numberOfLines = event.target.value.split('\n').length
-
-        lineNumbers.innerHTML = Array(numberOfLines)
-          .fill('<span></span>')
-          .join('')
-      })
-
-      textarea.addEventListener('keydown', event => {
-        if (event.key === 'Tab') {
-          const start = textarea.selectionStart
-          const end = textarea.selectionEnd
-
-          textarea.value = textarea.value.substring(0, start) + '\t' + textarea.value.substring(end)
-          textarea.focus()      
-
-          event.preventDefault()
-        }
-      })
-    </script>
-  </body>
-<html>
-    <head>
-        <title>Texty</title>
-        <meta charset="UTF-8">
-        <link rel="stylesheet" href="styles.css">
-    </head>
+    <title>Texty</title>
+    <link rel="stylesheet" href="styles.css">
     <body>
         <!-- <div id="editor">
             This is where the editor will live and evolve.

diff --git a/js/layoutcontrols/tabControls.js b/js/layoutcontrols/tabControls.js
@@ -192,7 +192,7 @@ function tabEventHandlers () {
         const tabcontentToHighlight = getContainerForTab(element);
         console.log(tabcontentToHighlight);
 
-        tabcontentToHighlight.style.display = "block";
+        tabcontentToHighlight.style.display = "inline-flex";
         element.classList.add("selected_tab_button");
 
         tcRef.selectThisTab(element, doClick=false);   

diff --git a/get_events.js → js/utils/get_events.js b/get_events.js → js/utils/get_events.js
@@ -29,25 +29,6 @@ function recordEvent(eventType,e) {
     // console.log(eventStack);
 }
 
-
-function updateLineNumbers() {
-
-    console.log("TEXT",editor.innerText);
-    let lines = editor.innerText.split("\n");
-    let lineCount = lines.length;
-
-    let lineNumbers = "";
-    for (let i = 1; i <= lineCount; i++) {
-        lineNumbers += (i) + "\n";
-    }
-
-    editor.setAttribute("data-line", lineNumbers);
-}
-
-
-// Add oninput event listener to call updateLineNumbers function
-editor.addEventListener("input", updateLineNumbers);
-
 // Event listeners to record events
 editor.addEventListener('keydown', function(e) {
     recordEvent('keydown',e);

diff --git a/js/utils/tabFunctions.js b/js/utils/tabFunctions.js
@@ -37,8 +37,42 @@ function getTabDivPair (tabN, tablayoutId) {
     let div_tab = document.createElement("div");
     div_tab.id = `layout${tablayoutId}.file${tabN}`;
     div_tab.className = `tabcontent belongs_to_layout_${tablayoutId}`;
-    div_tab.contentEditable="true";
-    div_tab.innerHTML = `Start typings in file - ${tabN}`;
+    // div_tab.classList.add("editor");
+    // div_tab.contentEditable="true";
+
+
+    // Create a div for linenumbers with the class "line-numbers"
+    var lineNumbersDiv = document.createElement("div");
+    lineNumbersDiv.classList.add("line-numbers");
+    lineNumbersDiv.innerHTML = '<span></span>';
+
+    // Create a textarea element
+    var textarea = document.createElement("textarea");
+    textarea.innerHTML = `Start typings in file - ${tabN}`;
+
+    // Append the lineNumbersDiv and textarea to the parentDiv
+    div_tab.appendChild(lineNumbersDiv);
+    div_tab.appendChild(textarea);
+
+    textarea.addEventListener('keyup', event => {
+        const numberOfLines = event.target.value.split('\n').length
+
+        lineNumbersDiv.innerHTML = Array(numberOfLines)
+        .fill('<span></span>')
+        .join('')
+    })
+
+    textarea.addEventListener('keydown', event => {
+    if (event.key === 'Tab') {
+        const start = textarea.selectionStart
+        const end = textarea.selectionEnd
+
+        textarea.value = textarea.value.substring(0, start) + '\t' + textarea.value.substring(end)
+        textarea.focus()      
+
+        event.preventDefault()
+    }
+    })
 
     // let div_tab = `<div id="file${fileNum}" class="tabcontent">Start typings ..... </div>`
     let button_tab = document.createElement("button");

diff --git a/styles.css b/styles.css
@@ -72,8 +72,48 @@ body {
     height: 100%;
     width:100%;
     font-size: 1.6rem;
-    overflow: auto;
-}
+    /* overflow: auto; */
+
+    display: inline-flex;
+    gap: 10px;
+    font-family: monospace;
+    line-height: 21px;
+    background: #282a3a;
+    border-radius: 2px;
+    padding: 20px 10px;
+    /* height: 200px; */
+    overflow-y: auto;
+}
+
+.line-numbers {
+    width: 20px;
+    text-align: right;
+    height: 9999px;
+    font-size: 15px;
+  }
+
+  .line-numbers span {
+    counter-increment:  linenumber;
+  }
+
+  .line-numbers span::before {
+    content: counter(linenumber);
+    display: block;
+    color: #506882;
+  }
+
+textarea {
+    height: 9999px;
+    line-height: 21px;
+    overflow-y: auto;
+    padding: 0;
+    border: 0;
+    background: #282a3a;
+    color: #FFF;
+    min-width: 500px;
+    outline: none;
+    resize: none;
+  }
 
 .tablink {
     width : 110px;