load shape images from posts

5 files changed, 29 insertions, 24 deletions

diff --git a/site/db.json b/site/db.json
index 12ccb38..f1721a6 100644
--- a/site/db.json
+++ b/site/db.json
@@ -29,7 +29,7 @@
       ],
       "__index": "0",
       "shape": {
-        "uri": "",
+        "uri": "http://okfocus.s3.amazonaws.com/2h/13.gif",
         "caption": ""
       }
     }
diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js
index c4e9ace..b567a3d 100644
--- a/site/public/assets/javascripts/_env.js
+++ b/site/public/assets/javascripts/_env.js
@@ -7,8 +7,11 @@ environment.init = function(){
   $("#scene").addClass("fade")
 	var loader = new Loader(environment.ready, new HustleLoader)
 	var preloadImages = $("#preload-image-list").html().split("\n").filter(function(s){ return !!s })
-	boxImages = $("#box-image-list").html().split("\n").filter(function(s){ return !!s })
-	loader.preloadImages( preloadImages.concat(boxImages) )
+	boxImages = $("#box-image-list").html().split("\n")
+  var postImages = $(".sub a").toArray().map(function(el){ return $(el).data("image") })
+
+  var images = preloadImages.concat(postImages).concat(boxImages).filter(function(s){ return !!s })
+	loader.preloadImages( images )
 	loader.ready()
 }
 environment.ready = function(){
@@ -191,7 +194,7 @@ function build_scene () {
   controls.zoom(1000)
 
   strips.push( new Strip({
-    images: boxImages.slice(0, 5),
+    images: $(".sub[data-type=advertising] a"),
     x: -100,
     y: 100,
 	  rotationY: PI/4,
@@ -199,7 +202,7 @@ function build_scene () {
   }) )
 
   strips.push( new Strip({
-    images: boxImages.slice(5, 10),
+    images: $(".sub[data-type=retail] a"),
     x: 100,
     y: 100,
 	  rotationX: PI/4,
@@ -208,7 +211,7 @@ function build_scene () {
   }) )
 
   strips.push( new Strip({
-    images: boxImages.slice(10, 15),
+    images: $(".sub[data-type=experiential] a"),
     x:  0,
     y: 100,
     z: 100,
@@ -217,7 +220,7 @@ function build_scene () {
   }) )
 
   strips.push( new Strip({
-    images: boxImages.slice(15, 20),
+    images: $(".sub[data-type=content] a"),
     x: 0,
     y: 100,
     z: -50,
@@ -455,9 +458,10 @@ var Strip = function( opt ){
 	root.addTo(scene)
 
 	var prev = root
-	this.els = opt.images.map(function(url, i){
+	this.els = opt.images.toArray().map(function(el, i){
+	  var data = $(el).data()
 		var el = new MX.Image({
-			src: url,
+			src: data.image,
 			onload: function(img){
 			}
 		})
diff --git a/site/templates/index.liquid b/site/templates/index.liquid
index 224803a..db6bf20 100644
--- a/site/templates/index.liquid
+++ b/site/templates/index.liquid
@@ -86,27 +86,27 @@ WEBSITE BY OKFOCUS, http://okfoc.us, Internet Legends.
 	<div class="top">
 		<img src="assets/images/2H_WORDMARK.png" class="toplogo">
 		<div class="cat">retail</div>
-		<div class="sub">
+		<div class="sub" data-type="retail">
 		  {% for project in retails %}
-        <a href="#" data-type="retail" data-id="{{ project.id }}" data-name="{{ project.menu }}" data-image="{{ project.shape }}">{{ project.menu }}</a>
+        <a href="#" data-type="retail" data-id="{{ project.id }}" data-name="{{ project.menu }}" data-image="{{ project.shape.uri }}">{{ project.menu }}</a>
       {% endfor %}
 		</div>
 		<div class="cat">advertising</div>
-		<div class="sub">
+		<div class="sub" data-type="advertising">
 		  {% for project in advertisings %}
-        <a href="#" data-type="advertising" data-id="{{ project.id }}" data-name="{{ project.menu }}" data-image="{{ project.shape }}">{{ project.menu }}</a>
+        <a href="#" data-type="advertising" data-id="{{ project.id }}" data-name="{{ project.menu }}" data-image="{{ project.shape.uri }}">{{ project.menu }}</a>
       {% endfor %}
 		</div>
 		<div class="cat">experiential</div>
-		<div class="sub">
+		<div class="sub" data-type="experiental">
 		  {% for project in experientials %}
-        <a href="#" data-type="experiential" data-id="{{ project.id }}" data-name="{{ project.menu }}" data-image="{{ project.shape }}">{{ project.menu }}</a>
+        <a href="#" data-type="experiential" data-id="{{ project.id }}" data-name="{{ project.menu }}" data-image="{{ project.shape.uri }}">{{ project.menu }}</a>
       {% endfor %}
 		</div>
 		<div class="cat">content</div>
-		<div class="sub">
+		<div class="sub" data-type="content">
 		  {% for project in contents %}
-        <a href="#" data-type="content" data-id="{{ project.id }}" data-name="{{ project.menu }}" data-image="{{ project.shape }}">{{ project.menu }}</a>
+        <a href="#" data-type="content" data-id="{{ project.id }}" data-name="{{ project.menu }}" data-image="{{ project.shape.uri }}">{{ project.menu }}</a>
       {% endfor %}
 		</div>
 	</div>
@@ -238,7 +238,6 @@ WEBSITE BY OKFOCUS, http://okfoc.us, Internet Legends.
 
 <script type="text/plain" id="preload-image-list">
 {% for page in pages %}{{ page.image }}
-{% endfor %}{% for image in shape.images %}{{ image.uri }}
 {% endfor %}</script>
 <script type="text/plain" id="box-image-list">
 {% for image in shape.images %}{{ image.uri }}
diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js
index 874b7e1..e981223 100644
--- a/themes/okadmin/public/js/app.js
+++ b/themes/okadmin/public/js/app.js
@@ -1,7 +1,7 @@
 var OKAdmin = function(){
   
   // initialize our multi-image uploader with an element and a template
-  $(".image-list").each(function(){
+  $(".group.image-list").each(function(){
     var uploader = new OKUpload ()
     uploader.bind( this )
     uploader.add = function(url){
@@ -14,18 +14,20 @@ var OKAdmin = function(){
   })
   // delete image from gallery
   $(document).on("mousedown", ".image-list .remove-image", function(){
-    if (confirm("Delete this image?")) {
+    if (confirm("Remove this image?")) {
       $(this).parent().remove()
     }
   })
 
   // initialize our single image uploader with existing DOM
-  $(".image").each(function(){
+  $(".group.image").each(function(){
     var $el = $(this)
     
     var uploader = new OKUpload ()
     uploader.bind( this )
     uploader.add = function(url){
+      console.log(url)
+      console.log($el)
       $el.find(".uri").val(url)
       $el.find(".caption").val("")
       $el.find("img").attr("src", url)
@@ -34,7 +36,7 @@ var OKAdmin = function(){
   })
   // delete image from single image entry
   $(document).on("mousedown", ".image .remove-image", function(){
-    if (confirm("Delete this image?")) {
+    if (confirm("Remove this image?")) {
       var $el = $(this).closest(".image")
       $el.removeClass('loaded')
       $el.find(".uri").val("")
diff --git a/themes/okadmin/public/js/upload.js b/themes/okadmin/public/js/upload.js
index 040654b..b4a0dfc 100644
--- a/themes/okadmin/public/js/upload.js
+++ b/themes/okadmin/public/js/upload.js
@@ -5,9 +5,10 @@ var OKUpload = function(){
 OKUpload.prototype.bind = function(rapper){
   var uploader = this
   $(".add-image-button input", rapper).change( uploader.handleFileSelect.bind(uploader) )
-  $(".add-image-url", rapper).keydown(pressEnter(function(e){
+  $(".add-image-url", rapper).on("keydown blur", pressEnter( function(e){
     var url = $(this).val()
     $(this).val("")
+    if (! url) return
     uploader.add(url)
   }))
 }
@@ -54,7 +55,6 @@ OKUpload.prototype.error = function(error){
 }
 
 
-
 function pressEnter(fn){
   return function(e){
     if (e.keyCode && e.keyCode !== 13) return