fetch blogviews from cms database and populate based on presumed schema

6 files changed, 174 insertions, 4 deletions

diff --git a/StoneIsland/www/js/index.js b/StoneIsland/www/js/index.js
index 5f9ca688..12bc089c 100644
--- a/StoneIsland/www/js/index.js
+++ b/StoneIsland/www/js/index.js
@@ -2,6 +2,7 @@ var app = (function(){
   var app = {}
   
   app.init = function(){
+	  app.blog = new BlogView ()
 	  app.archive = new ArchiveView ()
 	  app.hub = new HubView ()
 	  app.story = new StoryView ()
diff --git a/StoneIsland/www/js/lib/blogs/ArchiveView.js b/StoneIsland/www/js/lib/blogs/ArchiveView.js
index 742ee0f2..79139054 100644
--- a/StoneIsland/www/js/lib/blogs/ArchiveView.js
+++ b/StoneIsland/www/js/lib/blogs/ArchiveView.js
@@ -8,13 +8,25 @@ var ArchiveView = View.extend({
   
   initialize: function(){
     this.$content = this.$(".content")
+    this.$loader = this.$(".loader")
   },
 
   show: function(){
     document.body.className = "archive"
   },
 
-  populate: function(){
+  populate: function(data){
+    this.data = data
+    this.$loader.hide()
+    this.$content.empty()
+    this.data.forEach(function(row){
+      var t = this.template.replace({{image}}, row.image.url)
+                           .replace({{code}}, row.code)
+                           .replace({{title}}, row.title)
+                           .replace({{body}}, row.body)
+      this.$content.append(t)
+    }.bind(this))
   },
 
+
 })
\ No newline at end of file
diff --git a/StoneIsland/www/js/lib/blogs/BlogView.js b/StoneIsland/www/js/lib/blogs/BlogView.js
new file mode 100644
index 00000000..bd43c6aa
--- /dev/null
+++ b/StoneIsland/www/js/lib/blogs/BlogView.js
@@ -0,0 +1,34 @@
+var BlogView = View.extend({
+
+  data: null,
+  loaded: false,
+  initialize: function(){
+    this.loader = new Loader ()
+    this.fetch()
+  },
+  
+  fetch: function(){
+    $.ajax({
+      method: "GET",
+      url: "http://stone.sup.land/db.json",
+      success: this.success.bind(this),
+      cache: true,
+    })
+  },
+  
+  success: function(data){
+    this.loaded = true
+    this.data = data
+    // preload images
+    this.loader.preloadImage(data.archive[0].image.url, function(img){
+      app.archive.populate(data.archive)
+    })
+    this.loader.preloadImage(data.hub[0].image.url, function(img){
+      app.hub.populate(data.hub)
+    })
+    this.loader.preloadImage(data.story[0].image.url, function(img){
+      app.story.populate(data.story)
+    })
+  },
+
+})
\ No newline at end of file
diff --git a/StoneIsland/www/js/lib/blogs/HubView.js b/StoneIsland/www/js/lib/blogs/HubView.js
index 430464b1..ce035c7d 100644
--- a/StoneIsland/www/js/lib/blogs/HubView.js
+++ b/StoneIsland/www/js/lib/blogs/HubView.js
@@ -8,13 +8,28 @@ var HubView = View.extend({
   
   initialize: function(){
     this.$content = this.$(".content")
+    this.$loader = this.$(".loader")
   },
 
   show: function(){
     document.body.className = "hub"
   },
 
-  populate: function(){
+  populate: function(data){
+    this.data = data
+    this.$loader.hide()
+    this.$content.empty()
+    this.data.forEach(function(row){
+      var t = this.template.replace({{image}}, row.image.url)
+                           .replace({{date}}, row.date)
+                           .replace({{code}}, row.code)
+                           .replace({{title}}, row.title)
+                           .replace({{subtitle}}, row.subtitle)
+                           .replace({{link}}, row.link)
+                           .replace({{body}}, row.body)
+      this.$content.append(t)
+    }.bind(this))
   },
 
+
 })
\ No newline at end of file
diff --git a/StoneIsland/www/js/lib/blogs/StoryView.js b/StoneIsland/www/js/lib/blogs/StoryView.js
index ed46af31..4a825c8a 100644
--- a/StoneIsland/www/js/lib/blogs/StoryView.js
+++ b/StoneIsland/www/js/lib/blogs/StoryView.js
@@ -8,13 +8,24 @@ var StoryView = View.extend({
   
   initialize: function(){
     this.$content = this.$(".content")
+    this.$loader = this.$(".loader")
   },
 
   show: function(){
     document.body.className = "story"
   },
-
-  populate: function(){
+  
+  populate: function(data){
+    this.data = data
+    this.$loader.hide()
+    this.$content.empty()
+    this.data.forEach(function(row){
+      var t = this.template.replace({{image}}, row.image.url)
+                           .replace({{date}}, row.date)
+                           .replace({{title}}, row.title)
+                           .replace({{body}}, row.body)
+      this.$content.append(t)
+    }.bind(this))
   },
 
 })
\ No newline at end of file
diff --git a/StoneIsland/www/js/vendor/loader.js b/StoneIsland/www/js/vendor/loader.js
new file mode 100644
index 00000000..cc9644f8
--- /dev/null
+++ b/StoneIsland/www/js/vendor/loader.js
@@ -0,0 +1,97 @@
+var Loader = Loader || (function(){
+  function Loader (readyCallback, view){
+    this.assets = {};
+    this.images = [];
+    this.readyCallback = readyCallback;
+    this.count = 0
+    this.view = view
+    this.loaded = false
+  }
+
+  // Register an asset as loading
+  Loader.prototype.register = function(s){
+    this.assets[s] = false;
+    this.count += 1
+  }
+
+  // Signal that an asset has loaded
+  Loader.prototype.ready = function(s){
+    window.debug && console.log("ready >> " + s);
+
+    this.assets[s] = true;
+    if (this.loaded) return;
+    
+    this.view && this.view.update( this.percentRemaining() )
+    
+    if (! this.isReady()) return;
+
+    this.loaded = true;
+    if (this.view) {
+      this.view && this.view.finish(this.readyCallback)
+    }
+    else {
+      this.readyCallback && this.readyCallback();
+    }
+  }
+
+  // (boolean) Is the loader ready?
+  Loader.prototype.isReady = function(){
+    for (var s in this.assets) {
+      if (this.assets.hasOwnProperty(s) && this.assets[s] != true) {
+        return false;
+      }
+    }
+    return true;
+  }
+  
+  // (float) Percentage of assets remaining
+  Loader.prototype.percentRemaining = function(){
+    return this.remainingAssets() / this.count 
+  }
+
+  // (int) Number of assets remaining
+  Loader.prototype.remainingAssets = function(){
+    var n = 0;
+    for (var s in this.assets) {
+      if (this.assets.hasOwnProperty(s) && this.assets[s] != true) {
+        n++;
+        // console.log('remaining: ' + s);
+      }
+    }
+    return n;
+  }
+
+  // Preload the images in config.images
+  Loader.prototype.preloadImages = function(images){
+    this.register("preload");
+    for (var i = 0; i < images.length; i++) {
+      this.preloadImage(images[i]);
+    }
+    this.ready("preload");
+  }
+  Loader.prototype.preloadImage = function(src, register, cb){
+    if (! src || src == "none") return;
+    var _this = this;
+    if (! cb && typeof register !== "string") {
+      cb = register
+      register = null
+    }
+    if (register) {
+      this.register(src);
+    }
+    var img = new Image();
+    img.onload = function(){
+      if (cb) {
+        cb(img);
+      }
+      if (register) {
+        _this.ready(src);
+      }
+    }
+    img.src = src;
+    if (img.complete) img.onload();
+    _this.images.push(img);
+  }
+
+  return Loader;
+})();