j

j

# new j()

This is the main access point to access app related data and classes

Classes

auth
auth
errors
keyboard
phone
sock
store
stream

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