Merged
authorhiroto
Tue, 03 Sep 2013 17:25:41 +0900
changeset 11 14b0ca966bce
parent 10 d5e89a824e6b (current diff)
parent 9 906e4980b912 (diff)
child 12 bcef0693f117
Merged
--- a/README	Tue Sep 03 17:20:08 2013 +0900
+++ b/README	Tue Sep 03 17:25:41 2013 +0900
@@ -18,16 +18,16 @@
     ...
     <script src="js/w3c_talks.js"></script>
     </body>
-# Add metatags for the author, event hashtag and access key, like so:
+# Add metatags for the author and event hashtag, like so:
     <meta name="author" content="Mr Bean">
     <meta name="hashtag" content="#teddyconf2013">
-    <meta name="accesskey" content="abcd1234">
-# Finally put any notes in `data-note` attributes for your chosen slides, like so:
+# Put any notes in `data-note` attributes for your chosen slides, like so:
     <div class="slide" data-note="Teddy bears celebrated their 100th birthday in 2002">
         <h1>How old are teddy bears?</h1>
         
         <p>Teddies celebrated their 100th birthday in 2002</p>
     </div>
+# Finally, when you're ready to start auto-tweeting, click the "Start" button that appears at the top-right of your presentation.
 
 That's it. When you show each slide, any notes you have added will be tweeted to [https://twitter.com/w3c_talks @w3c_talks].
 
--- a/js/w3c_talks.js	Tue Sep 03 17:20:08 2013 +0900
+++ b/js/w3c_talks.js	Tue Sep 03 17:25:41 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 @@
             }
         };
     }
+    
 })();