feat: bring back line-numbers

Lord-Turmoil · May 9, 2024 · cfc5a16 · cfc5a16
1 parent 50d6f21
commit cfc5a16
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 7 deletions.
diff --git a/css/effect.css b/css/effect.css
@@ -210,8 +210,8 @@
     position: absolute;
     top: 0;
     right: 0;
-    width: 20%;
     height: 100%;
+    aspect-ratio: 1;
     text-align: center;
     font-size: 28px;
     line-height: var(--select-height);

diff --git a/css/index.css b/css/index.css
@@ -313,7 +313,7 @@ body {
     text-decoration: underline;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 850px) {
     .tools-wrapper .tools {
         flex-direction: column;
         justify-content: flex-start;
@@ -437,15 +437,17 @@ body {
 pre {
     box-sizing: border-box !important;
     margin: 0 !important;
-    /* background-color: transparent !important; */
     max-height: var(--panel-max-height);
     overflow-x: hidden;
     overflow-y: auto;
     padding: 5px !important;
-    /* border: none !important; */
     min-height: 400px !important;
 }
 
+pre.line-numbers {
+    padding-left: 50px !important;
+}
+
 pre code {
     display: block !important;
     box-sizing: border-box !important;

diff --git a/css/prism.css b/css/prism.css
diff --git a/index.html b/index.html
@@ -45,7 +45,7 @@
     <link rel="stylesheet" href="css/prism.css">
 </head>
 
-<body class="line-numbers">
+<body>
     <div class="border">
         <!-- header -->
         <div class="header animate__animated animate__fadeInDown">
@@ -69,7 +69,7 @@
                 <div class="tool">
                     <div class="prompt"><span>Language</span></div>
                     <div class="select-wrapper">
-                        <div class="select" id="lang" title="Select language">
+                        <div class="select" id="lang" title="Select language" style="width: 150px;">
                             <select id="lang-selector">
                                 <optgroup label="Development">
                                     <option value="c">C</option>
@@ -166,6 +166,13 @@
                         </div>
                     </div>
                 </div>
+                <div class="tool">
+                    <div class="prompt"><span>Line Number</span></div>
+                    <div class="checkbox-wrapper-8" title="Toggle line number">
+                        <input class="tgl tgl-skewed" id="cb3-8" type="checkbox" />
+                        <label class="tgl-btn" data-tg-off="OFF" data-tg-on="ON" for="cb3-8"></label>
+                    </div>
+                </div>
             </div>
             <div class="help-wrapper">
                 <div class="help-inner">

diff --git a/js/index.js b/js/index.js
@@ -161,6 +161,18 @@ function updateActiveLanguage(lang, text) {
     currentLanguage = text;
 }
 
+// Line number.
+var pre = $('#pre');
+$("#cb3-8").change(function () {
+    if (this.checked) {
+        pre.addClass('line-numbers');
+    } else {
+        pre.removeClass('line-numbers');
+    }
+    localStorage.setItem("lineno", this.checked);
+    makePaste('lineno');
+});
+
 // auto-fit text area
 // Reference: https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize
 const MIN_HEIGHT = 400;
@@ -248,6 +260,15 @@ function makeRandomPasteWithLang(lang) {
     makePaste('random');
 }
 
+
+if (localStorage.getItem("lineno") != null) {
+    const value = localStorage.getItem("lineno")
+    if (value === 'true') {
+        $("#cb3-8").get(0).checked = value;
+        pre.addClass('line-numbers');
+    }
+}
+
 if (localStorage.getItem("language") != null) {
     $('option[value="' + localStorage.getItem("language") + '"]').prop("selected", true);
     const optionSelected = $('#lang').find("option:selected");
@@ -262,6 +283,7 @@ else {
     }, 1000);
 }
 
+
 if (localStorage.getItem("notify") == null) {
     alertify.alert("Notification 🔔", `<div class="notification"><p>We use <a href="https://clarity.microsoft.com/" target="_blank">Microsoft Clarity</a> to provide you with better user experience.</p><br/><p>By continuing, it means you accept this tracker.🖲️</p></div>`);
     localStorage.setItem("notify", true);