<commit_before><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Accessible Content in Scenery</title>

  <link rel="stylesheet" href="../../sherpa/lib/bootstrap-2.2.2.css">
  <link rel="stylesheet" href="../../sherpa/lib/bootstrap-responsive-2.2.2.css">
  <link rel="stylesheet" href="../../sherpa/lib/syntaxhighlighter-3.0.83/shCore.css">
  <link rel="stylesheet" href="../../sherpa/lib/syntaxhighlighter-3.0.83/shThemeDefault.css">
  <link rel="stylesheet" href="../assets/scenery.css">

  <!-- Before loading other things (that might error), create hooks to report errors/loads for continuous testing -->
  <script src="../../aqua/js/pageload-connector.js"></script>

  <!-- jQuery and LoDash are dependencies -->
  <script src="../../sherpa/lib/jquery-2.1.0.min.js"></script>
  <script src="../../sherpa/lib/lodash-4.17.4.min.js"></script>

  <!-- For the styling -->
  <script src="../../sherpa/lib/bootstrap-2.2.2.js"></script>

  <script src="../../sherpa/lib/syntaxhighlighter-3.0.83/shCore.js"></script>
  <script src="../../sherpa/lib/syntaxhighlighter-3.0.83/shBrushJScript.js"></script>
  <script src="../../sherpa/lib/syntaxhighlighter-3.0.83/shBrushXml.js"></script>

  <script type="text/javascript"
          src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

  <!-- Our code, in either the concatenated 'with comments' version or the minified version -->
  <script src="../build/scenery.min.js"></script>


  <script type="text/javascript">
    scenery.Util.polyfillRequestAnimationFrame();

    function docExample( id, draw ) {
      var $container = $( '#' + id );
      var scene = new scenery.Node();
      var display = new scenery.Display( scene, {
        width: $container.width(),
        height: $container.height()
      } );
      $container[ 0 ].appendChild( display.domElement );
      draw( scene, display );
      display.updateDisplay();
      var $code = $( '<pre class="brush: js"></pre>' );
      $code.text( draw.toString().match( /\/\*START\*\/((.|\n)*)\/\*END\*\// )[ 1 ] );
      $container.after( $code );

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

      $code.after( $PDOMcode ).after( $( '<br/><p>And the PDOM representation</p>' ) );
    }
  </script>

  <style type="text/css">

    .exampleScene {
      margin: 15px auto;<commit_msg>reference display's accessibleDOMElement rather than by className, see #823<commit_after><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Accessible Content in Scenery</title>

  <link rel="stylesheet" href="../../sherpa/lib/bootstrap-2.2.2.css">
  <link rel="stylesheet" href="../../sherpa/lib/bootstrap-responsive-2.2.2.css">
  <link rel="stylesheet" href="../../sherpa/lib/syntaxhighlighter-3.0.83/shCore.css">
  <link rel="stylesheet" href="../../sherpa/lib/syntaxhighlighter-3.0.83/shThemeDefault.css">
  <link rel="stylesheet" href="../assets/scenery.css">

  <!-- Before loading other things (that might error), create hooks to report errors/loads for continuous testing -->
  <script src="../../aqua/js/pageload-connector.js"></script>

  <!-- jQuery and LoDash are dependencies -->
  <script src="../../sherpa/lib/jquery-2.1.0.min.js"></script>
  <script src="../../sherpa/lib/lodash-4.17.4.min.js"></script>

  <!-- For the styling -->
  <script src="../../sherpa/lib/bootstrap-2.2.2.js"></script>

  <script src="../../sherpa/lib/syntaxhighlighter-3.0.83/shCore.js"></script>
  <script src="../../sherpa/lib/syntaxhighlighter-3.0.83/shBrushJScript.js"></script>
  <script src="../../sherpa/lib/syntaxhighlighter-3.0.83/shBrushXml.js"></script>

  <script type="text/javascript"
          src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

  <!-- Our code, in either the concatenated 'with comments' version or the minified version -->
  <script src="../build/scenery.min.js"></script>


  <script type="text/javascript">
    scenery.Util.polyfillRequestAnimationFrame();

    function docExample( id, draw ) {
      var $container = $( '#' + id );
      var scene = new scenery.Node();
      var display = new scenery.Display( scene, {
        width: $container.width(),
        height: $container.height()
      } );
      $container[ 0 ].appendChild( display.domElement );
      draw( scene, display );
      display.updateDisplay();
      var $code = $( '<pre class="brush: js"></pre>' );
      $code.text( draw.toString().match( /\/\*START\*\/((.|\n)*)\/\*END\*\// )[ 1 ] );
      $container.after( $code );

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

      $code.after( $PDOMcode ).after( $( '<br/><p>And the PDOM representation</p>' ) );
    }
  </script>

  <style type="text/css">

    .exampleScene {
      margin: 15px auto;
{'fraction_non_alphanumeric': 0.21362732694740647, 'fraction_numerical': 0.01626604012289897, 'mean_word_length': 3.1766037735849055, 'pattern_counts': {'":': 0, '<': 95, '<?xml version=': 0, '>': 95, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4000420', 'n_tokens_mistral': 1925, 'n_tokens_neox': 1811, 'n_words': 348}