--- 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';
};
}