From 9bad5d023339bbc36f897c1a4e0be604ce16ae48 Mon Sep 17 00:00:00 2001 From: perploug Date: Mon, 23 Sep 2013 13:29:44 +0200 Subject: [PATCH] Updateds media picker styles --- .../src/common/resources/media.resource.js | 2 +- .../src/common/services/dialog.service.js | 7 +- .../src/common/services/tinymce.service.js | 4 +- .../common/dialogs/mediapicker.controller.js | 8 +- .../src/views/common/dialogs/mediapicker.html | 26 +++---- .../mediapicker/mediapicker.controller.js | 77 ++++++++++--------- .../mediapicker/mediapicker.html | 40 ++-------- 7 files changed, 70 insertions(+), 94 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/resources/media.resource.js b/src/Umbraco.Web.UI.Client/src/common/resources/media.resource.js index 0362012189..fc138fe28c 100644 --- a/src/Umbraco.Web.UI.Client/src/common/resources/media.resource.js +++ b/src/Umbraco.Web.UI.Client/src/common/resources/media.resource.js @@ -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); }, /** diff --git a/src/Umbraco.Web.UI.Client/src/common/services/dialog.service.js b/src/Umbraco.Web.UI.Client/src/common/services/dialog.service.js index 5c370fcde1..198022dbfe 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/dialog.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/dialog.service.js @@ -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 = $('
'); 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); }, diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js index 580fa89a7b..28ba32b04f 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js @@ -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) { diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js index e1b44dc5e1..a813f76d67 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js @@ -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); } }); } diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html index 88b69a7e65..68660a25ee 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html @@ -63,28 +63,26 @@ data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupl ng-click="selectMediaItem(image)" prevent-default> + {{image.name}} - {{image.name}} - - -
- {{image.name}} - -
- - {{image.name}} -
-
- +
+ + {{image.name}} +
+ -
- +
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js index 8d2385f409..c028217f71 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js @@ -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(); + }; + +}); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html index 0d90298811..d21b95bacd 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html @@ -1,41 +1,17 @@
-
-
- - - -
- -
- - - -
-
- - - - -
\ No newline at end of file