# JSPanel A library that helps you write a static dropdown menu, a panel, that follows the digital accessibility recommendations. ## Get started First of all, get the source code in the `src` folder of this repository. You need to copy the javascript file & the css file: ```html <link rel="stylesheet" src="src/panel-style.css"> ``` ```html <script src="src/JSPanel.js"> ``` **Note:** the source code is available in TypeScript & JavaScript. ## Create your own panel According to the digital accessibility recommendations, the panel needs to be opened by a button. Here is an example of what your code should be: ```html <html> <head> <style> #container { position: fixed; bottom: 30px; right: 30px; } </style> </head> <body> <div id="container"> <button id="panel-controller"> </div> <script src="src/JSPanel.js"></script> <script> const button = document.querySelector("#panel-controller"); const panel = new JSPanel(button, { bottom: 0 + button.getBoundingClientRect().height, right: 0, items: [ { title: "My Profile", onclick: () => console.log("et voilĂ ") } ], }); </script> </body> </html> ``` **Note:** the `aria-` attributes are added dynamically. A panel has 5 different options: |name|type|default value|description| |----|----|-------------|-----------| |`top`|number|null|The `top` CSS property.| |`right`|number|null|The `right` CSS property.| |`bottom`|number|null|The `bottom` CSS property.| |`left`|number|null|The `left` CSS property.| |`items`|Array of items|_required_|The items to be displayed in the panel.| By default, the panel is placed in the upper left corner (`top:0,left:0`). The items have also specific options: |name|type|default value|description| |----|----|-------------|-----------| |`title`|string|(_required_)|The title of the item.| |`id`|positive number|from 0, incrementing|The id of the item. Used to recognize items via some methods like `removeItem()` etc.| |`icon`|string|null|The path to an image.| |`fontawesome_icon`|string|null|The className of a Fontawesome icon.| |`fontawesome_color`|string|null|The color of the Fontawesome icon.| |`className`|string|null|Additional classes to be added to the item, separated by a white space.| |`attributes`|`[string, string][]`|null|Additional attributes to be added to the item. Exemple: `[["data-thing", "thing"], ...[]]`| |`onclick`|() => void|null|The callback function when the user clicks on the item.| |`separator`|boolean|false|Displays a line. This item cannot have any other options.| In order to use `fontawesome_icon` and `fontawesome_color`, make sure you've installed [Fontawesome](https://cdnjs.com/libraries/font-awesome) in your project. ## Make the panel dynamic Use the following methods to modify the content of the panel after its creation: * `toggleItem(id:number, disable=false)`: set disable to true if you want to disable the items. Set disable to false if you just want the item to disappear (display:none). Select the item with its ID (by default the first item has an ID of 0, then 1 etc.). * `removeItem(id:number)`: removes an item. * `removeItems(ids:number[])`: removes several items. * `getAllIDS()`: gets the id of each item. * `getItem(id:number)`: gets an item according to its ID. * `addItem(item)`: adds a new item. * `replaceItemWith(item, id:number)`: selects an item with its ID and replaces it by the new one. * `deletePanel()`: deletes the panel. ## Customize the panel You can change the style of the panel by modifying the CSS file. There are the main variables defined at the beginning of the file: ```css :root { --panel-background-color: #fff; --panel-box-shadow: 0 0 4px rgba(204, 204, 204, 0.75); --panel-width: 160px; --panel-text-color: #404040; --panel-hover-item-background-color: #f4f6fa; --panel-hover-item-color: #385074; --panel-icon-width: 13px; --panel-separator-color: #dfe3eb; } ``` For further modifications, you'll need to modify the CSS properties. Be careful not to modify the file too much at the risk of compromising the proper functioning of the panel. ## Digital Accessibility Following the digital accessibility recommendations for this kind of panels, it is necessary to open or close the panel by clicking either the Enter or Space key. See <https://www.accede-web.com/en/guidelines/rich-interface-components/show-hide-panels/> for more information. ## License MIT License