From 372587d0b9eea955295d90475696e35492e5d862 Mon Sep 17 00:00:00 2001 From: Jesse Date: Mon, 15 Apr 2019 20:03:37 -0400 Subject: [PATCH] generate a11y-view for phetsims/scenery-phet#490 --- area-model-decimals_a11y_view.html | 65 ++++++++++++++++-------------- 1 file changed, 34 insertions(+), 31 deletions(-) diff --git a/area-model-decimals_a11y_view.html b/area-model-decimals_a11y_view.html index 90747ac..033f053 100644 --- a/area-model-decimals_a11y_view.html +++ b/area-model-decimals_a11y_view.html @@ -381,38 +381,41 @@

PDOM & Descriptions for Area Model Decimals

function addLiveObserver( originalElement, listElement ) { var liveObserver = new MutationObserver( function( mutations ) { mutations.forEach( function( mutation ) { - var alertText = mutation.target.textContent; - - // update the text content of the copied element to match the element in the iframe document - // create a list item to add to the alert list - if ( alertText.length > 0 ) { - var listItem = document.createElement( 'li' ); - listItem.style.opacity = 1.0; - listItem.textContent = alertText; - listElement.insertBefore( listItem, listElement.children[ 0 ] ); - - // items fade out as they get older - for ( var j = 0; j < listElement.children.length; j++ ) { - listElement.children[ j ].style.opacity = 1.0 / ( j + 1 ) + 0.25; - } - - // if the list is too large, remove the last items from the list - var childrenArray = Array.prototype.slice.call( listElement.children ); - var fadeArray = childrenArray.slice( 5, childrenArray.length ); - - for ( var i = 0; i < fadeArray.length; i++ ) { - var fadeChild = fadeArray[ i ]; - - var fadeout = function() { - fadeChild.style.opacity = fadeChild.style.opacity * 0.95; - // stop animating and remove child - if ( listElement.contains( fadeChild ) && fadeChild.style.opacity < 0.1 ) { - window.clearInterval( intervalId ); - listElement.removeChild( fadeChild ); - } - }; - var intervalId = window.setInterval( fadeout, 20 ); + if ( mutation.addedNodes.length > 0 ) { + var alertText = mutation.target.textContent; + + // update the text content of the copied element to match the element in the iframe document + // create a list item to add to the alert list + if ( alertText.length > 0 ) { + var listItem = document.createElement( 'li' ); + listItem.style.opacity = 1.0; + listItem.textContent = alertText; + listElement.insertBefore( listItem, listElement.children[ 0 ] ); + + // items fade out as they get older + for ( var j = 0; j < listElement.children.length; j++ ) { + listElement.children[ j ].style.opacity = 1.0 / ( j + 1 ) + 0.25; + } + + // if the list is too large, remove the last items from the list + var childrenArray = Array.prototype.slice.call( listElement.children ); + var fadeArray = childrenArray.slice( 5, childrenArray.length ); + + for ( var i = 0; i < fadeArray.length; i++ ) { + var fadeChild = fadeArray[ i ]; + + var fadeout = function() { + fadeChild.style.opacity = fadeChild.style.opacity * 0.95; + + // stop animating and remove child + if ( listElement.contains( fadeChild ) && fadeChild.style.opacity < 0.1 ) { + window.clearInterval( intervalId ); + listElement.removeChild( fadeChild ); + } + }; + var intervalId = window.setInterval( fadeout, 20 ); + } } } } );