Post_Cat_Functionality-Tool
Function library that appends event listeners and/or Mutation Observers for the Post CAT Tool
Table of Contents
Description
This is a npm package that exports a function that is used to attach event listeners to react components after they mount. This is used to supersede a needed parent child relation that is needed for functionality and allow you to have functionality at a sibling level. This was developed for the Commission on POST Learning Training Resources CAT Tool.
Back To Top
Technologies
Back To Top
How To Use
Installation
npm i post-cat-functionality-tool
Back To Top
Pre-Steps
In order to use this npm package there are a few pre-steps that need to be done first.
- Ensure that the component that you are attaching the event listener to as well as the component that the event listener will be affecting all have ids attached to them. This will allow the functionality selector to find the elements through the dom.
- If you have any video/audio content ensure that it is displayed using the azure media player and that it is wrapped in a div. The div must have an id attached to it and the video tag itself must have the same id with a "-vid" attached to it. This is because the different functionality will be attached to wither the div or the video depending on what type of event you want the functionality to trigger on. It might also be able to work on normal video tags that follow this format but this has not been tested.
Back To Top
Usage
After the pre-steps are done, this function is easy to call. Import the FunctionalitySelector method and the IFuncParams interface into your component. Then within the componentDidMount function of react, call the FunctionalitySelector with the appropriate parameters.
Example to toggle the visibility of a element when you click on the main element :
let compId = "example-1"
const funcInfo : IFuncParams[] = [
{
type: "click",
func: "showHide",
funcData: [{
id: "example-2"
}]
}
]
componentDidMount() {
FunctionalitySelector(compId, "Any Component type" funcinfo, true)
}
In order to see more examples and detailed information on what interfaces you should use for each function. Check out the wiki!
Back To Top
