mirror of
https://github.com/storytold/spark.git
synced 2026-10-29 09:18:11 +00:00
Fix Examples Page (#96)
* add hash navigation + scrollable examples list * add fullscreen example button
This commit is contained in:
Alexander R. Mcneilly
committed by
GitHub
GitHub
parent
825344ff59
commit
ba8083e8bf
+126
-64
@@ -34,7 +34,6 @@
|
||||
left: 0px;
|
||||
width: var(--panel-width);
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
border-right: var(--border-style);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -48,6 +47,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header .logo {
|
||||
@@ -74,6 +74,12 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.examples-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: var(--panel-width);
|
||||
width: calc(100% - var(--panel-width));
|
||||
@@ -88,17 +94,28 @@
|
||||
border: none;
|
||||
}
|
||||
|
||||
.code-button {
|
||||
.action-buttons {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
padding: 12px;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 0px;
|
||||
background-color: #D43E4C;
|
||||
opacity: .9;
|
||||
z-index: 999;
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, .15);
|
||||
text-decoration: none;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.example-link {
|
||||
@@ -167,12 +184,13 @@
|
||||
right: -100%;
|
||||
left: auto;
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
height: calc(100vh - 4rem);
|
||||
transform: none;
|
||||
transition: right 0.3s ease-in-out;
|
||||
z-index: 1001;
|
||||
background: #D43E4C;
|
||||
border-left: var(--border-style);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mobile-panel.active {
|
||||
@@ -205,11 +223,79 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
const exampleMap = {
|
||||
'hello-world': '/examples/hello-world/index.html',
|
||||
'envmap': '/examples/envmap/index.html',
|
||||
'interactivity': '/examples/interactivity/index.html',
|
||||
'multiple-splats': '/examples/multiple-splats/index.html',
|
||||
'multiple-viewpoints': '/examples/multiple-viewpoints/index.html',
|
||||
'procedural-splats': '/examples/procedural-splats/index.html',
|
||||
'raycasting': '/examples/raycasting/index.html',
|
||||
'dynamic-lighting': '/examples/dynamic-lighting/index.html',
|
||||
'particle-animation': '/examples/particle-animation/index.html',
|
||||
'particle-simulation': '/examples/particle-simulation/index.html',
|
||||
'webxr': '/examples/webxr/index.html',
|
||||
'glsl': '/examples/glsl/index.html',
|
||||
'debug-color': '/examples/debug-color/index.html',
|
||||
'depth-of-field': '/examples/depth-of-field/index.html',
|
||||
'splat-texture': '/examples/splat-texture/index.html',
|
||||
'editor': '/examples/editor/index.html'
|
||||
};
|
||||
|
||||
function getExampleFromHash() {
|
||||
const hash = window.location.hash.substring(1);
|
||||
return hash || 'hello-world';
|
||||
}
|
||||
|
||||
function setActiveExample(exampleKey) {
|
||||
const path = exampleMap[exampleKey];
|
||||
if (!path) return;
|
||||
|
||||
const iframe = document.querySelector('.example-frame');
|
||||
const codeButton = document.querySelector('.code-button');
|
||||
const fullPageButton = document.querySelector('.fullpage-button');
|
||||
|
||||
iframe.src = path;
|
||||
|
||||
if (codeButton) {
|
||||
codeButton.href = `https://github.com/sparkjsdev/spark/blob/main${path}`;
|
||||
}
|
||||
|
||||
if (fullPageButton) {
|
||||
fullPageButton.href = path;
|
||||
}
|
||||
|
||||
document.querySelectorAll('.example-link').forEach(link => {
|
||||
link.classList.remove('active');
|
||||
if (link.getAttribute('data-example') === exampleKey) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
if (window.location.hash.substring(1) !== exampleKey) {
|
||||
history.replaceState(null, null, `#${exampleKey}`);
|
||||
}
|
||||
}
|
||||
|
||||
function loadExamples() {
|
||||
const panel = document.querySelector('.panel');
|
||||
const iframe = document.querySelector('.example-frame');
|
||||
|
||||
const actionButtons = document.createElement('div');
|
||||
actionButtons.classList.add('action-buttons');
|
||||
|
||||
const fullPageButton = document.createElement('a');
|
||||
fullPageButton.classList.add('action-button', 'fullpage-button');
|
||||
fullPageButton.target = '_blank';
|
||||
fullPageButton.title = 'Open this example in full page';
|
||||
fullPageButton.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" style="display:block;">
|
||||
<path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6m10 0l-9 9m3-9h6v6"/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
const codeButton = document.createElement('a');
|
||||
codeButton.classList.add('code-button');
|
||||
codeButton.classList.add('action-button', 'code-button');
|
||||
codeButton.target = '_blank';
|
||||
codeButton.title = 'View source code for this example on GitHub';
|
||||
codeButton.innerHTML = `
|
||||
@@ -217,26 +303,26 @@
|
||||
<path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 8l-4 4l4 4m6-8l4 4l-4 4"/>
|
||||
</svg>
|
||||
`;
|
||||
document.body.appendChild(codeButton);
|
||||
|
||||
const initialLink = panel.querySelector('.example-link.active');
|
||||
if (initialLink) {
|
||||
const path = initialLink.getAttribute('href');
|
||||
iframe.src = path;
|
||||
codeButton.href = `https://github.com/sparkjsdev/spark/blob/main${path}`;
|
||||
}
|
||||
actionButtons.appendChild(fullPageButton);
|
||||
actionButtons.appendChild(codeButton);
|
||||
document.body.appendChild(actionButtons);
|
||||
|
||||
const initialExample = getExampleFromHash();
|
||||
setActiveExample(initialExample);
|
||||
|
||||
panel.querySelectorAll('.example-link').forEach((link) => {
|
||||
link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const path = link.getAttribute('href');
|
||||
iframe.src = path;
|
||||
|
||||
document.querySelectorAll('.example-link').forEach(l => l.classList.remove('active'));
|
||||
link.classList.add('active');
|
||||
codeButton.href = `https://github.com/sparkjsdev/spark/blob/main/${path.substring(1)}`;
|
||||
const exampleKey = link.getAttribute('data-example');
|
||||
setActiveExample(exampleKey);
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
const exampleKey = getExampleFromHash();
|
||||
setActiveExample(exampleKey);
|
||||
});
|
||||
}
|
||||
|
||||
function setupMobileMenu() {
|
||||
@@ -264,7 +350,7 @@
|
||||
copyLinks();
|
||||
|
||||
const observer = new MutationObserver(copyLinks);
|
||||
observer.observe(panel, { childList: true });
|
||||
observer.observe(panel, { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] });
|
||||
|
||||
document.body.appendChild(mobilePanel);
|
||||
|
||||
@@ -289,38 +375,12 @@
|
||||
|
||||
overlay.addEventListener('click', closeMenu);
|
||||
|
||||
mobilePanel.querySelectorAll('.example-link').forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const path = link.getAttribute('href');
|
||||
|
||||
iframe.src = path;
|
||||
|
||||
document.querySelectorAll('.example-link').forEach(l => l.classList.remove('active'));
|
||||
link.classList.add('active');
|
||||
|
||||
const example = link.getAttribute('data-source');
|
||||
if (example) {
|
||||
codeButton.href = example;
|
||||
}
|
||||
|
||||
closeMenu();
|
||||
});
|
||||
});
|
||||
|
||||
mobilePanel.addEventListener('click', (e) => {
|
||||
const link = e.target.closest('.example-link');
|
||||
|
||||
if (link) {
|
||||
e.preventDefault();
|
||||
const path = link.getAttribute('href');
|
||||
iframe.src = path;
|
||||
|
||||
document.querySelectorAll('.example-link').forEach(l => l.classList.remove('active'));
|
||||
link.classList.add('active');
|
||||
panel.querySelector(`[href="${path}"]`)?.classList.add('active');
|
||||
|
||||
codeButton.href = `https://github.com/sparkjsdev/spark/blob/main${path}`;
|
||||
const exampleKey = link.getAttribute('data-example');
|
||||
setActiveExample(exampleKey);
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
@@ -360,22 +420,24 @@
|
||||
</a>
|
||||
<span class="title">EXAMPLES</span>
|
||||
</div>
|
||||
<a href="/examples/hello-world/index.html" class="example-link active">Hello World</a>
|
||||
<a href="/examples/envmap/index.html" class="example-link">Environment Map</a>
|
||||
<a href="/examples/interactivity/index.html" class="example-link">Interactivity</a>
|
||||
<a href="/examples/multiple-splats/index.html" class="example-link">Multiple Splats</a>
|
||||
<a href="/examples/multiple-viewpoints/index.html" class="example-link">Multiple Viewpoints</a>
|
||||
<a href="/examples/procedural-splats/index.html" class="example-link">Procedural Splats</a>
|
||||
<a href="/examples/raycasting/index.html" class="example-link">Raycasting</a>
|
||||
<a href="/examples/dynamic-lighting/index.html" class="example-link">Dynamic Lighting</a>
|
||||
<a href="/examples/particle-animation/index.html" class="example-link">Particle Animation</a>
|
||||
<a href="/examples/particle-simulation/index.html" class="example-link">Particle Simulation</a>
|
||||
<a href="/examples/webxr/index.html" class="example-link">WebXR</a>
|
||||
<a href="/examples/glsl/index.html" class="example-link">GLSL Shaders</a>
|
||||
<a href="/examples/debug-color/index.html" class="example-link">Debug Coloring</a>
|
||||
<a href="/examples/depth-of-field/index.html" class="example-link">Depth of Field</a>
|
||||
<a href="/examples/splat-texture/index.html" class="example-link">Splat Texture</a>
|
||||
<a href="/examples/editor/index.html" class="example-link">Editor</a>
|
||||
<div class="examples-container">
|
||||
<a href="#hello-world" data-example="hello-world" class="example-link">Hello World</a>
|
||||
<a href="#envmap" data-example="envmap" class="example-link">Environment Map</a>
|
||||
<a href="#interactivity" data-example="interactivity" class="example-link">Interactivity</a>
|
||||
<a href="#multiple-splats" data-example="multiple-splats" class="example-link">Multiple Splats</a>
|
||||
<a href="#multiple-viewpoints" data-example="multiple-viewpoints" class="example-link">Multiple Viewpoints</a>
|
||||
<a href="#procedural-splats" data-example="procedural-splats" class="example-link">Procedural Splats</a>
|
||||
<a href="#raycasting" data-example="raycasting" class="example-link">Raycasting</a>
|
||||
<a href="#dynamic-lighting" data-example="dynamic-lighting" class="example-link">Dynamic Lighting</a>
|
||||
<a href="#particle-animation" data-example="particle-animation" class="example-link">Particle Animation</a>
|
||||
<a href="#particle-simulation" data-example="particle-simulation" class="example-link">Particle Simulation</a>
|
||||
<a href="#webxr" data-example="webxr" class="example-link">WebXR</a>
|
||||
<a href="#glsl" data-example="glsl" class="example-link">GLSL Shaders</a>
|
||||
<a href="#debug-color" data-example="debug-color" class="example-link">Debug Coloring</a>
|
||||
<a href="#depth-of-field" data-example="depth-of-field" class="example-link">Depth of Field</a>
|
||||
<a href="#splat-texture" data-example="splat-texture" class="example-link">Splat Texture</a>
|
||||
<a href="#editor" data-example="editor" class="example-link">Editor</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<iframe class="example-frame" src=""></iframe>
|
||||
|
||||
Reference in New Issue
Block a user