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

wip on the media picker cropper

Browse Source
This commit is contained in:
perploug
2013-08-28 23:13:32 +02:00
parent 4ebf44ed88
commit d6493a742d
2 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js
View File

@@ -9,28 +9,29 @@ angular.module('umbraco').controller("Umbraco.Editors.MediaPickerController",
//saved value contains a list of images with their coordinates a Dot coordinates
//this will be $scope.model.value...
var sampleData = [
{id: 1234, coordinates: {x:123,y:345}, center: {x:123,y:12}},
{id: 2234, coordinates: {x:123,y:345}, center: {x:123,y:12}},
{id: 2344, coordinates: {x:123,y:345}, center: {x:123,y:12}},
{id: 1143, coordinates: {x:123,y:345}, center: {x:123,y:12}},
{id: 1144, coordinates: {x:123,y:345}, center: {x:123,y:12}},
{id: 1145, coordinates: {x:123,y:345}, center: {x:123,y:12}},
];
$scope.images = sampleData;
$($scope.images).each(function(i,img){
mediaResource.getById(img.id).then(function(media){
img.media = media;
//img.media = media;
//shortcuts
img.file = imageHelper.getImagePropertyVaue({imageModel: media});
img.thumbnail = imageHelper.getThumbnailFromPath(img.file});
//TODO, do something better then this for searching
img.src = imageHelper.getImagePropertyVaue({imageModel: media});
img.thumbnail = imageHelper.getThumbnailFromPath(img.src);
});
});
//List of crops with name and size
$scope.config = {
crops: [
{name: "default", x:300,y:400},
{name: "header", x:23,y:40},
{name: "tiny", x:10,y:10}
{name: "default", x:300,y:400},
{name: "header", x:23,y:40},
{name: "tiny", x:10,y:10}
]};
@@ -38,6 +39,10 @@ angular.module('umbraco').controller("Umbraco.Editors.MediaPickerController",
var d = dialogService.mediaPicker({scope: $scope, callback: populate});
};
$scope.crop = function(image){
$scope.currentImage = image;
};
function populate(data){
$scope.model.value = data.selection;
}

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

@@ -4,12 +4,12 @@
<div class="umb-image-mask">
<i class="icon-screenshot"></i>
<i class="icon-circle"></i>
<img src="/media/dummy/crop-large.png" alt="">
<img ng-src="{{currentImage.src}}" style="max-width: 600px; max-height: 400px" alt="">
</div>
<div class="umb-image-controls clearfix">
<i class="icon icon-minus"></i>
<input class="range" type="range" min="0" max="100" step="5" value="35">
<input class="range" type="range" min="1" max="200" step="1" value="100">
<i class="icon icon-plus"></i>
</div>
</div>
@@ -18,7 +18,7 @@
<ul class="thumbnails umb-crop-preview">
<li class="umb-thumbnail" ng-repeat="image in images">
<a href ng-click="crop(image)">
<img ng-src="image.src" alt="">
<img ng-src="{{image.thumbnail}}" alt="">
</a>
</li>
@@ -29,4 +29,5 @@
</li>
</ul>
{{images | json}}
</div>