diff options
| -rw-r--r-- | themes/okadmin/public/css/main.css | 6 | ||||
| -rw-r--r-- | themes/okadmin/public/js/app.js | 39 | ||||
| -rw-r--r-- | themes/okadmin/templates/partials/inputs.liquid | 25 |
3 files changed, 68 insertions, 2 deletions
diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css index e5af10c..094e66b 100644 --- a/themes/okadmin/public/css/main.css +++ b/themes/okadmin/public/css/main.css @@ -301,6 +301,12 @@ button, input[type=submit] { .main.resource form .video-element input[type=text] { width: 15em; } +.main .link-list .add-link-btn, +.main .link-list .remove-link-btn { + margin: 0; + height: 2em; + line-height: 1em; +} .add-image-button { background: #ddd; clear: left; diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js index 2667ce6..f989c7b 100644 --- a/themes/okadmin/public/js/app.js +++ b/themes/okadmin/public/js/app.js @@ -99,7 +99,44 @@ var OKAdmin = function(){ $el.parent().find(".video-thumb").val( media.thumbnail ) }) })) - + + // Add a new link to the list + $('.link-list').on('click', '.add-link-btn', function(e) { + e.preventDefault() + 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('') + }) + + // 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() + }) + // fix post indexing in list-driven inputs $(".main.resource form").submit(function(e){ var $id = $("[name=id]"), $title = $("[name=title]"), $menu = $("[name=menu]"), $section = $(".resource.main") diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid index 25ad197..0d5321b 100644 --- a/themes/okadmin/templates/partials/inputs.liquid +++ b/themes/okadmin/templates/partials/inputs.liquid @@ -3,7 +3,8 @@ {% assign spec = pair[1] %} {% assign type = spec.type %} - <div class="property {{type}} {% if spec.hidden %}hidden{% endif %}"> + <div class="property {{type}} {% if spec.hidden %}hidden{% endif %}" + data-name="{{name}}"> <label for="{{name}}">{{name | capitalize}}</label> {% if type == 'string' %} @@ -54,6 +55,28 @@ <input id="{{name}}-input" name="{{name}}" value="{{spec.value}}" placeholder="Enter a comma separated list of tags."> </div> + {% 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> + {% endfor %} + </div> + <input type="text" + class="link-input-new" + placeholder="http://www.example.com"> + <button class="add-link-btn">+</button> + </div> + {% elsif type == 'media-list' %} <div class="media-list group loaded"> <div class="fields"> |