New class structure / es6 modules

[Fuzzyma]

Directory structure

All modules are structured into the folders:

• animation
• elements
• modules
  • core
  • optional
• types
• utils

All modules in the optional folder can be removed from the library without effecting the others.
All elements except the base classes + SVG.Doc can be removed without affecting other modules.

Class structure

• SVG.Parent was merged with SVG.Element
• SVG.Element was splitted into Dom and Element

Example:
Base > EventTarget > Dom > Element > Shape > Rect
Base > EventTarget > Dom > Element > Container > Doc

Module Bundling

All modules are bundle together in main.js. This bundle should be utilized by other people using es6. They can import all functions they need from there.

When the user wants his old plain SVG-Object, they can use the svg.js file which imports this object.
This is also used to bundle the es5 bundle and is currently run against the tests.

What has to be changed in the docs

• Update usage note:
  • es5 users should include the es5 bundle + polyfills file (works with script tag)
  • es6 users should include SVG from svg.js or specific objects from the main.js
• New page for Dom with all its methods
• Update elements page with all its methods
• Note, from which optional module a method is coming from

Methods of EventTarget

• addEventListener - private
• dispatch: returns the event
• dispatchEvent - private
• fire: returns the element
• getEventHolder - private
• getEventTarget - private
• off
• on
• removeEventListener - private

Methods of Dom:

• add
• addTo
• attr - accepts array as input now (attr() excepts array now to get multiple values at once #66)
• children -> returns List
• clear
• clone -> does NOT append clone behind the element. Use insertAfter() instead
• each
• element: moved here from Bare
• find - old select(). Returns List
• first
• get
• getEventTarget (actually this should be private api)
• has
• id
• index
• last
• matches
• parent
• put
• putIn
• remove
• removeElement (private)
• replace
• round - round node attributes el.round(precision, [which Attributes = all])
• toString
• svg (Getting inner SVG content svg.js#700)
  • getter: svg(modifier, outerHTML = true), svg(outerHTML = true)
  • setter: svg(svgString, outerHTML = true)
• words: move here from Bare
• writeDataToDom (private?)

Methods of Element

• center
• cx
• cy
• defs
• doc
• getEventHolder (private)
• height
• inside
• move
• parents - does return all parents until it hits the given node: el.parents(until = document)
• reference
• setData - private?
• writeDataToDom (overwritten from Dom - no second explanation needed)
• x
• y
• bbox
• rbox
• point
• ctm
• screenCTM

Methods of Container

• ungroup - breaks up only one container, basically removing the grouping of the children (ungroup() now breaks off one container and not more #65)
• flatten - flattens the whole structure

I am not sure if we should structure it like that. When someone wants to kow which methods are on the element, he might also want to use dom or event target methods. So how can we link that in a good way?