mirror of
https://github.com/xevidos/codiad.git
synced 2024-12-22 22:02:15 +01:00
Continued work on upload gui and related controls
This commit is contained in:
xevidos
parent
5958f62f8f
commit
eeff5d69db
4 changed files with 179 additions and 64 deletions
|
|
@ -198,6 +198,8 @@
|
|||
let item_list = d.items;
|
||||
let total_items = item_list.length;
|
||||
|
||||
let c = $( ".uploads-content" );
|
||||
|
||||
if( item_list && item_list[0].webkitGetAsEntry ) {
|
||||
|
||||
for( let i = 0;i < total_items;i++ ) {
|
||||
|
|
@ -223,6 +225,52 @@
|
|||
files = file_list;
|
||||
}
|
||||
|
||||
for( let i = files.length;i--; ) {
|
||||
|
||||
//Add files to gui and then wait for progress
|
||||
|
||||
console.log( "Upload - GUI", files[i] );
|
||||
|
||||
let div = $( `<div class="upload-container" data-path="${files[i].path}"></div>` );
|
||||
let title = $( `<div class="upload-title">${files[i].name}</div>` );
|
||||
let progress = $( `<div class="upload-progress"></div>` );
|
||||
let bar = $( `<div class="bar"></div>` );
|
||||
let progress_text = $( `<div class="upload-progress-text">0%</div>` );
|
||||
let span = $( `<span style="text-align: left;"></span>` );
|
||||
let bottom_span = $( `<span style="text-align: left;"></span>` );
|
||||
|
||||
let cancel = $( `<div class="upload-cancel">Cancel</div>` );
|
||||
let dismiss = $( `<div class="upload-dismiss">Dismiss</div>` );
|
||||
|
||||
cancel.on( "click", function( e ) {
|
||||
|
||||
files[i].cancel = true;
|
||||
});
|
||||
|
||||
dismiss.on( "click", function( e ) {
|
||||
|
||||
if( files[i].finished === true ) {
|
||||
|
||||
div.slideUp();
|
||||
}
|
||||
});
|
||||
|
||||
span.append( title );
|
||||
span.append( progress_text );
|
||||
|
||||
progress.append( bar );
|
||||
|
||||
bottom_span.append( cancel );
|
||||
bottom_span.append( dismiss );
|
||||
|
||||
div.append( span );
|
||||
div.append( progress );
|
||||
div.append( bottom_span );
|
||||
c.append( div );
|
||||
}
|
||||
|
||||
$( '.uploads-container' ).slideDown();
|
||||
|
||||
for( let i = files.length;i--; ) {
|
||||
|
||||
let status = await _this.upload( files[i] );
|
||||
|
|
@ -1839,6 +1887,9 @@
|
|||
let current = 0;
|
||||
let index = 0;
|
||||
|
||||
let uc = $( `div.upload-container[data-path="${file.path}"]` );
|
||||
let upt = uc.find( ".upload-progress-text" );
|
||||
let upb = uc.find( ".bar" );
|
||||
console.log( file, file.size );
|
||||
|
||||
return new Promise( function( resolve, reject ) {
|
||||
|
|
@ -1856,12 +1907,29 @@
|
|||
|
||||
let timeout = setInterval( function() {
|
||||
|
||||
if( ( index == total_blobs || current == total_size ) && _this.uploads.cache.length == 0 ) {
|
||||
let progress = Math.round( ( current / total_size ) * 100 );
|
||||
upt.text( progress + "%" );
|
||||
upb.css( "width", progress + "%" );
|
||||
|
||||
console.log( progress, uc, upt, upb );
|
||||
|
||||
if( file.cancel && _this.uploads.cache.length == 0 ) {
|
||||
|
||||
/**
|
||||
* If canceling we must make sure we clear out the cache
|
||||
* so no leftovers are stored in memory, or screw up a
|
||||
* future upload.
|
||||
*/
|
||||
_this.upload_cancel( file.path );
|
||||
clearTimeout( timeout );
|
||||
resolve( true );
|
||||
return;
|
||||
} else if( ( index == total_blobs || current == total_size ) && _this.uploads.cache.length == 0 ) {
|
||||
|
||||
_this.upload_stitch( file.path );
|
||||
clearTimeout( timeout );
|
||||
resolve( true );
|
||||
} else if( ( index != total_blobs && current != total_size ) && _this.uploads.cache.length < _this.uploads.max ) {
|
||||
} else if( ( index != total_blobs && current != total_size ) && _this.uploads.cache.length < _this.uploads.max && ! file.cancel ) {
|
||||
|
||||
console.log( "Adding new blob: ", ( index + 1 ) + "/" + total_blobs, current + blob_size + "/" + total_size );
|
||||
let reader = new FileReader();
|
||||
|
|
@ -1937,6 +2005,38 @@
|
|||
});
|
||||
},
|
||||
|
||||
upload_cancel: function( path ) {
|
||||
|
||||
let _this = codiad.filemanager;
|
||||
let form = new FormData();
|
||||
|
||||
form.append( 'path', path );
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: _this.controller + "?action=upload_cancel",
|
||||
data: form,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success: function( data ) {
|
||||
|
||||
console.log( data );
|
||||
parent = path.split( '/' );
|
||||
|
||||
parent.pop();
|
||||
parent.pop();
|
||||
|
||||
console.log( path, parent.join( '/' ) );
|
||||
|
||||
_this.rescan( parent.join( '/' ) );
|
||||
},
|
||||
error: function( data ) {
|
||||
|
||||
console.log( data );
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
upload_clear_cache: function() {
|
||||
|
||||
let _this = codiad.filemanager;
|
||||
|
|
@ -1979,6 +2079,9 @@
|
|||
}
|
||||
|
||||
file.path = path + file.name;
|
||||
file.cancel = false;
|
||||
file.finished = false;
|
||||
|
||||
files.push( file );
|
||||
resolve( files );
|
||||
});
|
||||
|
|
|
|||
|
|
@ -341,6 +341,7 @@ if( defined( "SITE_NAME" ) && ! ( SITE_NAME === "" || SITE_NAME === null ) ) {
|
|||
<h2><?php i18n( "Uploads" );?></h2>
|
||||
<a id="uploads-close" class="icon-down-dir icon" alt="Collapse"></a>
|
||||
</div>
|
||||
<div class="uploads-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="uploads-button"><?php i18n("Uploads");?></div>
|
||||
|
|
|
|||
|
|
@ -143,66 +143,6 @@
|
|||
float: right;
|
||||
background: url(../loading.gif) no-repeat;
|
||||
}
|
||||
/* UPLOADER */
|
||||
|
||||
#upload-drop-zone {
|
||||
height: 200px;
|
||||
padding-top: 60px;
|
||||
border: 1px solid #666;
|
||||
border-radius: 5px;
|
||||
margin: 10px 0;
|
||||
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .5);
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
color: #999;
|
||||
}
|
||||
.upload-drag-over {
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
#upload-wrapper {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
#upload-clicker {
|
||||
background: #333;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
#upload-wrapper:hover #upload-clicker {
|
||||
color: #fff;
|
||||
}
|
||||
#upload-wrapper input {
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
opacity: 0.0;
|
||||
}
|
||||
#upload-progress {
|
||||
width: 75%;
|
||||
margin: 10px auto;
|
||||
height: 20px;
|
||||
border: 1px solid #666;
|
||||
background: #262626;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#upload-progress .bar {
|
||||
width: 0;
|
||||
height: 20px;
|
||||
background-image: url(images/progress_bar.png);
|
||||
}
|
||||
#upload-complete {
|
||||
display: none;
|
||||
font-size: 18px;
|
||||
margin: 10px 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* SEARCH */
|
||||
|
||||
|
|
|
|||
|
|
@ -491,9 +491,80 @@ table [class^="icon-"], [class*=" icon-"] {
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
.upload-container {}
|
||||
.uploads-container .project-list-title {
|
||||
|
||||
.upload-progress {}
|
||||
position: unset;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.uploads-content {
|
||||
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.upload-container {
|
||||
|
||||
display: inline-block;
|
||||
height: auto;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.upload-title {
|
||||
|
||||
display: inline-block;
|
||||
left: -45px;
|
||||
max-width: 75%;
|
||||
position: relative;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.upload-progress-text {
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
right: -45px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.upload-progress {
|
||||
|
||||
width: 75%;
|
||||
margin: 10px auto;
|
||||
height: 20px;
|
||||
border: 1px solid #666;
|
||||
background: #262626;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.upload-progress .bar {
|
||||
|
||||
width: 0;
|
||||
height: 20px;
|
||||
background-image: url( filemanager/images/progress_bar.png );
|
||||
}
|
||||
|
||||
.upload-dismiss {
|
||||
|
||||
display: inline-block;
|
||||
left: -45px;
|
||||
max-width: 75%;
|
||||
position: relative;
|
||||
text-decoration: underline;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.upload-cancel {
|
||||
|
||||
color: red;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
right: -45px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#cursor-position {
|
||||
position: absolute;
|
||||
|
|
|
|||
Loading…
Reference in a new issue