Add setting button

Implemented setting button to enable the following functions: 1. Set editor theme 2. Adjust editor font size 3. Modify output font size 4. Define editor key bindings Also chagne the backgroud color of help dropdown menu.
Wang-Yan-Hao · Mar 11, 2024 · abfed2c · abfed2c
1 parent dad6b42
commit abfed2c
Show file tree

Hide file tree

Showing 6 changed files with 244 additions and 5 deletions.
diff --git a/public/index.html b/public/index.html
@@ -14,6 +14,7 @@
 		/>
 		<link rel="stylesheet" href="styles/index.css" />
 		<link rel="stylesheet" href="styles/dropdown_menu.css" />
+		<link rel="stylesheet" href="styles/setting.css" />
 		<link
 			rel="stylesheet"
 			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
@@ -37,6 +38,85 @@ <h1 id="header">FreeBSD Online Document Editor</h1>
 				<i class="fa-solid fa-download"></i>
 			</a>
 
+			<a title="Setting" id="setting">
+				<i class="fa-solid fa-gear"></i>
+			</a>
+			<div id="setting-modal" class="modal">
+				<div class="modal-content">
+					<div id="modal-setting-header">
+						<p>Setting</p>
+						<!-- Close button -->
+						<span class="close" id="close-setting">&times;</span>
+					</div>
+
+					<div class="modal-one-content">
+						<p>Editor Theme:</p>
+						<select id="theme-select">
+							<option value="dreamweaver">Dreamweaver</option>
+							<option value="chaos">Chaos</option>
+							<option value="clouds">Clouds</option>
+							<option value="cobalt">Cobalt</option>
+							<option value="dawn">Dawn</option>
+							<option value="eclipse">Eclipse</option>
+							<option value="github">Github</option>
+							<option value="gob">Gob</option>
+							<option value="gruvbox">Gruvbox</option>
+							<option value="kuroir">Kuroir</option>
+							<option value="merbivore">Merbivore</option>
+							<option value="monokai">Monokai</option>
+							<option value="one_dark">OneDark</option>
+							<option value="twilight">Twilight</option>
+						</select>
+					</div>
+
+					<div class="modal-one-content">
+						<p>Editor Font Size:</p>
+						<select id="editor-font-size-select">
+							<option value="7px">7 px</option>
+							<option value="9px">9 px</option>
+							<option value="11px">11 px</option>
+							<option value="13px">13 px</option>
+							<option value="15px" selected>15 px</option>
+							<option value="17px">17px</option>
+							<option value="19px">19px</option>
+							<option value="21px">21px</option>
+							<option value="23px">23px</option>
+							<option value="25px">25px</option>
+							<option value="27px">27px</option>
+							<option value="29px">29px</option>
+						</select>
+					</div>
+
+					<div class="modal-one-content">
+						<p>Output Font Size:</p>
+						<select id="output-font-size-select">
+							<option value="50%">50%</option>
+							<option value="60%">60%</option>
+							<option value="70%">70%</option>
+							<option value="80%">80%</option>
+							<option value="90%">90%</option>
+							<option value="100%" selected>100%</option>
+							<option value="110%">110%</option>
+							<option value="120%">120%</option>
+							<option value="130%">130%</option>
+							<option value="140%">140%</option>
+							<option value="150%">150%</option>
+						</select>
+					</div>
+
+					<div class="modal-one-content">
+						<p>Editor Key binding:</p>
+						<select id="editor-input-select">
+							<option value="textinput">Test input</option>
+							<option value="emacs">Emacs</option>
+							<option value="vscode">Vscode</option>
+							<option value="sublime">Sublime</option>
+							<option value="vim">Vim</option>
+						</select>
+					</div>
+				</div>
+			</div>
+
 			<div class="dropdown" id="help-dropdown">
 				<a class="dropbtn" title="Help">
 					<i class="fa-regular fa-circle-question"></i>

diff --git a/public/styles/dropdown_menu.css b/public/styles/dropdown_menu.css
@@ -18,6 +18,10 @@
 	right: 0px;
 }
 
+.dropdown-content {
+	background-color: white;
+}
+
 /* Links inside the dropdown */
 .dropdown-content > a {
 	display: block;

diff --git a/public/styles/setting.css b/public/styles/setting.css
@@ -0,0 +1,65 @@
+.modal {
+	display: none; /* Hidden by default */
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 100;
+	background-color: rgba(0, 0, 0, 0.4);
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+}
+
+/* Modal Content/Box */
+.modal-content {
+	position: relative;
+	margin: 10% auto;
+	border: 1px solid #888;
+	border-radius: 5px;
+	background-color: #fefefe;
+	width: 50%;
+}
+
+#modal-setting-header {
+	margin-bottom: 20px;
+	background-color: rgb(241, 241, 241);
+	padding: 16px 20px;
+}
+
+#modal-setting-header > p {
+	font-weight: 600;
+	font-size: 30px;
+	font-family: 'Roboto', sans-serif;
+}
+
+.close {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	cursor: pointer;
+	padding: 8px;
+	font-size: 25px;
+}
+
+.modal-one-content {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 11px 28px;
+}
+
+.modal-one-content > p,
+.modal-one-content > select {
+	margin-left: 10px;
+	font-weight: 400;
+	font-size: 17px;
+	font-family: 'Roboto', sans-serif;
+}
+
+.modal-one-content:first-child {
+	background-color: red;
+}
+
+.modal-one-content:last-child {
+	margin-bottom: 30px;
+}
diff --git a/src/index.js b/src/index.js
@@ -2,6 +2,14 @@ import { patchDownload, storeContent } from './scripts/download.js'
 import { startDrag, drag, stopDrag } from './scripts/middle_line.js'
 import { generateHtml } from './scripts/editor.js'
 import { helpToggleDropdown } from './scripts/dropdown_menu.js'
