codeworksdev / mochi

Front-end framework for developing responsive, mobile first projects on the web or offline.

Mochi

Front-end framework for developing responsive, mobile first projects on the web or offline.

v1.6.2

Mochi is a ready-to-deploy HTML5 boilerplate framework that runs on Bootstrap, but adds tons of new features, with a strong focus on offline web applications without all the limitations. It achieves this goal by fully integrating and maintaining offline versions of popular libraries that have been out in the wild for years.

What is Bootstrap?

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with powerful Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery. Mochi takes this a few steps further by enabling functionality that would normally require many hours of code writing and head-scratching. More information on Bootstrap here.

Usage

To use Mochi, simply download the latest distribution package and extract the contents of the included dist folder to the root of your website directory (e.g., /var/www/html in some systems). That's it! You now have a fully functioning, Bootstrap-powered boilerplate web application framework installed on your website. Mochi is designed to run either online or offline, depending on your desired configuration (more on that later).

The included HTML starter template (dist/index.html) is a great way to get started with using Mochi. Because it's powered by Bootstrap you can do a bunch of things right out of the box, and with minimal effort. Check out the official Bootstrap documentation to learn more about how to structure your HTML/CSS markup according to the latest web standards.

What's Included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations for all libraries. You'll see something like this:

dist/
├── bootstrap/
│   ├── css/
│   │   ├── bootstrap.css
│   │   ├── bootstrap.min.css
│   │   ├── bootstrap-grid.css
│   │   ├── bootstrap-grid.min.css
│   │   ├── bootstrap-reboot.css
│   │   └── bootstrap-reboot.min.css
│   │
│   └── js/
│       ├── bootstrap.bundle.js
│       ├── bootstrap.bundle.min.js
│       ├── bootstrap.js
│       └── bootstrap.min.js
│
├── frontend/
│   ├── css/
│   │   ├── print.css
│   │   └── style.css
│   │
│   ├── img/
│   │   └── brand/
│   │       ├── launcher-icon-1x.pmg
│   │       └── launcher-icon-4x.pmg
│   │
│   ├── js/
│   │   └── onload.js
│   │
│   └── less/
│       ├── _2dppx_375up.less
│       ├── _2dppx_425up.less
│       ├── _2dppx_480up.less
│       ├── _2dppx_576up.less
│       ├── _2dppx_640up.less
│       ├── _2dppx_750up.less
│       ├── _2dppx_768up.less
│       ├── _2dppx_970up.less
│       ├── _2dppx_992up.less
│       ├── _2dppx_1020up.less
│       ├── _2dppx_1024up.less
│       ├── _2dppx_1170up.less
│       ├── _2dppx_1200up.less
│       ├── _2dppx_1440up.less
│       ├── _2dppx_1560up.less
│       ├── _2dppx_1920up.less
│       ├── _2dppx_2560up.less
│       ├── _2dppx_base.less
│       ├── _375up.less
│       ├── _425up.less
│       ├── _480up.less
│       ├── _576up.less
│       ├── _640up.less
│       ├── _750up.less
│       ├── _768up.less
│       ├── _970up.less
│       ├── _992up.less
│       ├── _1020up.less
│       ├── _1024up.less
│       ├── _1170up.less
│       ├── _1200up.less
│       ├── _1440up.less
│       ├── _1560up.less
│       ├── _1920up.less
│       ├── _2560up.less
│       ├── _base.less
│       ├── _mixins.less
│       ├── _notouch.less
│       ├── _print.less
│       ├── print.less
│       └── style.less
│
├── mochi/
│   ├── css/
│   │   └── helpers/
│   │       └── animate.less/
│   │           └── dist/
│   │               ├── css/
│   │               │   └── animate.css
│   │               │
│   │               └── less/
│   │                   ├── _mixins.less
│   │                   ├── _options.less
│   │                   └── animate.less
│   │
│   ├── js/
│   │   ├── helpers/
│   │   │   ├── font-awesome-free/
│   │   │   │   └── js/
│   │   │   │       └── all.min.js
│   │   │   │
│   │   │   ├── iScroll/
│   │   │   │   └── build/
│   │   │   │       ├── iscroll.js
│   │   │   │       ├── iscroll.min.js
│   │   │   │       ├── iscroll-infinite.js
│   │   │   │       ├── iscroll-infinite.min.js
│   │   │   │       ├── iscroll-lite.js
│   │   │   │       ├── iscroll-lite.min.js
│   │   │   │       ├── iscroll-probe.js
│   │   │   │       ├── iscroll-probe.min.js
│   │   │   │       ├── iscroll-zoom.js
│   │   │   │       └── iscroll-zoom.min.js
│   │   │   │
│   │   │   ├── ViewerJS/
│   │   │   │   ├── images/
│   │   │   │   │   ├── kogmbh.png
│   │   │   │   │   ├── nlnet.png
│   │   │   │   │   ├── texture.png
│   │   │   │   │   ├── toolbarButton-download.png
│   │   │   │   │   ├── toolbarButton-fullscreen.png
│   │   │   │   │   ├── toolbarButton-menuArrows.png
│   │   │   │   │   ├── toolbarButton-pageDown.png
│   │   │   │   │   ├── toolbarButton-pageUp.png
│   │   │   │   │   ├── toolbarButton-presentation.png
│   │   │   │   │   ├── toolbarButton-zoomIn.png
│   │   │   │   │   └── toolbarButton-zoomOut.png
│   │   │   │   │
│   │   │   │   ├── tools/
│   │   │   │   │   └── replaceByFileContents.js
│   │   │   │   │
│   │   │   │   ├── example.local.css
│   │   │   │   ├── HeaderCompiled.html
│   │   │   │   ├── HeaderCompiled.js
│   │   │   │   ├── index.html
│   │   │   │   ├── index-template.html
│   │   │   │   ├── ODFViewerPlugin.css
│   │   │   │   ├── ODFViewerPlugin.js
│   │   │   │   ├── PDFViewerPlugin.css
│   │   │   │   ├── PDFViewerPlugin.js
│   │   │   │   ├── PluginLoader.js
│   │   │   │   ├── viewer.css
│   │   │   │   ├── viewer.js
│   │   │   │   └── viewerTouch.css
│   │   │   │
│   │   │   ├── basil.min.js
│   │   │   ├── Chart.bundle.min.js
│   │   │   ├── clipboard.min.js
│   │   │   ├── holder.min.js
│   │   │   ├── jquery.canvasjs.min.js
│   │   │   ├── modernizr-custom.js
│   │   │   ├── popper.min.js
│   │   │   ├── sprintf.min.js
│   │   │   └── underscore-min.js
│   │   │   ├── underscore.string.min.js
│   │   │
│   │   ├── jquery/
│   │   │   ├── ui/
│   │   │   │   ├── images/
│   │   │   │   │   ├── ui-icons_444444_256x240.png
│   │   │   │   │   ├── ui-icons_555555_256x240.png
│   │   │   │   │   ├── ui-icons_777620_256x240.png
│   │   │   │   │   ├── ui-icons_777777_256x240.png
│   │   │   │   │   ├── ui-icons_cc0000_256x240.png
│   │   │   │   │   └── ui-icons_ffffff_256x240.png
│   │   │   │   │
│   │   │   │   ├── jquery-ui.css
│   │   │   │   ├── jquery-ui.js
│   │   │   │   ├── jquery-ui.min.css
│   │   │   │   ├── jquery-ui.min.js
│   │   │   │   ├── jquery-ui.structure.css
│   │   │   │   ├── jquery-ui.structure.min.css
│   │   │   │   ├── jquery-ui.theme.css
│   │   │   │   └── jquery-ui.theme.min.css
│   │   │   │
│   │   │   └── jquery.min.js
│   │   │
│   │   ├── plugins/
│   │   │   ├── dialog/
│   │   │   │   └── dist/
│   │   │   │       ├── dialog.js
│   │   │   │       └── dialog.min.js
│   │   │   │
│   │   │   └── veeva/
│   │   │       └── dist/
│   │   │           ├── veeva.js
│   │   │           ├── veeva-library.js
│   │   │           ├── veeva-library.min.js
│   │   │           └── veeva.min.js
│   │   │
│   │   ├── libraries.js
│   │   ├── mochi.js
│   │   └── mochi.min.js
│   │
│   └── less/
│       ├── _2dppx_375up.less
│       ├── _2dppx_425up.less
│       ├── _2dppx_480up.less
│       ├── _2dppx_576up.less
│       ├── _2dppx_640up.less
│       ├── _2dppx_750up.less
│       ├── _2dppx_768up.less
│       ├── _2dppx_970up.less
│       ├── _2dppx_992up.less
│       ├── _2dppx_1020up.less
│       ├── _2dppx_1024up.less
│       ├── _2dppx_1170up.less
│       ├── _2dppx_1200up.less
│       ├── _2dppx_1440up.less
│       ├── _2dppx_1560up.less
│       ├── _2dppx_1920up.less
│       ├── _2dppx_2560up.less
│       ├── _2dppx_base.less
│       ├── _375up.less
│       ├── _425up.less
│       ├── _480up.less
│       ├── _576up.less
│       ├── _640up.less
│       ├── _750up.less
│       ├── _768up.less
│       ├── _970up.less
│       ├── _992up.less
│       ├── _1020up.less
│       ├── _1024up.less
│       ├── _1170up.less
│       ├── _1200up.less
│       ├── _1440up.less
│       ├── _1560up.less
│       ├── _1920up.less
│       ├── _2560up.less
│       ├── _base.less
│       ├── _mixins.less
│       ├── _notouch.less
│       └── _print.less
│
├── .htaccess
├── index.html
├── manifest.json
├── offline.html
├── project.appcache
├── robots.txt
└── sw.js

