| Both sides previous revisionPrevious revision | Next revisionBoth sides next revision |
| custom:javascript:lib:ddlightbarmenu.js [2023/04/05 14:40] – Added information about unselectable items Nightfox | custom:javascript:lib:ddlightbarmenu.js [2023/04/06 13:02] – Mentioned the fact that DDLightbarMenu can now work in non-lightbar mode if the user's terminal doesn't support ANSI (and has a property, allowANSI, that can be set false if you want to force it to do so). Added a link to DDMsgReader.js at the bottom for Nightfox |
|---|
| ====== dd_lightbar_menu.js ====== | ====== dd_lightbar_menu.js ====== |
| dd_lightbar_menu.js is a loadable JavaScript file that provides a lightbar menu class for use in JavaScript scripts for Synchronet. The DDLightbarMenu class supports single item selection and multiple item selection. For one example of how to use DDLightbarMenu, you can look at the code for ''[[howto:door:slyvote]]''. ''[[howto:editor:slyedit]]'' is another example of a JavaScript script that uses DDLightbarMenu. [[https://gitlab.synchro.net/main/sbbs/-/blob/master/xtrn/DDMsgReader/DDMsgReader.js|Digital Distortion Message Reader]] is another example of a JavaScript mod that uses DDLightbarMenu, including unselectable items (for its 'Indexed' reader mode).\\ | dd_lightbar_menu.js is a loadable JavaScript file that provides a class, DDLightbarMenu, which is a lightbar menu class for use in JavaScript scripts for Synchronet. |
| | |
| | To create a new DDLightbarMenu object: |
| | var lbMenu = new DDLightbarMenu(x, y, width, height); |
| | |
| | The DDLightbarMenu class supports single item selection and multiple item selection. For one example of how to use DDLightbarMenu, you can look at the code for ''[[howto:door:slyvote]]''. ''[[howto:editor:slyedit]]'' is another example of a JavaScript script that uses DDLightbarMenu. [[https://gitlab.synchro.net/main/sbbs/-/blob/master/xtrn/DDMsgReader/DDMsgReader.js|Digital Distortion Message Reader]] is another example of a JavaScript mod that uses DDLightbarMenu, including unselectable items (for its 'Indexed' reader mode).\\ |
| \\ | \\ |
| The user can navigate the list using the up & down arrows, PageUp, PageDown, Home, and End keys. The enter key selects an item. The ESC key will exit the menu and return null. This menu library requires the use of an ANSI terminal. By default, this menu library does not display a border around the menu. If you want this library to draw a border around the menu, you can set the borderEnabled property to true. Without a border, the menu gains 2 characters of width and 2 lines of height. Also, a scrollbar can be optionally displayed, which provides a visual indicator for how far the user is through the list of items. The scrollbar is disabled by default. | The user can navigate the list using the up & down arrows, PageUp, PageDown, Home, and End keys. The enter key selects an item. The ESC key will exit the menu and return null. This menu library requires the use of an ANSI terminal. By default, this menu library does not display a border around the menu. If you want this library to draw a border around the menu, you can set the borderEnabled property to true. Without a border, the menu gains 2 characters of width and 2 lines of height. Also, a scrollbar can be optionally displayed, which provides a visual indicator for how far the user is through the list of items. The scrollbar is disabled by default. |
| There is also a property, allowUnselectableItems, which is a boolean that specifies whether or not to allow unselectable items. If that is false (default), then all items will be treated as selectable, including items with their isSelectable property set to false. If you want to have items that are unselectable, you must set the menu's allowUnselectableItems property to true. | There is also a property, allowUnselectableItems, which is a boolean that specifies whether or not to allow unselectable items. If that is false (default), then all items will be treated as selectable, including items with their isSelectable property set to false. If you want to have items that are unselectable, you must set the menu's allowUnselectableItems property to true. |
| |
| dd_lightbar_menu.js provides a class, DDLightbarMenu. To create a new DDLightbarMenu object: new DDLightbarMenu(x, y, width, height); | In addition, if the user's terminal doesn't support ANSI, DDLightbarMenu will still work for the user by simply listing all menu items in 'numbered' mode so that the user can choose an item by entering its corresponding number. This way, you can write JavaScript mods that use DDLightbarMenu that should work for both ANSI and non-ANSI terminals. |
| | |
| | Also, DDLightbarMenu has a property, allowANSI, which can be used to force non-lightbar operation as if ANSI isn't available (for instance, if you want to have a more traditional non-lightbar user interface). allowANSI is true by default, but if you want to force non-lightbar operation, you can set it to false: |
| | lbMenu.allowANSI = false; |
| |
| **DDLightbarMenu methods** | **DDLightbarMenu methods** |
| | callOnItemNavOnStartup | boolean | Whether or not to call OnItemNav() when the menu is initially displayed to get the user's choice. Defaults to false. | | | callOnItemNavOnStartup | boolean | Whether or not to call OnItemNav() when the menu is initially displayed to get the user's choice. Defaults to false. | |
| | allowUnselectableItems | boolean | Whether or not to enable unselectable items. This defaults to false (in which case all items will be treated as selectable, even if their isSelectable property is false). | | | allowUnselectableItems | boolean | Whether or not to enable unselectable items. This defaults to false (in which case all items will be treated as selectable, even if their isSelectable property is false). | |
| | | allowANSI | boolean | Whether or not to allow lightbar operation (which requires ANSI). Defaults to true. If false, DDLightbarMenu will simply list the menu items in 'numbered' mode and prompt the user to choose an item via its corressponding number. | |
| |
| To change the colors used for displaying the items, you can change the values in the colors object within the DDLightbarMenu object. These are the current supported colors (in the 'colors' property of the object): | To change the colors used for displaying the items, you can change the values in the colors object within the DDLightbarMenu object. These are the current supported colors (in the 'colors' property of the object): |
| * Digital Distortion File Lister ([[https://gitlab.synchro.net/main/sbbs/-/blob/master/xtrn/ddfilelister/ddfilelister.js|ddfilelister.js]]): Creating a DDLightbarMenu in the createFileListMenu function (specifies additional keys for quitting out of the menu, item coloring, and replacing the NumItems and GetItem functions); in the createFileLibMenu function; in the createFileDirMenu function | * Digital Distortion File Lister ([[https://gitlab.synchro.net/main/sbbs/-/blob/master/xtrn/ddfilelister/ddfilelister.js|ddfilelister.js]]): Creating a DDLightbarMenu in the createFileListMenu function (specifies additional keys for quitting out of the menu, item coloring, and replacing the NumItems and GetItem functions); in the createFileLibMenu function; in the createFileDirMenu function |
| * Digital Distortion [[https://gitlab.synchro.net/main/sbbs/-/blob/master/xtrn/DDAreaChoosers/DDMsgAreaChooser.js|Message Area Chooser]], [[https://gitlab.synchro.net/main/sbbs/-/blob/master/xtrn/DDAreaChoosers/DDFileAreaChooser.js|File Area Chooser]], and [[https://gitlab.synchro.net/main/sbbs/-/blob/master/xtrn/DDMsgReader/DDMsgReader.js|Message Reader]]: Search for "new DDLightbarMenu" | * Digital Distortion [[https://gitlab.synchro.net/main/sbbs/-/blob/master/xtrn/DDAreaChoosers/DDMsgAreaChooser.js|Message Area Chooser]], [[https://gitlab.synchro.net/main/sbbs/-/blob/master/xtrn/DDAreaChoosers/DDFileAreaChooser.js|File Area Chooser]], and [[https://gitlab.synchro.net/main/sbbs/-/blob/master/xtrn/DDMsgReader/DDMsgReader.js|Message Reader]]: Search for "new DDLightbarMenu" |
| | * Digital Distortion [[https://gitlab.synchro.net/main/sbbs/-/blob/master/xtrn/DDMsgReader/DDMsgReader.js|Message Reader]]: Used for listing messages, changing the message area, and 'indexed' reader mode - including using unselectable items in the indexed reader menu for message group headers |
| |
| ===== See Also ===== | ===== See Also ===== |
