diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js
index 5230f9ef2c..abb26ef4a2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js
@@ -1,46 +1,111 @@
-function ColorPickerController($scope) {
-
- $scope.isConfigured = $scope.model.config && $scope.model.config.items && _.keys($scope.model.config.items).length > 0;
-
- if ($scope.isConfigured) {
-
- for (var key in $scope.model.config.items) {
- if (!$scope.model.config.items[key].hasOwnProperty("value"))
- $scope.model.config.items[key] = { value: $scope.model.config.items[key], label: $scope.model.config.items[key] };
- }
-
- $scope.model.useLabel = isTrue($scope.model.config.useLabel);
- initActiveColor();
- }
+function ColorPickerController($scope) {
+
+ //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;
+ }
+ $scope.isConfigured = $scope.model.config && $scope.model.config.items && _.keys($scope.model.config.items).length > 0;
+
+ if ($scope.isConfigured) {
+
+ for (var key in $scope.model.config.items) {
+ if (!$scope.model.config.items[key].hasOwnProperty("value"))
+ $scope.model.config.items[key] = { value: $scope.model.config.items[key], label: $scope.model.config.items[key] };
+ }
+
+ $scope.model.useLabel = isTrue($scope.model.config.useLabel);
+ initActiveColor();
+ }
+
+ if (!angular.isArray($scope.model.config.items)) {
+ //make an array from the dictionary
+ var items = [];
+ for (var i in $scope.model.config.items) {
+ var oldValue = $scope.model.config.items[i];
+ if (oldValue.hasOwnProperty("value")) {
+ items.push({
+ value: oldValue.value,
+ label: oldValue.label,
+ sortOrder: oldValue.sortOrder,
+ id: i
+ });
+ } else {
+ items.push({
+ value: oldValue,
+ label: oldValue,
+ sortOrder: 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.config.items = items;
+ }
+
+ $scope.toggleItem = function (color) {
+
+ var currentColor = ($scope.model.value && $scope.model.value.hasOwnProperty("value"))
+ ? $scope.model.value.value
+ : $scope.model.value;
- $scope.toggleItem = function (color) {
-
- var currentColor = ($scope.model.value && $scope.model.value.hasOwnProperty("value"))
- ? $scope.model.value.value
- : $scope.model.value;
-
var newColor;
- if (currentColor === color.value) {
- // deselect
- $scope.model.value = $scope.model.useLabel ? { value: "", label: "" } : "";
- newColor = "";
- }
- else {
+ if (currentColor === color.value) {
+ // deselect
+ $scope.model.value = $scope.model.useLabel ? { value: "", label: "" } : "";
+ newColor = "";
+ }
+ else {
// select
- $scope.model.value = $scope.model.useLabel ? { value: color.value, label: color.label } : color.value;
+ $scope.model.value = $scope.model.useLabel ? { value: color.value, label: color.label } : color.value;
newColor = color.value;
- }
-
- // this is required to re-validate
- $scope.propertyForm.modelValue.$setViewValue(newColor);
- };
+ }
+
+ // this is required to re-validate
+ $scope.propertyForm.modelValue.$setViewValue(newColor);
+ };
// Method required by the valPropertyValidator directive (returns true if the property editor has at least one color selected)
- $scope.validateMandatory = function () {
- var isValid = !$scope.model.validation.mandatory || (
- $scope.model.value != null
- && $scope.model.value != ""
- && (!$scope.model.value.hasOwnProperty("value") || $scope.model.value.value !== "")
+ $scope.validateMandatory = function () {
+ var isValid = !$scope.model.validation.mandatory || (
+ $scope.model.value != null
+ && $scope.model.value != ""
+ && (!$scope.model.value.hasOwnProperty("value") || $scope.model.value.value !== "")
);
return {
isValid: isValid,
@@ -48,83 +113,83 @@ function ColorPickerController($scope) {
errorKey: "required"
};
}
- $scope.isConfigured = $scope.model.config && $scope.model.config.items && _.keys($scope.model.config.items).length > 0;
-
- // A color is active if it matches the value and label of the model.
- // If the model doesn't store the label, ignore the label during the comparison.
- $scope.isActiveColor = function (color) {
-
- // no value
- if (!$scope.model.value)
- return false;
-
- // Complex color (value and label)?
- if (!$scope.model.value.hasOwnProperty("value"))
- return $scope.model.value === color.value;
-
- return $scope.model.value.value === color.value && $scope.model.value.label === color.label;
- };
-
- // Finds the color best matching the model's color,
- // and sets the model color to that one. This is useful when
- // either the value or label was changed on the data type.
- function initActiveColor() {
-
- // no value
- if (!$scope.model.value)
- return;
-
- // Complex color (value and label)?
- if (!$scope.model.value.hasOwnProperty("value"))
- return;
-
- var modelColor = $scope.model.value.value;
- var modelLabel = $scope.model.value.label;
-
- // Check for a full match or partial match.
- var foundItem = null;
-
- // Look for a fully matching color.
- for (var key in $scope.model.config.items) {
- var item = $scope.model.config.items[key];
- if (item.value == modelColor && item.label == modelLabel) {
- foundItem = item;
- break;
- }
- }
-
- // Look for a color with a matching value.
- if (!foundItem) {
- for (var key in $scope.model.config.items) {
- var item = $scope.model.config.items[key];
- if (item.value == modelColor) {
- foundItem = item;
- break;
- }
- }
- }
-
- // Look for a color with a matching label.
- if (!foundItem) {
- for (var key in $scope.model.config.items) {
- var item = $scope.model.config.items[key];
- if (item.label == modelLabel) {
- foundItem = item;
- break;
- }
- }
- }
-
- // If a match was found, set it as the active color.
- if (foundItem) {
- $scope.model.value.value = foundItem.value;
- $scope.model.value.label = foundItem.label;
- }
- }
-
- // figures out if a value is trueish enough
- function isTrue(bool) {
- return !!bool && bool !== "0" && angular.lowercase(bool) !== "false";
+ $scope.isConfigured = $scope.model.config && $scope.model.config.items && _.keys($scope.model.config.items).length > 0;
+
+ // A color is active if it matches the value and label of the model.
+ // If the model doesn't store the label, ignore the label during the comparison.
+ $scope.isActiveColor = function (color) {
+
+ // no value
+ if (!$scope.model.value)
+ return false;
+
+ // Complex color (value and label)?
+ if (!$scope.model.value.hasOwnProperty("value"))
+ return $scope.model.value === color.value;
+
+ return $scope.model.value.value === color.value && $scope.model.value.label === color.label;
+ };
+
+ // Finds the color best matching the model's color,
+ // and sets the model color to that one. This is useful when
+ // either the value or label was changed on the data type.
+ function initActiveColor() {
+
+ // no value
+ if (!$scope.model.value)
+ return;
+
+ // Complex color (value and label)?
+ if (!$scope.model.value.hasOwnProperty("value"))
+ return;
+
+ var modelColor = $scope.model.value.value;
+ var modelLabel = $scope.model.value.label;
+
+ // Check for a full match or partial match.
+ var foundItem = null;
+
+ // Look for a fully matching color.
+ for (var key in $scope.model.config.items) {
+ var item = $scope.model.config.items[key];
+ if (item.value == modelColor && item.label == modelLabel) {
+ foundItem = item;
+ break;
+ }
+ }
+
+ // Look for a color with a matching value.
+ if (!foundItem) {
+ for (var key in $scope.model.config.items) {
+ var item = $scope.model.config.items[key];
+ if (item.value == modelColor) {
+ foundItem = item;
+ break;
+ }
+ }
+ }
+
+ // Look for a color with a matching label.
+ if (!foundItem) {
+ for (var key in $scope.model.config.items) {
+ var item = $scope.model.config.items[key];
+ if (item.label == modelLabel) {
+ foundItem = item;
+ break;
+ }
+ }
+ }
+
+ // If a match was found, set it as the active color.
+ if (foundItem) {
+ $scope.model.value.value = foundItem.value;
+ $scope.model.value.label = foundItem.label;
+ }
+ }
+
+ // figures out if a value is trueish enough
+ function isTrue(bool) {
+ return !!bool && bool !== "0" && angular.lowercase(bool) !== "false";
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.prevalues.html
index 2b917e69f8..3d9e2efdf8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.prevalues.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.prevalues.html
@@ -1,13 +1,24 @@
-
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js
index 98e649729c..7ae728a85a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js
@@ -1,5 +1,5 @@
angular.module("umbraco").controller("Umbraco.PrevalueEditors.MultiColorPickerController",
- function ($scope, $timeout, assetsService, angularHelper, $element) {
+ function ($scope, $timeout, assetsService, angularHelper, $element, localizationService, eventsService) {
//NOTE: We need to make each color an object, not just a string because you cannot 2-way bind to a primitive.
var defaultColor = "000000";
var defaultLabel = null;
@@ -8,6 +8,23 @@
$scope.newLavel = defaultLabel;
$scope.hasError = false;
+ $scope.labels = {};
+
+ var labelKeys = [
+ "general_cancel",
+ "general_choose"
+ ];
+
+ $scope.labelEnabled = false;
+ eventsService.on("toggleValue", function (e, args) {
+ $scope.labelEnabled = args.value;
+ });
+
+ localizationService.localizeMany(labelKeys).then(function (values) {
+ $scope.labels.cancel = values[0];
+ $scope.labels.choose = values[1];
+ });
+
assetsService.load([
//"lib/spectrum/tinycolor.js",
"lib/spectrum/spectrum.js"
@@ -16,8 +33,8 @@
elem.spectrum({
color: null,
showInitial: false,
- chooseText: "choose", // TODO: These can be localised
- cancelText: "cancel", // TODO: These can be localised
+ chooseText: $scope.labels.choose,
+ cancelText: $scope.labels.cancel,
preferredFormat: "hex",
showInput: true,
clickoutFiresChange: true,
@@ -46,16 +63,22 @@
items.push({
value: oldValue.value,
label: oldValue.label,
+ sortOrder: oldValue.sortOrder,
id: i
});
} else {
items.push({
value: oldValue,
label: oldValue,
+ sortOrder: 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;
}
@@ -104,6 +127,39 @@
};
+ $scope.sortableOptions = {
+ axis: 'y',
+ containment: 'parent',
+ cursor: 'move',
+ //handle: ".handle, .thumbnail",
+ items: '> div.control-group',
+ tolerance: 'pointer',
+ update: function (e, ui) {
+ // Get the new and old index for the moved element (using the text as the identifier, so
+ // we'd have a problem if two prevalues were the same, but that would be unlikely)
+ var newIndex = ui.item.index();
+ var movedPrevalueText = $('pre', ui.item).text();
+ var originalIndex = getElementIndexByPrevalueText(movedPrevalueText);
+
+ //// Move the element in the model
+ if (originalIndex > -1) {
+ var movedElement = $scope.model.value[originalIndex];
+ $scope.model.value.splice(originalIndex, 1);
+ $scope.model.value.splice(newIndex, 0, movedElement);
+ }
+ }
+ };
+
+ function getElementIndexByPrevalueText(value) {
+ for (var i = 0; i < $scope.model.value.length; i++) {
+ if ($scope.model.value[i].value === value) {
+ return i;
+ }
+ }
+
+ return -1;
+ }
+
//load the separate css for the editor to avoid it blocking our js loading
assetsService.loadCss("lib/spectrum/spectrum.css", $scope);
});
diff --git a/src/Umbraco.Web/PropertyEditors/ColorListPreValueEditor.cs b/src/Umbraco.Web/PropertyEditors/ColorListPreValueEditor.cs
index a504ed0431..4eb9d04217 100644
--- a/src/Umbraco.Web/PropertyEditors/ColorListPreValueEditor.cs
+++ b/src/Umbraco.Web/PropertyEditors/ColorListPreValueEditor.cs
@@ -22,17 +22,17 @@ namespace Umbraco.Web.PropertyEditors
//use a custom editor too
field.View = "views/propertyeditors/colorpicker/colorpicker.prevalues.html";
//change the description
- field.Description = "Add and remove colors";
+ field.Description = "Add, remove or sort colors.";
//change the label
- field.Name = "Add color";
+ field.Name = "Colors";
//need to have some custom validation happening here
- field.Validators.Add(new ColorListValidator());
-
+ field.Validators.Add(new ColorListValidator());
+
Fields.Insert(0, new PreValueField
{
- Name = "Include labels?",
- View = "boolean",
- Key = "useLabel",
+ Name = "Include labels?",
+ View = "boolean",
+ Key = "useLabel",
Description = "Stores colors as a Json object containing both the color hex string and label, rather than just the hex string."
});
}
@@ -40,28 +40,44 @@ namespace Umbraco.Web.PropertyEditors
public override IDictionary ConvertDbToEditor(IDictionary defaultPreVals, PreValueCollection persistedPreVals)
{
var dictionary = persistedPreVals.FormatAsDictionary();
- var items = dictionary
- .Where(x => x.Key != "useLabel")
- .ToDictionary(x => x.Value.Id, x => x.Value.Value);
+ var items = dictionary.Where(x => x.Key != "useLabel")
+ .OrderBy(x => x.Value.SortOrder);
var items2 = new Dictionary();
foreach (var item in items)
{
- if (item.Value.DetectIsJson() == false)
+ var valueItem = new ColorPickerColor
{
- items2[item.Key] = item.Value;
- continue;
- }
+ Color = item.Value.Value,
+ Label = item.Value.Value,
+ SortOrder = item.Value.SortOrder
+ };
- try
+ if (item.Value.Value.DetectIsJson())
{
- items2[item.Key] = JsonConvert.DeserializeObject(item.Value);
+ try
+ {
+ var valueObject = JsonConvert.DeserializeObject(item.Value.Value);
+ valueItem = new ColorPickerColor
+ {
+ Color = valueObject.Color,
+ Label = valueObject.Label,
+ SortOrder = valueObject.SortOrder
+ };
+ }
+ catch
+ {
+ // let's say parsing Json failed, we'll not do anything,
+ // we'll just use the valueItem we built in the first place
+ }
}
- catch
+
+ items2[item.Value.Id] = new JObject
{
- // let's say parsing Json failed, so what we have is the string - build json
- items2[item.Key] = new JObject { { "color", item.Value }, { "label", item.Value } };
- }
+ { "value", valueItem.Color },
+ { "label", valueItem.Label },
+ { "sortOrder", valueItem.SortOrder }
+ };
}
var result = new Dictionary { { "items", items2 } };
@@ -80,9 +96,8 @@ namespace Umbraco.Web.PropertyEditors
try
{
- object useLabelObj;
var useLabel = false;
- if (editorValue.TryGetValue("useLabel", out useLabelObj))
+ if (editorValue.TryGetValue("useLabel", out var useLabelObj))
{
useLabel = useLabelObj is string && (string) useLabelObj == "1";
result["useLabel"] = new PreValue(useLabel ? "1" : "0");
@@ -90,21 +105,26 @@ namespace Umbraco.Web.PropertyEditors
// get all non-empty values
var index = 0;
+ // items get submitted in the sorted order, so just count them up
+ var sortOrder = -1;
foreach (var preValue in val.OfType()
.Where(x => x["value"] != null)
.Select(x =>
{
var idString = x["id"] == null ? "0" : x["id"].ToString();
- int id;
- if (int.TryParse(idString, out id) == false) id = 0;
+ int.TryParse(idString, out var id);
var color = x["value"].ToString();
if (string.IsNullOrWhiteSpace(color)) return null;
var label = x["label"].ToString();
- return new PreValue(id, useLabel
- ? JsonConvert.SerializeObject(new { value = color, label = label })
- : color);
+
+ sortOrder++;
+ var value = useLabel
+ ? JsonConvert.SerializeObject(new { value = color, label = label, sortOrder = sortOrder })
+ : color;
+
+ return new PreValue(id, value, sortOrder);
})
.WhereNotNull())
{
@@ -150,4 +170,14 @@ namespace Umbraco.Web.PropertyEditors
}
}
}
-}
\ No newline at end of file
+
+ internal class ColorPickerColor
+ {
+ [JsonProperty("value")]
+ public string Color { get; set; }
+ [JsonProperty("label")]
+ public string Label { get; set; }
+ [JsonProperty("sortOrder")]
+ public int SortOrder { get; set; }
+ }
+}
diff --git a/src/Umbraco.Web/PropertyEditors/ValueListPreValueEditor.cs b/src/Umbraco.Web/PropertyEditors/ValueListPreValueEditor.cs
index 42484282e9..99400b4b48 100644
--- a/src/Umbraco.Web/PropertyEditors/ValueListPreValueEditor.cs
+++ b/src/Umbraco.Web/PropertyEditors/ValueListPreValueEditor.cs
@@ -2,14 +2,12 @@ using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
-using System.Text.RegularExpressions;
-using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using Umbraco.Core;
using Umbraco.Core.Logging;
using Umbraco.Core.Models;
using Umbraco.Core.PropertyEditors;
-using umbraco;
+using Umbraco.Core.Services;
namespace Umbraco.Web.PropertyEditors
{
@@ -37,7 +35,7 @@ namespace Umbraco.Web.PropertyEditors
{
new PreValueField(new EnsureUniqueValuesValidator())
{
- Description = "Add and remove values for the list",
+ Description = "Add, remove or sort values for the list.",
//we're going to call this 'items' because we are going to override the
//serialization of the pre-values to ensure that each one gets saved with it's own key
//(new db row per pre-value, thus to maintain backwards compatibility)
@@ -45,7 +43,7 @@ namespace Umbraco.Web.PropertyEditors
//It's also important to note that by default the dropdown angular controller is expecting the
// config options to come in with a property called 'items'
Key = "items",
- Name = ui.Text("editdatatype", "addPrevalue"),
+ Name = ApplicationContext.Current.Services.TextService.Localize("editdatatype/addPrevalue"),
View = "multivalues"
}
};