From c8eab703d468439a5b04dcfdeaf72db3eae4f966 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Thu, 9 Apr 2015 16:46:10 -0400 Subject: css and stuff --- themes/okadmin/public/css/main.css | 3 +++ themes/okadmin/public/js/app.js | 25 +++++++++++++++++-------- themes/okadmin/public/js/upload.js | 3 +-- 3 files changed, 21 insertions(+), 10 deletions(-) (limited to 'themes/okadmin/public') diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css index a1e20a0..a01a85c 100644 --- a/themes/okadmin/public/css/main.css +++ b/themes/okadmin/public/css/main.css @@ -46,6 +46,9 @@ a:visited { color: rgba(0, 0, 0, 0.25); line-height: 50px; } +.admin-header .breadcrumb b { + color: #333; +} .admin-header .site-link { float: right; diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js index 4b8d98f..170b2ab 100644 --- a/themes/okadmin/public/js/app.js +++ b/themes/okadmin/public/js/app.js @@ -1,10 +1,20 @@ var OKAdmin = function(){ - OKUpload.bind() + // initialize our (single) ajax image uploader with an element and a template + OKUpload.bind( document.getElementById("file") ) OKUpload.add = function(data){ var url = data[0].extra.Location add_image(url) } + + // also handle straight image urls + $("#add-image-url").keydown(pressEnter(function(e){ + var url = $(this).val() + $(this).val("") + add_image(url) + })}) + + // clone and populate template function add_image(url){ var imageTemplate = $("#captioned-image-template").html() var $el = $(imageTemplate) @@ -12,21 +22,19 @@ var OKAdmin = function(){ $el.find("img").attr("src", url) $(".captioned-image-list ol").append($el) } + + // make the region sortable with drag-and-drop $(".captioned-image-list ol").sortable() $(".captioned-image-list ol").disableSelection() - - $("#add-image-url").keydown(pressEnter(function(e){ - var url = $(this).val() - $(this).val("") - add_image(url) - })}) - + + // delete image $(document).on("click", ".remove-image", function(){ if (confirm("Delete this image?")) { $(this).parent().remove() } }) + // populate a video field with info from our url parser $(".video .url").keydown(pressEnter(function(){ var $el = $(this) var url = $el.val() @@ -40,6 +48,7 @@ var OKAdmin = function(){ }) }})) + // fix post indexing in list-driven inputs $("form").submit(function(){ $(".image-element").each(function(index){ $(this).find("input,textarea").each(function(){ diff --git a/themes/okadmin/public/js/upload.js b/themes/okadmin/public/js/upload.js index d9fd5ed..1c9094c 100644 --- a/themes/okadmin/public/js/upload.js +++ b/themes/okadmin/public/js/upload.js @@ -2,8 +2,7 @@ var OKUpload = { action: "/_services/image", - bind: function(){ - var el = document.getElementById("file") + bind: function(el){ if (! el) return el.addEventListener("change", OKUpload.handleFileSelect) }, -- cgit v1.2.3-70-g09d2 From d96e081e9ee7f96a268c3beaf2f8d11d6146927b Mon Sep 17 00:00:00 2001 From: julie lala Date: Thu, 9 Apr 2015 16:49:00 -0400 Subject: little things --- themes/okadmin/public/css/main.css | 4 ++-- themes/okadmin/public/js/app.js | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) (limited to 'themes/okadmin/public') diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css index a01a85c..d2a4418 100644 --- a/themes/okadmin/public/css/main.css +++ b/themes/okadmin/public/css/main.css @@ -41,7 +41,7 @@ a:visited { } .admin-header .breadcrumb { - margin-left: 1em; + margin-left: 0.5em; font-size: 2em; color: rgba(0, 0, 0, 0.25); line-height: 50px; @@ -107,7 +107,7 @@ h2 { .main.resource { float: left; margin-top: 2em; - width: 80%; + width: 85%; } .main.resource > * { diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js index 170b2ab..352507f 100644 --- a/themes/okadmin/public/js/app.js +++ b/themes/okadmin/public/js/app.js @@ -12,7 +12,7 @@ var OKAdmin = function(){ var url = $(this).val() $(this).val("") add_image(url) - })}) + })) // clone and populate template function add_image(url){ @@ -46,7 +46,7 @@ var OKAdmin = function(){ $el.parent().find(".video-title").val( media.title ) $el.parent().find(".video-thumb").val( media.thumbnail ) }) - }})) + })) // fix post indexing in list-driven inputs $("form").submit(function(){ @@ -64,6 +64,7 @@ var OKAdmin = function(){ e.preventDefault() } } +} $(function(){ window.app = new OKAdmin () -- cgit v1.2.3-70-g09d2 From aeaac5a595f37edb45180385ef9f7f06a5ecb21a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 9 Apr 2015 17:06:31 -0400 Subject: CALLBACK --- themes/okadmin/public/js/app.js | 1 + 1 file changed, 1 insertion(+) (limited to 'themes/okadmin/public') diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js index 352507f..308186c 100644 --- a/themes/okadmin/public/js/app.js +++ b/themes/okadmin/public/js/app.js @@ -62,6 +62,7 @@ var OKAdmin = function(){ return function(e){ if (e.keyCode !== 13) return e.preventDefault() + fn() } } } -- cgit v1.2.3-70-g09d2 From a3655fdc4ed8a8130e67cb895df9eb7f3bc5bd07 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 9 Apr 2015 17:07:48 -0400 Subject: bind --- themes/okadmin/public/js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'themes/okadmin/public') diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js index 308186c..f37ec13 100644 --- a/themes/okadmin/public/js/app.js +++ b/themes/okadmin/public/js/app.js @@ -62,7 +62,7 @@ var OKAdmin = function(){ return function(e){ if (e.keyCode !== 13) return e.preventDefault() - fn() + fn.bind(this) } } } -- cgit v1.2.3-70-g09d2 From b47be29a9fae6e3ac2040b0d308831bbe746c14e Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 9 Apr 2015 17:10:16 -0400 Subject: lol --- themes/okadmin/public/js/app.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'themes/okadmin/public') diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js index f37ec13..8c85663 100644 --- a/themes/okadmin/public/js/app.js +++ b/themes/okadmin/public/js/app.js @@ -35,9 +35,10 @@ var OKAdmin = function(){ }) // populate a video field with info from our url parser - $(".video .url").keydown(pressEnter(function(){ + $(".video .url").on("keydown blur", pressEnter(function(){ var $el = $(this) var url = $el.val() + console.log(url) Parser.parse( url, function(media){ console.log(url,media) $el.parent().addClass("loaded") @@ -60,9 +61,10 @@ var OKAdmin = function(){ function pressEnter(fn){ return function(e){ - if (e.keyCode !== 13) return + if (e.keyCode && e.keyCode !== 13) return e.preventDefault() - fn.bind(this) + console.log("hi") + fn.apply(this) } } } -- cgit v1.2.3-70-g09d2 From 7b7ac014579bafdb16e91a98f995f4fa7f55b4f1 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 9 Apr 2015 17:17:00 -0400 Subject: alert when deleting posts --- site/db.json | 20 ++++++++++++++++++++ themes/okadmin/public/css/main.css | 5 +++++ themes/okadmin/public/js/app.js | 9 +++++++++ themes/okadmin/templates/resource.liquid | 2 +- 4 files changed, 35 insertions(+), 1 deletion(-) (limited to 'themes/okadmin/public') diff --git a/site/db.json b/site/db.json index 8107c6d..07085d4 100644 --- a/site/db.json +++ b/site/db.json @@ -28,6 +28,26 @@ "caption": "CURABITUR BLANDIT TEMPUS PORTTITOR 4" } ] + }, + { + "id": "TEST", + "title": "", + "shortname": "", + "description": "", + "video": { + "url": "", + "type": "", + "token": "", + "title": "", + "thumb": "" + }, + "category": "retail", + "images": [ + { + "uri": "https://ltho.s3.amazonaws.com/cb2698ea-9927-4ca9-972b-f227d46d25f3.png", + "caption": "" + } + ] } ], "advertising": [], diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css index d2a4418..ad940e8 100644 --- a/themes/okadmin/public/css/main.css +++ b/themes/okadmin/public/css/main.css @@ -248,10 +248,15 @@ label { li.image-element:hover .remove-image { display: block; } +li.image-element .remove-image:hover { + color: red; +} .remove-image { display: none; } +#delete_form button:hover { color: red } + .template { display: none; } diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js index 8c85663..441172f 100644 --- a/themes/okadmin/public/js/app.js +++ b/themes/okadmin/public/js/app.js @@ -59,6 +59,15 @@ var OKAdmin = function(){ }) }) + $("#delete_form").submit(function(e){ + if (confirm("Are you sure you want to delete this record?")) { + return + } + else { + e.preventDefault() + } + }) + function pressEnter(fn){ return function(e){ if (e.keyCode && e.keyCode !== 13) return diff --git a/themes/okadmin/templates/resource.liquid b/themes/okadmin/templates/resource.liquid index 48e3ef2..c321e8a 100644 --- a/themes/okadmin/templates/resource.liquid +++ b/themes/okadmin/templates/resource.liquid @@ -14,7 +14,7 @@
-
+
-- cgit v1.2.3-70-g09d2 From 669d6aec9f812e4151bffbaa4f8830cf5764ee1e Mon Sep 17 00:00:00 2001 From: Sean Fridman Date: Thu, 9 Apr 2015 20:05:14 -0400 Subject: Set inital array indices in templates --- themes/okadmin/public/js/app.js | 2 +- themes/okadmin/templates/partials/inputs.liquid | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'themes/okadmin/public') diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js index 441172f..4d13bb2 100644 --- a/themes/okadmin/public/js/app.js +++ b/themes/okadmin/public/js/app.js @@ -53,7 +53,7 @@ var OKAdmin = function(){ $("form").submit(function(){ $(".image-element").each(function(index){ $(this).find("input,textarea").each(function(){ - var field = $(this).attr("name").replace(/\[\]/, "[" + index + "]") + var field = $(this).attr("name").replace(/\[[0-9]*\]/, "[" + index + "]") $(this).attr("name", field) }) }) diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid index 7d23c9e..7cede76 100644 --- a/themes/okadmin/templates/partials/inputs.liquid +++ b/themes/okadmin/templates/partials/inputs.liquid @@ -43,8 +43,8 @@
    {% for image in spec.value %}
  1. - - + + {{image.caption}}
    2. -- cgit v1.2.3-70-g09d2 From 3f346a970dd0823816a5ad2b0dc2b7749e99845c Mon Sep 17 00:00:00 2001 From: Sean Fridman Date: Fri, 10 Apr 2015 22:34:39 -0400 Subject: Hide certain inputs in template --- app/node_modules/okadminview/index.js | 19 ++++++++++--------- themes/okadmin/public/css/main.css | 4 ++++ themes/okadmin/templates/partials/inputs.liquid | 20 +++++++++++++------- 3 files changed, 27 insertions(+), 16 deletions(-) (limited to 'themes/okadmin/public') diff --git a/app/node_modules/okadminview/index.js b/app/node_modules/okadminview/index.js index 1668900..884c4b8 100644 --- a/app/node_modules/okadminview/index.js +++ b/app/node_modules/okadminview/index.js @@ -116,15 +116,11 @@ function OKAdminView(options) { errorHandler(req, res)(new Error('No such resource ' + type)); } else { meta.get().then(function(metadata) { - view.renderResourceNew(req, res, { + var templateData = getResourceTemplateData(metadata, resource, {}); + view.renderResourceNew(req, res, assign(templateData, { success: req.flash('success'), errors: req.flash('errors'), - meta: metadata, - resource: { - type: resource.type, - spec: resource.spec - } - }); + })); }).fail(errorHandler(req, res)); } }); @@ -228,10 +224,15 @@ function getResourceTemplateData(meta, resource, data) { meta = meta || {}; resource = resource || {}; data = data || {}; - // Decorate spec with actual resource values var spec = Object.keys(resource.spec).reduce(function(cache, prop) { var value = data[prop]; - cache[prop].value = value; + var propSpec = cache[prop]; + // Decorate spec with actual resource values + propSpec.value = value; + // Some fields should not be shown to the user + if (propSpec.type === 'meta' || propSpec.static) { + propSpec.hidden = true; + } return cache; }, resource.spec); return { diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css index ad940e8..73f9735 100644 --- a/themes/okadmin/public/css/main.css +++ b/themes/okadmin/public/css/main.css @@ -278,3 +278,7 @@ li.image-element .remove-image:hover { .clear { clear: both; } + +.hidden { + display: none; +} diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid index 7cede76..99258f3 100644 --- a/themes/okadmin/templates/partials/inputs.liquid +++ b/themes/okadmin/templates/partials/inputs.liquid @@ -4,24 +4,28 @@ {% assign type = spec.type %}
    - + {% if type == 'string' %} {% elsif type == 'text' %} {% elsif type == 'enum' %} {% else %} 

    Admin template doesn't support '{{type}}' properties!

    {% endif %} -- cgit v1.2.3-70-g09d2 From 0810b806f7605a75b080ea4a6fc9010c6552095c Mon Sep 17 00:00:00 2001 From: Sean Fridman Date: Sat, 11 Apr 2015 01:41:34 -0400 Subject: Implement admin interface resource reordering --- examples/db.json | 63 ++++++++++++++++++++++----- themes/okadmin/public/css/main.css | 65 ++++++++++++++++++++++++---- themes/okadmin/public/js/app.js | 43 +++++++++++++++++- themes/okadmin/templates/index.liquid | 20 ++++++--- themes/okadmin/templates/resource.liquid | 2 +- themes/okadmin/templates/resource_new.liquid | 2 +- 6 files changed, 168 insertions(+), 27 deletions(-) (limited to 'themes/okadmin/public') diff --git a/examples/db.json b/examples/db.json index 148391a..20d4510 100644 --- a/examples/db.json +++ b/examples/db.json @@ -3,8 +3,8 @@ "bread": [ { "type": "pretzel", - "description": "really a very tasty bread! yup yes", - "color": "green", + "description": "really a very tasty bread!", + "color": "red", "id": "pretzel", "title": "Pretzel Chips", "images": [ @@ -23,7 +23,8 @@ "token": "", "title": "", "thumb": "" - } + }, + "__index": 0 }, { "type": "bagel", @@ -38,31 +39,73 @@ "token": "112498725", "title": "FW14-2H-VIDEO-V4 2", "thumb": "http://i.vimeocdn.com/video/497493142_640.jpg" - } + }, + "__index": 1 }, { "type": "pumpernickel", - "description": "grandma's recipe", + "description": "yup", "id": "pumpernickel", - "title": "Pumpernickel", + "title": "ok", "images": [ { "uri": "cool", "caption": "cool" } - ] + ], + "color": "red", + "video": { + "url": "", + "type": "", + "token": "", + "title": "", + "thumb": "" + }, + "__index": 2 + }, + { + "type": "cracker", + "title": "", + "description": "once upon a time this noble creature etc", + "color": "red", + "video": { + "url": "", + "type": "", + "token": "", + "title": "", + "thumb": "" + }, + "__index": 4, + "id": "cracker" + }, + { + "type": "croissant", + "title": "", + "description": "wow just wow", + "color": "red", + "video": { + "url": "", + "type": "", + "token": "", + "title": "", + "thumb": "" + }, + "__index": 3, + "id": "croissant" } ], "page": [ { "title": "About Us", "body": "Just a small bakery", - "id": "about" + "id": "about", + "__index": 1 }, { - "title": "contact", + "title": "ok...", "body": "2406 Old Rd, San Juan Bautista", - "id": "contact" + "id": "contact", + "__index": 0 } ] } \ No newline at end of file diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css index 73f9735..3762fd4 100644 --- a/themes/okadmin/public/css/main.css +++ b/themes/okadmin/public/css/main.css @@ -14,11 +14,12 @@ html, body { background-attachment: scroll; } -ul { +ul, ol { padding: 0; list-style: none; } +.main.index .resource-category button, a { color: #A200FF; text-decoration: none; @@ -26,6 +27,7 @@ a { text-transform: uppercase; } +.main.index .resource-category button:hover, a:hover { border-bottom: 1px solid #A200FF; } @@ -65,7 +67,12 @@ a:visited { border: 2px solid #ddd; } -nav { +.main.index .resource-category.active li:before { + content: "፧"; + margin-right: 1em; +} + +.resource-nav { background: white; width: 10%; margin: 2.5em 1em; @@ -89,21 +96,63 @@ h2 { transform: rotate(-1deg); } -.main.index .resource-category a.add-new { - border-bottom: 3px solid rgba(0, 0, 0, 0); +.main.index .resource-category nav { float: right; - font-size: 1.5em; +} + +.main.index .resource-category.active ol { + cursor: -webkit-grab; + cursor: grab; +} + +.main.index .resource-category.active li a { + pointer-events: none; +} + + /* Makes the button look like a link */ +.main.index .resource-category button { + background: none !important; + height: 1.5em; + border: none; + padding: 0 !important; + font: inherit; + cursor: pointer; +} + +.main.index .resource-category .btn { + border-bottom: 3px solid rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0.25); + line-height: 20px; } -.main.index .resource-category li { - margin: 1em 0; +.main.index .resource-category .btn { + display: none; +} + +.main.index .resource-category .btn.active { + display: inline; } -.main.index .resource-category a.add-new:hover { +.main.index .resource-category .btn:hover { border-bottom: 3px solid rgba(0, 0, 0, 0.25); } +.main.index .resource-category .btn { + margin-right: 1em; +} + +.main.index .resource-category .btn:last-child { + margin-right: 0; +} +.main.index .resource-category .add-btn { + font-size: 20px; +} + +.main.index .resource-category li { + margin: 1em 0; +} + + .main.resource { float: left; margin-top: 2em; diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js index 4d13bb2..1ab9956 100644 --- a/themes/okadmin/public/js/app.js +++ b/themes/okadmin/public/js/app.js @@ -50,7 +50,7 @@ var OKAdmin = function(){ })) // fix post indexing in list-driven inputs - $("form").submit(function(){ + $(".main.resource form").submit(function(){ $(".image-element").each(function(index){ $(this).find("input,textarea").each(function(){ var field = $(this).attr("name").replace(/\[[0-9]*\]/, "[" + index + "]") @@ -67,6 +67,47 @@ var OKAdmin = function(){ e.preventDefault() } }) + + $(".resource-category").on("click", ".edit-btn", function(e) { + e.preventDefault(); + var $parent = $(e.delegateTarget); + var $editBtn = $parent.find(".edit-btn"); + var $cancelBtn = $parent.find(".cancel-btn"); + var $saveBtn = $parent.find(".save-btn"); + var $ol = $parent.find("ol"); + var toggles = [$parent, $cancelBtn, $saveBtn, $editBtn]; + + $ol.sortable(); + $ol.disableSelection(); + toggle(); + + $cancelBtn.one("click", function(e) { + $ol.sortable("cancel"); + $ol.enableSelection(); + toggle(); + }); + + $saveBtn.one("click", function(e) { + $ol.sortable(); + toggle(); + }); + + function toggle() { + toggles.forEach(function($el) { + $el.toggleClass('active'); + }) + } + }); + + $(".resource-category").on("submit", "form", function(e) { + var $parent = $(e.delegateTarget); + $parent.find(".resource-input").each(function(index) { + var $input = $(this); + var parsed = JSON.parse($input.val()); + parsed.__index = index; + $input.val(JSON.stringify(parsed)); + }) + }); function pressEnter(fn){ return function(e){ diff --git a/themes/okadmin/templates/index.liquid b/themes/okadmin/templates/index.liquid index 830fb2e..0672613 100644 --- a/themes/okadmin/templates/index.liquid +++ b/themes/okadmin/templates/index.liquid @@ -8,19 +8,27 @@ {% assign resource = pair[1] %}
    -
    +

    {{name | capitalize}}

    - +
diff --git a/themes/okadmin/templates/resource.liquid b/themes/okadmin/templates/resource.liquid index 53cd83e..8078778 100644 --- a/themes/okadmin/templates/resource.liquid +++ b/themes/okadmin/templates/resource.liquid @@ -2,7 +2,7 @@ {% include 'partials/flash' %} -