Changes the property editor to use model again

This commit is contained in:
Per Ploug Krogslund
2013-08-08 13:47:58 +02:00
parent 8fea9530b5
commit 2222e1356e
29 changed files with 64 additions and 97 deletions

View File

@@ -8,19 +8,18 @@ angular.module("umbraco.directives")
.directive('umbEditor', function (umbPropEditorHelper) {
return {
scope: {
view: "@",
alias: "@",
config: "=",
value: "="
model: "="
},
restrict: 'E',
replace: true,
templateUrl: 'views/directives/umb-editor.html',
link: function (scope, element, attrs, ctrl) {
if(!scope.alias){
scope.alias = Math.random().toString(36).slice(2);
if(!scope.model.alias){
scope.model.alias = Math.random().toString(36).slice(2);
}
scope.propertyEditorView = umbPropEditorHelper.getViewPath(scope.view);
scope.propertyEditorView = umbPropEditorHelper.getViewPath(scope.model.view);
}
};
});

View File

@@ -16,6 +16,5 @@ angular.module("umbraco.directives")
link: function (scope, element, attrs, ctrl) {
}
};
});

View File

@@ -1 +1 @@
angular.module("umbraco.services", ["umbraco.security", "umbraco.resources"]);
angular.module("umbraco.services", ["umbraco.security", "umbraco.resources"]);

View File

@@ -495,7 +495,6 @@ input[type="checkbox"][readonly] {
}
.add-on:first-child,
.btn:first-child {
// FYI, `.btn:first-child` accounts for a button group that's prepended
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
}
}

View File

@@ -157,9 +157,10 @@ label {
/* FORM GRID */
.umb-control-group {
.umb-pane {
padding: 30px 20px;
}
.umb-control-group .umb-el-wrap {
padding: 0
}

View File

@@ -34,34 +34,28 @@
<umb-tab-view>
<umb-tab id="tab{{tab.id}}" rel="{{tab.id}}" ng-repeat="tab in content.tabs | filter:exludeLastTab">
<umb-property
property="property"
ng-repeat="property in tab.properties">
<umb-editor
config="property.config"
value="property.value"
view="{{property.view}}"
alias="{{property.alias}}">
</umb-editor>
<div class="umb-pane">
<umb-property
property="property"
ng-repeat="property in tab.properties">
<umb-editor model="property"></umb-editor>
</umb-property>
</div>
</umb-property>
</umb-tab>
<umb-tab id="tab0" rel="{{genericPropertiesTab.id}}" data-label="{{genericPropertiesTab.label}}">
<umb-property
property="property"
ng-repeat="property in genericPropertiesTab.properties">
<umb-editor property="property"
config="property.config"
value="property.value"
view="{{property.view}}"
alias="{{property.alias}}">
</umb-editor>
<div class="umb-pane">
<umb-property
property="property"
ng-repeat="property in genericPropertiesTab.properties">
</umb-property>
<umb-editor model="property"></umb-editor>
</umb-property>
</div>
</umb-tab>
</umb-tab-view>

View File

@@ -0,0 +1,3 @@
<div class="umb-pane">
</div>

View File

@@ -1,4 +1,4 @@
<div class="umb-pane">
<div class="umb-property">
<ng-form name="propertyForm">
<div class="control-group umb-control-group" ng-class="{hidelabel:property.hideLabel, error: propertyForm.$invalid}" >

View File

@@ -1 +1 @@
<input type="checkbox" ng-model="value" id="{{alias}} />
<input type="checkbox" ng-model="model.value" id="{{model.alias}} />

View File

@@ -8,6 +8,6 @@ angular.module('umbraco')
};
function populate(data){
$scope.value = data.selection;
$scope.model.value = data.selection;
}
});

View File

@@ -1,6 +1,6 @@
<div ng-controller="Umbraco.Editors.ContentPickerController">
<ul class="nav nav-stacked">
<li ng-repeat="node in value">
<li ng-repeat="node in model.value">
<a href="#" prevent-default>
<i class="icon umb-tree-icon sprTree {{node.icon}}"></i>
{{node.name}}
@@ -8,7 +8,7 @@
</li>
<li>
<a href="#" ng-click="openContentPicker(value)" prevent-default>
<a href="#" ng-click="openContentPicker(model.value)" prevent-default>
<i class="icon icon-plus"></i> Add
</a>
</li>

View File

