Advertisement
Guest User

Untitled

a guest
Nov 25th, 2015
74
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.80 KB | None | 0 0
  1. <!-- background:
  2. visibility property of style attribute of spinner changes to "visible" when it is required.
  3. We want to monitor this style change, so that we can keep track of how long the spinner is being shown.
  4. If the spinner is visible for greater than 5 seconds, we would ideally want the screen reader to read something to convey
  5. to the user that something is happening in the background. We would also want the screen-reader to announce the completion
  6. when the spinner is closed.
  7.  
  8. Note: This is a very simple implementation where there is no page refresh/ reload.
  9. All we are doing is loading something extra on the page (within the window) and a spinner is visible while that is happening.
  10. -->
  11. <div id="Spinner" style="visibility:hidden; right: 0px;" >
  12. <img id="processing" alt="Processing... please wait" src="spinner.gif"/>
  13. </div>
  14. <div id="Delay_message" style="visibility: hidden; position:absolute;left:-10000px;top:auto; width:1px; height:1px;overflow:hidden;" aria-live="rude" aria-atomic="true">
  15. &nbsp;
  16. </div>
  17. <script type="text/javascript">
  18. var inside =false;
  19. callbackOnDelay= function(){
  20. var str = document.getElementById("Spinner").style.visibility;
  21. if(str.indexOf("visible")!=-1){
  22. document.getElementById("Delay_message").style.visibility="visible";
  23. document.getElementById("Delay_message").innerHTML="<span>Processing, please wait </span>";
  24. inside= true; //we want some text to be read, which is only when the mutation observed a long time gap.
  25. }
  26. }
  27. callback_end= function(){
  28. var str = document.getElementById("Spinner").style.visibility;
  29. if(str.indexOf("visible")==-1){
  30. document.getElementById("Delay_message").style.visibility="visible";
  31. document.getElementById("Delay_message").innerHTML="<span>Loading complete</span>";
  32. //we don't want the text to be there anymore. 0.5 seconds should be decent for Loading complete to be read
  33. setTimeout(initialize, 500);
  34. }
  35. }
  36. initialize = function(){
  37. //after 0.5 second time gap, initialize the Delaymessage contents to empty, so that we can start again.
  38. document.getElementById("Delay_message").innerHTML="";
  39. inside=false;
  40. }
  41.  
  42. var targetemptyspinobj = document.getElementById("Spinner");
  43. var observer = new MutationObserver(function(mutations) {
  44. mutations.forEach(function(mutationRecord) {
  45. var str = targetemptyspinobj.style.visibility;
  46. if(str.indexOf("visible")!=-1) // visible i.e. spinning icon may/may not take >5 seconds, but set a callback once loading icon is visible.
  47. setTimeout(callbackOnDelay, 5000); //current time + 5 seconds, else it will only happen at 5th second
  48. else if(inside) // hidden.
  49. callback_end();
  50. });
  51. });
  52.  
  53. var config = { attributes : true, attributeFilter : ['style']};
  54. if(targetemptyspinobj)observer.observe(targetemptyspinobj, config);
  55.  
  56.  
  57. // Testing
  58. window.onload =function(){
  59. document.getElementById("Spinner").style.visibility="visible";
  60. };
  61.  
  62. callback_Hide_Spinner= function(){
  63. var str = document.getElementById("Spinner").style.visibility;
  64. if(str.indexOf("visible")!=-1){
  65. document.getElementById("Spinner").style.visibility="hidden";
  66. console.log("Hiding spinner");
  67.  
  68. }
  69. }
  70. callback_Show_Spinner= function(){
  71. var str = document.getElementById("Spinner").style.visibility;
  72. if(str.indexOf("visible")==-1){
  73. document.getElementById("Spinner").style.visibility="visible";
  74. console.log("Showing spinner");
  75. document.getElementById("Delay_message").style.visibility="hidden";
  76. document.getElementById("Delay_message").innerHTML="";
  77. }
  78. }
  79. //hide spinner at 10 seconds from page load
  80. setTimeout(callback_Hide_Spinner, 10000);
  81. //show spinner at 15 seconds from page load.
  82. setTimeout(callback_Show_Spinner, 15000);
  83. //hide spinner at 30 seconds from page load
  84. setTimeout(callback_Hide_Spinner, 30000);
  85.  
  86. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement