Handle navigation between pages in mkdocs material, see #130

scenerystack · Feb 14, 2025 · f07f6ef · f07f6ef
1 parent 460df39
commit f07f6ef
Show file tree

Hide file tree

Showing 152 changed files with 322 additions and 430 deletions.
diff --git a/docs/js/createSandbox.js b/docs/js/createSandbox.js
@@ -106,7 +106,25 @@ scenerystackImportsPromise.then( actualImports => {
   self.scenerystackImports.backgroundColor = backgroundColor;
 } );
 
-export const createSandbox = ( id, func, providedOptions ) => {
+export const createSandbox = ( divOrId, func, providedOptions ) => {
+
+  let id;
+  let parentElement;
+
+  if ( typeof divOrId === 'string' ) {
+    id = divOrId;
+    parentElement = document.getElementById( id );
+  }
+  else {
+    const idBits = divOrId.dataset.example.split( '/' );
+    id = idBits[ idBits.length - 1 ].replace( '.js', '' );
+    parentElement = divOrId;
+
+    // Don't double-initialize
+    if ( parentElement.hasChildNodes() ) {
+      return;
+    }
+  }
 
   console.log( `creating sandbox for ${id}` );
 
@@ -124,8 +142,6 @@ export const createSandbox = ( id, func, providedOptions ) => {
     showAriaLive: false
   }, providedOptions );
 
-  const parentElement = document.getElementById( id );
-
   const displayContainerElement = document.createElement( 'div' );
   if ( options.showDisplay ) {
     parentElement.appendChild( displayContainerElement );
@@ -315,7 +331,7 @@ export const createSandbox = ( id, func, providedOptions ) => {
   // Clean up sandbox when it is removed, see https://github.com/scenerystack/community/issues/130
   {
     const interval = setInterval( () => {
-      if ( !document.getElementById( id ) ) {
+      if ( !parentElement.isConnected ) {
         console.log(`disposing sandbox for ${id}`);
 
         disposeEmitter.emit();

diff --git a/docs/js/features/renderer-example.js b/docs/js/features/renderer-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "renderer-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const content = new HBox( {

diff --git a/docs/js/initialize-examples.js b/docs/js/initialize-examples.js
@@ -0,0 +1,17 @@
+document$.subscribe( () => {
+  console.log( 'reloading examples' );
+
+  document.querySelectorAll( '.sandbox-example[data-example]' ).forEach( async div => {
+    if ( div.dataset.initialized ) {
+      return;
+    }
+
+    div.dataset.initialized = 'true';
+
+    const module = await import( div.dataset.example );
+
+    if ( typeof module.initialize === 'function' ) {
+      module.initialize( div );
+    }
+  } );
+} );
diff --git a/docs/js/scenery-accessibility/accessible-tag-example.js b/docs/js/scenery-accessibility/accessible-tag-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "accessible-tag-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const pdomNode = new Rectangle( 0, 0, 64, 64, {

diff --git a/docs/js/scenery-accessibility/controlled-responses-example.js b/docs/js/scenery-accessibility/controlled-responses-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "controlled-responses-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
 

diff --git a/docs/js/scenery-accessibility/graph-example.js b/docs/js/scenery-accessibility/graph-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "graph-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const dimension = 64;

diff --git a/docs/js/scenery-accessibility/input-type-example.js b/docs/js/scenery-accessibility/input-type-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "accessible-tag-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const pdomNode = new Rectangle( 0, 0, 64, 64, {

diff --git a/docs/js/scenery-accessibility/lots-of-text-example.js b/docs/js/scenery-accessibility/lots-of-text-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "lots-of-text-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const pdomNode = new Node( {

diff --git a/docs/js/scenery-accessibility/siblings-example.js b/docs/js/scenery-accessibility/siblings-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "siblings-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const pdomNode = new Node( {

diff --git a/docs/js/scenery-accessibility/voicing-example.js b/docs/js/scenery-accessibility/voicing-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "voicing-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     // create a class that is compsed with Voicing

diff --git a/docs/js/scenery-basics/a11y-alerts-example.js b/docs/js/scenery-basics/a11y-alerts-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "a11y-alerts-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     let count = 0;

diff --git a/docs/js/scenery-basics/a11y-basics-example.js b/docs/js/scenery-basics/a11y-basics-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "a11y-basics-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const content = new HBox( {

diff --git a/docs/js/scenery-basics/a11y-siblings-example.js b/docs/js/scenery-basics/a11y-siblings-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "a11y-siblings-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const circleButton = new Circle( 30, {

diff --git a/docs/js/scenery-basics/add-child-example.js b/docs/js/scenery-basics/add-child-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "add-child-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const content = new Node();

diff --git a/docs/js/scenery-basics/alignbox-example.js b/docs/js/scenery-basics/alignbox-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "alignbox-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const content = new AlignBox( new Rectangle( 0, 0, 50, 50, { fill: 'red' } ), {

diff --git a/docs/js/scenery-basics/animation-basic-example.js b/docs/js/scenery-basics/animation-basic-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "animation-basic-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     // Shadow the actual display
     const display = {

diff --git a/docs/js/scenery-basics/animation-twixt-example.js b/docs/js/scenery-basics/animation-twixt-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "animation-twixt-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     const background = new Rectangle( -150, -50, 300, 100, {
       fill: 'transparent'

diff --git a/docs/js/scenery-basics/children-ordering-example.js b/docs/js/scenery-basics/children-ordering-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "children-ordering-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const content = new Node( {

diff --git a/docs/js/scenery-basics/clip-area-example.js b/docs/js/scenery-basics/clip-area-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "clip-area-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const content = new Node( {

diff --git a/docs/js/scenery-basics/coordinate-frame-diagram.js b/docs/js/scenery-basics/coordinate-frame-diagram.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "coordinate-frame-diagram", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const padding = 20;

diff --git a/docs/js/scenery-basics/cursors-example.js b/docs/js/scenery-basics/cursors-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "cursors-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const cursors = [

diff --git a/docs/js/scenery-basics/dag-example.js b/docs/js/scenery-basics/dag-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "dag-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const quantity = 7;

diff --git a/docs/js/scenery-basics/declarative-pushbutton-example.js b/docs/js/scenery-basics/declarative-pushbutton-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "declarative-pushbutton-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const button = new TextPushButton( 'Example Button', {

diff --git a/docs/js/scenery-basics/display-create-example.js b/docs/js/scenery-basics/display-create-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "display-create-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     if ( false ) {
       /*START*/

diff --git a/docs/js/scenery-basics/display-preexisting-example.js b/docs/js/scenery-basics/display-preexisting-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "display-preexisting-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     if ( false ) {
       /*START*/

diff --git a/docs/js/scenery-basics/display-size-example.js b/docs/js/scenery-basics/display-size-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "display-size-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     if ( false ) {
       /*START*/

diff --git a/docs/js/scenery-basics/dom-example.js b/docs/js/scenery-basics/dom-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "dom-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const element = document.createElement( 'div' );

diff --git a/docs/js/scenery-basics/filters-example.js b/docs/js/scenery-basics/filters-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "filters-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const filters = [

diff --git a/docs/js/scenery-basics/getting-started-example.js b/docs/js/scenery-basics/getting-started-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "getting-started-example-appendix", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
 
     // This is a bit hacked, where we're ignoring the Display that createSandbox gives us, and creating our own

diff --git a/docs/js/scenery-basics/gridbox-example.js b/docs/js/scenery-basics/gridbox-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "gridbox-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const content = new GridBox( {

diff --git a/docs/js/scenery-basics/hbox-example.js b/docs/js/scenery-basics/hbox-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "hbox-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const content = new HBox( {

diff --git a/docs/js/scenery-basics/image-example.js b/docs/js/scenery-basics/image-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "image-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const content = new Node( {

diff --git a/docs/js/scenery-basics/interaction-basic-example.js b/docs/js/scenery-basics/interaction-basic-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "interaction-basic-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const button = new TextPushButton( 'Change Button Color', {

diff --git a/docs/js/scenery-basics/interaction-high-level-example.js b/docs/js/scenery-basics/interaction-high-level-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "interaction-high-level-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const background = new Rectangle( 0, 0, 400, 300, { stroke: foregroundColor } );

diff --git a/docs/js/scenery-basics/interaction-low-level-example.js b/docs/js/scenery-basics/interaction-low-level-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "interaction-low-level-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const radius = 5;

diff --git a/docs/js/scenery-basics/manualconstraint-example.js b/docs/js/scenery-basics/manualconstraint-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "manualconstraint-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const circle = new Circle( 40, { fill: 'red' } );

diff --git a/docs/js/scenery-basics/matrix-example.js b/docs/js/scenery-basics/matrix-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "matrix-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const theta = Math.PI / 6;

diff --git a/docs/js/scenery-basics/mutation-rectangle-example.js b/docs/js/scenery-basics/mutation-rectangle-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "mutation-rectangle-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     // Provide options on construction

diff --git a/docs/js/scenery-basics/opacity-example.js b/docs/js/scenery-basics/opacity-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "opacity-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const quantity = 20;

diff --git a/docs/js/scenery-basics/path-basic-example.js b/docs/js/scenery-basics/path-basic-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "path-basic-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const content = new HBox( {

diff --git a/docs/js/scenery-basics/path-shape-example.js b/docs/js/scenery-basics/path-shape-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "path-shape-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     // Method calls on the Shape can be chained for convenience

diff --git a/docs/js/scenery-basics/path-svg-example.js b/docs/js/scenery-basics/path-svg-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "path-svg-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     /*START*/
     const shape = new Shape( 'M 0 0 L 40 40 Q 80 0 40 -40 L 40 0 L 0 0 Z' );

diff --git a/docs/js/scenery-basics/pickable-false-example.js b/docs/js/scenery-basics/pickable-false-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "pickable-false-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     const background = new Rectangle( 0, 0, 400, 300, { stroke: foregroundColor } );
     /*START*/

diff --git a/docs/js/scenery-basics/pickable-true-example.js b/docs/js/scenery-basics/pickable-true-example.js
@@ -1,6 +1,6 @@
 import { createSandbox } from "/js/createSandbox.js";
 
-createSandbox( "pickable-true-example", ( scene, stepEmitter, display ) => {
+export const initialize = div => createSandbox( div, ( scene, stepEmitter, display ) => {
   const box = ( () => {
     const background = new Rectangle( 0, 0, 400, 300, { stroke: foregroundColor } );
     /*START*/