Now allowing 40% keyboards in a separate list

docs/forties.js

@@ -0,0 +1,9 @@
+window.fortiesData = [
+
+];
+window.fortiesTODOs = `
+
+`;
+/* Other TODOs:
+
+*/

docs/index.html

@@ -78,9 +78,13 @@
 			//
 			try {
 				var search = document.location.search;
-				if (/[?&]row\b/.test(search)) {
+				if (/[?&]40s\b/.test(search)) {
+					document.body.classList.add("forties");
+				} else if (/[?&]row\b/.test(search)) {
 					document.body.classList.add("rowstag");
-				} else document.body.classList.add("colstag");
+				} else {
+					document.body.classList.add("colstag");
+				}
 			} catch (_) {}
 		})();
 	</script>
@@ -90,18 +94,26 @@ <h1 style="transform: skewX(-5deg)">YellowAfterlife's ergonomic keyboard list</h
 	</p><p class="if-colstag">
 		It does not contain <i>every single keyboard</i>,
 		but it's a pretty big sample - especially as far medium/big/interesting keyboards go.
-	</p><p class="if-colstag">
-		See <a href="?row">the other list</a> for row-staggered/standard-layout keyboards.
 	</p>
 	<p class="if-rowstag">
 		This is a collection of row-staggered ergonomic keyboards!<br>
 		... and also other keyboards that are shaped liked row-staggered ones.
 	</p><p class="if-rowstag">
 		This one's a mostly-random sample of keyboards - there's not exactly a shortage of places
 		to look for row-staggered keyboards.
-	</p><p class="if-rowstag">
-		See <a href="?">the other list</a> for column-staggered and non-standard-layout keyboards.
 	</p>
+	<p class="if-forties">
+		This is a collection of little keyboards!
+	</p>
+	<p>
+		There are some lists of keyboards now:
+	</p><ul><li>
+		<a href="?">Column-staggered and non-standard-layout keyboards</a> <span class="if-colstag">(you're here)</span>
+	</li><li>
+		<a href="?row">Row-staggered and/or standard-layout keyboards</a> <span class="if-rowstag">(you're here)</span>
+	</li><li>
+		<a href="?40s">40% keyboards</a> <span class="if-forties">(you're here)</span>
+	</li></ul>
 	<details>
 		<summary>"The rules"</summary>
 		<ul>
@@ -287,11 +299,12 @@ <h2>Credits</h2>
 	<script src="lib/popper.min.js"></script>
 	<script src="lib/tippy-bundle.umd.js"></script>
 
-	<script src="keyboards.js?v=2024-06-24"></script>
-	<script src="rowstag.js?v=2024-05-20"></script>
+	<script src="keyboards.js?v=2024-10-18"></script>
+	<script src="rowstag.js?v=2024-10-18"></script>
+	<script src="forties.js?v=2024-10-18"></script>
 	<script src="mcus.csv.js?v=2024-05-20"></script>
-	<script src="origins.js?v=2024-05-20"></script>
-	<script src="script.js?v=2024-06-24"></script>
+	<script src="origins.js?v=2024-10-18"></script>
+	<script src="script.js?v=2024-10-18"></script>
 
 	<!-- Google tag (gtag.js) -->
 	<script async src="https://www.googletagmanager.com/gtag/js?id=G-4R5QPPHC8M"></script>

docs/style.css

@@ -76,10 +76,16 @@ h2 {
 .tag-options[column-count="3"] {
   columns: 3;
 }
+body.rowstag .if-colstag {
+  display: none;
+}
+body.forties .if-colstag {
+  display: none;
+}
 body:not(.rowstag) .if-rowstag {
   display: none;
 }
-body.rowstag .if-colstag {
+body:not(.forties) .if-forties {
   display: none;
 }
 input[invalid] {

src/Main.hx

@@ -25,16 +25,21 @@ class Main {
 
 		var kbTable:KeyboardTable<Keyboard>;
 		var row = document.body.classList.contains("rowstag");
-		if (row) {
-			kbTable = cast new RowStagTable();
+		var forties = document.body.classList.contains("forties");
+		if (row || forties) {
+			kbTable = cast new RowStagTable(forties);
 		} else kbTable = cast new ColStagTable();
 		KeyboardPage.main(kbTable);
 
 		ToDoList.element = document.querySelectorAuto("#todo");
-		ToDoList.set(row
-			? (cast window).rowStagTODOs
-			: (cast window).keyboardTODOs
-		);
+		var dynWindow = cast window;
+		if (forties) {
+			ToDoList.set(dynWindow.fortiesTODOs);
+		} else if (row) {
+			ToDoList.set(dynWindow.rowStagTODOs);
+		} else {
+			ToDoList.set(dynWindow.keyboardTODOs);
+		}
 	}
 
 }

src/RowStagTable.hx

@@ -20,6 +20,11 @@ using tools.HtmlTools;
  * @author YellowAfterlife
  */
 class RowStagTable extends KeyboardTable<RowStagKeyboard> {
+	public var isForties:Bool;
+	public function new(isForties) {
+		this.isForties = isForties;
+		super();
+	}
 	override public function collectFilters():DynamicAccess<String> {
 		var result = super.collectFilters();
 		result["row"] = "";
@@ -237,7 +242,11 @@ class RowStagTable extends KeyboardTable<RowStagKeyboard> {
 		addColumn(mw);
 	}
 	override public function initKeyboards() {
-		var kbs:Array<RowStagKeyboard> = (cast window).rowStagData;
+		var dynWindow = (cast window);
+		var kbs:Array<RowStagKeyboard>;
+		if (isForties) {
+			kbs = dynWindow.fortiesData;
+		} else kbs = dynWindow.rowStagData;
 		for (kb in kbs) {
 			if (kb is String) {
 				document.querySelector("#version").innerText = cast kb;

src/styles/global.less

@@ -87,11 +87,16 @@ h2 {
   columns: 3;
 }
 
+body.rowstag .if-colstag {
+  display: none;
+}
+body.forties .if-colstag {
+  display: none;
+}
 body:not(.rowstag) .if-rowstag {
   display: none;
 }
-
-body.rowstag .if-colstag {
+body:not(.forties) .if-forties {
   display: none;
 }