// 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 . /** * * File Manager UI * ===== * this.api, stores the URL to make ajax request * this.currentpath * this.filepicker_options * this.movefile_dialog * this.mkdir_dialog * this.rename_dialog * this.client_id * this.filecount, how many files in this filemanager * this.maxfiles * this.maxbytes * this.areamaxbytes, the maximum size of the area * this.filemanager, contains reference to filemanager Node * this.selectnode, contains referenct to select-file Node * this.selectui, M.core.dialogue to select the file * this.viewmode, contains current view mode - icons, tree or details * * FileManager options: * ===== * this.options.currentpath * this.options.itemid */ 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. */ M.form_filemanager.init = function(Y, options) { var FileManagerHelper = function(options) { FileManagerHelper.superclass.constructor.apply(this, arguments); }; FileManagerHelper.NAME = "FileManager"; FileManagerHelper.ATTRS = { options: {}, lang: {} }; Y.extend(FileManagerHelper, Y.Base, { api: M.cfg.wwwroot+'/repository/draftfiles_ajax.php', menus: {}, initializer: function(options) { this.options = options; if (options.mainfile) { this.enablemainfile = options.mainfile; } this.client_id = options.client_id; this.currentpath = '/'; this.maxfiles = options.maxfiles; this.maxbytes = options.maxbytes; this.areamaxbytes = options.areamaxbytes; this.userprefs = options.userprefs; this.emptycallback = null; // Used by drag and drop upload this.filepicker_options = options.filepicker?options.filepicker:{}; this.filepicker_options.client_id = this.client_id; this.filepicker_options.context = options.context; this.filepicker_options.maxfiles = this.maxfiles; this.filepicker_options.maxbytes = this.maxbytes; this.filepicker_options.areamaxbytes = this.areamaxbytes; this.filepicker_options.env = 'filemanager'; this.filepicker_options.itemid = options.itemid; if (options.filecount) { this.filecount = options.filecount; } else { this.filecount = 0; } // prepare filemanager for drag-and-drop upload 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(); } } // save template for one path element and location of path bar if (this.filemanager.one('.fp-path-folder')) { this.pathnode = this.filemanager.one('.fp-path-folder'); this.pathbar = this.pathnode.get('parentNode'); this.pathbar.removeChild(this.pathnode); } // initialize 'select file' panel this.selectnode = Y.Node.create(M.form_filemanager.templates.fileselectlayout); this.selectnode.setAttribute('aria-live', 'assertive'); this.selectnode.setAttribute('role', 'dialog'); this.selectnode.generateID(); var labelid = 'fm-dialog-label_'+ this.selectnode.get('id'); this.selectui = new M.core.dialogue({ draggable : true, headerContent: '

' + M.util.get_string('edit', 'moodle') + '