+import {
+	openSettingModal,
+	closeSetting,
+	themeSelect,
+	editorFontSizeSelect,
+	outputFontSizeSelect,
+	editorInputSelect,
+} from './scripts/setting.js'
 
 // Add attribute to html
 const dragLine = document.getElementById('dragLine')
@@ -18,14 +26,36 @@ storeContentTag.addEventListener('click', storeContent)
 const patchDownloadTag = document.getElementById('download-patch')
 patchDownloadTag.addEventListener('click', patchDownload)
 
+const settingTag = document.getElementById('setting')
+settingTag.addEventListener('click', openSettingModal)
+
+const cloaseSettingTag = document.getElementById('close-setting')
+cloaseSettingTag.addEventListener('click', closeSetting)
+
+const themeSelectTag = document.getElementById('theme-select')
+themeSelectTag.addEventListener('change', themeSelect)
+
+const editorFontSizeSelectTag = document.getElementById(
+	'editor-font-size-select'
+)
+editorFontSizeSelectTag.addEventListener('change', editorFontSizeSelect)
+
+const outputFontSizeSelectTag = document.getElementById(
+	'output-font-size-select'
+)
+outputFontSizeSelectTag.addEventListener('change', outputFontSizeSelect)
+
+const editorInputSelectTag = document.getElementById('editor-input-select')
+editorInputSelectTag.addEventListener('change', editorInputSelect)
+
+const helpDropdownTag = document.getElementById('help-dropdown')
+helpDropdownTag.addEventListener('click', helpToggleDropdown)
+
 const freebsdBugzillaTag = document.getElementById('freebsd-bugzilla')
 freebsdBugzillaTag.addEventListener('click', function () {
 	window.open('https://bugs.freebsd.org/bugzilla/', '_blank')
 })
 
-const helpDropdown = document.getElementById('help-dropdown')
-helpDropdown.addEventListener('click', helpToggleDropdown)
-
 // Display confirmation message when closing the page
 window.addEventListener('beforeunload', function (e) {
 	const confirmationMessage =

diff --git a/src/scripts/editor.js b/src/scripts/editor.js
@@ -224,6 +224,10 @@ export function generateHtml() {
 
 		outputSession.contentDocument.head.appendChild(link)
 	})
+
+	const styleElement = document.createElement('style')
+	styleElement.textContent = window.outputFontSize || ''
+	outputSession.contentDocument.head.appendChild(styleElement)
 }
 
 // Change file button function
@@ -243,12 +247,11 @@ function popup3(e) {
 changeFileButton.addEventListener('click', popup3)
 
 let typingTimer // Timer identifier
-const typingInterval = 500 // Time in milliseconds (1 second)
+const typingInterval = 500 // Time in milliseconds
 
 editor.getSession().on('change', function () {
 	clearTimeout(typingTimer)
 	typingTimer = setTimeout(() => {
-		// Trigger your function here
 		generateHtml()
 	}, typingInterval)
 })
diff --git a/src/scripts/setting.js b/src/scripts/setting.js
@@ -0,0 +1,57 @@
+import { generateHtml } from './editor.js'
+const modal = document.getElementById('setting-modal')
+const editor = ace.edit('editor') /* global ace */
+
+export function openSettingModal(event) {
+	event.preventDefault()
+
+	modal.style.display = 'block'
+
+	// Close the modal when clicking outside of it
+	window.onclick = function (event) {
+		if (event.target === modal) {
+			modal.style.display = 'none'
+		}
+	}
+}
+
+export function closeSetting() {
+	modal.style.display = 'none'
+}
+
+export function themeSelect(event) {
+	const themeSelect = document.getElementById('theme-select')
+	const selectedValue = themeSelect.value
+
+	editor.setTheme('ace/theme/' + selectedValue)
+}
+
+export function editorFontSizeSelect(event) {
+	const themeSelect = document.getElementById('editor-font-size-select')
+	const selectedValue = themeSelect.value
+
+	editor.setOptions({ fontSize: selectedValue })
+}
+
+export function outputFontSizeSelect(event) {
+	const themeSelect = document.getElementById('output-font-size-select')
+	const selectedValue = themeSelect.value
+
+	window.outputFontSize = 'html {font-size: calc(' + selectedValue + ');}'
+
+	generateHtml()
+}
+
+export function fontSizeSelect(event) {
+	const themeSelect = document.getElementById('editor-font-size-select')
+	const selectedValue = themeSelect.value
+
+	editor.setOptions({ fontSize: selectedValue })
+}
+
+export function editorInputSelect(event) {
+	const themeSelect = document.getElementById('editor-input-select')
+	const selectedEditorInput = themeSelect.value
+
+	editor.setKeyboardHandler('ace/keyboard/' + selectedEditorInput)
+}