Class zebkit.ui.web.HtmlElementMan
extends <zebkit.ui.event.Manager>
<zebkit.ui.web>

This special private manager that plays key role in integration of HTML ELement into zebkit UI hierarchy. Description to the class contains technical details of implementation that should not be interested for end users.

HTML element integrated into zebkit layout has to be tracked regarding:

  1. DOM hierarchy. A new added into zebkit layout DOM element has to be attached to the first found parent DOM element
  2. Visibility. If a zebkit UI component change its visibility state it has to have side effect to all children HTML elements on any subsequent hierarchy level
  3. Moving a zebkit UI component has to correct location of children HTML element on any subsequent hierarchy level.

The implementation of HTML element component has the following specific:

  1. Every original HTML is wrapped with "div" element. It is necessary since not all HTML element has been designed to be a container for another HTML element. By adding extra div we can consider the wrapper as container. The wrapper element is used to control visibility, location, enabled state
  2. HTML element has "isDOMElement" property set to true
  3. HTML element visibility depends on an ancestor component visibility. HTML element is visible if:
    • the element isVisible property is true
    • the element has a parent DOM element set
    • all his ancestors are visible
    • size of element is more than zero
    • getCanvas() != null

The visibility state is controlled with "e.style.visibility"

To support effective DOM hierarchy tracking a zebkit UI component defines "$domKid" property that contains direct DOM element the UI component hosts and other UI components that host DOM element. This is sort of tree:

  +---------------------------------------------------------
  |  p1 (zebkit component)
  |   +--------------------------------------------------
  |   |  p2 (zebkit component)
  |   |    +---------+      +-----------------------+
  |   |    |   h1    |      | p3 zebkit component   |
  |   |    +---------+      |  +---------------+    |
  |   |                     |  |    h3         |    |
  |   |    +---------+      |  |  +---------+  |    |
  |   |    |   h2    |      |  |  |   p4    |  |    |
  |   |    +---------+      |  |  +---------+  |    |
  |   |                     |  +---------------+    |
  |   |                     +-----------------------+

   p1.$domKids : {
       p2.$domKids : {
           h1,    * leaf elements are always DOM element
           h2,
           p3.$domKids : {
              h3
           }
       }
   }
 
Constructor:
private zebkit.ui.web.HtmlElementMan ( )



private <Boolean> $isInInvisibleState (c)

Evaluates if the given zebkit HTML UI component is in invisible state.


Parameters:
  • c <zebkit.ui.HtmlElement>

    an UI HTML element wrapper


Returns: <Boolean>

true if the HTML element wrapped with zebkit UI is in invisible state