---

Included Libraries

One of the major advantages of using Mochi is that it comes packed with many useful 3rd-party libraries to help you develop your application rapidly, and with less effort than would be necessary with just the standard Bootstrap distribution. The following 3rd-party libraries are included with our standard distribution package:

Library	Version	Developer Website
Animate.less	2.0	http://animateforless.com/
Basil.js	0.4.10	https://wisembly.github.io/basil.js/
Bootstrap	4.3	https://getbootstrap.com/
CanvasJS	2.3.1	https://canvasjs.com/
Chart.js	2.7.3	https://www.chartjs.org/
Clipboard.js	2.0.4	https://clipboardjs.com/
Font Awesome	5.7.1	https://fontawesome.com/
Holder.js	2.9.6	http://holderjs.com/
iScroll	5.2	https://github.com/cubiq/iscroll
jQuery	3.3.1	http://jquery.com/
jQuery UI	1.12.1	https://jqueryui.com/
Modernizr	3.6	https://modernizr.com/
Popper.js	1.14.7	https://popper.js.org/
sprintf-js	1.1.2	https://www.npmjs.com/package/sprintf-js
Underscore.js	1.9.1	http://underscorejs.org/
Underscore.string	3.3.5	http://gabceb.github.io/underscore.string.site/
ViewerJS	0.5.9	http://viewerjs.org/

