Page State Helper for client side websites

Utility hooks to help organize a site's client-side state, and easily change the view according to state through html data attributes. Conceptually combines ideas from Bootstrap & Redux.

See published npm package

Import:

• Web: <script src="https://unpkg.com/page_state/build/bundle.min.js"></script>
• Node: npm i web_page_state

How to use?

- HTML

| Attribute | Note | Example | |---------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | data-ws-show-if | Show element if ANY (ie OR) of the state props specified in the attribute (space separated) is true, otherwise set 'display' style to 'none'. To achieve AND simply nest elements. | - Simple: <button data-ws-show-if="isSignedIn">Sign Out</button> - OR: <div data-ws-show-if="isIOS isAndroid">You are on iOS OR Android</div> - AND: <div data-ws-show-if="isSignedIn"><p data-ws-show-if="isIOS"><Welcome user on iOS</p></div> | | data-ws-show-if-not | Show element if ANY (ie OR) of the NEGATED state props specified in the attribute (space separated) is true, otherwise set 'display' style to 'none' | <button data-ws-show-if-not="isSignedIn">Sign In</button> | | data-ws-label | Replaces the element's innerText with the prop's value | <p>Welcome <span data-ws-label="user.name"></span></p> |

- js

| Property | Type | Description | |---------------------------|----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | pageState | Object | Holds the raw state. | | updatePageStateWithParams | Function | Examples: updatePageStateWithParams({countryName: "Brazil"}) | | toastNotification | Function | Example: toastNotification("Copied", "Successfully copied to clipboard", false, false); | | dismissNotification | Function | Remove previously toasted notification | | setUser | Function | Examples:- On sign in: setUser({name: "Ronen", uid: "987dkjbc987"}); - On sign out: setUser(null); | | getParam | Function | getParam("user.uid"); | | toggleParam | Function | toggleParam("isFullScreen"); | | registerListener | Function | Returns the index / id as number of the new listener. This index can be used to remove the listener. Example: let index = PageState.registerListener(function(newState){/* do something */}); PageState.unregisterListener(index); | | unregisterListener | Function | Use the index generated when 'registered'. Example: let index = PageState.registerListener(function(newState){/* do something */}); PageState.unregisterListener(index); |

- State's special keys - do not set directly

// TODO: Prohibit direct setting by mistake?

| Key | Type | |-------------------|-------------------------------------------------------| | user | Object, set with setUser | | isNotification | boolean, semi-automatic: based on 'toastNotification' | | | notificationTitle | boolean, semi-automatic: based on 'toastNotification' | | notificationMsg | boolean, semi-automatic: based on 'toastNotification' | | platform | String, automatic | | isMobile | boolean, automatic | | | isIOS | boolean, automatic | | | isAndroid | boolean, automatic | | | isOffline | boolean, automatic | | isSignedIn | boolean, semi-automatic: based on 'user' |

How to use?

When used in browser:

Place the following at the end of the body tag, and prior to using the wsGlobals.PageState.updateStateWithProps

<script src="https://unpkg.com/page_state/build/bundle.min.js"></script>

No need to initialize - it is initialized in code.

When used in a webpack / other node client-side webpage builder:

Use import or require... // TODO: Do we need to initialize? Check...

Showcases

This is used on the following sites:

• Speechnotes - Lightweight Speech Recognizing Notepad
• TTSReader - Online Text To Speech Reader

TODOs:

• In data-ws-show-if-not we let the function - if exists - override the property, which is inconsistent with the non-negated data-ws-show-if...
• Prohibit direct setting of reserved props / functions by mistake?
• Set/get style to the element's html set style prior to setting it to "none"

How to contribute & publish updates to this package?

• This package is published both on GitHub and on npmjs.
• To publish an updated version - simply run npm publish, it will commit & push updates both to github and npm.