Javascript for customising the user's view of the question bank
- Source:
- Copyright:
- 2021 Catalyst IT Australia Pty Ltd
- License:
- http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
Members
(static, constant) init
Initialize module
Add containers for the drag handles to each column header, then render handles, enable show/hide behaviour, set up drag/drop column sorting, then enable the move and resize modals to be triggered from menu actions.
(inner) currentHeader
To track mouse event on a table header
(inner) currentMin
Minimum size for the column currently being resized.
(inner) currentX
Current mouse x postion, to track mouse event on a table header
(inner) suspendShowHideHandles :boolean
Flag to temporarily prevent move and resize handles from being shown or hidden.
Type:
- boolean
Methods
(inner) addHandleContainers(uiRoot) → {Promise}
Add handle containers for move and resize handles.
Parameters:
| Name | Type | Description |
|---|---|---|
uiRoot |
Element | The root element of the quesiton bank UI. |
Returns:
Resolved after the containers have been added to each column header.
- Type
- Promise
(inner) getMinWidth(header) → {Number}
Find the minimum width for a header, based on the width of its contents.
This is to simulate min-width: min-content;, which doesn't work on Chrome because
min-width is ignored width table-layout: fixed;.
Parameters:
| Name | Type | Description |
|---|---|---|
header |
Element | The table header |
Returns:
The minimum width in pixels
- Type
- Number
(inner) reorderColumns(event)
Event handler for sortable list DROP event.
Find all table cells corresponding to the column of the dropped header, and move them to the new position.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
Event |
(inner) serialiseColumnSizes(uiRoot) → {String}
Serialise the current column sizes.
This finds the current width set in each column header's style property, and returns them encoded as a JSON string.
Parameters:
| Name | Type | Description |
|---|---|---|
uiRoot |
Element | The root element of the quesiton bank UI. |
Returns:
JSON array containing a list of objects with column and width properties.
- Type
- String
(inner) setUpMoveActions(uiRoot)
Event handler for move actions in each column header.
This will listen for a click on any move action, pass the click to the corresponding move handle, causing its modal to be shown.
Parameters:
| Name | Type | Description |
|---|---|---|
uiRoot |
Element | Question bank UI root element. |
(inner) setUpMoveHandles(moveActions)
Render move handles in each container.
This takes a list of the move actions rendered in each column header, and creates a corresponding drag handle for each.
Parameters:
| Name | Type | Description |
|---|---|---|
moveActions |
NodeList | Menu actions for moving columns. |
(inner) setUpResizeActions(uiRoot)
Event handler for resize actions in each column header.
This will listen for a click on any resize action, and activate the corresponding resize modal.
Parameters:
| Name | Type | Description |
|---|---|---|
uiRoot |
Element | Question bank UI root element. |
(inner) setUpResizeHandles(uiRoot)
Render resize handles in each container.
This takes a list of the resize actions rendered in each column header, and creates a corresponding drag handle for each. It also initialises the event handlers for the drag handles and resize modal.
Parameters:
| Name | Type | Description |
|---|---|---|
uiRoot |
Element | Question bank UI root element. |
(inner) setupShowHideHandles(uiRoot)
Event handler for showing and hiding handles when the mouse is over a column header.
Implementing this behaviour using the :hover CSS pseudoclass is not sufficient, as the mouse may move over the neighbouring header while dragging, leading to some odd behaviour. This allows us to suspend the show/hide behaviour while a handle is being dragged, and so keep the active handle visible until the drag is finished.
Parameters:
| Name | Type | Description |
|---|---|---|
uiRoot |
Element | Question bank UI root element. |
(async, inner) showResizeModal(currentHeader, uiRoot) → {Promise.<void>}
Show a modal containing a number input for changing a column width without click-and-drag.
Parameters:
| Name | Type | Description |
|---|---|---|
currentHeader |
Element | The header element that is being resized. |
uiRoot |
Element | The question bank UI root element. |
Returns:
- Type
- Promise.<void>