---

Less.js CSS Preprocessor Support

Mochi makes heavy use of Less.js to allow you to rapidly construct your CSS stylesheets within the many predefined media queries supported by our standard distribution package.

What is Less.js?

Less.js is a CSS preprocessor that extends the CSS language, adding features that introduce variables, mixins, functions, and many other techniques commonly found in popular scripting languages. This allows you to make CSS that is more maintainable, themable and extendable.

Less.js runs inside Node, in the browser and inside Rhino. There are also many 3rd-party tools available that allow you to compile your files and watch for changes. The latter is the way to go if you want to get up and running quickly.

Predefined Media Queries

Predefined CSS media queries are defined in the folder dist/frontend/less. Each media query is assigned a dedicated Less import file for better organization, and of course, they're all completely optional. As a bonus, we've also included retina display (192dpi) media queries to compliment the standard (96dpi) media queries.

96dpi (1dppx), 192dpi (2dppx)	Typical Device	File (96dpi)	File (192dpi)
< 375px (base)	Phone (legacy)	_base.less	_2dppx_base.less
>= 375px	Phone (legacy)	_375up.less	_2dppx_375up.less
>= 425px	Phone (large)	_425up.less	_2dppx_425up.less
>= 480px	Phone (large), Tablet (small)	_480up.less	_2dppx_480up.less
>= 576px	Phone (large), Tablet (small)	_576up.less	_2dppx_576up.less
>= 750px	Tablet (small)	_750up.less	_2dppx_750up.less
>= 768px	Tablet (small)	_768up.less	_2dppx_768up.less
>= 970px	Tablet (medium)	_970up.less	_2dppx_970up.less
>= 992px	Tablet (medium)	_992up.less	_2dppx_992up.less
>= 1020px	Tablet (large)	_1020up.less	_2dppx_1020up.less
>= 1024px	Tablet (large)	_1024up.less	_2dppx_1024up.less
>= 1170px	Desktop/Laptop/Tablet	_1170up.less	_2dppx_1170up.less
>= 1200px	Desktop/Laptop/Tablet	_1200up.less	_2dppx_1200up.less
>= 1440px	Desktop/Laptop (HD)	_1440up.less	_2dppx_1440up.less
>= 1560px	Desktop (HD)	_1560up.less	_2dppx_1560up.less
>= 1920px	Desktop (HD)	_1920up.less	_2dppx_1920up.less
>= 2560px	Desktop (2K)	_2560up.less	_2dppx_2560up.less

Special Less Imports

In addition to the media breakpoints listed above, the following import files are also included:

