Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Detachable Menu visualization variant to render complex type inclusion
Objective : to render a component (xt:component) as a detachable menu which would be triggered by clicking on a simple handle that would be displayed at the component inclusion point (xt:use). The handle would serve as a toggle to hide / show the menu.
Currently this can only be simulated using CSS :hover pseudo-selectors to show the component / menu when the mouse is over the handle. We can generalize it to show the component / menu only when clicking. In a variant we may eventually also implement a shared component / menu to minimize DOM footprint (the component / menu DOM view would be rendered only once).
<xt:component name="t_style"> <div> <p>Alignment : <xt:attribute types="select" name="Alignment" values="left right center justify" param="filter=style;style_property=text-align;style_root_class=x-Cell" default="left" option="unset"/></p> <p>Border : <xt:attribute types="text" name="Border" param="filter=style;style_property=border;style_root_class=x-Cell" option="unset"></xt:attribute></p> <p>Padding : <xt:attribute types="text" name="Padding" param="filter=style;style_property=padding;style_root_class=x-Cell;style_target_class=v-cell-body" option="unset"></xt:attribute></p> <p>Margin bottom : <xt:attribute types="select" name="MarginBottom" values="0.5em 1em 1.5em 2em 2.5em 3em 4em 5em 6em 7em 8em 9em 10em" default="1em" param="filter=style;style_property=margin-bottom;style_root_class=x-Cell" option="unset"/></p> </div> </xt:component> <xt:use types="t_style" param="detachable=true"/>
the example above uses a 'style' filter that applies the new value to the DOM for immediate feedback, in case the component / menu is a shared DOM tree, we must find a way for the filter to locate the menu handle to resolve it's target according to it (maybe with a new getComponentHandle() that would return the handle if the component is inserted as a detachable menu, and null otherwise ?).
where and how to setup a detachable menu handler
For the second question, the easiest solution is to define a standard handle to be used for every detachable menus, it could eventually use an icon with a parameter:
<xt:use types="t_style" param="detachable=true;detachable_icon=/static/images/style.png"/>
As an alternative we could imagine that the
xt:use of a detachable menu renders it's content as HTML and subscribes to it, e.g.:
<xt:use types="t_style" param="detachable=true"><span class="style-menu">Style</span></xt:use>
As another alternative we could modify AXEL to manage a focus chain at the component level and define a mechanism to trigger detachable menus of a given type using an external command. That would allow to design some menu bars applying to the whole document, e.g. :
<xt:use types="t_style" param="detachable=true;detachable_type=style"/>
would allow to define a corresponding button :
- user moves the menu on screen and position is remembered (e.g. side menu)
- well suited for styling menus (e.g. margins, text alignment, floating, etc.)
- shared menu (inspector UI design pattern) : the component would share a single DOM tree that would show the data for the latest clicked menu handle