MFScreenHelp

This is a simplified app help system allowing help content to be added using HTML into the app folders and then the help system presents them in a right-side slideout panel that can show the specific help page, as well as navigate to any of the others through next/prev buttons at the base of the help, and through a dropdown content tree at the top of the panel.

The widget also provides a simplified search that will scan all the help files for the words, and returned a weighted list of results.

Including the widget

html

<link rel='stylesheet preload prefetch' as='style'
      href='https://methodfish.com/Download/MFScreenHelp/files/latest/css/mf-screenhelp.css'>
<script src='https://methodfish.com/Download/MFScreenHelp/files/latest/js/mf-screenhelp.js'></script>

Then create a help folder in your public_html and place simplified html files named help-.....html into this folder using the format:

html ::  help-<name>.html

<container data-rounded=""
           data-menus=""
           data-click=""
>
<h1>Lorem Ipsum</h1>
<p>Delor....</p>
....
</container>

Then create a file named _section-list.html in the same folder, containing a simple CSV of the filenames in the order you want, e.g. help-getting_started, help-formatting etc.

Triggers via a help button

Add your help button, and then set up the click event:

js

document.querySelector('#helpBtn').addEventListener('click',   () => {
    _mfScreenHelp.setAppTitle('my App'); // Tells the class to replace any %appTitle% in the help- files with the given name
    _mfScreenHelp.setCurrentHelpPage('getting-started');
    _mfScreenHelp.showHelp();
});

Simplified help.html

This class will take a standard set of help content using simplified html encouraging developers to provide help without having to mess with the ins and outs of wiring files together.

Prev-Next

The class allows a set of help files to be chained together in an ordered way, with a prev/next button framework that includes jumping to any of the help files directly.

First Usage

Along with presenting help on demand, the core idea of the class is to present a first-usage help for users, automatically pushing a help page in front of the user when this is the first time the user visits it, with a checkbox for the user to tick to stop seeing the help each time they visit.

Formatting

The class will attempt to simplify the necessary html to generate readable technical documentation, supporting additional formatting markup with very little additional html encoding, including rounded style, Menu styling, drop down list boxes, buttons and material-icons

Headlines

Additionally, the help files headlines (h1 and h2) are placed into a quick access menu available on mouseover on the top of the screenhelp slideout, with jump links to other help files alongside. The loaded file will have the headings listed based on the loaded help file, the other files around it will be based on the _section-list.html that the developer must maintain alongside the html.

Search

The help class will also provide a simplistic text search from the top of the help slideout and will search all files for a normalized variant of the text using the _section-list.html as the list of files it will check through - resulting in an ordered list of best match based on the text (but note this is not google page rank).

Slide shows

The class will also allow the inclusion of animated gifs (in addition to static images), in the form of slides with timed overlays allowing the developer to say that text should appear and disappear x number of seconds during the display of an animated gif.