File	Description
_base.less	Defines base styles for all media queries (i.e., all devices).
_print.less	Used for printed media. Imports Bootstrap CSS.
_notouch.less	Used for non-touch enabled devices (e.g., desktops).
_mixins.less	Define your own global Less mixins, variables, and styles.
print.less	Generates CSS file for printed media.
style.less	Generates CSS file for all media types other than print.

Note: When importing the folder dist/frontend/less into your Less.js compiler please make sure only the print.less and style.less files are compiled to CSS, and not the files prefixed with an underscore.

Predefined Mixins

Some useful Less mixins are included to help streamline development of CSS in your project. We recommend having a look at dist/mochi/less/_mixins.less to see what's included in our standard distribution package.

Note: We've included an empty mixins file at dist/frontend/_mixins.less. If you'd like to define your own mixins in your project, we strongly recommend editing this empty file instead of the predefined mixins file inside the dist/mochi folder.

Animate.less

Animate.less is a powerful CSS animations framework for animating HTML elements in a script-less format. Mochi automatically imports this library into your project, allowing you to take full advantage of the many predefined animations already included. You can even build your own animations with this framework! More information here.

---

Caching System

Mochi includes a fully functional Service Worker (in dist/sw.js) for developing high-performance websites and offline apps, complete with push notifications and automated updates. It's disabled by default, but you can easily enable it using the Mochi API. More information about the standard Service Worker API here.

Note: The (now deprecated) HTML5 application cache is still supported (in dist/project.appcache), but we strongly discourage using it, since it has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Be aware that this feature may cease to work at any time.

---

Apache Server Configs

This .htaccess file (in dist/.htaccess) is a collection of boilerplate configurations that can help your server improve your website's performance and security, while also ensuring that resources are served with the correct content-type and are accessible, if needed, even cross-domain. More information here.

Note: You can delete this file without issue if it doesn't apply to your server or project requirements.

---

API

Starter Template

Mochi includes a simple JavaScript starter template (in dist/frontend/js/onload.js) to help you tie everything together and get started on your project right away without worrying about how to activate/deactivate components. Continue reading below to get familiar with the how the Mochi API can accelerate your app.

Persistent Mochi Instance

First things first! After your web page is loaded and rendered, the Mochi instance will register itself as a regular JavaScript global variable called $m. This variable is defined within the window scope, making it accessible by your entire application. The persistent Mochi instance contains the following components:

Methods	Hooks	Options	Properties
do	mochi_before	CLICK_NAME	__body
extend	mochi_init	DEBUG_MODE	__container
getDefaultOption	mochi_load	ENABLE_SERVICE_WORKER	__content
getOnClickName	mochi_load_page	LAZY_LOAD_PLUGINS	__head
getOption	mochi_load_page{N}	SW_UPDATE_NOTIFICATIONS	__href
getPage	mochi_load_view	SW_UPDATE_NOTIFICATIONS_OPTIONS	__html
getState	mochi_load_view{N}	SW_VERBOSE_SYNCING	__observer
getView	mochi_unload	SW_VERBOSE_SYNCING_OPTIONS	__page_name
isSimpleObj	mochi_unload_page
load	mochi_unload_page{N}
loadPage	mochi_unload_page
loadView	mochi_unload_page{N}
log	mochi_unload_view
onClick	mochi_unload_view{N}
sanitizeTitle	mochi_last
setOnClickName	mochi_onchange
setOption	mochi_onmutation
setPage
setState
setView
unload
unloadPage
unloadView
widgetOnDownloading
widgetOnUpdateReady

Methods

$m.do()

Mochi $m.do( array|string name [, array arguments] )

Calls one or more predefined functions by name, in which this is assigned $m (persistent Mochi instance), and the optional list of arguments are passed as an array to each. If name is an array, assumes a list of function names to be called, in the order given. Each function must be a valid Function type. Each function must be defined within the window object scope. Any undefined functions are skipped without error. This method works similar to Function.prototype.apply(), but with the added logic.

$m.extend()

Mochi $m.extend( string namespace, Function.name instance [, object meta][, function callback] )

Extends $m (persistent Mochi instance) by creating a new instance of a user-defined function (i.e., an object type that has a constructor function), and storing that instance as an object key referenced by namespace under $m (e.g., $m.somethingcool). The optional callback function is executed immediately after, with this assigned as a reference of instance in namespace. Additionally, you can pass a meta object as the first parameter to the instance and callback functions. If no meta is provided, assumes an empty object.

Note: This method is especially useful for plugin development.

$m.getDefaultOption()

mixed $m.getDefaultOption( string name )

