MDL-80850 Javascript: Add new core/dropzone module

lang/en/moodle.php

@@ -62,6 +62,7 @@ $string['addedtogroup'] = 'Added to group "{$a}"';
 $string['addedtogroupnot'] = 'Not added to group "{$a}"';
 $string['addedtogroupnotenrolled'] = 'Not added to group "{$a}", because not enrolled in course';
 $string['addfilehere'] = 'Drop files here to add them at the bottom of this section';
+$string['addfilesdrop'] = 'You can drag and drop files here to upload or click to select.';
 $string['addinganew'] = 'New {$a}';
 $string['additionalcustomnav'] = 'Additional custom navigation';
 $string['addnew'] = 'Add a new {$a}';

lib/amd/build/dropzone.min.js

@@ -0,0 +1,11 @@
+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}));
+
+//# sourceMappingURL=dropzone.min.js.map

lib/amd/src/dropzone.js

@@ -0,0 +1,150 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * 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
+ */
+
+import Log from 'core/log';
+import Templates from 'core/templates';
+
+/**
+ * A dropzone.
+ *
+ * @class core/dropzone
+ */
+const DropZone = class {
+
+    /**
+     * Constructor.
+     *
+     * @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.
+     */
+    constructor(dropZoneElement, fileTypes, callback) {
+        this.init(dropZoneElement, fileTypes, 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) => {
+            const dropZone = this.getDropZoneFromEvent(e);
+            if (!dropZone) {
+                return;
+            }
+            e.preventDefault();
+            dropZone.classList.add('dragover');
+        });
+        dropZoneElement.addEventListener('dragleave', (e) => {
+            const dropZone = this.getDropZoneFromEvent(e);
+            if (!dropZone) {
+                return;
+            }
+            e.preventDefault();
+            dropZone.classList.remove('dragover');
+        });
+        dropZoneElement.addEventListener('drop', (e) => {
+            const dropZone = this.getDropZoneFromEvent(e);
+            if (!dropZone) {
+                return;
+            }
+            e.preventDefault();
+            dropZone.classList.remove('dragover');
+            callback(e.dataTransfer.files);
+        });
+        dropZoneElement.addEventListener('click', (e) => {
+            const dropZoneContainer = this.getDropZoneContainerFromEvent(e);
+            if (!dropZoneContainer) {
+                return;
+            }
+            this.getFileElementFromEvent(e).click();
+        });
+        dropZoneElement.addEventListener('click', (e) => {
+            const dropZoneLabel = e.target.closest('.dropzone-sr-only-focusable');
+            if (!dropZoneLabel) {
+                return;
+            }
+            this.getFileElementFromEvent(e).click();
+        });
+        dropZoneElement.addEventListener('change', (e) => {
+            const fileInput = this.getFileElementFromEvent(e);
+            if (fileInput) {
+                e.preventDefault();
+                callback(fileInput.files);
+            }
+        });
+        this.renderDropZone(dropZoneElement, fileTypes);
+        Log.info('Dropzone has been initialized!');
+        return this;
+    }
+
+    /**
+     * Get the dropzone.
+     *
+     * @param {Event} e The event.
+     * @returns {HTMLElement|bool}
+     */
+    getDropZoneFromEvent(e) {
+        return e.target.closest('.dropzone');
+    }
+
+    /**
+     * Get the dropzone container.
+     *
+     * @param {Event} e The event.
+     * @returns {HTMLElement|bool}
+     */
+    getDropZoneContainerFromEvent(e) {
+        return e.target.closest('.dropzone-container');
+    }
+
+    /**
+     * Get the file element.
+     *
+     * @param {Event} e The event.
+     * @returns {HTMLElement|bool}
+     */
+    getFileElementFromEvent(e) {
+        return e.target.closest('.dropzone-container').querySelector('.drop-zone-fileinput');
+    }
+
+    /**
+     * Render the dropzone.
+     *
+     * @param {Element} dropZoneElement The element to render the dropzone.
+     * @param {String} fileTypes The file types that are allowed to be uploaded.
+     * @returns {Promise}
+     */
+    async renderDropZone(dropZoneElement, fileTypes) {
+        dropZoneElement.innerHTML = await Templates.render('core/dropzone', {
+            fileTypes,
+        });
+    }
+};
+
+export default DropZone;

lib/classes/output/icon_system_fontawesome.php

