diff options
Diffstat (limited to 'themes')
| -rw-r--r-- | themes/okadmin/public/css/main.css | 8 | ||||
| -rw-r--r-- | themes/okadmin/public/js/app.js | 34 | ||||
| -rw-r--r-- | themes/okadmin/templates/partials/inputs.liquid | 56 |
3 files changed, 64 insertions, 34 deletions
diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css index a5fbdeb..9289fdf 100644 --- a/themes/okadmin/public/css/main.css +++ b/themes/okadmin/public/css/main.css @@ -305,6 +305,14 @@ button, input[type=submit] { .main.resource form .video-element input[type=text] { width: 15em; } +.main.resource form .group input[type=text].link-input, +.main.resource form .group input[type=text].link-input-new { + width: 13.05em; + padding: 0 0 0 0.5em; +} +.main.resource form .links li { + height: auto; +} .main .link-list .add-link-btn, .main .link-list .remove-link-btn { margin: 0; diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js index edf9980..17b35d0 100644 --- a/themes/okadmin/public/js/app.js +++ b/themes/okadmin/public/js/app.js @@ -120,35 +120,25 @@ var OKAdmin = function(){ e.stopPropagation() var $delegate = $(e.delegateTarget) var $list = $delegate.find('.links') - var length = $list.find('input').length - var name = $delegate.parent('.property').data('name') - var $new = $delegate.find('.link-input-new') - var input = document.createElement('input') - var delBtn = document.createElement('button') - var inputName = name + '[' + length + ']' - $(input).attr({ - name: inputName, - type: 'text', - value: $new.val() - }) - $list.append(input) - $(delBtn).addClass('remove-link-btn') - $(delBtn).data('for', inputName) - delBtn.innerHTML = '-' - $list.append(delBtn) - $new.val('') + 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() + 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("") }) // Remove a link from the list $('.link-list').on('click', '.remove-link-btn', function(e) { e.preventDefault() e.stopPropagation() - var $delegate = $(e.delegateTarget) var $target = $(e.target) - var inputName = $target.data('for') - var $input = $delegate.find('[name="' + inputName + '"]') - $input.remove() - $target.remove() + $target.closest("li").remove() }) // fix post indexing in list-driven inputs diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid index c6efc68..55d5fb8 100644 --- a/themes/okadmin/templates/partials/inputs.liquid +++ b/themes/okadmin/templates/partials/inputs.liquid @@ -79,26 +79,58 @@ value="{{spec.value}}" placeholder="Enter a comma separated list of tags."> </div> - {% elsif type == 'link-list' %} + {% elsif type == 'link-list' %} <div class="link-list group"> <div class="links"> - {% for url in spec.value %} - <input - name="{{name}}[{{forloop.index0}}]" - value="{{url}}" - type="text" - class="link-input"> - <button class="remove-link-btn" - data-for="{{name}}[{{forloop.index0}}]"> - - - </button> + {% for link in spec.value %} + <li> + <input + name="{{name}}[][text]" + value="{{link.text}}" + type="text" + placeholder="Link text" + class="link-input link-text"> + <input + name="{{name}}[][uri]" + value="{{link.uri}}" + type="text" + placeholder="URL" + class="link-input link-uri"> + <button class="remove-link-btn"> + - + </button> + </li> {% endfor %} </div> <input type="text" - class="link-input-new" + class="link-input-new link-text" + placeholder="Link text"> + <input type="text" + class="link-input-new link-uri" placeholder="http://www.example.com"> <button class="add-link-btn">+</button> + + <script type="text/html" class="link-template"> + <li> + <input + name="{{name}}[][text]" + value="" + type="text" + placeholder="Link text" + class="link-input link-text"> + <input + name="{{name}}[][uri]" + value="" + type="text" + placeholder="URL" + class="link-input link-uri"> + <button class="remove-link-btn"> + - + </button> + </li> + </script> + </div> {% elsif type == 'media-list' %} |