From fd38ce1210f17fadb189b4ead3b4b1fac7d94498 Mon Sep 17 00:00:00 2001 From: Huong Nguyen Date: Thu, 4 Apr 2024 10:36:57 +0700 Subject: [PATCH] MDL-78096 Javascript: core/dropzone improvement core/dropzone now accepts custom label to display in the Dropzone --- lib/amd/build/dropzone.min.js | 10 +--- lib/amd/build/dropzone.min.js.map | 2 +- lib/amd/src/dropzone.js | 80 +++++++++++++++++++++++++------ lib/templates/dropzone.mustache | 5 +- 4 files changed, 70 insertions(+), 27 deletions(-) diff --git a/lib/amd/build/dropzone.min.js b/lib/amd/build/dropzone.min.js index 1024dbc7377..e2d18a19e3d 100644 --- a/lib/amd/build/dropzone.min.js +++ b/lib/amd/build/dropzone.min.js @@ -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 - * @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 \ No newline at end of file diff --git a/lib/amd/build/dropzone.min.js.map b/lib/amd/build/dropzone.min.js.map index bbef7dda720..9828a33a429 100644 --- a/lib/amd/build/dropzone.min.js.map +++ b/lib/amd/build/dropzone.min.js.map @@ -1 +1 @@ -{"version":3,"file":"dropzone.min.js","sources":["../src/dropzone.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * JavaScript to handle dropzone.\n *\n * @module core/dropzone\n * @copyright 2024 Huong Nguyen \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n * @since 4.4\n */\n\nimport Log from 'core/log';\nimport Templates from 'core/templates';\n\n/**\n * A dropzone.\n *\n * @class core/dropzone\n */\nconst DropZone = class {\n\n /**\n * Constructor.\n *\n * @param {Element} dropZoneElement The element to render the dropzone.\n * @param {String} fileTypes The file types that are allowed to be uploaded. Example: image/*\n * @param {CallableFunction} callback The function to call when a file is dropped.\n */\n constructor(dropZoneElement, fileTypes, callback) {\n this.init(dropZoneElement, fileTypes, callback);\n }\n\n /**\n * Initialise the dropzone.\n *\n * @param {Element} dropZoneElement The element to render the dropzone.\n * @param {String} fileTypes The file types that are allowed to be uploaded. Example: image/*\n * @param {CallableFunction} callback The function to call when a file is dropped.\n * @returns {DropZone}\n */\n init(dropZoneElement, fileTypes, callback) {\n dropZoneElement.addEventListener('dragover', (e) => {\n const dropZone = this.getDropZoneFromEvent(e);\n if (!dropZone) {\n return;\n }\n e.preventDefault();\n dropZone.classList.add('dragover');\n });\n dropZoneElement.addEventListener('dragleave', (e) => {\n const dropZone = this.getDropZoneFromEvent(e);\n if (!dropZone) {\n return;\n }\n e.preventDefault();\n dropZone.classList.remove('dragover');\n });\n dropZoneElement.addEventListener('drop', (e) => {\n const dropZone = this.getDropZoneFromEvent(e);\n if (!dropZone) {\n return;\n }\n e.preventDefault();\n dropZone.classList.remove('dragover');\n callback(e.dataTransfer.files);\n });\n dropZoneElement.addEventListener('click', (e) => {\n const dropZoneContainer = this.getDropZoneContainerFromEvent(e);\n if (!dropZoneContainer) {\n return;\n }\n this.getFileElementFromEvent(e).click();\n });\n dropZoneElement.addEventListener('click', (e) => {\n const dropZoneLabel = e.target.closest('.dropzone-sr-only-focusable');\n if (!dropZoneLabel) {\n return;\n }\n this.getFileElementFromEvent(e).click();\n });\n dropZoneElement.addEventListener('change', (e) => {\n const fileInput = this.getFileElementFromEvent(e);\n if (fileInput) {\n e.preventDefault();\n callback(fileInput.files);\n }\n });\n this.renderDropZone(dropZoneElement, fileTypes);\n Log.info('Dropzone has been initialized!');\n return this;\n }\n\n /**\n * Get the dropzone.\n *\n * @param {Event} e The event.\n * @returns {HTMLElement|bool}\n */\n getDropZoneFromEvent(e) {\n return e.target.closest('.dropzone');\n }\n\n /**\n * Get the dropzone container.\n *\n * @param {Event} e The event.\n * @returns {HTMLElement|bool}\n */\n getDropZoneContainerFromEvent(e) {\n return e.target.closest('.dropzone-container');\n }\n\n /**\n * Get the file element.\n *\n * @param {Event} e The event.\n * @returns {HTMLElement|bool}\n */\n getFileElementFromEvent(e) {\n return e.target.closest('.dropzone-container').querySelector('.drop-zone-fileinput');\n }\n\n /**\n * Render the dropzone.\n *\n * @param {Element} dropZoneElement The element to render the dropzone.\n * @param {String} fileTypes The file types that are allowed to be uploaded.\n * @returns {Promise}\n */\n async renderDropZone(dropZoneElement, fileTypes) {\n dropZoneElement.innerHTML = await Templates.render('core/dropzone', {\n fileTypes,\n });\n }\n};\n\nexport default DropZone;\n"],"names":["constructor","dropZoneElement","fileTypes","callback","init","addEventListener","e","dropZone","this","getDropZoneFromEvent","preventDefault","classList","add","remove","dataTransfer","files","getDropZoneContainerFromEvent","getFileElementFromEvent","click","target","closest","fileInput","renderDropZone","info","querySelector","innerHTML","Templates","render"],"mappings":";;;;;;;;kLAgCiB,MASbA,YAAYC,gBAAiBC,UAAWC,eAC/BC,KAAKH,gBAAiBC,UAAWC,UAW1CC,KAAKH,gBAAiBC,UAAWC,iBAC7BF,gBAAgBI,iBAAiB,YAAaC,UACpCC,SAAWC,KAAKC,qBAAqBH,GACtCC,WAGLD,EAAEI,iBACFH,SAASI,UAAUC,IAAI,gBAE3BX,gBAAgBI,iBAAiB,aAAcC,UACrCC,SAAWC,KAAKC,qBAAqBH,GACtCC,WAGLD,EAAEI,iBACFH,SAASI,UAAUE,OAAO,gBAE9BZ,gBAAgBI,iBAAiB,QAASC,UAChCC,SAAWC,KAAKC,qBAAqBH,GACtCC,WAGLD,EAAEI,iBACFH,SAASI,UAAUE,OAAO,YAC1BV,SAASG,EAAEQ,aAAaC,WAE5Bd,gBAAgBI,iBAAiB,SAAUC,IACbE,KAAKQ,8BAA8BV,SAIxDW,wBAAwBX,GAAGY,WAEpCjB,gBAAgBI,iBAAiB,SAAUC,IACjBA,EAAEa,OAAOC,QAAQ,qCAIlCH,wBAAwBX,GAAGY,WAEpCjB,gBAAgBI,iBAAiB,UAAWC,UAClCe,UAAYb,KAAKS,wBAAwBX,GAC3Ce,YACAf,EAAEI,iBACFP,SAASkB,UAAUN,gBAGtBO,eAAerB,gBAAiBC,wBACjCqB,KAAK,kCACFf,KASXC,qBAAqBH,UACVA,EAAEa,OAAOC,QAAQ,aAS5BJ,8BAA8BV,UACnBA,EAAEa,OAAOC,QAAQ,uBAS5BH,wBAAwBX,UACbA,EAAEa,OAAOC,QAAQ,uBAAuBI,cAAc,6CAU5CvB,gBAAiBC,WAClCD,gBAAgBwB,gBAAkBC,mBAAUC,OAAO,gBAAiB,CAChEzB,UAAAA"} \ No newline at end of file +{"version":3,"file":"dropzone.min.js","sources":["../src/dropzone.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * JavaScript to handle dropzone.\n *\n * @module core/dropzone\n * @copyright 2024 Huong Nguyen \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n * @since 4.4\n */\n\nimport {getString} from 'core/str';\nimport Log from 'core/log';\nimport {prefetchString} from 'core/prefetch';\nimport Templates from 'core/templates';\n\n/**\n * A dropzone.\n *\n * @class core/dropzone\n */\nconst DropZone = class {\n\n /**\n * The element to render the dropzone.\n * @type {Element}\n */\n dropZoneElement;\n\n /**\n * The file types that are allowed to be uploaded.\n * @type {String}\n */\n fileTypes;\n\n /**\n * The function to call when a file is dropped.\n * @type {CallableFunction}\n */\n callback;\n\n /**\n * The label to display in the dropzone.\n * @type {string}\n */\n dropZoneLabel = '';\n\n /**\n * Constructor.\n *\n * @param {Element} dropZoneElement The element to render the dropzone.\n * @param {String} fileTypes The file types that are allowed to be uploaded. Example: image/*\n * @param {CallableFunction} callback The function to call when a file is dropped.\n */\n constructor(dropZoneElement, fileTypes, callback) {\n prefetchString('addfilesdrop', 'core');\n this.dropZoneElement = dropZoneElement;\n this.fileTypes = fileTypes;\n this.callback = callback;\n }\n\n /**\n * Initialise the dropzone.\n *\n * @returns {DropZone}\n */\n init() {\n this.dropZoneElement.addEventListener('dragover', (e) => {\n const dropZone = this.getDropZoneFromEvent(e);\n if (!dropZone) {\n return;\n }\n e.preventDefault();\n dropZone.classList.add('dragover');\n });\n this.dropZoneElement.addEventListener('dragleave', (e) => {\n const dropZone = this.getDropZoneFromEvent(e);\n if (!dropZone) {\n return;\n }\n e.preventDefault();\n dropZone.classList.remove('dragover');\n });\n this.dropZoneElement.addEventListener('drop', (e) => {\n const dropZone = this.getDropZoneFromEvent(e);\n if (!dropZone) {\n return;\n }\n e.preventDefault();\n dropZone.classList.remove('dragover');\n this.callback(e.dataTransfer.files);\n });\n this.dropZoneElement.addEventListener('click', (e) => {\n const dropZoneContainer = this.getDropZoneContainerFromEvent(e);\n if (!dropZoneContainer) {\n return;\n }\n this.getFileElementFromEvent(e).click();\n });\n this.dropZoneElement.addEventListener('click', (e) => {\n const dropZoneLabel = e.target.closest('.dropzone-sr-only-focusable');\n if (!dropZoneLabel) {\n return;\n }\n this.getFileElementFromEvent(e).click();\n });\n this.dropZoneElement.addEventListener('change', (e) => {\n const fileInput = this.getFileElementFromEvent(e);\n if (fileInput) {\n e.preventDefault();\n this.callback(fileInput.files);\n }\n });\n this.renderDropZone(this.dropZoneElement, this.fileTypes);\n Log.info('Dropzone has been initialized!');\n return this;\n }\n\n /**\n * Get the dropzone.\n *\n * @param {Event} e The event.\n * @returns {HTMLElement|bool}\n */\n getDropZoneFromEvent(e) {\n return e.target.closest('.dropzone');\n }\n\n /**\n * Get the dropzone container.\n *\n * @param {Event} e The event.\n * @returns {HTMLElement|bool}\n */\n getDropZoneContainerFromEvent(e) {\n return e.target.closest('.dropzone-container');\n }\n\n /**\n * Get the file element.\n *\n * @param {Event} e The event.\n * @returns {HTMLElement|bool}\n */\n getFileElementFromEvent(e) {\n return e.target.closest('.dropzone-container').querySelector('.drop-zone-fileinput');\n }\n\n /**\n * Set the label to display in the dropzone.\n *\n * @param {String} label The label to display in the dropzone.\n */\n setLabel(label) {\n this.dropZoneLabel = label;\n }\n\n /**\n * Get the label to display in the dropzone.\n *\n * @return {String} The label to display in the dropzone.\n */\n getLabel() {\n return this.dropZoneLabel;\n }\n\n /**\n * Render the dropzone.\n *\n * @param {Element} dropZoneElement The element to render the dropzone.\n * @param {String} fileTypes The file types that are allowed to be uploaded.\n * @returns {Promise}\n */\n async renderDropZone(dropZoneElement, fileTypes) {\n if (!this.getLabel()) {\n // Use the default one.\n this.setLabel(await getString('addfilesdrop', 'core'));\n }\n const dropZoneLabel = this.getLabel();\n dropZoneElement.innerHTML = await Templates.render('core/dropzone', {\n label: dropZoneLabel,\n filetypes: fileTypes,\n });\n }\n};\n\nexport default DropZone;\n"],"names":["constructor","dropZoneElement","fileTypes","callback","init","addEventListener","e","dropZone","this","getDropZoneFromEvent","preventDefault","classList","add","remove","dataTransfer","files","getDropZoneContainerFromEvent","getFileElementFromEvent","click","target","closest","fileInput","renderDropZone","info","querySelector","setLabel","label","dropZoneLabel","getLabel","innerHTML","Templates","render","filetypes"],"mappings":"gjBAkCiB,MAiCbA,YAAYC,gBAAiBC,UAAWC,+KATxB,iCAUG,eAAgB,aAC1BF,gBAAkBA,qBAClBC,UAAYA,eACZC,SAAWA,SAQpBC,mBACSH,gBAAgBI,iBAAiB,YAAaC,UACzCC,SAAWC,KAAKC,qBAAqBH,GACtCC,WAGLD,EAAEI,iBACFH,SAASI,UAAUC,IAAI,qBAEtBX,gBAAgBI,iBAAiB,aAAcC,UAC1CC,SAAWC,KAAKC,qBAAqBH,GACtCC,WAGLD,EAAEI,iBACFH,SAASI,UAAUE,OAAO,qBAEzBZ,gBAAgBI,iBAAiB,QAASC,UACrCC,SAAWC,KAAKC,qBAAqBH,GACtCC,WAGLD,EAAEI,iBACFH,SAASI,UAAUE,OAAO,iBACrBV,SAASG,EAAEQ,aAAaC,gBAE5Bd,gBAAgBI,iBAAiB,SAAUC,IAClBE,KAAKQ,8BAA8BV,SAIxDW,wBAAwBX,GAAGY,gBAE/BjB,gBAAgBI,iBAAiB,SAAUC,IACtBA,EAAEa,OAAOC,QAAQ,qCAIlCH,wBAAwBX,GAAGY,gBAE/BjB,gBAAgBI,iBAAiB,UAAWC,UACvCe,UAAYb,KAAKS,wBAAwBX,GAC3Ce,YACAf,EAAEI,sBACGP,SAASkB,UAAUN,gBAG3BO,eAAed,KAAKP,gBAAiBO,KAAKN,wBAC3CqB,KAAK,kCACFf,KASXC,qBAAqBH,UACVA,EAAEa,OAAOC,QAAQ,aAS5BJ,8BAA8BV,UACnBA,EAAEa,OAAOC,QAAQ,uBAS5BH,wBAAwBX,UACbA,EAAEa,OAAOC,QAAQ,uBAAuBI,cAAc,wBAQjEC,SAASC,YACAC,cAAgBD,MAQzBE,kBACWpB,KAAKmB,mCAUK1B,gBAAiBC,WAC7BM,KAAKoB,iBAEDH,eAAe,kBAAU,eAAgB,eAE5CE,cAAgBnB,KAAKoB,WAC3B3B,gBAAgB4B,gBAAkBC,mBAAUC,OAAO,gBAAiB,CAChEL,MAAOC,cACPK,UAAW9B"} \ No newline at end of file diff --git a/lib/amd/src/dropzone.js b/lib/amd/src/dropzone.js index 5425bcd41c6..8e2ebdb071d 100644 --- a/lib/amd/src/dropzone.js +++ b/lib/amd/src/dropzone.js @@ -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, }); } }; diff --git a/lib/templates/dropzone.mustache b/lib/templates/dropzone.mustache index c7091833d49..517812222ea 100644 --- a/lib/templates/dropzone.mustache +++ b/lib/templates/dropzone.mustache @@ -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 @@ {{# str }} addfiletext, repository {{/ str }}
- {{# pix }} i/cloudupload, core, {{# str }} addfilesdrop {{/ str }} {{/ pix }} + {{# pix }} i/cloudupload, core, {{label}} {{/ pix }}
- {{# str }} addfilesdrop {{/ str }} + {{label}}