@@ -8,7 +8,7 @@ angular.module("umbraco").controller("Umbraco.Editors.DatepickerController",
//The Datepicker js and css files are available and all components are ready to use.
// Get the id of the datepicker button that was clicked
var pickerId = $scope.alias;
var pickerId = $scope.model.alias;
// Open the datepicker and add a changeDate eventlistener
$("#" + pickerId).datepicker({
@@ -16,7 +16,7 @@ angular.module("umbraco").controller("Umbraco.Editors.DatepickerController",
autoclose: true
}).on("changeDate", function (e) {
// When a date is clicked the date is stored in model.value as a ISO 8601 date
$scope.value = e.date.toISOString();
$scope.model.value = e.date.toISOString();
});
});

View File

@@ -1,6 +1,6 @@
<div ng-controller="Umbraco.Editors.DatepickerController">
<div class="input-append date datepicker" id="{{alias}}">
<input data-format="dd/MM/yyyy" type="text" value="{{value | date:'dd/MM/yyyy'}}" />
<div class="input-append date datepicker" id="{{model.alias}}">
<input data-format="dd/MM/yyyy" type="text" value="{{model.value | date:'dd/MM/yyyy'}}" />
<span class="add-on"> <i class="icon-calendar"></i></span>
</div>
</div>

View File

@@ -1,4 +1,4 @@
<select ng-model="value">
<select ng-model="model.value">
<option>123</option>
<option>abc</option>
<option>xyx</option>

View File

