Added form for access key in popup dialog box
authorDaniel Davis <ddavis@w3.org>
Wed, 04 Sep 2013 11:06:37 +0900
changeset 31 8fd44ed8dcaa
parent 30 47439b4836ac
child 32 96a1e4c25017
Added form for access key in popup dialog box
js/w3c_talks.js
--- a/js/w3c_talks.js	Wed Sep 04 08:48:03 2013 +0900
+++ b/js/w3c_talks.js	Wed Sep 04 11:06:37 2013 +0900
@@ -52,24 +52,27 @@
     function makeUI() {
         // Create CSS for start box
         var style = document.createElement('style');
-        style.innerHTML = '#w3c_talks {background:rgba(0, 0, 0, 0.7); border-radius:0 0 0 1em; color:#fff; display:inline-block; opacity:1; padding:0.5em 1em 1em; position:absolute; right:0; text-align:center; top:0; z-index:1000;} #w3c_talks.hidden {opacity:0; -webkit-transition:3s; -moz-transition:3s; -ms-transition:3s; -o-transition:3s; transition:3s;} #w3c_talks_start {font-weight:bold; padding:0.5em 1em;} #w3c_talks_start:hover, #w3c_talks_start:focus {color:blue; cursor:pointer;}';
+        style.innerHTML = '#w3c_talks {background:rgba(0, 0, 0, 0.7); border-radius:0 0 0 1em; color:#fff; display:inline-block; opacity:1; padding:0.5em 1em 1em; position:absolute; right:0; text-align:center; top:0; z-index:1000;} #w3c_talks.hidden {opacity:0; -webkit-transition:3s; -moz-transition:3s; -ms-transition:3s; -o-transition:3s; transition:3s;} #w3c_talks_start {display:block; font-weight:bold; margin:0.5em; padding:0.5em 1em; width:100%;} #w3c_talks_start:hover, #w3c_talks_start:focus {color:blue; cursor:pointer;}';
         document.getElementsByTagName('head')[0].appendChild(style);
         
         // Create and append start box
         var ui = document.createElement('ui');
-        ui.innerHTML = '<div id="w3c_talks"> <p>W3C talks</p> <button id="w3c_talks_start">Start</button> </div>';
+        ui.innerHTML = '<div id="w3c_talks"> <p>W3C talks</p> <form id="w3c_talks_form"> <label for="w3c_talks_key">Access key:</label> <input type="text" id="w3c_talks_key"/> <input type="submit" id="w3c_talks_start" value="Start"/> </form> </div>';
         document.body.appendChild(ui);
         
         // Add functionality to start button
         window.sessionStorage['accesskey'] = '';
-        var start = document.getElementById('w3c_talks_start');
-        start.onclick = function(event) {
-            window.sessionStorage['accesskey'] = 'ACCESS KEY HERE!';
-            start.innerHTML = 'Ready';
-            start.disabled = true;
+        var form = document.getElementById('w3c_talks_form');
+        form.onsubmit = function(event) {
             event = event || window.event;
+            event.preventDefault();
             var target = event.target || event.srcElement;
-            target.parentElement.className = 'hidden';
+            // Disable form button
+            target.children['w3c_talks_start'].value = 'Ready';
+            target.children['w3c_talks_start'].disabled = true;
+            // Set access key and hide UI
+            window.sessionStorage['accesskey'] = target.children['w3c_talks_key'].value;
+            document.getElementById('w3c_talks').className = 'hidden';
         };
     }