First revision

README.md

@@ -1,4 +1,15 @@
-sortablestringlist
-==================
+# Sortable String List
 
-Sortable string list property editor for Umbraco 7.x
+A property editor for Umbraco 7.x to provide a sortable list of strings. 
+
+## Screenshots
+### In action
+![example](example.png)
+
+### Configuration
+![config options](options.png)
+
+## Installation
+
+1. Clone the repository to `/App_Plugins/SortableStringList`
+2. A property value converter is available in [this gist](https://gist.github.com/ryanlewis/9eb27975d690b5f12e6c). This can be saved in your `/App_Code` directory

package.manifest

@@ -0,0 +1,40 @@
+{
+  propertyEditors: [
+    {
+      alias: "Epiphany.SortableStringList",
+      name: "Sortable String List",
+      valueType: 'JSON',
+      editor:
+      {
+        view: "~/App_Plugins/SortableStringList/sortablestringlist.html"
+      },
+
+      prevalues: {
+        fields: [
+          {
+            label: 'Minimum',
+            description: 'Minimum number of strings',
+            key: 'min',
+            view: 'number'
+          },
+          {
+            label: 'Maximum',
+            description: 'Maximum number of strings. Use 0 for infinite',
+            key: 'max',
+            view: 'number'
+          },
+          {
+            label: 'Allow blank strings',
+            description: 'If unchecked, blank strings will cause a validation error',
+            key: 'allowBlanks',
+            view: 'boolean'
+          }
+        ]
+      },
+    }
+  ],
+
+  javascript: [
+    '~/App_Plugins/SortableStringList/sortablestringlist.js',
+  ]
+}

sortablestringlist.css

@@ -0,0 +1,19 @@
+.stringlist-property div {
+    margin-bottom: 8px;
+}
+
+.stringlist-property .icon {
+    margin: 0 2px;
+}
+
+.stringlist-property .handle {
+    display: inline-block;
+}
+
+.stringlist-property  .stringlist-remove:hover {
+    text-decoration: none;
+}
+
+.stringlist-property  .stringlist-remove.disabled {
+    color: #999;
+}

sortablestringlist.html

@@ -0,0 +1,28 @@
+<div ng-controller="EpiphanyStringListController" class="stringlist-property">
+
+    <div ui-sortable="{{sortableOptions}}" ng-model="model.value">
+        <div ng-repeat="str in model.value track by $index">
+            <input type="text" class="input-xxlarge"
+                   name="stringfield"
+                   index="{{$index}}"
+                   ng-model="model.value[$index]"
+                   ng-keydown="onKeydown($event, $index)"
+                   want-focus="{{focusedRow}}"
+                   ng-required="{{allowBlanks}}" />
+
+            <div class="handle">
+                <i class="icon icon-navigation"></i>
+            </div>
+
+            <a class="stringlist-remove" prevent-default
+               ng-click="hasMinimum() || removeRow($index)"
+               ng-class="{disabled: hasMinimum()}">
+                <i class="icon icon-remove"></i>
+            </a>
+
+        </div>
+    </div>
+
+
+    <button type="button" class="btn" ng-click="addRow()" ng-disabled="hasMaximum()" ng-class="{disabled: hasMaximum()}"><i class="icon icon-add"></i> Add</button>
+</div>

sortablestringlist.js

@@ -0,0 +1,69 @@
+var app = angular.module("umbraco");
+
+app.directive('wantFocus', function ($timeout) {
+  return {
+    link: function (scope, el, attrs) {
+      scope.$watch(attrs.wantFocus, function (value) {
+        if (value == attrs.index) {
+          $timeout(function () {
+            el[0].focus();
+          });
+        }
+      });
+    }
+  }
+});
+
+app.controller("EpiphanyStringListController", ['$scope', 'assetsService', function ($scope, assetsService) {
+
+  function isNumeric(n) {
+    return !isNaN(parseFloat(n)) && isFinite(n);
+  }
+
+  $scope.focusedRow = -1;
+
+  $scope.sortableOptions = {
+    handle: '.handle'
+  }
+
+  if ($scope.model.value instanceof Array == false) {
+    $scope.model.value = [''];
+  }
+
+  $scope.min = isNumeric($scope.model.config.min) ? $scope.model.config.min : 0;
+  $scope.max = isNumeric($scope.model.config.max) && $scope.model.config.max !== 0 ? $scope.model.config.max : Number.MAX_VALUE;
+  $scope.allowBlanks = $scope.model.config.allowBlanks;
+
+  $scope.addRow = function () {
+    $scope.model.value.push('');
+  }
+
+  $scope.hasMinimum = function() {
+    return $scope.model.value.length == $scope.min;
+  }
+
+  $scope.hasMaximum = function() {
+    return $scope.model.value.length == $scope.max;
+  }
+
+  $scope.focusRow = function(index) {
+    $scope.focusedRow = index;
+  }
+
+  $scope.onKeydown = function (ev, index) {
+    // enter
+    var len = $scope.model.value.length;
+    if (ev.which == 13 && index + 1 == len && len < $scope.max) {
+      $scope.addRow();
+      $scope.focusRow($scope.model.value.length - 1);
+      ev.preventDefault();
+      return;
+    }
+  }
+
+  $scope.removeRow = function(index) {
+    $scope.model.value.splice(index, 1);
+  }
+
+  assetsService.loadCss('/App_Plugins/SortableStringList/sortablestringlist.css');
+}]);