Page 1 of 3
[MOD] Image Manager with auto-expand
Posted: Fri May 21, 2010 12:17 am
by ncc50446@hotmail.com
Hey,
i was wondering if there was a way that when you open the image manager, all the folders are automatically expanded? It would also be helpful if it could save the last location of where you selected/uploaded an image from/to. But the auto-expand is the more important feature. I can't seem to figure it out... It would help to speed things up when adding new listings.
Thanks for any help
Re: Image Manager with auto-expand
Posted: Fri May 21, 2010 5:31 am
by ncc50446@hotmail.com
Well, I found this for it...
http://www.jstree.com/demo/cookie
Just having some troubles implementing it...
Re: Image Manager with auto-expand
Posted: Fri May 21, 2010 11:33 pm
by ncc50446@hotmail.com
Anyone have any idea's? I see that jstree comes with the cookie plugin, however I can't seem to get it to work by following the instructions. Far from good instructions lol And I don't have a lot of experience with javascript or jquery.
Thank you for any assistance
Re: Image Manager with auto-expand
Posted: Wed Jun 09, 2010 2:17 am
by ncc50446@hotmail.com
Well, I'm still stuck on this problem...
I tried to upgrade to the latest version, 1.0.0 rc, however now it doesn't seem to work with OpenCart, so I'm back to square one.
It can't be that hard to get the jstree cookies to work...However I can't seem to find anywhere on Google on how to do it...
This is something that should be turned on default one would think...
Anyways, has anyone had any success with cookies and jstree?
Thanks
Re: Image Manager with auto-expand
Posted: Mon Aug 30, 2010 6:08 am
by davykeenan
Did you work this out? looking for solution before i start looking through the files.
Davy K
Re: Image Manager with auto-expand
Posted: Sat Jan 15, 2011 11:11 pm
by kaylohn
Here's something I tried which had worked to some extent:
Im using OC 1.4.9.2 which uses jstree version 0.9.9a
jstree ver 1.0rc2 code will not work
Opened in editor:
admin\view\template\common\filemanager.tpl
Added before the closing head tag:
Code: Select all
<script type="text/javascript" src="view/javascript/jquery/jstree/lib/jquery.cookie.js"></script>
<script type="text/javascript" src="view/javascript/jquery/jstree/plugins/jquery.tree.cookie.js"></script>
Added:
after:
Code: Select all
<script type="text/javascript"><!--
$(document).ready(function () {
$('#column_left').tree({
Saved the document.
Tested in FF 3.6 and Chrome 8.0.552 and Opera 11. Works.
The only problem is that it does not open the tree beyond the first node i.e.
Code: Select all
<images>
<category A>
<category B>
.......
Hope someone will help further refine the fix.
Hope this helps.
Re: Image Manager with auto-expand
Posted: Sun Jan 16, 2011 11:01 am
by kaylohn
OK. Here goes the fully working (fingers crossed) automatically expanding image manager folder tree to save those precious clicks and have lots of fun using OC.
Here's how:
Im using OC 1.4.9.2 which uses jstree version 0.9.9a
jstree ver 1.0rc2 code will not work
Opened in editor:
admin\view\template\common\filemanager.tpl
Added before the closing head tag:
Code: Select all
<script type="text/javascript" src="view/javascript/jquery/jstree/lib/jquery.cookie.js"></script>
<script type="text/javascript" src="view/javascript/jquery/jstree/plugins/jquery.tree.cookie.js"></script>
Added:
After:
Code: Select all
<script type="text/javascript"><!--
$(document).ready(function () {
$('#column_left').tree({
Added:
Code: Select all
var tree = $.tree.focused();
tree.refresh(tree.selected);
After:
Code: Select all
html += '<a file="' + json[i]['file'] + '"><img src="' + json[i]['thumb'] + '" title="' + json[i]['filename'] + '" /><br />' + name + '</a>';
}
}
html += '</div>';
$('#column_right').html(html);
Added:
Code: Select all
onload: function(TREE_OBJ) {
var myTree= $.tree.focused();
myTree.open_all('#top');
myTree.refresh(myTree);
}
After:
Code: Select all
$('#column_right').html(html);
var tree = $.tree.focused();
tree.refresh(tree.selected);
}
});
},
Added: (don't forget to copy the comma)
After:
Code: Select all
onload: function(TREE_OBJ) {
var myTree= $.tree.focused();
myTree.open_all('#top');
myTree.refresh(myTree);
}
}
Save the document.
Tested in FF 3.6 and Chrome 8.0.552 and Opera 11. Works like a charm.
If you have difficulty entering the code, please download the zip attachment containing the filemanager.tpl file which needs to be copied to admin\view\template\common\ folder inside your OpenCart Installation. Rename your old filemanager.tpl file to filemanager.tpl.OLD incase you want to revert to your previous file.
Hope this helps.
Re: Image Manager with auto-expand
Posted: Tue Jan 25, 2011 10:55 pm
by peacock
Love this! Saves a lot of time. Thank you very much. Working perfectly in Version 1.4.9.3
Re: Image Manager with auto-expand
Posted: Tue May 10, 2011 3:54 pm
by Purebeads
kaylohn, do you think this fix will work in 1.4.8b? I never upgraded to 1.4.9 because of all the customizations I have.
Re: Image Manager with auto-expand
Posted: Sun May 22, 2011 6:02 pm
by kaylohn
@purebeads, haven't tried it in 1.4.8b, you can try it out and see if it works by making a backup of your original filemanager.tpl and copying the modified filemanager.tpl (see above). If it fails you can easily revert to your original. No harm done. Hope this helps.
Re: Image Manager with auto-expand
Posted: Sun May 22, 2011 6:14 pm
by Purebeads
Yes, I figured that out. I guess I didn't need to bother you.
It works. Curiously, the subdirectories expand, and then they collapse when the images in the main directory appear, and then they expand again. Even so, it is saving me a click. That extra click is such a nuisance because you have to get your mouse cursor on that very little [+] sign.
To make the file manager load quicker, I am transferring about 2000 images into subdirectories.
By the way, thanks for doing this fix for us.
Re: Image Manager with auto-expand
Posted: Sat May 28, 2011 1:20 am
by 321going
Good job, thank you very much
Re: Image Manager with auto-expand
Posted: Wed Jul 06, 2011 11:49 pm
by webpie it.
Works on V 1.5.0.5 and anything below:)
Re: Image Manager with auto-expand
Posted: Thu Sep 08, 2011 1:22 pm
by lojayatta
Thank you so much for this it really helped a lot!!!!
I made the changes and it works fine - I have OpenCart v1.5.1.1 - but my Firefox eror console returns this error
Code: Select all
"Error: a.nodeName is undefined
Source File: http://lojayatta.com.br/admin/view/javascript/jquery/jquery-1.6.1.min.js
Line: 17"
Does anyone know how to fix it?
Appreciated
P.S. I attached my edited filemanager.tpl
Re: Image Manager with auto-expand
Posted: Mon Sep 12, 2011 6:00 pm
by kaylohn
Hi!
@lojayatta
I fresh installed OpenCart 1.5.1.1 and used your filemanager.tpl but found no errors.
Then I tried the same on a fresh OpenCart 1.5.1.2 install.....still found no errors....
it worked on both versions.
Re: Image Manager with auto-expand
Posted: Wed Sep 28, 2011 7:05 am
by finedesignz
I have implemented your fix, and it does auto-expand the image folders. But it doesn't remember the folder I just had selected. Did this work for you? Is there any way to make it keep me at the active folder each time I add an image until I change it?
v1.4.9.6
Re: Image Manager with auto-expand
Posted: Sun Oct 09, 2011 5:00 pm
by kaylohn
Hi Everyone!
After a lot of work and figuring out, I present to the OC community, the properly '
behaving' Image Manager for OC.(this need be packaged in every OC release IMHO)
- Remembers the last opened tree and selected folder.
Tested: OC 1.5.1.3
Browsers: FF 7.0, Chrome 12, Opera 11.51
File attached (ZIPPED) : Extract filemanager.tpl from ZIP and copy to your OC installation admin\view\template\common\ folder. MAKE A BACKUP OF YOUR ORIGINAL in case you want to revert, which I highly doubt
Code below (modified only/partial): for full code view please download and view the source of the filemanager.tpl file.
Code: Select all
...
$(document).ready(function () {
$('#column_left').tree({
plugins : {
cookie : {}
},
data: {
type: 'json',
async: true,
opts: {
method: 'POST',
url: 'index.php?route=common/filemanager/directory&token=<?php echo $token; ?>'
}
},
selected: 'top',
ui: {
theme_name: 'classic',
animation: 400
},
types: {
'default': {
clickable: true,
creatable: false,
renameable: false,
deletable: false,
draggable: false,
max_children: -1,
max_depth: -1,
valid_children: 'all'
}
},
callback: {
beforedata: function(NODE, TREE_OBJ) {
if (NODE == false) {
TREE_OBJ.settings.data.opts.static = [
{
data: 'image',
attributes: {
'id': 'top',
'directory': ''
},
state: 'closed'
}
];
return { 'directory': '' }
} else {
TREE_OBJ.settings.data.opts.static = false;
return { 'directory': $(NODE).attr('directory') }
};
},
onselect: function (NODE, TREE_OBJ) {
$.ajax({
url: 'index.php?route=common/filemanager/files&token=<?php echo $token; ?>',
type: 'POST',
data: 'directory=' + encodeURIComponent($(NODE).attr('directory')),
dataType: 'json',
success: function(json) {
html = '<div>';
if (json) {
for (i = 0; i < json.length; i++) {
name = '';
filename = json[i]['filename'];
for (j = 0; j < filename.length; j = j + 15) {
name += filename.substr(j, 15) + '<br />';
}
name += json[i]['size'];
html += '<a file="' + json[i]['file'] + '"><img src="' + json[i]['thumb'] + '" title="' + json[i]['filename'] + '" /><br />' + name + '</a>';
}
}
html += '</div>';
$('#column_right').html(html);
}
});
},
onopen: function(TREE_OBJ) {
var tr = $('#column_left li#top li[directory]');
tr.each(function(index, domEle) {
dd = $(domEle).attr('directory');
dd = dd.replace(/\//g, "");
dd = dd.replace(" ", "");
$(domEle).attr('id', dd);
});
var myTree = $.tree.reference('#column_left');
var cc = $.cookie('selected');
var bb = '#' + cc;
myTree.select_branch(bb);
},
},
});
...
Happy Open Carting!
Please consider donating
or
Pass me some work.
++++
Here's an OC demo done by me : itwaarbazaar.com
My deviantArt page: kaylohn.deviantart.com
My YouTube Channel:
http://www.youtube.com/kaylohn
+++++++
EDIT
+++++++
Please download from the extensions page for latest version and updates
http://www.opencart.com/index.php?route ... on_id=3601
Re: Image Manager with auto-expand
Posted: Mon Oct 10, 2011 1:38 am
by lojayatta
Great job, kaylohn!
Thank you so much!
Re: Image Manager with auto-expand
Posted: Fri Oct 14, 2011 4:03 am
by adriankoooo
Hi!
Doesn't work for me on 1.4.9.6
When I click on a folder then all folders automatically opens, but why?
Re: Image Manager with auto-expand
Posted: Sat Oct 15, 2011 4:57 pm
by kaylohn
Hello adriankoooo,
Kindly use the file included in the ZIP for this to work on 1.4.x.x
Let me know.