diff options
| -rw-r--r-- | examples/db.json | 15 | ||||
| -rw-r--r-- | examples/index.js | 6 | ||||
| -rw-r--r-- | themes/okadmin/public/js/app.js | 38 | ||||
| -rw-r--r-- | themes/okadmin/public/js/parser.js | 4 | ||||
| -rw-r--r-- | themes/okadmin/templates/partials/inputs.liquid | 41 |
5 files changed, 83 insertions, 21 deletions
diff --git a/examples/db.json b/examples/db.json index 9ab7233..b9de44b 100644 --- a/examples/db.json +++ b/examples/db.json @@ -124,5 +124,20 @@ ], "dateCreated": "" } + ], + "test": [ + { + "id": "test", + "title": "tEst", + "media": [ + { + "uri": "http://asdf.us/", + "caption": "ASDF", + "type": "link" + } + ], + "__index": "0", + "dateCreated": "Mon, 28 Mar 2016 23:02:45 GMT" + } ] }
\ No newline at end of file diff --git a/examples/index.js b/examples/index.js index bf51dfc..4bf385f 100644 --- a/examples/index.js +++ b/examples/index.js @@ -21,12 +21,18 @@ var app = okcms.createApp({ video: {type: 'video'}, images: {type: 'captioned-image-list'} }, + test: { + id: {type: 'string', hidden: true}, + title: {type: 'string'}, + media: {type: 'media-list'}, + } }, resources: [ { type: 'page', static: {id: 'about'}}, { type: 'page', static: {id: 'contact'}}, { type: 'bread' }, + { type: 'test' }, ], services: { diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js index da398eb..61fc8c8 100644 --- a/themes/okadmin/public/js/app.js +++ b/themes/okadmin/public/js/app.js @@ -47,17 +47,33 @@ var OKAdmin = function(){ $("ol", parent).prepend($el) } uploader.addVideo = function(media){ - console.log(media) - var videoTemplate = $(".video-template", parent).html() - var $el = $(videoTemplate) - $el.addClass("loaded") - $el.find(".video-type").val( media.type ) - $el.find(".video-token").val( media.token ) - $el.find(".video-title").val( media.title ) - $el.find(".video-thumb").val( media.thumbnail ) - $el.find("img").attr("src", media.thumbnail ) - $("ol", parent).prepend($el) - } + switch (media.type) { + case 'youtube': + case 'vimeo': + case 'video': + var videoTemplate = $(".video-template", parent).html() + var $el = $(videoTemplate) + $el.addClass("loaded") + $el.find(".video-type").val( media.type ) + $el.find(".video-token").val( media.token ) + $el.find(".video-title").val( media.title ) + $el.find(".video-thumb").val( media.thumbnail ) + $el.find(".video-width").val( media.width ) + $el.find(".video-height").val( media.height ) + $el.find("img").attr("src", media.thumbnail ) + $("ol", parent).prepend($el) + break + case 'link': + var linkTemplate = $(".link-template", parent).html() + var $el = $(linkTemplate) + $el.addClass("loaded") + $el.find(".uri").val( media.url ) + $("ol", parent).prepend($el) + break + default: + alert("Unsupported link type!") + } + } }) // delete image from gallery $(document).on("mousedown", ".media-list .remove", function(){ diff --git a/themes/okadmin/public/js/parser.js b/themes/okadmin/public/js/parser.js index 411f425..95b391c 100644 --- a/themes/okadmin/public/js/parser.js +++ b/themes/okadmin/public/js/parser.js @@ -145,7 +145,6 @@ var Parser = { '&color=ff6600&auto_play=false&show_artwork=true"></iframe>' } }, - /* { type: 'link', regex: /^http.+/i, @@ -163,8 +162,7 @@ var Parser = { tag: function (media) { return '<a href="' + media.url + '" target="_blank">' + media.url + '</a>' } - } - */ + }, ], tumblr: function(url, cb){ diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid index 4acb435..77ee7a4 100644 --- a/themes/okadmin/templates/partials/inputs.liquid +++ b/themes/okadmin/templates/partials/inputs.liquid @@ -29,6 +29,8 @@ <input name="{{name}}[url]" type="text" value="{{spec.value.url}}" class="url" placeholder="Enter a video URL"> <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> + <input name="{{name}}[width]" value="{{spec.value.width}}" type="hidden" class="video-width" hidden> + <input name="{{name}}[height]" value="{{spec.value.height}}" type="hidden" class="video-height" hidden> <label>Title</label> <input name="{{name}}[title]" type="text" value="{{spec.value.title}}" class="video-title"> <label>Thumbnail</label> @@ -143,11 +145,12 @@ <input type="file" accept="image/*" multiple> <button>+ Add images</button> </div> - <input class="add-url" type="text" placeholder="+ Add Image/Video URL"> + <input class="add-url" type="text" placeholder="+ Add Image/Video/Link URL"> </div> <script type="text/html" class="image-template"> <li class="image-element"> + <label>Caption</label> <input class="uri" type="hidden" name="{{name}}[][uri]" value=""> <textarea class="caption" name="{{name}}[][caption]"></textarea> <img> @@ -160,6 +163,8 @@ <div style="float: left"> <input name="{{name}}[][type]" type="hidden" class="video-type" hidden> <input name="{{name}}[][token]" type="hidden" class="video-token" 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> <label>Caption</label> <input name="{{name}}[][title]" type="text" class="video-title"> <label>Thumbnail</label> @@ -170,13 +175,24 @@ </li> </script> + <script type="text/html" class="link-template"> + <li class="link-element"> + <input class="uri" type="text" name="{{name}}[][uri]" value=""> + <textarea class="caption" name="{{name}}[][caption]" placeholder="Caption"></textarea> + <input type="hidden" name="{{name}}[][type]" value="link"> + <button class="remove">x</button> + </li> + </script> + <ol> {% for image in spec.value %} - {% if image.token %} + {% if image.type and (image.type == "vimeo" or image.type == "youtube" or image.type == "video") %} <li class="video-element"> <div style="float: left"> <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> + <input name="{{name}}[{{forloop.index0}}][width]" value="{{image.width}}" type="hidden" class="video-width" hidden> + <input name="{{name}}[{{forloop.index0}}][height]" value="{{image.height}}" type="hidden" class="video-height" hidden> <label>Caption</label> <input name="{{name}}[{{forloop.index0}}][title]" value="{{image.title}}" type="text" class="video-title"> <label>Thumbnail</label> @@ -185,11 +201,22 @@ <img src="{{image.thumb}}"> <button class="remove">x</button> </li> + {% elsif image.type and image.type == "link" %} + <li class="link-element"> + <label>URL</label> + <input class="uri" type="text" name="{{name}}[][uri]" value="{{image.uri}}"> + <label>Caption</label> + <textarea class="caption" name="{{name}}[][caption]" placeholder="Caption">{{image.caption}}</textarea> + <input type="hidden" name="{{name}}[][type]" value="link"> + <button class="remove">x</button> + </li> {% else %} <li class="image-element"> + <label>Caption</label> <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}"> <textarea class="caption" name="{{name}}[{{forloop.index0}}][caption]">{{image.caption}}</textarea> - <img src="{{image.uri}}" alt="{{image.caption}}"> + <input type="hidden" name="{{name}}[][type]" value="image"> + <img src="{{image.uri}}" alt="{{image.caption | strip_html}}"> <button class="remove">x</button> </li> {% endif %} @@ -210,7 +237,7 @@ <li class="image-element"> <input class="uri" type="hidden" name="{{name}}[][uri]" value=""> <textarea class="caption" name="{{name}}[][caption]"></textarea> - <img alt="{{image.caption}}"> + <img> <button class="remove">x</button> </li> </script> @@ -220,7 +247,7 @@ <li class="image-element"> <input type="hidden" name="{{name}}[{{forloop.index0}}][uri]" value="{{image.uri}}"> <textarea class="caption" name="{{name}}[{{forloop.index0}}][caption]">{{image.caption}}</textarea> - <img src="{{image.uri}}" alt="{{image.caption}}"> + <img src="{{image.uri}}" alt="{{image.caption | strip_html}}"> <button class="remove">x</button> </li> {% endfor %} @@ -238,7 +265,7 @@ <script type="text/html" class="image-template"> <li class="image-element"> - <img alt="{{image.caption}}"> + <img> <button class="remove">x</button> <input class="uri" type="hidden" name="{{name}}[][uri]" value=""> <input class="caption" name="{{name}}[][label]" placeholder="Name"> @@ -249,7 +276,7 @@ <ol> {% for image in spec.value %} <li class="image-element"> - <img src="{{image.uri}}" alt="{{image.caption}}"> + <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 class="caption" name="{{name}}[{{forloop.index0}}][label]" value="{{image.label}}" placeholder="Name"> |