Using Mobiscroll components as ES6 modules
Mobiscroll components are defined as ES6 modules with dependencies defined, so they can be used as such. The advantage of this is that you don't need to build your Mobiscroll package manually, you include the full source code in your application and import the necessary components in your source code. When your application is built, only the source code of the imported components (and their dependencies) will be included in the bundle.
Example app structure
To demonstrate the usage of the ES6 modules we will use the following directory structure.
Copy the downloaded Mobiscroll source code to the lib/mobiscroll
folder, making sure the
existing folder structure is kept.
/
|--dist/
|--bundle.js
|--bundle.css
|--js/
|--app.js
|--lib/
|--mobiscroll/
|--styles/
|--style.scss
|--index.html
|--.babelrc
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mobiscroll</title>
<link href="dist/bundle.css" rel="stylesheet">
</head>
<body>
<div id="form">
<div class="mbsc-form-group-inset">
<label>
Name
<input name="username">
</label>
<label>
Email address
<input name="email" type="email">
</label>
<label>
Password
<input name="password" type="password" data-password-toggle="true">
</label>
<label>
Birthday
<input id="birthday" name="birthday">
</label>
</div>
<div class="mbsc-form-group-inset">
<button class="mbsc-btn-block" type="submit">Create account</button>
</div>
</div>
<script src="dist/bundle.js"></script>
</body>
</html>
Loading components
All components are located in the root of the Mobiscroll source code folder.
Every component exports the main mobiscroll object as default, so import the main mobiscroll object from any of the first loaded component. Subsequent components will be attached automatically to the main object.
Themes should be loaded from the themes folder of the Mobiscroll source.
To use the auto theme feature (choosing theme automatically based on platform) make sure to
import all themes for the platforms you'd like to support, after that import the auto-theme
module.
Languages should be loaded from the i18n
folder of the Mobiscroll source.
// Import components
import mobiscroll from '../lib/mobiscroll/js/datetime.javascript';
import '../lib/mobiscroll/js/forms.javascript';
// Import themes
import '../lib/mobiscroll/js/themes/material';
import '../lib/mobiscroll/js/themes/material-dark';
import '../lib/mobiscroll/js/themes/ios';
import '../lib/mobiscroll/js/themes/ios-dark';
import '../lib/mobiscroll/js/themes/auto-theme';
// Import languages
import '../lib/mobiscroll/js/i18n/de';
import '../lib/mobiscroll/js/i18n/es';
import './/lib/mobiscroll/js/i18n/zh';
mobiscroll.form('#form', {
theme: 'auto',
lang: 'es'
});
mobiscroll.date('#birthday', {
theme: 'auto',
lang: 'es'
});
The above code needs to be transpiled to ES5 code in order to run in the browser. There are various module bundlers out there to help you with that. Read on to see how to do this with some of the popular module bundlers (webpack, Rollup, Browserify).
Loading styles
Styles are written in Sass and are also modular.
In our styles.scss
file we import the themes for the components we're using.
/* Specify font icon path */
$mbsc-font-path: './fonts/';
/* Import required themes for each component */
@import '../lib/mobiscroll/scss/datetime/datetime.material.scss';
@import '../lib/mobiscroll/scss/forms/forms.material.scss';
@import '../lib/mobiscroll/scss/datetime/datetime.ios.scss';
@import '../lib/mobiscroll/scss/forms/forms.ios.scss';
/* Import custom themes */
@import "../mobiscroll/scss/themes/mobiscroll.scss"
@include mbsc-custom-theme('mobiscroll-red', 'mobiscroll', ('background': #f7f7f7, 'text': #454545, 'accent': #e61d2a));
Compiling the Sass styles to css might vary depending on the build system you're using for your app. If you're not using any yet, you can simply compile it from command line, assuming Sass is installed.
node-sass styles/style.scss dist/bundle.css
Some javascript module bundlers (like webpack or Rollup) support importing the styles in the javascript source code through plugins and extensions. See examples below.
Webpack
Install webpack
npm install --save-dev webpack webpack-cli
Install babel-loader
to transpile ES6 code
npm install --save-dev babel-core babel-preset-es2015 babel-loader@7
In this example we're using css-loader
and sass-loader
to import the styles directly in the
javascript source, the extract-text-webpack-plugin
to bundle the styling in a separate css file,
and file-loader
for the font icon files.
npm install --save-dev style-loader css-loader sass-loader file-loader node-sass extract-text-webpack-plugin@next
Import component files, theme files and the style file in the javascript source.
// Import components
import mobiscroll from '../lib/mobiscroll/js/datetime.javascript';
import '../lib/mobiscroll/js/forms.javascript';
// Import themes
import '../lib/mobiscroll/js/themes/material';
import '../lib/mobiscroll/js/themes/ios';
import '../lib/mobiscroll/js/themes/auto-theme';
// Import styles
import './styles/style.scss';
mobiscroll.form('#form', {
theme: 'auto'
});
mobiscroll.date('#birthday', {
theme: 'auto',
});
Import component styles in the style.scss
file.
/* Specify font icon path */
$mbsc-font-path: './fonts/';
/* Import component styles */
@import '../lib/mobiscroll/scss/datetime.material.scss';
@import '../lib/mobiscroll/scss/forms.material.scss';
@import '../lib/mobiscroll/scss/datetime.ios.scss';
@import '../lib/mobiscroll/scss/forms.ios.scss';
Configuration file for webpack
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './js/app.js',
output: {
filename: 'bundle.js',
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract(['css-loader'])
}, {
test: /\.scss/,
use: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
}, {
test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
use: 'file-loader'
}]
},
plugins: [
new ExtractTextPlugin('bundle.css')
]
};
We will also need the .babelrc
configuration file in the project root.
{ "presets": [ "es2015" ] }
Run webpack to create the bundles.
npx webpack
Rollup
Install Rollup
npm install --save-dev rollup rollup-plugin-commonjs rollup-plugin-node-resolve
Install rollup-plugin-babel
and babel-preset-es2015-rollup
to transpile ES2015 code.
npm install --save-dev rollup-plugin-babel babel-preset-es2015-rollup
In this example we're using the rollup-plugin-sass
plugin to be able
to import the styling in the javascript source.
npm install --save-dev rollup-plugin-sass
Import component files, theme files and the style file in the javascript source.
// Import components
import mobiscroll from '../lib/mobiscroll/js/datetime.javascript';
import '../lib/mobiscroll/js/forms.javascript';
// Import themes
import '../lib/mobiscroll/js/themes/material';
import '../lib/mobiscroll/js/themes/ios';
import '../lib/mobiscroll/js/themes/auto-theme';
// Import styles
import './styles/style.scss';
mobiscroll.form('#form', {
theme: 'auto'
});
mobiscroll.date('#birthday', {
theme: 'auto',
});
Import component styles in the style.scss
file.
/* Specify font icon path */
$mbsc-font-path: './fonts/';
/* Import component styles */
@import '../lib/mobiscroll/scss/datetime.material.scss';
@import '../lib/mobiscroll/scss/forms.material.scss';
@import '../lib/mobiscroll/scss/datetime.ios.scss';
@import '../lib/mobiscroll/scss/forms.ios.scss';
Configuration file for Rollup
import sass from 'rollup-plugin-sass';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
export default {
entry: 'js/app.js',
dest: 'dist/bundle.js',
format: 'iife',
plugins: [
nodeResolve({
jsnext: true
}),
commonjs({
include: 'node_modules/**'
}),
sass({
output: 'dist/bundle.css'
}),
babel({
exclude: 'node_modules/**'
})
]
};
We will also need the .babelrc
configuration file in the project root.
{ "presets": [ "es2015-rollup" ] }
Run Rollup to create the bundles, using the -c
option to use the configuration file.
./node_modules/.bin/rollup -c
Browserify
Install Browserify
npm install --save-dev browserify
Install babelify
and babel-preset-es2015
to transpile ES2015 code.
npm install --save-dev babel-preset-es2015 babelify
We will also need the .babelrc
configuration file in the project root.
{ "presets": [ "es2015" ] }
Run Browserify to create the bundles
./node_module/.bin/browserify js/app.js -t babelify --outfile dist/bundle.js