13621160019@163.com
commit
8a0dc5b916
|
|
@ -193,6 +193,14 @@
|
|||
.dropzone .dz-message {
|
||||
text-align: center;
|
||||
margin: 2em 0; }
|
||||
.dropzone .dz-message .dz-button {
|
||||
background: none;
|
||||
color: inherit;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
outline: inherit; }
|
||||
.dropzone .dz-preview {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,118 @@
|
|||
/*
|
||||
* Beautify Dropzone
|
||||
*
|
||||
* @author Uday Hiwarale <uhiwarale@gmail.com>
|
||||
* https://www.github.com/thatisuday/ngDropzone
|
||||
*
|
||||
* Remove huge border radius, odd colors
|
||||
* Remove unnecessary preview elements like size, name etc.
|
||||
* Use .md, .sm, .xs classes with .dropzone class for smaller thumbnail previews
|
||||
* * * * * * * * * * * * * * *
|
||||
* Make sure you set font family property in body else add below style to your dropzones
|
||||
* font-family:sans-serif;
|
||||
**/
|
||||
.dropzone {
|
||||
position: relative;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #eee;
|
||||
/* Drop message */
|
||||
/* Preview */ }
|
||||
.dropzone .dz-message {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
-moz-transform: translate(-50%, -50%);
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
font-weight: 300;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase; }
|
||||
.dropzone .dz-preview {
|
||||
margin: 5px;
|
||||
min-height: auto;
|
||||
/* Preview image */
|
||||
/* Preview info */
|
||||
/* Progress */
|
||||
/* Callback icons */
|
||||
/* Error */
|
||||
/* Remove file */ }
|
||||
.dropzone .dz-preview.dz-file-preview .dz-image {
|
||||
border-radius: 3px; }
|
||||
.dropzone .dz-preview .dz-image {
|
||||
border-radius: 3px; }
|
||||
.dropzone .dz-preview .dz-size,
|
||||
.dropzone .dz-preview .dz-filename {
|
||||
display: none; }
|
||||
.dropzone .dz-preview .dz-progress {
|
||||
left: 0;
|
||||
width: 90%;
|
||||
border-radius: 3px;
|
||||
margin-left: 5%;
|
||||
margin-right: 5%; }
|
||||
.dropzone .dz-preview .dz-progress .dz-upload {
|
||||
background: #8BC34A;
|
||||
background: -webkit-linear-gradient(top, #E6EE9C, #8BC34A);
|
||||
background: linear-gradient(to bottom, #E6EE9C, #8BC34A); }
|
||||
.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
|
||||
position: absolute;
|
||||
margin-top: -6px;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
-moz-transform: translate(-50%, -50%);
|
||||
-webkit-transform: translate(-50%, -50%); }
|
||||
.dropzone .dz-preview.dz-error .dz-error-message {
|
||||
top: auto;
|
||||
left: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
line-height: 14px;
|
||||
border-radius: 3px;
|
||||
background: #FF9800;
|
||||
background: -webkit-linear-gradient(top, #FFA726, #FF9800);
|
||||
background: linear-gradient(to bottom, #FFA726, #FF9800);
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
margin-left: -10px; }
|
||||
.dropzone .dz-preview.dz-error .dz-error-message:after {
|
||||
border-bottom: 6px solid #FF9800; }
|
||||
.dropzone .dz-preview .dz-remove {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
padding: 3px 0;
|
||||
background-color: rgba(100, 100, 100, 0.5);
|
||||
font-weight: 300;
|
||||
z-index: 10;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-decoration: none; }
|
||||
.dropzone.md .dz-preview .dz-image {
|
||||
width: 100px;
|
||||
height: 100px; }
|
||||
.dropzone.md .dz-preview.dz-error .dz-error-message {
|
||||
margin-left: -20px; }
|
||||
.dropzone.sm .dz-preview .dz-image {
|
||||
width: 80px;
|
||||
height: 80px; }
|
||||
.dropzone.sm .dz-preview.dz-error .dz-error-message {
|
||||
margin-left: -30px; }
|
||||
.dropzone.sm .dz-preview .dz-remove {
|
||||
font-size: 10px; }
|
||||
.dropzone.xs .dz-preview .dz-image {
|
||||
width: 60px;
|
||||
height: 60px; }
|
||||
.dropzone.xs .dz-preview.dz-error .dz-error-message {
|
||||
margin-left: -40px; }
|
||||
.dropzone.xs .dz-preview .dz-remove {
|
||||
font-size: 9px; }
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
<script src="js/jquery/jquery.panzoom.min.js"></script>
|
||||
<script src="js/plugins/jquery-ui/jquery-ui.min.js"></script>
|
||||
<script src="js/bootstrap/bootstrap.min.js"></script>
|
||||
<script src="js/dropzone/dropzone.js"></script>
|
||||
<script src="js/plugins/dropzone/dropzone.js"></script>
|
||||
<script type="text/javascript">
|
||||
jQuery.event.props.push('dataTransfer');
|
||||
Dropzone.autoDiscover = false;
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
<script src="js/angular/angular.min.js"></script>
|
||||
<script src="js/angular/angular-sanitize.js"></script>
|
||||
<script src="js/angular-highcharts/highcharts-ng.js"></script>
|
||||
<script src="js/dropzone/ng-dropzone.js"></script>
|
||||
<script src="js/plugins/dropzone/ng-dropzone.js"></script>
|
||||
<script src="js/plugins/oclazyload/dist/ocLazyLoad.min.js"></script>
|
||||
<script src="js/angular-translate/angular-translate.min.js"></script>
|
||||
<script src="js/ui-router/angular-ui-router.min.js"></script>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,99 +0,0 @@
|
|||
/**!
|
||||
* AngularJS dropzone directive
|
||||
* @author Uday Hiwarale <uhiwarale@gmail.com>
|
||||
* https://www.github.com/thatisuday/ngDropzone
|
||||
*/
|
||||
|
||||
|
||||
(function(){
|
||||
'use strict';
|
||||
|
||||
angular.module('thatisuday.dropzone', []).provider('dropzoneOps', function(){
|
||||
/*
|
||||
* Add default options here
|
||||
**/
|
||||
var defOps = {
|
||||
//Add your options here
|
||||
};
|
||||
|
||||
return {
|
||||
setOptions : function(newOps){
|
||||
angular.extend(defOps, newOps);
|
||||
},
|
||||
$get : function(){
|
||||
return defOps;
|
||||
}
|
||||
}
|
||||
}).directive('ngDropzone', ['$timeout', 'dropzoneOps', function($timeout, dropzoneOps){
|
||||
return {
|
||||
restrict : 'AE',
|
||||
template : '<div></div>',
|
||||
replace : true,
|
||||
scope : {
|
||||
options : '=?', //http://www.dropzonejs.com/#configuration-options
|
||||
callbacks : '=?', //http://www.dropzonejs.com/#events
|
||||
methods : '=?' //http://www.dropzonejs.com/#dropzone-methods
|
||||
},
|
||||
link : function(scope, iElem, iAttr){
|
||||
//Set options for dropzone {override from dropzone options provider}
|
||||
scope.options = scope.options || {};
|
||||
var initOps = angular.extend({}, dropzoneOps, scope.options);
|
||||
|
||||
|
||||
//Instantiate dropzone with initOps
|
||||
var dropzone = new Dropzone(iElem[0], initOps);
|
||||
|
||||
|
||||
/*********************************************/
|
||||
|
||||
|
||||
//Instantiate Dropzone methods (Control actions)
|
||||
scope.methods = scope.methods || {};
|
||||
|
||||
scope.methods.getDropzone = function(){
|
||||
return dropzone; //Return dropzone instance
|
||||
};
|
||||
|
||||
scope.methods.getAllFiles = function(){
|
||||
return dropzone.files; //Return all files
|
||||
};
|
||||
|
||||
var controlMethods = [
|
||||
'removeFile', 'removeAllFiles', 'processQueue',
|
||||
'getAcceptedFiles', 'getRejectedFiles', 'getQueuedFiles', 'getUploadingFiles',
|
||||
'disable', 'enable', 'confirm', 'createThumbnailFromUrl'
|
||||
];
|
||||
|
||||
angular.forEach(controlMethods, function(methodName){
|
||||
scope.methods[methodName] = function(){
|
||||
dropzone[methodName].apply(dropzone, arguments);
|
||||
if(!scope.$$phase && !scope.$root.$$phase) scope.$apply();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/*********************************************/
|
||||
|
||||
|
||||
//Set invents (callbacks)
|
||||
if(scope.callbacks){
|
||||
var callbackMethods = [
|
||||
'drop', 'dragstart', 'dragend',
|
||||
'dragenter', 'dragover', 'dragleave', 'addedfile', 'removedfile',
|
||||
'thumbnail', 'error', 'processing', 'uploadprogress',
|
||||
'sending', 'success', 'complete', 'canceled', 'maxfilesreached',
|
||||
'maxfilesexceeded', 'processingmultiple', 'sendingmultiple', 'successmultiple',
|
||||
'completemultiple', 'canceledmultiple', 'totaluploadprogress', 'reset', 'queuecomplete'
|
||||
];
|
||||
angular.forEach(callbackMethods, function(method){
|
||||
var callback = (scope.callbacks[method] || angular.noop);
|
||||
dropzone.on(method, function(){
|
||||
callback.apply(null, arguments);
|
||||
if(!scope.$$phase && !scope.$root.$$phase) scope.$apply();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}]);
|
||||
})();
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,114 @@
|
|||
/**!
|
||||
* AngularJS dropzone directive
|
||||
* @author Uday Hiwarale <uhiwarale@gmail.com>
|
||||
* https://www.github.com/thatisuday/ngDropzone
|
||||
*/
|
||||
|
||||
|
||||
(function(root){
|
||||
'use strict';
|
||||
function factory(angular, Dropzone){
|
||||
|
||||
angular.module('thatisuday.dropzone', []).provider('dropzoneOps', function(){
|
||||
/*
|
||||
* Add default options here
|
||||
**/
|
||||
var defOps = {
|
||||
//Add your options here
|
||||
};
|
||||
|
||||
return {
|
||||
setOptions : function(newOps){
|
||||
angular.extend(defOps, newOps);
|
||||
},
|
||||
$get : function(){
|
||||
return defOps;
|
||||
}
|
||||
}
|
||||
}).directive('ngDropzone', ['$timeout', 'dropzoneOps', function($timeout, dropzoneOps){
|
||||
return {
|
||||
restrict : 'AE',
|
||||
template : '<div></div>',
|
||||
replace : true,
|
||||
scope : {
|
||||
options : '=?', //http://www.dropzonejs.com/#configuration-options
|
||||
callbacks : '=?', //http://www.dropzonejs.com/#events
|
||||
methods : '=?' //http://www.dropzonejs.com/#dropzone-methods
|
||||
},
|
||||
link : function(scope, iElem, iAttr){
|
||||
//Set options for dropzone {override from dropzone options provider}
|
||||
scope.options = scope.options || {};
|
||||
var initOps = angular.extend({}, dropzoneOps, scope.options);
|
||||
|
||||
|
||||
//Instantiate dropzone with initOps
|
||||
var dropzone = new Dropzone(iElem[0], initOps);
|
||||
|
||||
|
||||
/*********************************************/
|
||||
|
||||
|
||||
//Instantiate Dropzone methods (Control actions)
|
||||
scope.methods = scope.methods || {};
|
||||
|
||||
scope.methods.getDropzone = function(){
|
||||
return dropzone; //Return dropzone instance
|
||||
};
|
||||
|
||||
scope.methods.getAllFiles = function(){
|
||||
return dropzone.files; //Return all files
|
||||
};
|
||||
|
||||
var controlMethods = [
|
||||
'removeFile', 'removeAllFiles', 'processQueue',
|
||||
'getAcceptedFiles', 'getRejectedFiles', 'getQueuedFiles', 'getUploadingFiles',
|
||||
'disable', 'enable', 'confirm', 'createThumbnailFromUrl'
|
||||
];
|
||||
|
||||
angular.forEach(controlMethods, function(methodName){
|
||||
scope.methods[methodName] = function(){
|
||||
dropzone[methodName].apply(dropzone, arguments);
|
||||
if(!scope.$$phase && !scope.$root.$$phase) scope.$apply();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/*********************************************/
|
||||
|
||||
|
||||
//Set invents (callbacks)
|
||||
if(scope.callbacks){
|
||||
var callbackMethods = [
|
||||
'drop', 'dragstart', 'dragend',
|
||||
'dragenter', 'dragover', 'dragleave', 'addedfile', 'removedfile',
|
||||
'thumbnail', 'error', 'processing', 'uploadprogress',
|
||||
'sending', 'success', 'complete', 'canceled', 'maxfilesreached',
|
||||
'maxfilesexceeded', 'processingmultiple', 'sendingmultiple', 'successmultiple',
|
||||
'completemultiple', 'canceledmultiple', 'totaluploadprogress', 'reset', 'queuecomplete'
|
||||
];
|
||||
angular.forEach(callbackMethods, function(method){
|
||||
var callback = (scope.callbacks[method] || angular.noop);
|
||||
dropzone.on(method, function(){
|
||||
callback.apply(null, arguments);
|
||||
if(!scope.$$phase && !scope.$root.$$phase) scope.$apply();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}]);
|
||||
}
|
||||
|
||||
|
||||
|
||||
if ((typeof module === 'object') && module.exports) {
|
||||
/* CommonJS module */
|
||||
module.exports = factory(require('angular'), require('dropzone'));
|
||||
} else if (typeof define === 'function' && define.amd) {
|
||||
/* AMD module */
|
||||
define(['angular', 'dropzone'], factory);
|
||||
} else {
|
||||
/* Browser global */
|
||||
factory(root.angular, root.Dropzone);
|
||||
}
|
||||
})(this);
|
||||
Loading…
Reference in New Issue