# new j()
This is the main access point to access app related data and classes
Classes
Members
# (static) app :App
the main application class object
Type:
- See:
# (static, constant) checkMark :string
a html string containing an animated success checkmark
Type:
- string
Example
j.query("div.loading").html(j.checkMark); // will replace the content of the div with the class "loading" with an animated success checkmark
# (static, constant) crossMark :string
a html string containing an animated error crossmark
Type:
- string
Example
j.query("div.loading").html(j.crossMark); // will replace the content of the div with the class "loading" with an animated error crossmark
# (static) currentResetInterval :number
the number of seconds of the current reset timeout (the timeout rises for example in the guidances)
Type:
- number
# (static) lastInteraction :number
this holds the timestamp of the last user interaction (click event)
Type:
- number
# (static, constant) loadingIcon :string
a html string containing a spinning loading circle
Type:
- string
Example
j.query("div.loading").html(j.loadingIcon); // will replace the content of the div with the class "loading" with a loading spinner
# (static) overlayTimeout :int
a reference to the timeout so it can be cancelled
Type:
- int
# (static) resetInterval :number
the number of seconds of the global reset timeout
Type:
- number
# (static) resetIntervalReference :number
a reference to the actual timeout so it can be canceled
Type:
- number
Methods
# (static) addTimeoutIntervalSeconds(val)
Add seconds to the timeout interval. This is used e.g. in guidances where the "next"-button is disabled for a given amount of seconds. So the timeout gets increased by that amount.
Parameters:
Name | Type | Description |
---|---|---|
val |
number | the number of seconds that should be added |
# (static) buttons(leftText, rightText)
Add Buttons to the bottom of the page
By default, the left button is red and the right button is green
Parameters:
Name | Type | Description |
---|---|---|
leftText |
* | text on the left button |
rightText |
* | text for the right button |
Examples
Example 1 - two buttons
await j.buttons("{$back}","{$next}"); // show to buttons at the bottom of the page and wait until they're rendered
j.leftButton().on('click', () => window.history.back()); // on click of the left button, invoke back-event
j.rightButton().on('click', () => j.app.next("some_other_page")); // on click of the right button, go to another page
Example 2 - a single button
await j.buttons("","{$next}"); // leave the left empty, to only render the right (green) button
// no click event for the left button because it doesn't exist and would throw an error
j.rightButton().on('click', () => j.app.next("some_other_page")); // on click of the button, go to another page
// Since the right button is the only one here, it extends to full width instead of being shown only right
# (static) cancelIdleTimeout()
Cancel the idle timeout
# (static) cancelTimeout()
Cancel the timeout
# (static) checkIdle()
Checks for user interactions and triggers a countdown modal to interact or a reload of the page after the countdown
# (static) clearOverlayTimeout()
Clears the overlay timeout
# (static) closeMediaModal() → {Promise}
Closes the media-modal
Returns:
- Type
- Promise
Example
j.closeMediaModal(); // Closes the media-modal
# (static) closeModal(force)
Close the currently open modal
Parameters:
Name | Type | Description |
---|---|---|
force |
boolean | if false, the modal doesn't close when it is not dismissable |
Example
j.query(".customModalButton").on('click', () => j.closeModal(true)); // This closes a currently open modal on click of a specific button
# (static) conCheck() → {Promise}
Checks the ping and if it is offline or slow, a message will be shown on the screen
Returns:
- Type
- Promise
# (static) confirmationModal(question, onConfirm, dismissable, addcontent, hideX) → {Promise}
Renders a Question modal with yes/no buttons
This is the easier way instead of using j.questionModal()
Parameters:
Name | Type | Description |
---|---|---|
question |
string | the question (gets smartified) |
onConfirm |
Callable | This gets executed when yes is clicked |
dismissable |
boolean | see j.modal() |
addcontent |
string | additional html content to render after the title |
hideX |
boolean | wether to hide the Close-Button or not |
Returns:
- Type
- Promise
Example
await j.confirmationModal(
"{$are_you} {$over} 18?",
() => j.app.next("over_18_page")
);
// This renders a modal with the age question and shows two buttons for yes and no.
// By click on the "yes"-button, the onConfirm-Callback is exacuted and the modal is being closed.
# (static) DEBUG()
Go into debug mode and cancel timeouts so the page doesn't accidentally reload when debugging in the console
Example
j.DEBUG(); // This sets the application to a temporary debug mode and cancels currently active timeouts.
# (static) debugModal(data) → {Promise}
Renders a modal showing a JSON encoded string of the data given into the function
Parameters:
Name | Type | Description |
---|---|---|
data |
mixed | the data to show for debugging |
Returns:
- Type
- Promise
Example
await j.debugModal(j.app.temp_data); // shows a modal with the the json-stringified representation of the temp_data object
# (static) deserialize(obj)
This is run by the EnJine to handle back- and forwards-events correctly
Deserialize an old application state
Parameters:
Name | Type | Description |
---|---|---|
obj |
object | the serialized object |
# (static) DPAGE()
Go into debug mode and open the debug page
Example
j.DPAGE(); // Go to the debug page
# (static) error(a, b, c) → {void}
If debug-mode is active, the parameters get passed to console.error(a,b,c)
Parameters:
Name | Type | Description |
---|---|---|
a |
any | Data to pass to the console error function |
b |
any | Data to pass to the console error function |
c |
any | Data to pass to the console error function |
Returns:
- Type
- void
# (static) errorModal(code, msg, exc, hideX) → {Promise}
Renders an error modal by only specifying the error code
Parameters:
Name | Type | Description |
---|---|---|
code |
string | the error code |
msg |
string | undefined | if undefined it renders the default error mapping message, otherwise it renders this string (smartified) |
exc |
Error | an optional error instance to get more data from |
hideX |
boolean | wether to hide the Close-Button or not |
Returns:
- Type
- Promise
Example
await j.errorModal("AE024"); // shows a modal with the error code and the assigned error message from the error-mapping in j.errors.map
# (static) GET(name) → {string|null}
Checks the browser-url for GET-Parameters similar to PHPs $_GET["name"]
Parameters:
Name | Type | Description |
---|---|---|
name |
string | the name of the GET parameter to fetch |
Returns:
the string parameter or null if not set
- Type
- string | null
Example
// Assume the app was opened with ?appointment_id=5
let ap_id = j.GET("appointment_id");
// This will store the value 5 from the URL-GET-Parameter into the "ap_id"-Variable
# (static) getMediaURL(me_id) → {string}
Converts a media id or text identifier to a valid working URL
Parameters:
Name | Type | Description |
---|---|---|
me_id |
number | string | the id of the media object or the unique text identifier |
Returns:
a working url where the media object can be fetched from
- Type
- string
# (static) getValidationMessage(elem) → {Promise.<string>}
Get the validation message of an in-Form element
Parameters:
Name | Type | Description |
---|---|---|
elem |
HTMLElement | the element to check the validation |
Returns:
- Type
- Promise.<string>
# (static) HideLoadingOverlay()
Manually close the loading overlay (and cancel the timeout)
Example
j.HideLoadingOverlay(); // closes the loading-spinner-modal and clears the timeout
# (static) HideLoadingOverlay()
Manually close the loading overlay (and cancel the timeout)
Example
j.HideLoadingOverlay(); // closes the loading-spinner-modal and clears the timeout
# (static) idleReset()
Reset the idle timeout (set the last interaction to now)
Example
j.idleReset(); // This resets the idle timer so the timeout modal doesn't show too soon
# (static) imgModal(me_id) → {Promise}
Renders a modal with an image in it. similar to the media-modal, but the image-modal gets called with an actual URL instead of a media-ID
Parameters:
Name | Type | Description |
---|---|---|
me_id |
string | the media-id |
Returns:
- Type
- Promise
Example
await j.imgModal("/link/to/my/awesome_image.png"); // shows a modal with the referenced image
# (static) infoModal(text, onClose, addContent, hideX) → {Promise}
Open a modal with only an info string an mo buttons
Parameters:
Name | Type | Description |
---|---|---|
text |
string | the info string to show (gets smartified) |
onClose |
Callable | Gets called when the modal is being closed |
addContent |
string | additional html content to render into the modal |
hideX |
boolean | wether to hide the Close-Button or not |
Returns:
- Type
- Promise
Example
await j.infoModal(
"I like trains",
() => alert("choo choo!")
);
// This opens a modal with only the text and an "ok"-button. When dismissed, the callback gets executed.
# (static) init()
this is the j-engine initialization function that initializes all relevant stuff and runs the application
# (static) initErrorModal(code) → {void}
This gets automatically called when an error occurs during the initialization of the app. It will repeatedly try to re-initialize every 10 seconds
Renders an error modal for an error that occured during initialization with constant retry of the init() function
Parameters:
Name | Type | Description |
---|---|---|
code |
string | the error code |
Returns:
- Type
- void
# (static) initEventStream()
This function initializes the SSE stream connection and connects it with the dynamic event library that can handle the events
# (static) initSocket()
This function initializes the web socket connection and connects it with the dynamic event library that can handle the events
# (static) leftButton() → {HTMLButtonElement|null}
Get a reference to the left bottom button
- See:
-
- j#buttons
Returns:
a referencce to the left button or null if the button doesn't exist
- Type
- HTMLButtonElement | null
# (static) loadState() → {Promise}
Saves the current application state including the state-object AND the temp_data from the local storage if it was saved before
Just for debugging purposes
Returns:
- Type
- Promise
Example
j.loadState(); // Saves the last saved application state
# (static) log(a, b, c) → {void}
If debug-mode is active, the parameters get passed to console.log(a,b,c)
Parameters:
Name | Type | Description |
---|---|---|
a |
any | Data to pass to the console log function |
b |
any | Data to pass to the console log function |
c |
any | Data to pass to the console log function |
Returns:
- Type
- void
# (static) mediaModal(me_id) → {Promise}
Renders a modal with an image in it. The image gets referenced by its media-id
Parameters:
Name | Type | Description |
---|---|---|
me_id |
string | the media-id |
Returns:
- Type
- Promise
Example
await j.mediaModal(5); // shows a modal with the 5th media object
# (static) modal(title, content, dismissable, hideX) → {Promise}
Open a modal
Parameters:
Name | Type | Description |
---|---|---|
title |
string | the title of the modal (gets smartified) |
content |
string | the content html of the modal (gets smartified) |
dismissable |
boolean | if true, can be closed with close button or by clicking outside. otherwise can only be force closed vial javascript |
hideX |
boolean | wether to hide the Close-Button or not |
Returns:
- Type
- Promise
Example
Open a custom modal
await j.modal("{$hello} Klaus Peter!","<div>{$some_translation}<br><!-- some comment --> some plain text or html</div>",true);
// This opens a modal with a given title and some html content and because it is set dismissable, it has a close button in the upper right corner
# (static) progressCustomPercentage(percentage)
Sets the percentage of the progress bar
Parameters:
Name | Type | Description |
---|---|---|
percentage |
number | a value between 0 and 100 |
Example
j.progressCustomPercentage(30);
# (static) progressList(pages)
Sets the pages to calculate the progress
Parameters:
Name | Type | Description |
---|---|---|
pages |
Array.<string> | an array of page identifier strings |
Example
j.progressList(["page1","page2","page3"]);
# (static) progressList()
Sets the percentage of the progress bar
Example
j.progressList([]);
# (static) progressList(process_type)
Load the pages for the progress bar
Parameters:
Name | Type | Description |
---|---|---|
process_type |
string | type of the current process |
Example
await j.loadProgress("spontan");
# (static) query(q) → {HTMLElement|null}
Short-hand function for document.querySelector()
Parameters:
Name | Type | Description |
---|---|---|
q |
string | the query string |
Returns:
the queried element
- Type
- HTMLElement | null
Example
j.query("div#myDiv")
// same as:
document.querySelector("div#myDiv")
# (static) queryAll(q) → {NodeList}
Short-hand function for document.querySelectorAll()
Parameters:
Name | Type | Description |
---|---|---|
q |
string | the query string |
Returns:
the queried element list
- Type
- NodeList
Example
j.queryAll("div.awesomeClass")
// same as:
document.querySelectorAll("div.awesomeClass")
# (static) questionModal(question, buttons, dismissable, addcontent, hideX) → {Promise}
Opens a modal with a question and one or multiple buttons
Parameters:
Name | Type | Description |
---|---|---|
question |
string | the question (gets smartified) |
buttons |
Array.<object> | an array with button options (options must contain: icon, text, bgcolor, color, onclick) |
dismissable |
boolean | see j.modal() |
addcontent |
string | additional html content to render after the title |
hideX |
boolean | wether to hide the Close-Button or not |
Returns:
- Type
- Promise
Example
Example with to buttons
await j.questionModal("{$how_old_are_you}",[
{
icon: "arrow-down", // <-- this will take the fontawesome icon fa-arrow-down
text: "{$i_am} {$under} 18", // <-- The text of the button
bgcolor: "#B71427", // <-- the color of the button (any css-compatible color like "red", "#ccc", "rgb(0,0,0)")
color: "#fff", // <-- the color of the text on the button
onclick: () => j.closeModal(true) // <-- a callback for when the button is clicked ( can also be an async function )
},
{
icon: "arrow-up",
text: "{$i_am} {$over} 18",
bgcolor: "#458B00",
color: "#fff",
onclick: () => {
j.app.next("over_18_page");
j.closeModal(true);
}
},
],false);
// This will open a modal with to buttons and ask if the user is under or over 18.
// There is no Close-button in the upper right corner, so the modal can only be closed by one of the two buttons
# (static) reload(boolean)
This function switches to the starting page and then triggers a reload of the browser window.
Parameters:
Name | Type | Description |
---|---|---|
boolean |
hard if true, clear the cache before reloading |
Example
j.reload(); // This reloads the app and resets it to its initial state
# (static) reportError(e) → {void}
Report an error to the JAMES API
Parameters:
Name | Type | Description |
---|---|---|
e |
Error | the error |
Returns:
- Type
- void
# (static) reportValidity(form) → {Promise}
Validate a form and output translated validation messages to the native validation output
Parameters:
Name | Type | Description |
---|---|---|
form |
HTMLFormElement | the html form |
Returns:
- Type
- Promise
# (static) reset()
This function resets the app: it clears the state, serialized_data, temp_data and resets the language to the default, then does to the starting-page
Example
j.reset(); // resets the app to its initial state.
# (static) resetTimeoutIntervalSeconds()
This resets the current timeout
# (static) rightButton() → {HTMLButtonElement|null}
Get a reference to the right bottom button
- See:
-
- j#buttons
Returns:
a referencce to the right button or null if the button doesn't exist
- Type
- HTMLButtonElement | null
# (static) saveState() → {Promise}
Saves the current application state including the state-object AND the temp_data into the local storage
Just for debugging purposes
Returns:
- Type
- Promise
Example
j.saveState(); // Saves the current application state
# (static) scrollToTop()
This resets the scroll position to the top of the page
Example
j.scrollToTop();
# (static) serialize() → {object}
This is run by the EnJine to handle back- and forwards-events correctly
Serialize the current application state
Returns:
the serialized object
- Type
- object
# (static) setTimeoutIntervalSeconds(val)
Set the timeout interval in seconds
Parameters:
Name | Type | Description |
---|---|---|
val |
number | the number of seconds the timeout should wait |
# (static) ShowLoadingOverlay()
Show a loading overlay with a spinning icon (if this doesn't close within 30 seconds, the application switches to an error page in case of an api timeout)
If there is already a timeout, it gets reset and counts 30 seconds from now on.
Example
j.ShowLoadingOverlay() // opens a modal with a spinning loading icon
// if it is not closed within 30 seconds, it will switch to an error page and then reset the app
# (static) smartify(text, lang) → {Promise.<string>}
This function is used to translate a string or a complete template string with smarty conversions over the JAMES translation API
Parameters:
Name | Type | Description |
---|---|---|
text |
string | the text to translate or smartify |
lang |
string | undefined | the target language code of the language (if not set, checks the currently active app language or the default language) |
Returns:
resolves to the translated string
- Type
- Promise.<string>
Example
j.smartify("{$hello} Klaus Peter!") // This will run the smarty parser on the string with the currently active language
# (static) subtitle(str)
Sets the subtitle of the current page
Parameters:
Name | Type | Description |
---|---|---|
str |
stirng | the title string |
Example
j.subtitle("hello world!");
# (static) subtitleCustomHeight(str)
Set a custom height for the subtitle element
Parameters:
Name | Type | Description |
---|---|---|
str |
string | a css string like "50px" or "3em" |
# (static) translate(key, lang) → {Promise.<string>}
This function is used to translate a single phrase over the JAMES translations API
Parameters:
Name | Type | Description |
---|---|---|
key |
string | the phrase key to translate |
lang |
string | the language code of the language |
Returns:
resolves to the translated string or to a "fixme: {phraseKey}"
- Type
- Promise.<string>
Examples
let hello_str = await j.translate("hello"); // This translates "hello" to the currently active language
let hello_en = await j.translate("hello","en"); // This translates "hello" to englich