Wiki source code of Drawer
Version 1.6 by Lucas Charpentier (Sereza7) on 2023/11/15
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{version since="XWiki 15.10"}} It's possible to reuse the behavior implemented for the main menu drawer in custom drawers.{{/version}} | ||
| 2 | |||
| 3 | In order to do so, the different parts of the drawer 'pattern' must be set up in the page HTML: | ||
| 4 | 1. A drawer opener button, with: | ||
| 5 | * a reference to the ID of the drawer container in its attribute 'aria-control' | ||
| 6 | * the class '.drawer-opener' | ||
| 7 | 2. A drawer container, with: | ||
| 8 | * a `dialog` HTML nature | ||
| 9 | * a unique ID (same as the 'aria-controls' value of the drawer opener) | ||
| 10 | * the class 'drawer-nav' (for basic style) | ||
| 11 | * an accessible name that describes the function of the drawer | ||
| 12 | * The content to display inside | ||
| 13 | 3. (Optional) A drawer close button: | ||
| 14 | * Inside the drawer container | ||
| 15 | * With the class '.drawer-close | ||
| 16 | |||
| 17 | Additionally, style should be added for the new drawer. As of now, it's recommended to reuse [[the content of this block from the drawer.less stylesheet>>https://github.com/xwiki/xwiki-platform/blob/86dbb3e0984a127e985006537bf781adc7417f79/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/drawer.less#L29]]. This can be reused either by: | ||
| 18 | * Adding your own drawer ID on line 29 of the file. | ||
| 19 | * Copying the style block to your own LESS stylesheet and changing #tmDrawer to your own drawer ID | ||
| 20 | |||
| 21 | |||
| 22 | == Example == | ||
| 23 | |||
| 24 | I updated the `drawer.vm` template to add my own template. [[Here is the file>>https://up1.xwikisas.com/#ZALQU0iN1unVl4AHzA0WQg]]. Here are the details of my modifications on this file: | ||
| 25 | * L102->104: I added a button in the main drawer to open the custom drawer | ||
| 26 | * L107->113: I added the custom drawer container, which is a dialog with a unique ID, and added some of the content I want to display in it. | ||
| 27 | |||
| 28 | In this example, I decided to add my own drawer ID on line 29 of drawer.less. [[Here is the updated file>>https://up1.xwikisas.com/#ufUizsdxpqw7Baz0bk7tOw]] | ||
| 29 | |||
| 30 | Here is a [[video demo of how updating those two files allows to add a fully interactive drawer>>https://up1.xwikisas.com/#qqmSesR1-5yJSW6NTJVW0Q]]. |
