Added start button to activate tweeting
authorDaniel Davis <ddavis@w3.org>
Tue, 03 Sep 2013 14:39:34 +0900
changeset 8 baec633d179a
parent 7 f99dee75e0ce
child 9 906e4980b912
Added start button to activate tweeting
js/w3c_talks.js
--- a/js/w3c_talks.js	Fri Aug 30 18:29:56 2013 +0900
+++ b/js/w3c_talks.js	Tue Sep 03 14:39:34 2013 +0900
@@ -1,14 +1,77 @@
 (function() {
     'use strict';
     
+    // Polyfill for sessionStorage taken from https://gist.github.com/tagawa/2880273/
+    window.sessionStorage = window.sessionStorage || {
+        length: 0,
+        setItem: function(key, value) {
+            document.cookie = key + '=' + value + '; path=/';
+            this.length++;
+        },
+        getItem: function(key) {
+            var keyEQ = key + '=';
+            var ca = document.cookie.split(';');
+            for (var i = 0, len = ca.length; i < len; i++) {
+                var c = ca[i];
+                while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+                if (c.indexOf(keyEQ) === 0) return c.substring(keyEQ.length, c.length);
+            }
+            return null;
+        },
+        removeItem: function(key) {
+            this.setItem(key, '', -1);
+            this.length--;
+        },
+        clear: function() {
+            // Caution: will clear all persistent cookies as well
+            var ca = document.cookie.split(';');
+            for (var i = 0, len = ca.length; i < len; i++) {
+                var c = ca[i];
+                while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+                var key = c.substring(0, c.indexOf('='));
+                this.removeItem(key);
+            }
+            this.length = 0;
+        },
+        key: function(n) {
+            var ca = document.cookie.split(';');
+            if (n >= ca.length || isNaN(parseFloat(n)) || !isFinite(n)) return null;
+            var c = ca[n];
+            while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+            return c.substring(0, c.indexOf('='));
+        }
+    };
+    
+    // Add start box to top-right of page
+    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;}';
+        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>';
+        document.body.appendChild(ui);
+        
+        // Add functionality to start button
+        var start = document.getElementById('w3c_talks_start');
+        start.onclick = function(event) {
+            window.sessionStorage['accesskey'] = 'asdf1234';
+            start.innerHTML = 'Ready';
+            start.disabled = true;
+            event = event || window.event;
+            var target = event.target || event.srcElement;
+            target.parentElement.className = 'hidden';
+        };
+    }
+
     // Global variables for tweet posting
     var url = 'http://www.vodstock.com/w3c_talks/w3c_talks.php';
     var hashtag = getMetaTag('hashtag');
     var author = getMetaTag('author');
     var title = document.title;
-    var accesskey = getMetaTag('accesskey');
-    // TODO: Find proper way to handle accesskey
-    if (!accesskey) return false;
+    window.sessionStorage['accesskey'] = '';
     
     function getMetaTag(name) {
         var tag = document.querySelector('[name=' + name + ']');
@@ -16,7 +79,7 @@
         try {
             return tag.content;
         } catch(e) {
-            console.log('Unable to get hashtag');
+            console.log('Unable to get ' + name + ' meta tag');
             return '';
         }
     }
@@ -54,21 +117,25 @@
     }
     
     function sendNote(slide) {
-        try {
-            var note = slide.getAttribute('data-note');
-            if (note) {
-                var data = 'note=' + encodeURIComponent(note);
-                data += '&hashtag=' + encodeURIComponent(hashtag);
-                data += '&author=' + encodeURIComponent(author);
-                data += '&title=' + encodeURIComponent(title);
-                data += '&accesskey=' + accesskey;
-                doPost(url, data);
+        if (window.sessionStorage['accesskey']) {
+            try {
+                var note = slide.getAttribute('data-note');
+                if (note) {
+                    var data = 'note=' + encodeURIComponent(note);
+                    data += '&hashtag=' + encodeURIComponent(hashtag);
+                    data += '&author=' + encodeURIComponent(author);
+                    data += '&title=' + encodeURIComponent(title);
+                    data += '&accesskey=' + window.sessionStorage['accesskey'];
+                    doPost(url, data);
+                }
+            } catch(e) {
+                console.log('Unable to send note');
             }
-        } catch(e) {
-            console.log('Unable to send note');
         }
     }
     
+    makeUI();
+    
     // The following is for Slidy:
     if (window.w3c_slidy) {
         // Store original "show_slide" method for later
@@ -98,4 +165,5 @@
             }
         };
     }
+    
 })();