vpusher
commented
7 years ago @platoscave Thx for posting.
About your issues:
-
Normalized event sometimes does not work as expected depending on which element catch the event. That is why I directly pass information into the event detail (in the last version).
-
Indeed the CSS syntax was not shadow compliant. This is now fixed.
-
::contentselector is not needed here since there is no light dom.
Would you try the release v1.0.2 and tell me if it fixes all the things.
Then we could talk about your feature requests.
platoscave
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#retargetingI 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
::contentto 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-contentNew Features: I propose firing a
toggle-childrenevent 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_computeIcontodataand addedif(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:trueyou are in effect saying "I don't know yet if there are any children". See_computeClassand class selector.node-preicon.loading:beforein paper-tree-node. The app above shows this in action.Hope this helps. I learned a lot from studying your code. Chris