Shorthand for $m.getOption(name, true).

$m.getOption()

mixed $m.getOption( string name[, bool default] )

Returns the value of the requested option by name (case-sensitive). If default is true, returns the default value of the option instead, as defined by the framework. If the requested option is a Function type, gets the return value of that function, undefined otherwise. If the return value is a simple object type, returns a deep copy of that object.

$m.getOnClickName()

string $m.getOnClickName()

Returns the current value of the CLICK_NAME option. Additionally, if CLICK_NAME is currently set to "auto", returns the touchstart event name for touch-enabled devices, and click for all other device types.

$m.getPage()

number $m.getPage( [number padding] )

Shorthand for $m.getState('page', padding). Returns the value of the data-page attribute in <html> for the active HTML document. Assumes 0 (zero) if data-page is undefined or not numeric. If padding is given, zero-pads the returned number by that amount. By default, 0 (zero) is returned with the given padding.

$m.getState()

number $m.getState( string page|view [, number padding] )

Returns the value of either the data-page or data-view attribute in <html> for the active HTML document. Assumes 0 (zero) if the attribute is undefined or not numeric. If padding is given, zero-pads the returned number by that amount. By default, 0 (zero) is returned with the given padding.

$m.getView()

number $m.getView( [number padding] )

Shorthand for $m.getState('view', padding). Returns the value of the data-view attribute in <html> for the active HTML document. Assumes 0 (zero) if data-view is undefined or not numeric. If padding is given, zero-pads the returned number by that amount. By default, 0 (zero) is returned with the given padding.

$m.isSimpleObj()

bool $m.isSimpleObj( mixed value )

Checks whether the given value (value) is a simple JavaScript Object type (i.e., not an Array or Function object type). Uses the _.isObject() Underscore.js function, but with the stricter type checking.

$m.load()

Mochi $m.load( string page|view, number number[, object meta] )

Calls a series of hooks based on either the "page" or "view" string, and number given. For example, $m.load("page", 1.5) implies the data-page attribute in <html> for the active HTML document must be changed to 1.5, but only if data-page isn't already set to 1.5. If a meta object is given, passes that object as the first parameter for each called hook, with this assigned as a reference to $m (persistent Mochi instance).

FOR EXAMPLE To call all page 1.5 "loading" hooks in the active HTML document, you can do:

$m.load("page", 1.5, {key1 : value1, key2 : value2});

Which would execute the following hooks (in order):

mochi_load()          // Generic loading hook
mochi_load_page()     // Generic page loading hook
mochi_load_page1_5()  // Dedicated loading hook for page 1.5
mochi_onchange()      // After everything else completes

Note: Each hook receives a default meta object of key/value pairs as the first parameter, with this assigned as a reference to $m (persistent Mochi instance). If the optional meta object is given as the 3rd parameter, merges it with this default object, ensuring each property listed below is not overridden. See below for a list of mandatory properties in the default meta object.

DEFAULT META OBJECT

property	type	description
caller	string	Name of function or constructor that called this method (e.g., "loadPage").
newStateNumber	number	New state number, if provided. Otherwise, uses current/unchanged state number.
oldStateNumber	number	Previous state number, if provided. Otherwise, uses unchanged state number.
stateName	string	The state name in this call (either "page" or "view").

$m.loadPage()

Mochi $m.loadPage( number number )

Shorthand for $m.load("page", number).

$m.loadView()

Mochi $m.loadView( number number )

Shorthand for $m.load("view", number).

$m.log()

Mochi $m.log( string message[, bool condition] )

Outputs an informational message to the Web Console, but only if the given condition is true. If a condition is not provided, outputs the message if the DEBUG_MODE option evaluates to true.

$m.onClick()

jQuery $m.onClick( mixed target[, _object eventData][, function handler] )

Like jQuery.on(), but automatically determines the event name to bind to the target (which could either be a CSS selector string, HTML element, or jQuery object type). The event name is chosen from the return value of $m.getOnClickName(). handler is a function to be executed when the event is triggered, receiving the Event object as the first parameter. If no handler is given, assumes false, which is shorthand for a function that simply does return false. If eventData is provided, it is passed to the handler in event.data when the event is triggered.

$m.sanitizeTitle()

string $m.sanitizeTitle( string string[, string delimiter][, string fallback] )

Sanitizes the given string. Specifically, string is converted to lowercase, with all non-alphanumeric characters replaced with a delimiter. If no delimiter is given, uses the hyphen character (-). If delimiter is non-alphanumeric, all duplicate delimiters are removed (e.g., my--sanitized---string becomes my-sanitized-string). If delimiter is an empty string, no delimiter is used. Additionally, if the optional fallback string is given, uses that string, but only if the sanitized string is empty. If fallback is given, it's also sanitized before being returned.

