fix: linting errors (2)

Author: bajrangCoder

src/ace/commands.js

@@ -287,7 +287,7 @@ const commands = [
 		exec(editor) {
 			const size = Number.parseInt(editor.getFontSize(), 10) || 12;
 			editor.setFontSize(size + 1);
-			settings.value.fontSize = size + 1 + "px";
+			settings.value.fontSize = `${size + 1}px`;
 			settings.update(false);
 		},
 	},
@@ -297,7 +297,7 @@ const commands = [
 		exec(editor) {
 			const size = Number.parseInt(editor.getFontSize(), 10) || 12;
 			editor.setFontSize(Math.max(size - 1 || 1));
-			settings.value.fontSize = Math.max(size - 1 || 1) + "px";
+			settings.value.fontSize = `${Math.max(size - 1 || 1)}px`;
 			settings.update(false);
 		},
 	},
@@ -344,9 +344,9 @@ const commands = [
 ];
 
 export function setCommands(editor) {
-	commands.forEach((command) => {
+	for (const command of commands) {
 		editor.commands.addCommand(command);
-	});
+	}
 }
 
 /**
@@ -368,7 +368,7 @@ export async function setKeyBindings({ commands }) {
 		await resetKeyBindings();
 	}
 
-	Object.keys(commands.byName).forEach((name) => {
+	for (const name of Object.keys(commands.byName)) {
 		const shortcut = keyboardShortcuts[name];
 		const command = commands.byName[name];
 
@@ -379,7 +379,7 @@ export async function setKeyBindings({ commands }) {
 		// not chekiang if shortcut is empty because it can be used to remove shortcut
 		command.bindKey = { win: shortcut?.key ?? null };
 		commands.addCommand(command);
-	});
+	}
 }
 
 /**

src/ace/supportedModes.js

@@ -211,9 +211,9 @@ const languageNames = {
 	AutoHotKey: "AutoHotkey/AutoIt",
 };
 
-Object.keys(modeList).forEach((key) => {
+for (const key of Object.keys(modeList)) {
 	const extensions = modeList[key];
 	const caption = languageNames[key];
 
 	addMode(key, extensions, caption);
-});
+}

src/components/WebComponents/wcPage.js

@@ -34,23 +34,23 @@ export default class WCPage extends HTMLElement {
 				this.onwilldisconnect();
 			}
 
-			this.#on.willdisconnect.forEach((cb) => cb.call(this));
+			for (const cb of this.#on.willdisconnect) cb.call(this);
 		};
 
 		this.handler.onRestore = () => {
 			if (typeof this.onwillconnect === "function") {
 				this.onwillconnect();
 			}
 
-			this.#on.willconnect.forEach((cb) => cb.call(this));
+			for (const cb of this.#on.willconnect) cb.call(this);
 		};
 
 		this.#leadBtn = (
 			<span
 				className="icon arrow_back"
 				onclick={() => this.hide.call(this)}
 				attr-action="go-back"
-			></span>
+			/>
 		);
 
 		this.#header = tile({
@@ -81,12 +81,12 @@ export default class WCPage extends HTMLElement {
 	connectedCallback() {
 		this.classList.remove("hide");
 		if (typeof this.onconnect === "function") this.onconnect();
-		this.#on.show.forEach((cb) => cb.call(this));
+		for (const cb of this.#on.show) cb.call(this);
 	}
 
 	disconnectedCallback() {
 		if (typeof this.ondisconnect === "function") this.ondisconnect();
-		this.#on.hide.forEach((cb) => cb.call(this));
+		for (const cb of this.#on.hide) cb.call(this);
 	}
 
 	/**
@@ -187,7 +187,7 @@ export default class WCPage extends HTMLElement {
 	#addHeaderOrAssignHeader() {
 		if (!this.classList.contains("primary")) {
 			this.#append(this.#header);
-			this.#append(<div className="main"></div>);
+			this.#append(<div className="main" />);
 		} else {
 			this.#header = this.get("header");
 			if (this.#header) {
@@ -213,7 +213,7 @@ class PageHandler {
 		this.onhide = this.onhide.bind(this);
 		this.onshow = this.onshow.bind(this);
 
-		this.$replacement = <span className="page-replacement"></span>;
+		this.$replacement = <span className="page-replacement" />;
 		this.$replacement.handler = this;
 
 		this.$el.on("hide", this.onhide);

src/components/audioPlayer/index.js

@@ -25,19 +25,17 @@ export default class AudioPlayer {
 		const audioPlayer = (
 			<div className="audio-player">
 				<button
+					type="button"
 					ref={this.elements.playBtn}
 					className="play-btn"
 					ariaLabel="Play/Pause"
 				>
-					<span ref={this.elements.playIcon} className="icon play_arrow"></span>
+					<span ref={this.elements.playIcon} className="icon play_arrow" />
 				</button>
 
 				<div ref={this.elements.timeline} className="timeline">
-					<div ref={this.elements.progress} className="progress"></div>
-					<div
-						ref={this.elements.progressHandle}
-						className="progress-handle"
-					></div>
+					<div ref={this.elements.progress} className="progress" />
+					<div ref={this.elements.progressHandle} className="progress-handle" />
 				</div>
 
 				<div ref={this.elements.timeDisplay} className="time">
@@ -46,10 +44,11 @@ export default class AudioPlayer {
 
 				<div className="volume-control">
 					<button
+						type="button"
 						ref={this.elements.volumeBtn}
 						className="volume-btn"
 						ariaLabel="Volume"
-					></button>
+					/>
 				</div>
 			</div>
 		);

src/components/checkbox/index.js

@@ -40,7 +40,7 @@ function Checkbox(text, checked, name, id, type, ref, size) {
 				name={name}
 				id={id}
 			/>
-			<span style={{ height: size, width: size }} className="box"></span>
+			<span style={{ height: size, width: size }} className="box" />
 			<span>{text}</span>
 		</label>
 	);

src/components/contextmenu/index.js

@@ -67,9 +67,9 @@ export default function Contextmenu(content, options) {
 	});
 
 	if (Array.isArray(options.items)) {
-		options.items.forEach(([text, action]) => {
+		for (const [text, action] of options.items) {
 			$el.append(<li data-action={action}>{text}</li>);
-		});
+		}
 	}
 
 	if (!options.innerHTML) addTabindex();
@@ -90,17 +90,17 @@ export default function Contextmenu(content, options) {
 		if (options.toggler) {
 			const client = options.toggler.getBoundingClientRect();
 			if (!options.top && !options.bottom) {
-				$el.style.top = client.top + "px";
+				$el.style.top = `${client.top}px`;
 			}
 			if (!options.left && !options.right) {
-				$el.style.right = innerWidth - client.right + "px";
+				$el.style.right = `${innerWidth - client.right}px`;
 			}
 		}
 
 		app.append($el, $mask);
 
 		const $firstChild = $el.firstChild;
-		if ($firstChild && $firstChild.focus) $firstChild.focus();
+		if ($firstChild?.focus) $firstChild.focus();
 	}
 
 	function hide() {

src/components/inputhints/index.js

@@ -140,12 +140,12 @@ export default function inputhints($input, hints, onSelect) {
 		const { value: toTest } = this;
 		const matched = [];
 		const regexp = new RegExp(toTest, "i");
-		hints.forEach((hint) => {
+		for (const hint of hints) {
 			const { value, text } = hint;
 			if (regexp.test(value) || regexp.test(text)) {
 				matched.push(hint);
 			}
-		});
+		}
 		updateUl(matched);
 	}
 
@@ -360,7 +360,7 @@ function Hint({ hint }) {
 		text = hint.text;
 	}
 
-	return <li attr-action="hint" attr-value={value} innerHTML={text}></li>;
+	return <li attr-action="hint" attr-value={value} innerHTML={text} />;
 }
 
 /**

src/components/quickTools/footer.js

@@ -65,14 +65,11 @@ export const SearchRow2 = ({ inputRef, posRef, totalRef }) => (
 );
 
 /**@type {HTMLElement} */
