Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

MDL-31114 Filemanager drag and drop upload - displays 'drop here' mes…

…sage when dragging over page / highlights when over element
  • Loading branch information...
commit 7d44996c2a281b52ff029c230f87888e6ff9e1d5 1 parent 36dc503
Davo Smith davosmith authored
74 lib/form/dndupload.js
@@ -51,7 +51,7 @@ M.form_dndupload.init = function(Y, options) {
51 51 // Nasty hack to distinguish between dragenter(first entry),
52 52 // dragenter+dragleave(moving between child elements) and dragleave (leaving element)
53 53 entercount: 0,
54   -
  54 + pageentercount: 0,
55 55
56 56 /**
57 57 * Initalise the drag and drop upload interface
@@ -108,6 +108,7 @@ M.form_dndupload.init = function(Y, options) {
108 108 }
109 109
110 110 this.init_events();
  111 + this.init_page_events();
111 112 this.Y.one('#dndenabled-'+this.clientid).setStyle('display', 'inline');
112 113 },
113 114
@@ -154,6 +155,51 @@ M.form_dndupload.init = function(Y, options) {
154 155 },
155 156
156 157 /**
  158 + * Initialise whole-page events (to show / hide the 'drop files here'
  159 + * message)
  160 + */
  161 + init_page_events: function() {
  162 + this.Y.on('dragenter', this.drag_enter_page, 'body', this);
  163 + this.Y.on('dragleave', this.drag_leave_page, 'body', this);
  164 + },
  165 +
  166 + /**
  167 + * Show the 'drop files here' message when file(s) are dragged
  168 + * onto the page
  169 + */
  170 + drag_enter_page: function(e) {
  171 + if (!this.has_files(e) || this.reached_maxfiles()) {
  172 + return false;
  173 + }
  174 +
  175 + this.pageentercount++;
  176 + if (this.pageentercount >= 2) {
  177 + this.pageentercount = 2;
  178 + return false;
  179 + }
  180 +
  181 + this.show_drop_target();
  182 +
  183 + return false;
  184 + },
  185 +
  186 + /**
  187 + * Hide the 'drop files here' message when file(s) are dragged off
  188 + * the page again
  189 + */
  190 + drag_leave_page: function(e) {
  191 + this.pageentercount--;
  192 + if (this.pageentercount == 1) {
  193 + return false;
  194 + }
  195 + this.pageentercount = 0;
  196 +
  197 + this.hide_drop_target();
  198 +
  199 + return false;
  200 + },
  201 +
  202 + /**
157 203 * Check if the drag contents are valid and then call
158 204 * preventdefault / stoppropagation to let the browser know
159 205 * we will handle this drag/drop
@@ -194,6 +240,12 @@ M.form_dndupload.init = function(Y, options) {
194 240 return false;
195 241 }
196 242
  243 + // These lines are needed if the user has dragged something directly
  244 + // from application onto the 'fileupload' box, without crossing another
  245 + // part of the page first
  246 + this.pageentercount = 2;
  247 + this.show_drop_target();
  248 +
197 249 this.show_upload_ready();
198 250 return false;
199 251 },
@@ -239,7 +291,9 @@ M.form_dndupload.init = function(Y, options) {
239 291 }
240 292
241 293 this.entercount = 0;
  294 + this.pageentercount = 0;
242 295 this.hide_upload_ready();
  296 + this.hide_drop_target();
243 297 this.show_progress_spinner();
244 298
245 299 var files = e._event.dataTransfer.files;
@@ -294,7 +348,18 @@ M.form_dndupload.init = function(Y, options) {
294 348 },
295 349
296 350 /**
297   - * Highlight the destination node
  351 + * Highlight the area where files could be dropped
  352 + */
  353 + show_drop_target: function() {
  354 + this.Y.one('#filemanager-uploadmessage'+this.clientid).setStyle('display', 'block');
  355 + },
  356 +
  357 + hide_drop_target: function() {
  358 + this.Y.one('#filemanager-uploadmessage'+this.clientid).setStyle('display', 'none');
  359 + },
  360 +
  361 + /**
  362 + * Highlight the destination node (ready to drop)
298 363 */
299 364 show_upload_ready: function() {
300 365 this.container.addClass('dndupload-over');
@@ -321,7 +386,10 @@ M.form_dndupload.init = function(Y, options) {
321 386 * Remove progress spinner in the destination node
322 387 */
323 388 hide_progress_spinner: function() {
324   - this.Y.one('#dndprogresspinner-'+this.clientid).remove();
  389 + var spinner = this.Y.one('#dndprogresspinner-'+this.clientid);
  390 + if (spinner) {
  391 + spinner.remove();
  392 + }
325 393 },
326 394
327 395 /**
9 lib/form/filemanager.js
@@ -264,7 +264,13 @@ M.form_filemanager.init = function(Y, options) {
264 264 }, this);
265 265 },
266 266 empty_filelist: function(container) {
267   - container.set('innerHTML', '<div class="mdl-align">'+M.str.repository.nofilesattached+'</div>');
  267 + container.set('innerHTML', '<div class="mdl-align">'+M.str.repository.nofilesattached+'</div>'+this.upload_message());
  268 + },
  269 + upload_message: function() {
  270 + var div = '<div id="filemanager-uploadmessage'+this.client_id+'" style="display:none" class="dndupload-target">';
  271 + div += M.util.get_string('droptoupload', 'moodle');
  272 + div += '</div>';
  273 + return div;
268 274 },
269 275 render: function() {
270 276 var options = this.options;
@@ -415,6 +421,7 @@ M.form_filemanager.init = function(Y, options) {
415 421 var filelist = Y.Node.create('<ul id="draftfiles-'+this.client_id+'"></ul>');
416 422 container.appendChild(filelist);
417 423 }
  424 + listhtml += this.upload_message();
418 425 Y.one('#draftfiles-'+this.client_id).set('innerHTML', listhtml);
419 426
420 427 // click normal file menu
2  lib/form/filemanager.php
@@ -288,7 +288,7 @@ function form_filemanager_render($options) {
288 288 <span> $maxsize </span>
289 289 <span id="dndenabled-{$client_id}" style="display: none"> - $strdndenabled </span>
290 290 </div>
291   - <div class="filemanager-container" id="filemanager-{$client_id}">
  291 + <div class="filemanager-container" id="filemanager-{$client_id}" style="position: relative" >
292 292 <ul id="draftfiles-{$client_id}" class="fm-filelist">
293 293 <li>Loading...</li>
294 294 </ul>
11 lib/form/filepicker.js
@@ -6,6 +6,7 @@ M.form_filepicker.instances = [];
6 6 M.form_filepicker.callback = function(params) {
7 7 var html = '<a href="'+params['url']+'">'+params['file']+'</a>';
8 8 document.getElementById('file_info_'+params['client_id']).innerHTML = html;
  9 + M.form_filepicker.add_upload_message(params['client_id']);
9 10 //When file is added then set status of global variable to true
10 11 var elementname = M.core_filepicker.instances[params['client_id']].options.elementname;
11 12 M.form_filepicker.instances[elementname].fileadded = true;
@@ -13,6 +14,15 @@ M.form_filepicker.callback = function(params) {
13 14 M.form_filepicker.Y.one('#id_'+elementname).simulate('change');
14 15 };
15 16
  17 +M.form_filepicker.add_upload_message = function(client_id) {
  18 + var div = '<div id="filemanager-uploadmessage'+client_id+'" style="display:none" class="dndupload-target">';
  19 + div += M.util.get_string('droptoupload', 'moodle');
  20 + div += '</div>';
  21 + var iteminfo = document.getElementById('file_info_'+client_id);
  22 + iteminfo.innerHTML += div;
  23 + iteminfo.style.position = 'relative';
  24 +}
  25 +
16 26 /**
17 27 * This fucntion is called for each file picker on page.
18 28 */
@@ -42,6 +52,7 @@ M.form_filepicker.init = function(Y, options) {
42 52 item = document.getElementById('filepicker-wrapper-'+options.client_id);
43 53 if (item) {
44 54 item.style.display = '';
  55 + this.add_upload_message(options.client_id);
45 56 }
46 57
47 58 var dndoptions = {
8 theme/base/style/core.css
@@ -532,8 +532,12 @@ body.tag .managelink {padding: 5px;}
532 532 .fm-file-entry{border: 1px solid red;}
533 533 .fm-operation {font-weight: bold;}
534 534
535   -.filemanager-container.dndupload-over,
536   -.filepicker-filelist.dndupload-over {background: #8EF947;}
  535 +.filemanager-container,
  536 +.filepicker-filelist {overflow:hidden;}
  537 +.filemanager-container .dndupload-target,
  538 +.filepicker-filelist .dndupload-target {background:#f7f998;position:absolute;height:100%;width:100%;top:0;left:0;text-align:center;padding:5px;z-index:1000}
  539 +.filemanager-container.dndupload-over .dndupload-target,
  540 +.filepicker-filelist.dndupload-over .dndupload-target {background:#8EF947;font-weight:bold}
537 541
538 542 /*
539 543 * Backup and Restore CSS

0 comments on commit 7d44996

Please sign in to comment.
Something went wrong with that request. Please try again.