From 07229c4bd2fa6568f951d31d3ac69f0dee100d1a Mon Sep 17 00:00:00 2001
From: AndyButland <abutland73@gmail.com>
Date: Fri, 3 Jan 2014 17:08:33 +0100
Subject: [PATCH 1/2] Up/down buttons for changing the order of related links

---
 .../propertyeditors/relatedlinks/relatedlinks.controller.js | 6 ++++++
 .../views/propertyeditors/relatedlinks/relatedlinks.html    | 2 ++
 2 files changed, 8 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.controller.js
index e5e1fa3a14..0153b96d57 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.controller.js
@@ -92,6 +92,12 @@
                 link.isInternal = !link.isInternal;
                 $event.preventDefault();
             };
+
+            $scope.move = function (index, direction) {
+                var temp = $scope.model.value[index];
+                $scope.model.value[index] = $scope.model.value[index + direction];
+                $scope.model.value[index + direction] = temp;                
+            };
             
             function select(data) {
                 if ($scope.currentEditLink != null) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html
index 9e260fa2e0..02d5e59e8a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html
@@ -40,6 +40,8 @@
                     <td>
                        
                         <div class="btn-group" ng-show="!link.edit">
+                            <button type="button" class="btn btn-default" ng-click="move($index, -1)" ng-disabled="$first">Up</button>
+                            <button type="button" class="btn btn-default" ng-click="move($index, 1)" ng-disabled="$last">Down</button>
                             <button type="button" class="btn btn-default" ng-click="edit($index)">Edit</button>
                             <button type="button" class="btn btn-default" ng-click="delete($index)">Delete</button>
                         </div>

From c9d1123f0ae4d70a562be27e464c533d01c2cc06 Mon Sep 17 00:00:00 2001
From: AndyButland <abutland73@gmail.com>
Date: Fri, 28 Feb 2014 14:42:45 +0100
Subject: [PATCH 2/2] Removed related links sorting up/down buttons and updated
 to use drag-drop

---
 .../relatedlinks/relatedlinks.controller.js   |  41 ++++-
 .../relatedlinks/relatedlinks.html            | 145 +++++++++---------
 2 files changed, 111 insertions(+), 75 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.controller.js
index 0153b96d57..d15284628c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.controller.js
@@ -98,7 +98,42 @@
                 $scope.model.value[index] = $scope.model.value[index + direction];
                 $scope.model.value[index + direction] = temp;                
             };
-            
+
+            $scope.sortableOptions = {
+                containment: 'parent',
+                cursor: 'move',
+                helper: function (e, ui) {
+                    // When sorting <trs>, the cells collapse.  This helper fixes that: http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/
+                    ui.children().each(function () {
+                        $(this).width($(this).width());
+                    });
+                    return ui;
+                },
+                items: '> tr',
+                tolerance: 'pointer',
+                update: function (e, ui) {
+                    // Get the new and old index for the moved element (using the URL as the identifier)
+                    var newIndex = ui.item.index();
+                    var movedLinkUrl = ui.item.attr('data-link');
+                    var originalIndex = getElementIndexByUrl(movedLinkUrl);
+
+                    // Move the element in the model
+                    var movedElement = $scope.model.value[originalIndex];
+                    $scope.model.value.splice(originalIndex, 1);
+                    $scope.model.value.splice(newIndex, 0, movedElement);
+                }
+            };
+
+            function getElementIndexByUrl(url) {
+                for (var i = 0; i < $scope.model.value.length; i++) {
+                    if ($scope.model.value[i].link === url) {
+                        return i;
+                    }
+                }
+
+                return -1;
+            }
+
             function select(data) {
                 if ($scope.currentEditLink != null) {
                     $scope.currentEditLink.internal = data.id;
@@ -107,8 +142,6 @@
                     $scope.newInternal = data.id;
                     $scope.newInternalName = data.name;
                 }
-            }
-
-            
+            }            
 
         });
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html
index 02d5e59e8a..4320a2f1b8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html
@@ -1,80 +1,83 @@
 <div class="umb-editor umb-relatedlinks" ng-controller="Umbraco.PropertyEditors.RelatedLinksController">
-        <table class="table table-striped">
-            <thead>
-                <tr>
-                    <td>Caption</td>
-                    <td>Link</td>
-                    <td>New window</td>
+    <table class="table table-striped">
+        <thead>
+            <tr>
+                <td></td>
+                <td>Caption</td>
+                <td>Link</td>
+                <td>New window</td>
+                <td></td>
+            </tr>
+        </thead>
+        <tbody ui-sortable="sortableOptions">
+            <tr ng-repeat="link in model.value" data-link="{{link.link}}">
+                <td style="width: 20px"><i class="icon icon-navigation handle"></i></td>
+                <td style="word-wrap:break-word; word-break: break-all">
+                    <span ng-show="!link.edit">{{link.caption}}</span>
+                    <input type="text" ng-model="link.caption" ng-show="link.edit" />
+                </td>
+                <td style="word-wrap:break-word; word-break: break-all">
+                    <div ng-show="!link.edit">
+                        <a href="{{link.link}}" target="_blank" ng-show="!link.isInternal">{{link.link}}</a>
+                        <a href="#/content/content/edit/{{link.internal}}" target="_blank" ng-show="link.isInternal" ng-bind="link.iternalName">
+
+                        </a>
+                    </div>
+                    <div ng-show="link.edit">
+                        <div ng-show="!link.isInternal">
+                            <input type="text" ng-model="link.link" /><br />
+                            or <a href="#" ng-click="switchLinkType($event,link)">choose internal page</a>
+                        </div>
+
+                        <div ng-show="link.isInternal">
+                            <span ng-bind="link.internalName"></span> <a href="#" ng-click="selectInternal($event,link)">Choose</a><br />
+                            or <a href="#" ng-click="switchLinkType($event,link)">enter external link</a>
+                        </div>
+                    </div>
+                </td>
+                <td>
+                    <span ng-show="!link.edit">{{link.newWindow}}</span>
+                    <input type="checkbox" ng-model="link.newWindow" ng-show="link.edit" />
+                </td>
+                <td>
+
+                    <div class="btn-group" ng-show="!link.edit">
+                        <button type="button" class="btn btn-default" ng-click="edit($index)">Edit</button>
+                        <button type="button" class="btn btn-default" ng-click="delete($index)">Delete</button>
+                    </div>
+                    <div class="btn-group" ng-show="link.edit">
+                        <button type="button" class="btn btn-default" ng-click="cancelEdit($index)">Cancel</button>
+                        <button type="button" class="btn btn-default" ng-click="cancelEdit($index)">Save</button>
+                    </div>
+
+                </td>
+            </tr>
+        </tbody>
+        <tfoot>
+            <tr>
+                <form ng-submit="add()">
                     <td></td>