$m.setOnClickName()

Mochi $m.setOnClickName( string eventName )

Changes the value of the CLICK_NAME option to the eventName given. eventName must be an alphanumeric string. Otherwise, no changes are applied.

$m.setOption()

Mochi $m.setOption( string|object option[, mixed value] )

If option is a string, assigns value to that option. If no value is given, assumes undefined. Otherwise, if option is a simple object type, assumes a list of options to set, with each key/value pair treated as an individual option/value assignment. Additionally, if value is a simple object type, recursively sets each key/value pair in the option, but only if option is also a simple object type. In this case, each key/value in value is checked to make sure it's supported by the option (i.e., if the key exists as a property in option). Any unsupported (non-existent) keys are simply ignored, with no errors produced.

$m.setPage()

Mochi $m.setPage( number number[, function callback] )

Shorthand for $m.setState("page", number).

$m.setState()

Mochi $m.setState( string page|view, number number[, function callback] )

Sets the value of either the data-page or data-view attribute in <html> for the active HTML document with the given number, but only if the target attribute isn't already set with the same number. For example, $m.setState("page", 1.5) would imply that the value of the data-page attribute in <html> for the active HTML document must be set to 1.5, but only if data-page isn't already set to 1.5. Therefore, assuming data-page was previously set to 1, assigns 1.5 to data-page in <html> for the active HTML document, subsequently calling the following hooks (in order):

mochi_unload()        // Generic unloading hook
mochi_unload_page()   // Generic page unloading hook
mochi_unload_page1()  // Unloading hook for page 1
mochi_onchange()      // After unloading completes
mochi_load()          // Generic loading hook
mochi_load_page()     // Generic page loading hook
mochi_load_page1_5()  // Loading hook for page 1.5
mochi_onchange()      // After loading completes

NOTES

1. If callback is given, executes that function after all hooks are called.
2. Each hook receives a meta object as its first parameter. See $m.load() for details.
3. callback receives the same meta object as its first parameter.

$m.setView()

Mochi $m.setView( number number[, function callback] )

Shorthand for $m.setState("view", number).

$m.unload()

Mochi $m.unload( string page|view, number number[, object meta] )

Similar to $m.load(), but calls unloading hooks instead.

FOR EXAMPLE To call all page 1.5 "unloading" hooks in the active HTML document, you can do:

$m.unload("page", 1.5, {key1 : value1, key2 : value2});

Which would execute the following hooks (in order):

mochi_unload()          // Generic unloading hook
mochi_unload_page()     // Generic page unloading hook
mochi_unload_page1_5()  // Unloading hook for page 1.5
mochi_onchange()        // After unloading completes

$m.unloadPage()

Mochi $m.unloadPage( number number )

Shorthand for $m.unload("page", number).

$m.unloadView()

Mochi $m.unloadView( number number )

Shorthand for $m.unload("view", number).

$m.widgetOnDownloading()

Mochi $m.widgetOnDownloading( [string text][, string icon][bool spin] )

Generates a dismissible alert widget with the given text and icon included. If spin is true, the icon is set in a rotating animation. Keep in mind that icon must be a valid Font Awesome icon class. Each parameter is optional, with their default values pulled from the SW_VERBOSE_SYNCING_OPTIONS option.

Note: No action is taken if an instance of this widget is already active on screen.

$m.widgetOnUpdateReady()

Mochi $m.widgetOnUpdateReady( [string buttonTitle][, string dialogButtonTitle][string dialogContent][, string dialogTitle] )

Generates a button that triggers a vertically centered modal widget. You can customize the button label and modal content with the supported parameters. Each parameter is optional, with their default values pulled from the SW_UPDATE_NOTIFICATIONS_OPTIONS option.

Note: No action is taken if an instance of this widget is already active on screen.

Hooks

Hooks are provided by Mochi to allow your application to easily 'hook into' the rest of the framework, with minimal coding required. There are several types of hooks that are supported. Each hook is called automatically by the Mochi framework under special circumstances, depending on type.

Note: Hook are completely optional within your project and, if defined, are called with this assigned as a reference to $m (persistent Mochi instance). Additionally, some of these hooks receive a meta object as the first (and only) parameter. This object contains information regarding the call. More information here.

mochi_before()

void mochi_before()

If defined, executes during Mochi instance initialization (e.g., before all other initialization methods are called and $m is defined), but after all default options are set. Useful if you'd like to define some options or run statements before anything else fires up.

