moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-04 16:36:37 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-31901: moved select-file panel outside of filepicker/filemanager for better UI

Browse source
This commit is contained in:
Marina Glancy 2012-05-09 11:25:14 +08:00
parent 5cf44c1f1f
commit 55089a9d01
4 changed files with 58 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

17
files/renderer.php
View file

@ -295,8 +295,8 @@ class core_files_renderer extends plugin_renderer_base {
/**
* FileManager JS template for window with file information/actions.
*
* All content must be enclosed in an element with class 'fp-select', CSS for this class
* must define width and height of the window;
* All content must be enclosed in one element, CSS for this class must define width and
* height of the window;
*
* Thumbnail image will be added as content to the element with class 'fp-thumbnail';
*
@ -326,7 +326,7 @@ class core_files_renderer extends plugin_renderer_base {
* @return string
*/
private function fm_js_template_fileselectlayout() {
$rv = '<div class="{!}fp-select">
$rv = '<div class="filemanager fp-select">
<div class="fp-select-loading">
<img src="'.$this->pix_url('i/loading').'" />
<p>'.get_string('loading', 'repository').'</p>
@ -547,14 +547,15 @@ class core_files_renderer extends plugin_renderer_base {
/**
* FilePicker JS template for window appearing to select a file.
*
* All content must be enclosed in an element with class 'fp-select', CSS for this class
* must define width and height of the window;
* All content must be enclosed in one element, CSS for this class must define width and
* height of the window;
*
* Thumbnail image will be added as content to the element with class 'fp-thumbnail';
*
* Inside the window the elements with the following classnames must be present:
* 'fp-saveas', 'fp-linkexternal', 'fp-setauthor', 'fp-setlicense'. Inside each of them must have
* one input element (or select in case of fp-setlicense). They may also have labels.
* 'fp-saveas', 'fp-linktype-2', 'fp-linktype-1', 'fp-linktype-4', 'fp-setauthor',
* 'fp-setlicense'. Inside each of them must have one input element (or select in case of
* fp-setlicense). They may also have labels.
* The elements will be assign with class 'uneditable' and input/select element will become
* disabled if they are not applicable for the particular file;
*
@ -572,7 +573,7 @@ class core_files_renderer extends plugin_renderer_base {
* @return string
*/
private function fp_js_template_selectlayout() {
$rv = '<div class="{!}fp-select">
$rv = '<div class="file-picker fp-select">
<div class="fp-select-loading">
<img src="'.$this->pix_url('i/loading').'" />
<p>'.get_string('loading', 'repository').'</p>

20
lib/form/filemanager.js
View file

@ -26,6 +26,9 @@
* this.filecount, how many files in this filemanager
* this.maxfiles
* this.maxbytes
* this.filemanager, contains reference to filemanager Node
* this.selectnode, contains referenct to select-file Node
* this.selectui, YUI Panel to select the file
*
* FileManager options:
* =====
@ -97,17 +100,18 @@ M.form_filemanager.init = function(Y, options) {
this.pathbar.removeChild(this.pathnode);
}
// initialize 'select file' panel
var fpselectnode = Y.Node.create(M.form_filemanager.templates.fileselectlayout);
this.filemanager.appendChild(fpselectnode);
this.selectnode = Y.Node.create(M.form_filemanager.templates.fileselectlayout);
this.selectnode.generateID();
Y.one(document.body).appendChild(this.selectnode);
this.selectui = new Y.Panel({
srcNode : fpselectnode,
srcNode : this.selectnode,
zIndex : 600000,
centered : true,
modal : true,
close : true,
render : true
});
this.selectui.plug(Y.Plugin.Drag,{handles:['.yui3-widget-hd']});
this.selectui.plug(Y.Plugin.Drag,{handles:['#'+this.selectnode.get('id')+' .yui3-widget-hd']});
this.selectui.hide();
this.setup_select_file();
// setup buttons onclick events
@ -542,7 +546,7 @@ M.form_filemanager.init = function(Y, options) {
}
var list = ['/'];
appendfilepaths(list, tree);
var selectnode = this.filemanager.one('.fp-select');
var selectnode = this.selectnode;
node = selectnode.one('.fp-path select');
node.setContent('');
for (var i in list) {
@ -551,7 +555,7 @@ M.form_filemanager.init = function(Y, options) {
}
},
update_file: function() {
var selectnode = this.filemanager.one('.fp-select');
var selectnode = this.selectnode;
var fileinfo = this.selectui.fileinfo;
var newfilename = Y.Lang.trim(selectnode.one('.fp-saveas input').get('value'));
@ -614,7 +618,7 @@ M.form_filemanager.init = function(Y, options) {
});
},
setup_select_file: function() {
var selectnode = this.filemanager.one('.fp-select');
var selectnode = this.selectnode;
// bind labels with corresponding inputs
selectnode.all('.fp-saveas,.fp-path,.fp-author,.fp-license').each(function (node) {
node.all('label').set('for', node.one('input,select').generateID());
@ -740,7 +744,7 @@ M.form_filemanager.init = function(Y, options) {
return node.filepath;
},
select_file: function(node) {
var selectnode = this.filemanager.one('.fp-select');
var selectnode = this.selectnode;
selectnode.removeClass('loading').removeClass('fp-folder').
removeClass('fp-file').removeClass('fp-zip').removeClass('fp-cansetmain');
if (node.type == 'folder' || node.type == 'zip') {selectnode.addClass('fp-'+node.type);}

19
repository/filepicker.js
View file

@ -8,6 +8,7 @@
* this.fpnode, contains reference to filepicker Node, non-empty if and only if rendered
* this.api, stores the URL to make ajax request
* this.mainui, YUI Panel
* this.selectnode, contains reference to select-file Node
* this.selectui, YUI Panel for selecting particular file
* this.msg_dlg, YUI Panel for error or info message
* this.process_dlg, YUI Panel for processing existing filename
@ -660,7 +661,7 @@ M.core_filepicker.init = function(Y, options) {
node.one('.fp-dlg-text').setContent(M.str.repository.fileexistsdialog_filemanager);
}
}
this.fpnode.one('.fp-select').removeClass('loading');
this.selectnode.removeClass('loading');
this.process_dlg.dialogdata = data;
this.fpnode.one('.fp-dlg .fp-dlg-butrename').setContent(M.util.get_string('renameto', 'repository', data.newfile.filename));
this.process_dlg.show();
@ -965,7 +966,7 @@ M.core_filepicker.init = function(Y, options) {
select_file: function(args) {
this.selectui.show();
var client_id = this.options.client_id;
var selectnode = this.fpnode.one('.fp-select');
var selectnode = this.selectnode;
var return_types = this.options.repositories[this.active_repo.id].return_types;
selectnode.removeClass('loading');
selectnode.one('.fp-saveas input').set('value', args.title);
@ -1017,7 +1018,7 @@ M.core_filepicker.init = function(Y, options) {
},
setup_select_file: function() {
var client_id = this.options.client_id;
var selectnode = this.fpnode.one('.fp-select');
var selectnode = this.selectnode;
var getfile = selectnode.one('.fp-select-confirm');
// bind labels with corresponding inputs
selectnode.all('.fp-saveas,.fp-linktype-2,.fp-linktype-1,.fp-linktype-4,.fp-setauthor,.fp-setlicense').each(function (node) {
@ -1155,7 +1156,7 @@ M.core_filepicker.init = function(Y, options) {
var client_id = this.options.client_id;
this.fpnode = Y.Node.create(M.core_filepicker.templates.generallayout).
set('id', 'filepicker-'+client_id);
var fpselectnode = Y.Node.create(M.core_filepicker.templates.selectlayout);
this.selectnode = Y.Node.create(M.core_filepicker.templates.selectlayout);
Y.one(document.body).appendChild(this.fpnode);
this.mainui = new Y.Panel({
srcNode : this.fpnode,
@ -1171,19 +1172,23 @@ M.core_filepicker.init = function(Y, options) {
render : true
});
// allow to move the panel dragging it by it's header:
this.mainui.plug(Y.Plugin.Drag,{handles:['.yui3-widget-hd']});
this.mainui.plug(Y.Plugin.Drag,{handles:['#filepicker-'+client_id+' .yui3-widget-hd']});
this.mainui.show();
if (this.mainui.get('y')<0) {this.mainui.set('y', 0);}
// create panel for selecting a file (initially hidden)
this.fpnode.appendChild(fpselectnode);
this.selectnode = Y.Node.create(M.core_filepicker.templates.selectlayout).
set('id', 'filepicker-select-'+client_id);
Y.one(document.body).appendChild(this.selectnode);
this.selectui = new Y.Panel({
srcNode : fpselectnode,
srcNode : this.selectnode,
zIndex : 600000,
centered : true,
modal : true,
close : true,
render : true
});
// allow to move the panel dragging it by it's header:
this.selectui.plug(Y.Plugin.Drag,{handles:['#filepicker-select-'+client_id+' .yui3-widget-hd']});
this.selectui.hide();
// event handler for lazy loading of thumbnails and next page
this.fpnode.one('.fp-content').on(['scroll','resize'], this.content_scrolled, this);