@@ -218,6 +218,7 @@ class icon_system_fontawesome extends icon_system_font {
             'core:i/chartbar' => 'fa-chart-bar',
             'core:i/course' => 'fa-graduation-cap',
             'core:i/courseevent' => 'fa-graduation-cap',
+            'core:i/cloudupload' => 'fa-cloud-upload',
             'core:i/customfield' => 'fa-hand-o-right',
             'core:i/db' => 'fa-database',
             'core:i/delete' => 'fa-trash',

lib/templates/dropzone.mustache

@@ -0,0 +1,35 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/dropzone
+
+    Render dropzone for file upload
+
+    Example context (json):
+    {
+        "filetypes": "image/*,application/pdf"
+    }
+}}
+<div class="dropzone-container mb-1 h-100">
+    <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 }}
+        </div>
+        <div class="dropzone-label">
+            {{# str }} addfilesdrop {{/ str }}
+        </div>
+    </div>
+    <input type="file" id="dropzone_fileinput_{{uniqid}}" accept="{{filetypes}}" class="drop-zone-fileinput hidden">
+</div>

pix/i/cloudupload.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.37em" height="1em" viewBox="0 0 1920 1408"><path fill="currentColor" d="M1280 736q0-14-9-23L919 361q-9-9-23-9t-23 9L522 712q-10 12-10 24q0 14 9 23t23 9h224v352q0 13 9.5 22.5t22.5 9.5h192q13 0 22.5-9.5t9.5-22.5V768h224q13 0 22.5-9.5t9.5-22.5m640 288q0 159-112.5 271.5T1536 1408H448q-185 0-316.5-131.5T0 960q0-130 70-240t188-165q-2-30-2-43q0-212 150-362T768 0q156 0 285.5 87T1242 318q71-62 166-62q106 0 181 75t75 181q0 76-41 138q130 31 213.5 135.5T1920 1024"/></svg>

theme/boost/scss/moodle/core.scss

@@ -2835,6 +2835,48 @@ body.dragging {
     cursor: move;
 }
 
+.dropzone-container {
+    cursor: pointer;
+
+    .dropzone {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        border: 2px dashed $filemanager-dnd-border-color;
+        border-radius: 0.5rem;
+
+        &.dragover {
+            border: 2px dashed $filemanager-dnd-upload-over-border-color;
+        }
+    }
+
+    .dropzone-icon {
+        color: $gray-500;
+
+        .icon {
+            font-size: 6em;
+            width: auto;
+            height: auto;
+            max-width: initial;
+            max-height: initial;
+            margin-right: 0;
+        }
+    }
+
+    .dropzone-sr-only-focusable {
+        &:active,
+        &:focus {
+            outline: 0;
+            box-shadow: $input-btn-focus-box-shadow;
+            z-index: $zindex-popover;
+            position: relative;
+            background: $sr-only-active-bg;
+            padding: 7px;
+        }
+    }
+}
+
 // Generic classes reactive components can use.
 
 .overlay-preview {

theme/boost/style/moodle.css

@@ -25725,6 +25725,40 @@ body.dragging .dragging {
   cursor: move;
 }
 
+.dropzone-container {
+  cursor: pointer;
+}
+.dropzone-container .dropzone {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  border: 2px dashed #bbb;
+  border-radius: 0.5rem;
+}
+.dropzone-container .dropzone.dragover {
+  border: 2px dashed #6c8cd3;
+}
+.dropzone-container .dropzone-icon {
+  color: #8f959e;
+}
+.dropzone-container .dropzone-icon .icon {
+  font-size: 6em;
+  width: auto;
+  height: auto;
+  max-width: initial;
+  max-height: initial;
+  margin-right: 0;
+}
+.dropzone-container .dropzone-sr-only-focusable:active, .dropzone-container .dropzone-sr-only-focusable:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(15, 108, 191, 0.75);
+  z-index: 1060;
+  position: relative;
+  background: #fff;
+  padding: 7px;
+}
+
 .overlay-preview {
   background-color: rgba(255, 255, 255, 0.8);
   border: 2px dashed #0f6cbf;

theme/classic/style/moodle.css

@@ -25725,6 +25725,40 @@ body.dragging .dragging {
   cursor: move;
 }
 
+.dropzone-container {
+  cursor: pointer;
+}
+.dropzone-container .dropzone {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  border: 2px dashed #bbb;
+  border-radius: 0.5rem;
+}
+.dropzone-container .dropzone.dragover {
+  border: 2px dashed #6c8cd3;
+}
+.dropzone-container .dropzone-icon {
+  color: #8f959e;
+}
+.dropzone-container .dropzone-icon .icon {
+  font-size: 6em;
+  width: auto;
+  height: auto;
+  max-width: initial;
+  max-height: initial;
+  margin-right: 0;
+}
+.dropzone-container .dropzone-sr-only-focusable:active, .dropzone-container .dropzone-sr-only-focusable:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(15, 108, 191, 0.75);
+  z-index: 1060;
+  position: relative;
+  background: #fff;
+  padding: 7px;
+}
+
 .overlay-preview {
   background-color: rgba(255, 255, 255, 0.8);
   border: 2px dashed #0f6cbf;