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

change grid items settings dialog to new overlay component

Browse Source
This commit is contained in:
Mads Rasmussen
2015-12-07 20:21:52 +01:00
parent cfbfa2f5c9
commit a9411aa246
4 changed files with 107 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/config.controller.js
View File

@@ -1,77 +0,0 @@
angular.module("umbraco")
.controller("Umbraco.PropertyEditors.GridController.Dialogs.Config",
function ($scope, $http) {
var placeHolder = "{0}";
var addModifier = function(val, modifier){
if (!modifier || modifier.indexOf(placeHolder) < 0) {
return val;
} else {
return modifier.replace(placeHolder, val);
}
}
var stripModifier = function (val, modifier) {
if (!val || !modifier || modifier.indexOf(placeHolder) < 0) {
return val;
} else {
var paddArray = modifier.split(placeHolder);
if(paddArray.length == 1){
if (modifier.indexOf(placeHolder) === 0) {
return val.slice(0, -paddArray[0].length);
} else {
return val.slice(paddArray[0].length, 0);
}
} else {
if (paddArray[1].length === 0) {
return val.slice(paddArray[0].length);
}
return val.slice(paddArray[0].length, -paddArray[1].length);
}
}
}
$scope.styles = _.filter( angular.copy($scope.dialogOptions.config.items.styles), function(item){return (item.applyTo === undefined || item.applyTo === $scope.dialogOptions.itemType); });
$scope.config = _.filter( angular.copy($scope.dialogOptions.config.items.config), function(item){return (item.applyTo === undefined || item.applyTo === $scope.dialogOptions.itemType); });
var element = $scope.dialogOptions.gridItem;
if(angular.isObject(element.config)){
_.each($scope.config, function(cfg){
var val = element.config[cfg.key];
if(val){
cfg.value = stripModifier(val, cfg.modifier);
}
});
}
if(angular.isObject(element.styles)){
_.each($scope.styles, function(style){
var val = element.styles[style.key];
if(val){
style.value = stripModifier(val, style.modifier);
}
});
}
$scope.saveAndClose = function(){
var styleObject = {};
var configObject = {};
_.each($scope.styles, function(style){
if(style.value){
styleObject[style.key] = addModifier(style.value, style.modifier);
}
});
_.each($scope.config, function (cfg) {
if (cfg.value) {
configObject[cfg.key] = addModifier(cfg.value, cfg.modifier);
}
});
$scope.submit({config: configObject, styles: styleObject});
};
});

58
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/config.html
View File

@@ -1,44 +1,16 @@
<div class="umb-panel" ng-controller="Umbraco.PropertyEditors.GridController.Dialogs.Config">
<div class="umb-panel-body no-header with-footer compact">
<umb-pane>
<div ng-if="config">
<h4>Settings</h4>
<umb-property
property="configValue"
ng-repeat="configValue in config">
<umb-editor model="configValue" is-pre-value="true"></umb-editor>
</umb-property>
</div>
<div ng-if="styles">
<h4>Style</h4>
<umb-property
property="styleValue"
ng-repeat="styleValue in styles">
<umb-editor model="styleValue" is-pre-value="true"></umb-editor>
</umb-property>
</div>
</umb-pane>
</div>
<div class="umb-panel-footer">
<div class="umb-el-wrap umb-panel-buttons">
<div class="btn-toolbar umb-btn-toolbar pull-right">
<a href ng-click="close()" class="btn btn-link">
<localize key="general_cancel">Cancel</localize>
</a>
<a href ng-click="saveAndClose()" class="btn btn-primary">
<localize key="buttons_save">Save</localize>
</a>
</div>
</div>
</div>
<div ng-if="model.config">
<umb-property
property="configValue"
ng-repeat="configValue in model.config">
<umb-editor model="configValue" is-pre-value="true"></umb-editor>
</umb-property>
</div>
<div ng-if="model.styles">
<h4>Style</h4>
<umb-property
property="styleValue"
ng-repeat="styleValue in model.styles">
<umb-editor model="styleValue" is-pre-value="true"></umb-editor>
</umb-property>
</div>

