Fixes tree picker multiple count

This commit is contained in:
perploug
2013-10-28 20:25:06 +01:00
parent 6b5326ccbd
commit e69559238d
9 changed files with 99 additions and 43 deletions

View File

@@ -7,6 +7,9 @@
*{ -ms-touch-action: none;}
.ui-sortable-placeholder {
margin-left: 0 !important;
}
.controls-row img {
max-width: none;

View File

@@ -237,6 +237,11 @@ div.has-unpublished-version:before{
padding-top: 7px;
}
div.not-allowed > i.icon,div.not-allowed > a{
color: @grayLight;
cursor: not-allowed;
}
// Tree context menu
// -------------------------
.umb-actions {

View File

@@ -72,7 +72,7 @@ data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupl
<button
class="btn btn-primary"
ng-show="dialogOptions.multiPicker"
ng-click="submit(dialogData)">
ng-click="submit(dialogData.selection)">
<localize key="buttons_select">Select</localize>({{dialogData.selection.length}})
</button>

View File

@@ -12,6 +12,7 @@ angular.module("umbraco").controller("Umbraco.Dialogs.TreePickerController",
$scope.entityType ="Document";
$scope.results = [];
if(dialogOptions.section === "member"){
$scope.searcher = searchService.searchMembers;
$scope.entityType = "Member";
@@ -21,37 +22,48 @@ angular.module("umbraco").controller("Umbraco.Dialogs.TreePickerController",
}
function select(text, id){
//if we get the root, we just return a constructed entity, no need for server data
if(id < 0){
var node = {
alias: null,
icon: "icon-folder",
id: id,
name: text};
if($scope.multiPicker){
$scope.select(node);
$scope.select(id);
}else{
var node = {
alias: null,
icon: "icon-folder",
id: id,
name: text};
$scope.submit(node);
}
}else{
entityResource.getById(id, $scope.entityType).then(function(ent){
if($scope.multiPicker){
$scope.showSearch = false;
$scope.results = [];
$scope.term = "";
$scope.oldTerm = undefined;
$scope.select(ent);
}else{
$scope.submit(ent);
}
});
}else{
$scope.showSearch = false;
$scope.results = [];
$scope.term = "";
$scope.oldTerm = undefined;
if($scope.multiPicker){
$scope.select(id);
}else{
entityResource.getById(id, $scope.entityType).then(function(ent){
$scope.submit(ent);
});
}
}
}
$scope.multiSubmit = function(result){
entityResource.getByIds(result, $scope.entityType).then(function(ents){
$scope.submit(ents);
});
};
$scope.selectResult = function(result){
select(result.title, result.id);
};
@@ -82,7 +94,7 @@ angular.module("umbraco").controller("Umbraco.Dialogs.TreePickerController",
angular.forEach(args.children, function(value, key){
if(filterArray.indexOf(value.metaData.contentType) >= 0){
value.filtered = true;
value.icon = "icon-wrong red unpublished";
value.cssClasses.push("not-allowed");
}
});
}
@@ -102,6 +114,7 @@ angular.module("umbraco").controller("Umbraco.Dialogs.TreePickerController",
select(args.node.name, args.node.id);
//ui...
if($scope.multiPicker){
var c = $(args.event.target.parentElement);
if(!args.node.selected){

View File

@@ -51,6 +51,8 @@
<div class="umb-panel-footer" >
<div class="umb-el-wrap umb-panel-buttons">
{{dialogData.selection | json}}
<div class="btn-toolbar umb-btn-toolbar pull-right">
<a href ng-click="close()" class="btn btn-link">
@@ -60,7 +62,7 @@
<button
class="btn btn-primary"
ng-show="dialogOptions.multiPicker"
ng-click="submit(dialogData)">
ng-click="multiSubmit(dialogData.selection)">
<localize key="buttons_select">Select</localize>({{dialogData.selection.length}})
</button>

View File

@@ -4,11 +4,10 @@ angular.module('umbraco')
.controller("Umbraco.PropertyEditors.ContentPickerController",
function($scope, dialogService, entityResource, $log, iconHelper){
$scope.renderModel = [];
$scope.ids = $scope.model.value.split(',');
$scope.renderModel = [];
$scope.cfg = {multiPicker: false, entityType: "Document", type: "content", treeAlias: "content", filter: ""};
if($scope.model.config){
$scope.cfg = angular.extend($scope.cfg, $scope.model.config);
}
@@ -45,17 +44,35 @@ angular.module('umbraco')
$scope.add =function(item){
if($scope.ids.indexOf(item.id) < 0){
item.icon = iconHelper.convertFromLegacyIcon(item.icon);
$scope.renderModel.push({name: item.name, id: item.id, icon: item.icon});
$scope.ids.push(item.id);
$scope.renderModel.push({name: item.name, id: item.id, icon: item.icon});
$scope.model.value = trim($scope.ids.join(), ",");
}
};
$scope.clear = function() {
$scope.ids = [];
$scope.model.value = "";
$scope.renderModel = [];
$scope.ids = [];
};
$scope.sortableOptions = {
update: function(e, ui) {
var r = [];
angular.forEach($scope.renderModel, function(value, key){
r.push(value.id);
});
$scope.ids = r;
$scope.model.value = trim($scope.ids.join(), ",");
}
};
$scope.$on("formSubmitting", function (ev, args) {
$scope.model.value = trim($scope.ids.join(), ",");
$log.log($scope.model);
});
function trim(str, chr) {
var rgxtrim = (!chr) ? new RegExp('^\\s+|\\s+$', 'g') : new RegExp('^'+chr+'+|'+chr+'+$', 'g');
@@ -63,8 +80,8 @@ angular.module('umbraco')
}
function populate(data){
if(data.selection && angular.isArray(data.selection)){
$(data.selection).each(function(i, item){
if(angular.isArray(data)){
$(data).each(function(i, item){
$scope.add(item);
});
}else{

View File

@@ -1,7 +1,12 @@
<div ng-controller="Umbraco.PropertyEditors.ContentPickerController" class="umb-editor umb-contentpicker">
<ul class="unstyled">
<ul class="unstyled"
ui-sortable="sortableOptions"
ng-model="renderModel">
<li ng-repeat="node in renderModel">
<i class="icon icon-navigation handle"></i>
<a href="#" prevent-default ng-click="remove($index)">
<i class="icon icon-delete red hover-show"></i>
<i class="{{node.icon}} hover-hide"></i>
@@ -13,7 +18,7 @@
<ul class="unstyled">
<li>
<a href="#" ng-click="openContentPicker()" prevent-default>
<i class="icon icon-add"></i> <localize key="general_add">Add</localize>
<i class="icon icon-add blue"></i> <localize key="general_add">Add</localize>
</a>
</li>
</ul>

View File

@@ -14,8 +14,6 @@ angular.module('umbraco').controller("Umbraco.PropertyEditors.MediaPickerControl
mediaResource.getByIds($scope.ids).then(function (medias) {
//img.media = media;
_.each(medias, function (media, i) {
//shortcuts
//TODO, do something better then this for searching
var img = {};
img.src = imageHelper.getImagePropertyValue({ imageModel: media });
img.thumbnail = imageHelper.getThumbnailFromPath(img.src);
@@ -37,14 +35,13 @@ angular.module('umbraco').controller("Umbraco.PropertyEditors.MediaPickerControl
dialogService.mediaPicker({
multiPicker: true,
callback: function(data) {
_.each(data.selection, function(media, i) {
//shortcuts
//TODO, do something better then this for searching
_.each(data, function(media, i) {
var img = {};
img.id = media.id;
img.src = imageHelper.getImagePropertyValue({ imageModel: media });
img.thumbnail = imageHelper.getThumbnailFromPath(img.src);
$scope.images.push(img);
$scope.ids.push(img.id);
});
@@ -54,6 +51,18 @@ angular.module('umbraco').controller("Umbraco.PropertyEditors.MediaPickerControl
});
};
$scope.sortableOptions = {
update: function(e, ui) {
var r = [];
angular.forEach($scope.renderModel, function(value, key){
r.push(value.id);
});
$scope.ids = r;
$scope.sync();
}
};
$scope.sync = function() {
$scope.model.value = $scope.ids.join();
};

View File

@@ -1,16 +1,18 @@
<div class="umb-editor umb-mediapicker" ng-controller="Umbraco.PropertyEditors.MediaPickerController">
<ul ui-sortable="sortableOptions" ng-model="images" class="thumbnails umb-thumbnails">
<li class="umb-thumbnail thumbnail span3" style="width: 124px;" ng-repeat="image in images">
<a href class="picked-image" ng-click="remove($index)">
<img ng-src="{{image.src}}" alt="">
</a>
</li>
</ul>
<ul class="thumbnails umb-thumbnails">
<li class="umb-thumbnail thumbnail">
<a href="#" class="add-link" ng-click="add()" prevent-default>
<i class="icon icon-add large"></i>
</a>
</li>
<li class="umb-thumbnail thumbnail span3" ng-repeat="image in images">
<a href class="picked-image" ng-click="remove($index)">
<img ng-src="{{image.src}}" alt="">
</a>
</li>
</ul>
</div>