', bodyContent : this.selectnode, centered : true, width : '480px', modal : true, visible : false }); Y.one('#'+this.selectnode.get('id')).setAttribute('aria-labelledby', labelid); this.selectui.hide(); this.setup_select_file(); // setup buttons onclick events this.setup_buttons(); // set event handler for lazy loading of thumbnails this.filemanager.one('.fp-content').on(['scroll','resize'], this.content_scrolled, this); // display files this.viewmode = this.get_preference("recentviewmode"); if (this.viewmode != 2 && this.viewmode != 3) { this.viewmode = 1; } var viewmodeselectors = {'1': '.fp-vb-icons', '2': '.fp-vb-tree', '3': '.fp-vb-details'}; this.filemanager.all('.fp-vb-icons,.fp-vb-tree,.fp-vb-details').removeClass('checked'); this.filemanager.all(viewmodeselectors[this.viewmode]).addClass('checked'); this.refresh(this.currentpath); // MDL-31113 get latest list from server }, wait: function() { this.filemanager.addClass('fm-updating'); }, request: function(args, redraw) { var api = this.api + '?action='+args.action; var params = {}; var scope = this; if (args['scope']) { scope = args['scope']; } params['sesskey'] = M.cfg.sesskey; params['client_id'] = this.client_id; params['filepath'] = this.currentpath; params['itemid'] = this.options.itemid?this.options.itemid:0; if (args['params']) { for (i in args['params']) { params[i] = args['params'][i]; } } var cfg = { method: 'POST', on: { complete: function(id,o,p) { if (!o) { alert('IO FATAL'); return; } var data = null; try { data = Y.JSON.parse(o.responseText); } catch(e) { scope.print_msg(M.util.get_string('invalidjson', 'repository'), 'error'); Y.error(M.util.get_string('invalidjson', 'repository')+":\n"+o.responseText); return; } if (data && data.tree && scope.set_current_tree) { scope.set_current_tree(data.tree); } args.callback(id,data,p); } }, arguments: { scope: scope }, headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, data: build_querystring(params) }; if (args.form) { cfg.form = args.form; } Y.io(api, cfg); if (redraw) { this.wait(); } }, filepicker_callback: function(obj) { this.filecount++; this.check_buttons(); this.refresh(this.currentpath); if (typeof M.core_formchangechecker != 'undefined') { M.core_formchangechecker.set_form_changed(); } }, check_buttons: function() { 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; this.currentpath = filepath; if (!filepath) { filepath = this.currentpath; } else { this.currentpath = filepath; } this.request({ action: 'list', scope: scope, params: {'filepath':filepath}, callback: function(id, obj, args) { scope.filecount = obj.filecount; scope.options = obj; scope.lazyloading = {}; scope.check_buttons(); scope.render(obj); } }, true); }, /** displays message in a popup */ print_msg: function(msg, type) { var header = M.util.get_string('error', 'moodle'); if (type != 'error') { type = 'info'; // one of only two types excepted header = M.util.get_string('info', 'moodle'); } if (!this.msg_dlg) { this.msg_dlg_node = Y.Node.create(M.form_filemanager.templates.message); var nodeid = this.msg_dlg_node.generateID(); this.msg_dlg = new M.core.dialogue({ draggable : true, bodyContent : this.msg_dlg_node, centered : true, modal : true, visible : false, }); this.msg_dlg_node.one('.fp-msg-butok').on('click', function(e) { e.preventDefault(); this.msg_dlg.hide(); }, this); } this.msg_dlg.set('headerContent', header); this.msg_dlg_node.removeClass('fp-msg-info').removeClass('fp-msg-error').addClass('fp-msg-'+type) this.msg_dlg_node.one('.fp-msg-text').setContent(Y.Escape.html(msg)); this.msg_dlg.show(); }, is_disabled: function() { return this.filemanager.ancestor('.fitem.disabled') != null; }, setup_buttons: function() { var button_download = this.filemanager.one('.fp-btn-download'); var button_create = this.filemanager.one('.fp-btn-mkdir'); var button_addfile = this.filemanager.one('.fp-btn-add'); // setup 'add file' button button_addfile.on('click', this.show_filepicker, this); var dndarrow = this.filemanager.one('.dndupload-arrow'); if (dndarrow) { dndarrow.on('click', this.show_filepicker, this); } // setup 'make a folder' button if (this.options.subdirs) { button_create.on('click',function(e) { e.preventDefault(); if (this.is_disabled()) { return; } var scope = this; // a function used to perform an ajax request var perform_action = function(e) { e.preventDefault(); var foldername = Y.one('#fm-newname-'+scope.client_id).get('value'); if (!foldername) { scope.mkdir_dialog.hide(); return; } scope.request({ action:'mkdir', params: {filepath:scope.currentpath, newdirname:foldername}, callback: function(id, obj, args) { var filepath = obj.filepath; scope.mkdir_dialog.hide(); scope.refresh(filepath); Y.one('#fm-newname-'+scope.client_id).set('value', ''); if (typeof M.core_formchangechecker != 'undefined') { M.core_formchangechecker.set_form_changed(); } } }); }; var validate_folder_name = function() { var valid = false; var foldername = Y.one('#fm-newname-'+scope.client_id).get('value'); if (foldername.length > 0) { valid = true; } var btn = Y.one('#fm-mkdir-butcreate-'+scope.client_id); if (btn) { btn.set('disabled', !valid); } return valid; }; if (!this.mkdir_dialog) { var node = Y.Node.create(M.form_filemanager.templates.mkdir); this.mkdir_dialog = new M.core.dialogue({ draggable : true, bodyContent : node, centered : true, modal : true, visible : false, }); node.one('.fp-dlg-butcreate').set('id', 'fm-mkdir-butcreate-'+this.client_id).on('click', perform_action, this); node.one('input').set('id', 'fm-newname-'+this.client_id).on('keydown', function(e) { var valid = Y.bind(validate_folder_name, this)(); if (valid && e.keyCode === 13) { Y.bind(perform_action, this)(e); } }, this); node.one('#fm-newname-'+this.client_id).on(['keyup', 'change'], function(e) { Y.bind(validate_folder_name, this)(); }, this); node.one('label').set('for', 'fm-newname-' + this.client_id); node.all('.fp-dlg-butcancel').on('click', function(e){e.preventDefault();this.mkdir_dialog.hide();}, this); node.all('.fp-dlg-curpath').set('id', 'fm-curpath-'+this.client_id); } this.mkdir_dialog.show(); // Default folder name: var foldername = M.util.get_string('newfolder', 'repository'); while (this.has_folder(foldername)) { foldername = increment_filename(foldername, true); } Y.one('#fm-newname-'+scope.client_id).set('value', foldername); Y.bind(validate_folder_name, this)(); Y.one('#fm-newname-'+scope.client_id).focus().select(); Y.all('#fm-curpath-'+scope.client_id).setContent(this.currentpath); }, this); } else { this.filemanager.addClass('fm-nomkdir'); } // setup 'download this folder' button button_download.on('click',function(e) { e.preventDefault(); if (this.is_disabled()) { return; } var scope = this; var image_downloading = this.filemanager.one('.fp-img-downloading'); if (image_downloading.getStyle('display') == 'inline') { return; } image_downloading.setStyle('display', 'inline'); // perform downloaddir ajax request this.request({ action: 'downloaddir', scope: scope, callback: function(id, obj, args) { var image_downloading = scope.filemanager.one('.fp-img-downloading'); image_downloading.setStyle('display', 'none'); if (obj) { scope.refresh(obj.filepath); node = Y.Node.create('').setStyles({ visibility : 'hidden', width : '1px', height : '1px' }); node.set('src', obj.fileurl); Y.one('body').appendChild(node); } else { scope.print_msg(M.util.get_string('draftareanofiles', 'repository'), 'error'); } } }); }, this); this.filemanager.all('.fp-vb-icons,.fp-vb-tree,.fp-vb-details'). on('click', function(e) { e.preventDefault(); var viewbar = this.filemanager.one('.fp-viewbar') if (!this.is_disabled() && (!viewbar || !viewbar.hasClass('disabled'))) { this.filemanager.all('.fp-vb-icons,.fp-vb-tree,.fp-vb-details').removeClass('checked') if (e.currentTarget.hasClass('fp-vb-tree')) { this.viewmode = 2; } else if (e.currentTarget.hasClass('fp-vb-details')) { this.viewmode = 3; } else { this.viewmode = 1; } e.currentTarget.addClass('checked') this.render(); this.filemanager.one('.fp-content').setAttribute('tabIndex', '0'); this.filemanager.one('.fp-content').focus(); this.set_preference('recentviewmode', this.viewmode); } }, this); }, show_filepicker: function (e) { // if maxfiles == -1, the no limit e.preventDefault(); if (this.is_disabled()) { return; } 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); }, print_path: function() { var p = this.options.path; this.pathbar.setContent('').addClass('empty'); if (p && p.length!=0 && this.viewmode != 2) { for(var i = 0; i < p.length; i++) { var el = this.pathnode.cloneNode(true); this.pathbar.appendChild(el); if (i == 0) { el.addClass('first'); } if (i == p.length-1) { el.addClass('last'); } if (i%2) { el.addClass('even'); } else { el.addClass('odd'); } el.one('.fp-path-folder-name').setContent(Y.Escape.html(p[i].name)). on('click', function(e, path) { e.preventDefault(); if (!this.is_disabled()) { this.refresh(path); } }, this, p[i].path); } this.pathbar.removeClass('empty'); } }, get_filepath: function(obj) { if (obj.path && obj.path.length) { return obj.path[obj.path.length-1].path; } return ''; }, treeview_dynload: function(node, cb) { var retrieved_children = {}; if (node.children) { for (var i in node.children) { retrieved_children[node.children[i].path] = node.children[i]; } } if (!node.path || node.path == '/') { // this is a root pseudo folder node.fileinfo.filepath = '/'; node.fileinfo.type = 'folder'; node.fileinfo.fullname = node.fileinfo.title; node.fileinfo.filename = '.'; } this.request({ action:'list', params: {filepath:node.path?node.path:''}, scope:this, callback: function(id, obj, args) { var list = obj.list; var scope = args.scope; // check that user did not leave the view mode before recieving this response if (!(scope.viewmode == 2 && node && node.getChildrenEl())) { return; } if (cb != null) { // (in manual mode do not update current path) scope.options = obj; scope.currentpath = node.path?node.path:'/'; } node.highlight(false); node.origlist = obj.list ? obj.list : null; node.origpath = obj.path ? obj.path : null; node.children = []; for(k in list) { if (list[k].type == 'folder' && retrieved_children[list[k].filepath]) { // if this child is a folder and has already been retrieved retrieved_children[list[k].filepath].fileinfo = list[k]; node.children[node.children.length] = retrieved_children[list[k].filepath]; } else { // append new file to the list scope.view_files([list[k]]); } } if (cb == null) { node.refresh(); } else { // invoke callback requested by TreeView component cb(); } scope.content_scrolled(); } }, false); }, content_scrolled: function(e) { setTimeout(Y.bind(function() { if (this.processingimages) {return;} this.processingimages = true; var scope = this, fpcontent = this.filemanager.one('.fp-content'), fpcontenty = fpcontent.getY(), fpcontentheight = fpcontent.getStylePx('height'), is_node_visible = function(node) { var offset = node.getY()-fpcontenty; if (offset <= fpcontentheight && (offset >=0 || offset+node.getStylePx('height')>=0)) { return true; } return false; }; // replace src for visible images that need to be lazy-loaded if (scope.lazyloading) { fpcontent.all('img').each( function(node) { if (node.get('id') && scope.lazyloading[node.get('id')] && is_node_visible(node)) { node.setImgRealSrc(scope.lazyloading); } }); } this.processingimages = false; }, this), 200) }, view_files: function(appendfiles) { this.filemanager.removeClass('fm-updating').removeClass('fm-noitems'); if ((appendfiles == null) && (!this.options.list || this.options.list.length == 0) && this.viewmode != 2) { this.filemanager.addClass('fm-noitems'); return; } var list = (appendfiles != null) ? appendfiles : this.options.list; var element_template; if (this.viewmode == 2 || this.viewmode == 3) { element_template = Y.Node.create(M.form_filemanager.templates.listfilename); } else { this.viewmode = 1; element_template = Y.Node.create(M.form_filemanager.templates.iconfilename); } var options = { viewmode : this.viewmode, appendonly : appendfiles != null, filenode : element_template, callbackcontext : this, callback : function(e, node) { if (e.preventDefault) { e.preventDefault(); } if (node.type == 'folder') { this.refresh(node.filepath); } else { this.select_file(node); } }, rightclickcallback : function(e, node) { if (e.preventDefault) { e.preventDefault(); } this.select_file(node); }, classnamecallback : function(node) { var classname = ''; if (node.type == 'folder' || (!node.type && !node.filename)) { classname = classname + ' fp-folder'; } if (node.filename || node.filepath || (node.path && node.path != '/')) { classname = classname + ' fp-hascontextmenu'; } if (node.isref) { classname = classname + ' fp-isreference'; } if (node.refcount) { classname = classname + ' fp-hasreferences'; } if (node.originalmissing) { classname = classname + ' fp-originalmissing'; } if (node.sortorder == 1) { classname = classname + ' fp-mainfile';} return Y.Lang.trim(classname); } }; if (this.viewmode == 2) { options.dynload = true; options.filepath = this.options.path; options.treeview_dynload = this.treeview_dynload; options.norootrightclick = true; options.callback = function(e, node) { // TODO MDL-32736 e is not an event here but an object with properties 'event' and 'node' if (!node.fullname) {return;} if (node.type != 'folder') { if (e.node.parent && e.node.parent.origpath) { // set the current path this.options.path = e.node.parent.origpath; this.options.list = e.node.parent.origlist; this.print_path(); } this.currentpath = node.filepath; this.select_file(node); } else { // save current path and filelist (in case we want to jump to other viewmode) this.options.path = e.node.origpath; this.options.list = e.node.origlist; this.currentpath = node.filepath; this.print_path(); //this.content_scrolled(); } }; } if (!this.lazyloading) { this.lazyloading={}; } this.filemanager.one('.fp-content').fp_display_filelist(options, list, this.lazyloading); this.content_scrolled(); }, populate_licenses_select: function(node) { if (!node) { return; } node.setContent(''); var licenses = this.options.licenses; for (var i in licenses) { var option = Y.Node.create('