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(-) 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' %} -