From 28b713044e86b6de204f3a9f144324c4f5e9d831 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrg=20Hallenbarter?= <jurg.hallenbarter@edu.vs.ch>
Date: Mon, 1 Jun 2026 11:46:50 +0200
Subject: [PATCH] made better click on index

---
 index.html | 161 +++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 118 insertions(+), 43 deletions(-)
diff --git a/index.html b/index.html
index 2ff7a3f..8ec8a06 100644
--- a/index.html
+++ b/index.html
@@ -1,68 +1,143 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>p5.js liberay</title>
+		<meta charset="UTF-8">
+		<title>p5.js library · click any gallery to open full library</title>
+		<style>
+			h1, h2 {
+				text-align: center;
+				font-family: cursive, serif;
+			}
+			body {
+				background-color: beige;
+				margin: 0;
+				padding: 20px;
+			}
+			.liberay {
+				height: 600px;
+				width: 600px;
+			}
+			iframe {
+				height: 100%;
+				width: 100%;
+				border: none;
+				margin: 0;
+				cursor: pointer;
+			}
+			.liberayDiv {
+				width: 470px;
+				margin: 10px;
+				padding: 10px;
+				border: 2px solid rgb(67, 0, 67);
+				border-radius: 10px;
+				box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
+				display: inline-block;
+				vertical-align: top;
+				transition: all 0.2s ease;
+				cursor: pointer;
+			}
+			.liberayDiv:hover {
+				background-color: rgb(67, 0, 67);
+				color: white;
+			}
+			.liberayDiv:hover h2 {
+				color: #ffecb3;
+			}
+		</style>
 	</head>
 	<body>
+
 		<h1>p5.js liberay by me</h1>
+
 		<div class="liberayDiv">
-			<h2 >AbstractAlgorithms</h2>
+			<h2>AbstractAlgorithms</h2>
 			<div class="liberay">
 				<iframe src="http://127.0.0.1:5501/liberay.html?sketches=Cubes.js,calmCircles.js,labyrinth.js,AbstractAlgorithm.js&size=200" frameborder="0"></iframe>
 			</div>
 		</div>
+
 		<div class="liberayDiv">
 			<h2>Agents doing stuff</h2>
 			<div class="liberay">
 				<iframe src="http://127.0.0.1:5501/liberay.html?sketches=snake.js,MarkovChain.js,snakeAIEvolution.js,GameOfLive.js&size=200" frameborder="0"></iframe>
 			</div>
 		</div>
+
 		<div class="liberayDiv">
 			<h2>Images manipulation</h2>
 			<div class="liberay">
 				<iframe src="http://127.0.0.1:5501/liberay.html?sketches=2images.js,image.js,imageNoice.js,L-System.js&size=200" frameborder="0"></iframe>
 			</div>
 		</div>
+
+		<script>
+			(function() {
+				// make each .liberayDiv (including the whole card) open its embedded library in a new tab on click
+				const containers = document.querySelectorAll('.liberayDiv');
+
+				function enableFullLibraryOnClick(container) {
+					const iframe = container.querySelector('iframe');
+					if (!iframe) return;
+
+					const fullLibraryUrl = iframe.src;
+					if (!fullLibraryUrl || fullLibraryUrl === 'about:blank') return;
+
+					// --- try to inject click listener inside the iframe (same‑origin) ---
+					// this makes any click inside the gallery (sketches, background) open the full library
+					const tryInjectInside = () => {
+						try {
+							const doc = iframe.contentDocument || iframe.contentWindow?.document;
+							if (!doc) return false;
+							if (iframe.hasAttribute('data-click-injected')) return true;
+
+							const script = doc.createElement('script');
+							script.textContent = `
+								(function() {
+									document.addEventListener('click', function() {
+										const targetUrl = window.location.href;
+										if (targetUrl && targetUrl !== 'about:blank') {
+											window.parent.open(targetUrl, '_blank');
+										}
+									});
+								})();
+							`;
+							const target = doc.head || doc.body || doc.documentElement;
+							if (target) {
+								target.appendChild(script);
+								iframe.setAttribute('data-click-injected', 'true');
+								console.log('✅ click-to-open enabled inside iframe:', fullLibraryUrl);
+								return true;
+							}
+						} catch (err) {
+							console.warn('⚠️ cannot inject inside iframe, using container fallback:', err);
+						}
+						return false;
+					};
+
+					// inject when iframe is ready
+					if (iframe.contentDocument && iframe.contentDocument.readyState === 'complete') {
+						tryInjectInside();
+					} else {
+						iframe.addEventListener('load', tryInjectInside);
+						setTimeout(tryInjectInside, 300);
+					}
+
+					// --- container fallback: ensure the whole div (including border, h2, etc.) works ---
+					if (!container.hasAttribute('data-container-click')) {
+						container.addEventListener('click', (event) => {
+							window.open(fullLibraryUrl, '_blank');
+						});
+						container.setAttribute('data-container-click', 'true');
+					}
+				}
+
+				// apply to each gallery card
+				containers.forEach(enableFullLibraryOnClick);
+				console.log(' ready — click anywhere on a gallery card or inside it to open the full library in a new tab.');
+			})();
+		</script>
+
+		<script type="module" src="index.js"></script>
+
 	</body>
-	<script type="module" src="index.js"></script>
-	<style>
-		h1, h2 {
-			text-align: center;
-			font-family: cursive, serif;
-		}
-		body {
-			background-color: beige;
-		}
-
-		.liberay {
-			height: 600px;
-			width: 600px;
-		}
-
-		iframe {
-			height: 100%;
-			width: 100%;
-			border: none;
-			margin: 0;
-		}
-
-		.liberayDiv {
-			width: 470px;
-			margin: 10px;
-			padding: 10px;
-			border: 2px solid rgb(67, 0, 67);
-			border-radius: 10px;
-			box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-			display: inline-block;
-		}
-		.liberayDiv:hover {
-			background-color: rgb(67, 0, 67);
-			color: white;
-			cursor: pointer;
-		}
-
-	</style>
-	<script>
-		
-	</script>
 </html>
\ No newline at end of file