mochi_init()

void mochi_init()

If defined, executes during Mochi instance initialization, but only after all other initialization methods are called. Useful if you'd like to run statements before all other hooks are called, and before some components are loaded (e.g., before the built-in caching system kicks in).

mochi_load()

void mochi_load( [object meta] )

If defined, executes as soon as $m is set, as well as whenever the data-page or data-view attributes in <html> for the active HTML document are set. (e.g., whenever $m.setState() is called). This hook always precedes the mochi_load_page() and mochi_load_view() hooks. Additionally, meta is defined only when the data-page or data-view attributes in <html> for the active HTML document are changed from a previous (or initial) value.

mochi_load_page()

void mochi_load_page( [object meta] )

If defined, executes as soon as $m is set, as well as whenever the data-page attribute in <html> for the active HTML document is set (e.g., when $m.setState() is called). This hook always precedes the mochi_load_page{N}() hook, where {N} is the number that was assigned to data-page. Additionally, meta is defined only when the data-page attribute in <html> for the active HTML document is changed from a previous (or initial) value.

mochi_load_page{N}()

void mochi_load_page{N}( [object meta] )

If defined, executes whenever the data-page attribute in <html> for the active HTML document is set to {N}, where {N} is to be replaced with the appropriate number that was assigned to data-page. For example, the mochi_load_page1_5() hook is called if the current value of the data-page attribute in <html> for the active HTML document is changed to 1.5, but only if the current value isn't already set to 1.5. This hook is always called immediately after the mochi_page_load() hook is called. Additionally, meta is defined only when the data-page attribute in <html> for the active HTML document is changed from a previous (or initial) value.

mochi_load_view()

void mochi_load_view( [object meta] )

If defined, executes as soon as $m is set, as well as whenever the data-view attribute in <html> for the active HTML document is set (e.g., when $m.setState() is called). This hook always precedes the mochi_load_view{N}() hook, where {N} is the number that was assigned to data-view. Additionally, meta is defined only when the data-view attribute in <html> for the active HTML document is changed from a previous (or initial) value.

mochi_load_view{N}()

void mochi_load_view{N}( [object meta] )

If defined, executes whenever the data-view attribute in <html> for the active HTML document is set to {N}, where {N} is to be replaced with the appropriate number that was assigned to data-view. For example, the mochi_load_view1_5() hook is called if the current value of the data-view attribute in <html> for the active HTML document is changed to 1.5, but only if the current value isn't already set to 1.5. This hook is always called immediately after the mochi_view_load() hook is called. Additionally, meta is defined only when the data-view attribute in <html> for the active HTML document is changed from a previous (or initial) value.

mochi_unload()

void mochi_unload( object meta )

If defined, executes whenever the data-page or data-view attributes in <html> for the active HTML document are changed (e.g., when data-page changes from 1.5 to 2). This hook always precedes the mochi_unload_page() and mochi_unload_view() hooks. Additionally, meta is always defined, and includes details regarding the call.

mochi_unload_page()

void mochi_unload_page( object meta )

If defined, executes whenever the data-page attribute in <html> for the active HTML document is changed (e.g., when data-page changes from 1.5 to 2). This hook always precedes the mochi_unload_page{N}() hook, where {N} is the number that was changed in data-page. Additionally, meta is always defined, and includes details regarding the call.

mochi_unload_page{N}()

void mochi_unload_page{N}( object meta )

If defined, executes whenever the data-page attribute in <html> for the active HTML document is changed from {N} to a different number, where {N} is the number that was changed in data-page. For example, the mochi_unload_page2() hook is called if the value of the data-page attribute in <html> for the active HTML document was changed from 2 to a different number. This hook is always called immediately after the mochi_page_unload() hook is called. No action is taken if the number did not change. Additionally, meta is always defined, and includes details regarding the call.

mochi_unload_view()

void mochi_unload_view( object meta )

If defined, executes whenever the data-view attribute in <html> for the active HTML document is changed (e.g., when data-view changes from 1.5 to 2). This hook always precedes the mochi_unload_view{N}() hook, where {N} is the number that was changed in data-view. Additionally, meta is always defined, and includes details regarding the call.

mochi_unload_view{N}()

void mochi_unload_view{N}( object meta )

If defined, executes whenever the data-view attribute in <html> for the active HTML document is changed from {N} to a different number, where {N} is the number that was changed in data-view. For example, the mochi_unload_view2() hook is called if the value of the data-view attribute in <html> for the active HTML document was changed from 2 to a different number. This hook is always called immediately after the mochi_view_unload() hook is called. No action is taken if the number did not change. Additionally, meta is always defined, and includes details regarding the call.

