Ensure colors are sorted

src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js

@@ -1,12 +1,68 @@
 function ColorPickerController($scope) {
-    $scope.toggleItem = function (color) {
-        if ($scope.model.value == color) {
+
+    //setup the default config
+    var config = {
+        items: [],
+        multiple: false
+    };
+
+    //map the user config
+    angular.extend(config, $scope.model.config);
+
+    //map back to the model
+    $scope.model.config = config;
+
+    function convertArrayToDictionaryArray(model) {
+        //now we need to format the items in the dictionary because we always want to have an array
+        var newItems = [];
+        for (var i = 0; i < model.length; i++) {
+            newItems.push({ id: model[i], sortOrder: 0, value: model[i] });
+        }
+
+        return newItems;
+    }
+
+
+    function convertObjectToDictionaryArray(model) {
+        //now we need to format the items in the dictionary because we always want to have an array
+        var newItems = [];
+        var vals = _.values($scope.model.config.items);
+        var keys = _.keys($scope.model.config.items);
+
+        for (var i = 0; i < vals.length; i++) {
+            var label = vals[i].value ? vals[i].value : vals[i];
+            newItems.push({ id: keys[i], sortOrder: vals[i].sortOrder, value: label });
+        }
+
+        return newItems;
+    }
+
+    if (angular.isArray($scope.model.config.items)) {
+        //PP: I dont think this will happen, but we have tests that expect it to happen..
+        //if array is simple values, convert to array of objects
+        if (!angular.isObject($scope.model.config.items[0])) {
+            $scope.model.config.items = convertArrayToDictionaryArray($scope.model.config.items);
+        }
+    }
+    else if (angular.isObject($scope.model.config.items)) {
+        $scope.model.config.items = convertObjectToDictionaryArray($scope.model.config.items);
+    }
+    else {
+        throw "The items property must be either an array or a dictionary";
+    }
+
+
+    //sort the values
+    $scope.model.config.items.sort(function (a, b) { return (a.sortOrder > b.sortOrder) ? 1 : ((b.sortOrder > a.sortOrder) ? -1 : 0); });
+
+    $scope.toggleItem = function (item) {
+        if ($scope.model.value == item.value) {
             $scope.model.value = "";
             //this is required to re-validate
             $scope.propertyForm.modelValue.$setViewValue($scope.model.value);
         }
         else {
-            $scope.model.value = color;
+            $scope.model.value = item.value;
             //this is required to re-validate
             $scope.propertyForm.modelValue.$setViewValue($scope.model.value);
         }
@@ -19,6 +75,7 @@ function ColorPickerController($scope) {
             errorKey: "required"
         };
     }
+
     $scope.isConfigured = $scope.model.config && $scope.model.config.items && _.keys($scope.model.config.items).length > 0;
 }
 

src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.html

@@ -5,8 +5,8 @@
 	</div>
 
     <ul class="thumbnails color-picker">
-        <li ng-repeat="(key, val) in model.config.items" ng-class="{active: model.value === val}">
-            <a ng-click="toggleItem(val)" class="thumbnail" hex-bg-color="{{val}}">
+        <li ng-repeat="item in model.config.items" ng-class="{active: model.value === item.value}">
+            <a ng-click="toggleItem(item)" class="thumbnail" hex-bg-color="{{item.value}}">
 
             </a>
         </li>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js

@@ -40,17 +40,20 @@
             var items = [];
             for (var i in $scope.model.value) {
                 items.push({
-                    value: $scope.model.value[i],
+                    value: $scope.model.value[i].value,
+                    sortOrder: $scope.model.value[i].sortOrder,
                     id: i
                 });
             }
 
+            //ensure the items are sorted by the provided sort order
+            items.sort(function (a, b) { return (a.sortOrder > b.sortOrder) ? 1 : ((b.sortOrder > a.sortOrder) ? -1 : 0); });
+
             //now make the editor model the array
             $scope.model.value = items;
         }
 
         $scope.remove = function (item, evt) {
-
             evt.preventDefault();
 
             $scope.model.value = _.reject($scope.model.value, function (x) {
@@ -60,7 +63,6 @@
         };
 
         $scope.add = function (evt) {
-
             evt.preventDefault();
 
             if ($scope.newColor) {

src/Umbraco.Web/PropertyEditors/ColorListPreValueEditor.cs

@@ -29,8 +29,23 @@ public ColorListPreValueEditor()
         public override IDictionary<string, object> ConvertDbToEditor(IDictionary<string, object> defaultPreVals, PreValueCollection persistedPreVals)
         {
             var dictionary = persistedPreVals.FormatAsDictionary();
-            var arrayOfVals = dictionary.Select(item => item.Value).ToList();
-            return new Dictionary<string, object> { { "items", arrayOfVals.ToDictionary(x => x.Id, x => x.Value) } };
+            var arrayOfVals = dictionary.Select(item => item.Value)
+                //ensure they are sorted - though this isn't too important because in json in may not maintain
+                // the sorted order and the js has to sort anyways.
+                .OrderBy(x => x.SortOrder)
+                .ToList();
+
+            return new Dictionary<string, object> { { "items", arrayOfVals.ToDictionary(x => x.Id, x => PreValueAsDictionary(x)) } };
+        }
+
+        /// <summary>
+        /// Formats the prevalue as a dictionary (as we need to return not just the value, but also the sort-order, to the client)
+        /// </summary>
+        /// <param name="preValue">The prevalue to format</param>
+        /// <returns>Dictionary object containing the prevalue formatted with the field names as keys and the value of those fields as the values</returns>
+        private IDictionary<string, object> PreValueAsDictionary(PreValue preValue)
+        {
+            return new Dictionary<string, object>() { { "value", preValue.Value }, { "sortOrder", preValue.SortOrder } };
         }
 
         internal class ColorListValidator : IPropertyValidator
@@ -48,7 +63,7 @@ public IEnumerable<ValidationResult> Validate(object value, PreValueCollection p
                     if (jItem == null || jItem["value"] == null) continue;
 
                     //NOTE: we will be removing empty values when persisting so no need to validate
-                    var asString = jItem["value"].ToString();
+                    var asString = jItem["value"].Value<string>();
                     if (asString.IsNullOrWhiteSpace()) continue;
 
                     if (Regex.IsMatch(asString, "^([0-9a-f]{3}|[0-9a-f]{6})$", RegexOptions.IgnoreCase) == false)