-                </tr>
-            </thead>
-            <tbody>
-                <tr ng-repeat="link in model.value">
-                    <td style="word-wrap:break-word; word-break: break-all">
-                        <span ng-show="!link.edit">{{link.caption}}</span>
-                        <input type="text" ng-model="link.caption" ng-show="link.edit"/>
-                    </td>
-                    <td style="word-wrap:break-word; word-break: break-all">
-                        <div ng-show="!link.edit">
-                            <a href="{{link.link}}" target="_blank" ng-show="!link.isInternal">{{link.link}}</a>
-                            <a href="#/content/content/edit/{{link.internal}}" target="_blank" ng-show="link.isInternal" ng-bind="link.iternalName">
-                               
-                            </a>
-                        </div>
-                        <div ng-show="link.edit">
-                            <div ng-show="!link.isInternal">
-                                <input type="text" ng-model="link.link"/><br />
-                                or <a href="#" ng-click="switchLinkType($event,link)">choose internal page</a>
-                            </div>
-                            
-                            <div ng-show="link.isInternal">
-                                <span ng-bind="link.internalName"></span> <a href="#" ng-click="selectInternal($event,link)">Choose</a><br/>
-                                or <a href="#" ng-click="switchLinkType($event,link)">enter external link</a>
-                            </div>
-                        </div>
-                    </td>
+                    <td><input type="text" ng-model="newCaption" placeholder="Enter a new caption" val-highlight="hasError" /></td>
                     <td>
-                        <span ng-show="!link.edit">{{link.newWindow}}</span>
-                        <input type="checkbox" ng-model="link.newWindow" ng-show="link.edit"/>
+                        <div ng-show="addExternal">
+                            <input type="text" ng-model="newLink" placeholder="Enter the link" />
+                            <br /> or
+                            <a href="#" ng-click="switch($event)">choose internal page</a>
+                        </div>
+
+                        <div ng-show="!addExternal">
+                            <span ng-bind="newInternalName"></span> <a href="#" ng-click="internal($event)">Choose</a><br />
+                            or <a href="#" ng-click="switch($event)">enter external link</a>
+                        </div>
                     </td>
+                    <td><input type="checkbox" ng-model="newNewWindow" /> </td>
                     <td>
-                       
-                        <div class="btn-group" ng-show="!link.edit">
-                            <button type="button" class="btn btn-default" ng-click="move($index, -1)" ng-disabled="$first">Up</button>
-                            <button type="button" class="btn btn-default" ng-click="move($index, 1)" ng-disabled="$last">Down</button>
-                            <button type="button" class="btn btn-default" ng-click="edit($index)">Edit</button>
-                            <button type="button" class="btn btn-default" ng-click="delete($index)">Delete</button>
-                        </div>
-                        <div class="btn-group" ng-show="link.edit">
-                            <button type="button" class="btn btn-default" ng-click="cancelEdit($index)">Cancel</button>
-                            <button type="button" class="btn btn-default" ng-click="cancelEdit($index)">Save</button>
-                        </div>
-                        
-                    </td>
-                </tr>
-                <tr>
-                    <form ng-submit="add()">
-                    <td><input type="text" ng-model="newCaption" placeholder="Enter a new caption" val-highlight="hasError"/></td>
-                        <td>
-                            <div ng-show="addExternal">
-                                <input type="text" ng-model="newLink" placeholder="Enter the link"/>
-                                <br/> or
-                                <a href="#" ng-click="switch($event)">choose internal page</a>
-                            </div>
-                            
-                            <div ng-show="!addExternal">
-                                <span ng-bind="newInternalName"></span> <a href="#" ng-click="internal($event)">Choose</a><br/>
-                                or <a href="#" ng-click="switch($event)">enter external link</a>
-                            </div>
-                        </td>
-                    <td><input type="checkbox" ng-model="newNewWindow"/> </td>
-                        <td>
                         <div class="btn-group">
-                            <input type="submit" class="btn btn-default" value="Add"/>
+                            <input type="submit" class="btn btn-default" value="Add" />
                         </div>
                     </td>
-                    </form>
-                </tr>
-            </tbody>
-        </table>
+                </form>
+            </tr>
+        </tfoot>
+    </table>
 </div>
\ No newline at end of file