Tree view example #106
Comments
Найди дерево на js (dtree.js / dtree.css ( https://github.com/trdm/jn-npp-scripts/tree/master/Bin )) ии построй на их основе html страницы и юзай. |
|
@trdm thanks for your reply, but seems your example missed some html files, and can not run correct. Would u share these files for demo? |
|
Остальные файлы погибли вместе с винчестером. |
|
@trdm I know the dtree API, but not sure how to integrate it into the dockable, I try the following code, it displayed nothing at the dockable. I find you have implemented it already in your gif picture, it's really cool. Would u help to review my code and point out the problem ? thanks.
|
|
@trdm I have a html written with dtree as follows, I'm newer to js, and don't know how to displayed it in the JN dockable? |
|
mytest.zip |
|
А как заставить docable сразу навигировать на локальный файл (без фреймов) я еще не разобрался. :( |
|
@trdm great, thanks for your help, now it works, the key is to refresh the dockable manually, then it will display the tree. I have a little improve it by add the following line, then it will auto refresh the page.
Now I have new question for the tree, when the tree node is clicked, how to jump to the special line in the text file as follows.
here is the code for your reference. |
|
Самому интересно, как пересылать события IDialog в IEditor... |
|
seems the Notepad++ function list dockable can jump to the line by clicked the tree node.
|
|
Here is the reference how to jump to a location in file |
|
Просто надо изучить вопрос. не хочу играть в угадайку. |
|
@trdm how to call the jn-npp-plugin api in the frameset src dtree html file? or get the dree clicked event from the frameset src html? seems it's impossible. |
|
@sieukrem does jn-npp-plugin dockable support addeventlistener function? now I have a iframe src in the dockable, but cannot get the click event from the iframe, do u have any suggestion? |
|
The dockable window hosts an html document. The document object is accessible as in jN javascript environment as in the document's javascript environment. Use this fact to inject communication functions. var myFunctions = {
onNodeClick: function(node){alert(node)}
}
var myDockable = Editor.createDockable({
name:"Some Tree",
docking:"right"
});
myDockable.document.write("<html><body onClick='NodeFunctions.onNodeClick(123)'>click me</body></html>");
myDockable.document.close();
// object injection only after document.close() call
myDockable.document.NodeFunctions = myFunctions;The usage of frames creates additional indirection and makes the handling difficult. What if you try to use dtree directly in the dockable's document? |
|
@sieukrem this is my test code I use the frame in the dockable to implement the treeview with dtree lib, and want to postMessage from the frame to the dockable for the node clicked event, but cannot get this message the in dockable. Besides, as you mentioned above, if not use the 3rd lib dtree, I'm not sure how to implement a powerful treeview in the dockable. |
|
I don't know what you mean with powerful, but I prepared following example satisfying needs (tree representation, navigation to a line ) gathered from discussion var w = Editor.createDockable({
onbeforeclose:function(){
return true;
},
onclose:function(){
},
name: "tree",
docking: 'bottom'
});
var d = w.document;
d.write('<!DOCTYPE html><html>\
<head><style>\
body, html {\
padding:0; margin:0; overflow:auto; font-family: verdana; font-size:11px\
}\
li { \
cursor: pointer; \
}\
li > span:hover{\
background:#eee;\
}\
li > span { \
overflow: hidden; height:1.3em; display: block; float:left;\
}\
li{clear:both}\
li > i { \
overflow: hidden; height:1.3em; width:18px; float:left; display:block;\
background-position: center; background-repeat: no-repeat; background-position-x: left;\
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAx0lEQVR4nJ2SMYoCQRBF38gcQDzHXkDdZEEW1lyPYDSpockaeoPNN9kNBQWTSdTbjEhjN3R30W2wzMDoLA5+KCh+Ufxfn0oA5odzpAVWw25ClhdRQmxVWV7EVDtBubpA7+sNgNMsr/HaCalxwsWHRgu3vHFCqu29QolbXlshNVZQLjD4fb9bePkeVf1xssNYoaOtR/nHISkf0daXlgI/4201nG4+AGqccuHPUlNK/97wVEqmIaXP/rpRwVghAegs9q1eIyxfkyuea6Zqsnbd9gAAAABJRU5ErkJggg==")\
}\
ul { \
list-style-type: none; \
margin-left:12px; \
} \
li > ul { \
margin-left:18px; \
} \
li > ul {\
display: none !important;\
}\
li.open > i{\
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAk0lEQVR4nLWQMQoCMRBFX5YcwMIjeAvFE21raWXpgSwXRHtbwSO4IMEEZjIkFmKr2cKB383jfb4D2JwflYbbL2eOfhirldqUfhirj2oEbRIQ1fBJjWcuTUBSw0eZYBDDJzGCFubrxdfn+/FGEqOLkgn5tyHkSpT8qVS4HK7fCS3vSv9fKU1YKYnhALrtqYkou5V7Ad34jw8khWGgAAAAAElFTkSuQmCC");\
}\
li.open > ul {\
display: block !important;\
}\
</style></head>\
<body id="tree-root" onclick="TreeView.onClick(event)"></body>\
</html>');
d.close();
var nodes = [
{label:"Beverages", children:[
{ label:"Water", data:"my data 1", line: 10 },
{ label:"Tea", children:[
{ label:"Black Tea" },
{ label:"Green Tea", children:[
{ label:"Sencha" , data: "my data 2"},
{ label:"Gyokuro" }
]}
]}
]}
];
d.TreeView = {
// called on click, provides original element
onDidClickElement:function(el){
alert("Clicked "+el.label+" data "+el.data);
if (el.line)
currentView.line = el.line;
},
onClick:function(event){
var nodeDomEl = (event.target||event.srcElement).parentElement;
var nodeEl = this.map[nodeDomEl.id];
if(!!nodeEl)
this.onDidClickElement(nodeEl);
this.toggle(nodeDomEl, "open");
},
toggle:function(el, cl){
if (cl === el.className){
el.className = "" ;
} else {
el.className = cl;
}
},
addChildren:function(parentDomEl, els){
if (!els || els.length == 0)
return;
var doc = parentDomEl.ownerDocument;
var ulDomEl = doc.createElement("ul");
for(var i=0; i<els.length; i++){
var li = doc.createElement("li");
var id = "n"+(this.id++);
li.setAttribute("id", id);
var el = els[i];
this.map[id] = el;
var item = this.TreeDataProvider.getTreeItem(el);
var label = doc.createElement("span");
label.innerText = item.label;
var elChildren = this.TreeDataProvider.getChildren(el);
if(elChildren && elChildren.length > 0){
var expander = doc.createElement("i");
li.appendChild(expander);
}
li.appendChild(label);
this.addChildren(li, elChildren);
ulDomEl.appendChild(li);
}
parentDomEl.appendChild(ulDomEl);
},
map:{},
id:0
};
d.TreeView.TreeDataProvider = {
// iterates through the tree elements
getChildren: function(el){
if (!el)
return nodes;
return el.children;
},
// transforms the element data to the tree item representation
getTreeItem: function(el){
return { label:el.label };
}
}
d.TreeView.addChildren(d.getElementById("tree-root"), d.TreeView.TreeDataProvider.getChildren(null));
delete d; When you click on collapsed elements they will expand, and if you click on |
|
@sieukrem thanks for your example, it's good, but meanwhile it miss feature such as open to the node, when we clicked the text line, we expect it can open to node in the tree view. |
|
Good point! :D I would appreciate to see a PR extending existing dialog.js for the tree functionality with bidirectional eventing from DataProvider to tree view and from tree view to Npp scripts. |
|
Great if these features can be implemented in the dialog.js, I'm looking forward to it. Unfortunately I'm newer to JS and cannot help too much on this PR. |
|
@sieukrem base on your example above, how to jump to the tree node automatically when clicked the text line in the current view? |
Hi, would u add a Tree view example for the jn-npp-plugin?
it's similar to the function list.
The text was updated successfully, but these errors were encountered: