Skip to content

Commit

Permalink
use window.docExample for proper scoping with linting, phetsims/chipp…
Browse files Browse the repository at this point in the history 
…er#1405
  • Loading branch information
@zepumph
zepumph committed Oct 10, 2023
1 parent 9b92a67 commit e64ae32
Show file tree
Hide file tree
Showing 9 changed files with 47 additions and 49 deletions.
12 changes: 6 additions & 6 deletions doc/accessibility/accessibility.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
<script type="text/javascript">
phet.scenery.Utils.polyfillRequestAnimationFrame();

function docExample( id, draw ) {
window.docExample = ( id, draw ) => {
var $container = $( '#' + id );
var scene = new phet.scenery.Node();
var display = new phet.scenery.Display( scene, {
Expand Down Expand Up @@ -297,7 +297,7 @@ <h3 id="ex-basic">A Basic Example</h3>
To do this, use the <code>tagName</code> option:</p>
<div id="example-accessibleTag" class="exampleScene" style="width: 64px; height: 64px; margin: 0 auto;"></div>
<script type="text/javascript">
docExample( 'example-accessibleTag', function( scene, display ) {
window.docExample( 'example-accessibleTag', function( scene, display ) {
/*START*/
var pdomNode = new phet.scenery.Rectangle( 0, 0, 64, 64, {
fill: 'blue',
Expand Down Expand Up @@ -352,7 +352,7 @@ <h4>Example</h4>

<div id="example-all-siblings" class="exampleScene" style="width: 96px; height: 64px; margin: 0 auto;"></div>
<script type="text/javascript">
docExample( 'example-all-siblings', function( scene, display ) {
window.docExample( 'example-all-siblings', function( scene, display ) {
/*START*/
var pdomNode = new phet.scenery.Node( {

Expand Down Expand Up @@ -419,7 +419,7 @@ <h4 id="scene-graph">Leveraging the Scene Graph</h4>
</p>
<div id="example-accessible-graph" class="exampleScene" style="width: 64px; height: 64px; margin: 0 auto;"></div>
<script type="text/javascript">
docExample( 'example-accessible-graph', function( scene, display ) {
window.docExample( 'example-accessible-graph', function( scene, display ) {
/*START*/
var dimension = 64;

Expand Down Expand Up @@ -468,7 +468,7 @@ <h4 id="text-in-pdom">Flexibility</h4>
</p>
<div id="example-lots-of-text" class="exampleScene" style="width: 64px; height: 64px; margin: 0 auto;"></div>
<script type="text/javascript">
docExample( 'example-lots-of-text', function( scene, display ) {
window.docExample( 'example-lots-of-text', function( scene, display ) {
/*START*/
var pdomNode = new phet.scenery.Node( {

Expand Down Expand Up @@ -512,7 +512,7 @@ <h4 id="input">Input types</h4>
<p></p>
<div id="example-input-type" class="exampleScene" style="width: 64px; height: 64px; margin: 0 auto;"></div>
<script type="text/javascript">
docExample( 'example-input-type', function( scene, display ) {
window.docExample( 'example-input-type', function( scene, display ) {
/*START*/
var pdomNode = new phet.scenery.Rectangle( 0, 0, 64, 64, {
fill: 'blue',
Expand Down
6 changes: 3 additions & 3 deletions doc/accessibility/voicing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
<script type="text/javascript">
phet.scenery.Utils.polyfillRequestAnimationFrame();

function docExample( id, draw ) {
window.docExample = ( id, draw ) => {

var $container = $( '#' + id );
var scene = new phet.scenery.Node();
Expand Down Expand Up @@ -347,7 +347,7 @@ <h3>Simple Example</h3>
to hear speech.</p>
<div id="example-voicing" class="exampleScene" style="width: 64px; height: 64px; margin: 0 auto;"></div>
<script type="text/javascript">
docExample( 'example-voicing', function( scene, display ) {
window.docExample( 'example-voicing', function( scene, display ) {
/*START*/

// create a class that is compsed with Voicing
Expand Down Expand Up @@ -408,7 +408,7 @@ <h3>Controlled Responses</h3>
<div id="controlled-responses" class="exampleScene" style="width: 128px; height: 128px; margin: 0 auto;"></div>
<script type="text/javascript">

docExample( 'controlled-responses', function( scene, display ) {
window.docExample( 'controlled-responses', function( scene, display ) {
/*START*/

// create a class that is compsed with Voicing
Expand Down
36 changes: 18 additions & 18 deletions doc/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
<script type="text/javascript">
phet.scenery.Utils.polyfillRequestAnimationFrame();

function docExample( id, draw ) {
window.docExample = ( id, draw ) => {
var $container = $( '#' + id );
var scene = new phet.scenery.Node();
var display = new phet.scenery.Display( scene, {
Expand Down Expand Up @@ -486,7 +486,7 @@ <h4 id="node-children">node.children</h4>

<div id="example-children" class="exampleScene" style="width: 128px; height: 64px;"></div>
<script type="text/javascript">
docExample( 'example-children', function( scene ) {
window.docExample( 'example-children', function( scene ) {
/*START*/
scene.addChild( new phet.scenery.Node( {
// an array of children can be specified, so no
Expand Down Expand Up @@ -582,7 +582,7 @@ <h4 id="node-cursor">node.cursor</h4>
</ul>
<div id="example-cursor" class="exampleScene" style="width: 128px; height: 64px;"></div>
<script type="text/javascript">
docExample( 'example-cursor', function( scene, display ) {
window.docExample( 'example-cursor', function( scene, display ) {
/*START*/
scene.addChild( new phet.scenery.Path( phet.kite.Shape.regularPolygon( 6, 25 ), {
x: 64, y: 32,
Expand Down Expand Up @@ -657,7 +657,7 @@ <h4 id="node-clipArea">node.clipArea</h4>

<div id="example-clipArea" class="exampleScene" style="width: 64px; height: 64px;"></div>
<script type="text/javascript">
docExample( 'example-clipArea', function( scene ) {
window.docExample( 'example-clipArea', function( scene ) {
scene.renderer = 'svg';
/*START*/
scene.addChild( new phet.scenery.Circle( 28, {
Expand Down Expand Up @@ -729,7 +729,7 @@ <h4 id="node-opacity">node.opacity</h4>

<div id="example-opacity" class="exampleScene" style="width: 64px; height: 64px;"></div>
<script type="text/javascript">
docExample( 'example-opacity', function( scene ) {
window.docExample( 'example-opacity', function( scene ) {
/*START*/
scene.addChild( new phet.scenery.Rectangle( 0, 12, 64, 20, { fill: '#000' } ) );
var circle = phet.kite.Shape.circle( 0, 0, 30 );
Expand Down Expand Up @@ -1127,7 +1127,7 @@ <h4 id="paintable-lineCap">lineCap</h4>

<div id="example-lineCap" class="exampleScene" style="width: 256px; height: 64px;"></div>
<script type="text/javascript">
docExample( 'example-lineCap', function( scene ) {
window.docExample( 'example-lineCap', function( scene ) {
scene.addChild( new phet.scenery.Text( 'butt', {
fontSize: 14,
centerX: 256 / 6,
Expand Down Expand Up @@ -1192,7 +1192,7 @@ <h4 id="paintable-lineJoin">lineJoin</h4>

<div id="example-lineJoin" class="exampleScene" style="width: 256px; height: 64px;"></div>
<script type="text/javascript">
docExample( 'example-lineJoin', function( scene ) {
window.docExample( 'example-lineJoin', function( scene ) {
scene.addChild( new phet.scenery.Text( 'miter', {
fontSize: 14,
centerX: 256 / 6,
Expand Down Expand Up @@ -1257,7 +1257,7 @@ <h4 id="paintable-lineDash">lineDash</h4>

<div id="example-lineDash" class="exampleScene" style="width: 64px; height: 64px;"></div>
<script type="text/javascript">
docExample( 'example-lineDash', function( scene ) {
window.docExample( 'example-lineDash', function( scene ) {
/*START*/
scene.addChild( new phet.scenery.Path( phet.kite.Shape.regularPolygon( 6, 25 ), {
x: 32, y: 32,
Expand All @@ -1280,7 +1280,7 @@ <h4 id="paintable-lineDashOffset">lineDashOffset</h4>

<div id="example-lineDashOffset" class="exampleScene" style="width: 128px; height: 64px;"></div>
<script type="text/javascript">
docExample( 'example-lineDashOffset', function( scene ) {
window.docExample( 'example-lineDashOffset', function( scene ) {
scene.addChild( new phet.scenery.Path( new phet.kite.Shape().moveTo( 0, 16.5 )
.lineTo( 128, 16.5 )
.moveTo( 0, 32.5 )
Expand Down Expand Up @@ -1364,7 +1364,7 @@ <h3 id="image" class="section">Image</h3>

<div id="example-image" class="exampleScene" style="width: 130px; height: 85px;"></div>
<script type="text/javascript">
docExample( 'example-image', function( scene, display ) {
window.docExample( 'example-image', function( scene, display ) {
var url = 'https://phet.colorado.edu/sims/my-solar-system/my-solar-system-thumbnail.png';
/*START*/
scene.addChild( new phet.scenery.Image( url ) );
Expand Down Expand Up @@ -1414,7 +1414,7 @@ <h3 id="text" class="section">Text</h3>

<div id="example-text" class="exampleScene" style="width: 256px; height: 64px;"></div>
<script type="text/javascript">
docExample( 'example-text', function( scene ) {
window.docExample( 'example-text', function( scene ) {
/*START*/
scene.addChild( new phet.scenery.Text( 'Some text', {
font: '20px sans-serif',
Expand Down Expand Up @@ -1572,7 +1572,7 @@ <h3 id="dom" class="section">DOM</h3>

<div id="example-dom" class="exampleScene" style="width: 256px; height: 128px;"></div>
<script type="text/javascript">
docExample( 'example-dom', function( scene ) {
window.docExample( 'example-dom', function( scene ) {
/*START*/
var element = document.createElement( 'span' );
element.innerHTML = '<label style="display: inline;">Type in me: </label><input type="text">';
Expand Down Expand Up @@ -1615,7 +1615,7 @@ <h3 id="linearGradient" class="section">LinearGradient</h3>

<div id="example-linearGradient" class="exampleScene" style="width: 128px; height: 128px;"></div>
<script type="text/javascript">
docExample( 'example-linearGradient', function( scene ) {
window.docExample( 'example-linearGradient', function( scene ) {
/*START*/
scene.addChild( new phet.scenery.Path( phet.kite.Shape.rectangle( 0, 0, 128, 128 ), {

Expand Down Expand Up @@ -1677,7 +1677,7 @@ <h3 id="radialGradient" class="section">RadialGradient</h3>

<div id="example-radialGradient" class="exampleScene" style="width: 128px; height: 128px;"></div>
<script type="text/javascript">
docExample( 'example-radialGradient', function( scene ) {
window.docExample( 'example-radialGradient', function( scene ) {
/*START*/
scene.addChild( new phet.scenery.Path( phet.kite.Shape.rectangle( 0, 0, 128, 128 ), {

Expand Down Expand Up @@ -1740,7 +1740,7 @@ <h3 id="pattern" class="section">Pattern</h3>

<div id="example-pattern" class="exampleScene" style="width: 256px; height: 256px;"></div>
<script type="text/javascript">
docExample( 'example-pattern', function( scene, display ) {
window.docExample( 'example-pattern', function( scene, display ) {
var loadedImg = document.createElement( 'img' );
loadedImg.addEventListener( 'load', function() {
/*START*/
Expand Down Expand Up @@ -1786,7 +1786,7 @@ <h3 id="rectangle" class="section">Rectangle</h3>

<div id="example-rectangle" class="exampleScene" style="width: 128px; height: 64px;"></div>
<script type="text/javascript">
docExample( 'example-rectangle', function( scene ) {
window.docExample( 'example-rectangle', function( scene ) {
/*START*/
// red rectangle
scene.addChild( new phet.scenery.Rectangle( 10, 10, 44, 44, {
Expand Down Expand Up @@ -1874,7 +1874,7 @@ <h3 id="circle" class="section">Circle</h3>

<div id="example-circle" class="exampleScene" style="width: 64px; height: 64px;"></div>
<script type="text/javascript">
docExample( 'example-circle', function( scene ) {
window.docExample( 'example-circle', function( scene ) {
/*START*/
scene.addChild( new phet.scenery.Circle( 22, {
x: 32, y: 32, fill: '#f00'
Expand Down Expand Up @@ -1909,7 +1909,7 @@ <h3 id="line" class="section">Line</h3>

<div id="example-line" class="exampleScene" style="width: 64px; height: 64px;"></div>
<script type="text/javascript">
docExample( 'example-line', function( scene ) {
window.docExample( 'example-line', function( scene ) {
/*START*/
scene.addChild( new phet.scenery.Line( 8, 8, 56, 56, {
stroke: 'red', lineWidth: 5, lineCap: 'round'
Expand Down
4 changes: 2 additions & 2 deletions examples/accessibility-animation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ <h2>Scenery Accessibility Examples: Animation</h2>
<!-- eslint-disable --> <!--TODO: fix lint https://github.com/phetsims/chipper/issues/1405-->

<script type="text/javascript">
function docExample( id, draw ) {
window.docExample = ( id, draw ) => {
// specify the dom element to which the display will be appended
var $container = $( '#' + id );
// create the scene and display
Expand Down Expand Up @@ -143,7 +143,7 @@ <h2>Scenery Accessibility Examples: Animation</h2>
return Math.floor( Math.random() * 255 )
}

docExample( 'accessibility-scene', ( scene, display ) => {
window.docExample( 'accessibility-scene', ( scene, display ) => {
'use strict';

class Hexagon extends phet.scenery.Node {
Expand Down
20 changes: 9 additions & 11 deletions examples/accessibility-button.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,11 @@

<div id="accessibility-scene" class="exampleScene" style="width: 600px; height: 200px;"></div>
</div>
<!-- eslint-disable --> <!--TODO: fix lint https://github.com/phetsims/chipper/issues/1405-->
<script type="text/javascript">
function docExample( id, draw ) {
var $container = $( '#' + id );
var scene = new phet.scenery.Node();
var display = new phet.scenery.Display( scene, {
window.docExample = ( id, draw ) => {
const $container = $( '#' + id );
const scene = new phet.scenery.Node();
const display = new phet.scenery.Display( scene, {
width: $container.width(),
height: $container.height()
} );
Expand All @@ -70,20 +69,19 @@
draw( scene, display );
display.updateDisplay();

var pdomHTMLBlock = display.pdomRootElement.outerHTML;
var formattedPDOM = pdomHTMLBlock.replace( new RegExp( '<[/]?\\w*[ >]', 'g' ), '\n$&' ); // add breaks in the string
var $PDOMcode = $( '<pre class="brush: html"></pre>' ).text( formattedPDOM );
const pdomHTMLBlock = display.pdomRootElement.outerHTML;
const formattedPDOM = pdomHTMLBlock.replace( new RegExp( '<[/]?\\w*[ >]', 'g' ), '\n$&' ); // add breaks in the string
const $PDOMcode = $( '<pre class="brush: html"></pre>' ).text( formattedPDOM );

$container.after( $PDOMcode );
}
};
</script>
<script type="text/javascript">


phet.scenery.Utils.polyfillRequestAnimationFrame();


docExample( 'accessibility-scene', ( scene, display ) => {
window.docExample( 'accessibility-scene', ( scene, display ) => {

// Add our text
const rectangle = new phet.scenery.Path( phet.kite.Shape.roundedRectangleWithRadii( 5, 5, 500, 100, {
Expand Down
4 changes: 2 additions & 2 deletions examples/accessibility-listeners.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ <h2>Scenery Accessibility Examples: Listeners</h2>
<script type="text/javascript">
let scene;

function docExample( id, draw ) {
window.docExample = ( id, draw ) => {
'use strict';
const $container = $( '#' + id );
scene = new phet.scenery.Node();
Expand All @@ -122,7 +122,7 @@ <h2>Scenery Accessibility Examples: Listeners</h2>
<script type="text/javascript">
phet.scenery.Utils.polyfillRequestAnimationFrame();

docExample( 'accessibility-scene', ( scene, display ) => {
window.docExample( 'accessibility-scene', ( scene, display ) => {
'use strict';

const squareDimension = 3 * display.height / 4;
Expand Down
4 changes: 2 additions & 2 deletions examples/accessibility-shapes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
</div>
<!-- eslint-disable --> <!--TODO: fix lint https://github.com/phetsims/chipper/issues/1405-->
<script type="text/javascript">
function docExample( id, draw ) {
window.docExample = ( id, draw ) => {
var $container = $( '#' + id );
var scene = new phet.scenery.Node();
var display = new phet.scenery.Display( scene, {
Expand All @@ -80,7 +80,7 @@
phet.scenery.Utils.polyfillRequestAnimationFrame();


docExample( 'accessibility-scene', ( scene, display ) => {
window.docExample( 'accessibility-scene', ( scene, display ) => {

// Add our text
scene.addChild( new phet.scenery.Path( phet.kite.Shape.arc( 20, 20, 50, 0, 3 ),
Expand Down
4 changes: 2 additions & 2 deletions examples/accessibility-slider.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ <h2>Scenery Accessibility Examples: Slider</h2>
<script type="text/javascript">
let scene;

function docExample( id, draw ) {
window.docExample = ( id, draw ) => {
'use strict';
const $container = $( '#' + id );
scene = new phet.scenery.Node();
Expand All @@ -131,7 +131,7 @@ <h2>Scenery Accessibility Examples: Slider</h2>
*/

phet.scenery.Utils.polyfillRequestAnimationFrame();
docExample( 'accessibility-scene', ( scene, display ) => {
window.docExample( 'accessibility-scene', ( scene, display ) => {
'use strict';

// number of tick marks on track
Expand Down
6 changes: 3 additions & 3 deletions examples/accessibility-updating-pdom.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,10 +103,10 @@ <h2>Scenery Accessibility Examples: Updating the parallel DOM</h2>
<!-- eslint-disable --> <!--TODO: fix lint https://github.com/phetsims/chipper/issues/1405-->

<script type="text/javascript">
//docExample creates the display and initalizes the display events.
//docExample creates the display and initializes the display events.
let scene;

function docExample( id, draw ) {
window.docExample = ( id, draw ) => {
let $container = $( '#' + id );
scene = new phet.scenery.Node();
let display = new phet.scenery.Display( scene, {
Expand All @@ -130,7 +130,7 @@ <h2>Scenery Accessibility Examples: Updating the parallel DOM</h2>
// which are mouse click events, and "keydown" and "keyup" events for the enter key, which are keyboard accessibility
// click events. PressListener handles all four of these events such that mouse click and a11y click events have the
// same callback functions, and do not need to be separately handled because both are handled in a single "press" event.
docExample( 'accessibility-scene', ( scene, display ) => {
window.docExample( 'accessibility-scene', ( scene, display ) => {
'use strict';

// list of colorful buttons to be generated.
Expand Down

0 comments on commit e64ae32

Please sign in to comment.