Nw

index.html

@@ -120,11 +120,23 @@
       <!-- collection categories -->
         <div class="container">
 
-          <div class="row">
-            <button type="button" class="btn btn-danger col-xs-3 col-sm-3 col-md-3"><div class="collectionIcon"><img src="img/keeper_wh.svg" alt="keeper icon"></div><p class="collectionText">Keeper</p></button>
-            <button type="button" class="btn btn-primary col-xs-3 col-sm-3 col-md-3"><div class="collectionIcon"><img src="img/surfing_wh.svg" alt="surfing icon"></div><p class="collectionText">Surfing</p></button>
-            <button type="button" class="btn btn-warning col-xs-3 col-sm-3 col-md-3"><div class="collectionIcon"><img src="img/gonna_wh2.svg" alt="gonna icon"></div><p class="collectionText">Gonna</p></button>
-            <button type="button" class="btn btn-success col-xs-3 col-sm-3 col-md-3"><div class="collectionIcon"><img src="img/maybe_wh.svg" alt="maybe icon"></div><p class="collectionText">Maybe</p></button>
+          <div class="row collections">
+            <button type="button" data-collection="keeper" class="btn btn-danger col-xs-3 col-sm-3 col-md-3">
+              <div class="collectionIcon"><img src="img/keeper_wh.svg" alt="keeper icon"></div>
+              <p class="collectionText">Keeper</p>
+            </button>
+            <button type="button" data-collection="surfing" class="btn btn-primary col-xs-3 col-sm-3 col-md-3">
+              <div class="collectionIcon"><img src="img/surfing_wh.svg" alt="surfing icon"></div>
+              <p class="collectionText">Surfing</p>
+            </button>
+            <button type="button" data-collection="gonna" class="btn btn-warning col-xs-3 col-sm-3 col-md-3">
+              <div class="collectionIcon"><img src="img/gonna_wh2.svg" alt="gonna icon"></div>
+              <p class="collectionText">Gonna</p>
+            </button>
+            <button type="button" data-collection="maybe" class="btn btn-success col-xs-3 col-sm-3 col-md-3">
+              <div class="collectionIcon"><img src="img/maybe_wh.svg" alt="maybe icon"></div>
+              <p class="collectionText">Maybe</p>
+            </button>
           </div>
 
         </div>

js/drag_drop.js

@@ -1,4 +1,17 @@
 $(document).ready(function() {
+
+    var container = $('#bin');
+
+    $('.collections button').on('click', function(){
+      var collection = $(this).data('collection');
+      var books = getBooks(collection);
+
+      container.empty();
+
+      renderAll(books, container);
+    });
+
+
     var dropHandler = function (event, ui) {
         var $this = $(this);
         var thumb = ui.draggable.find("a.thumbnail");
@@ -8,32 +21,8 @@ $(document).ready(function() {
         };
 
         /* Need JSON object associated with each tile to store in local storage */
-        var collection = null;
-        if ($this.hasClass("btn-danger")) {
-            thumb.addClass("danger");
-            collection = "keeper";    //setting up a key for each collection
-        } else if ($this.hasClass("btn-primary")) {
-            thumb.addClass("primary");
-            collection = "surfing";
-        } else if ($this.hasClass("btn-warning")) {
-            thumb.addClass("warning");
-            collection = "gonna";
-        } else if ($this.hasClass("btn-success")) {
-            thumb.addClass("success");
-            collection = "maybe";
-        }
-        var library = localStorage[collection];  //make into a function in local_storage.js
-        if (! library){
-            library = {};
-        } else {
-            library = JSON.parse(library);
-        }
-        var id = ui.draggable.data("id");
-        var book = cache[id];
-        library[id] = book;
-        localStorage[collection] = JSON.stringify(library);
-        //console.log(ui, this, ui.draggable.data("id"), cache[ui.draggable.data("id")]);
-        console.log(localStorage);
+        var collection = $this.data('collection');
+        setBook(ui.draggable.data('book'), collection);
     }
     dragOptions = {
         cursor: "move",
@@ -49,5 +38,39 @@ $(document).ready(function() {
 });
 
 
+function getBooks(collection) {
+  var books = getItem(collection) || [];
+  return books.map(function(id){
+    return getItem(id);
+  });
+}
+
+function setBook(book, collection) {
+    var cached = getItem(book.id);
+    if(!cached) setItem(book.id, book);
+
+    if(collection) {
+      var group = getItem(collection);
+      if(!group) group = [];
+      if(!~group.indexOf(book.id)) group.push(book.id); // only add new books.
+      setItem(collection, group);
+    }
+}
+
+
+function setItem(id, data) {
+  localStorage.setItem(id, JSON.stringify(data));
+}
+
+function getItem(id) {
+  var data = localStorage.getItem(id);
+  if(!data) return null;
+  try {
+    data = JSON.parse(data)
+  } catch(e) {
+    data = null;
+  }
+  return data;
+}
 
 

js/render_books.js

@@ -1,17 +1,19 @@
 var cache = {};                                   //cache is available everywhere
-var render = function(book, bin) {
-    var id = book.id;
-    cache[id] = book;
+var render = function(book, container) {
+    // var id = book.id;
+    // cache[id] = book;
     var html =
-        '<div class="col-xs-12 col-sm-6 col-md-3 tile clearfix" >' +
+        '<div class="col-xs-12 col-sm-6 col-md-3 tile clearfix">' +
         '<a href="#" class="thumbnail">' + 
         '<img src="'+book.volumeInfo.imageLinks.smallThumbnail+'" alt="..." style="height: 130px; width: auto; overflow: hidden;">' +
         '<p class="text-center title" style="font-size:10px; white-space: nowrap; overflow:hidden;"><strong>' +book.volumeInfo.title + '</strong></p>' +
         '<p class="text-center authors"style="font-size:10px; white-space: nowrap; overflow:hidden;">' + book.volumeInfo.authors[0] + '</p>' +
         '</a>' +
         '</div>';
 
-    $(html).data("id", id).appendTo(bin);
+    $(html)
+        .data("book", book)
+        .appendTo(container);
 
 }
 var renderAll = function(books, container) {                      //calling a method