diff options
| -rw-r--r-- | site/db.json | 6 | ||||
| -rw-r--r-- | site/index.js | 1 | ||||
| -rw-r--r-- | site/public/assets/style.css | 3 | ||||
| -rw-r--r-- | site/templates/index.liquid | 2 | ||||
| -rw-r--r-- | themes/okadmin/public/css/main.css | 25 | ||||
| -rw-r--r-- | themes/okadmin/public/js/app.js | 91 | ||||
| -rw-r--r-- | themes/okadmin/public/js/upload.js | 91 | ||||
| -rw-r--r-- | themes/okadmin/templates/partials/inputs.liquid | 52 |
8 files changed, 170 insertions, 101 deletions
diff --git a/site/db.json b/site/db.json index d0624e8..12ccb38 100644 --- a/site/db.json +++ b/site/db.json @@ -27,7 +27,11 @@ "caption": "CURABITUR BLANDIT TEMPUS PORTTITOR 4" } ], - "__index": "0" + "__index": "0", + "shape": { + "uri": "", + "caption": "" + } } ], "page": [ diff --git a/site/index.js b/site/index.js index 521b7d7..30e4a76 100644 --- a/site/index.js +++ b/site/index.js @@ -7,6 +7,7 @@ var projectSchema = { description: {type: 'text'}, video: {type: 'video'}, images: {type: 'captioned-image-list'}, + shape: {type: 'image'}, } var app = okcms.createApp({ diff --git a/site/public/assets/style.css b/site/public/assets/style.css index 3c2526b..28d0013 100644 --- a/site/public/assets/style.css +++ b/site/public/assets/style.css @@ -285,6 +285,7 @@ nav .middle { } nav .bottom { + height: 20%; width: 100%; background: #bbb; } @@ -489,7 +490,7 @@ nav .sub.active a { } .entry span div.content.noline { border-top: 0; - padding-top: 0px; + padding-top: 0; } .entry span div.content div { width:50%; diff --git a/site/templates/index.liquid b/site/templates/index.liquid index afb5de3..d18098c 100644 --- a/site/templates/index.liquid +++ b/site/templates/index.liquid @@ -110,9 +110,11 @@ WEBSITE BY OKFOCUS, http://okfoc.us, Internet Legends. {% endfor %} </div> </div> +<!-- <div class="middle"> <div class="cat index">VIEW ALL PROJECTS</div> </div> + --> <div class="bottom"> <div class="cat about">ABOUT</div> <div class="cat contact">CONTACT</div> diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css index ec426f9..685e368 100644 --- a/themes/okadmin/public/css/main.css +++ b/themes/okadmin/public/css/main.css @@ -228,7 +228,9 @@ button, input[type=submit] { border: 0; display: none; } -.main.resource form .group.loaded input:first-child, +.main.resource form .group.image input, +.main.resource form .group.video input:first-child, +.main.resource form .group.loaded.video input[type=text], .main.resource form .group input:first-child { display: block; width: 25em; @@ -238,17 +240,24 @@ button, input[type=submit] { } .main.resource form .group.loaded input { display: block; - width: 20.05em; } -.main.resource form .group input { - display: none; +.main.resource form .group input[type=text] { + width: 20.05em; margin-bottom: 0.1em; } +.main.resource form .group.image .image-element, +.main.resource form .group.video input[type=text], .main.resource form .group.loaded input[hidden], +.main.resource form .group.image.loaded .fields, .main.resource form input[hidden] { display: none; } - +.main.resource form .group.image.loaded .image-element { + display: block; +} +.main.resource form .fields { + height: 3em; +} .main.resource form textarea { padding: 0.5em; height: 15em; @@ -280,6 +289,8 @@ button, input[type=submit] { width: 10em; max-height: 10em; border: 0; +} +.main.resource form .images img { cursor: -webkit-grab; cursor: grab; } @@ -313,10 +324,10 @@ button, input[type=submit] { margin: 0; padding: 0; cursor: pointer; } -li.image-element:hover .remove-image { +.image-element:hover .remove-image { display: block; } -li.image-element .remove-image:hover { +.image-element .remove-image:hover { color: red; } .remove-image { diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js index 22317f3..baa4873 100644 --- a/themes/okadmin/public/js/app.js +++ b/themes/okadmin/public/js/app.js @@ -1,38 +1,75 @@ var OKAdmin = function(){ - // initialize our (single) ajax image uploader with an element and a template - OKUpload.bind( document.getElementById("file") ) - OKUpload.add = function(data){ - var url = data[0].extra.Location - add_image(url) - } - - // also handle straight image urls - $("#add-image-url").keydown(pressEnter(function(e){ - var url = $(this).val() - $(this).val("") - add_image(url) - })) + // initialize our multi-image uploader with an element and a template + $(".image-list").each(function(){ + var uploader = new OKUpload () + uploader.bind( $(".add-image-button input", this) ) + uploader.add = function(data){ + var url = data[0].extra.Location + add_image(url) + } + // also handle straight image urls + $(".add-image-url", this).keydown(pressEnter(function(e){ + var url = $(this).val() + $(this).val("") + add_image(url) + })) - // clone and populate template - function add_image(url){ - var imageTemplate = $("#captioned-image-template").html() - var $el = $(imageTemplate) - $el.find(".uri").val(url) - $el.find("img").attr("src", url) - $(".captioned-image-list ol").append($el) - } + // clone and populate template + function add_image(url){ + var imageTemplate = $("#captioned-image-template").html() + var $el = $(imageTemplate) + $el.find(".uri").val(url) + $el.find("img").attr("src", url) + $(".captioned-image-list ol").append($el) + } + }) + // delete image from gallery + $(document).on("mousedown", ".image-list .remove-image", function(){ + if (confirm("Delete this image?")) { + $(this).parent().remove() + } + }) - // make the region sortable with drag-and-drop - $(".captioned-image-list ol").sortable() - $(".captioned-image-list ol").disableSelection() + // initialize our single image uploader with existing DOM + $(".image").each(function(){ + var $el = $(this) + + var uploader = new OKUpload () + uploader.bind( $(".add-image-button input", this) ) + uploader.add = function(data){ + var url = data[0].extra.Location + add_image(url) + } + // also handle straight image urls + $(".add-image-url", this).keydown(pressEnter(function(e){ + var url = $(this).val() + $(this).val("") + add_image(url) + })) - // delete image - $(document).on("mousedown", ".remove-image", function(){ + // clone and populate template + function add_image(url){ + $el.find(".uri").val(url) + $el.find(".caption").val("") + $el.find("img").attr("src", url) + $el.addClass("loaded") + } + }) + // delete image from single image entry + $(document).on("mousedown", ".image .remove-image", function(){ if (confirm("Delete this image?")) { - $(this).parent().remove() + var $el = $(this).closest(".image") + $el.removeClass('loaded') + $el.find(".uri").val("") + $el.find(".caption").val("") + $el.find("img").attr("src", "") } }) + + // make the region sortable with drag-and-drop + $(".captioned-image-list ol").sortable() + $(".captioned-image-list ol").disableSelection() // populate a video field with info from our url parser var last_url diff --git a/themes/okadmin/public/js/upload.js b/themes/okadmin/public/js/upload.js index 1c9094c..39f7427 100644 --- a/themes/okadmin/public/js/upload.js +++ b/themes/okadmin/public/js/upload.js @@ -1,55 +1,48 @@ -var OKUpload = { - action: "/_services/image", - - bind: function(el){ - if (! el) return - el.addEventListener("change", OKUpload.handleFileSelect) - }, - - handleFileSelect: function(e) { - e.stopPropagation(); - e.preventDefault(); - - var files = e.dataTransfer ? e.dataTransfer.files : e.target.files; - - for (var i = 0, f; f = files[i]; i++) { - if ( ! f.type.match('image.*')) { - continue; - } - OKUpload.upload(f) - } - }, +var OKUpload = function(){ + this.action = "/_services/image" +} +OKUpload.prototype.bind = function(el){ + if (el.length) el = el[0] + el.addEventListener("change", this.handleFileSelect.bind(this)) +} +OKUpload.prototype.handleFileSelect = function(e) { + e.stopPropagation(); + e.preventDefault(); - upload: function(f){ - var fd = new FormData() - fd.append('image', f) + var files = e.dataTransfer ? e.dataTransfer.files : e.target.files; - var request = $.ajax({ - url: OKUpload.action, - type: "post", - data: fd, - dataType: "json", - processData: false, - contentType: false, - }) - request.done(OKUpload.success) - }, - - success: function(media){ - if (media.error) { - console.log(media.error) - return + for (var i = 0, f; f = files[i]; i++) { + if ( ! f.type.match('image.*')) { + continue; } - OKUpload.add(media) - }, - - add: function(media){ - console.log(media) - }, - - error: function(error){ - throw error - }, + this.upload(f) + } +} +OKUpload.prototype.upload = function(f){ + var fd = new FormData() + fd.append('image', f) + var request = $.ajax({ + url: this.action, + type: "post", + data: fd, + dataType: "json", + processData: false, + contentType: false, + }) + request.done(this.success.bind(this)) +} +OKUpload.prototype.success = function(media){ + if (media.error) { + console.log(media.error) + return + } + this.add(media) +} +OKUpload.prototype.add = function(media){ + console.log(media) +} +OKUpload.prototype.error = function(error){ + throw error } diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid index 253b275..c9a4d92 100644 --- a/themes/okadmin/templates/partials/inputs.liquid +++ b/themes/okadmin/templates/partials/inputs.liquid @@ -22,15 +22,48 @@ {% elsif type == 'video' %} <div class="video group {% if spec.value.url %}loaded{% endif %}"> <input name="{{name}}[url]" type="text" value="{{spec.value.url}}" class="url" placeholder="Enter a video URL"> - <input name="{{name}}[type]" type="text" value="{{spec.value.type}}" class="video-type" hidden> - <input name="{{name}}[token]" type="text" value="{{spec.value.token}}" class="video-token" hidden> + <input name="{{name}}[type]" type="hidden" value="{{spec.value.type}}" class="video-type" hidden> + <input name="{{name}}[token]" type="hidden" value="{{spec.value.token}}" class="video-token" hidden> <label>Title</label> <input name="{{name}}[title]" type="text" value="{{spec.value.title}}" class="video-title"> <label>Thumbnail</label> <input name="{{name}}[thumb]" type="text" value="{{spec.value.thumb}}" class="video-thumb"> </div> + {% elsif type == 'image' %} + <div class="image group {% if spec.value.uri %}loaded{% endif %}"> + <div class="fields"> + <div class="add-image-button"> + <input type="file" accept="image/*"> + <button>+ Add image</button> + </div> + <input class="add-image-url" type="text" placeholder="+ Add URL"> + </div> + <div class="image-element"> + <input class="uri" type="hidden" name="{{name}}[uri]" value="{{spec.value.uri}}"> + <textarea class="caption" name="{{name}}[caption]">{{spec.value.caption}}</textarea> + <img src="{{spec.value.uri}}" alt="{{spec.value.caption}}"> + <button class="remove-image">x</button> + </div> + </div> {% elsif type == 'captioned-image-list' %} - <div class="image group loaded"> + <div class="image-list group loaded"> + <div class="fields"> + <div class="add-image-button"> + <input type="file" accept="image/*" multiple> + <button>+ Add images</button> + </div> + <input class="add-image-url" type="text" placeholder="+ Add URL"> + </div> + + <script type="text/html" id="captioned-image-template"> + <li class="image-element"> + <input class="uri" type="hidden" name="{{name}}[][uri]" value=""> + <textarea class="caption" name="{{name}}[][caption]"></textarea> + <img alt="{{image.caption}}"> + <button class="remove-image">x</button> + </li> + </script> + <ol> {% for image in spec.value %} <li class="image-element"> @@ -41,19 +74,6 @@ </li> {% endfor %} </ol> - <div class="add-image-button"> - <input id="file" type="file" accept="image/*" multiple> - <button>+ Add images</button> - </div> - <input id="add-image-url" type="text" placeholder="+ Add URL"> - <script type="text/html" id="captioned-image-template"> - <li class="image-element"> - <input class="uri" type="hidden" name="{{name}}[][uri]" value=""> - <textarea class="caption" name="{{name}}[][caption]"></textarea> - <img alt="{{image.caption}}"> - <button class="remove-image">x</button> - </li> - </script> </div> {% elsif type == 'meta' %} <input class="hidden" type="hidden" name="{{name}}" value="{{spec.value}}"> |