Updateds media picker styles
This commit is contained in:
perploug
@@ -122,7 +122,7 @@ function mediaResource($q, $http, umbDataFormatter, umbRequestHelper) {
|
||||
"mediaApiBaseUrl",
|
||||
"GetByIds",
|
||||
idQuery)),
|
||||
'Failed to retreive data for media id ' + id);
|
||||
'Failed to retreive data for media ids ' + ids);
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@@ -64,8 +64,7 @@ angular.module('umbraco.services')
|
||||
|
||||
var dialog = angular.extend(defaults, options);
|
||||
var scope = options.scope || $rootScope.$new();
|
||||
delete dialog.scope;
|
||||
|
||||
|
||||
//Modal dom obj and unique id
|
||||
dialog.element = $('<div ng-swipe-left="hide()" ng-swipe-right="hide()" data-backdrop="false"></div>');
|
||||
var id = dialog.template.replace('.html', '').replace('.aspx', '').replace(/[\/|\.|:\&\?\=]/g, "-") + '-' + scope.$id;
|
||||
@@ -78,6 +77,7 @@ angular.module('umbraco.services')
|
||||
dialog.element.addClass("modal");
|
||||
dialog.element.addClass("hide");
|
||||
}
|
||||
|
||||
//set the id and add classes
|
||||
dialog.element
|
||||
.attr('id', id)
|
||||
@@ -332,8 +332,9 @@ angular.module('umbraco.services')
|
||||
* @returns {Object} modal object
|
||||
*/
|
||||
macroPicker: function (options) {
|
||||
options.template = 'views/common/dialogs/macroPicker.html';
|
||||
options.template = 'views/common/dialogs/insertmacro.html';
|
||||
options.show = true;
|
||||
options.modalClass = "span7 umb-modal";
|
||||
return openDialog(options);
|
||||
},
|
||||
|
||||
|
||||
@@ -289,9 +289,7 @@ function tinyMceService(dialogService, $log, imageHelper, assetsService, $timeou
|
||||
},
|
||||
onclick: function () {
|
||||
|
||||
dialogService.open({
|
||||
show: true,
|
||||
template: "views/common/dialogs/insertmacro.html",
|
||||
dialogService.macroPicker({
|
||||
scope: $scope,
|
||||
callback: function(data) {
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@ angular.module("umbraco")
|
||||
if(folderId > 0){
|
||||
entityResource.getAncestors(folderId, "media")
|
||||
.then(function(anc){
|
||||
anc.splice(0,1);
|
||||
// anc.splice(0,1);
|
||||
$scope.path = anc;
|
||||
});
|
||||
}else{
|
||||
@@ -55,19 +55,17 @@ angular.module("umbraco")
|
||||
$scope.gotoFolder($scope.options.formData.currentFolder);
|
||||
});
|
||||
|
||||
|
||||
$scope.selectMediaItem = function(image) {
|
||||
if (image.contentTypeAlias.toLowerCase() == 'folder') {
|
||||
$scope.options.formData.currentFolder = image.id;
|
||||
$scope.gotoFolder(image.id);
|
||||
}
|
||||
else if (image.contentTypeAlias.toLowerCase() == 'image') {
|
||||
}else if (image.contentTypeAlias.toLowerCase() == 'image') {
|
||||
|
||||
eventsService.publish("Umbraco.Dialogs.MediaPickerController.Select", image).then(function(image){
|
||||
if(dialogOptions && dialogOptions.multipicker){
|
||||
$scope.select(image);
|
||||
}else{
|
||||
$scope.submit(image);
|
||||
$scope.submit(image);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -63,28 +63,26 @@ data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupl
|
||||
ng-click="selectMediaItem(image)"
|
||||
prevent-default>
|
||||
|
||||
<img
|
||||
ng-show="image.thumbnail"
|
||||
ng-src="{{image.thumbnail}}"
|
||||
class="image"
|
||||
alt="{{image.name}}"/>
|
||||
|
||||
<img ng-src="{{image.thumbnail}}" ng-switch-when="Image" alt="{{image.name}}"/>
|
||||
|
||||
|
||||
<div ng-switch on="!!image.thumbnail" >
|
||||
<img ng-src="{{image.thumbnail}}" class="image" ng-switch-when="true" alt="{{image.name}}"/>
|
||||
|
||||
<div ng-switch-default>
|
||||
<i class="icon-folder large"></i>
|
||||
{{image.name}}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div ng-hide="image.thumbnail">
|
||||
<i class="icon-folder large"></i>
|
||||
{{image.name}}
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="umb-panel-footer">
|
||||
<div class="umb-el-wrap umb-panel-buttons">
|
||||
<div class="pull-right umb-btn-toolbar">
|
||||
<button ng-show="dialogData.selection.length > 0" type="button" ng-click="submit(dialogData)" class="btn btn-primary">Select ({{dialogData.selection.length}})</button>
|
||||
<button ng-show="dialogData.selection.length > 0" type="button"
|
||||
ng-click="submit(dialogData)" class="btn btn-primary">Select ({{dialogData.selection.length}})</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,48 +2,53 @@
|
||||
//with a specified callback, this callback will receive an object with a selection on it
|
||||
angular.module('umbraco').controller("Umbraco.Editors.MediaPickerController",
|
||||
function($rootScope, $scope, dialogService, mediaResource, imageHelper, $log){
|
||||
//
|
||||
//$( "#draggable" ).draggable();
|
||||
|
||||
|
||||
$scope.images = [];
|
||||
$scope.ids = [];
|
||||
|
||||
if($scope.model.value){
|
||||
$scope.ids = $scope.model.value.split(',');
|
||||
|
||||
//saved value contains a list of images with their coordinates a Dot coordinates
|
||||
//this will be $scope.model.value...
|
||||
var sampleData = [
|
||||
{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){
|
||||
mediaResource.getByIds($scope.ids).then(function(medias){
|
||||
//img.media = media;
|
||||
|
||||
//shortcuts
|
||||
//TODO, do something better then this for searching
|
||||
img.src = imageHelper.getImagePropertyValue({imageModel: media});
|
||||
img.thumbnail = imageHelper.getThumbnailFromPath(img.src);
|
||||
$(medias).each(function(i, media){
|
||||
//shortcuts
|
||||
//TODO, do something better then this for searching
|
||||
var img = {};
|
||||
img.src = imageHelper.getImagePropertyValue({imageModel: media});
|
||||
img.thumbnail = imageHelper.getThumbnailFromPath(img.src);
|
||||
$scope.images.push(img);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
//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}
|
||||
]};
|
||||
$scope.remove = function(index){
|
||||
$scope.images.splice(index, 1);
|
||||
$scope.ids.splice(index, 1);
|
||||
$scope.sync();
|
||||
};
|
||||
|
||||
$scope.add = function(){
|
||||
dialogService.mediaPicker({multipicker:true, callback: function(data){
|
||||
$(data.selection).each(function(i, media){
|
||||
//shortcuts
|
||||
//TODO, do something better then this for searching
|
||||
|
||||
$scope.openMediaPicker =function(value){
|
||||
var d = dialogService.mediaPicker({scope: $scope, callback: populate});
|
||||
};
|
||||
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);
|
||||
});
|
||||
|
||||
$scope.crop = function(image){
|
||||
$scope.currentImage = image;
|
||||
};
|
||||
$scope.sync();
|
||||
}});
|
||||
};
|
||||
|
||||
function populate(data){
|
||||
$scope.model.value = data.selection;
|
||||
}
|
||||
});
|
||||
$scope.sync = function(){
|
||||
$scope.model.value = $scope.ids.join();
|
||||
};
|
||||
|
||||
});
|
||||
@@ -1,41 +1,17 @@
|
||||
<div ng-controller="Umbraco.Editors.MediaPickerController">
|
||||
|
||||
<div ng-show="currentImage" class="umb-image-crop">
|
||||
<div class="umb-image-mask">
|
||||
<i class="icon-screenshot"></i>
|
||||
<i class="icon-circle"></i>
|
||||
<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="1" max="200" step="1" value="100">
|
||||
<i class="icon icon-plus"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul ng-show="currentImage" class="thumbnails umb-crop-preview">
|
||||
<li class="umb-thumbnail" ng-repeat="crop in config.crops">
|
||||
<a href="#">
|
||||
<img src="/media/dummy/crop-preview-horizontal.png" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<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.thumbnail}}" alt="">
|
||||
<ul class="thumbnails umb-thumbnails">
|
||||
<li class="umb-thumbnail thumbnail span2" ng-repeat="image in images">
|
||||
<a href ng-click="remove($index)">
|
||||
<img ng-src="{{image.src}}" alt="">
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="umb-thumbnail span4">
|
||||
<a href="#" ng-click="openMediaPicker(value)" prevent-default>
|
||||
<i class="icon icon-plus"></i>
|
||||
<li class="umb-thumbnail thumbnail">
|
||||
<a href="#" ng-click="add()" prevent-default>
|
||||
<i class="icon icon-add large"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{{images | json}}
|
||||
</ul>
|
||||
</div>
|
||||
Reference in New Issue
Block a user