m3co/tree3

(abandoned) A simple tree for MDL

Tree3 tag

A simple tree tag

Initial ideas

If you can express it in HTML then you can express it in JS

By default, any HTML code defacto is a tree. The main key is the CSS set of rules we want to apply in order to represent a tree following the Material Design's principles.

Docs

Tests

How to use

If you're planning to use this tree then don't forget to add the following polyfills:

<script src="/bower_components/array-includes/array-includes.js"></script>
<script src="/bower_components/element-matches/closest.js"></script>
<script src="/bower_components/customevent-polyfill/customevent-polyfill.min.js"></script>

In order to initiate the tree, add to any mdl-list component the class mdl-tree3

tree3's Issues

Restore the splash screen if there's no leafs in the tree

1. Create an empty tree
2. Click on +
3. Remove the just created leaf
4. Where's the splash screen?

TypeError: Cannot read property '0' of undefined

https://sentry.io/3-constructora-sas/tree3/issues/182858642/

TypeError: Cannot read property '0' of undefined
  at None (/tree3.js:86)

TypeError: Unable to get property 'contextItems' of undefined or null reference

https://sentry.io/3-constructora-sas/tree3/issues/202153068/

TypeError: Unable to get property 'contextItems' of undefined or null reference
  at l (/docs/scripts/docstrap.lib.js:3:26419)
  at o (/docs/scripts/docstrap.lib.js:3:28106)
  at a (/docs/scripts/docstrap.lib.js:3:31267)
  at a.Sunlight.highlightAll (/docs/scripts/docstrap.lib.js:4:320)
  at Anonymous function (/docs/tutorial-simpleTree.html:268:2)
...
(5 additional frame(s) were not displayed)

Define two type of leafs

Leafs can be

• Normal leaf with keyboard_arrow_down as expanded or keyboard_arrow_up as collapsed, and
• Link leaf with keyboard_arrow_left as link to an upper level.

Let's try the following simple idea:
If user expands the tree from the root, then the expanded leaf will show its children-leafs, and let's call this list - level 1.

If user expands the tree from any level 1 leaf, then

1. Let's call the expanded leaf list - level 2
2. The level 1's parent become a Link leaf and all siblings hide in favour of showing the level 2 as the main list
3. If user expands the tree from any level 2 leaf, then - repeat this list from 1.
4. Any new Link leaf will be added via appendChild

If the user clicks on any Link leaf then its tree will be rendered and any child expanded leaf will collapse back...

Add a MutationObserver in order to handle expand/collapse actions

If you change the class .mdl-tree__item--expand to .mdl-tree__item--collapsed or inverse, then nothing will happen. The correct behavior can be achieved if setup a MutationObserver to handle those classes.

Turn this element into CE

Add some necessary features

HTML, JS Linter, Live Reload and Babel JS are minimal required features that must be present in this development.

Error: No such interface supported

https://sentry.io/3-constructora-sas/tree3/issues/202182208/

Error: No such interface supported

  at setupContextmenu_ (/tree3.js:122:13)
  at appendLeaf (/tree3.js:401:9)
  at Anonymous function (/tree3.js:492:13)

Add the leaf to the event's detail when expand/collapse

At this moment, the tree is dispatching those events with e.detail == undefined. It's desired to see in the detail the leaf that has been expanded/collapsed.

Rewrite this tree as a MDL component

You should write this tree following this recomendations

the docs' template doesn't fit to mobile

TypeError: Unable to get property 'length' of undefined or null reference

https://sentry.io/3-constructora-sas/tree3/issues/202153067/

TypeError: Unable to get property 'length' of undefined or null reference
  at p (/docs/scripts/docstrap.lib.js:3:22927)
  at a.Sunlight.registerLanguage (/docs/scripts/docstrap.lib.js:4:618)
  at Anonymous function (/docs/scripts/docstrap.lib.js:4:1540)
  at Global code (/docs/scripts/docstrap.lib.js:1:1)

Remove private functions from Tree3.prototype

Functions like

• dispatchCustomAction_
• setupContextmenu_
• setupInput_

and so on... are good candidates to remove from Tree3.prototype as they don't use this.
Recheck the code...

Show /doc as main page

I don't know how to "link" /docs/index.html with ./index.html

The motivation to do this "link" is because I want to show

• README.md
• /demo
• /doc
• /test

Allow the tree3 to be constructed via HTML

Let's suppose this case. Notice that there are some elements in the tree before the tree's initialization. So, let's allow the tree to setup existing elements.

NotFoundError: NotFoundError: DOM Exception 8

https://sentry.io/3-constructora-sas/tree3/issues/183953601/

NotFoundError: NotFoundError: DOM Exception 8
  at HTMLLIElement.removeLeaf (/tree3.js:193:10)
  at HTMLInputElement.<anonymous> (/tree3.js:119:14)

Desired behavior when creating a new leaf

A simple case at demo3

Current case:

1. Add a new item from the splash
2. Click on the three dots
3. The leaf disappears

Desired case:

