vpusher / paper-tree Goto Github PK
View Code? Open in Web Editor NEWBrowsable tree of nodes with expandable/collapsible capabilities and actions menu
License: MIT License
Browsable tree of nodes with expandable/collapsible capabilities and actions menu
License: MIT License
Hello, great work!
Are there any plans to port this to 2.0? I am not an expert but from looking at the code and Polymers upgrade guide there seems not to be too much to change.
Or is it usable in Polymer 2.0 as it is?
I think I can not simply get it via bower because of the 1.* dependencies which conflict with my 2.0 project.
Nicolas
Hi, I'm trying to edit the default css applied to the paper-tree nodes. Is there a way of defining options to apply custom css to individual paper-tree nodes? I have tried editing paper-tree-node.html (specifically the .node-container class) but it had no effect. Let me know if this is possible thanks.
Edit: I just applied my css styles to the node-row class in paper-tree-node.html. I'm closing the issue now.
I can't see the demo on https://www.webcomponents.org/element/vpusher/paper-tree/elements/paper-tree. It used to be there but disappeared after the last updates.
Everythings seems to work, except for highlighting the selected tree node and I can't figure out why.
This is my code: https://gist.github.com/0ef305ce3167469c01bc34260a430cec.
What am I doing wrong? Thank you!
Hi,
Do you have any examples of changing the +/- icons to an different icon?
Regards
bower paper-item#^1.2.1 ECMDERR Failed to execute "git ls-remote --tags --heads https://github.com/PolymerElements/paper-item.git", exit code of #128 fatal: unable to access 'https://github.com/PolymerElements/paper-item.git/': Recv failure: Connection reset by peer
Additional error details:
fatal: unable to access 'https://github.com/PolymerElements/paper-item.git/': Recv failure: Connection reset by peer
Is there a simple way to add dynamic data via ajax? I have a lot of data with sometimes circular dependencies so it's impossible to load the full graph. How about opening a node could trigger an update?
If I understand correctly, it is currently not possible to not set an icon on the node. A workaround is to add icon 'none', however there is still a white space where the icon would normally be.
Hi,
I ran into a couple of issues when applying paper-tree, I think they are related to shadow dom vs. shady dom, but I'm not sure. That might explain why they work in you're demo but not in my application.
My application is based on the Polymer Starer Kit. I'm working on Chrome v55.
I went ahead and forked your repository and applied some fixes. In all just 4 lines of code. The Fork/branch can be found here:
https://github.com/neuralquest/paper-tree/tree/lazy-load
Issues:
I ran in to a problem related to event retargeting. The e.target in paper-tree _selectNode was pointing to the paper-tree node, as opposed to the selected paper-tree-node. I was able to fix this using var normalizedEvent = Polymer.dom(event)
. See:
https://www.polymer-project.org/1.0/docs/devguide/events#retargeting
I also had an issue with node-row highlighting. What I found was that the class selector under :host, needs to be placed in parentheses, like so: :host(.selected)
. There are examples of this in Rob Dodson's cheat sheet:
http://robdodson.me/shadow-dom-css-cheat-sheet/
We may have to add ::content
to the statement as wel. I didn't bother with this since its working for me without.
https://www.polymer-project.org/1.0/docs/devguide/styling#styling-distributed-children-content
New Features:
I propose firing a toggle-children
event from toggleChildren so that we can use the tree for lazy loading.
I've added a lazyload-demo in the form of a custom element. Still needs to be incorporated in the demo page.
See Tree lazy loading in action: https://neuralquest-395e9.firebaseapp.com/ (work in progress, takes a few seconds to warm up :-()
I added src$="[[data.src]]"
to the iron-icon so that users can optionally provide a url/svg/base64 string. The docs say that scr takes precedence over icon, but this is not true. To work around this I also changed the parm in _computeIcon
to data
and added if(data.src) return '';
. The app above uses base64 strings read from the database.
I also added white-space: nowrap; to .node-container to prevent wrapping of the tree node. You can see the effect in the example above by sliding the slider to the left.
I also propose adding an animated loading icon. By setting loading:true
you are in effect saying "I don't know yet if there are any children". See _computeClass
and class selector .node-preicon.loading:before
in paper-tree-node. The app above shows this in action.
Hope this helps.
I learned a lot from studying your code.
Chris
the _selectNode is not executed ,
_selectNode: function(e) {
if(this.selected) {
this.toggleClass("selected", false, this.selected);
}
this.selected = e.target;
this.toggleClass("selected", true, this.selected);
}
this how I put it in my page
<paper-tree id="tree2" selected={{selected_node}} ></paper-tree>
<span>{{selected_node}}</span>
<script>
Polymer({
is: 'my-view2'
,
properties: {
param: {
type: Object,
}
},
attached: function(e) {
console.log('innerParam', this.param);
var tree = this.$.tree2;
// Only one node.
debugger;
tree.data = {
"name": "Hello",
"children": [{
"name": "World"
}, {
"name": "There"
}, {
"name": "You",
"icon": "account-circle"
}]
};
}
});
</script>
How is deep linking supported? I was expecting to see a "selected" property that I could bind to my JSON but there is only "open".
Here is an example of deep linking to a tree.
http://52.90.210.88/kb/#/en-US/home/2/3/4?topic=kidH4_775_c1
When you follow the link the tree is opened to reveal the "Screen Frozen" node, and that node is selected.
option 1: load the tree and then imperativly traverse the tree looking for the right node and imperativly firing its "selected" state.
option 2: have the open and selected state in the JSON and bind it.
jsTree has a nice section in tree JSON for state info including selected, that's what I would like to see.
https://www.jstree.com/docs/json/
{
id : "string" // will be autogenerated if omitted
text : "string" // node text
icon : "string" // string for custom
state : {
opened : boolean // is the node open
disabled : boolean // is the node disabled
selected : boolean // is the node selected
},
children : [] // array of strings or objects
li_attr : {} // attributes for the generated LI node
a_attr : {} // attributes for the generated A node
}
Can anyone help me out with a sample of how I can traverse the tree-nodes once the tree is loaded? I need to comb through the tree-nodes recursively.
Thanks for any help
The data uses an "open" property but doesn't it also need a "selected" property? If I am reloading a path I need to display all the correct folders as opened, and the target folder as selected.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.