Topic: Help with extended hover functionality
Hello to all
I'm a big fan of this lovely script since quite a long time. I used a old version (1.2dev) in combination with Mif.Menu. The main purpose is some sort of product categories browser. With the Mif.Menu i gave the user the ability to add, edit, rename or delete further categories to the existing category tree (with the right click event of Mif.Menu). This worked (and still does) like a charm, but I'm not happy any more with the right click navigation.
So I started to implement a navigation bar on the right if the node, solved with the "onHover" event of the current version of Mif.Tree.
Therefore I have extended the Mif.Tree class with 2 new functions. On the attached file you can see a sample how I have implemented this. (it is based on the IconUrl demo, my final version is a bit more complex, of corse).
The problem that I'm crossing now is that the onHover event is not working as expected. When you put your mouse on the node name and then move the mouse from left to right (without leaving the row), the onHover event fires an "mouse out", which is not true. The "mif-tree-hover-node" class is still applied, as you can see on the underlined node name (again in the IconUrl sample).
It is a bit complicated for me to describe, as English is obviously not my first language. The best thing is to replace the demo.js in the /Demos/IconUrl folder. Then you can see what I mean.
Does any one have an other idea how to implement my wanted feature? Any comments, ideas are highly appreciated.
Thanks in advance !!
Here's the code:
Mif.TreeExtended = new Class({
Extends: Mif.Tree,
initialize: function(tree, options) {
alert('extended Version of Mif.Tree');
var toolBar = new Element('div', {
'id': 'toolbar',
'class': 'mif-tree-toolbar',
styles: {
'position': 'absolute',
'left': '160px',
'top': '1px',
'height': this.options.height,
'width': '20px',
'height': '18px',
'display':'none',
'border': '1px solid #FF0000'
}
});
this.toolBar = toolBar;
this.parent(tree, options);
},
hoverToolBarShow: function (coord, node, state) {
this.toolBar.setStyles({
'top': document.id('mif-tree-'+node.UID).getCoordinates(tree.wrapper).top,
'display':'block'
});
},
hoverToolBarHide: function (coord, node, state) {
this.toolBar.setStyles({
'display':'none'
});
}
});
window.addEvent('domready',function(){
tree = new Mif.TreeExtended({
container: $('tree_container'),// tree container
onHover: function (node, target, state) {
if(state == 'over') { this.hoverToolBarShow(document.id('mif-tree-'+node.UID).getCoordinates(), node, state); }
if(state == 'out') { this.hoverToolBarHide(document.id('mif-tree-'+node.UID).getCoordinates(), node, state); }
},
types: {// node types
folder: {
openIcon: 'mif-tree-open-icon',//css class open icon
closeIcon: 'mif-tree-close-icon'// css class close icon
}
},
dfltType: 'folder',//default node type
height: 18//node height
});
var json = [
{
"property": {
"name": "root"
},
"children": [
{
"property": {
"name": "node1"
}
},
{
"property": {
"name": "node2",
"openIconUrl": "IconUrl/folder-open.gif",
"closeIconUrl": "IconUrl/folder-close.gif"
},
"state": {
"open": true
},
"children":[
{
"property": {
"name": "node2.1"
}
},
{
"property": {
"name": "node2.2"
}
}
]
},
{
"property": {
"name": "node4"
}
},
{
"property": {
"name": "node3"
}
}
]
}
];
// load tree from json.
tree.load({
json: json
});
tree.toolBar.inject(tree.wrapper, 'bottom');
});Last edited by mogi (2010-12-02 19:54:37)
