Makes a new umbImageFolder directive which can be easily shared and is now used by the dashboard and the folder browser.
This commit is contained in:
Shannon
@@ -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'
|
||||
};
|
||||
});
|
||||
@@ -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);
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -1,26 +1,5 @@
|
||||
<form ng-controller="Umbraco.Dashboard.MediaFolderBrowserDashboardController" id="fileupload"
|
||||
style="width: 100%"
|
||||
method="POST" enctype="multipart/form-data"
|
||||
class="umb-editor umb-folderbrowser"
|
||||
data-file-upload="options"
|
||||
data-file-upload-progress=""
|
||||
data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
|
||||
|
||||
<div ng-controller="Umbraco.Dashboard.MediaFolderBrowserDashboardController">
|
||||
<umb-image-folder node-id="{{nodeId}}"
|
||||
on-upload-complete="onUploadComplete"></umb-image-folder>
|
||||
</div>
|
||||
|
||||
<span class="fileinput-button umb-upload-button-big"
|
||||
ng-class="{disabled: disabled}">
|
||||
<i class="icon icon-page-up"></i>
|
||||
<p><localize key="media_clickToUpload">Click to upload</localize></p>
|
||||
<input type="file" name="files[]" multiple ng-disabled="disabled">
|
||||
</span>
|
||||
|
||||
<umb-upload-dropzone dropping="dropping" files="filesUploading">
|
||||
</umb-upload-dropzone>
|
||||
|
||||
<umb-photo-folder
|
||||
min-height="220"
|
||||
min-width="220"
|
||||
on-click="clickHandler"
|
||||
ng-model="images"
|
||||
/>
|
||||
</form>
|
||||
@@ -1,13 +1,8 @@
|
||||
<div class="umb-upload-drop-zone" ng-show="dropping || files.length">
|
||||
<div class="info" ng-show="dropping">
|
||||
<div class="umb-upload-drop-zone">
|
||||
<div class="info">
|
||||
<i class="icon icon-parachute-drop"></i>
|
||||
<p>
|
||||
<localize key="media_dropFilesHere">Drop your files here...</localize>
|
||||
<localize key="media_dropFilesHere">Drop your files here...</localize>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div ng-show="files.length">
|
||||
<div class="umb-photo-proview" ng-repeat="file in files" umb-upload-preview="file">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,39 @@
|
||||
<form ng-controller="Umbraco.PropertyEditors.FolderBrowserController" id="fileupload"
|
||||
style="width: 100%"
|
||||
method="POST" enctype="multipart/form-data"
|
||||
class="umb-editor umb-folderbrowser"
|
||||
file-upload="blueimpOptions">
|
||||
|
||||
<div class="drop-zone">
|
||||
|
||||
<div class="fileinput-button umb-upload-button-big" ng-hide="dropping || uploading">
|
||||
<i class="icon icon-page-up"></i>
|
||||
<p><localize key="media_clickToUpload">Click to upload</localize></p>
|
||||
<input type="file" name="files[]" multiple ng-disabled="disabled">
|
||||
</div>
|
||||
|
||||
<umb-upload-dropzone ng-show="dropping && !uploading"></umb-upload-dropzone>
|
||||
|
||||
<div ng-if="uploading">
|
||||
<div class="progress progress-striped active">
|
||||
<div class="bar" ng-style="{width: progress + '%'}"></div>
|
||||
</div>
|
||||
|
||||
<div class="umb-photo-preview"
|
||||
ng-repeat="file in files"
|
||||
ng-style="{opacity: file.completed == true ? '0.25' : '1.0'}"
|
||||
umb-upload-preview="file">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<umb-photo-folder ng-show="files.length == 0"
|
||||
min-height="105"
|
||||
min-width="220"
|
||||
on-click="clickHandler"
|
||||
ng-model="images" />
|
||||
|
||||
|
||||
</form>
|
||||
@@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,29 +1,5 @@
|
||||
<form ng-controller="Umbraco.PropertyEditors.FolderBrowserController" id="fileupload"
|
||||
style="width: 100%"
|
||||
method="POST" enctype="multipart/form-data"
|
||||
class="umb-editor umb-folderbrowser"
|
||||
data-file-upload="options"
|
||||
data-file-upload-progress=""
|
||||
ng-hide="creating"
|
||||
data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
|
||||
|
||||
<span class="fileinput-button umb-upload-button-big"
|
||||
style="margin-bottom: 5px;"
|
||||
ng-hide="dropping"
|
||||
ng-class="{disabled: disabled}">
|
||||
<i class="icon icon-page-up"></i>
|
||||
<p><localize key="media_clickToUpload">Click to upload</localize></p>
|
||||
<input type="file" name="files[]" multiple ng-disabled="disabled">
|
||||
</span>
|
||||
|
||||
<umb-upload-dropzone dropping="dropping" files="filesUploading">
|
||||
</umb-upload-dropzone>
|
||||
|
||||
<umb-photo-folder
|
||||
min-height="105"
|
||||
min-width="220"
|
||||
on-click="clickHandler"
|
||||
ng-model="images" />
|
||||
|
||||
|
||||
</form>
|
||||
<div ng-controller="Umbraco.PropertyEditors.FolderBrowserController">
|
||||
<umb-image-folder ng-if="creating == null"
|
||||
node-id="{{nodeId}}"
|
||||
on-upload-complete="onUploadComplete"></umb-image-folder>
|
||||
</div>
|
||||
Reference in New Issue
Block a user