From 9213f5476fdb1784b66518a2fb136063306568a6 Mon Sep 17 00:00:00 2001 From: Marina Glancy Date: Thu, 24 May 2012 13:43:01 +0800 Subject: [PATCH] MDL-33324 fixed bugs with icons in filepicker/filemanager treeview - in treeview the icons for parent folders did not appear - in treeview after refreshing (expanding subtrees) the image previews were replaced back to filetype icons - also fixed a mistype in icon url in repository_local --- lib/form/filemanager.js | 3 +- repository/filepicker.js | 87 +++++++++++++++++++++++++++++++++------- repository/lib.php | 22 +++++++++- repository/local/lib.php | 2 +- 4 files changed, 96 insertions(+), 18 deletions(-) diff --git a/lib/form/filemanager.js b/lib/form/filemanager.js index 881d1819e4b..592dc1c876a 100644 --- a/lib/form/filemanager.js +++ b/lib/form/filemanager.js @@ -478,8 +478,7 @@ M.form_filemanager.init = function(Y, options) { if (scope.lazyloading) { fpcontent.all('img').each( function(node) { if (node.get('id') && scope.lazyloading[node.get('id')] && is_node_visible(node)) { - node.set('src', scope.lazyloading[node.get('id')]); - delete scope.lazyloading[node.get('id')]; + node.setImgRealSrc(scope.lazyloading); } }); } diff --git a/repository/filepicker.js b/repository/filepicker.js index 3e6005a4847..3c79232d66f 100644 --- a/repository/filepicker.js +++ b/repository/filepicker.js @@ -74,6 +74,67 @@ YUI.add('moodle-core_filepicker', function(Y) { return this; } + /** set image source to src, if there is preview, remember it in lazyloading. + * If there is a preview and it was already loaded, use it. */ + Y.Node.prototype.setImgSrc = function(src, realsrc, lazyloading) { + if (realsrc) { + if (M.core_filepicker.loadedpreviews[realsrc]) { + this.set('src', realsrc).addClass('realpreview'); + return this; + } else { + if (!this.get('id')) { + this.generateID(); + } + lazyloading[this.get('id')] = realsrc; + } + } + this.set('src', src); + return this; + } + + /** + * Replaces the image source with preview. If the image is inside the treeview, we need + * also to update the html property of corresponding YAHOO.widget.HTMLNode + * @param array lazyloading array containing associations of imgnodeid->realsrc + */ + Y.Node.prototype.setImgRealSrc = function(lazyloading) { + if (this.get('id') && lazyloading[this.get('id')]) { + var newsrc = lazyloading[this.get('id')]; + M.core_filepicker.loadedpreviews[newsrc] = true; + this.set('src', newsrc).addClass('realpreview'); + delete lazyloading[this.get('id')]; + var treenode = this.ancestor('.fp-treeview') + if (treenode && treenode.get('parentNode').treeview) { + treenode.get('parentNode').treeview.getRoot().refreshPreviews(this.get('id'), newsrc); + } + } + return this; + } + + /** scan TreeView to find which node contains image with id=imgid and replace it's html + * with the new image source. */ + YAHOO.widget.Node.prototype.refreshPreviews = function(imgid, newsrc, regex) { + if (!regex) { + regex = new RegExp("]*id=\""+imgid+"\"[^>]*?(/?)>", "im"); + } + if (this.expanded || this.isLeaf) { + var html = this.getContentHtml(); + if (html && this.setHtml && regex.test(html)) { + var newhtml = this.html.replace(regex, "", html); + this.setHtml(newhtml); + return true; + } + if (!this.isLeaf && this.children) { + for(var c in this.children) { + if (this.children[c].refreshPreviews(imgid, newsrc, regex)) { + return true; + } + } + } + } + return false; + } + /** * Displays a list of files (used by filepicker, filemanager) inside the Node * @@ -133,10 +194,8 @@ YUI.add('moodle-core_filepicker', function(Y) { var tmpnodedata = {className:options.classnamecallback(node)}; el.get('children').addClass(tmpnodedata.className); if (node.icon) { - el.one('.fp-icon').appendChild(Y.Node.create('').set('src', node.icon)); - if (node.realicon) { - lazyloading[el.one('.fp-icon img').generateID()] = node.realicon; - } + el.one('.fp-icon').appendChild(Y.Node.create('')); + el.one('.fp-icon img').setImgSrc(node.icon, node.realicon, lazyloading); } // create node tmpnodedata.html = el.getContent(); @@ -181,6 +240,7 @@ YUI.add('moodle-core_filepicker', function(Y) { var pathelement = options.filepath[i]; mytreeel.path = pathelement.path; mytreeel.title = pathelement.name; + mytreeel.icon = pathelement.icon; mytreeel.dynamicLoadComplete = true; // we will call it manually mytreeel.expanded = true; } @@ -238,10 +298,8 @@ YUI.add('moodle-core_filepicker', function(Y) { el.get('children').addClass(o.data['classname']); el.one('.fp-filename').setContent(o.value); if (o.data['icon']) { - el.one('.fp-icon').appendChild(Y.Node.create('').set('src', o.data['icon'])); - if (o.data['realicon']) { - lazyloading[el.one('.fp-icon img').generateID()] = o.data['realicon']; - } + el.one('.fp-icon').appendChild(Y.Node.create('')); + el.one('.fp-icon img').setImgSrc(o.data['icon'], o.data['realicon'], lazyloading); } if (options.rightclickcallback) { el.get('children').addClass('fp-hascontextmenu'); @@ -342,14 +400,11 @@ YUI.add('moodle-core_filepicker', function(Y) { filenamediv.setStyleAdv('width', width); imgdiv.setStyleAdv('width', width).setStyleAdv('height', height); var img = Y.Node.create('').setAttrs({ - src: src, title: file_get_description(node), alt: node.thumbnail_alt ? node.thumbnail_alt : file_get_filename(node)}). setStyle('maxWidth', ''+width+'px'). setStyle('maxHeight', ''+height+'px'); - if (node.realthumbnail) { - lazyloading[img.generateID()] = node.realthumbnail; - } + img.setImgSrc(src, node.realthumbnail, lazyloading); imgdiv.appendChild(img); element.on('click', function(e, nd) { if (options.rightclickcallback && e.target.ancestor('.fp-iconview .fp-contextmenu', true)) { @@ -405,6 +460,11 @@ M.core_filepicker.active_filepicker = null; */ M.core_filepicker.templates = M.core_filepicker.templates || {}; +/** + * Array of image sources for real previews (realicon or realthumbnail) that are already loaded + */ +M.core_filepicker.loadedpreviews = M.core_filepicker.loadedpreviews || {}; + /** * Set selected file info * @@ -761,8 +821,7 @@ M.core_filepicker.init = function(Y, options) { if (scope.lazyloading) { fpcontent.all('img').each( function(node) { if (node.get('id') && scope.lazyloading[node.get('id')] && is_node_visible(node)) { - node.set('src', scope.lazyloading[node.get('id')]); - delete scope.lazyloading[node.get('id')]; + node.setImgRealSrc(scope.lazyloading); } }); } diff --git a/repository/lib.php b/repository/lib.php index 4d867fd68a6..d97b7521207 100644 --- a/repository/lib.php +++ b/repository/lib.php @@ -1772,6 +1772,26 @@ abstract class repository { */ public static function prepare_listing($listing) { global $OUTPUT; + + $defaultfoldericon = $OUTPUT->pix_url(file_folder_icon(24))->out(false); + // prepare $listing['path'] or $listing->path + if (is_array($listing) && isset($listing['path']) && is_array(($listing['path']))) { + $path = &$listing['path']; + } else if (is_object($listing) && isset($listing->path) && is_array(($listing->path))) { + $path = &$listing->path; + } + if (isset($path)) { + $len = count($path); + for ($i=0; $i<$len; $i++) { + if (is_array($path[$i]) && !isset($path[$i]['icon'])) { + $path[$i]['icon'] = $defaultfoldericon; + } else if (is_object($path[$i]) && !isset($path[$i]->icon)) { + $path[$i]->icon = $defaultfoldericon; + } + } + } + + // prepare $listing['list'] or $listing->list if (is_array($listing) && isset($listing['list']) && is_array(($listing['list']))) { $listing['list'] = array_values($listing['list']); // convert to array $files = &$listing['list']; @@ -1830,7 +1850,7 @@ abstract class repository { } if (!isset($file['icon'])) { if ($isfolder) { - $file['icon'] = $OUTPUT->pix_url(file_folder_icon(24))->out(false); + $file['icon'] = $defaultfoldericon; } else if ($filename) { $file['icon'] = $OUTPUT->pix_url(file_extension_icon($filename, 24))->out(false); } diff --git a/repository/local/lib.php b/repository/local/lib.php index 72ba3d3c571..47f17520b75 100644 --- a/repository/local/lib.php +++ b/repository/local/lib.php @@ -221,7 +221,7 @@ class repository_local_file { $node['license'] = $this->fileinfo->get_license(); $node['source'] = $encodedpath; $node['thumbnail'] = $OUTPUT->pix_url(file_file_icon($this->fileinfo, 90))->out(false); - $node['icon'] = $OUTPUT->pix_url(file_file_icon($this->fileinfo), 24)->out(false); + $node['icon'] = $OUTPUT->pix_url(file_file_icon($this->fileinfo, 24))->out(false); if ($imageinfo = $this->fileinfo->get_imageinfo()) { // what a beautiful picture, isn't it $fileurl = new moodle_url($this->fileinfo->get_url());