@ -42,16 +42,19 @@ define([
return 'cp-fileupload-element-' + String ( Math . random ( ) ) . substring ( 2 ) ;
} ;
var tableHeader = h ( 'div.cp-fileupload-header' , [
h ( 'div.cp-fileupload-header-title' , h ( 'span' , Messages . fileuploadHeader || 'Uploaded files' ) ) ,
h ( 'div.cp-fileupload-header-close' , h ( 'span.fa.fa-times' ) ) ,
] ) ;
var $table = File . $table = $ ( '<table>' , { id : 'cp-fileupload-table' } ) ;
var $thead = $ ( '<tr>' ) . appendTo ( $table ) ;
$ ( '<td>' ) . text ( Messages . upload _type ) . appendTo ( $thead ) ;
$ ( '<td>' ) . text ( Messages . upload _name ) . appendTo ( $thead ) ;
$ ( '<td>' ) . text ( Messages . upload _size ) . appendTo ( $thead ) ;
$ ( '<td>' ) . text ( Messages . upload _progress ) . appendTo ( $thead ) ;
$ ( '<td>' ) . text ( Messages . cancel ) . appendTo ( $thead ) ;
var createTableContainer = function ( $body ) {
File . $container = $ ( '<div>' , { id : 'cp-fileupload' } ) . append ( $table ) . appendTo ( $body ) ;
File . $container = $ ( '<div>' , { id : 'cp-fileupload' } ) . append ( tableHeader ) . append ( $table ) . appendTo ( $body ) ;
$ ( '.cp-fileupload-header-close' ) . click ( function ( ) {
File . $container . fadeOut ( ) ;
} ) ;
return File . $container ;
} ;
@ -100,16 +103,19 @@ define([
var $row = $table . find ( 'tr[id="' + id + '"]' ) ;
$row . find ( '.cp-fileupload-table-cancel' ) . ( ' -') ;
$row . find ( '.cp-fileupload-table-cancel' ) . addClass( 'success' ) . html( ' ') . append ( h ( 'span.fa.fa -minus ') ) ;
var $pv = $row . find ( '.cp-fileupload-table-progress-value' ) ;
var $pb = $row . find ( '.cp-fileupload-table-progress-container' ) ;
var $pc = $row . find ( '.cp-fileupload-table-progress' ) ;
var $pb = $row . find ( '.cp-fileupload-table-progressbar' ) ;
var $link = $row . find ( '.cp-fileupload-table-link' ) ;
/ * *
* Update progress in the download panel , for uploading a file
* @ param { number } progressValue Progression of download , between 0 and 100
* /
updateProgress = function ( progressValue ) {
$pv . text ( Math . round ( progressValue * 100 ) / 100 + '%' ) ;
$pv . text ( Math . round ( progressValue * 100 ) / 100 + '%' ) ;
$pb . css ( {
width : ( progressValue / 100 ) * $pc . width ( ) + 'px'
width : progressValue + '%
} ) ;
} ;
@ -179,8 +185,14 @@ define([
clearTimeout ( queue . to ) ;
queue . to = window . setTimeout ( function ( ) {
if ( config . keepTable ) { return ; }
File . $container . fadeOut ( ) ;
} , 3000 ) ;
// don't hide panel if mouse over
if ( File . $container . is ( ":hover" ) ) {
File . $container . one ( "mouseleave" , function ( ) { File . $container . fadeOut ( ) ; } ) ;
}
else {
File . $container . fadeOut ( ) ;
}
} , 60000 ) ;
return ;
}
if ( queue . inProgress ) { return ; }
@ -199,8 +211,9 @@ define([
window . setTimeout ( function ( ) { $table . show ( ) ; } ) ;
var estimate = obj . dl ? obj . size : FileCrypto . computeEncryptedSize ( obj . blob . byteLength , obj . metadata ) ;
var $progressBar = $ ( '<div>' , { 'class' : 'cp-fileupload-table-progress-container' } ) ;
var $progressValue = $ ( '<span>' , { 'class' : 'cp-fileupload-table-progress-value' } ) . text ( Messages . upload _pending ) ;
var $progressContainer = $ ( '<div>' , { 'class' : 'cp-fileupload-table-progress-container' } ) ;
$ ( '<div>' , { 'class' : 'cp-fileupload-table-progressbar' } ) . appendTo ( $progressContainer ) ;
$ ( '<span>' , { 'class' : 'cp-fileupload-table-progress-value' } ) . text ( Messages . upload _pending ) . appendTo ( $progressContainer ) ;
var $tr = $ ( '<tr>' , { id : id } ) . appendTo ( $table ) ;
var $lines = $table . find ( 'tr[id]' ) ;
@ -211,19 +224,28 @@ define([
var $cancel = $ ( '<span>' , { 'class' : 'cp-fileupload-table-cancel-button fa fa-times' } ) . click ( function ( ) {
queue . queue = queue . queue . filter ( function ( el ) { return el . id !== id ; } ) ;
$cancel . remove ( ) ;
$tr . find ( '.cp-fileupload-table-cancel' ) . text( '-' ) ;
$tr . find ( '.cp-fileupload-table-cancel' ) . addClass( 'cancelled' ) . html ( '' ) . append ( h ( 'span.fa.fa-minus' ) ) ;
$tr . find ( '.cp-fileupload-table-progress-value' ) . text ( Messages . upload _cancelled ) ;
} ) ;
var $link = $ ( '<a>' , {
'class' : 'cp-fileupload-table-link' ,
'rel' : 'noopener noreferrer'
} ) . text( obj . dl ? obj . name : obj . metadata . name ) ;
} ) . append( h ( 'span.cp-fileupload-table-name' , obj . dl ? obj . name : obj . metadata . name ) ) ;
$ ( '<td>' ) . text ( obj . dl ? Messages . download _dl : Messages . upload _up ) . appendTo ( $tr ) ;
var typeIcon ;
if ( obj . dl ) { typeIcon = h ( 'span.fa.fa-arrow-down' , { title : Messages . download _dl } ) ; }
else { typeIcon = h ( 'span.fa.fa-arrow-up' , { title : Messages . upload _up } ) ; }
// type (download / upload)
$ ( '<td>' , { 'class' : 'cp-fileupload-table-type' } ) . append ( typeIcon ) . appendTo ( $tr ) ;
// name
$ ( '<td>' ) . append ( $link ) . appendTo ( $tr ) ;
// size
$ ( '<td>' ) . text ( prettySize ( estimate ) ) . appendTo ( $tr ) ;
$ ( '<td>' , { 'class' : 'cp-fileupload-table-progress' } ) . append ( $progressBar ) . append ( $progressValue ) . appendTo ( $tr ) ;
// progress
$ ( '<td>' , { 'class' : 'cp-fileupload-table-progress' } ) . append ( $progressContainer ) . appendTo ( $tr ) ;
// cancel
$ ( '<td>' , { 'class' : 'cp-fileupload-table-cancel' } ) . append ( $cancel ) . appendTo ( $tr ) ;
queue . next ( ) ;
@ -234,37 +256,39 @@ define([
owned : true ,
store : true
} ;
var fileUploadModal = function ( file , cb ) {
var extIdx = file . name . lastIndexOf ( '.' ) ;
var name = extIdx !== - 1 ? file . name . slice ( 0 , extIdx ) : file . name ;
var ext = extIdx !== - 1 ? file . name . slice ( extIdx ) : "" ;
var createHelper = function ( href , text ) {
var q = h ( 'a.fa.fa-question-circle' , {
style : 'text-decoration: none !important;' ,
title : text ,
href : origin + href ,
target : "_blank" ,
'data-tippy-placement' : "right"
} ) ;
return q ;
} ;
var createHelper = function ( href , text ) {
var q = h ( 'a.fa.fa-question-circle' , {
style : 'text-decoration: none !important;' ,
title : text ,
href : origin + href ,
target : "_blank" ,
'data-tippy-placement' : "right"
} ) ;
return q ;
} ;
var createManualStore = function ( isFolderUpload ) {
var privateData = common . getMetadataMgr ( ) . getPrivateData ( ) ;
var autoStore = Util . find ( privateData , [ 'settings' , 'general' , 'autostore' ] ) || 0 ;
var initialState = modalState . owned || modalState . store ;
var initialDisabled = modalState . owned ? { disabled : true } : { } ;
var manualStore = autoStore === 1 ? undefined :
UI . createCheckbox ( 'cp-upload-store' , Messages . autostore _forceSave , initialState , {
input : initialDisabled
} ) ;
UI . createCheckbox ( 'cp-upload-store' , isFolderUpload ? ( Messages . uploadFolder _modal _forceSave ) : Messages . autostore _forceSave , initialState , {
input : initialDisabled
} ) ;
return manualStore ;
} ;
var fileUploadModal = function ( defaultFileName , cb ) {
var parsedName = /^(\.?.+?)(\.[^.]+)?$/ . exec ( defaultFileName ) || [ ] ;
var ext = parsedName [ 2 ] || "" ;
var manualStore = createManualStore ( ) ;
// Ask for name, password and owner
var content = h ( 'div' , [
h ( 'h4' , Messages . upload _modal _title ) ,
UIElements . setHTML ( h ( 'label' , { for : 'cp-upload-name' } ) ,
Messages . _getKey ( 'upload_modal_filename' , [ ext ] ) ) ,
h ( 'input#cp-upload-name' , { type : 'text' , placeholder : name } ) ,
h ( 'input#cp-upload-name' , { type : 'text' , placeholder : defaultFileName, value : defaultFileN ame} ) ,
h ( 'label' , { for : 'cp-upload-password' } , Messages . creation _passwordValue ) ,
UI . passwordInput ( { id : 'cp-upload-password' } ) ,
h ( 'span' , {
@ -277,7 +301,7 @@ define([
] ) ;
$ ( content ) . find ( '#cp-upload-owned' ) . on ( 'change' , function ( ) {
var val = ( content ) . find ( '#cp-upload-owned' ) . is ( ':checked' ) ;
var val = Util. isCheked ( $( content ) . find ( '#cp-upload-owned' ) ) ;
if ( val ) {
$ ( content ) . find ( '#cp-upload-store' ) . prop ( 'checked' , true ) . prop ( 'disabled' , true ) ;
} else {
@ -291,14 +315,14 @@ define([
// Get the values
var newName = $ ( content ) . find ( '#cp-upload-name' ) . val ( ) ;
var password = $ ( content ) . find ( '#cp-upload-password' ) . val ( ) || undefined ;
var owned = ( content ) . find ( '#cp-upload-owned' ) . is ( ':checked' ) ;
var forceSave = owned || ( content ) . find ( '#cp-upload-store' ) . is ( ':checked' ) ;
var owned = Util. isChecked ( $( content ) . find ( '#cp-upload-owned' ) ) ;
var forceSave = owned || Util. isChecked ( $( content ) . find ( '#cp-upload-store' ) ) ;
modalState . owned = owned ;
modalState . store = forceSave ;
// Add extension to the name if needed
if ( ! newName || ! newName . trim ( ) ) { newName = file. n ame; }
if ( ! newName || ! newName . trim ( ) ) { newName = defaultFileN ame; }
var newExtIdx = newName . lastIndexOf ( '.' ) ;
var newExt = newExtIdx !== - 1 ? newName . slice ( newExtIdx ) : "" ;
if ( newExt !== ext ) { newName += ext ; }
@ -312,12 +336,64 @@ define([
} ) ;
} ;
File . showFolderUploadModal = function ( foldername , cb ) {
var manualStore = createManualStore ( true ) ;
// Ask for name, password and owner
var content = h ( 'div' , [
h ( 'h4' , Messages . uploadFolder _modal _title ) ,
UIElements . setHTML ( h ( 'label' , { for : 'cp-upload-name' } ) , Messages . fm _folderName ) ,
h ( 'input#cp-upload-foldername' , { type : 'text' , placeholder : foldername , value : foldername } ) ,
h ( 'label' , { for : 'cp-upload-password' } , Messages . uploadFolder _modal _filesPassword ) ,
UI . passwordInput ( { id : 'cp-upload-password' } ) ,
h ( 'span' , {
style : 'display:flex;align-items:center;justify-content:space-between'
} , [
UI . createCheckbox ( 'cp-upload-owned' , Messages . uploadFolder _modal _owner , modalState . owned ) ,
createHelper ( '/faq.html#keywords-owned' , Messages . creation _owned1 )
] ) ,
manualStore
] ) ;
$ ( content ) . find ( '#cp-upload-owned' ) . on ( 'change' , function ( ) {
var val = Util . isChecked ( $ ( content ) . find ( '#cp-upload-owned' ) ) ;
if ( val ) {
$ ( content ) . find ( '#cp-upload-store' ) . prop ( 'checked' , true ) . prop ( 'disabled' , true ) ;
} else {
$ ( content ) . find ( '#cp-upload-store' ) . prop ( 'disabled' , false ) ;
}
} ) ;
UI . confirm ( content , function ( yes ) {
if ( ! yes ) { return void cb ( ) ; }
// Get the values
var newName = $ ( content ) . find ( '#cp-upload-foldername' ) . val ( ) ;
var password = $ ( content ) . find ( '#cp-upload-password' ) . val ( ) || undefined ;
var owned = Util . isChecked ( $ ( content ) . find ( '#cp-upload-owned' ) ) ;
var forceSave = owned || Util . isChecked ( $ ( content ) . find ( '#cp-upload-store' ) ) ;
modalState . owned = owned ;
modalState . store = forceSave ;
if ( ! newName || ! newName . trim ( ) ) { newName = foldername ; }
cb ( {
folderName : newName ,
password : password ,
owned : owned ,
forceSave : forceSave
} ) ;
} ) ;
} ;
var handleFileState = {
queue : [ ] ,
inProgress : false
} ;
var handleFile = File . handleFile = function ( file , e ) {
if ( handleFileState . inProgress ) { return void handleFileState . queue . push ( [ file , e ] ) ; }
/* if defaultOptions is passed, the function does not show the upload options modal, and directly save the file with the specified options */
var handleFile = File . handleFile = function ( file , e , defaultOptions ) {
if ( handleFileState . inProgress ) { return void handleFileState . queue . push ( [ file , e , defaultOptions ] ) ; }
handleFileState . inProgress = true ;
var thumb ;
@ -345,7 +421,7 @@ define([
handleFileState . inProgress = false ;
if ( handleFileState . queue . length ) {
var next = handleFileState . queue . shift ( ) ;
handleFile ( next [ 0 ] , next [ 1 ] ;
handleFile ( next [ 0 ] , next [ 1 ] , next [ 2 ] );
}
} ;
var getName = function ( ) {
@ -354,14 +430,25 @@ define([
if ( config . noStore ) { return void finish ( ) ; }
// Otherwise, ask for password, name and ownership
fileUploadModal ( file , function ( obj ) {
if ( ! obj ) { return void finish ( true ) ; }
name = obj . name ;
password = obj . password ;
owned = obj . owned ;
forceSave = obj . forceSave ;
finish ( ) ;
} ) ;
// if default options were passed, upload file immediately
if ( defaultOptions && typeof defaultOptions === "object" ) {
name = defaultOptions . name || file . name ;
password = defaultOptions . password || undefined ;
owned = ! ! defaultOptions . owned ;
forceSave = ! ! defaultOptions . forceSave ;
return void finish ( ) ;
}
// if no default options were passed, ask the user
else {
fileUploadModal ( file . name , function ( obj ) {
if ( ! obj ) { return void finish ( true ) ; }
name = obj . name ;
password = obj . password ;
owned = obj . owned ;
forceSave = obj . forceSave ;
finish ( ) ;
} ) ;
}
} ;
blobToArrayBuffer ( file , function ( e , buffer ) {
@ -446,6 +533,8 @@ define([
createUploader ( config . dropArea , config . hoverArea , config . body ) ;
// XXX an X is still displayed when downloading, even though we can't cancel (at the moment)
// XXX implement the abiality to cancel downloads :D
var updateProgressbar = function ( file , data , downloadFunction , cb ) {
if ( queue . inProgress ) { return ; }
queue . inProgress = true ;
@ -453,37 +542,57 @@ define([
var $row = $table . find ( 'tr[id="' + id + '"]' ) ;
var $pv = $row . find ( '.cp-fileupload-table-progress-value' ) ;
var $pb = $row . find ( '.cp-fileupload-table-progress-container' ) ;
var $pc = $row . find ( '.cp-fileupload-table-progress' ) ;
var $pb = $row . find ( '.cp-fileupload-table-progressbar' ) ;
var $link = $row . find ( '.cp-fileupload-table-link' ) ;
var done = function ( ) {
$row . find ( '.cp-fileupload-table-cancel' ) . text( '-' ) ;
$row . find ( '.cp-fileupload-table-cancel' ) . addClass( 'success' ) . html ( '' ) . append ( h ( 'span.fa.fa-check' ) ) ;
queue . inProgress = false ;
queue . next ( ) ;
} ;
/ *
var cancelled = function ( ) {
$row . find ( '.cp-fileupload-table-cancel' ) . addClass ( 'cancelled' ) . html ( '' ) . append ( h ( 'span.fa.fa-minus' ) ) ;
queue . inProgress = false ;
queue . next ( ) ;
} ; * /
/ * *
* Update progress in the download panel , for downloading a file
* @ param { number } progressValue Progression of download , between 0 and 1
* /
var updateDLProgress = function ( progressValue ) {
var text = Math . round ( progressValue * 100 ) + '%' ;
text += ' (' + Messages . download _step1 + '...)' ;
text += ' (' + Messages . download _step1 + '...)' ;
$pv . text ( text ) ;
$pb . css ( {
width : progressValue * $pc . width ( ) + 'px'
width : ( progressValue * 100 ) + '%
} ) ;
} ;
/ * *
* Update progress in the download panel , for decrypting a file ( after downloading it )
* @ param { number } progressValue Progression of download , between 0 and 1
* /
var updateDecryptProgress = function ( progressValue ) {
var text = Math . round ( progressValue * 100 ) + '%' ;
var text = Math . round ( progressValue * 100 ) + '%' ;
text += progressValue === 1 ? '' : ' (' + Messages . download _step2 + '...)' ;
$pv . text ( text ) ;
$pb . css ( {
width : progressValue * $pc . width ( ) + 'px
width : ( progressValue * 100 ) + '%
} ) ;
} ;
/ * *
* As updateDLProgress but for folders
* @ param { number } progressValue Progression of download , between 0 and 1
* /
var updateProgress = function ( progressValue ) {
var text = Math . round ( progressValue * 100 ) + '%' ;
$pv . text ( text ) ;
$pb . css ( {
width : progressValue * $pc . width ( ) + 'px'
width : ( progressValue * 100 ) + '%
} ) ;
} ;
@ -507,16 +616,20 @@ define([
folderProgress : updateProgress ,
} ) ;
// var $cancel = $('<span>', {'class': 'cp-fileupload-table-cancel-button fa fa-times'}).click(function () {
// dl.cancel();
// $cancel.remove();
// $row.find('.cp-fileupload-table-progress-value').text(Messages.upload_cancelled);
// done();
// });
// $row.find('.cp-fileupload-table-cancel').html('').append($cancel);
$row . find ( '.cp-fileupload-table-cancel' ) . html ( '' ) ;
} ;
/ *
var $cancel = $ ( '<span>' , { 'class' : 'cp-fileupload-table-cancel-button fa fa-times' } ) . click ( function ( ) {
dl . cancel ( ) ;
$cancel . remove ( ) ;
$row . find ( '.cp-fileupload-table-progress-value' ) . text ( Messages . upload _cancelled ) ;
cancelled ( ) ;
} ) ;
* /
/ *
$row . find ( '.cp-fileupload-table-cancel' )
. html ( '' )
. append ( $cancel ) ; * /
} ;
File . downloadFile = function ( fData , cb ) {
var name = fData . filename || fData . title ;
ansuz
5 years ago