From ad6447f5f24e14a989c90a55e304d6b4b9cf5300 Mon Sep 17 00:00:00 2001
From: Samuel Georges <sam@daftspunk.com>
Date: Mon, 23 Mar 2015 20:03:37 +1100
Subject: [PATCH] Fixes #995 - Adds sorting to repeater

---
 .../repeater/assets/css/repeater.css          | 64 +++++++++++++++----
 .../repeater/assets/js/repeater.js            | 26 +++++---
 .../repeater/assets/less/repeater.less        | 42 +++++++++++-
 .../repeater/partials/_repeater.htm           |  6 +-
 .../repeater/partials/_repeater_item.htm      |  4 +-
 5 files changed, 116 insertions(+), 26 deletions(-)

diff --git a/modules/backend/formwidgets/repeater/assets/css/repeater.css b/modules/backend/formwidgets/repeater/assets/css/repeater.css
index 6341a6eb3..c01f4d61c 100644
--- a/modules/backend/formwidgets/repeater/assets/css/repeater.css
+++ b/modules/backend/formwidgets/repeater/assets/css/repeater.css
@@ -1,13 +1,52 @@
 .field-repeater {
   padding-top: 5px;
 }
-.field-repeater .field-repeater-item {
+.field-repeater ul.field-repeater-items,
+.field-repeater li.field-repeater-item {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.field-repeater ul.field-repeater-items > li.dragged {
+  opacity: .7;
+  position: absolute;
+  padding-top: 15px;
+  padding-right: 15px;
+  z-index: 2000;
+  background-color: #ffffff;
+  border: 1px dashed #dbdee0;
+}
+.field-repeater ul.field-repeater-items > li.dragged .repeater-item-remove {
+  opacity: 0;
+}
+.field-repeater ul.field-repeater-items > li.placeholder {
+  display: block;
+  position: relative;
+  height: 25px;
+  margin-bottom: 5px;
+}
+.field-repeater ul.field-repeater-items > li.placeholder:before {
+  display: block;
+  position: absolute;
+  font-family: FontAwesome;
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  -webkit-font-smoothing: antialiased;
+  *margin-right: .3em;
+  content: "\f054";
+  color: #d35714;
+  left: -10px;
+  top: 8px;
+  z-index: 2000;
+}
+.field-repeater li.field-repeater-item {
   position: relative;
   margin-left: 5px;
   padding-left: 15px;
   border-left: 1px solid #dbdee0;
 }
-.field-repeater .field-repeater-item:before {
+.field-repeater li.field-repeater-item:before {
   color: #bdc3c7;
   font-family: FontAwesome;
   font-weight: normal;
@@ -21,11 +60,11 @@
   left: -4px;
   top: -2px;
 }
-.field-repeater .field-repeater-item .field-repeater-form {
+.field-repeater li.field-repeater-item .field-repeater-form {
   position: relative;
   top: -7px;
 }
-.field-repeater .field-repeater-item .repeater-item-handle {
+.field-repeater li.field-repeater-item .repeater-item-handle {
   position: absolute;
   top: -6px;
   left: -10px;
@@ -33,28 +72,29 @@
   background: #f9f9f9;
   cursor: move;
   opacity: 0;
+  border-radius: 999px;
   -webkit-transition: opacity 0.5s;
   transition: opacity 0.5s;
 }
-.field-repeater .field-repeater-item .repeater-item-handle:hover {
+.field-repeater li.field-repeater-item .repeater-item-handle:hover {
   color: #999;
 }
-.field-repeater .field-repeater-item .repeater-item-remove {
+.field-repeater li.field-repeater-item .repeater-item-remove {
   position: absolute;
   top: -10px;
   right: 0;
   z-index: 90;
 }
-.field-repeater .field-repeater-item .repeater-item-handle,
-.field-repeater .field-repeater-item .repeater-item-remove {
+.field-repeater li.field-repeater-item .repeater-item-handle,
+.field-repeater li.field-repeater-item .repeater-item-remove {
   width: 20px;
   height: 20px;
   text-align: center;
 }
-.field-repeater .field-repeater-item:hover .repeater-item-handle,
-.field-repeater .field-repeater-item:active .repeater-item-handle,
-.field-repeater .field-repeater-item:hover .repeater-item-remove,
-.field-repeater .field-repeater-item:active .repeater-item-remove {
+.field-repeater li.field-repeater-item:hover .repeater-item-handle,
+.field-repeater li.field-repeater-item:active .repeater-item-handle,
+.field-repeater li.field-repeater-item:hover .repeater-item-remove,
+.field-repeater li.field-repeater-item:active .repeater-item-remove {
   opacity: 1;
 }
 .field-repeater .field-repeater-add-item {
diff --git a/modules/backend/formwidgets/repeater/assets/js/repeater.js b/modules/backend/formwidgets/repeater/assets/js/repeater.js
index b0a255d06..348fc1830 100644
--- a/modules/backend/formwidgets/repeater/assets/js/repeater.js
+++ b/modules/backend/formwidgets/repeater/assets/js/repeater.js
@@ -30,14 +30,24 @@
     }
 
     Repeater.prototype.init = function() {
-        // Public properties
-        this.something  = false
-
         // Init with no arguments
+        this.bindSorting()
     }
 
-    Repeater.prototype.someFunction = function() {
-        // Do stuff
+    Repeater.prototype.bindSorting = function() {
+
+        var sortableOptions = {
+            // useAnimation: true,
+            handle: '.repeater-item-handle',
+            nested: false
+        }
+
+        $('ul.field-repeater-items', this.$el).sortable(sortableOptions)
+    }
+
+    Repeater.prototype.unbind = function() {
+        this.$el.find('ul.field-repeater-items').sortable('destroy')
+        this.$el.removeData('oc.repeater')
     }
 
     // FIELD REPEATER PLUGIN DEFINITION
@@ -55,7 +65,7 @@
             if (typeof option == 'string') result = data[option].apply(data, args)
             if (typeof result != 'undefined') return false
         })
-        
+
         return result ? result : this
     }
 
@@ -72,8 +82,8 @@
     // FIELD REPEATER DATA-API
     // ===============
 
-    $(document).on('click.oc.myplugin', '[data-control="fieldrepeater"]', function() {
-        $(this).fieldRepeater()
+    $(document).render(function() {
+        $('[data-control="fieldrepeater"]').fieldRepeater()
     });
 
 }(window.jQuery);
\ No newline at end of file
diff --git a/modules/backend/formwidgets/repeater/assets/less/repeater.less b/modules/backend/formwidgets/repeater/assets/less/repeater.less
index 18d3090a9..742d86bfb 100644
--- a/modules/backend/formwidgets/repeater/assets/less/repeater.less
+++ b/modules/backend/formwidgets/repeater/assets/less/repeater.less
@@ -4,7 +4,46 @@
 
     padding-top: 5px;
 
-    .field-repeater-item {
+    ul.field-repeater-items,
+    li.field-repeater-item {
+        padding: 0;
+        margin: 0;
+        list-style: none;
+    }
+
+    ul.field-repeater-items > li {
+        &.dragged {
+            opacity: .7;
+            position: absolute;
+            padding-top: 15px;
+            padding-right: 15px;
+            z-index: 2000;
+            background-color: @body-bg;
+            border: 1px dashed #dbdee0;
+
+            .repeater-item-remove {
+                opacity: 0;
+            }
+        }
+
+        &.placeholder {
+            display: block;
+            position: relative;
+            height: 25px;
+            margin-bottom: 5px;
+            &:before {
+                display: block;
+                position: absolute;
+                .icon(@chevron-right);
+                color: #d35714;
+                left: -10px;
+                top: 8px;
+                z-index: 2000;
+            }
+        }
+    }
+
+    li.field-repeater-item {
         position: relative;
         margin-left: 5px;
         padding-left: 15px;
@@ -32,6 +71,7 @@
             background: @color-body-bg;
             cursor: move;
             opacity: 0;
+            border-radius: 999px;
             .transition(~'opacity 0.5s');
             &:hover {
                 color: #999;
diff --git a/modules/backend/formwidgets/repeater/partials/_repeater.htm b/modules/backend/formwidgets/repeater/partials/_repeater.htm
index 4d53459dc..cdb9fe2c9 100644
--- a/modules/backend/formwidgets/repeater/partials/_repeater.htm
+++ b/modules/backend/formwidgets/repeater/partials/_repeater.htm
@@ -1,13 +1,13 @@
-<div class="field-repeater">
+<div class="field-repeater" data-control="fieldrepeater">
 
-    <div id="<?= $this->getId('items') ?>" class="field-repeater-items">
+    <ul id="<?= $this->getId('items') ?>" class="field-repeater-items">
         <?php foreach ($this->formWidgets as $index => $widget): ?>
             <?= $this->makePartial('repeater_item', [
                 'widget' => $widget,
                 'indexValue' => $index
             ]) ?>
         <?php endforeach ?>
-    </div>
+    </ul>
 
     <div class="field-repeater-add-item loading-indicator-container indicator-center">
         <a
diff --git a/modules/backend/formwidgets/repeater/partials/_repeater_item.htm b/modules/backend/formwidgets/repeater/partials/_repeater_item.htm
index 1448ff277..be62b92c2 100644
--- a/modules/backend/formwidgets/repeater/partials/_repeater_item.htm
+++ b/modules/backend/formwidgets/repeater/partials/_repeater_item.htm
@@ -1,4 +1,4 @@
-<div class="field-repeater-item">
+<li class="field-repeater-item">
 
     <div class="repeater-item-handle">
         <i class="icon-bars"></i>
@@ -25,4 +25,4 @@
 
     <input type="hidden" name="<?= $indexName ?>" value="<?= $indexValue ?>" />
 
-</div> 
\ No newline at end of file
+</li>
\ No newline at end of file