Added addLine() function to Custom Sidebar Button script (#6)

Co-authored-by: Antti Ellilä <[email protected]>

custom-sidebar-button/BlueMapCustomSidebarButton.js

@@ -1,7 +1,8 @@
-const buttons = [];
+const elements = [];
 // <-- Do not edit before here ---
 
 
+addLine();
 createButton("https://bluemap.bluecolored.de/", "Visit BlueMap Website");
 createButton("https://www.youtube.com/watch?v=dQw4w9WgXcQ", "Mischievous Button", true);
 
@@ -18,7 +19,11 @@ function createButton(link, text, newTab = false) {
 	</a>
 	`.trim();
 	const button = buttonTemplate.content.firstChild;
-	buttons.push(button);
+	elements.push(button);
+}
+
+function addLine() {
+	elements.push(document.createElement("hr"));
 }
 
 // Periodically check if the sidebar is open
@@ -28,6 +33,6 @@ setInterval(() => {
 
 	// Check if the buttons are already in the sidebar
 	if (Array.from(buttonList.children).every(el => el.tagName === "HR" || el.className === "simple-button")) {
-		buttonList.append(...buttons);
+		buttonList.append(...elements);
 	}
 }, 10);

custom-sidebar-button/README.md

@@ -13,12 +13,15 @@ Download or copy the [BlueMapCustomSidebarButton.js](BlueMapCustomSidebarButton.
 ### Options
 You can customise the text of the button by changing the function parameters:
 ```js
+addLine();
 createButton("https://bluemap.bluecolored.de/", "Visit BlueMap Website");
 createButton("https://www.youtube.com/watch?v=dQw4w9WgXcQ", "Mischievous Button", true);
 ```
 
-The first parameter is the URL the button will open when clicked,
+The first parameter of the function `createButton()` is the URL the button will open when clicked,
 the second is the text displayed on the button,
 and the third is an optional boolean to make it open the link in a new tab.
 
-You can have as many buttons as you want, just call the function multiple times.
+You can have as many buttons as you want, just call the function `createButton()` multiple times.
+
+You can place a line in-between the buttons by calling the function `addLine()`.