@@ -22,9 +22,9 @@ function fileUploadController($scope, $element, $compile, umbImageHelper) {
$scope.files = [];
//create the property to show the list of files currently saved
if ($scope.value != "") {
if ($scope.model.value != "") {
var images = $scope.value.split(",");
var images = $scope.model.value.split(",");
$scope.persistedFiles = _.map(images, function (item) {
return { file: item, isImage: umbImageHelper.detectIfImageByExtension(item) };
@@ -43,11 +43,11 @@ function fileUploadController($scope, $element, $compile, umbImageHelper) {
//listen for clear files changes to set our model to be sent up to the server
$scope.$watch("clearFiles", function (isCleared) {
if (isCleared == true) {
$scope.value = "{clearFiles: true}";
$scope.model.value = "{clearFiles: true}";
clearFiles();
}
else {
$scope.value = "";
$scope.model.value = "";
}
});
@@ -55,12 +55,12 @@ function fileUploadController($scope, $element, $compile, umbImageHelper) {
$scope.$on("filesSelected", function (event, args) {
$scope.$apply(function () {
//set the parent files collection
$scope.$parent.addFiles($scope.id, args.files);
$scope.$parent.addFiles($scope.model.id, args.files);
//clear the current files
$scope.files = [];
for (var i = 0; i < args.files.length; i++) {
//save the file object to the scope's files collection
$scope.files.push({ id: $scope.id, file: args.files[i] });
$scope.files.push({ id: $scope.model.id, file: args.files[i] });
}
//set clear files to false, this will reset the model too
$scope.clearFiles = false;

View File

@@ -13,13 +13,13 @@ angular.module("umbraco")
function initMap(){
//Google maps is available and all components are ready to use.
var valueArray = $scope.value.split(',');
var valueArray = $scope.model.value.split(',');
var latLng = new google.maps.LatLng(valueArray[0], valueArray[1]);
var mapDiv = document.getElementById($scope.alias + '_map');
var mapDiv = document.getElementById($scope.model.alias + '_map');
var mapOptions = {
zoom: $scope.config.zoom,
zoom: $scope.model.config.zoom,
center: latLng,
mapTypeId: google.maps.MapTypeId[$scope.config.mapType]
mapTypeId: google.maps.MapTypeId[$scope.model.config.mapType]
};
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(mapDiv, mapOptions);
@@ -50,8 +50,7 @@ angular.module("umbraco")
codeLatLng(marker.getPosition(), geocoder);
//set the model value
$scope.value = newLat + "," + newLng;
$scope.model.vvalue = newLat + "," + newLng;
});
}});

View File

@@ -1,3 +1,3 @@
<div ng-controller="Umbraco.Editors.GoogleMapsController" class="span7">
<div class="" style="height: 400px;" id="{{alias}}_map"></div>
<div class="" style="height: 400px;" id="{{model.alias}}_map"></div>
</div>

View File

@@ -14,7 +14,7 @@ angular.module("umbraco")
$scope.next = function(){
if ($scope.options.pageNumber < $scope.listViewResultSet.totalPages) {
$scope.options.pageNumber++;
$scope.reloadView();
$scope.reloadView();
}
};

View File

@@ -7,7 +7,6 @@ angular.module('umbraco').controller("Umbraco.Editors.MediaPickerController",
};
function populate(data){
$log.log(data.selection);
$scope.value = data.selection;
$scope.model.value = data.selection;
}
});

View File

@@ -1,8 +1,8 @@
angular.module('umbraco').controller("Umbraco.Editors.ReadOnlyValueController",
function($rootScope, $scope, $filter){
if ($scope.config && $scope.config.filter && $scope.config.format) {
$scope.displayvalue = $filter($scope.config.filter)($scope.value, $scope.config.filter);
if ($scope.model.config && $scope.model.config.filter && $scope.model.config.format) {
$scope.displayvalue = $filter($scope.model.config.filter)($scope.model.value, $scope.model.config.filter);
}else{
$scope.displayvalue = $scope.value;
$scope.displayvalue = $scope.model.value;
}
});

View File

@@ -6,7 +6,7 @@ angular.module("umbraco")
tinymce.DOM.events.domLoaded = true;
tinymce.init({
selector: "#" + $scope.alias + "_rte",
selector: "#" + $scope.model.alias + "_rte",
skin: "umbraco",
menubar : false,
statusbar: false,
@@ -17,7 +17,7 @@ angular.module("umbraco")
editor.on('blur', function(e) {
$scope.$apply(function() {
//$scope.model.value = e.getBody().innerHTML;
$scope.value = editor.getContent();
$scope.model.value = editor.getContent();
});
});
@@ -55,7 +55,7 @@ angular.module("umbraco")
};
function populate(data){
$scope.value = data.selection;
$scope.model.value = data.selection;
}
});

View File

@@ -1,3 +1,3 @@
<div ng-controller="Umbraco.Editors.RTEController" class="span7">
<textarea ng-model="value" rows="10" id="{{alias}}_rte"></textarea>
<textarea ng-model="value" rows="10" id="{{model.alias}}_rte"></textarea>
</div>

View File

@@ -1,20 +0,0 @@
<div ng-controller="Sample.PropertyEditorController">
<ul>
<li ng-repeat="item in model.value">
{{item[0].value}}
</li>
</ul>
<div ng-show="showForm">
<umb-property ng-repeat="model in fakeData"></umb-property>
<button ng-click="add()">Save</button>
</div>
<button ng-click="create()">Add new</button><button ng-click="show()">Show json</button>
<div ng-show="showCode">
json: {{model.value|json}}
</div>
</div>

View File

@@ -1,6 +0,0 @@
<div ng-controller="SampleTwo.PropertyEditorController">
<textarea ng-model="model.value" rows="{{config.rows}}"></textarea>
<button ng-click="doStuff(model.value)" class="btn">Do stuff</button>
<button ng-click="openDialog()" class="btn">Open dialog</button>
</div>

View File

@@ -11,7 +11,7 @@ angular.module("umbraco")
$scope.tags = [];
// Initialize bootstrap-tags.js script
var tags = $('#' + $scope.alias + "_tags").tags({
var tags = $('#' + $scope.model.alias + "_tags").tags({
tagClass: 'label-inverse'
});

View File

@@ -1,5 +1,5 @@
<div ng-controller="Umbraco.Editors.TagsController" class="span7">
<div ng-model="value" id="{{alias}}_tags" class="tag-list">
<div ng-model="model.value" id="{{model.alias}}_tags" class="tag-list">
<div class="tags">
</div>

View File

@@ -1 +1 @@
<textarea ng-model="value" id="{{alias}}" rows="{{config.rows}}" class="umb-textarea span7 textstring"></textarea>
<textarea ng-model="model.value" id="{{model.alias}}" rows="{{model.config.rows}}" class="umb-textarea span7 textstring"></textarea>

View File

@@ -1 +1 @@
<input type="text" ng-model="value" id="{{alias}}" class="umb-textstring span7 textstring" />
<input type="text" ng-model="model.value" id="{{model.alias}}" class="umb-textstring span7 textstring" />

View File

@@ -1,7 +1,7 @@
<div>
<p>Enter a numeric value</p>
<input type="text" ng-model="value" id="{{alias}}" class="umb-textstring span7 textstring"
<input type="text" ng-model="model.value" id="{{model.alias}}" class="umb-textstring span7 textstring"
required
val-regex="^\d*$"
val-server="value" />