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

Adjusts the media picker to display folders properly

Browse Source
This commit is contained in:
perploug
2013-11-19 14:21:38 +01:00
parent d1c7a3764f
commit e80023bcff
7 changed files with 70 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/src/common/directives/html/umbphotofolder.directive.js
View File

@@ -139,6 +139,7 @@ angular.module("umbraco.directives.html")
$timeout(function () {
var photos = ngModel.$modelValue;
scope.imagesOnly = element.attr('imagesOnly');
scope.baseline = element.attr('baseline') ? parseInt(element.attr('baseline'), 10) : 0;
scope.minWidth = element.attr('min-width') ? parseInt(element.attr('min-width'), 10) : 420;
scope.minHeight = element.attr('min-height') ? parseInt(element.attr('min-height'), 10) : 200;

8
src/Umbraco.Web.UI.Client/src/common/directives/util.directive.js
View File

@@ -36,17 +36,21 @@ angular.module('umbraco.directives')
})
.directive('onRightClick',function(){
document.oncontextmenu = function (e) {
if(e.target.hasAttribute('on-right-click')) {
e.preventDefault();
e.stopPropagation();
return false;
}
};
return function(scope,el,attrs){
el.bind('contextmenu',function(e){
e.preventDefault();
e.stopPropagation();
scope.$apply(attrs.onRightClick);
}) ;
return false;
});
};
});

1
src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js
View File

@@ -86,6 +86,7 @@ function tinyMceService(dialogService, $log, imageHelper, $http, $timeout, macro
tooltip: 'Media Picker',
onclick: function () {
dialogService.mediaPicker({
onlyImages: true,
scope: $scope, callback: function (img) {
if (img) {

14
src/Umbraco.Web.UI.Client/src/common/services/util.service.js
View File

@@ -177,8 +177,20 @@ function imageHelper() {
});
}
var mediaRoot = Umbraco.Sys.ServerVariables.umbracoSettings.mediaPath;
var imageProp = _.find(props, function (item) {
return item.alias === 'umbracoFile';
if(item.alias === "umbracoFile")
{
return true;
}
//this performs a simple check to see if we have a media file as value
//it doesnt catch everything, but better then nothing
if(item.value.indexOf(mediaRoot) === 0){
return true;
}
return false;
});
if (!imageProp) {

20
src/Umbraco.Web.UI.Client/src/less/property-editors.less
View File

@@ -148,7 +148,6 @@ ul.color-picker li a {
margin: 0;
padding: 0;
display: block;
width: 520px;
}
@@ -159,6 +158,7 @@ ul.color-picker li a {
background: white;
margin: 5px;
position: relative;
text-align: center
}
.umb-sortable-thumbnails li:hover a{
@@ -167,10 +167,20 @@ ul.color-picker li a {
.umb-sortable-thumbnails li img
{
max-width:100%;
max-height:100%;
margin:auto;
display:block;
max-width:100%;
max-height:100%;
margin:auto;
display:block;
}
.umb-sortable-thumbnails .icon-holder .icon{
font-size: 60px;
line-height: 70px;
}
.umb-sortable-thumbnails .icon-holder *
{
color: @grayLight;
display: block
}

49
src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js
View File

@@ -4,6 +4,8 @@ angular.module("umbraco")
function($scope, mediaResource, umbRequestHelper, entityResource, $log, imageHelper, eventsService, treeService) {
var dialogOptions = $scope.$parent.dialogOptions;
$scope.onlyImages = dialogOptions.onlyImages;
$scope.options = {
url: umbRequestHelper.getApiUrl("mediaApiBaseUrl", "PostAddFile"),
autoUpload: true,
@@ -27,15 +29,15 @@ angular.module("umbraco")
childrenOf: data.parentId //clear the children of the parent
});
$scope.gotoFolder(data.id);
$scope.gotoFolder(data);
});
}
};
$scope.gotoFolder = function(folderId) {
$scope.gotoFolder = function(folder) {
if (folderId > 0) {
entityResource.getAncestors(folderId, "media")
if (folder.id > 0) {
entityResource.getAncestors(folder.id, "media")
.then(function(anc) {
// anc.splice(0,1);
$scope.path = anc;
@@ -44,26 +46,33 @@ angular.module("umbraco")
else {
$scope.path = [];
}
//mediaResource.rootMedia()
mediaResource.getChildren(folderId)
mediaResource.getChildren(folder.id)
.then(function(data) {
$scope.images = [];
$scope.searchTerm = "";
$scope.images = data.items;
//update the thumbnail property
_.each($scope.images, function(img) {
img.thumbnail = imageHelper.getThumbnail({ imageModel: img, scope: $scope });
});
//reject all images that have an empty thumbnail - this can occur if there's an image item
// that doesn't have an uploaded image.
$scope.images = _.reject($scope.images, function(item) {
return item.contentTypeAlias.toLowerCase() !== "folder" && item.thumbnail === "";
});
if($scope.onlyImages){
$scope.images = _.reject($scope.images, function(item) {
return item.contentTypeAlias.toLowerCase() !== "folder" && item.thumbnail === "";
});
}
});
$scope.options.formData.currentFolder = folderId;
$scope.options.formData.currentFolder = folder.id;
$scope.currentFolder = folder;
};
@@ -74,8 +83,7 @@ angular.module("umbraco")
$scope.clickHandler = function(image, ev) {
if (image.contentTypeAlias.toLowerCase() == 'folder') {
$scope.options.formData.currentFolder = image.id;
$scope.gotoFolder(image.id);
$scope.gotoFolder(image);
}else{
eventsService.publish("Umbraco.Dialogs.MediaPickerController.Select", image);
@@ -91,13 +99,21 @@ angular.module("umbraco")
ev.preventDefault();
};
$scope.selectFolder= function(folder) {
if (dialogOptions && dialogOptions.multiPicker) {
$scope.select(folder);
}
else {
$scope.submit(folder);
}
};
$scope.selectMediaItem = function(image) {
if (image.contentTypeAlias.toLowerCase() == 'folder') {
$scope.options.formData.currentFolder = image.id;
$scope.gotoFolder(image.id);
$scope.gotoFolder(image);
}else{
eventsService.publish("Umbraco.Dialogs.MediaPickerController.Select", image);
if (dialogOptions && dialogOptions.multiPicker) {
$scope.select(image);
}
@@ -107,5 +123,6 @@ angular.module("umbraco")
}
};
$scope.gotoFolder(-1);
//default root item
$scope.gotoFolder({id: -1, name: "Media", icon: "icon-folder"});
});

6
src/Umbraco.Web.UI.Client/src/views/directives/html/umb-photo-folder.html
View File

@@ -10,7 +10,7 @@
title="{{img.name}}">
<div ng-style="img.style" class="umb-non-thumbnail" ng-switch-when="none">
<i class="icon large icon-folder"></i>
<i class="icon large {{img.icon}}"></i>
{{img.name}}
</div>
@@ -18,11 +18,7 @@
ng-switch-default
ng-src="{{img.thumbnail}}"
ng-style="img.style"
alt="{{img.name}}"/>
</a>
</div>
</div>