Improve Flash click-to-run demo

Close #367
MicrosoftEdge · May 31, 2017 · d93ff9c · d93ff9c
1 parent bb64d18
commit d93ff9c
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 52 deletions.
diff --git a/flashclicktorun/images/GetAdobeFlashPlayer_icon.png b/flashclicktorun/images/GetAdobeFlashPlayer_icon.png
diff --git a/flashclicktorun/index.html b/flashclicktorun/index.html
@@ -1,48 +1,25 @@
 <!DOCTYPE html>
 <html lang="en-US">
 	<head>
-	<meta charset="utf-8">
-	<title>Flash Click-To-Play Demo</title>
-	<meta name="og:title" content="Flash Click-To-Play">
-	<meta name="description" content="Provide a seamless user experience on sites requiring Adobe Flash.">
-	<meta name="keywords" content="Misc, Flash">
-	<meta name="author" content="erikadoyle">
-    <link rel="stylesheet" href="https://edgeportal.blob.core.windows.net/media/demotemplate.css"/>
-	<link rel="stylesheet" href="styles/demo.css">
-		<script>
-            document.addEventListener("DOMContentLoaded", function() {
-                var hasFlash = false;
-                try {
-                    var objFlash = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
-                    if (objFlash) {
-                        hasFlash = true;
-                    }
-                } catch (e) {
-                    if (navigator.mimeTypes
-                            && navigator.mimeTypes['application/x-shockwave-flash'] != undefined
-                            && navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin) {
-                        hasFlash = true;
-                    }
-                }
-
-                if (hasFlash) {
-                    document.querySelector(".status").textContent = "Enabled";
-                    document.querySelector(".getflash img").style.display = "none";
-                    document.querySelector(".getflash label").style.display = "none";
-                    document.querySelector(".flashbox embed").style.display = "block";
-                }
-            });
-		</script>
+		<meta charset="utf-8">
+		<title>Flash Click-To-Play Demo</title>
+		<meta name="og:title" content="Flash Click-To-Play">
+		<meta name="description" content="Provide a seamless user experience on sites requiring Adobe Flash.">
+		<meta name="keywords" content="Misc, Flash">
+		<meta name="author" content="erikadoyle">
+		<link rel="stylesheet" href="https://edgeportal.blob.core.windows.net/media/demotemplate.css">
+		<link rel="stylesheet" href="styles/demo.css">
 	</head>
 	<body>
-        <h1>Enabling Flash from Microsoft Edge</h1>
-        <div class="flashbox">
-            <div>Flash: <span class="status">Not Enabled</span></div>			
-            <div class="getflash" onclick="window.open('http://get.adobe.com/flashplayer', '_blank')">
-                <label for="flashlink">Click the image to display the browser prompt to enable Flash.</label>
-                <img id="flashlink" src="images/GetAdobeFlashPlayer_icon.png"/>
-            </div>	
-            <embed src="https://helpx.adobe.com/content/dam/help/en/flash-player/assets/tree_grow_small.swf" type="application/x-shockwave-flash">
-        </div> 
+		<h1>Enabling Flash from Microsoft Edge</h1>
+		<div class="flashbox">
+			<div>Flash: <span class="status">Not Enabled</span></div>
+			<div class="getflash">
+				<label for="flashlink">Click the image to display the browser prompt to enable Flash.</label>
+				<img id="flashlink" src="images/GetAdobeFlashPlayer_icon.png"/>
+			</div>
+			<embed src="https://helpx.adobe.com/content/dam/help/en/flash-player/assets/tree_grow_small.swf" type="application/x-shockwave-flash">
+			<script src="scripts/demo.js"></script>
+		</div>
 	</body>
 </html>
diff --git a/flashclicktorun/scripts/demo.js b/flashclicktorun/scripts/demo.js
@@ -0,0 +1,38 @@
+/* global ActiveXObject */
+
+(function () {
+	'use strict';
+
+	document.querySelector('.getflash').addEventListener('click', function () {
+		var otherWindow = window.open();
+
+		otherWindow.opener = null;
+		otherWindow.location = 'https://get.adobe.com/flashplayer';
+
+		return false;
+	});
+
+	document.addEventListener('DOMContentLoaded', function() {
+		var hasFlash = false;
+
+		try {
+			var objFlash = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
+			if (objFlash) {
+				hasFlash = true;
+			}
+		} catch (e) {
+			if (navigator.mimeTypes &&
+				(typeof navigator.mimeTypes['application/x-shockwave-flash'] !== 'undefined') &&
+					navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin) {
+				hasFlash = true;
+			}
+		}
+
+		if (hasFlash) {
+			document.querySelector('.status').textContent = 'Enabled';
+			document.querySelector('.getflash img').style.display = 'none';
+			document.querySelector('.getflash label').style.display = 'none';
+			document.querySelector('.flashbox embed').style.display = 'block';
+		}
+	});
+}());
diff --git a/flashclicktorun/styles/demo.css b/flashclicktorun/styles/demo.css
@@ -1,20 +1,24 @@
 body {
-    margin: 1.5em;
+	margin: 1.5em;
 }
+
 .flashbox {
-    margin: 2em;
+	margin: 2em;
 }
+
 .flashbox label {
-    display: block;
-    font-size: .8em;
-    margin-top: 2em;
+	display: block;
+	font-size: .8em;
+	margin-top: 2em;
 }
+
 .flashbox img {
-    margin: 20px 0;
+	margin: 20px 0;
 }
+
 .flashbox embed {
-    display: none;
-    height: 100px;
-    margin: 20px 0;
-    width: 300px;
-}
+	display: none;
+	height: 100px;
+	margin: 20px 0;
+	width: 300px;
+}