95
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
View File

@@ -3,6 +3,7 @@ angular.module("umbraco")
function ($scope, $http, assetsService, localizationService, $rootScope, dialogService, gridService, mediaResource, imageHelper, $timeout, umbRequestHelper) {
// Grid status variables
var placeHolder = "";
$scope.currentRow = null;
$scope.currentCell = null;
$scope.currentToolsControl = null;
@@ -326,19 +327,93 @@ angular.module("umbraco")
$scope.editGridItemSettings = function (gridItem, itemType) {
dialogService.open(
{
template: "views/propertyeditors/grid/dialogs/config.html",
gridItem: gridItem,
config: $scope.model.config,
itemType: itemType,
callback: function (data) {
gridItem.styles = data.styles;
gridItem.config = data.config;
gridItem.hasConfig = gridItemHasConfig(data.styles, data.config);
placeHolder = "{0}";
var styles = _.filter( angular.copy($scope.model.config.items.styles), function(item){return (item.applyTo === undefined || item.applyTo === itemType); });
var config = _.filter( angular.copy($scope.model.config.items.config), function(item){return (item.applyTo === undefined || item.applyTo === itemType); });
if(angular.isObject(gridItem.config)){
_.each(config, function(cfg){
var val = gridItem.config[cfg.key];
if(val){
cfg.value = stripModifier(val, cfg.modifier);
}
});
}
if(angular.isObject(gridItem.styles)){
_.each(styles, function(style){
var val = gridItem.styles[style.key];
if(val){
style.value = stripModifier(val, style.modifier);
}
});
}
$scope.gridItemSettingsDialog = {};
$scope.gridItemSettingsDialog.view = "views/propertyeditors/grid/dialogs/config.html";
$scope.gridItemSettingsDialog.title = "Settings";
$scope.gridItemSettingsDialog.styles = styles;
$scope.gridItemSettingsDialog.config = config;
$scope.gridItemSettingsDialog.show = true;
$scope.gridItemSettingsDialog.submit = function(model) {
var styleObject = {};
var configObject = {};
_.each(model.styles, function(style){
if(style.value){
styleObject[style.key] = addModifier(style.value, style.modifier);
}
});
_.each(model.config, function (cfg) {
if (cfg.value) {
configObject[cfg.key] = addModifier(cfg.value, cfg.modifier);
}
});
gridItem.styles = styleObject;
gridItem.config = configObject;
gridItem.hasConfig = gridItemHasConfig(styleObject, configObject);
$scope.gridItemSettingsDialog.show = false;
$scope.gridItemSettingsDialog = null;
};
$scope.gridItemSettingsDialog.close = function(oldModel) {
$scope.gridItemSettingsDialog.show = false;
$scope.gridItemSettingsDialog = null;
};
};
function stripModifier(val, modifier) {
if (!val || !modifier || modifier.indexOf(placeHolder) < 0) {
return val;
} else {
var paddArray = modifier.split(placeHolder);
if(paddArray.length == 1){
if (modifier.indexOf(placeHolder) === 0) {
return val.slice(0, -paddArray[0].length);
} else {
return val.slice(paddArray[0].length, 0);
}
} else {
if (paddArray[1].length === 0) {
return val.slice(paddArray[0].length);
}
return val.slice(paddArray[0].length, -paddArray[1].length);
}
}
}
var addModifier = function(val, modifier){
if (!modifier || modifier.indexOf(placeHolder) < 0) {
return val;
} else {
return modifier.replace(placeHolder, val);
}
};
function gridItemHasConfig(styles, config) {

7
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
View File

@@ -272,4 +272,11 @@
position="target">
</umb-overlay>
<umb-overlay
ng-if="gridItemSettingsDialog.show"
model="gridItemSettingsDialog"
view="gridItemSettingsDialog.view"
position="right">
</umb-overlay>
</div>