-export const $footer = <footer id="quick-tools" tabIndex={-1}></footer>;
+export const $footer = <footer id="quick-tools" tabIndex={-1} />;
 
 /**@type {HTMLElement} */
 export const $toggler = (
-	<span
-		className="floating icon keyboard_arrow_up"
-		id="quicktools-toggler"
-	></span>
+	<span className="floating icon keyboard_arrow_up" id="quicktools-toggler" />
 );
 
 /**@type {HTMLTextAreaElement} */
@@ -89,7 +86,7 @@ export const $input = (
 			top: 0,
 			left: 0,
 		}}
-	></textarea>
+	/>
 );
 
 /**
@@ -107,13 +104,14 @@ export const $input = (
 export function RowItem({ id, icon, letters, action, value, ref, repeat }) {
 	const $item = (
 		<button
+			type="button"
 			ref={ref}
 			className={`icon ${icon}`}
 			data-id={id}
 			data-letters={letters}
 			data-action={action}
 			data-repeat={repeat}
-		></button>
+		/>
 	);
 
 	if (typeof value === "function") {
@@ -132,16 +130,16 @@ export function RowItem({ id, icon, letters, action, value, ref, repeat }) {
  * @returns {Array<Element>}
  */
 function Extras({ extras }) {
-	const div = <div className="section"></div>;
+	const div = <div className="section" />;
 	if (Array.isArray(extras)) {
-		extras.forEach((i) => {
+		for (const i of extras) {
 			if (i instanceof HTMLElement) {
 				div.appendChild(i);
 				return;
 			}
 
 			div.append(<RowItem {...i} />);
-		});
+		}
 	}
 	return div;
 }

