Merge pull request #43 from earvinpiamonte/develop

Merge develop to master
earvinpiamonte · Oct 4, 2020 · 04b85fb · 04b85fb
2 parents 75c87c3 + 5a5613f
commit 04b85fb
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 24 deletions.
diff --git a/.gitignore b/.gitignore
diff --git a/app.css b/app.css
@@ -341,6 +341,7 @@ dialog {
   background-color: var(--component-background);
   border-radius: calc(var(--radius) / 2);
   line-height: 1.5;
+  font-size: 0.95rem;
   color: var(--text-color);
 }
 

diff --git a/app.html b/app.html
@@ -171,7 +171,6 @@
     </footer>
     <!-- /.footer -->
 
-    <script src="libs/autosize/autosize.min.js"></script>
     <script type="module" src="app.js"></script>
   </body>
   <!-- /.h-100 w-100 py-2 -->

diff --git a/app.js b/app.js
@@ -5,6 +5,7 @@ import {
   decodeVariable,
   downloadAsTextFile,
   dialog,
+  autoResizeTextarea,
 } from "./helper.js";
 import { chromeGetData, chromeSetData } from "./chrome.js";
 
@@ -32,8 +33,6 @@ function loadEventListeners() {
   const saveTimeout = 500;
   let typingTimer;
 
-  autosize($notes);
-
   $copyToClipboard.addEventListener("click", function () {
     if ($notes.value.length < 1) {
       dialog({
@@ -45,7 +44,8 @@ function loadEventListeners() {
     }
     copyToClipboard($notes, function () {
       dialog({
-        content: "Copied, you're all set to send it anywhere you want!",
+        content:
+          "Copied to clipboard, you're all set to send it anywhere you want.",
         type: "alert",
       });
       console.log("Copied!");
@@ -70,7 +70,7 @@ function loadEventListeners() {
 
     dialog({
       content: `
-          Are you sure you want to use your template for your notes now? This will override your current notes.
+          Are you sure you want to use your Notes template now? This will override your current notes.
       `,
       confirmCallback: () => {
         loadNotesTemplate();
@@ -103,8 +103,7 @@ async function loadNotesTemplate() {
   if (notesTemplate) {
     $notes.value = decodeVariable(notesTemplate);
 
-    autosize.update($notes);
-
+    autoResizeTextarea($notes);
     saveNotes();
 
     console.log("I won't feel a thing");
@@ -188,7 +187,7 @@ async function restoreSettings() {
       $notes.value = notesTemplate;
       $notesCurrentChars.innerHTML = maxNotesChars - $notes.value.length;
 
-      autosize.update($notes);
+      autoResizeTextarea($notes);
       saveNotes(); // Save currently loaded template as notes
       return;
     }
@@ -197,7 +196,7 @@ async function restoreSettings() {
     $notes.value = notes;
     $notesCurrentChars.innerHTML = maxNotesChars - $notes.value.length;
 
-    autosize.update($notes);
+    autoResizeTextarea($notes);
     return;
   }
 
@@ -207,5 +206,5 @@ async function restoreSettings() {
   $notes.value = notes;
   $notesCurrentChars.innerHTML = maxNotesChars - $notes.value.length;
 
-  autosize.update($notes);
+  autoResizeTextarea($notes);
 }
diff --git a/helper.js b/helper.js
@@ -188,6 +188,20 @@ const showElement = ($element) => {
   $element.style.display = "";
 };
 
+const resizeTextareaHandler = (e) => {
+  const $this = e.target ?? e;
+
+  $this.style.height = `auto`;
+  $this.style.height = `${$this.scrollHeight}px`;
+  $this.style.resize = `none`;
+};
+
+const autoResizeTextarea = ($textarea) => {
+  resizeTextareaHandler($textarea);
+
+  $textarea.addEventListener("input", resizeTextareaHandler, false);
+};
+
 export {
   copyToClipboard,
   getCurrentFullDate,
@@ -198,4 +212,5 @@ export {
   decodeVariable,
   downloadAsTextFile,
   dialog,
+  autoResizeTextarea,
 };
diff --git a/libs/autosize/autosize.min.js b/libs/autosize/autosize.min.js
diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "daylight",
-  "version": "0.1.0",
+  "version": "0.4.0",
   "manifest_version": 2,
   "description": "Write down notes directly on the new tab page of your Google Chrome browser.",
   "author": "Noel Earvin Piamonte",

diff --git a/settings.html b/settings.html
@@ -59,7 +59,7 @@ <h1 class="mb-1">Settings</h1>
               </div>
               <!-- /.mb-1 -->
               <div class="textarea-with-toolbar pt-0">
-                <label for="app-notes-template">Template</label>
+                <label for="app-notes-template">Notes template</label>
                 <textarea
                   name="app-notes-template"
                   id="app-notes-template"
@@ -110,7 +110,6 @@ <h1 class="mb-1">Settings</h1>
     </footer>
     <!-- /.footer -->
 
-    <script src="libs/autosize/autosize.min.js"></script>
     <script type="module" src="settings.js"></script>
   </body>
   <!-- /.h-100 w-100 py-2 -->

diff --git a/settings.js b/settings.js
@@ -1,4 +1,4 @@
-import { goBack, dialog } from "./helper.js";
+import { goBack, dialog, autoResizeTextarea } from "./helper.js";
 import { chromeGetData, chromeSetData } from "./chrome.js";
 
 const maxNotesChars = 999;
@@ -19,7 +19,7 @@ function loadEventListeners() {
   const $darkModeToggle = document.querySelector("#app-dark-mode");
   const $html = document.querySelector("html");
 
-  autosize($notesTemplate);
+  autoResizeTextarea($notesTemplate);
 
   $submitSettingsBtn.addEventListener("click", submitSettings);
 
@@ -48,7 +48,7 @@ async function submitSettings() {
   chromeSetData("enableDarkMode", $darkModeToggle.checked);
 
   dialog({
-    content: "Settings successfully saved.",
+    content: "Your settings have been saved.",
     type: "alert",
     confirmCallback: () => {
       goBack();
@@ -75,7 +75,7 @@ async function restoreSettings() {
 
   $notesCurrentChars.innerHTML = maxNotesChars - $notesTemplate.value.length;
 
-  autosize.update($notesTemplate);
+  autoResizeTextarea($notesTemplate);
 
   // If dark mode is enabled
   $html.dataset.theme = enableDarkMode ? "dark" : "light";