Add "checkDiffs", "showDiff", message from Popup to background.

Author: eddie168

background.js

@@ -12,6 +12,17 @@ chrome.extension.onMessage.addListener(function(msg, _, sendResponse) {
     chrome.storage.sync.get(null, function (items) {
       sendResponse(items);
     });
+  } else if (msg.checkDiffs) {
+    console.log("checkDiffs not implement");
+    sendResponse('Not implement');
+  } else if (msg.removeDiff) {
+    console.log("msg.removeDiff");
+    chrome.storage.sync.remove(msg.url, function () {
+      sendResponse("Item removed");
+    });
+  } else if (msg.showDiff) {
+    console.log("showDiff not implement");
+    sendResponse('showDiff Not implement');
   }
 
   return true;
@@ -30,7 +41,7 @@ function addPage(msg, sendResponse) {
       console.log(xhr.responseText);
       console.log("XML: ", xhr.responseXML);
 
-      resultMsg = "Page saved " + (getPrev(url) ? "<b>again...</b>" : "!");
+      resultMsg = "Page saved " + (getPrev(url) ? "again..." : "!");
 
       store(url, xhr.responseText);
 
@@ -50,14 +61,15 @@ function addPage(msg, sendResponse) {
       var lengthByte = 100;
       var hash = "ABCDEFG";
       var checkIntervalSecond = 600;
-      var item = {
-        url: {
+      var changed = false;
+      var item= {};
+      item[url] = {
           title: msg.title,
           dateAdd: Date.now(),
           lengthByte: lengthByte,
           hash: hash,
-          checkIntervalSecond: checkIntervalSecond
-        }
+          checkIntervalSecond: checkIntervalSecond,
+          changed: changed
       };
       chrome.storage.sync.set(item);
 

js/list.js

@@ -1,20 +1,81 @@
-/*global chrome:true */
+/*global chrome,webkitNotifications:true */
 
 $(function () {
   // Get all urls store in storage.sync
   // item { key: value}
   // { "http://twitter.github.com/bootstrap/index.html":
   //      {title:"Twitter Bootstrap", dateAdd:1350049430341, length:10, hash:"EEEEEEEE", checkInterval:10}
   //  }
+
+  function removeListItem(url) {
+    chrome.extension.sendMesssage({removeDiff:true, url: url}, function(response) {
+      if (response) {
+        var notification = webkitNotifications.createNotification(
+          'icon.png',  // icon url - can be relative
+          'WebPageDiff',  // notification title
+          response  // notification body text
+        );
+        notification.show();
+      }
+      document.location.reload(true);
+    });
+  }
+
   chrome.extension.sendMessage({getList: true}, function(list) {
-    var markup = '<div class="well well-large"><ul>';
+    var markup = '';
+    markup = '<div class="span10 offset1">';
+    markup += '<table class="table table-condensed table-striped table-hover">';
     for (var item in list) {
-      markup += '<li>';
-      markup += '<a href="' + list[item] + '">' + list[item].title + '</a>';
-      markup += '</li>';
+      markup += '<tr>';
+      markup += '<td>';
+      if (list[item].changed) {
+        markup += '<i class="icon-star"></i>';
+      } else {
+        markup += '<i class="icon-minus"></i>';
+      }
+      markup += ' <a class="clickListItem" href="' + item + '">' + list[item].title + '</a></td>';
+      markup += '<td><a class="btn removeListItem" href="' + item + '"><i class="icon-remove-sign"></i> Remove</a></td>';
+      markup += '</tr>';
     }
-    markup += '</ul></div>';
+    markup += '</table>';
+    markup += '</div>';
     $('#listContent').html(markup);
   });
+
+    $('body').on('click', function(evt) {
+      //evt.preventDefault();
+      //evt.stopPropagation();
+      if ($(evt.currentTarget).hasClass('clickListItem')) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        console.log('a.clickListItem');
+        //chrome.tabs.create({url: $(evt.document.location.reload(true)currentTarget).attr("href")});
+      }
+    });
+
+    $('body').on('click', function(evt) {
+      //evt.preventDefault();
+      //evt.stopPropagation();
+      console.log("removeListItem");
+      if ($(evt.currentTarget).hasClass('removeListItem')) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        //removeListItem($(evt.currentTarget).attr("href"));
+        var url = $(evt.currentTarget).attr("href");
+        chrome.extension.sendMesssage({removeDiff:true, url: url}, function(response) {
+          /*
+          if (response) {
+            var notification = webkitNotifications.createNotification(
+              'icon.png',  // icon url - can be relative
+              'WebPageDiff',  // notification title
+              response  // notification body text
+            );
+            notification.show();
+          }
+          document.location.reload(true);
+          */
+        });
+      }
+    });
 });
 

js/popup.js

@@ -32,4 +32,24 @@ $(function ($) {
     window.close();
     */
   });
+  $('#checkDiffs').on('click', function (evt) {
+    var msg = { checkDiffs: true };
+    chrome.extension.sendMessage(msg, function(response) {
+      window.close();
+    });
+  });
+  $('#showDiff').on('click', function (evt) {
+    var msg = { showDiff: true };
+    chrome.extension.sendMessage(msg, function(response) {
+      if (response) {
+        var notification = webkitNotifications.createNotification(
+          'icon.png',  // icon url - can be relative
+          'WebPageDiff',  // notification title
+          response  // notification body text
+        );
+        notification.show();
+      }
+      window.close();
+    });
+  });
 })(jQuery);

list.html

@@ -11,9 +11,9 @@
   <body>
     <div class="container">
       <div class="row">
-        <h2>WebPageDiff - List Manager</h2>
+        <div class="well"><h2>WebPageDiff - List Manager</h2></div>
       </div>
-      <div id="listContent">
+      <div class="row" id="listContent">
       </div>
     </div>
   </body>

popup.html

@@ -27,7 +27,13 @@ <h4>WebPageDiff</h4>
         <div class="clickable" id="addPage"><i class="icon-plus-sign"></i> Add Page</div>
       </li>
       <li>
-        <div class="clickable" id="manageList"><i class=" icon-list"></i> Manage List</div>
+        <div class="clickable" id="showDiff"><i class="icon-eye-open"></i> Show Diff</div>
+      </li>
+      <li>
+        <div class="clickable" id="checkDiffs"><i class="icon-refresh"></i> Check Diffs</div>
+      </li>
+      <li>
+        <div class="clickable" id="manageList"><i class="icon-list"></i> Manage List</div>
       </li>
     </ul>
   </body>