From fb805febc77f3186526d13de7f5bb63555cc2581 Mon Sep 17 00:00:00 2001
From: Amit Merchant <bullredeyes@gmail.com>
Date: Wed, 24 Jul 2024 12:35:52 +0530
Subject: [PATCH] implemented optimal line length feature.

---
 index.html     | 12 +++++++++++-
 js/app.js      | 38 +++++++++++++++++++++++++++++++++++++-
 js/selector.js |  2 ++
 js/utils.js    |  6 ++++++
 4 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index f2d15a3..1ecf9e2 100644
--- a/index.html
+++ b/index.html
@@ -299,7 +299,17 @@ <h4 class="modal-title custom-modal-title">Preferences</h4>
           </div>
 
           <div class="form-group">
-            <label class="control-label col-sm-6 col-md-6" for="writeDirection">Direction</label>
+            <label class="control-label col-sm-6 col-md-6" for="optimalLineLength">Optimal line length</label>
+            <div class="col-sm-6 col-md-4">
+              <select name="optimalLineLength" id="optimalLineLength" class="form-control">
+                <option value="No">No</option>
+                <option value="Yes">Yes</option>
+              </select> 
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label class="control-label col-sm-6 col-md-6" for="writeDirection">Writing direction</label>
             <div class="col-sm-6 col-md-4">
               <select name="writeDirection" id="writeDirection" class="form-control">
                 <option value="ltr">Left to right</option>
diff --git a/js/app.js b/js/app.js
index b9ba17f..4c0884e 100644
--- a/js/app.js
+++ b/js/app.js
@@ -23,13 +23,16 @@ it's recommended that you take a backup of your notes more often using the
 	const lightMetaColor = '#4d4d4d';
 	const metaThemeColor = document.querySelector('meta[name=theme-color]');
 	const { notepad, state, setState, removeState, get } = selector();
+	const optimalLineLengthPadding = '15px 15vw 40px';
 
 	const editorConfig = {
 		defaultFontSize: 18,
 		defaultLineHeight: 26,
 		defaultFontWeight: 'normal',
 		defaultShowWordCountPill: 'Yes',
-		defaultWriteDirection: 'ltr'
+		defaultWriteDirection: 'ltr',
+		defaultOptimalLineLength: 'No',
+		defaultOptimalLineLengthPadding: '15px 15px 40px'
 	};
 
 	const themeConfig = {
@@ -87,6 +90,20 @@ it's recommended that you take a backup of your notes more often using the
 		resetWriteDirection(editorConfig.defaultWriteDirection);
 	}
 
+	if (state.userChosenOptimalLineLengthSelected) {
+		const textArea = document.getElementById('note');
+
+		if (state.userChosenOptimalLineLengthSelected === 'Yes') {
+			textArea.style.padding = optimalLineLengthPadding;
+		} else {
+			textArea.style.padding = editorConfig.defaultOptimalLineLengthPadding;
+		}
+
+		notepad.optimalLineLength.val(state.userChosenOptimalLineLengthSelected);
+	} else {
+		resetOptimalLineLength(editorConfig.defaultOptimalLineLengthPadding, editorConfig.defaultOptimalLineLength);
+	}
+
 	if (state.mode && state.mode === 'dark') {
 		enableDarkMode(lightmodeText, darkMetaColor, metaThemeColor);
 	} else {
@@ -165,6 +182,20 @@ it's recommended that you take a backup of your notes more often using the
 		setState('userChosenWordCountPillSelected', showWordCountPillSelected);
 	});
 
+	notepad.optimalLineLength.on('change', function (e) {
+		const optimalLineLengthSelected = this.value;
+
+		const textArea = document.getElementById('note');
+
+		if (optimalLineLengthSelected === 'Yes') {
+			textArea.style.padding = optimalLineLengthPadding;
+		} else {
+			textArea.style.padding = editorConfig.defaultOptimalLineLengthPadding;
+		}
+
+		setState('userChosenOptimalLineLengthSelected', optimalLineLengthSelected);
+	})
+
 	notepad.resetPreferences.click(function () {
 		if (selector().state.userChosenFontSize) {	
 			removeState('userChosenFontSize');
@@ -190,6 +221,11 @@ it's recommended that you take a backup of your notes more often using the
 			removeState('userChosenWriteDirection');
 			resetWriteDirection(editorConfig.defaultWriteDirection);
 		}
+
+		if (selector().state.userChosenOptimalLineLengthSelected) {
+			removeState('userChosenOptimalLineLengthSelected');
+			resetOptimalLineLength(editorConfig.defaultOptimalLineLengthPadding, editorConfig.defaultOptimalLineLength);
+		}
 	});
 
 	// This changes the application's theme when 
diff --git a/js/selector.js b/js/selector.js
index 8158e5a..7523136 100644
--- a/js/selector.js
+++ b/js/selector.js
@@ -46,6 +46,7 @@ function selector() {
             wordCountContainer: selectByClassName('word-count-container'),
             keyboardShortcutsModal: selectById('keyboardShortcutsModal'),
             fullScreenButton: selectById('fullScreenButton'),
+            optimalLineLength: selectById('optimalLineLength'),
         },
         state: {
             note: getState('note'),
@@ -57,6 +58,7 @@ function selector() {
             hasUserDismissedDonationPopup: getState('hasUserDismissedDonationPopup'),
             userChosenWordCountPillSelected: getState('userChosenWordCountPillSelected'),
             userChosenWriteDirection: getState('userChosenWriteDirection'),
+            userChosenOptimalLineLengthSelected: getState('userChosenOptimalLineLengthSelected')
         },
         get,
         getState,
diff --git a/js/utils.js b/js/utils.js
index 8a0d22f..1804c51 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -111,6 +111,12 @@ function resetWriteDirection(defaultWriteDirection) {
     $('#writeDirection').val(defaultWriteDirection);
 }
 
+function resetOptimalLineLength(defaultEditorPadding, defaultOption) {
+    const textArea = document.getElementById('note');
+    textArea.style.padding = defaultEditorPadding;
+    $('#optimalLineLength').val(defaultOption);
+}
+
 function countWords(str) {
     return str.trim().split(/\s+/).length;
 }