mirror of
https://github.com/moodle/moodle.git
synced 2025-04-13 04:22:07 +02:00
MDL-78096 Javascript: core/dropzone improvement
core/dropzone now accepts custom label to display in the Dropzone
This commit is contained in:
Huong Nguyen
meirzamoodle
parent
2d67005f21
commit
fd38ce1210
10
lib/amd/build/dropzone.min.js
vendored
10
lib/amd/build/dropzone.min.js
vendored
@ -1,11 +1,3 @@
|
||||
define("core/dropzone",["exports","core/log","core/templates"],(function(_exports,_log,_templates){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}
|
||||
/**
|
||||
* JavaScript to handle dropzone.
|
||||
*
|
||||
* @module core/dropzone
|
||||
* @copyright 2024 Huong Nguyen <huongnv13@gmail.com>
|
||||
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
|
||||
* @since 4.4
|
||||
*/Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_log=_interopRequireDefault(_log),_templates=_interopRequireDefault(_templates);var _default=class{constructor(dropZoneElement,fileTypes,callback){this.init(dropZoneElement,fileTypes,callback)}init(dropZoneElement,fileTypes,callback){return dropZoneElement.addEventListener("dragover",(e=>{const dropZone=this.getDropZoneFromEvent(e);dropZone&&(e.preventDefault(),dropZone.classList.add("dragover"))})),dropZoneElement.addEventListener("dragleave",(e=>{const dropZone=this.getDropZoneFromEvent(e);dropZone&&(e.preventDefault(),dropZone.classList.remove("dragover"))})),dropZoneElement.addEventListener("drop",(e=>{const dropZone=this.getDropZoneFromEvent(e);dropZone&&(e.preventDefault(),dropZone.classList.remove("dragover"),callback(e.dataTransfer.files))})),dropZoneElement.addEventListener("click",(e=>{this.getDropZoneContainerFromEvent(e)&&this.getFileElementFromEvent(e).click()})),dropZoneElement.addEventListener("click",(e=>{e.target.closest(".dropzone-sr-only-focusable")&&this.getFileElementFromEvent(e).click()})),dropZoneElement.addEventListener("change",(e=>{const fileInput=this.getFileElementFromEvent(e);fileInput&&(e.preventDefault(),callback(fileInput.files))})),this.renderDropZone(dropZoneElement,fileTypes),_log.default.info("Dropzone has been initialized!"),this}getDropZoneFromEvent(e){return e.target.closest(".dropzone")}getDropZoneContainerFromEvent(e){return e.target.closest(".dropzone-container")}getFileElementFromEvent(e){return e.target.closest(".dropzone-container").querySelector(".drop-zone-fileinput")}async renderDropZone(dropZoneElement,fileTypes){dropZoneElement.innerHTML=await _templates.default.render("core/dropzone",{fileTypes:fileTypes})}};return _exports.default=_default,_exports.default}));
|
||||
define("core/dropzone",["exports","core/str","core/log","core/prefetch","core/templates"],(function(_exports,_str,_log,_prefetch,_templates){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_log=_interopRequireDefault(_log),_templates=_interopRequireDefault(_templates);var _default=class{constructor(dropZoneElement,fileTypes,callback){_defineProperty(this,"dropZoneElement",void 0),_defineProperty(this,"fileTypes",void 0),_defineProperty(this,"callback",void 0),_defineProperty(this,"dropZoneLabel",""),(0,_prefetch.prefetchString)("addfilesdrop","core"),this.dropZoneElement=dropZoneElement,this.fileTypes=fileTypes,this.callback=callback}init(){return this.dropZoneElement.addEventListener("dragover",(e=>{const dropZone=this.getDropZoneFromEvent(e);dropZone&&(e.preventDefault(),dropZone.classList.add("dragover"))})),this.dropZoneElement.addEventListener("dragleave",(e=>{const dropZone=this.getDropZoneFromEvent(e);dropZone&&(e.preventDefault(),dropZone.classList.remove("dragover"))})),this.dropZoneElement.addEventListener("drop",(e=>{const dropZone=this.getDropZoneFromEvent(e);dropZone&&(e.preventDefault(),dropZone.classList.remove("dragover"),this.callback(e.dataTransfer.files))})),this.dropZoneElement.addEventListener("click",(e=>{this.getDropZoneContainerFromEvent(e)&&this.getFileElementFromEvent(e).click()})),this.dropZoneElement.addEventListener("click",(e=>{e.target.closest(".dropzone-sr-only-focusable")&&this.getFileElementFromEvent(e).click()})),this.dropZoneElement.addEventListener("change",(e=>{const fileInput=this.getFileElementFromEvent(e);fileInput&&(e.preventDefault(),this.callback(fileInput.files))})),this.renderDropZone(this.dropZoneElement,this.fileTypes),_log.default.info("Dropzone has been initialized!"),this}getDropZoneFromEvent(e){return e.target.closest(".dropzone")}getDropZoneContainerFromEvent(e){return e.target.closest(".dropzone-container")}getFileElementFromEvent(e){return e.target.closest(".dropzone-container").querySelector(".drop-zone-fileinput")}setLabel(label){this.dropZoneLabel=label}getLabel(){return this.dropZoneLabel}async renderDropZone(dropZoneElement,fileTypes){this.getLabel()||this.setLabel(await(0,_str.getString)("addfilesdrop","core"));const dropZoneLabel=this.getLabel();dropZoneElement.innerHTML=await _templates.default.render("core/dropzone",{label:dropZoneLabel,filetypes:fileTypes})}};return _exports.default=_default,_exports.default}));
|
||||
|
||||
//# sourceMappingURL=dropzone.min.js.map
|
||||
File diff suppressed because one or more lines are too long
@ -22,7 +22,9 @@
|
||||
* @since 4.4
|
||||
*/
|
||||
|
||||
import {getString} from 'core/str';
|
||||
import Log from 'core/log';
|
||||
import {prefetchString} from 'core/prefetch';
|
||||
import Templates from 'core/templates';
|
||||
|
||||
/**
|
||||
@ -32,6 +34,30 @@ import Templates from 'core/templates';
|
||||
*/
|
||||
const DropZone = class {
|
||||
|
||||
/**
|
||||
* The element to render the dropzone.
|
||||
* @type {Element}
|
||||
*/
|
||||
dropZoneElement;
|
||||
|
||||
/**
|
||||
* The file types that are allowed to be uploaded.
|
||||
* @type {String}
|
||||
*/
|
||||
fileTypes;
|
||||
|
||||
/**
|
||||
* The function to call when a file is dropped.
|
||||
* @type {CallableFunction}
|
||||
*/
|
||||
callback;
|
||||
|
||||
/**
|
||||
* The label to display in the dropzone.
|
||||
* @type {string}
|
||||
*/
|
||||
dropZoneLabel = '';
|
||||
|
||||
/**
|
||||
* Constructor.
|
||||
*
|
||||
@ -40,19 +66,19 @@ const DropZone = class {
|
||||
* @param {CallableFunction} callback The function to call when a file is dropped.
|
||||
*/
|
||||
constructor(dropZoneElement, fileTypes, callback) {
|
||||
this.init(dropZoneElement, fileTypes, callback);
|
||||
prefetchString('addfilesdrop', 'core');
|
||||
this.dropZoneElement = dropZoneElement;
|
||||
this.fileTypes = fileTypes;
|
||||
this.callback = callback;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialise the dropzone.
|
||||
*
|
||||
* @param {Element} dropZoneElement The element to render the dropzone.
|
||||
* @param {String} fileTypes The file types that are allowed to be uploaded. Example: image/*
|
||||
* @param {CallableFunction} callback The function to call when a file is dropped.
|
||||
* @returns {DropZone}
|
||||
*/
|
||||
init(dropZoneElement, fileTypes, callback) {
|
||||
dropZoneElement.addEventListener('dragover', (e) => {
|
||||
init() {
|
||||
this.dropZoneElement.addEventListener('dragover', (e) => {
|
||||
const dropZone = this.getDropZoneFromEvent(e);
|
||||
if (!dropZone) {
|
||||
return;
|
||||
@ -60,7 +86,7 @@ const DropZone = class {
|
||||
e.preventDefault();
|
||||
dropZone.classList.add('dragover');
|
||||
});
|
||||
dropZoneElement.addEventListener('dragleave', (e) => {
|
||||
this.dropZoneElement.addEventListener('dragleave', (e) => {
|
||||
const dropZone = this.getDropZoneFromEvent(e);
|
||||
if (!dropZone) {
|
||||
return;
|
||||
@ -68,37 +94,37 @@ const DropZone = class {
|
||||
e.preventDefault();
|
||||
dropZone.classList.remove('dragover');
|
||||
});
|
||||
dropZoneElement.addEventListener('drop', (e) => {
|
||||
this.dropZoneElement.addEventListener('drop', (e) => {
|
||||
const dropZone = this.getDropZoneFromEvent(e);
|
||||
if (!dropZone) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
dropZone.classList.remove('dragover');
|
||||
callback(e.dataTransfer.files);
|
||||
this.callback(e.dataTransfer.files);
|
||||
});
|
||||
dropZoneElement.addEventListener('click', (e) => {
|
||||
this.dropZoneElement.addEventListener('click', (e) => {
|
||||
const dropZoneContainer = this.getDropZoneContainerFromEvent(e);
|
||||
if (!dropZoneContainer) {
|
||||
return;
|
||||
}
|
||||
this.getFileElementFromEvent(e).click();
|
||||
});
|
||||
dropZoneElement.addEventListener('click', (e) => {
|
||||
this.dropZoneElement.addEventListener('click', (e) => {
|
||||
const dropZoneLabel = e.target.closest('.dropzone-sr-only-focusable');
|
||||
if (!dropZoneLabel) {
|
||||
return;
|
||||
}
|
||||
this.getFileElementFromEvent(e).click();
|
||||
});
|
||||
dropZoneElement.addEventListener('change', (e) => {
|
||||
this.dropZoneElement.addEventListener('change', (e) => {
|
||||
const fileInput = this.getFileElementFromEvent(e);
|
||||
if (fileInput) {
|
||||
e.preventDefault();
|
||||
callback(fileInput.files);
|
||||
this.callback(fileInput.files);
|
||||
}
|
||||
});
|
||||
this.renderDropZone(dropZoneElement, fileTypes);
|
||||
this.renderDropZone(this.dropZoneElement, this.fileTypes);
|
||||
Log.info('Dropzone has been initialized!');
|
||||
return this;
|
||||
}
|
||||
@ -133,6 +159,24 @@ const DropZone = class {
|
||||
return e.target.closest('.dropzone-container').querySelector('.drop-zone-fileinput');
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the label to display in the dropzone.
|
||||
*
|
||||
* @param {String} label The label to display in the dropzone.
|
||||
*/
|
||||
setLabel(label) {
|
||||
this.dropZoneLabel = label;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the label to display in the dropzone.
|
||||
*
|
||||
* @return {String} The label to display in the dropzone.
|
||||
*/
|
||||
getLabel() {
|
||||
return this.dropZoneLabel;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the dropzone.
|
||||
*
|
||||
@ -141,8 +185,14 @@ const DropZone = class {
|
||||
* @returns {Promise}
|
||||
*/
|
||||
async renderDropZone(dropZoneElement, fileTypes) {
|
||||
if (!this.getLabel()) {
|
||||
// Use the default one.
|
||||
this.setLabel(await getString('addfilesdrop', 'core'));
|
||||
}
|
||||
const dropZoneLabel = this.getLabel();
|
||||
dropZoneElement.innerHTML = await Templates.render('core/dropzone', {
|
||||
fileTypes,
|
||||
label: dropZoneLabel,
|
||||
filetypes: fileTypes,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
|
||||
Example context (json):
|
||||
{
|
||||
"label": "You can drag and drop files here to upload or click to select.",
|
||||
"filetypes": "image/*,application/pdf"
|
||||
}
|
||||
}}
|
||||
@ -25,10 +26,10 @@
|
||||
<a class="dropzone-sr-only-focusable sr-only-focusable" href="#">{{# str }} addfiletext, repository {{/ str }}</a>
|
||||
<div class="dropzone p-2 text-center h-100 w-100">
|
||||
<div class="dropzone-icon">
|
||||
{{# pix }} i/cloudupload, core, {{# str }} addfilesdrop {{/ str }} {{/ pix }}
|
||||
{{# pix }} i/cloudupload, core, {{label}} {{/ pix }}
|
||||
</div>
|
||||
<div class="dropzone-label">
|
||||
{{# str }} addfilesdrop {{/ str }}
|
||||
{{label}}
|
||||
</div>
|
||||
</div>
|
||||
<input type="file" id="dropzone_fileinput_{{uniqid}}" accept="{{filetypes}}" class="drop-zone-fileinput hidden">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user