Skip to content
Browse files

MDL-31901: user renderer for filemanager, decrease html generation in…

… filemanager.js and dndupload.js
  • Loading branch information...
1 parent 830acea commit 906e7d89a53b06d06c215ca524d0a0ef282010df @marinaglancy marinaglancy committed
Showing with 282 additions and 276 deletions.
  1. +144 −0 files/renderer.php
  2. +10 −24 lib/form/dndupload.js
  3. +50 −107 lib/form/filemanager.js
  4. +38 −130 lib/form/filemanager.php
  5. +2 −12 lib/form/filepicker.js
  6. +4 −2 lib/outputrenderers.php
  7. +34 −1 theme/base/style/filemanager.css
View
144 files/renderer.php
@@ -82,6 +82,150 @@ public function render_files_tree_viewer(files_tree_viewer $tree) {
$html .= $this->output->box_end();
return $html;
}
+
+ /**
+ * Prints the file manager and initializes all necessary libraries
+ *
+ * <pre>
+ * $fm = new form_filemanager($options);
+ * $output = get_renderer('core', 'files');
+ * echo $output->render($fm);
+ * </pre>
+ *
+ * @param form_filemanager $fm File manager to render
+ * @return string HTML fragment
+ */
+ function render_form_filemanager($fm) {
+ static $filemanagertemplateloaded;
+ $html = $this->file_manager_html($fm);
+ $module = array(
+ 'name'=>'form_filemanager',
+ 'fullpath'=>'/lib/form/filemanager.js',
+ 'requires' => array('core_filepicker', 'base', 'io-base', 'node', 'json', 'yui2-button', 'yui2-container', 'yui2-layout', 'yui2-menu', 'yui2-treeview', 'core_dndupload'),
+ 'strings' => array(array('loading', 'repository'), array('nomorefiles', 'repository'), array('confirmdeletefile', 'repository'),
+ array('add', 'repository'), array('accessiblefilepicker', 'repository'), array('move', 'moodle'),
+ array('cancel', 'moodle'), array('download', 'moodle'), array('ok', 'moodle'),
+ array('emptylist', 'repository'), array('nofilesattached', 'repository'), array('entername', 'repository'), array('enternewname', 'repository'),
+ array('zip', 'editor'), array('unzip', 'moodle'), array('rename', 'moodle'), array('delete', 'moodle'),
+ array('cannotdeletefile', 'error'), array('confirmdeletefile', 'repository'),
+ array('nopathselected', 'repository'), array('popupblockeddownload', 'repository'),
+ array('draftareanofiles', 'repository'), array('path', 'moodle'), array('setmainfile', 'repository'),
+ array('moving', 'repository'), array('files', 'moodle'), array('serverconnection', 'error')
+ )
+ );
+ if (empty($filemanagertemplateloaded)) {
+ $filemanagertemplateloaded = true;
+ $this->page->requires->js_init_call('M.form_filemanager.set_templates',
+ array(array(
+ 'onefile' => '___fullname___ ___action___'
+ )), true, $module);
+ }
+ $this->page->requires->js_init_call('M.form_filemanager.init', array($fm->options), true, $module);
+
+ // non javascript file manager
+ $html .= '<noscript>';
+ $html .= "<div><object type='text/html' data='".$fm->get_nonjsurl()."' height='160' width='600' style='border:1px solid #000'></object></div>";
+ $html .= '</noscript>';
+
+
+ return $html;
+ }
+
+ /**
+ * Returns html for displaying one file manager
+ *
+ * The main element in HTML must have id="filemanager-{$client_id}" and
+ * class="filemanager fm-loading";
+ * After all necessary code on the page (both html and javascript) is loaded,
+ * the class fm-loading will be removed and added class fm-loaded;
+ * The main element (class=filemanager) will be assigned the following classes:
+ * 'fm-maxfiles' - when filemanager has maximum allowed number of files;
+ * 'fm-nofiles' - when filemanager has no files at all (although there might be folders);
+ * 'fm-noitems' - when current view (folder) has no items - neither files nor folders;
+ * 'fm-updating' - when current view is being updated (usually means that loading icon is to be displayed);
+ * 'fm-nomkdir' - when 'Make folder' action is unavailable (empty($fm->options->subdirs) == true)
+ *
+ * Element with class 'filemanager-container' will be holding evens for dnd upload (dragover, etc.).
+ * It will have class:
+ * 'dndupload-ready' - when a file is being dragged over the browser
+ * 'dndupload-over' - when file is being dragged over this filepicker (additional to 'dndupload-ready')
+ * 'dndupload-uploading' - during the upload process (note that after dnd upload process is
+ * over, the file manager will refresh the files list and therefore will have for a while class
+ * fm-updating. Both waiting processes should look similar so the images don't jump for user)
+ *
+ * If browser supports Drag-and-drop, the body element will have class 'dndsupported',
+ * otherwise - 'dndnotsupported';
+ *
+ * Element with class 'fm-filelist' will be populated with files list;
+ * Element with class 'fm-breadcrumb' will be populated with the path or have class 'fm-empty' when empty;
+ * Element with class 'fm-btn-add' will hold onclick event for adding a file (opening filepicker);
+ * Element with class 'fm-btn-mkdir' will hold onclick event for adding new folder;
+ * Element with class 'fm-btn-download' will hold onclick event for download action;
+ *
+ * @param form_filemanager $fm
+ * @return string
+ */
+ private function file_manager_html($fm) {
+ global $OUTPUT;
+ $options = $fm->options;
+ $client_id = $options->client_id;
+ $straddfile = get_string('addfile', 'repository');
+ $strmakedir = get_string('makeafolder', 'moodle');
+ $strdownload = get_string('downloadfolder', 'repository');
+ $strloading = get_string('loading', 'repository');
+ $strnofilesattached = get_string('nofilesattached', 'repository');
+ $strdroptoupload = get_string('droptoupload', 'moodle');
+ $icon_progress = $OUTPUT->pix_icon('i/loading_small', $strloading).'';
+ $restrictions = $this->file_manager_restrictions($fm);
+ $strdndenabled = get_string('dndenabled_insentence', 'moodle').$OUTPUT->help_icon('dndenabled');
+ $strdndenabledinbox = get_string('dndenabled_inbox', 'moodle');
+ $loading = get_string('loading', 'repository');
+
+ $html .= <<<FMHTML
+<div id="filemanager-{$client_id}" class="filemanager fm-loading">
+ <div class="filemanager-loading mdl-align">{$icon_progress}</div>
+ <div class="fm-breadcrumb"></div>
+ <div class="filemanager-toolbar">
+ <input type="button" class="fm-btn-add" value="{$straddfile}" />
+ <input type="button" class="fm-btn-mkdir" value="{$strmakedir}" />
+ <input type="button" class="fm-btn-download" value="{$strdownload}" />
+ {$restrictions}
+ <span class="dndupload-message"> - $strdndenabled </span>
+ </div>
+ <div class="filemanager-container" >
+ <ul class="fm-filelist"></ul>
+ <div class="fm-empty-container mdl-align">{$strnofilesattached}
+ <span class="dndupload-message">{$strdndenabledinbox}</span>
+ </div>
+ <div class="dndupload-target">{$strdroptoupload}</div>
+ <div class="dndupload-uploadinprogress">{$icon_progress}</div>
+ <div class="filemanager-updating">{$icon_progress}</div>
+ </div>
+</div>
+<div class="clearer"></div>
+FMHTML;
+ return $html;
+ }
+
+ /**
+ * Displays restrictions for the file manager
+ *
+ * @param form_filemanager $fm
+ * @return string
+ */
+ private function file_manager_restrictions($fm) {
+ $maxbytes = display_size($fm->options->maxbytes);
+ if (empty($options->maxfiles) || $options->maxfiles == -1) {
+ $maxsize = get_string('maxfilesize', 'moodle', $maxbytes);
+ //$string['maxfilesize'] = 'Maximum size for new files: {$a}';
+ } else {
+ $strparam = (object)array('size' => $maxbytes, 'attachments' => $options->maxfiles);
+ $maxsize = get_string('maxsizeandattachments', 'moodle', $strparam);
+ //$string['maxsizeandattachments'] = 'Maximum size for new files: {$a->size}, maximum attachments: {$a->attachments}';
+ }
+ // TODO MDL-32020 also should say about 'File types accepted'
+ return '<span>'. $maxsize. '</span>';
+ }
}
View
34 lib/form/dndupload.js
@@ -64,18 +64,20 @@ M.form_dndupload.init = function(Y, options) {
* maxfiles: maximum number of files this form allows
* maxbytes: maximum size of files allowed in this form
* clientid: unqiue id of this form field used for html elements
- * containerprefix: prefix of htmlid of container
+ * containerid: htmlid of container
* repositories: array of repository objects passed from filepicker
* filemanager: filemanager element we are working with
- * callback: callback to filepicker element to refesh when uploaded
+ * formcallback: callback to filepicker element to refesh when uploaded
* }
*/
init: function(Y, options) {
this.Y = Y;
if (!this.browser_supported()) {
+ Y.one('body').addClass('dndnotsupported');
return; // Browser does not support the required functionality
}
+ Y.one('body').addClass('dndsupported');
// try and retrieve enabled upload repository
this.repositoryid = this.get_upload_repositoryid(options.repositories);
@@ -89,21 +91,12 @@ M.form_dndupload.init = function(Y, options) {
this.maxfiles = options.maxfiles;
this.maxbytes = options.maxbytes;
this.itemid = options.itemid;
- this.container = this.Y.one(options.containerprefix + this.clientid);
+ this.container = this.Y.one('#'+options.containerid);
if (options.filemanager) {
// Needed to tell the filemanager to redraw when files uploaded
// and to check how many files are already uploaded
this.filemanager = options.filemanager;
- // Add a callback to show the 'drag and drop enabled' message
- // within the filemanager box once it has finished loading,
- // if there are no files yet uploaded
- this.filemanager.emptycallback = function(clientid) {
- var el = Y.one('#dndenabled2-'+clientid);
- if (el) {
- el.setStyle('display', 'inline');
- }
- }
} else if (options.formcallback) {
// Needed to tell the filepicker to update when a new
@@ -111,14 +104,13 @@ M.form_dndupload.init = function(Y, options) {
this.callback = options.formcallback;
} else {
if (M.cfg.developerdebug) {
- alert('dndupload: Need to define either options.filemanager or options.callback');
+ alert('dndupload: Need to define either options.filemanager or options.formcallback');
}
return;
}
this.init_events();
this.init_page_events();
- this.Y.one('#dndenabled-'+this.clientid).setStyle('display', 'inline');
},
/**
@@ -361,11 +353,11 @@ M.form_dndupload.init = function(Y, options) {
* Highlight the area where files could be dropped
*/
show_drop_target: function() {
- this.Y.one('#filemanager-uploadmessage'+this.clientid).setStyle('display', 'block');
+ this.container.addClass('dndupload-ready');
},
hide_drop_target: function() {
- this.Y.one('#filemanager-uploadmessage'+this.clientid).setStyle('display', 'none');
+ this.container.removeClass('dndupload-ready');
},
/**
@@ -386,20 +378,14 @@ M.form_dndupload.init = function(Y, options) {
* Display a progress spinner in the destination node
*/
show_progress_spinner: function() {
- // add a loading spinner to show something is happening
- var loadingspinner = this.Y.Node.create('<div id="dndprogresspinner-'+this.clientid+'" style="text-align: center">');
- loadingspinner.append('<img src="'+M.util.image_url('i/loading_small')+'" />');
- this.container.append(loadingspinner);
+ this.container.addClass('dndupload-uploading');
},
/**
* Remove progress spinner in the destination node
*/
hide_progress_spinner: function() {
- var spinner = this.Y.one('#dndprogresspinner-'+this.clientid);
- if (spinner) {
- spinner.remove();
- }
+ this.container.removeClass('dndupload-uploading');
},
/**
View
157 lib/form/filemanager.js
@@ -34,7 +34,11 @@
*/
-M.form_filemanager = {};
+M.form_filemanager = {templates:{}};
+
+M.form_filemanager.set_templates = function(Y, templates) {
+ M.form_filemanager.templates = templates;
+}
/**
* This fucntion is called for each file picker on page.
@@ -76,25 +80,21 @@ M.form_filemanager.init = function(Y, options) {
} else {
this.filecount = 0;
}
+ this.filemanager = Y.one('#filemanager-'+options.client_id);
+ if (this.filemanager.hasClass('filemanager-container') || !this.filemanager.one('.filemanager-container')) {
+ this.dndcontainer = this.filemanager;
+ } else {
+ this.dndcontainer = this.filemanager.one('.filemanager-container');
+ if (!this.dndcontainer.get('id')) {
+ this.dndcontainer.generateID();
+ }
+ }
this.setup_buttons();
this.refresh(this.currentpath); // MDL-31113 get latest list from server
},
wait: function(client_id) {
- var container = Y.one('#filemanager-'+client_id);
- container.set('innerHTML', '');
- var html = Y.Node.create('<ul id="draftfiles-'+client_id+'"></ul>');
- container.appendChild(html);
- var panel = Y.one('#draftfiles-'+client_id);
- var name = '';
- var str = '<div style="text-align:center">';
- str += '<img src="'+M.util.image_url('i/loading_small')+'" />';
- str += '</div>';
- try {
- panel.set('innerHTML', str);
- } catch(e) {
- alert(e.toString());
- }
+ this.filemanager.addClass('fm-updating');
},
request: function(args, redraw) {
var api = this.api + '?action='+args.action;
@@ -150,13 +150,11 @@ M.form_filemanager.init = function(Y, options) {
}
},
check_buttons: function() {
- var button_addfile = Y.one("#btnadd-"+this.client_id);
- if (this.filecount > 0) {
- Y.one("#btndwn-"+this.client_id).setStyle('display', 'inline');
- }
- if (this.filecount >= this.maxfiles && this.maxfiles!=-1) {
- button_addfile.setStyle('display', 'none');
- }
+ if (this.filecount>0) {this.filemanager.removeClass('fm-nofiles');}
+ else {this.filemanager.addClass('fm-nofiles');}
+ if (this.filecount >= this.maxfiles && this.maxfiles!=-1)
+ {this.filemanager.addClass('fm-maxfiles');}
+ else {this.filemanager.removeClass('fm-maxfiles');}
},
refresh: function(filepath) {
var scope = this;
@@ -179,29 +177,26 @@ M.form_filemanager.init = function(Y, options) {
}, true);
},
setup_buttons: function() {
- var button_download = Y.one("#btndwn-"+this.client_id);
- var button_create = Y.one("#btncrt-"+this.client_id);
- var button_addfile = Y.one("#btnadd-"+this.client_id);
+ var button_download = this.filemanager.one('.fm-btn-download');
+ var button_create = this.filemanager.one('.fm-btn-mkdir');
+ var button_addfile = this.filemanager.one('.fm-btn-add');
// setup 'add file' button
// if maxfiles == -1, the no limit
- if (this.filecount >= this.maxfiles
- && this.maxfiles!=-1) {
- button_addfile.setStyle('display', 'none');
- } else {
- button_addfile.on('click', function(e) {
- var options = this.filepicker_options;
- options.formcallback = this.filepicker_callback;
- // XXX: magic here, to let filepicker use filemanager scope
- options.magicscope = this;
- options.savepath = this.currentpath;
- M.core_filepicker.show(Y, options);
- }, this);
- }
+ button_addfile.on('click', function(e) {
+ e.preventDefault();
+ var options = this.filepicker_options;
+ options.formcallback = this.filepicker_callback;
+ // XXX: magic here, to let filepicker use filemanager scope
+ options.magicscope = this;
+ options.savepath = this.currentpath;
+ M.core_filepicker.show(Y, options);
+ }, this);
// setup 'make a folder' button
if (this.options.subdirs) {
button_create.on('click',function(e) {
+ e.preventDefault();
var scope = this;
// a function used to perform an ajax request
function perform_action(e) {
@@ -243,12 +238,13 @@ M.form_filemanager.init = function(Y, options) {
this.mkdir_dialog.show();
}, this);
} else {
- button_create.setStyle('display', 'none');
+ this.filemanager.addClass('fm-nomkdir');
}
// setup 'download this folder' button
// NOTE: popup window must be enabled to perform download process
- button_download.on('click',function() {
+ button_download.on('click',function(e) {
+ e.preventDefault();
var scope = this;
// perform downloaddir ajax request
this.request({
@@ -268,32 +264,16 @@ M.form_filemanager.init = function(Y, options) {
});
}, this);
},
- empty_filelist: function(container) {
- var content = '<div class="mdl-align">'+M.str.repository.nofilesattached;
- content += '<span id="dndenabled2-'+this.client_id+'" style="display: none">';
- content += ' - '+M.util.get_string('dndenabled_inbox', 'moodle')+'</span>';
- content += '</div>';
- content += this.upload_message();
- container.set('innerHTML', content);
- if (this.emptycallback) {
- this.emptycallback(this.client_id);
- }
- },
- upload_message: function() {
- var div = '<div id="filemanager-uploadmessage'+this.client_id+'" style="display:none" class="dndupload-target">';
- div += M.util.get_string('droptoupload', 'moodle');
- div += '</div>';
- return div;
- },
render: function() {
var options = this.options;
var path = this.options.path;
var list = this.options.list;
- var breadcrumb = Y.one('#fm-path-'+this.client_id);
+ var breadcrumb = this.filemanager.one('.fm-breadcrumb');
+ // empty breadcrumb
+ breadcrumb.set('innerHTML', '').addClass('fm-empty');
// build breadcrumb
- if (path) {
- // empty breadcrumb
- breadcrumb.set('innerHTML', '');
+ if (path && path.length) {
+ breadcrumb.removeClass('fm-empty');
var count = 0;
for(var p in path) {
var arrow = '';
@@ -333,8 +313,6 @@ M.form_filemanager.init = function(Y, options) {
}, this, args);
}
}
- var template = Y.one('#fm-template');
- var container = Y.one('#filemanager-' + this.client_id);
var listhtml = '';
// folder list items
@@ -356,17 +334,10 @@ M.form_filemanager.init = function(Y, options) {
file_data.client_id = folder_data.client_id = zip_data.client_id = this.client_id;
var foldername_ids = [];
+ this.filemanager.removeClass('fm-updating').removeClass('fm-noitems');
if (!list || list.length == 0) {
- // hide file browser and breadcrumb
- //container.setStyle('display', 'none');
- this.empty_filelist(container);
- if (!path || path.length <= 1) {
- breadcrumb.setStyle('display', 'none');
- }
+ this.filemanager.addClass('fm-noitems');
return;
- } else {
- container.setStyle('display', 'block');
- breadcrumb.setStyle('display', 'block');
}
var count = 0;
@@ -379,7 +350,7 @@ M.form_filemanager.init = function(Y, options) {
// file menu
var action = 'action-' +this.client_id+'-'+count;
- var html = template.get('innerHTML');
+ var html = M.form_filemanager.templates.onefile;
html_ids.push('#'+htmlid);
html_data[htmlid] = action;
@@ -430,12 +401,7 @@ M.form_filemanager.init = function(Y, options) {
html = '<li id="'+htmlid+'">'+html+'</li>';
listhtml += html;
}
- if (!Y.one('#draftfiles-'+this.client_id)) {
- var filelist = Y.Node.create('<ul id="draftfiles-'+this.client_id+'"></ul>');
- container.appendChild(filelist);
- }
- listhtml += this.upload_message();
- Y.one('#draftfiles-'+this.client_id).set('innerHTML', listhtml);
+ this.filemanager.one('.fm-filelist').set('innerHTML', listhtml);
// click normal file menu
Y.on('click', this.create_filemenu, file_ids, this, file_data);
@@ -453,6 +419,7 @@ M.form_filemanager.init = function(Y, options) {
enter_folder: function(e, data) {
var node = e.currentTarget;
var file = data[node.get('id')];
+ e.preventDefault();
this.refresh(file.filepath);
},
create_filemenu: function(e, data) {
@@ -589,18 +556,6 @@ M.form_filemanager.init = function(Y, options) {
if (typeof M.core_formchangechecker != 'undefined') {
M.core_formchangechecker.set_form_changed();
}
- if (scope.filecount < scope.maxfiles && scope.maxfiles!=-1) {
- var button_addfile = Y.one("#btnadd-"+scope.client_id);
- button_addfile.setStyle('display', 'inline');
- button_addfile.on('click', function(e) {
- var options = scope.filepicker_options;
- options.formcallback = scope.filepicker_callback;
- // XXX: magic here, to let filepicker use filemanager scope
- options.magicscope = scope;
- options.savepath = scope.currentpath;
- M.core_filepicker.show(Y, options);
- }, this);
- }
}
});
};
@@ -790,21 +745,9 @@ M.form_filemanager.init = function(Y, options) {
});
// finally init everything needed
- // kill nonjs filemanager
- var item = document.getElementById('nonjs-filemanager-'+options.client_id);
- if (item && !options.usenonjs) {
- item.parentNode.removeChild(item);
- }
- // hide loading picture
- item = document.getElementById('filemanager-loading-'+options.client_id);
- if (item) {
- item.parentNode.removeChild(item);
- }
- // display filemanager interface
- item = document.getElementById('filemanager-wrapper-'+options.client_id);
- if (item) {
- item.style.display = '';
- }
+ // hide loading picture, display filemanager interface
+ var filemanager = Y.one('#filemanager-'+options.client_id);
+ filemanager.removeClass('fm-loading').addClass('fm-loaded');
var manager = new FileManagerHelper(options);
var dndoptions = {
@@ -815,7 +758,7 @@ M.form_filemanager.init = function(Y, options) {
maxbytes: options.maxbytes,
itemid: options.itemid,
repositories: manager.filepicker_options.repositories,
- containerprefix: '#filemanager-',
+ containerid: manager.dndcontainer.get('id')
};
M.form_dndupload.init(Y, dndoptions);
};
View
168 lib/form/filemanager.php
@@ -252,7 +252,9 @@ function toHtml() {
$options->context = $PAGE->context;
$html = $this->_getTabs();
- $html .= form_filemanager_render($options);
+ $fm = new form_filemanager($options);
+ $output = $PAGE->get_renderer('core', 'files');
+ $html .= $output->render($fm);
$html .= '<input value="'.$draftitemid.'" name="'.$elname.'" type="hidden" />';
// label element needs 'for' attribute work
@@ -272,7 +274,7 @@ function toHtml() {
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
* @todo do not use this abstraction (skodak)
*/
-class form_filemanaer_x {
+class form_filemanager implements renderable {
/** @var stdClass $options options for filemanager */
public $options;
@@ -280,6 +282,15 @@ class form_filemanaer_x {
* Constructor
*
* @param stdClass $options options for filemanager
+ * default options are:
+ * maxbytes=>-1,
+ * maxfiles=>-1,
+ * itemid=>0,
+ * subdirs=>false,
+ * client_id=>uniqid(),
+ * acepted_types=>'*',
+ * return_types=>FILE_INTERNAL,
+ * context=>$PAGE->context
*/
public function __construct(stdClass $options) {
global $CFG, $USER, $PAGE;
@@ -316,6 +327,18 @@ public function __construct(stdClass $options) {
$this->options->$name = $value;
}
+ // calculate the maximum file size as minimum from what is specified in filepicker options,
+ // course options, global configuration and php settings
+ $coursebytes = $maxbytes = 0;
+ list($context, $course, $cm) = get_context_info_array($this->options->context->id);
+ if (is_object($course)) {
+ $coursebytes = $course->maxbytes;
+ }
+ if (!empty($this->options->maxbytes) && $this->options->maxbytes > 0) {
+ $maxbytes = $this->options->maxbytes;
+ }
+ $this->options->maxbytes = get_max_upload_file_size($CFG->maxbytes, $coursebytes, $maxbytes);
+
// building file picker options
$params = new stdClass();
$params->accepted_types = $options->accepted_types;
@@ -326,134 +349,19 @@ public function __construct(stdClass $options) {
$filepicker_options = initialise_filepicker($params);
$this->options->filepicker = $filepicker_options;
}
-}
-
-/**
- * Print the file manager
- *
- * <pre>
- * $OUTPUT->file_manager($options);
- * </pre>
- *
- * @param array $options associative array with file manager options
- * options are:
- * maxbytes=>-1,
- * maxfiles=>-1,
- * itemid=>0,
- * subdirs=>false,
- * client_id=>uniqid(),
- * acepted_types=>'*',
- * return_types=>FILE_INTERNAL,
- * context=>$PAGE->context
- * @return string HTML fragment
- */
-function form_filemanager_render($options) {
- global $CFG, $OUTPUT, $PAGE;
-
- $fm = new form_filemanaer_x($options); //TODO: this is unnecessary here, the nested options are getting too complex
-
- static $filemanagertemplateloaded;
- $html = '';
- $options = $fm->options;
- $straddfile = get_string('addfile', 'repository');
- $strmakedir = get_string('makeafolder', 'moodle');
- $strdownload = get_string('downloadfolder', 'repository');
- $strloading = get_string('loading', 'repository');
-
- $icon_progress = $OUTPUT->pix_icon('i/loading_small', $strloading).'';
-
- $client_id = $options->client_id;
- $itemid = $options->itemid;
- list($context, $course, $cm) = get_context_info_array($options->context->id);
- if (is_object($course)) {
- $course_maxbytes = $course->maxbytes;
- } else {
- $course_maxbytes = $CFG->maxbytes;
- }
-
- if ($options->maxbytes == -1 || empty($options->maxbytes)) {
- $options->maxbytes = $CFG->maxbytes;
- }
-
- if (empty($options->filecount)) {
- $extra = ' style="display:none"';
- } else {
- $extra = '';
- }
-
- $maxbytes = display_size(get_max_upload_file_size($CFG->maxbytes, $course_maxbytes, $options->maxbytes));
- if (empty($options->maxfiles) || $options->maxfiles == -1) {
- $maxsize = get_string('maxfilesize', 'moodle', $maxbytes);
- } else {
- $strparam = (object)array('size' => $maxbytes, 'attachments' => $options->maxfiles);
- $maxsize = get_string('maxsizeandattachments', 'moodle', $strparam);
+ public function get_nonjsurl() {
+ global $PAGE;
+ return new moodle_url('/repository/draftfiles_manager.php', array(
+ 'env'=>'filemanager',
+ 'action'=>'browse',
+ 'itemid'=>$this->options->itemid,
+ 'subdirs'=>$this->options->subdirs,
+ 'maxbytes'=>$this->options->maxbytes,
+ 'maxfiles'=>$this->options->maxfiles,
+ 'ctx_id'=>$PAGE->context->id, // TODO ?
+ 'course'=>$PAGE->course->id, // TODO ?
+ 'sesskey'=>sesskey(),
+ ));
}
- $strdndenabled = get_string('dndenabled_insentence', 'moodle').$OUTPUT->help_icon('dndenabled');
- $loading = get_string('loading', 'repository');
- $html .= <<<FMHTML
-<div class="filemanager-loading mdl-align" id='filemanager-loading-{$client_id}'>
-$icon_progress
-</div>
-<div id="filemanager-wrapper-{$client_id}" style="display:none">
- <div class="fm-breadcrumb" id="fm-path-{$client_id}"></div>
- <div class="filemanager-toolbar">
- <input type="button" class="fm-btn-add" id="btnadd-{$client_id}" onclick="return false" value="{$straddfile}" />
- <input type="button" class="fm-btn-mkdir" id="btncrt-{$client_id}" onclick="return false" value="{$strmakedir}" />
- <input type="button" class="fm-btn-download" id="btndwn-{$client_id}" onclick="return false" {$extra} value="{$strdownload}" />
- <span> $maxsize </span>
- <span id="dndenabled-{$client_id}" style="display: none"> - $strdndenabled </span>
- </div>
- <div class="filemanager-container" id="filemanager-{$client_id}" style="position: relative" >
- <ul id="draftfiles-{$client_id}" class="fm-filelist">
- <li>{$loading}</li>
- </ul>
- </div>
-</div>
-<div class='clearer'></div>
-FMHTML;
- if (empty($filemanagertemplateloaded)) {
- $filemanagertemplateloaded = true;
- $html .= <<<FMHTML
-<div id="fm-template" style="display:none">___fullname___ ___action___</div>
-FMHTML;
- }
-
- $module = array(
- 'name'=>'form_filemanager',
- 'fullpath'=>'/lib/form/filemanager.js',
- 'requires' => array('core_filepicker', 'base', 'io-base', 'node', 'json', 'yui2-button', 'yui2-container', 'yui2-layout', 'yui2-menu', 'yui2-treeview', 'core_dndupload'),
- 'strings' => array(array('loading', 'repository'), array('nomorefiles', 'repository'), array('confirmdeletefile', 'repository'),
- array('add', 'repository'), array('accessiblefilepicker', 'repository'), array('move', 'moodle'),
- array('cancel', 'moodle'), array('download', 'moodle'), array('ok', 'moodle'),
- array('emptylist', 'repository'), array('nofilesattached', 'repository'), array('entername', 'repository'), array('enternewname', 'repository'),
- array('zip', 'editor'), array('unzip', 'moodle'), array('rename', 'moodle'), array('delete', 'moodle'),
- array('cannotdeletefile', 'error'), array('confirmdeletefile', 'repository'),
- array('nopathselected', 'repository'), array('popupblockeddownload', 'repository'),
- array('draftareanofiles', 'repository'), array('path', 'moodle'), array('setmainfile', 'repository'),
- array('moving', 'repository'), array('files', 'moodle'), array('serverconnection', 'error')
- )
- );
- $PAGE->requires->js_module($module);
- $PAGE->requires->js_init_call('M.form_filemanager.init', array($options), true, $module);
-
- // non javascript file manager
- $filemanagerurl = new moodle_url('/repository/draftfiles_manager.php', array(
- 'env'=>'filemanager',
- 'action'=>'browse',
- 'itemid'=>$itemid,
- 'subdirs'=>$options->subdirs,
- 'maxbytes'=>$options->maxbytes,
- 'maxfiles'=>$options->maxfiles,
- 'ctx_id'=>$PAGE->context->id,
- 'course'=>$PAGE->course->id,
- 'sesskey'=>sesskey(),
- ));
-
- $html .= '<noscript>';
- $html .= "<div><object type='text/html' data='$filemanagerurl' height='160' width='600' style='border:1px solid #000'></object></div>";
- $html .= '</noscript>';
-
-
- return $html;
}
View
14 lib/form/filepicker.js
@@ -5,8 +5,7 @@ M.form_filepicker.instances = [];
M.form_filepicker.callback = function(params) {
var html = '<a href="'+params['url']+'">'+params['file']+'</a>';
- document.getElementById('file_info_'+params['client_id']).innerHTML = html;
- M.form_filepicker.add_upload_message(params['client_id']);
+ M.form_filepicker.Y.one('#file_info_'+params['client_id'] + ' .filepicker-filename').setContent(html);
//When file is added then set status of global variable to true
var elementname = M.core_filepicker.instances[params['client_id']].options.elementname;
M.form_filepicker.instances[elementname].fileadded = true;
@@ -14,15 +13,6 @@ M.form_filepicker.callback = function(params) {
M.form_filepicker.Y.one('#id_'+elementname).simulate('change');
};
-M.form_filepicker.add_upload_message = function(client_id) {
- var div = '<div id="filemanager-uploadmessage'+client_id+'" style="display:none" class="dndupload-target">';
- div += M.util.get_string('droptoupload', 'moodle');
- div += '</div>';
- var iteminfo = document.getElementById('file_info_'+client_id);
- iteminfo.innerHTML += div;
- iteminfo.style.position = 'relative';
-}
-
/**
* This fucntion is called for each file picker on page.
*/
@@ -52,7 +42,6 @@ M.form_filepicker.init = function(Y, options) {
item = document.getElementById('filepicker-wrapper-'+options.client_id);
if (item) {
item.style.display = '';
- this.add_upload_message(options.client_id);
}
var dndoptions = {
@@ -64,6 +53,7 @@ M.form_filepicker.init = function(Y, options) {
repositories: options.repositories,
formcallback: options.formcallback,
containerprefix: '#file_info_',
+ containerid: 'file_info_'+options.client_id
};
M.form_dndupload.init(Y, dndoptions);
};
View
6 lib/outputrenderers.php
@@ -2020,6 +2020,7 @@ public function render_file_picker(file_picker $fp) {
$straddfile = get_string('openpicker', 'repository');
$strloading = get_string('loading', 'repository');
$strdndenabled = get_string('dndenabled_inbox', 'moodle');
+ $strdroptoupload = get_string('droptoupload', 'moodle');
$icon_progress = $OUTPUT->pix_icon('i/loading_small', $strloading).'';
$currentfile = $options->currentfile;
@@ -2053,8 +2054,9 @@ public function render_file_picker(file_picker $fp) {
EOD;
if ($options->env != 'url') {
$html .= <<<EOD
- <div id="file_info_{$client_id}" class="mdl-left filepicker-filelist">
- $currentfile<span id="dndenabled-{$client_id}" style="display: none"> - $strdndenabled </span>
+ <div id="file_info_{$client_id}" class="mdl-left filepicker-filelist" style="position: relative">
+ <div><span class="filepicker-filename">$currentfile</span><span class="dndupload-message"> - $strdndenabled </span></div>
+ <div><div class="dndupload-target">{$strdroptoupload}</div></div>
</div>
EOD;
}
View
35 theme/base/style/filemanager.css
@@ -90,7 +90,8 @@
.filemanager-toolbar a:hover {background: #FFFFFF;}
.filemanager-toolbar .helplink a {border: 0px; background: transparent;}
.fm-breadcrumb {margin:0;}
-.filemanager-container {padding: 5px;margin: 6px 0;background: #E9F4FF;border: #AACCEE 1px solid}
+.filemanager .fm-breadcrumb.fm-empty {display:none;}
+.filemanager-container {padding: 5px;margin: 6px 0;background: #E9F4FF;border: #AACCEE 1px solid;position: relative;}
.filemanager-container ul{margin:0;padding:0;}
.filemanager-container ul li{white-space:nowrap;list-style-type:none;}
.filemanager-container ul li a{padding:0}
@@ -104,8 +105,40 @@
.filemanager-container,
.filepicker-filelist {overflow:hidden;}
+
+.filemanager.fm-loading .fm-breadcrumb,
+.filemanager.fm-loading .filemanager-toolbar,
+.filemanager.fm-loading .filemanager-updating,
+.filemanager.fm-loading .filemanager-container {display:none;}
+
+.filemanager.fm-loaded .filemanager-loading {display:none;}
+
+.filemanager.fm-nofiles .fm-btn-download {display:none;}
+
+.filemanager.fm-nomkdir .fm-btn-mkdir {display:none;}
+
+.filemanager.fm-maxfiles .fm-btn-add {display:none;}
+.filemanager.fm-maxfiles .dndupload-message {display:none;}
+
+.filemanager .fm-empty-container {display:none;}
+.filemanager.fm-noitems .fm-empty-container {display:block;}
+.filemanager.fm-noitems .filemanager-container .fm-filelist {display:none;}
+
+.filemanager .filemanager-updating {display:none;text-align:center;}
+.filemanager.fm-updating .filemanager-updating {display:block;}
+.filemanager.fm-updating .filemanager-container {display:none;}
+
+/*
+ * Drag and drop support
+ */
.filemanager-container .dndupload-target,
.filepicker-filelist .dndupload-target {background:#f7f998;position:absolute;height:100%;width:100%;top:0;left:0;text-align:center;padding:5px;z-index:1000}
.filemanager-container.dndupload-over .dndupload-target,
.filepicker-filelist.dndupload-over .dndupload-target {background:#8EF947;font-weight:bold}
+.dndupload-message {display:none;}
+.dndsupported .dndupload-message {display:inline;}
+.dndupload-target {display:none;}
+.dndsupported .dndupload-ready .dndupload-target {display:block;}
+.dndupload-uploadinprogress {display:none;text-align:center;}
+.dndupload-uploading .dndupload-uploadinprogress {display:block;}

0 comments on commit 906e7d8

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