Listen for bounds changes with MutationObserver, see #41

phetsims · Oct 11, 2016 · 28f40b2 · 28f40b2
1 parent b608a7e
commit 28f40b2
Showing 1 changed file with 88 additions and 0 deletions.
diff --git a/accessibility/tests/dom-bounds/mutation-observer-test.html b/accessibility/tests/dom-bounds/mutation-observer-test.html
@@ -0,0 +1,88 @@
+<HTML>
+<body>
+   <H1>Testing changes to DOM element bounds using MutationObserver</H1>
+   <p id='test-subject'>I am going to mess with this element. :P</p>
+
+   <button onclick="changeContent()" id='content-button'>Change text content</button>
+   <button onclick="changeAttributes()" id='attribute-button'>Change attributes</button>
+
+</body>
+
+<script>
+
+  // my own resize sensor using a MutationObserver
+  function ResizeSensor( element, callback ) {
+
+    // create the observer instance
+    var observer = new MutationObserver( function( mutations ) {
+      for( var i = 0; i < mutations.length; i++ ) {
+        console.log( 'mutation type: ' + mutations[ i ].type );
+        callback();
+      };
+    } );
+
+    // configuration for the observer
+    var config = { attributes: true, childList: true, characterData: true };
+
+    // pass in the element as well as the configuration to the observer
+    observer.observe( element, config );
+
+    // stop listening if you wish
+    this.disconnect = function() {
+      observer.disconnect();
+    };
+  }
+
+  // completely random set of sentences
+  // found at https://cockatooscreeching.wordpress.com/2014/05/29/a-list-of-completely-random-sentences/
+  var sentences = [
+    "The quick brown fox jumps over the lazy dog.",
+    "My Mum tries to be cool by saying that she likes all the same things that I do.",
+    "If the Easter Bunny and the Tooth Fairy had babies would they take your teeth and leave chocolate for you?",
+    "A purple pig and a green donkey flew a kite in the middle of the night and ended up sunburnt.",
+    "What was the person thinking when they discovered cow’s milk was fine for human consumption… and why did they do it in the first place!?",
+    "Last Friday in three week’s time I saw a spotted striped blue worm shake hands with a legless lizard.",
+    "Wednesday is hump day, but has anyone asked the camel if he’s happy about it?",
+    "If Purple People Eaters are real… where do they find purple people to eat?",
+    "A song can make or ruin a person’s day if they let it get to them.",
+    "Sometimes it is better to just walk away from things and go back to them later when you’re in a better frame of mind.",
+    "Writing a list of random sentences is harder than I initially thought it would be.",
+    "Where do random thoughts come from?",
+    "Lets all be unique together until we realise we are all the same.",
+    "I will never be this young again. Ever. Oh damn… I just got older.",
+    "If I don’t like something, I’ll stay away from it.",
+    "I love eating toasted cheese and tuna sandwiches.",
+    "If you like tuna and tomato sauce- try combining the two. It’s really not as bad as it sounds.",
+    "Someone I know recently combined Maple Syrup & buttered Popcorn thinking it would taste like caramel popcorn. It didn’t and they don’t recommend anyone else do it either.",
+    "Sometimes, all you need to do is completely make an ass of yourself and laugh it off to realise that life isn’t so bad after all.",
+    "When I was little I had a car door slammed shut on my hand. I still remember it quite vividly.",
+    "The clock within this blog and the clock on my laptop are 1 hour different from each other.",
+    "I want to buy a onesie… but know it won’t suit me.",
+    "I was very proud of my nickname throughout high school but today- I couldn’t be any different to what my nickname was.",
+    "I currently have 4 windows open up… and I don’t know why.",
+    "I often see the time 11:11 or 12:34 on clocks.",
+    "This is the last random sentence I will be writing and I am going to stop mid-sent"
+  ];
+
+  var contentButton = document.getElementById( 'content-button' );
+  var attributeButton = document.getElementById( 'attribute-button' );
+
+  var testSubject = document.getElementById( 'test-subject' );
+  testSubject.style.position = 'absolute';
+
+  var changeContent = function() {
+    var randomString = sentences[ Math.floor( Math.random() * sentences.length ) ];
+    testSubject.textContent = randomString;
+  }
+
+  var changeAttributes = function() {
+    // testSubject.style.width = Math.random() * 1500;
+    var alignment = testSubject.getAttribute( 'align' ) === 'left' ? 'right' : 'left';
+    testSubject.setAttribute( 'align', alignment );
+  }
+
+  // add a resize observer to the element
+  testSubject.resizeSensor = new ResizeSensor( testSubject, function() { console.log( testSubject.clientWidth ) } );
+
+</script>
+</HTML>