fix issue with single input fields, store image width/heightv0.1.34

6 files changed, 67 insertions, 15 deletions

diff --git a/examples/db.json b/examples/db.json
index 8805342..401bf26 100644
--- a/examples/db.json
+++ b/examples/db.json
@@ -154,13 +154,21 @@
       "title": "Red",
       "media": [
         {
+          "uri": "https://ltho.s3.amazonaws.com/okcms-example/a91c4210-080c-11e6-8a7d-f30231d4ec26.png",
+          "width": "800",
+          "height": "800",
+          "caption": "",
+          "type": "image"
+        },
+        {
           "uri": "http://asdf.us/",
           "caption": "ASDF",
           "type": "link"
         }
       ],
       "__index": 0,
-      "dateCreated": "Mon, 28 Mar 2016 23:02:45 GMT"
+      "dateCreated": "Mon, 28 Mar 2016 23:02:45 GMT",
+      "flagged": false
     },
     {
       "id": "blue",
@@ -210,5 +218,19 @@
       ],
       "flagged": true
     }
+  ],
+  "flour": [
+    {
+      "id": "test",
+      "title": "TEST",
+      "image": {
+        "uri": "https://ltho.s3.amazonaws.com/okcms-example/7be163d0-080b-11e6-8a7d-f30231d4ec26.png",
+        "caption": "",
+        "width": "800",
+        "height": "800"
+      },
+      "__index": 0,
+      "dateCreated": "Thu, 21 Apr 2016 21:52:44 GMT"
+    }
   ]
 }
\ No newline at end of file
diff --git a/examples/index.js b/examples/index.js
index efbfc38..341a50b 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -29,6 +29,11 @@ var app  = okcms.createApp({
       title: {type: 'string'},
       flagged: {type: 'flag'},
       media: {type: 'media-list'},
+    },
+    flour: {
+      id: {type: 'string', hidden: true},
+      title: {type: 'string'},
+      image: {type: 'image'},
     }
   },
 
