yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add new directive colorpicker that wraps spectrumpicker into a dialog

Browse Source
This commit is contained in:
Enric León
2014-10-28 16:20:06 +01:00
parent 7c5ad67a9f
commit 2859eb560c
4 changed files with 136 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/Umbraco.Web.UI.Client/src/canvasdesigner/lib/colorpicker.directive.js Normal file
View File

@@ -0,0 +1,69 @@
/*********************************************************************************************************/
/* spectrum color picker directive */
/*********************************************************************************************************/
angular.module('colorpicker', ['spectrumcolorpicker'])
.directive('colorpicker', ['dialogService', function (dialogService) {
return {
restrict: 'EA',
scope: {
ngModel: '='
},
link: function (scope, $element) {
scope.openColorDialog = function () {
var config = {
template: "colorModal.html",
change: function (data) {
scope.ngModel = data;
},
callback: function (data) {
scope.ngModel = data;
},
cancel: function (data) {
scope.ngModel = data;
},
dialogItem: scope.ngModel,
scope: scope
};
dialogService.open(config);
}
scope.setColor = false;
scope.submitAndClose = function () {
if (scope.ngModel != "") {
scope.setColor = true;
scope.submit(scope.ngModel);
} else {
scope.cancel();
}
};
scope.cancelAndClose = function () {
scope.cancel();
}
},
template:
'<div>' +
'<div class="color-picker-preview" ng-click="openColorDialog()" style="background: {{ngModel}} !important;"></div>' +
'<script type="text/ng-template" id="colorModal.html">' +
'<div class="modal-header">' +
'<h1>Header</h1>' +
'</div>' +
'<div class="modal-body">' +
'<spectrum colorselected="ngModel" set-color="setColor" flat="true" show-palette="true"></spectrum>' +
'</div>' +
'<div class="right">' +
'<a class="btn" href="#" ng-click="cancelAndClose()">Cancel</a>' +
'<a class="btn btn-success" href="#" ng-click="submitAndClose()">Done</a>' +
'</div>' +
'</script>' +
'</div>',
replace: true
};
}])

21
src/Umbraco.Web.UI.Client/src/canvasdesigner/lib/dialog.service.js
View File

@@ -5,12 +5,14 @@
angular.module("Umbraco.canvasdesigner").factory('dialogService', function ($rootScope, $q, $http, $timeout, $compile, $templateCache) {
function closeDialog(dialog) {
function closeDialog(dialog, destroyScope) {
if (dialog.element) {
dialog.element.removeClass("selected");
dialog.element.html("");
dialog.scope.$destroy();
if (destroyScope) {
dialog.scope.$destroy();
}
}
}
@@ -32,7 +34,11 @@ angular.module("Umbraco.canvasdesigner").factory('dialogService', function ($roo
};
var dialog = angular.extend(defaults, options);
var destroyScope = true;
if (options && options.scope) {
destroyScope = false;
}
var scope = (options && options.scope) || $rootScope.$new();
// Save original value for cancel action
@@ -42,10 +48,11 @@ angular.module("Umbraco.canvasdesigner").factory('dialogService', function ($roo
/************************************/
// Close dialog if the user clicks outside the dialog. (Not working well with colorpickers and datepickers)
$(document).mousedown(function (e) {
var container = dialog.element;
if (!container.is(e.target) && container.has(e.target).length === 0) {
closeDialog(dialog);
closeDialog(dialog, destroyScope);
}
});
/************************************/
@@ -66,7 +73,7 @@ angular.module("Umbraco.canvasdesigner").factory('dialogService', function ($roo
if (dialog.cancel) {
dialog.cancel(originalDialogItem);
}
closeDialog(dialog);
closeDialog(dialog, destroyScope);
}
scope.change = function (data) {
@@ -79,11 +86,11 @@ angular.module("Umbraco.canvasdesigner").factory('dialogService', function ($roo
if (dialog.callback) {
dialog.callback(data);
}
closeDialog(dialog);
closeDialog(dialog, destroyScope);
};
scope.close = function () {
closeDialog(dialog);
closeDialog(dialog, destroyScope);
}
scope.dialogData = dialog.dialogData;

17
src/Umbraco.Web.UI.Client/src/canvasdesigner/lib/spectrum.directive.js
View File

@@ -9,7 +9,10 @@ angular.module('spectrumcolorpicker', [])
restrict: 'E',
transclude: true,
scope: {
colorselected: '='
colorselected: '=',
setColor: '=',
flat: '=',
showPalette: '='
},
link: function (scope, $element) {
@@ -18,9 +21,13 @@ angular.module('spectrumcolorpicker', [])
$element.find("input").spectrum({
color: scope.colorselected,
allowEmpty: true,
preferredFormat: "rgb",
preferredFormat: "hex",
showAlpha: true,
showInput: true,
flat: scope.flat,
localStorageKey: "spectrum.panel",
showPalette: scope.showPalette,
palette: [],
change: function (color) {
if (color) {
@@ -45,8 +52,10 @@ angular.module('spectrumcolorpicker', [])
});
scope.$watch('colorselected', function () {
$element.find("input").spectrum("set", scope.colorselected);
scope.$watch('setcolor', function (setColor) {
if (scope.$eval(setColor) === true) {
$element.find("input").spectrum("set", scope.colorselected);
}
}, true);
},

40
src/Umbraco.Web.UI.Client/src/less/canvasdesigner.less
View File

@@ -700,6 +700,46 @@ h4.panel-title {
display: block;
}
.canvasdesigner .color-picker-preview {
height: 26px;
border: 1px solid #CDCDCD;
border-radius: 1px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
cursor: pointer;
}
.canvasdesigner .spectrumcolorpicker {
}
.canvasdesigner .float-panel .sp-container.sp-flat {
background-color: transparent;
border: none;
padding: 10px;
width: 100%;
}
.canvasdesigner .float-panel .sp-container.sp-flat .sp-picker-container {
padding: 0;
margin: 0px;
margin-bottom: 10px;
border: none;
width: 100%;
}
.canvasdesigner .float-panel .sp-container.sp-flat .sp-palette-container {
padding: 0;
height: 32px;
width: 100%;
float: left;
margin: 0;
border: none;
}
.canvasdesigner .float-panel .sp-container.sp-flat .sp-button-container {
display: none;
}
.colorPickerDelete {
position: absolute;
margin: -23px 0 0 0;