From 8af8a6d41117e71e639523ba01476e04ceed4452 Mon Sep 17 00:00:00 2001 From: Shannon Date: Thu, 12 Feb 2015 11:59:19 +1100 Subject: [PATCH] Makes a new umbImageFolder directive which can be easily shared and is now used by the dashboard and the folder browser. --- .../html/umbuploaddropzone.directive.js | 7 +- .../imaging/umbimagefolder.directive.js | 154 ++++++++++++++++++ .../src/less/property-editors.less | 4 + .../dashboard/dashboard.tabs.controller.js | 52 +----- .../dashboard/media/mediafolderbrowser.html | 29 +--- .../directives/html/umb-upload-dropzone.html | 11 +- .../directives/imaging/umb-image-folder.html | 39 +++++ .../folderbrowser/folderbrowser.controller.js | 82 ++-------- .../folderbrowser/folderbrowser.html | 34 +--- 9 files changed, 223 insertions(+), 189 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagefolder.directive.js create mode 100644 src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-folder.html diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/html/umbuploaddropzone.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/html/umbuploaddropzone.directive.js index ba7195a7a2..04e305a7a7 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/html/umbuploaddropzone.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/html/umbuploaddropzone.directive.js @@ -1,6 +1,6 @@ /** * @ngdoc directive -* @name umbraco.directives.directive:umbPanel +* @name umbraco.directives.directive:umbUploadDropzone * @restrict E **/ angular.module("umbraco.directives.html") @@ -8,11 +8,6 @@ angular.module("umbraco.directives.html") return { restrict: 'E', replace: true, - scope: { - dropping: "=", - files: "=" - }, - transclude: 'true', templateUrl: 'views/directives/html/umb-upload-dropzone.html' }; }); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagefolder.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagefolder.directive.js new file mode 100644 index 0000000000..ec7df9999b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagefolder.directive.js @@ -0,0 +1,154 @@ +/** +* @ngdoc directive +* @name umbraco.directives.directive:umbImageFolder +* @restrict E +* @function +**/ +function umbImageFolder($rootScope, assetsService, $timeout, $log, umbRequestHelper, mediaResource, imageHelper) { + return { + restrict: 'E', + replace: true, + templateUrl: 'views/directives/imaging/umb-image-folder.html', + scope: { + options: '=', + nodeId: '@', + onUploadComplete: '=' + }, + + link: function (scope, element, attrs) { + + //NOTE: Blueimp handlers are documented here: https://github.com/blueimp/jQuery-File-Upload/wiki/Options + //NOTE: We are using a Blueimp version specifically ~9.4.0 because any higher than that and we get crazy errors with jquery, also note + // that the jquery UI version 1.10.3 is required for this blueimp version! if we go higher to 1.10.4 it breaks! seriously! + // It's do to with the widget framework in jquery ui changes which must have broken a whole lot of stuff. So don't change it for now. + + if (scope.onUploadComplete && !angular.isFunction(scope.onUploadComplete)) { + throw "onUploadComplete must be a function callback"; + } + + scope.uploading = false; + scope.files = []; + scope.progress = 0; + + var defaultOptions = { + url: umbRequestHelper.getApiUrl("mediaApiBaseUrl", "PostAddFile") + "?origin=blueimp", + //we'll start it manually to make sure the UI is all in order before processing + autoUpload: true, + disableImageResize: /Android(?!.*Chrome)|Opera/ + .test(window.navigator.userAgent), + previewMaxWidth: 150, + previewMaxHeight: 150, + previewCrop: true, + dropZone: element.find(".drop-zone"), + formData : { + currentFolder: scope.nodeId + } + }; + + //merge options + scope.blueimpOptions = angular.extend(defaultOptions, scope.options); + + function loadChildren(id) { + mediaResource.getChildren(id) + .then(function(data) { + scope.images = data.items; + }); + } + + //tracks the total file progress + scope.$on('fileuploadprogressall', function (e, data) { + scope.$apply(function () { + scope.progress = parseInt(data.loaded / data.total * 100, 10); + }); + }); + + //when one is finished + scope.$on('fileuploaddone', function (e, data) { + scope.$apply(function () { + //remove the amount of files complete + //NOTE: function is here instead of in the loop otherwise jshint blows up + function findFile (file) { return file === data.files[i]; } + for (var i = 0; i < data.files.length; i++) { + + var found = _.find(scope.files, findFile); + + found.completed = true; + } + + //when none are left resync everything + var remaining = _.filter(scope.files, function (file) { return file.completed !== true; }); + if (remaining.length === 0) { + + scope.progress = 100; + + //just the ui transition isn't too abrupt, just wait a little here + $timeout(function () { + scope.progress = 0; + scope.files = []; + scope.uploading = false; + + loadChildren(scope.nodeId); + + //call the callback + scope.onUploadComplete.apply(this, [data]); + + + }, 200); + + + } + }); + + }); + + //This handler gives us access to the file 'preview', this is the only handler that makes this available for whatever reason + // so we'll use this to also perform the adding of files to our collection + scope.$on('fileuploadprocessalways', function (e, data) { + scope.$apply(function () { + scope.uploading = true; + scope.files.push(data.files[data.index]); + }); + }); + + //This executes prior to the whole processing which we can use to get the UI going faster, + //this also gives us the start callback to invoke to kick of the whole thing + scope.$on('fileuploadadd', function (e, data) { + scope.$apply(function () { + scope.uploading = true; + }); + }); + + // All these sit-ups are to add dropzone area and make sure it gets removed if dragging is aborted! + scope.$on('fileuploaddragover', function (e, data) { + if (!scope.dragClearTimeout) { + scope.$apply(function () { + scope.dropping = true; + }); + } else { + $timeout.cancel(scope.dragClearTimeout); + } + scope.dragClearTimeout = $timeout(function () { + scope.dropping = null; + scope.dragClearTimeout = null; + }, 300); + }); + + //init load + loadChildren(scope.nodeId); + } + }; +} + +angular.module("umbraco.directives") + .directive("umbUploadPreview", function($parse) { + return { + link: function(scope, element, attr, ctrl) { + var fn = $parse(attr.umbUploadPreview), + file = fn(scope); + if (file.preview) { + element.append(file.preview); + } + } + }; + }) + .directive('umbImageFolder', umbImageFolder); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less index 1aea07bfbd..bc90086426 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -312,6 +312,10 @@ ul.color-picker li a { display: none !important; } +.umb-upload-drop-zone{ + margin-bottom:5px; +} + .umb-upload-drop-zone .info, .umb-upload-button-big{ display: block; padding: 20px; diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js b/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js index 1001ad250f..cbfc126f26 100644 --- a/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js @@ -190,58 +190,12 @@ function MediaFolderBrowserDashboardController($rootScope, $scope, assetsService var dialogOptions = $scope.dialogOptions; $scope.filesUploading = []; - $scope.options = { - url: umbRequestHelper.getApiUrl("mediaApiBaseUrl", "PostAddFile"), - autoUpload: true, - disableImageResize: /Android(?!.*Chrome)|Opera/ - .test(window.navigator.userAgent), - previewMaxWidth: 200, - previewMaxHeight: 200, - previewCrop: true, - formData:{ - currentFolder: -1 - } - }; + $scope.nodeId = -1; - - $scope.loadChildren = function(){ - mediaResource.getChildren(-1) - .then(function(data) { - $scope.images = data.items; - }); - }; - - $scope.$on('fileuploadstop', function(event, files){ - $scope.loadChildren($scope.options.formData.currentFolder); - $scope.queue = []; - $scope.filesUploading = []; + $scope.onUploadComplete = function () { navigationService.reloadSection("media"); - }); + } - $scope.$on('fileuploadprocessalways', function(e,data) { - var i; - $scope.$apply(function() { - $scope.filesUploading.push(data.files[data.index]); - }); - }); - - // All these sit-ups are to add dropzone area and make sure it gets removed if dragging is aborted! - $scope.$on('fileuploaddragover', function(event, files) { - if (!$scope.dragClearTimeout) { - $scope.$apply(function() { - $scope.dropping = true; - }); - } else { - $timeout.cancel($scope.dragClearTimeout); - } - $scope.dragClearTimeout = $timeout(function () { - $scope.dropping = null; - $scope.dragClearTimeout = null; - }, 300); - }); - - //init load - $scope.loadChildren(); } angular.module("umbraco").controller("Umbraco.Dashboard.MediaFolderBrowserDashboardController", MediaFolderBrowserDashboardController); diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/media/mediafolderbrowser.html b/src/Umbraco.Web.UI.Client/src/views/dashboard/media/mediafolderbrowser.html index 49803e4fca..2d14476e69 100644 --- a/src/Umbraco.Web.UI.Client/src/views/dashboard/media/mediafolderbrowser.html +++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/media/mediafolderbrowser.html @@ -1,26 +1,5 @@ -
- +
+ +
- - -

Click to upload

- - - - - - - - \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-upload-dropzone.html b/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-upload-dropzone.html index 15db228659..82f2b9b962 100644 --- a/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-upload-dropzone.html +++ b/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-upload-dropzone.html @@ -1,13 +1,8 @@ -
-
+
+

- Drop your files here... + Drop your files here...

- -
-
-
-
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-folder.html b/src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-folder.html new file mode 100644 index 0000000000..636388541b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-folder.html @@ -0,0 +1,39 @@ +
+ +
+ +
+ +

Click to upload

+ +
+ + + +
+
+
+
+ +
+
+
+ +
+ + + + + + \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.controller.js index c93a83ffdb..5b76cbae81 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.controller.js @@ -1,82 +1,20 @@ angular.module("umbraco") -.directive("umbUploadPreview",function($parse){ - return { - link: function(scope, element, attr, ctrl) { - var fn = $parse(attr.umbUploadPreview), - file = fn(scope); - if (file.preview) { - element.append(file.preview); - } - } - }; -}) + .controller("Umbraco.PropertyEditors.FolderBrowserController", - function ($rootScope, $scope, assetsService, $routeParams, $timeout, $element, $location, $log, umbRequestHelper, mediaResource, imageHelper, navigationService, editorState) { + function ($rootScope, $scope, $routeParams, $timeout, editorState, navigationService) { + var dialogOptions = $scope.dialogOptions; - $scope.creating = $routeParams.create; + $scope.nodeId = $routeParams.id; - if(!$scope.creating){ + $scope.onUploadComplete = function () { - $scope.filesUploading = []; - $scope.options = { - url: umbRequestHelper.getApiUrl("mediaApiBaseUrl", "PostAddFile"), - autoUpload: true, - disableImageResize: /Android(?!.*Chrome)|Opera/ - .test(window.navigator.userAgent), - previewMaxWidth: 200, - previewMaxHeight: 200, - previewCrop: true, - formData:{ - currentFolder: $routeParams.id - } - }; - - - $scope.loadChildren = function(id){ - mediaResource.getChildren(id) - .then(function(data) { - $scope.images = data.items; - }); - }; - - $scope.$on('fileuploadstop', function(event, files){ - $scope.loadChildren($scope.options.formData.currentFolder); - - //sync the tree - don't force reload since we're not updating this particular node (i.e. its name or anything), - // then we'll get the resulting tree node which we can then use to reload it's children. - var path = editorState.current.path; - navigationService.syncTree({ tree: "media", path: path, forceReload: false }).then(function (syncArgs) { - navigationService.reloadNode(syncArgs.node); - }); - - $scope.queue = []; - $scope.filesUploading = []; + //sync the tree - don't force reload since we're not updating this particular node (i.e. its name or anything), + // then we'll get the resulting tree node which we can then use to reload it's children. + var path = editorState.current.path; + navigationService.syncTree({ tree: "media", path: path, forceReload: false }).then(function (syncArgs) { + navigationService.reloadNode(syncArgs.node); }); - $scope.$on('fileuploadprocessalways', function(e,data) { - var i; - $scope.$apply(function() { - $scope.filesUploading.push(data.files[data.index]); - }); - }); - - // All these sit-ups are to add dropzone area and make sure it gets removed if dragging is aborted! - $scope.$on('fileuploaddragover', function(event, files) { - if (!$scope.dragClearTimeout) { - $scope.$apply(function() { - $scope.dropping = true; - }); - } else { - $timeout.cancel($scope.dragClearTimeout); - } - $scope.dragClearTimeout = $timeout(function () { - $scope.dropping = null; - $scope.dragClearTimeout = null; - }, 300); - }); - - //init load - $scope.loadChildren($routeParams.id); } }); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.html index 54d911fb6a..4e3814b9ab 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.html @@ -1,29 +1,5 @@ -
- - - -

Click to upload

- - - - - - - - - - +
+ +
\ No newline at end of file