marktaiwan
9 years ago
committed by
czaks
1 changed files with 187 additions and 0 deletions
@ -0,0 +1,187 @@ |
|||||
|
/* |
||||
|
* file-selector.js - Add support for drag and drop file selection, and paste from clipbboard on supported browsers. |
||||
|
* |
||||
|
* Usage: |
||||
|
* $config['additional_javascript'][] = 'js/jquery.min.js'; |
||||
|
* $config['additional_javascript'][] = 'js/file-selector.js'; |
||||
|
*/ |
||||
|
|
||||
|
onready(function () { |
||||
|
|
||||
|
// add options panel item
|
||||
|
$(document).ready(function () { |
||||
|
if (window.Options && Options.get_tab('general')) { |
||||
|
Options.extend_tab('general', '<label id="file-drag-drop"><input type="checkbox">' + _('Drag and drop file selection') + '</label>'); |
||||
|
|
||||
|
$('#file-drag-drop>input').on('click', function() { |
||||
|
if ($('#file-drag-drop>input').is(':checked')) { |
||||
|
localStorage.file_dragdrop = 'true'; |
||||
|
} else { |
||||
|
localStorage.file_dragdrop = 'false'; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
if (localStorage.file_dragdrop === 'undefined') localStorage.file_dragdrop = 'true'; |
||||
|
if (localStorage.file_dragdrop === 'true') $('#file-drag-drop>input').prop('checked', true); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// disabled by user, or incompatible browser.
|
||||
|
// fallback to old
|
||||
|
if (localStorage.file_dragdrop == 'false' || !(window.FileReader || window.File)) { |
||||
|
$('.dropzone-wrap').remove(); |
||||
|
$('#upload_file').show(); |
||||
|
|
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// multipost not enabled
|
||||
|
if (typeof max_images == 'undefined') { |
||||
|
var max_images = 1; |
||||
|
} |
||||
|
|
||||
|
var files = []; |
||||
|
|
||||
|
function addFile(file) { |
||||
|
if (files.length == max_images) |
||||
|
return; |
||||
|
|
||||
|
files.push(file); |
||||
|
addThumb(file); |
||||
|
} |
||||
|
|
||||
|
function removeFile(file) { |
||||
|
files.splice(files.indexOf(file), 1); |
||||
|
} |
||||
|
|
||||
|
function getThumbElement(file) { |
||||
|
return $('.tmb-container').filter(function(){return($(this).data('file-ref')==file);}); |
||||
|
} |
||||
|
|
||||
|
function addThumb(file) { |
||||
|
|
||||
|
var fileName = (file.name.length < 24) ? file.name : file.name.substr(0, 22) + '…'; |
||||
|
var fileType = file.type.split('/')[0]; |
||||
|
var fileExt = file.type.split('/')[1]; |
||||
|
var $fileThumb; |
||||
|
|
||||
|
$('.file-thumbs').append($('<div>') |
||||
|
.addClass('tmb-container') |
||||
|
.data('file-ref', file) |
||||
|
.append( |
||||
|
$('<div>').addClass('remove-btn').html('✖'), |
||||
|
$('<div>').addClass('file-tmb'), |
||||
|
$('<div>').addClass('tmb-filename').html(fileName) |
||||
|
) |
||||
|
); |
||||
|
|
||||
|
if (fileType == 'image') { |
||||
|
// if image file, generate thumbnail
|
||||
|
var reader = new FileReader(); |
||||
|
|
||||
|
reader.onloadend = function () { |
||||
|
var dataURL = reader.result; |
||||
|
var $fileThumb = getThumbElement(file).find('.file-tmb'); |
||||
|
$fileThumb.css('background-image', 'url('+ dataURL +')'); |
||||
|
}; |
||||
|
|
||||
|
reader.readAsDataURL(file); |
||||
|
} else { |
||||
|
$fileThumb = getThumbElement(file).find('.file-tmb'); |
||||
|
$fileThumb.html('<span>' + fileExt.toUpperCase() + '</span>'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
$(document).on('ajax_before_post', function (e, formData) { |
||||
|
var i; |
||||
|
|
||||
|
for (i=0; i<max_images; i++) { |
||||
|
var key = 'file'; |
||||
|
if (i > 0) key += i + 1; |
||||
|
formData.append(key, files[i]); |
||||
|
} |
||||
|
|
||||
|
// clear file queue and UI
|
||||
|
files = []; |
||||
|
$('.file-thumbs').empty(); |
||||
|
}); |
||||
|
|
||||
|
var dragCounter = 0; |
||||
|
var dropHandlers = { |
||||
|
dragenter: function (e) { |
||||
|
e.stopPropagation(); |
||||
|
e.preventDefault(); |
||||
|
|
||||
|
if (dragCounter === 0) $(this).addClass('dragover'); |
||||
|
dragCounter++; |
||||
|
}, |
||||
|
dragover: function (e) { |
||||
|
// needed for webkit to work
|
||||
|
e.stopPropagation(); |
||||
|
e.preventDefault(); |
||||
|
}, |
||||
|
dragleave: function (e) { |
||||
|
e.stopPropagation(); |
||||
|
e.preventDefault(); |
||||
|
|
||||
|
dragCounter--; |
||||
|
if (dragCounter === 0) $(this).removeClass('dragover'); |
||||
|
}, |
||||
|
drop: function (e) { |
||||
|
e.stopPropagation(); |
||||
|
e.preventDefault(); |
||||
|
|
||||
|
$(this).removeClass('dragover'); |
||||
|
dragCounter = 0; |
||||
|
|
||||
|
var fileList = e.originalEvent.dataTransfer.files; |
||||
|
for (var i=0; i<fileList.length; i++) { |
||||
|
addFile(fileList[i]); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
$('.dropzone').css('user-select', 'none') // let jquery add browser specific prefix
|
||||
|
|
||||
|
// attach handlers
|
||||
|
$(document).on(dropHandlers, '.dropzone'); |
||||
|
|
||||
|
$(document).on('click', '.dropzone .remove-btn', function (e) { |
||||
|
var file = $(e.target).parent().data('file-ref'); |
||||
|
|
||||
|
removeFile(file); |
||||
|
$(e.target).parent().remove(); |
||||
|
}); |
||||
|
|
||||
|
$(document).on('click', '.dropzone .file-hint', function (e) { |
||||
|
var $fileSelector = $('<input type="file" multiple>'); |
||||
|
|
||||
|
$fileSelector.on('change', function (e) { |
||||
|
if (this.files.length > 0) { |
||||
|
for (var i=0; i<this.files.length; i++) { |
||||
|
addFile(this.files[i]); |
||||
|
} |
||||
|
} |
||||
|
$(this).remove(); |
||||
|
}); |
||||
|
|
||||
|
$fileSelector.click(); |
||||
|
}); |
||||
|
|
||||
|
$(document).on('paste', function (e) { |
||||
|
var clipboard = e.originalEvent.clipboardData; |
||||
|
if (typeof clipboard.items != 'undefined' && clipboard.items.length != 0) { |
||||
|
|
||||
|
//Webkit
|
||||
|
for (var i=0; i<clipboard.items.length; i++) { |
||||
|
if (clipboard.items[i].kind != 'file') |
||||
|
continue; |
||||
|
|
||||
|
//convert blob to file
|
||||
|
var file = new File([clipboard.items[i].getAsFile()], 'ClipboardImage.png', {type: 'image/png'}); |
||||
|
addFile(file); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
}); |
Loading…
Reference in new issue