diff options
| -rw-r--r-- | examples/db.json | 33 | ||||
| -rw-r--r-- | themes/okadmin/public/css/main.css | 9 | ||||
| -rw-r--r-- | themes/okadmin/public/js/app.js | 19 | ||||
| -rw-r--r-- | themes/okadmin/templates/partials/inputs.liquid | 19 |
4 files changed, 49 insertions, 31 deletions
diff --git a/examples/db.json b/examples/db.json index 5e10d60..9ab7233 100644 --- a/examples/db.json +++ b/examples/db.json @@ -92,22 +92,6 @@ }, "__index": 3, "id": "croissant" - }, - { - "type": "Test", - "title": "Testing", - "description": "", - "color": "red", - "video": { - "url": "", - "type": "", - "token": "", - "title": "", - "thumb": "" - }, - "__index": "5", - "dateCreated": "Mon, 28 Mar 2016 18:49:32 GMT", - "images": [] } ], "page": [ @@ -123,7 +107,22 @@ "title": "ok...", "body": "2406 Old Rd, San Juan Bautista", "id": "contact", - "__index": 0 + "__index": "0", + "links": [ + { + "text": "US Bread Board", + "uri": "http://bread.com/" + }, + { + "text": "National Council on Grain", + "uri": "http://grain.org/" + }, + { + "text": "USDA", + "uri": "http://usda.gov/" + } + ], + "dateCreated": "" } ] }
\ No newline at end of file diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css index 9289fdf..df0ca43 100644 --- a/themes/okadmin/public/css/main.css +++ b/themes/okadmin/public/css/main.css @@ -310,8 +310,15 @@ button, input[type=submit] { width: 13.05em; padding: 0 0 0 0.5em; } +.handle { + display: block; + width: 1em; + height: 2em; + background: #ddd; + float: left; +} .main.resource form .links li { - height: auto; + height: 2em; } .main .link-list .add-link-btn, .main .link-list .remove-link-btn { diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js index 17b35d0..da398eb 100644 --- a/themes/okadmin/public/js/app.js +++ b/themes/okadmin/public/js/app.js @@ -91,7 +91,7 @@ var OKAdmin = function(){ }) // make the region sortable with drag-and-drop - $(".media-list ol, .image-list ol").sortable() + $(".media-list ol, .image-list ol, .link-list .links").sortable() $(".media-list ol, .image-list ol").disableSelection() // populate a video field with info from our url parser @@ -115,20 +115,22 @@ var OKAdmin = function(){ })) // Add a new link to the list - $('.link-list').on('click', '.add-link-btn', function(e) { - e.preventDefault() - e.stopPropagation() + $('.link-list').on('click', '.add-link-btn', function addNewLink (e) { + e.preventDefault && e.preventDefault() + e.stopPropagation && e.stopPropagation() var $delegate = $(e.delegateTarget) var $list = $delegate.find('.links') + var linkCount = $list.find("li").length + var $linkText = $delegate.find(".link-input-new.link-text") var $linkURI = $delegate.find(".link-input-new.link-uri") var template = $delegate.find(".link-template").html() + template = template.replace(/\[\]/g, "[" + linkCount + "]") var $el = $(template) $el.find(".link-text").val( $linkText.val() ) $el.find(".link-uri").val( $linkURI.val() ) $list.append($el) - console.log($list, template) $linkText.val("") $linkURI.val("") }) @@ -195,6 +197,13 @@ var OKAdmin = function(){ input.checked = true } }) + + $(".link-list").each(function(){ + var $inputs = $(this).find(".link-input-new") + if ($inputs.eq(0).val() && $inputs.eq(1).val()) { + $(this).find(".add-link-btn").trigger("click") + } + }) $("ol").each(function(){ $("li", this).each(function(index){ diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid index 55d5fb8..4acb435 100644 --- a/themes/okadmin/templates/partials/inputs.liquid +++ b/themes/okadmin/templates/partials/inputs.liquid @@ -82,17 +82,18 @@ {% elsif type == 'link-list' %} <div class="link-list group"> - <div class="links"> + <ol class="links"> {% for link in spec.value %} <li> + <div class="handle"></div> <input - name="{{name}}[][text]" + name="{{name}}[{{forloop.index0}}][text]" value="{{link.text}}" type="text" placeholder="Link text" class="link-input link-text"> <input - name="{{name}}[][uri]" + name="{{name}}[{{forloop.index0}}][uri]" value="{{link.uri}}" type="text" placeholder="URL" @@ -102,7 +103,8 @@ </button> </li> {% endfor %} - </div> + </ol> + <input type="text" class="link-input-new link-text" placeholder="Link text"> @@ -113,6 +115,7 @@ <script type="text/html" class="link-template"> <li> + <div class="handle"></div> <input name="{{name}}[][text]" value="" @@ -172,12 +175,12 @@ {% if image.token %} <li class="video-element"> <div style="float: left"> - <input name="{{name}}[][type]" value="{{image.type}}" type="hidden" class="video-type" hidden> - <input name="{{name}}[][token]" value="{{image.token}}" type="hidden" class="video-token" hidden> + <input name="{{name}}[{{forloop.index0}}][type]" value="{{image.type}}" type="hidden" class="video-type" hidden> + <input name="{{name}}[{{forloop.index0}}][token]" value="{{image.token}}" type="hidden" class="video-token" hidden> <label>Caption</label> - <input name="{{name}}[][title]" value="{{image.title}}" type="text" class="video-title"> + <input name="{{name}}[{{forloop.index0}}][title]" value="{{image.title}}" type="text" class="video-title"> <label>Thumbnail</label> - <input name="{{name}}[][thumb]" value="{{image.thumb}}" type="text" class="video-thumb"> + <input name="{{name}}[{{forloop.index0}}][thumb]" value="{{image.thumb}}" type="text" class="video-thumb"> </div> <img src="{{image.thumb}}"> <button class="remove">x</button> |