mochi_last()

void mochi_last()

If defined, executes after Mochi instance initialization (e.g., after all other initialization methods are called and $m is defined), and all other hooks are called. This hook is essentially the opposite of mochi_before(), and only executes once for the life of the active HTML document.

mochi_onchange()

void mochi_onchange( object meta )

If defined, executes whenever the values of the data-page or data-view attributes in <html> for the active HTML document are change. This is especially useful when you need to execute some statements whenever a valid data-page or data-view attribute value change is detected, but only after all relevant hooks are called. With that said, meta is always defined, and includes details regarding the call.

mochi_onmutation()

void mochi_onmutation( MutationRecord mutation )

If defined, executes whenever a DOM mutation is detected. The mutation represents an individual DOM mutation. It's important to be careful when adding DOM-changing statements to this hook, as poor code can result in performance issues and recursion errors. More information here.

Options

Several options (or flags) are supported to allow you to take full advantage of all the features available in our standard distribution package. All supported options are listed in the table below.

Option	Type	Default
CLICK_NAME	string	auto
DEBUG_MODE	bool	false
ENABLE_SERVICE_WORKER	bool	false
LAZY_LOAD_PLUGINS	array	[]
SW_UPDATE_NOTIFICATIONS	bool	true
SW_UPDATE_NOTIFICATIONS_OPTIONS	object	object
SW_VERBOSE_SYNCING	bool	true
SW_VERBOSE_SYNCING_OPTIONS	object	object

CLICK_NAME

Determines the name of the JavaScript event to be used by the $m.onClick() method. If set to "auto", the event name will be determined automatically depending on the active host device type. For example, touchstart would be used for touch-enabled devices, while click would be used for all other device types.

DEBUG_MODE

If set to true, Mochi will output informational messages to the Web Console for some operations. Recommended for app development and debugging, but not for production-ready apps.

ENABLE_SERVICE_WORKER

If set to true, activates the built-in Service Worker. More information here.

LAZY_LOAD_PLUGINS

Use this flag to allow Mochi to "lazy load" a series of plugins, but only after the active HTML document is fully rendered, and other scripts have finished executing. This is especially useful if/when your application meets one or more of the following criteria:

1. It's an online web application.
2. Your app runs over a slow network or needs to be optimized for fast rendering.
3. You'd like to load a set of plugins for several HTML documents globally.
4. Your app requires one or more plugins, but not immediately at run-time.
5. Other situations that require optimal rendering performance.

WARNING: This feature is only supported for protocol schemes: data, http, and https.

SW_UPDATE_NOTIFICATIONS

If set to true, allows Mochi to produce an HTML-formatted notification widget on screen, suggesting to the user that an app refresh/reload is necessary (e.g., when the built-in Service Worker downloads updated assets from the network). More information here.

SW_UPDATE_NOTIFICATIONS_OPTIONS

Only applies when SW_UPDATE_NOTIFICATIONS is true. More information here.

SW_VERBOSE_SYNCING

If set to true (default), allows Mochi to produce an HTML-formatted alert widget, indicating to the user that an operation is in progress and the app is busy (e.g., downloading network resources). More information here.

SW_VERBOSE_SYNCING_OPTIONS

Only applies when SW_VERBOSE_SYNCING is true. More information here.

Properties

The following properties are available in the persistent Mochi instance ($m):

Property	Type	Description
__body	jQuery	HTML <body> element.
__container	jQuery	HTML #container element, if defined.
__content	jQuery	HTML #content element, if defined.
__head	jQuery	HTML <head> element.
__href	string	Current window URL/address.
__html	jQuery	HTML <html> element.
__observer	MutationObserver	MutationObserver interface.
__page_name	string	Current HTML document name (without extension).

---

Extending Mochi

Plugins

Mochi comes preloaded with specialized, but optional, plugins (or scripts) that further enhance the capabilities of your app. Currently, there are two official plugins available for use right out of the box. More plugins will be added in future releases, but in the meantime, we recommend you review each plugin listed below to get familiar with how to write your own. Happy coding!

Plugin	Description	Links
Dialog	Enhanced dialog system powered by jQuery UI.	Documentation
Veeva CLM Application	Adds Veeva CLM compatibility to Mochi.	Documentation

---

Further Reading

Because Mochi is built with Bootstrap, learning to use it is as easy as digging into their official docs and mastering the awesome features provided by the framework. We encourage you to head on over to the official Bootstrap documentation to learn like a pro. Happy coding!

---

License

Mochi is licensed under the MIT license. (http://opensource.org/licenses/MIT)