src/components/scrollbar/index.js

@@ -89,8 +89,8 @@ export default function ScrollBar(options) {
 	}
 
 	function setWidth(width) {
-		if (isVertical) $scrollbar.style.width = $cursor.style.width = width + "px";
-		else $scrollbar.style.height = $cursor.style.height = width + "px";
+		if (isVertical) $scrollbar.style.width = $cursor.style.width = `${width}px`;
+		else $scrollbar.style.height = $cursor.style.height = `${width}px`;
 	}
 
 	/**
@@ -132,7 +132,7 @@ export default function ScrollBar(options) {
 			else if (top > height) top = height;
 
 			if (currentTopValue !== top) {
-				$cursor.style.top = top + "px";
+				$cursor.style.top = `${top}px`;
 				scroll = top / height;
 				if (typeof $scrollbar.onScroll === "function")
 					$scrollbar.onScroll(scroll);
@@ -145,7 +145,7 @@ export default function ScrollBar(options) {
 			else if (left > width) left = width;
 
 			if (currentLeftValue !== left) {
-				$cursor.style.left = left + "px";
+				$cursor.style.left = `${left}px`;
 				scroll = left / width;
 				if (typeof $scrollbar.onScroll === "function")
 					$scrollbar.onScroll(scroll);
@@ -180,16 +180,15 @@ export default function ScrollBar(options) {
 		if (render && height && width) setValue(scroll);
 	}
 
-	function setValue(val) {
+	function setValue(value) {
 		if (!height || !width) resize(false);
 
 		//Make sure value is between 0 and 1
-		if (val < 0) val = 0;
-		else if (val > 1) val = 1;
+		const boundedValue = Math.max(0, Math.min(1, value));
 
-		scroll = val;
-		if (isVertical) $cursor.style.top = val * height + "px";
-		else $cursor.style.left = val * width + "px";
+		scroll = boundedValue;
+		if (isVertical) $cursor.style.top = `${boundedValue * height}px`;
+		else $cursor.style.left = `${boundedValue * width}px`;
 	}
 
 	function destroy() {

src/components/searchbar/index.js

@@ -22,7 +22,7 @@ function searchBar($list, setHide, onhideCb, searchFunction) {
 				placeholder={strings.search}
 				enterKeyHint="go"
 			/>
-			<span className="icon clearclose" onclick={hide}></span>
+			<span className="icon clearclose" onclick={hide} />
 		</div>
 	);