diff options
| -rw-r--r-- | site/db.json | 2 | ||||
| -rw-r--r-- | site/public/assets/javascripts/_env.js | 20 | ||||
| -rw-r--r-- | site/templates/index.liquid | 17 | ||||
| -rw-r--r-- | themes/okadmin/public/js/app.js | 10 | ||||
| -rw-r--r-- | themes/okadmin/public/js/upload.js | 4 |
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 |