Allow download as JSON and some UI fixes

- Allow download as JSON. Fixes #13
- Make the title smaller on the popup. Saves space.

Author: napsternxg

src/popup.html

@@ -29,8 +29,13 @@
     <div id="links-wrap">
       <ul id="links"></ul>
     </div>
-    <div id="source">View Source at: <a target="_blank" href="https://github.com/napsternxg/ReadLater">Github</a> | 
-      <a target="_blank" href="http://smexyyweby.wordpress.com/readlater/">FAQ</a></div>
+    <div id="downloadContainer">
+    </div>
+    <div id="source">
+      <a target="_blank" href="https://github.com/napsternxg/ReadLater" title="View source code">Github</a> | 
+      <a target="_blank" href="http://smexyyweby.wordpress.com/readlater/" title="View frequently asked questions">FAQ</a> | 
+      <a id="downloadAsJSON" title="Click to download all the stored links as a JSON file">Download as JSON</a>
+    </div>
     <script src="core.js"></script>
     <script src="popup.js"></script>
   </body>

src/popup.js

@@ -21,6 +21,23 @@ var readLaterApp = (function(readLaterObject){
   var clearBtn = document.getElementById("clearBtn");
   var msg = document.getElementById("message");
   var links = document.getElementById("links");
+  var downloadBtn = document.getElementById("downloadAsJSON");
+  var downloadContainer = document.getElementById('downloadContainer');
+
+  var downloadAsJSON = function(){
+    readLaterObject.getValidSyncItems(function(syncItems){
+      console.log("Downloading items");
+      var downloadDataLink = document.createElement("a");
+      var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(syncItems, 0, 2));
+      downloadDataLink.setAttribute("style", "display: none");
+      downloadDataLink.setAttribute("href", dataStr);
+      downloadDataLink.setAttribute("download", "ReadLater-data.json");
+      
+      downloadContainer.appendChild(downloadDataLink);
+      downloadDataLink.click();
+      downloadDataLink.remove();
+    });
+  };
 
   var getTitle = function(title){
     if (title.length > 50){
@@ -89,6 +106,7 @@ var readLaterApp = (function(readLaterObject){
 
   addBtn.addEventListener("click", addURLFromTab);
   clearBtn.addEventListener("click", clearAll);
+  downloadBtn.addEventListener("click", downloadAsJSON);
 
   var getIcon = function(url) {
     var domain = url.replace('http://', '').replace('https://', '').split(

src/style.css

@@ -4,7 +4,7 @@ body {
 }
 #header h1{
   color: #555;
-  font-size: 32px;
+  font-size: 24px;
   text-transform: uppercase;
   padding: 0;
   margin: 0;
@@ -30,6 +30,12 @@ body {
   clear: left;
 }
 
+#downloadAsJSON{
+  text-decoration: underline;
+  cursor: pointer;
+  cursor: hand;
+}
+
 #links{
   list-style: none;
   padding: 0;