1. Add a new item
2. If no label - set the three dots disabled
3. If click on any place of the current leaf return the focus to the input
4. If click on any other place - remove the leaf

Error: Unspecified error.

https://sentry.io/3-constructora-sas/tree3/issues/187388411/

Error: Unspecified error.
  at Anonymous function (/tree3.js:157:7)

D&D for sorting the tree

Handle the initialization of trees

You should use MutationObserver in order to handle the initialization of all trees.

Organize /demo and show it through Tutorials

For a while, the /demo directory holds only one demo version of this tree3. I created a new directory called trunk that will hold the demo experiments.

Add an splash screen if tree is empty

IE make key enter to react as expected

Translate the interface to pointer-events

Currently click calls the add item and expand/collapse actions. Touch event should call those actions too.
The same idea for dblclick event.

Prevent creation of item if no label provided

Is allowed to create a lot of empty items?

Add any doc generator

I want to expose the documentation for this repo. And I want to see it via /docs URL.

Define the parentLeaf property

If the leaf is a root leaf then leaf.parentLeaf == null;
If the leaf is not a root leaf then leaf.parentLeaf == parent where parent is the parent leaf.

TypeError: Object #<HTMLUListElement> has no method 'append'

https://sentry.io/3-constructora-sas/tree3/issues/183437759/

TypeError: Object #<HTMLUListElement> has no method 'append'
  at None (/tree3.js:272)

TypeError: Attempting to change access mechanism for an unconfigurable property.

https://sentry.io/3-constructora-sas/tree3/issues/182886579/

TypeError: Attempting to change access mechanism for an unconfigurable property.
  at None (/tree3.js:215)

Error: Unspecified error.

https://sentry.io/3-constructora-sas/tree3/issues/187809160/

Error: Unspecified error.
  at Anonymous function (/tree3.js:158:7)

TypeError: Cannot set property 'upgraded' of undefined

https://sentry.io/3-constructora-sas/tree3/issues/185444621/

TypeError: Cannot set property 'upgraded' of undefined
  at initTree (/tree3.js:352:19)
  at HTMLDocument.<anonymous> (/tree3.js:443:21)

Write the test for appendExpandCollapse fn

Write a polyfill for Element.closest()

Pretty simple... right?

Tree3 rename to MaterialTree3

const classAsString = 'Tree3'; change to has the correct value and check tests... If this requires a big effort, then leave it as is.

TypeError: Object #<HTMLLIElement> has no method 'closest'

https://sentry.io/3-constructora-sas/tree3/issues/182861869/

TypeError: Object #<HTMLLIElement> has no method 'closest'
  at HTMLLIElement.<anonymous> (/tree3.js:119:27)

TypeError: Property 'hasOwnProperty' of object [object DOMStringMap] is not a function

https://sentry.io/3-constructora-sas/tree3/issues/183919778/

TypeError: Property 'hasOwnProperty' of object [object DOMStringMap] is not a function
  at initTree (/tree3.js:281:22)
  at HTMLLIElement.appendLeaf (/tree3.js:82:9)
  at HTMLLIElement.<anonymous> (/tree3.js:151:12)

TypeError: Object doesn't support property or method 'includes'

https://sentry.io/3-constructora-sas/tree3/issues/187817178/

TypeError: Object doesn't support property or method 'includes'
  at createContextmenu (/tree3.js:230:13)
  at appendLeaf (/tree3.js:67:5)
  at Anonymous function (/tree3.js:386:7)

Error: No such interface supported

https://sentry.io/3-constructora-sas/tree3/issues/187388382/

Error: No such interface supported

  at createContextmenu (/tree3.js:222:9)
  at appendLeaf (/tree3.js:67:5)
  at Anonymous function (/tree3.js:386:7)

Allow the tree to appendLeaf without dispatching addleaf event

The tree can appendLeaf()

1. when clicking on "Add" item in the context menu
2. when authors desire to appendLeaf() via script in order to add a full-described leaf.

The second case shouldn't

• dispatch the addleaf event
• open the input, focus and set its cursor

The second case should just create an empty leaf that will be filled with some information.

TypeError: Object #<HTMLLIElement> has no method 'remove'

https://sentry.io/3-constructora-sas/tree3/issues/183479134/

TypeError: Object #<HTMLLIElement> has no method 'remove'
  at HTMLButtonElement.<anonymous> (/tree3.js:269:58)

Hide expand/collapse button if leaf is empty

Add the textContent getter/setter to leafs

The desired behavior is

var leaf = tree3.createLeaf();
leaf.textContent = "a label";

Then, internally should happen...

leaf.querySelector('.mdl-tree3__leaf-text').textContent = "a label";

Unhide the collapsed leaf if adding a new subleaf

TypeError: Object doesn't support property or method 'remove'

https://sentry.io/3-constructora-sas/tree3/issues/202153071/

TypeError: Object doesn't support property or method 'remove'
  at removeSplash_ (/tree3.js:509:11)
  at Anonymous function (/tree3.js:491:13)

Setup the templates via HTML attributes.

If it's possible to define custom items for the context menu, then should be possible to redefine the default templates. Let's think about it.