implemented optimal line length feature.

amitmerchant1990 · Jul 24, 2024 · fb805fe · fb805fe
1 parent 377d304
commit fb805fe
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
 }