@@ -37,6 +42,7 @@ var app  = okcms.createApp({
     { type: 'page', static: {id: 'contact'}},
     { type: 'bread' },
     { type: 'test' },
+    { type: 'flour' },
   ],
 
   services: {
diff --git a/package.json b/package.json
index 619b1c8..971efed 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "okcms",
-  "version": "0.1.33",
-  "description": "great",
+  "version": "0.1.34",
+  "description": "The dopest CMS on the planet.",
   "main": "app/index.js",
   "scripts": {
     "postinstall": "./install.sh",
diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css
index 15b8781..e539a71 100644
--- a/themes/okadmin/public/css/main.css
+++ b/themes/okadmin/public/css/main.css
@@ -291,7 +291,9 @@ button, input[type=submit] {
   height: 7em;
 }
 .main.resource form img {
-  width: 10em;
+  width: auto;
+  height: auto;
+  max-width: 10em;
   max-height: 6em;
   border: 0;
 }
diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js
index 59fc6ae..578d99f 100644
--- a/themes/okadmin/public/js/app.js
+++ b/themes/okadmin/public/js/app.js
@@ -9,8 +9,10 @@ var OKAdmin = function(){
       var url = media.url
       var imageTemplate = $(".image-template", parent).html()
       var $el = $(imageTemplate)
-      $el.find(".uri").val(url)
-      $el.find("img").attr("src", url)
+      $el.find(".uri").val(media.url)
+      $el.find(".image-width").val(media.width)
+      $el.find(".image-height").val(media.height)
+      $el.find("img").attr("src", media.url)
       $("ol", parent).prepend($el)
     }
   })
@@ -44,8 +46,10 @@ var OKAdmin = function(){
       var url = media.url
       var imageTemplate = $(".image-template", parent).html()
       var $el = $(imageTemplate)
-      $el.find(".uri").val(url)
-      $el.find("img").attr("src", url)
+      $el.find(".uri").val(media.url)
+      $el.find(".image-width").val(media.width)
+      $el.find(".image-height").val(media.height)
+      $el.find("img").attr("src", media.url)
       $("ol", parent).prepend($el)
     }
     uploader.addMedia = function(media){
@@ -103,11 +107,13 @@ var OKAdmin = function(){
     var $el = $(this)
     var uploader = new OKUpload ()
     uploader.bind( this )
-    uploader.add = function(url){
-      console.log(url)
-      $el.find(".uri").val(url)
+    uploader.add = function(media){
+      console.log(media)
+      $el.find(".uri").val(media.url)
       $el.find(".caption").val("")
-      $el.find("img").attr("src", url).show()
+      $el.find(".image-width").val(media.width)
+      $el.find(".image-height").val(media.height)
+      $el.find("img").attr("src", media.url).show()
       $el.addClass("loaded")
     }
   })
@@ -117,6 +123,8 @@ var OKAdmin = function(){
       var $el = $(this).closest(".image")
       $el.removeClass('loaded')
       $el.find(".uri").val("")
+      $el.find(".image-width").val("")
+      $el.find(".image-height").val("")
       $el.find(".caption").val("")
       $el.find("img").attr("src", "")
     }
@@ -141,7 +149,7 @@ var OKAdmin = function(){
       $el.parent().addClass("loaded")
       $el.parent().find(".video-type").val( media.type )
       $el.parent().find(".video-token").val( media.token )
-      $el.parent().find(".video-uri").val( media.uri )
+      $el.parent().find(".video-uri").val( media.url )
       $el.parent().find(".video-title").val( media.title )
       $el.parent().find(".video-thumb").val( media.thumbnail )
       $el.parent().find(".video-width").val( media.width )
diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid
index 373e580..e71f4ad 100644
--- a/themes/okadmin/templates/partials/inputs.liquid
+++ b/themes/okadmin/templates/partials/inputs.liquid
@@ -48,6 +48,8 @@
         <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 | escape}}</textarea>
+          <input type="hidden" name="{{name}}[width]" value="{{spec.value.width}}" class="image-width">
+          <input type="hidden" name="{{name}}[height]" value="{{spec.value.height}}" class="image-height">
           <img src="{{spec.value.uri}}" alt="{{spec.value.caption | escape}}">
           <button class="remove">x</button>
         </div>
@@ -154,6 +156,8 @@
             <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
             <textarea class="caption" name="{{name}}[][caption]"></textarea>
             <input type="hidden" name="{{name}}[][type]" value="image">
+            <input type="hidden" name="{{name}}[][width]" class="image-width" hidden>
+            <input type="hidden" name="{{name}}[][height]" class="image-height" hidden>
             <img>
             <button class="remove">x</button>
           </li>
@@ -165,8 +169,8 @@
             <input name="{{name}}[][type]" type="hidden" class="video-type" hidden>
             <input name="{{name}}[][token]" type="hidden" class="video-token" hidden>
             <input name="{{name}}[][uri]" type="hidden" class="video-uri" hidden>
-            <input name="{{name}}[][width]" value="{{image.width}}" type="hidden" class="video-width" hidden>
-            <input name="{{name}}[][height]" value="{{image.height}}" type="hidden" class="video-height" hidden>
+            <input name="{{name}}[][width]" type="hidden" class="video-width" hidden>
+            <input name="{{name}}[][height]" type="hidden" class="video-height" hidden>
             <label>Caption</label>
             <input name="{{name}}[][title]" type="text" class="video-title">
             <label>Thumbnail</label>
@@ -249,6 +253,8 @@
               <li class="image-element">
                 <label>Caption</label>
                 <input type="hidden" name="{{name}}[][uri]" value="{{image.uri}}">
+                <input name="{{name}}[{{forloop.index0}}][width]" value="{{image.width}}" type="hidden" class="image-width" hidden>
+                <input name="{{name}}[{{forloop.index0}}][height]" value="{{image.height}}" type="hidden" class="image-height" hidden>
                 <textarea class="caption" name="{{name}}[][caption]">{{image.caption | escape}}</textarea>
                 <input type="hidden" name="{{name}}[][type]" value="image">
                 <img src="{{image.uri}}" alt="{{image.caption | strip_html}}">
@@ -271,6 +277,8 @@
         <script type="text/html" class="image-template">
           <li class="image-element">
             <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
+            <input type="hidden" name="{{name}}[][width]" class="image-width" hidden>
+            <input type="hidden" name="{{name}}[][height]" class="image-height" hidden>
             <textarea class="caption" name="{{name}}[][caption]"></textarea>
             <img>
             <button class="remove">x</button>
@@ -281,6 +289,8 @@
           {% for image in spec.value %}
             <li class="image-element">
               <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
+              <input type="hidden" name="{{name}}[{{forloop.index0}}][width]" value="{{image.width}}" class="image-width">
+              <input type="hidden" name="{{name}}[{{forloop.index0}}][height]" value="{{image.height}}" class="image-height">
               <textarea class="caption" name="{{name}}[{{forloop.index0}}][caption]">{{image.caption | escape}}</textarea>
               <img src="{{image.uri}}" alt="{{image.caption | strip_html}}">
               <button class="remove">x</button>
@@ -303,6 +313,8 @@
             <img>
             <button class="remove">x</button>
             <input class="uri" type="hidden" name="{{name}}[][uri]" value="">
+            <input type="hidden" name="{{name}}[][width]" class="image-width">
+            <input type="hidden" name="{{name}}[][height]" class="image-height">
             <input class="caption" name="{{name}}[][label]" placeholder="Name">
             <input class="caption" name="{{name}}[][caption]" placeholder="Email">
           </li>
@@ -314,6 +326,8 @@
               <img src="{{image.uri}}" alt="{{image.caption | strip_html}}">
               <button class="remove">x</button>
               <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}">
+              <input type="hidden" name="{{name}}[{{forloop.index0}}][width]" value="{{image.width}}" class="image-width">
+              <input type="hidden" name="{{name}}[{{forloop.index0}}][height]" value="{{image.height}}" class="image-height">
               <input class="caption" name="{{name}}[{{forloop.index0}}][label]" value="{{image.label | escape}}" placeholder="Name">
               <input class="caption" name="{{name}}[{{forloop.index0}}][caption]" value="{{image.caption | escape}}"  placeholder="Email">
             </li>