Merge branch 'dev-v7-U4-9025-2' of https://github.com/bjarnef/Umbraco-CMS into bjarnef-dev-v7-U4-9025-2
This commit is contained in:
Sebastiaan Janssen
@@ -149,52 +149,45 @@ ul.color-picker li a {
|
||||
}
|
||||
|
||||
.control-group.color-picker-preval .thumbnail {
|
||||
width:30px;
|
||||
border:none;
|
||||
width: 30px;
|
||||
border: none;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
/* pre-value editor */
|
||||
/*.control-group.color-picker-preval:before {
|
||||
content: "";
|
||||
.control-group.color-picker-preval .handle {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 100%;
|
||||
}*/
|
||||
|
||||
/*.control-group.color-picker-preval div.thumbnail {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}*/
|
||||
margin: 5px 3px 5px 0;
|
||||
}
|
||||
.control-group.color-picker-preval div.color-picker-prediv {
|
||||
display: inline-block;
|
||||
width: 60%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.control-group.color-picker-preval pre {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
font-family: monospace;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
width: 50%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.control-group.color-picker-preval btn {
|
||||
//vertical-align: middle;
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
|
||||
.control-group.color-picker-preval input[type="text"] {
|
||||
min-width: 40%;
|
||||
width: 40%;
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.control-group.color-picker-preval label {
|
||||
border: solid @white 1px;
|
||||
border: 1px solid @white;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,41 @@
|
||||
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) {
|
||||
@@ -13,6 +49,8 @@ function ColorPickerController($scope) {
|
||||
initActiveColor();
|
||||
}
|
||||
|
||||
//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 (color) {
|
||||
|
||||
var currentColor = ($scope.model.value && $scope.model.value.hasOwnProperty("value"))
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
<div ng-controller="Umbraco.PrevalueEditors.MultiColorPickerController">
|
||||
<div class="control-group color-picker-preval">
|
||||
<input name="newColor" type="hidden" />
|
||||
<label for="newColor" val-highlight="hasError">#{{newColor}}</label>
|
||||
<label for="newColor" val-highlight="{{hasError}}">#{{newColor}}</label>
|
||||
<input name="newLabel" type="text" ng-model="newLabel" class="umb-editor color-label" placeholder="Label" />
|
||||
<button class="btn add" ng-click="add($event)"><localize key="general_add">Add</localize></button>
|
||||
</div>
|
||||
<div class="control-group color-picker-preval" ng-repeat="item in model.value">
|
||||
<div class="thumbnail span1" hex-bg-color="{{item.value}}" bg-orig="transparent"></div>
|
||||
<div class="color-picker-prediv"><pre>#{{item.value}} - {{item.label}}</pre></div>
|
||||
<button class="btn btn-danger" ng-click="remove(item, $event)"><localize key="general_remove">Remove</localize></button>
|
||||
<div ui-sortable="sortableOptions" ng-model="model.value">
|
||||
<div class="control-group color-picker-preval" ng-repeat="item in model.value">
|
||||
<i class="icon icon-navigation handle"></i>
|
||||
<div class="thumbnail span1" hex-bg-color="{{item.value}}" bg-orig="transparent"></div>
|
||||
<div class="color-picker-prediv"><pre>#{{item.value}}</pre><span>{{item.label}}</span></div>
|
||||
<button class="btn btn-danger" ng-click="remove(item, $event)"><localize key="general_remove">Remove</localize></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
angular.module("umbraco").controller("Umbraco.PrevalueEditors.MultiColorPickerController",
|
||||
function ($scope, $timeout, assetsService, angularHelper, $element) {
|
||||
function ($scope, $timeout, assetsService, angularHelper, $element, localizationService) {
|
||||
//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,18 @@
|
||||
$scope.newLavel = defaultLabel;
|
||||
$scope.hasError = false;
|
||||
|
||||
$scope.labels = {};
|
||||
|
||||
var labelKeys = [
|
||||
"general_cancel",
|
||||
"general_choose"
|
||||
];
|
||||
|
||||
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 +28,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,
|
||||
@@ -56,6 +68,10 @@
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//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 +120,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);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user