Implement admin interface resource reordering

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] %}
 
     <section class="resource-category {{name}}">
-      <form action="{{resource.type}}/batch/" method="POST">
+      <form action="{{resource.type}}/__batch/" method="POST">
         <header>
           <h2>{{name | capitalize}}</h2>
         </header>
           <input type="hidden" name="_method" value="PUT">
-          <ul class="resource-list">
+          <ol class="resource-list">
           {% for data in resource.data %}
-            <li><a href="{{resource.type}}/{{data.id}}/">{{data.id}}</a></li>
-            <input type="hidden" name="{{resource.type}}[{{forloop.index0}}]" value='{{data | stringify}}'>
+            <li>
+              <a href="{{resource.type}}/{{data.id}}/">{{data.id}}</a>
+              <input class="resource-input" type="hidden" name="{{resource.type}}[{{forloop.index0}}]" value='{{data | stringify}}'>
+            </li>
           {% endfor %}
-          </ul>
+          </ol>
         <footer>
-          <a class="add-new" href="{{resource.type}}/new/">+</a>
+          <nav>
+            <a class="btn cancel-btn" href="#">cancel</a>
+            <button type="submit"
+                class="btn save-btn" href="#">save</button>
+            <a class="btn edit-btn active" href="#">edit</a>
+            <a class="btn add-btn active" href="{{resource.type}}/new/">+</a>
+          </nav>
         </footer>
       </form>
     </section>
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' %}
 
-<nav>
+<nav class="resource-nav">
   <a href="../..">Back</a>
 </nav>
 
diff --git a/themes/okadmin/templates/resource_new.liquid b/themes/okadmin/templates/resource_new.liquid
index 8e80171..d059445 100644
--- a/themes/okadmin/templates/resource_new.liquid
+++ b/themes/okadmin/templates/resource_new.liquid
@@ -2,7 +2,7 @@
 
 {% include 'partials/flash' %}
 
-<nav>
+<nav class="resource-nav">
   <a href="../..">Back</a>
 </nav>