Accessibility: pause/play controls for homepagae hero graphics

microsoft · Aug 14, 2020 · 743d972 · 743d972
1 parent a5fd0ff
commit 743d972
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 24 deletions.
diff --git a/_dev/js/main.js b/_dev/js/main.js
@@ -310,7 +310,6 @@ APP.Accordion = {
 // ---------------------------------------------------------------------
 
 APP.Draw = {
-
     init: function() {
         if( $('#draw-svg').length ) {
             this.bind();
@@ -321,22 +320,35 @@ APP.Draw = {
 
     bind: function() {
 
-
         var svg = $('#draw-svg'),
 			path = $('#draw-svg path'),
             rect = $(' #draw-svg rect'),
             circle = $('#draw-svg circle'),
 			done = false,
             rotate = $('.rotate'),
-            square = $('.sqaure rect');
+            square = $('.square rect'),
+            heroAccessibilityControls = $('#hero-accessibility-controls');
 
-        //console.log(path.length);
-		gsap.fromTo(circle, 0, {drawSVG:0}, {duration: 0, drawSVG:false});
+        var activeGsapHandlers = [];
 
+        gsap.fromTo(circle, 0, {drawSVG:0}, {duration: 0, drawSVG:false});
         gsap.fromTo(rect, 0, {drawSVG:0}, {duration: 0, drawSVG:false});
 
-		function detect(){
-			//if( svg.hasClass('in-view')) {
+        if (heroAccessibilityControls.length) {
+            heroAccessibilityControls.on('hero-pause', function () {
+                activeGsapHandlers.forEach(function (tween) {
+                    tween.pause();
+                });
+            });
+            heroAccessibilityControls.bind('hero-resume', function () {
+                activeGsapHandlers.forEach(function (tween) {
+                    tween.resume();
+                });
+            });
+        }
+
+        function detect(){
+            //if( svg.hasClass('in-view')) {
 				if(done) return;
 
 				setTimeout(function(){
@@ -347,29 +359,23 @@ APP.Draw = {
 			//	done = true;
 			//}
 		}
-
         function randNum(min, max) { // min and max included
           return Math.floor(Math.random() * (max - min + 1) + min);
         }
-        gsap.to(rotate, 10, {rotation:"360", ease:Linear.easeNone, repeat:-1, transformOrigin:"50% 50%"});
-
+        activeGsapHandlers.push(gsap.to(rotate, 10, {rotation:"360", ease:Linear.easeNone, repeat:-1, transformOrigin:"50% 50%"}));
         square.each(function(){
             var el = $(this),
                 speed = randNum(.5, 4),
                 scale = randNum(0, .5);
-
-            gsap.to(el, speed, {scaleX:scale, ease:Linear.easeNone, repeat:-1, transformOrigin:"50% 50%", yoyo: true});
+            activeGsapHandlers.push(gsap.to(el, speed, {scaleX:scale, ease:Linear.easeNone, repeat:-1, transformOrigin:"50% 50%", yoyo: true}));
         });
 
-
-
 		$(document).ready(function(){
 			detect();
 		});
 
 		// window.addEventListener('scroll', detect);
         // window.addEventListener('resize', detect);
-
     }
 };
 

diff --git a/_includes/homepage.js b/_includes/homepage.js
@@ -1,5 +1,32 @@
 var $ = jQuery;
 
+var resumeAction = $('#resume-graphics');
+var pauseAction = $('#pause-graphics');
+var pageHeroAccessibilityControls = $('#hero-accessibility-controls');
+
+var paused = true;
+
+function pause() {
+  paused = true;
+  pauseAction.hide();
+  resumeAction.show();
+  pageHeroAccessibilityControls.trigger("hero-pause");
+  return false;
+}
+
+function resume() {
+  paused = false;
+  resumeAction.hide();
+  pauseAction.show();
+  pageHeroAccessibilityControls.trigger("hero-resume");
+  return false;
+}
+
+resumeAction.click(resume);
+pauseAction.click(pause);
+
+resume(); // startup
+
 var workerFrequencyMs = 500;
 var startupDelayMs = 50;
 var firstDisplayDelayMs = 1700;
@@ -176,9 +203,11 @@ function onResize() {
 }
 
 function worker() {
-  var availableSquare = tryGetAvailableSquare();
-  if (availableSquare !== undefined) {
-    featureNextAvatar(availableSquare);
+  if (!paused) {
+    var availableSquare = tryGetAvailableSquare();
+    if (availableSquare !== undefined) {
+      featureNextAvatar(availableSquare);
+    }
   }
   setTimeout(worker, workerFrequencyMs);
 }

diff --git a/_includes/open-source-svg.html b/_includes/open-source-svg.html
@@ -803,7 +803,7 @@
 	<g>
 		<circle fill="#50E6FF" cx="137" cy="329" r="40"/>
 	</g>
-	<g class="sqaure">
+	<g class="square">
 		<rect x="1" y="367" fill="#4F6BED" width="80" height="2"/>
 		<rect x="1" y="361" fill="#4F6BED" width="80" height="2"/>
 		<rect x="1" y="355" fill="#4F6BED" width="80" height="2"/>

diff --git a/assets/js/main.js b/assets/js/main.js
diff --git a/index.html b/index.html
@@ -30,13 +30,25 @@ <h1 class="h1-xl mb-6" data-animate-in="fade" data-animate-in-delay="100">
                         {% include open-source-svg.html %}
                     </figure>
                     <div id="hero-avatars" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"></div>
+                    <div id="hero-accessibility-controls" style="position: absolute; right: 0; bottom: 0;">
+                        <div style="position: relative; margin-bottom: -30px;" >
+                            <a  class="refresh"
+                                style="color: #fff"
+                                id="pause-graphics"
+                                href="#"
+                                title="Pause animation">Pause {% octicon square-fill %}</a>
+                            <a  class="refresh"
+                                style="color: #fff"
+                                id="resume-graphics"
+                                href="#"
+                                title="Resume animation">Resume {% octicon triangle-right %}</a></p>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
 
-
-
     <div class="wrapper pt-6 pb-4 mt-6 mb-4">
         <div class="text-center mb-6" data-animate-in="up" data-animate-in-delay="200">
             <h2 class="h3">Projects</h2>
@@ -127,12 +139,12 @@ <h3 class="h3">Flexible</h3>
     -->
 
 
-
     <hr />
 
 
     <div class="split-content text-white">
-        <div class="split-content__content split-content__content--left">
+        <!-- TEMP: overriding color for more contrast -->
+        <div class="split-content__content split-content__content--left" style="background-color: #0070f2;">
             <div data-animate-in="fade" data-animate-in-delay="200">
                 <h2 class="mb-4">
                     <span class="h5">Microsoft's communities</span>