Front-end framework for developing responsive, mobile-first projects on the web or offline.
Warning
You are currently viewing the deprecated (legacy) version of Mochi. If possible, you should migrate your new and existing projects to the next-generation Mochi 2.0 codebase.
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.
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.
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.
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
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/ |
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.
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 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 |
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.
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 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.
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.
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.
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.
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:
Mochi $m.do( array|string name [, array arguments] )
Calls one or more predefined functions by
name
, in whichthis
is assigned$m
(persistent Mochi instance), and the optional list ofarguments
are passed as an array to each. Ifname
is an array, assumes a list of function names to be called, in the order given. Each function must be a validFunction
type. Each function must be defined within thewindow
object scope. Any undefined functions are skipped without error. This method works similar toFunction.prototype.apply()
, but with the added logic.
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 bynamespace
under$m
(e.g.,$m.somethingcool
). The optionalcallback
function is executed immediately after, withthis
assigned as a reference ofinstance
innamespace
. Additionally, you can pass ameta
object as the first parameter to theinstance
andcallback
functions. If nometa
is provided, assumes an empty object.Note: This method is especially useful for plugin development.
mixed $m.getDefaultOption( string name )
Shorthand for
$m.getOption(name, true)
.
mixed $m.getOption( string name[, bool default] )
Returns the value of the requested option by
name
(case-sensitive). Ifdefault
istrue
, returns the default value of the option instead, as defined by the framework. If the requested option is aFunction
type, gets the return value of that function,undefined
otherwise. If the return value is asimple object
type, returns a deep copy of that object.
string $m.getOnClickName()
Returns the current value of the
CLICK_NAME
option. Additionally, ifCLICK_NAME
is currently set to"auto"
, returns thetouchstart
event name for touch-enabled devices, andclick
for all other device types.
number $m.getPage( [number padding] )
Shorthand for
$m.getState('page', padding)
. Returns the value of thedata-page
attribute in<html>
for the active HTML document. Assumes0
(zero) ifdata-page
is undefined or not numeric. Ifpadding
is given, zero-pads the returned number by that amount. By default,0
(zero) is returned with the givenpadding
.
number $m.getState( string page|view [, number padding] )
Returns the value of either the
data-page
ordata-view
attribute in<html>
for the active HTML document. Assumes0
(zero) if the attribute is undefined or not numeric. Ifpadding
is given, zero-pads the returned number by that amount. By default,0
(zero) is returned with the givenpadding
.
number $m.getView( [number padding] )
Shorthand for
$m.getState('view', padding)
. Returns the value of thedata-view
attribute in<html>
for the active HTML document. Assumes0
(zero) ifdata-view
is undefined or not numeric. Ifpadding
is given, zero-pads the returned number by that amount. By default,0
(zero) is returned with the givenpadding
.
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.
Mochi $m.load( string page|view, number number[, object meta] )
Calls a series of hooks based on either the
"page"
or"view"
string, andnumber
given. For example,$m.load("page", 1.5)
implies thedata-page
attribute in<html>
for the active HTML document must be changed to1.5
, but only ifdata-page
isn't already set to1.5
. If ameta
object is given, passes that object as the first parameter for each called hook, withthis
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 completesNote: 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 optionalmeta
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"
).
Mochi $m.loadPage( number number )
Shorthand for
$m.load("page", number)
.
Mochi $m.loadView( number number )
Shorthand for
$m.load("view", number)
.
Mochi $m.log( string message[, bool condition] )
Outputs an informational message to the Web Console, but only if the given
condition
istrue
. If acondition
is not provided, outputs the message if the DEBUG_MODE option evaluates totrue
.
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 theEvent
object as the first parameter. If nohandler
is given, assumesfalse
, which is shorthand for a function that simply doesreturn false
. IfeventData
is provided, it is passed to thehandler
inevent.data
when the event is triggered.
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 adelimiter
. If nodelimiter
is given, uses the hyphen character (-
). Ifdelimiter
is non-alphanumeric, all duplicate delimiters are removed (e.g.,my--sanitized---string
becomesmy-sanitized-string
). Ifdelimiter
is an empty string, no delimiter is used. Additionally, if the optionalfallback
string is given, uses that string, but only if the sanitizedstring
is empty. Iffallback
is given, it's also sanitized before being returned.
Mochi $m.setOnClickName( string eventName )
Changes the value of the
CLICK_NAME
option to theeventName
given.eventName
must be an alphanumeric string. Otherwise, no changes are applied.
Mochi $m.setOption( string|object option[, mixed value] )
If
option
is a string, assignsvalue
to that option. If novalue
is given, assumesundefined
. Otherwise, ifoption
is a simple object type, assumes a list of options to set, with each key/value pair treated as an individualoption/value
assignment. Additionally, ifvalue
is a simple object type, recursively sets each key/value pair in the option, but only ifoption
is also a simple object type. In this case, each key/value invalue
is checked to make sure it's supported by theoption
(i.e., if the key exists as a property inoption
). Any unsupported (non-existent) keys are simply ignored, with no errors produced.
Mochi $m.setPage( number number[, function callback] )
Shorthand for
$m.setState("page", number)
.
Mochi $m.setState( string page|view, number number[, function callback] )
Sets the value of either the
data-page
ordata-view
attribute in<html>
for the active HTML document with the givennumber
, but only if the target attribute isn't already set with the samenumber
. For example,$m.setState("page", 1.5)
would imply that the value of thedata-page
attribute in<html>
for the active HTML document must be set to1.5
, but only ifdata-page
isn't already set to1.5
. Therefore, assumingdata-page
was previously set to1
, assigns1.5
todata-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 completesNOTES
- If
callback
is given, executes that function after all hooks are called.- Each hook receives a meta object as its first parameter. See
$m.load()
for details.callback
receives the same meta object as its first parameter.
Mochi $m.setView( number number[, function callback] )
Shorthand for
$m.setState("view", number)
.
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
Mochi $m.unloadPage( number number )
Shorthand for
$m.unload("page", number)
.
Mochi $m.unloadView( number number )
Shorthand for
$m.unload("view", number)
.
Mochi $m.widgetOnDownloading( [string text][, string icon][bool spin] )
Generates a dismissible alert widget with the given
text
andicon
included. Ifspin
istrue
, theicon
is set in a rotating animation. Keep in mind thaticon
must be a valid Font Awesome icon class. Each parameter is optional, with their default values pulled from theSW_VERBOSE_SYNCING_OPTIONS
option.Note: No action is taken if an instance of this widget is already active on screen.
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 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.
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 defaultoptions
are set. Useful if you'd like to define some options or run statements before anything else fires up.
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).
void mochi_load( [object meta] )
If defined, executes as soon as
$m
is set, as well as whenever thedata-page
ordata-view
attributes in<html>
for the active HTML document are set. (e.g., whenever$m.setState()
is called). This hook always precedes themochi_load_page()
andmochi_load_view()
hooks. Additionally,meta
is defined only when thedata-page
ordata-view
attributes in<html>
for the active HTML document are changed from a previous (or initial) value.
void mochi_load_page( [object meta] )
If defined, executes as soon as
$m
is set, as well as whenever thedata-page
attribute in<html>
for the active HTML document is set (e.g., when$m.setState()
is called). This hook always precedes themochi_load_page{N}()
hook, where{N}
is the number that was assigned todata-page
. Additionally,meta
is defined only when thedata-page
attribute in<html>
for the active HTML document is changed from a previous (or initial) value.
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 todata-page
. For example, themochi_load_page1_5()
hook is called if the current value of thedata-page
attribute in<html>
for the active HTML document is changed to1.5
, but only if the current value isn't already set to1.5
. This hook is always called immediately after themochi_page_load()
hook is called. Additionally,meta
is defined only when thedata-page
attribute in<html>
for the active HTML document is changed from a previous (or initial) value.
void mochi_load_view( [object meta] )
If defined, executes as soon as
$m
is set, as well as whenever thedata-view
attribute in<html>
for the active HTML document is set (e.g., when$m.setState()
is called). This hook always precedes themochi_load_view{N}()
hook, where{N}
is the number that was assigned todata-view
. Additionally,meta
is defined only when thedata-view
attribute in<html>
for the active HTML document is changed from a previous (or initial) value.
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 todata-view
. For example, themochi_load_view1_5()
hook is called if the current value of thedata-view
attribute in<html>
for the active HTML document is changed to1.5
, but only if the current value isn't already set to1.5
. This hook is always called immediately after themochi_view_load()
hook is called. Additionally,meta
is defined only when thedata-view
attribute in<html>
for the active HTML document is changed from a previous (or initial) value.
void mochi_unload( object meta )
If defined, executes whenever the
data-page
ordata-view
attributes in<html>
for the active HTML document are changed (e.g., whendata-page
changes from1.5
to2
). This hook always precedes themochi_unload_page()
andmochi_unload_view()
hooks. Additionally,meta
is always defined, and includes details regarding the call.
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., whendata-page
changes from1.5
to2
). This hook always precedes themochi_unload_page{N}()
hook, where{N}
is the number that was changed indata-page
. Additionally,meta
is always defined, and includes details regarding the call.
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 indata-page
. For example, themochi_unload_page2()
hook is called if the value of thedata-page
attribute in<html>
for the active HTML document was changed from2
to a different number. This hook is always called immediately after themochi_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.
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., whendata-view
changes from1.5
to2
). This hook always precedes themochi_unload_view{N}()
hook, where{N}
is the number that was changed indata-view
. Additionally,meta
is always defined, and includes details regarding the call.
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 indata-view
. For example, themochi_unload_view2()
hook is called if the value of thedata-view
attribute in<html>
for the active HTML document was changed from2
to a different number. This hook is always called immediately after themochi_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.
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 ofmochi_before()
, and only executes once for the life of the active HTML document.
void mochi_onchange( object meta )
If defined, executes whenever the values of the
data-page
ordata-view
attributes in<html>
for the active HTML document are change. This is especially useful when you need to execute some statements whenever a validdata-page
ordata-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.
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.
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 |
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, whileclick
would be used for all other device types.
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.
If set to
true
, activates the built-in Service Worker. More information here.
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:
- It's an online web application.
- Your app runs over a slow network or needs to be optimized for fast rendering.
- You'd like to load a set of plugins for several HTML documents globally.
- Your app requires one or more plugins, but not immediately at run-time.
- Other situations that require optimal rendering performance.
WARNING: This feature is only supported for protocol schemes: data, http, and https.
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.
Only applies when
SW_UPDATE_NOTIFICATIONS
istrue
. More information here.
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.
Only applies when
SW_VERBOSE_SYNCING
istrue
. More information here.
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). |
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 |
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!
Mochi is licensed under the MIT license. (http://opensource.org/licenses/MIT)