Change the UI for new line options from a button group to a dropdown

Author: mozq

src/main/java/com/dencode/web/servlet/pages/DencodeServlet.java

@@ -46,7 +46,7 @@ private static class DencodeRequest {
 
 
 	private static final Charset DEFAULT_CHARSET = StandardCharsets.UTF_8;
-	private static final String DEFAULT_LINE_BREAK = "\r\n";
+	private static final String DEFAULT_LINE_BREAK = "\n";
 	private static final ZoneId DEFAULT_ZONE_ID = ZoneId.of("UTC");
 
 

src/main/java/com/dencode/web/servlet/pages/IndexServlet.java

@@ -110,7 +110,7 @@ protected void doGet() throws Exception {
 		String v = reqres().param("v", "");
 		String oe = "UTF-8";
 		String oex = message("oe.ext.default");
-		String nl = "crlf";
+		String nl = "lf";
 		String tz = "UTC";
 
 		String type = reqres().attribute("type");

src/main/resources/messages_en.properties

@@ -792,6 +792,7 @@ label.val.length.chars=chars
 label.val.length.byte=byte
 label.val.length.bytes=bytes
 
+label.newline=Newline
 label.timeZone=TimeZone
 
 label.encoded=Encoded

src/main/resources/messages_ja.properties

@@ -792,6 +792,7 @@ label.val.length.chars=文字
 label.val.length.byte=バイト
 label.val.length.bytes=バイト
 
+label.newline=改行
 label.timeZone=タイムゾーン
 
 label.encoded=エンコード結果

src/main/resources/messages_ru.properties

@@ -792,6 +792,7 @@ label.val.length.chars=персонажа
 label.val.length.byte=байт
 label.val.length.bytes=байтов
 
+label.newline=Разрыв линии
 label.timeZone=Часовой пояс
 
 label.encoded=Закодировано

src/main/webapp/WEB-INF/pages/index.jsp

@@ -316,9 +316,15 @@
 					</ul>
 				</div>
 				<div id="nlGroup" class="btn-group btn-group-sm" data-default-value="${dc:h(nl)}" style="display: none;">
-					<button class="btn" data-nl="crlf">CRLF (Win)</button>
-					<button class="btn" data-nl="lf">LF (UNIX/Mac)</button>
-					<button class="btn" data-nl="cr">CR (Old Mac)</button>
+					<button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-label="${dc:h(msg['label.newline'])}" aria-expanded="false">
+						<span id="nl" data-nl=""></span>
+						<span class="caret"></span>
+					</button>
+					<div id="nlMenu" class="dropdown-menu" role="menu">
+						<span class="dropdown-item" data-nl="lf" tabindex="0">LF (\n)</span>
+						<span class="dropdown-item" data-nl="crlf" tabindex="0">CRLF (\r\n)</span>
+						<span class="dropdown-item" data-nl="cr" tabindex="0">CR (\r)</span>
+					</div>
 				</div>
 				<div id="tzGroup" class="btn-group btn-group-sm" data-default-value="${dc:h(tz)}" style="display: none;">
 					<button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-label="${dc:h(msg['label.timeZone'])}" aria-expanded="false">

src/main/webapp/static/css/main.css

@@ -193,7 +193,7 @@ footer a, footer a:link, footer a:visited, footer a:hover, footer a:active {
 
 .btn-group-sm .btn {
 	--bs-btn-padding-y: 1px;
-	--bs-btn-padding-x: 5px;
+	--bs-btn-padding-x: 1ex;
 	--bs-btn-font-size: 0.8rem;
 }
 .btn-group-sm .dropdown-menu {
@@ -349,7 +349,11 @@ footer a, footer a:link, footer a:visited, footer a:hover, footer a:active {
 }
 
 #expOptions {
-	padding: 1px 0;
+	padding: 2px 0 0;
+}
+
+#expOptions .btn-group:not(:last-child) {
+	margin-right: 1.2ex;
 }
 
 #follow {

src/main/webapp/static/js/main.js

@@ -43,8 +43,9 @@ $.onReady(function () {
 	const elOexBtn = $.id("oex");
 	const elOexMenu = $.id("oexMenu");
 	const elOexMenuItems = $.all("#oexMenu .dropdown-item");
+	const elNl = $.id("nl");
 	const elNlGroup = $.id("nlGroup");
-	const elNlGroupBtns = $.all("#nlGroup .btn");
+	const elNlMenuItems = $.all("#nlMenu [data-nl]");
 	const elTz = $.id("tz");
 	const elTzGroup = $.id("tzGroup");
 	const elTzMenuItems = $.all("#tzMenuItems [data-tz]");
@@ -76,7 +77,7 @@ $.onReady(function () {
 
 		elOexBtn.setAttribute("data-oe", selectItem(elOexMenuItems, elOexMenu, "oe", "oex"));
 		selectItem(elOeGroupBtns, elOeGroup, "oe", "oe");
-		selectItem(elNlGroupBtns, elNlGroup, "nl", "nl");
+		elNl.setAttribute("data-nl", selectItem(elNlMenuItems, elNlGroup, "nl", "nl"));
 		elTz.setAttribute("data-tz", selectItem(elTzMenuItems, elTzGroup, "tz", "tz"));
 
 		elOptions.forEach((el) => {
@@ -212,16 +213,22 @@ $.onReady(function () {
 	}
 
 	if (dencoderDefs[dencodeMethod].useNl) {
+		let elNlMenuItem = elNlMenuItems.find((el) => el.classList.contains("active"));
+		if (!elNlMenuItem) {
+			elNlMenuItem = elNlMenuItems[0];
+		}
+		elNl.textContent = elNlMenuItem.textContent;
+		elNl.setAttribute("data-nl", elNlMenuItem.getAttribute("data-nl"));
+		
 		elNlGroup.style.display = "";
 
-		$.on(elNlGroupBtns, "click", function () {
-			if (this.classList.contains("active")) {
-				return;
-			}
-			
-			elNlGroupBtns.forEach((el) => el.classList.remove("active"));
+		$.on(elNlMenuItems, "click", function () {
+			elNlMenuItems.forEach((el) => el.classList.remove("active"));
 			this.classList.add("active");
 
+			elNl.textContent = this.textContent;
+			elNl.setAttribute("data-nl", this.getAttribute("data-nl"));
+			
 			dencode();
 		});
 	}
@@ -775,7 +782,7 @@ $.onReady(function () {
 		const v = elV.value;
 		const oe = elOeGroupBtns.find((el) => el.classList.contains("active"))?.getAttribute("data-oe");
 		const oex = elOexMenuItems.find((el) => el.classList.contains("active"))?.getAttribute("data-oe");
-		const nl = elNlGroupBtns.find((el) => el.classList.contains("active"))?.getAttribute("data-nl");
+		const nl = elNl.getAttribute("data-nl");
 		const tz = elTz.getAttribute("data-tz");
 		let options = {};
 		elOptions.forEach((el) => {
@@ -955,7 +962,7 @@ $.onReady(function () {
 			url += "&oe=" + encodeURIComponent(oe);
 		}
 		if (dcDef === null || dcDef.useNl) {
-			const nl = elNlGroupBtns.find((el) => el.classList.contains("active"))?.getAttribute("data-nl");
+			const nl = elNl.getAttribute("data-nl");
 			url += "&nl=" + encodeURIComponent(nl);
 		}
 		if (dcDef === null || dcDef.useTz) {