";else if(i instanceof c.Pie){var u=g(e,"ct-label");u&&(f+=h(u)+"
")}s&&(j.currency&&(s=void 0!=j.currencyFormatCallback?j.currencyFormatCallback(s,j):j.currency+s.replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g,"$1,")),s=''+s+"",f+=s)}f&&(o.innerHTML=f,l(a),d(o),p=o.offsetHeight,q=o.offsetWidth)}),k("mouseout",m,function(){e(o)}),k("mousemove",null,function(a){!1===j.anchorToPoint&&l(a)})}}}(window,document,a),a.plugins.tooltip}); //# sourceMappingURL=chartist-plugin-tooltip.min.js.map ================================================ FILE: chartist-plugin-tooltip/style.css ================================================ .chartist-tooltip { position: absolute; display: inline-block; opacity: 0; min-width: 5em; padding: .5em; background: #F4C63D; color: #453D3F; font-family: Oxygen,Helvetica,Arial,sans-serif; font-weight: 700; text-align: center; pointer-events: none; z-index: 1; -webkit-transition: opacity .2s linear; -moz-transition: opacity .2s linear; -o-transition: opacity .2s linear; transition: opacity .2s linear; } .chartist-tooltip:before { content: ""; position: absolute; top: 100%; left: 50%; width: 0; height: 0; margin-left: -15px; border: 15px solid transparent; border-top-color: #F4C63D; } .chartist-tooltip.tooltip-show { opacity: 1; } .ct-area, .ct-line { pointer-events: none; } /*# sourceMappingURL=chartist-plugin-tooltip.css.map */ ================================================ FILE: chartjs/component.json ================================================ { "name":"chartjs", "author": "nnnick", "dependencies": [] } ================================================ FILE: chartjs/index.html ================================================
Chart.js
Simple HTML5 Charts using the canvas element chartjs.org.
To use this component you need install with the command:
mobileui install chartjs
MobileUI use this lib for create another components!
================================================ FILE: chartjs/script.js ================================================ /*! * Chart.js * http://chartjs.org/ * Version: 2.6.0 * * Copyright 2017 Nick Downie * Released under the MIT license * https://github.com/chartjs/Chart.js/blob/master/LICENSE.md */ !function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.Chart=t()}}(function(){return function t(e,n,i){function a(r,l){if(!n[r]){if(!e[r]){var s="function"==typeof require&&require;if(!l&&s)return s(r,!0);if(o)return o(r,!0);var u=new Error("Cannot find module '"+r+"'");throw u.code="MODULE_NOT_FOUND",u}var d=n[r]={exports:{}};e[r][0].call(d.exports,function(t){var n=e[r][1][t];return a(n?n:t)},d,d.exports,t,e,n,i)}return n[r].exports}for(var o="function"==typeof require&&require,r=0;r- ');for(var n=0;n
Cover
This component allows you to create teasers using images. Regardless of what kind of element, it will always be centered vertically and horizontally and cover its container without losing its proportions. You can also place additional content, like text or image, on top of the image.
To use this component you need install with the command:
Dependency:
base.
The dependencies will be installed together with this module
mobileui install cover
You can use all features the base MobileUI in this component.
You can add color with transparent layer adding class blend-soft-light, blend-darken,
blend-luminosity, blend-multiply, blend-screen and blend-overlay.
See this example with header component.
You can combinate with button circle and list component.
You can combinate this component with list, card, badge, icons and grid.
================================================ FILE: cover/style.css ================================================ /*Define that an element has abackground-image and must cover the space required.*/
.cover {
padding: 15px;
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
position: relative;
}
/*Fixed height size.*/
.cover.cover-200 {
height: 300px;
}
/*Fixed height size.*/
.cover.cover-200 {
height: 300px;
}
/*Fixed height size.*/
.cover.cover-400 {
height: 400px;
}
/*Fixed height size.*/
.cover.cover-500 {
height: 500px;
}
/*Remove space inner the cover.*/
.cover.no-padding {
padding: 0;
}
/*Limit the size of an image and add large border.*/
.cover .avatar {
height: 100px;
border-width: 4px;
margin-bottom: 5px;
}
.cover .item .avatar {
height: 50px;
}
/*Float an element in the footer on the left.*/
.cover .float-bottom-right,
.cover .float-bottom-center,
.cover .float-bottom-left {
margin-bottom: -30px;
z-index: 99;
position: absolute;
}
/*Float an element in the footer on the right.*/
.cover .big.float-bottom-left,
.cover .big.float-bottom-center,
.cover .big.float-bottom-right {
margin-bottom: -35px;
}
/*Float an element in the footer on the center.*/
.cover .small.float-bottom-right,
.cover .small.float-bottom-left,
.cover .small.float-bottom-center {
margin-bottom: -25px;
}
.cover .float-bottom-center {
left: 50%;
margin-left: -21px;
}
.cover .small.float-bottom-center {
left: 50%;
margin-left: -15px;
}
.cover .big.float-bottom-center {
left: 50%;
margin-left: -25px;
}
/*Set a gradient effect from black to transparent in the background of an element.*/
.cover .gradient {
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
width: 100%;
padding-bottom: 10px;
padding-top: 20px;
}
/*Used when a background-image is set to apply the multiply effect of CSS3 in the background. See more at: multiply blend mode*/
.cover.blend-multiply {
background-blend-mode: multiply;
}
/*Used when a background-image is set to apply the screen effect of CSS3 in the background. See more at: screen blend mode*/
.cover.blend-screen {
background-blend-mode: screen;
}
/*Used when a background-image is set to apply the overlay effect of CSS3 in the background. See more at: overlay blend mode*/
.cover.blend-overlay {
background-blend-mode: overlay;
}
/*Used when a background-image is set to apply the darken effect of CSS3 in the background. See more at: darken blend mode*/
.cover.blend-darken {
background-blend-mode: darken;
}
/*Used when a background-image is set to apply the lighten effect of CSS3 in the background. See more at: lighten blend mode*/
.cover.blend-lighten {
background-blend-mode: lighten;
}
/*Used when a background-image is set to apply the color-dodge effect of CSS3 in the background. See more at: color-dodge blend mode*/
.cover.blend-color-dodge {
background-blend-mode: color-dodge;
}
/*Used when a background-image is set to apply the color-burn effect of CSS3 in the background. See more at: color-burn blend mode*/
.cover.blend-color-burn {
background-blend-mode: color-burn;
}
/*Used when a background-image is set to apply the hard-light effect of CSS3 in the background. See more at: hard-light blend mode*/
.cover.blend-hard-light {
background-blend-mode: hard-light;
}
/*Used when a background-image is set to apply the soft-light effect of CSS3 in the background. See more at: soft-light blend mode*/
.cover.blend-soft-light {
background-blend-mode: soft-light;
}
/*Used when a background-image is set to apply the luminosity effect of CSS3 in the background. See more at: luminosity blend mode*/
.cover.blend-luminosity {
background-blend-mode: luminosity;
}
================================================
FILE: dist/alert.json
================================================
{
"name":"alert",
"author": "fabiorogeriosj",
"dependencies": [
"base"
]
}
================================================
FILE: dist/base.json
================================================
{
"name":"base",
"dependencies": [],
"files":[
"fonts/ionicons.woff",
"fonts/roboto.woff2",
"fonts/robotoblack.woff2",
"fonts/robotolight.woff2"
]
}
================================================
FILE: dist/button.json
================================================
{
"name":"button",
"author": "fabiorogeriosj",
"dependencies": [
"base"
]
}
================================================
FILE: dist/chart-bar.json
================================================
{
"name":"chart-bar",
"author": "fabiorogeriosj",
"dependencies": [
"base"
]
}
================================================
FILE: dist/chartist-plugin-tooltip.json
================================================
{
"name":"chartist-plugin-tooltip",
"author": "tmmdata",
"dependencies": [
"chartist"
]
}
================================================
FILE: dist/chartist.json
================================================
{
"name":"chartist",
"author": "gionkunz",
"dependencies": []
}
================================================
FILE: dist/chartjs.json
================================================
{
"name":"chartjs",
"author": "nnnick",
"dependencies": []
}
================================================
FILE: dist/cover.json
================================================
{
"name":"cover",
"author": "fabiorogeriosj",
"dependencies": [
"base",
"grid"
]
}
================================================
FILE: dist/grid.json
================================================
{
"name":"grid",
"author": "gustavoquinalha",
"dependencies": []
}
================================================
FILE: dist/header.json
================================================
{
"name":"header",
"author": "fabiorogeriosj",
"dependencies": [
"base",
"button"
]
}
================================================
FILE: dist/horizontal-scroll.json
================================================
{
"name":"horizontal-scroll",
"author": "Yash-Handa",
"dependencies": [
"base"
]
}
================================================
FILE: dist/imports.css
================================================
@import url("./alert.min.css");
@import url("./base.min.css");
@import url("./button.min.css");
@import url("./chart-bar.min.css");
@import url("./chartist.min.css");
@import url("./chartist-plugin-tooltip.min.css");
@import url("./chartjs.min.css");
@import url("./cover.min.css");
@import url("./grid.min.css");
@import url("./header.min.css");
@import url("./horizontal-scroll.min.css");
@import url("./include.min.css");
@import url("./input.min.css");
@import url("./jquery.min.css");
@import url("./list.min.css");
@import url("./loading.min.css");
@import url("./menu.min.css");
@import url("./mobileui-colors.min.css");
@import url("./mobileuijs.min.css");
@import url("./momentjs.min.css");
@import url("./page.min.css");
@import url("./popover.min.css");
@import url("./progress-circle.min.css");
@import url("./progress-semicircle.min.css");
@import url("./progressbarjs.min.css");
@import url("./pulltorefresh.min.css");
@import url("./swiper.min.css");
@import url("./tab.min.css");
@import url("./timeline.min.css");
@import url("./toast.min.css");
================================================
FILE: dist/include.json
================================================
{
"name":"include",
"author": "fabiorogeriosj",
"dependencies": []
}
================================================
FILE: dist/input.json
================================================
{
"name":"input",
"author": "fabiorogeriosj",
"dependencies": [
"base",
"list"
]
}
================================================
FILE: dist/jquery.json
================================================
{
"name":"jquery",
"author": "madrobby",
"dependencies": []
}
================================================
FILE: dist/list.json
================================================
{
"name":"list",
"author": "fabiorogeriosj",
"dependencies": [
"base"
]
}
================================================
FILE: dist/loading.json
================================================
{
"name":"loading",
"author": "fabiorogeriosj",
"dependencies": [
"alert"
]
}
================================================
FILE: dist/menu.json
================================================
{
"name":"menu",
"author": "fabiorogeriosj",
"dependencies": [
"base",
"list"
]
}
================================================
FILE: dist/mobileui-colors.json
================================================
{
"name":"mobileui-colors",
"author": "fabiorogeriosj",
"dependencies": []
}
================================================
FILE: dist/mobileuijs.json
================================================
{
"name":"mobileuijs",
"author": "fabiorogeriosj",
"dependencies": []
}
================================================
FILE: dist/momentjs.json
================================================
{
"name":"momentjs",
"author": "timrwood",
"dependencies": []
}
================================================
FILE: dist/page.json
================================================
{
"name":"page",
"author": "fabiorogeriosj",
"dependencies": []
}
================================================
FILE: dist/popover.json
================================================
{
"name":"popover",
"author": "fabiorogeriosj",
"dependencies": [
"base",
"list"
]
}
================================================
FILE: dist/progress-circle.json
================================================
{
"name":"progress-circle",
"author": "fabiorogeriosj",
"dependencies": [
"mobileui-colors",
"progressbarjs"
]
}
================================================
FILE: dist/progress-circular.json
================================================
{
"name":"progress-circular",
"author": "fabiorogeriosj",
"dependencies": [
"base"
]
}
================================================
FILE: dist/progress-semicircle.json
================================================
{
"name":"progress-semicircle",
"author": "fabiorogeriosj",
"dependencies": [
"mobileui-colors",
"progressbarjs"
]
}
================================================
FILE: dist/progressbarjs.json
================================================
{
"name":"progressbarjs",
"author": "kimmobrunfeldt",
"dependencies": []
}
================================================
FILE: dist/pulltorefresh.json
================================================
{
"name":"pulltorefresh",
"author": "BoxFactura",
"dependencies": []
}
================================================
FILE: dist/swiper.json
================================================
{
"name":"swiper",
"author": "fabiorogeriosj",
"dependencies": []
}
================================================
FILE: dist/tab.json
================================================
{
"name":"tab",
"author": "fabiorogeriosj",
"dependencies": [
"base",
"button"
]
}
================================================
FILE: dist/templates.json
================================================
================================================
FILE: dist/timeline.json
================================================
{
"name":"timeline",
"author": "gustavoquinalha",
"dependencies": ["base", "grid"]
}
================================================
FILE: dist/toast.json
================================================
{
"name":"toast",
"author": "lucasssv",
"dependencies": [
"base"
]
}
================================================
FILE: docs.json
================================================
{
"site_dir": "../mobileui.github.io",
"docs": [
{
"category": "Getting started",
"itens": [
{
"key":"getting-started",
"label":"Install",
"path":"./base/install.html"
},
{
"key":"templates",
"label":"Templates",
"path":"./base/templates.html"
},
{
"key":"demos",
"label":"Demos",
"link": "/demos"
}
]
},
{
"category": "Components base",
"itens": [
{
"key":"base",
"label":"Base",
"path":"./base/base.html"
},
{
"key":"colors",
"label":"Colors",
"path":"./base/colors.html"
},
{
"key":"icons",
"label":"Icons",
"path":"./base/icons.html"
},
{
"key":"fonts",
"label":"Fonts",
"path":"./base/fonts.html"
},
{
"key":"header",
"label":"Header",
"path":"./header/index.html"
},
{
"key":"button",
"label":"Button",
"path":"./button/index.html"
},
{
"key":"input",
"label":"Input",
"path":"./input/index.html"
},
{
"key":"list",
"label":"List",
"path":"./list/index.html"
},
{
"key":"tab",
"label":"Tab",
"path":"./tab/index.html"
},
{
"key":"card",
"label":"Card",
"path":"./base/card.html"
},
{
"key":"badge",
"label":"Badge",
"path":"./base/badge.html"
},
{
"key":"cover",
"label":"Cover",
"path":"./cover/index.html"
},
{
"key":"menu",
"label":"Menu",
"path":"./menu/index.html"
},
{
"key":"grid",
"label":"Grid",
"path":"./grid/index.html"
},
{
"key":"swiper",
"label":"Swiper",
"path":"./swiper/index.html"
},
{
"key":"page",
"label":"Page",
"path":"./page/index.html"
},
{
"key":"include",
"label":"Include",
"path":"./include/index.html"
},
{
"key":"popover",
"label":"Popover",
"path":"./popover/index.html"
},
{
"key":"alert",
"label":"Alert",
"path":"./alert/index.html"
},
{
"key":"toast",
"label":"Toast",
"path":"./toast/index.html"
},
{
"key":"loading",
"label":"Loading",
"path":"./loading/index.html"
},
{
"key":"timeline",
"label":"Timeline",
"path":"./timeline/index.html"
}
]
},
{
"category": "Components charts",
"itens": [
{
"key":"chartist",
"label":"Chartist",
"path":"./chartist/index.html"
},
{
"key":"progress-circle",
"label":"Progress Circle",
"path":"./progress-circle/index.html"
},
{
"key":"progress-semicircle",
"label":"Progress Semicircle",
"path":"./progress-semicircle/index.html"
},
{
"key":"chart-bar",
"label":"Chart Bar",
"path":"./chart-bar/index.html"
}
]
},
{
"category": "Libs",
"itens": [
{
"key":"mobileuijs",
"label":"MobileUI.js",
"path":"./mobileuijs/index.html"
},
{
"key":"jquery",
"label":"jQuery",
"path":"./jquery/index.html"
},
{
"key":"progressbarjs",
"label":"ProgressBar.js",
"path":"./progressbarjs/index.html"
},
{
"key":"chartjs",
"label":"Chart.js",
"path":"./chartjs/index.html"
},
{
"key":"momentjs",
"label":"Moment.js",
"path":"./momentjs/index.html"
},
{
"key":"pulltorefresh",
"label":"PullToRefresh",
"path":"./pulltorefresh/index.html"
}
]
}
]
}
================================================
FILE: generate_dist.js
================================================
const fs = require('fs')
const path = require('path')
const compressor = require('node-minify')
const wrench = require('wrench')
function getDirectories (srcpath) {
return fs.readdirSync(srcpath)
.filter(function(file){
return fs.statSync(path.join(srcpath, file)).isDirectory() &&
file.indexOf('.') < 0 &&
file !== 'node_modules' &&
file !== 'dist' &&
file !== 'assets'
})
}
var importsAll = ''
var dir = getDirectories('./')
for(var i in dir) {
var item = dir[i]
importsAll += `@import url("./${item}.min.css");\n`
fs.createReadStream(`./${item}/component.json`).pipe(fs.createWriteStream(`./dist/${item}.json`));
if(item === 'base') {
compressor.minify({
compressor: 'clean-css',
input: ['./base/reset.css','./base/mobileui.css','./base/colors.css','./base/font.css','./base/icons.css'],
output: './dist/base.min.css',
options: {
advanced: false,
aggressiveMerging: false
},
callback: function (err, min) {
if(err) console.log('ERROR: ', err)
wrench.copyDirSyncRecursive('./base/fonts', './dist/fonts', {
forceDelete: true
})
}
})
compressor.minify({
compressor: 'gcc',
input: './base/base.js',
output: './dist/base.min.js',
callback: function (err, min) {
if(err) console.log('ERROR: ', err)
}
});
} else {
if(fs.existsSync(`./${item}/style.css`)){
compressor.minify({
compressor: 'clean-css',
input: `./${item}/style.css`,
output: `./dist/${item}.min.css`,
options: {
advanced: false,
aggressiveMerging: false
},
callback: function (err, min) {
if(err) console.log('ERROR: ', err)
}
})
}
if(fs.existsSync(`./${item}/script.js`)){
compressor.minify({
compressor: 'uglifyjs',
input: `./${item}/script.js`,
output: `./dist/${item}.min.js`,
callback: function (err, min) {
if(err) console.log('ERROR: ', err)
}
});
}
}
}
var fileNameImport = './dist/imports.css'
if (fs.existsSync(fileNameImport)) {
fs.unlinkSync(fileNameImport)
}
var fd = fs.openSync(fileNameImport, 'w')
fs.writeSync(fd, importsAll)
================================================
FILE: generate_doc.js
================================================
const fs = require('fs')
const path = require('path')
const wrench = require('wrench')
const docs = require('./docs.json')
var template = fs.readFileSync(path.join(docs.site_dir, 'template.html')).toString()
var menu = ''
var content = ''
for (var i in docs.docs) {
var item = docs.docs[i]
menu += `${item.category}
` menu += `- `
for (var subitem of item.itens) {
var href = subitem.link ? subitem.link : '#' + subitem.key
menu += `
- ${subitem.label} ` if (fs.existsSync(subitem.path)) { var docHtml = fs.readFileSync(subitem.path).toString() var urlDoc = 'https://github.com/MobileUI/components/tree/master/' + subitem.path.replace('./', '') docHtml = docHtml.replace('', 'Contribute on Github! Edit this section.\n') docHtml = docHtml.split('')[1].split('')[0] docHtml = docHtml.replace(`id="_DOC_GENERATE_SPACE_"`, `id="${subitem.key}"`) var docCss = '' if (subitem.key === 'base') { docCss = fs.readFileSync('./base/mobileui.css').toString() } else if (subitem.path.indexOf('./base') < 0) { var uriFile = subitem.path.replace('index.html', 'style.css') if (fs.existsSync(uriFile)) { docCss = fs.readFileSync(uriFile).toString() } } if (docCss) { docCss = docCss.split('/*') var listCssDoc = [] for (i in docCss) { if (docCss[i].split('{')[0].indexOf('*/') >= 0) { var description = docCss[i].split('{')[0].split('*/')[0] var classes = docCss[i].split('{')[0].split('*/')[1].split('.') var className = classes[classes.length - 1] className = className.split(':')[0] if (description && className) { listCssDoc.push({className: className, description: description}) } } } if (listCssDoc.length) { var htmlCssDoc = '
The features of this component are:
' htmlCssDoc += '| Class | Description |
|---|---|
${doc.className} | ${doc.description} |
' + docHtml + '
'
}
}
menu += `${content}
`)
index = index.replace(new RegExp(`../assets/`, 'g'), `/`)
fs.writeFileSync(path.join(docs.site_dir, 'index.html'), index)
if (!fs.existsSync(path.join(docs.site_dir, 'mobileui/'))) {
fs.mkdirSync(path.join(docs.site_dir, 'mobileui/'))
}
wrench.copyDirSyncRecursive('./dist', path.join(docs.site_dir, 'mobileui/'), {
forceDelete: true
})
================================================
FILE: grid/component.json
================================================
{
"name":"grid",
"author": "gustavoquinalha",
"dependencies": []
}
================================================
FILE: grid/index.html
================================================
Grid
MobileUI uses CSS Flexible Box Layout Module standard.
Simply add columns you want in a row, and they'll evenly take up the available space. If you want three columns, add three columns, if you want five columns, add five columns. There's no restriction to a 12 column grid, or having to explicitly state how large each column should be.
The row class name is used to designate, surprise, a row, and col is used for a column. In the demo to the right we chose to have four, then two, columns, but we could have just as easily used 3, 6, 7, 23, etc., it doesn't
matter. Point is, add the number of columns your layout requires and don't worry about figuring out the percentages because it figures it out automatically.
To use this component you need install with the command:
mobileui install grid
See this good example using row-between.
See this good example using row-around.
See how is easy align a column in the center, using row-center.
You can create a row with column direction, using column.
See this good example using row and vertical-align-top.
See this good example using row and vertical-align-center.
See this good example using row and vertical-align-bottom.
See this good example using row and horizontal-align-left.
See this good example using row and horizontal-align-center.
See this good example using row and horizontal-align-right.
See this good example using row, horizontal-align-right and vertical-align-center.
You can customize all classes of horizontal-align-X and vertical-align-Y.
When you use the vertical-align-* classes, you need to define height off element, for example: style="height: 100px;".
Or you can use helper class .full-height
See this good example using header, cover and list components.
================================================ FILE: grid/style.css ================================================ /*Create a line.*/ .row { display: -webkit-box; display: -ms-flexbox; display: flex; } /*Create a line that the columns are distributed in an equal space.*/ .row-between { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /*Create a line that the columns are distributed in an equal space around.*/ .row-around { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; } /*Create a stretch row, you need define height value.*/ .row-stretch { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } /*Create a column.*/ .column { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /*Default all items will be on one line, whit this class add to row all items will wrap onto multiple lines, from top to bottom.*/ .wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } /*Align col to the top(Axis Y).*/ .vertical-align-top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } /*Align col to the center(Axis Y).*/ .vertical-align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /*Align col to the bottom(Axis Y).*/ .vertical-align-bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } /*Align col to the left(Axis X).*/ .horizontal-align-left { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } /*Align col to the center(Axis X).*/ .horizontal-align-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /*Align col to the right(Axis X).*/ .horizontal-align-right { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } /*Center a column on the row.*/ .row-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /*Create a column with remaining space of the row.*/ .col { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; position: relative; } /*Create a column with 10% of the row.*/ .col-10 { position: relative; -ms-flex-preferred-size: 10%; flex-basis: 10%; } /*Create a column with 20% of the row.*/ .col-20 { position: relative; -ms-flex-preferred-size: 20%; flex-basis: 20%; } /*Create a column with 25% of the row.*/ .col-25 { position: relative; -ms-flex-preferred-size: 25%; flex-basis: 25%; } /*Create a column with 33.3333% of the row.*/ .col-33, .col-34 { position: relative; -ms-flex-preferred-size: 33.3333%; flex-basis: 33.3333%; } /*Create a column with 50% of the row.*/ .col-50 { position: relative; -ms-flex-preferred-size: 50%; flex-basis: 50%; } /*Create a column with 66.6666% of the row.*/ .col-66, .col-67 { position: relative; -ms-flex-preferred-size:66.6666%; flex-basis:66.6666%; } /*Create a column with 75% of the row.*/ .col-75 { position: relative; -ms-flex-preferred-size: 75%; flex-basis: 75%; } /*Create a column with 80% of the row.*/ .col-80 { position: relative; -ms-flex-preferred-size: 80%; flex-basis: 80%; } /*Create a column with 90% of the row.*/ .col-90 { position: relative; -ms-flex-preferred-size: 90%; flex-basis: 90%; } .full-width { width: 100%; margin: 0 auto } .full-height { height: 100%; margin: 0 auto } ================================================ FILE: header/component.json ================================================ { "name":"header", "author": "fabiorogeriosj", "dependencies": [ "base", "button" ] } ================================================ FILE: header/index.html ================================================Header
Headers are fixed regions at the top of a screen that can contain a title label, and left/right buttons for navigation or to carry out various actions.
To use this component you need install with the command:
Dependency:
base and button.
The dependencies will be installed together with this module
mobileui install header
You can use all features the base MobileUI in this component.
You can put the title in center or right add class align-center or align-right.
For put buttons in left and right you need create a div with class left or right.
You can put buttons with text and another options of buttons settings, see section Button.
If you need the header transparent just add text color class.
If you don't use transparent header you need add class has-header in your content or div for top position add margin. For this example the component list was used too.
For this example you need to install the following components:
mobileui install header list
A secondary header bar can be placed below the original header bar. There are quite a few more ways to customize Headers.
You can add group of buttons in header.
You can create a header in bottom of screen, just add class footer.
header create a fixed sub-bar at the top of the page, if using with footer creates a fixed sub-bar at the bottom.*/
.header.sub {
top:52px;
}
.footer.sub {
top: initial;
bottom: 52px;
}
/*Used in the parent element of the header, or body element, to define that the page uses header.*/
.has-header {
padding-top: 52px !important;
}
/*Used in the parent element of the header and sub, or body element, to define that the page uses sub.*/
.has-header.has-sub-header {
padding-top: 104px !important;
}
/*Used in the parent element of the header and footer, or body element, to define that the page uses header in bottom.*/
.has-footer {
padding-bottom: 52px !important
}
/*Used in the parent element of the header with sub and bottom, or body element, to define that the page uses sub in bottom.*/
.has-footer.has-sub-footer {
padding-bottom: 104px !important
}
.header .left, .header .right, .header .title, .header h1, .footer .left, .footer .right, .footer .title, .footer h1 {
margin-top: 15px;
margin-bottom: 5px;
}
/*Set a fixed size for an image.*/
.header .avatar {
height: 40px;
margin-top: -8px;
margin-left: 4px;
}
/*Add big border in element.*/
.header .border-big {
border-width: 2px;
border-style: solid;
}
.header h2, .footer h2 {
padding-top: 8px;
padding-left: 10px;
}
.header p, .footer p {
padding-left: 10px;
margin: 0;
margin-top: -4px;
}
.header .left, .footer .left {
padding-left: 5px
}
.header .right, .footer .right {
padding-right: 5px
}
/*Create a title in the header, you can just use h1 element.*/
.header h1, .header .title, .footer h1, .footer .title {
margin-bottom: 15px;
padding-left: 10px;
padding-right: 15px;
display: inline-block;
}
.header button, .footer button {
margin-top: -10px;
}
.header button.icon, .footer button.icon {
font-size: 30px;
margin-top: -10px;
z-index: 99;
background: none;
border: none;
padding: 0 6px;
}
.header button.icon:not([class*=red]):not([class*=pink]):not([class*=white]):not([class*=purple]):not([class*=indigo]):not([class*=blue]):not([class*=cyan]):not([class*=teal]):not([class*=green]):not([class*=lime]):not([class*=yellow]):not([class*=amber]):not([class*=orange]):not([class*=brown]):not([class*=grey]):not([class*=black]):not([class*=white]),
.footer button.icon:not([class*=red]):not([class*=pink]):not([class*=white]):not([class*=purple]):not([class*=indigo]):not([class*=blue]):not([class*=cyan]):not([class*=teal]):not([class*=green]):not([class*=lime]):not([class*=yellow]):not([class*=amber]):not([class*=orange]):not([class*=brown]):not([class*=grey]):not([class*=black]):not([class*=white]) {
color: #fff;
}
.header button.icon.left, .footer button.icon.left,
.header button.icon.right, .footer button.icon.right {
margin-top: 5px;
margin-bottom: 5px;
}
.header button.icon.left, .footer button.icon.left {
margin-left: 5px;
}
.header button.icon.right, .footer button.icon.right {
margin-right: 5px;
}
.header .title.align-center, .footer .title.align-center,
.header h1.align-center, .footer h1.align-center,
.header p.align-center, .footer p.align-center {
width: 100%;
position: inherit;
padding-right: 15px;
left: 0;
z-index: 9;
}
/*Create a floating badge next to an icon.*/
.header .icon-badge, .footer .icon-badge {
position: absolute;
margin-left: -6px;
margin-top: -8px;
border-radius: 8px;
z-index: 999;
}
.header .buttons-group, .footer .buttons-group {
margin-top: 15px;
margin-left: 5px;
margin-right: 5px;
}
.header .buttons-group.small, .footer .buttons-group.small {
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
}
.header input::-webkit-input-placeholder {
color: rgba(0, 0, 0, 0.8);
}
/*Defines a light color for the placeholder.*/
.header input.placeholder-white::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.8);
}
.header input {
padding: 15px;
position: absolute;
}
.header .left+input {
padding-right: 50px;
}
================================================
FILE: horizontal-scroll/component.json
================================================
{
"name":"horizontal-scroll",
"author": "Yash-Handa",
"dependencies": [
"base"
]
}
================================================
FILE: horizontal-scroll/index.html
================================================
Horizontal Scroll
To use this component you need install with the command:
Dependency:
base.
The dependencies will be installed together with this module
mobileui install horizontal-scroll
You can use all features the base MobileUI in this component.
You can add class full, half, three-fourth, one-fourth to an item class to manipulate its width with respect to the horizontal-scroll component.
You can put images and icons in Horizontal Scroll.
You can combinate with others components and class.
Another example of a combination of components header, button and cover.
You can add class mark for change color border.
Same Example as above but with no scroll bar by using classno-scroll-bar on horizontal-scroll component.
item to function properly.*/
.horizontal-scroll {
width: 100%;
position: relative;
border: 1px solid #ddd;
display: flex;
display: -moz-flex;
display: -ms-flexbox;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Hides the Scroll Bar. This is for webkit browsers only, however. */
.horizontal-scroll.no-scroll-bar::-webkit-scrollbar {
display: none;
}
/*Define an element as item. This feature depends on the horizontal-scroll to function properly.*/
.horizontal-scroll .item {
padding: 15px;
display: inline-block;
flex: 0 0 auto;
width: 100%;
border-right: 1px solid #ddd;
position: relative;
font-size: 18px;
}
.horizontal-scroll .item.hidden {
display: none;
}
.horizontal-scroll .item.mark {
border-right: 0;
border-bottom: 0;
border-top: 0;
}
/*Block line space with left avatar.*/
.item .block {
display: -webkit-box;
display: flex;
}
.horizontal-scroll .item.mark.margin-right {
border-right: 0;
margin-right: 10px;
}
/*Define a small space between the left and right elements.*/
.horizontal-scroll .item.space-small {
padding-left: 5px;
padding-right: 5px;
}
.horizontal-scroll.space-small .item {
padding-left: 5px;
padding-right: 5px;
}
/*Remove space in left item.*/
.horizontal-scroll .item.no-space-left {
padding-left: 0 !important;
}
/*Remove space in right item.*/
.horizontal-scroll .item.no-space-right {
padding-right: 0 !important;
}
.horizontal-scroll.no-space-left .item {
padding-left: 0 !important;
}
.horizontal-scroll.no-space-right .item {
padding-right: 0 !important;
}
.horizontal-scroll.no-space-top .item {
padding-top: 0 !important;
}
.horizontal-scroll.no-space-bottom .item {
padding-bottom: 0 !important;
}
.horizontal-scroll.no-space .item {
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.horizontal-scroll .item.row {
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
/* Display the element in full width of the container ( default ) */
.horizontal-scroll .item.full {
width: 100%;
}
/* Display the element in 75% width of the container */
.horizontal-scroll .item.three-fourth {
width: 75%;
}
/* Display the element in 50% width of the container */
.horizontal-scroll .item.half {
width: 50%;
}
/* Display the element in 25% width of the container */
.horizontal-scroll .item.one-fourth {
width: 25%;
}
.horizontal-scroll .item h1,
.horizontal-scroll .item h2 {
font-size: 16px;
margin: 0;
padding: 0;
}
.horizontal-scroll .item h1 {
margin-top: 7px;
}
.horizontal-scroll .item p {
font-size: 14px;
margin: 0;
padding: 0;
line-height: 20px;
}
.horizontal-scroll .left {
margin-right: 10px;
min-width: 25px;
}
.horizontal-scroll .right {
margin-right: 20px;
position: absolute;
top: 0;
right: 0;
height: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
.horizontal-scroll .right i {
margin-left: 5px;
}
.horizontal-scroll .align-top {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: baseline;
margin-top: 10px;
}
/*Set a fixed size for an image.*/
.horizontal-scroll .avatar {
height: 50px;
}
/*Set a floating badge above the image.*/
.avatar-badge {
position: absolute;
margin-left: -4px;
margin-top: -3px;
border-radius: 8px;
}
.horizontal-scroll .item small,
.horizontal-scroll .item small .icon {
font-size: 14px;
}
.horizontal-scroll .item .icon {
font-size: 18px;
}
.horizontal-scroll .item .icon.text-huge {
font-size: 32px;
}
.horizontal-scroll .left .icon,
.horizontal-scroll .right .icon {
vertical-align: -webkit-baseline-middle;
}
/*Add big border in item or element.*/
.horizontal-scroll .border-big {
border-width: 3px;
border-style: solid;
}
/*Define that a .horizontal-scroll or an item has no borders.*/
.horizontal-scroll.no-border {
border: 0;
}
/*Define that a .horizontal-scroll or an item has a right border.*/
.horizontal-scroll.no-border .item.border-right,
.horizontal-scroll .item.no-border.border-right {
border-right-width: 1px;
border-right-style: solid;
}
.horizontal-scroll.no-border .item,
.horizontal-scroll .item.no-border {
border: none;
}
.horizontal-scroll .item:last-child {
border-right:0;
}
.horizontal-scroll .item .right .icon,
.horizontal-scroll .item .right.icon {
font-size: 24px;
padding: 0;
margin: 0;
}
================================================
FILE: include/component.json
================================================
{
"name":"include",
"author": "fabiorogeriosj",
"dependencies": []
}
================================================
FILE: include/index.html
================================================
Include
This component include an external file HTML in your page.
To use this component you need install with the command:
mobileui install includemyfile1.html myfile2.html
You can invoke callback function after include page: include('myFrame','myfile', myFunctionCallback)
Included when load file.
================================================ FILE: include/myfile2.html ================================================ This is another file
Included by click button.
================================================ FILE: include/script.js ================================================ window.include = function(element, file, callback){ if(file.indexOf('.html') < 0){ file =file+'.html'; } var xhttp = new XMLHttpRequest(); xhttp.onload = function() { if (this.readyState == 4) { var page = this.responseText; var div = typeof(element) === 'string' ? document.getElementById(element) : element; console.log(div) if(div){ div.innerHTML = page } if(callback){ callback(); } } }; xhttp.open("GET", file + '?cache='+new Date().getTime(), true); xhttp.send(); } window.bindIncludeEvent = function(){ document.querySelectorAll('[include]').forEach(function(element, i){ window.include(element, element.getAttribute('include')); }); } window.bindIncludeEvent(); document.addEventListener("openPage", function(){ window.bindIncludeEvent(); }); ================================================ FILE: include/style.css ================================================ ================================================ FILE: input/component.json ================================================ { "name":"input", "author": "fabiorogeriosj", "dependencies": [ "base", "list" ] } ================================================ FILE: input/index.html ================================================
Input
Inputs are essential in an application to collect user data, so we need to worry about the layout and MobileUI does it for you.
To use this component you need install with the command:
Dependency:
base and list.
The dependencies will be installed together with this module
mobileui install input
You can use all features the base and list components in this component.
If you put label on the items, you can have a line view of the component.
Use class label-fixed in item of the list for fixed the label.
Input floating is a good option for forms login, just add class label-float in item.
You can put align-right for align your text in right item.
You can use icons in your input. Simply add a class icon and your ion-*.
By default the icon will take the left. However, you can put them on the right by adding the class icon-right.
You can be creative and also use the other components such as cover and grid components. And you can install new fonts using feature fonts.
A switch is an input component that holds a boolean value. Like the checkbox, switches are often used to allow the user to switch a setting on or off. Attributes like value, disabled, and checked can be applied to the toggle to control its behavior.
A checkbox is an input component that holds a boolean value. Checkboxes are no different than HTML checkbox inputs. However, like other Ionic components, checkboxes are styled differently on each platform.
Like the checkbox, a radio is an input component that holds a boolean value. Under the hood, radios are no different than HTML radio inputs. Radios are styled differently on each platform
You can use a range input for control that lets users select from a range of values by moving a slider knob along the slider bar or track.
================================================ FILE: input/script.js ================================================ (function bindInputEvent(){ setTimeout(function(){ var inputs = document.getElementsByTagName('input'); for(i in inputs){ var parent = inputs[i].parentNode; if(parent && (parent.className.indexOf('left') >=0 || parent.className.indexOf('right') >=0) && parent.parentNode.className.indexOf('item') >= 0){ parent = parent.parentNode; } if(parent && parent.className.indexOf('item') >=0 && parent.className.indexOf('bind-input-event-click') < 0 ){ parent.className += ' bind-input-event-click'; parent.addEventListener('click', function(){ if(this.getElementsByTagName('input').length) { this.getElementsByTagName('input')[0].focus(); if(this.getElementsByTagName('input')[0].type === 'radio' && !this.getElementsByTagName('input')[0].disabled) { this.getElementsByTagName('input')[0].checked=true; } } }, false); } } var labelsFloat = document.getElementsByClassName('label-float'); for(i in labelsFloat) { if(labelsFloat[i].className && labelsFloat[i].className.indexOf('bind-input-event-focus') < 0 && labelsFloat[i].querySelectorAll('input,textarea').length) { labelsFloat[i].className += ' bind-input-event-focus'; labelsFloat[i].querySelectorAll('input,textarea')[0].addEventListener('focus', function(){ if(this.parentNode.getElementsByTagName('label').length && this.parentNode.getElementsByTagName('label')[0].className.indexOf('focus') < 0) { this.parentNode.getElementsByTagName('label')[0].className += ' focus' } }, false); labelsFloat[i].querySelectorAll('input,textarea')[0].addEventListener('blur', function(){ if(this.parentNode.getElementsByTagName('label').length && this.parentNode.getElementsByTagName('label')[0].className && !this.value.length) { this.parentNode.getElementsByTagName('label')[0].className = this.parentNode.getElementsByTagName('label')[0].className.replace('focus',''); } }, false); if(labelsFloat[i].querySelectorAll('input,textarea')[0].value && labelsFloat[i].querySelectorAll('input,textarea')[0].value.length) { labelsFloat[i].querySelectorAll('input,textarea')[0].parentNode.getElementsByTagName('label')[0].className += ' focus' } } } bindInputEvent(); },500); })(); ================================================ FILE: input/style.css ================================================ input, textarea, select { border: none; background: none; font-size: 14px; width: 100%; -webkit-flex: 1; -ms-flex: 1; flex: 1; } input[disabled], textarea[disabled], select[disabled] { opacity: 0.8; } label { font-size: 14px; } /*Define a fixed label beside the input element.*/ .label-fixed, .item.label-fixed { display: -moz-flex !important; display: -ms-flexbox !important; display: flex !important; width: 100%; } .label-fixed label { -webkit-flex: 0 0 100px; -ms-flex: 0 0 100px; flex: 0 0 100px; width: 100px; min-width: 100px; max-width: 200px; } /*Define a floating label above the input element.*/ .label-float { } .label-float label { margin-bottom: 0; -webkit-transform: translate3d(0, 27px, 0); transform: translate3d(0, 27px, 0); -webkit-transform-origin: left top; transform-origin: left top; transition: -webkit-transform 150ms ease-in-out; transition: transform 150ms ease-in-out; transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out; align-self: stretch; -webkit-flex: initial; -ms-flex: initial; flex: initial; display: block; } .label-float label.focus { -webkit-transform: translate3d(0, 0, 0) scale(0.8); transform: translate3d(0, 0, 0) scale(0.8); } .item.icon { display: flex; } .item.icon.radius { border-radius: 6px; } .item.icon:not([class*="text-"]) { color: #9f9f9f; } .item input::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.6); } /*Defines a light color for the placeholder.*/ .item input.placeholder-white::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } .item.icon:before { position: absolute; } /*Align an icon from a field to the right.*/ .item.icon.icon-right:before { right: 20px; } .item.icon input, .item.icon select { padding-left: 30px; } .item.icon.icon-right input, .item.icon.icon-right select { padding-left: 0; padding-right: 30px; } input[type="checkbox"] { width: 17px; height: 17px; z-index: 1; border: 0; vertical-align: top; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 2px; } .platform-ios input[type="checkbox"]{ height: 23px; width: 23px; border-radius: 50%; } input[type="checkbox"]:not(:checked) { background-color: #fff !important; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.5); } .platform-ios input[type="checkbox"]:not(:checked){ box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4); } input[type="checkbox"]:disabled { opacity: 0.4; } input[type="checkbox"]::before { content: ''; position: absolute; margin-top: 1px; margin-left: 5px; width: 5px; height: 10px; border-width: 2px; border-top-width: 0; border-left-width: 0; border-style: solid; border-color: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .platform-ios input[type="checkbox"]::before { margin-top: 5px; margin-left: 9px; width: 4px; height: 9px; border-width: 1px; border-top-width: 0; border-left-width: 0; } input[type="checkbox"].switch { width: 36px; height: 14px; box-shadow: inset 0 0 0 30px rgba(255,255,255,0.4); border-radius: 28px; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.35s; transition-duration: 0.35s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .platform-ios input[type="checkbox"].switch { height: 32px; width: 51px; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.05); } input[type="checkbox"].switch:not(:checked) { background-color: #fff !important; box-shadow: inset 0 0 0 30px rgba(0,0,0,0.35); } .platform-ios input[type="checkbox"].switch:not(:checked) { box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1); } input[type="checkbox"].switch::before { content: ''; border-radius: 28px; height: 20px; width: 20px; margin-left: -1px; margin-top: -3px; -webkit-transition-duration: .35s; transition-duration: .35s; box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.4); border: 0; } .platform-ios input[type="checkbox"].switch::before { height: 28px; width: 28px; box-shadow: 0 0 0 1px #e4e4e4, 0 3px 2px rgba(0, 0, 0, .25); margin-top: 2px; margin-left: 2px; background-color: #fff !important; } input[type="checkbox"].switch:checked::before { margin-left: 16px; } input[type="checkbox"].switch:not(:checked)::before { background-color: #fff !important; } .platform-ios input[type="checkbox"].switch:checked::before { margin-left: 21px; box-shadow: 0 3px 2px rgba(0, 0, 0, .25); background-color: #fff; } input[type="radio"] { width: 20px; height: 20px; border-radius: 50%; position: relative; overflow: hidden; z-index: 1; vertical-align: top; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; } .platform-ios input[type="radio"] { background: none !important; } input[type="radio"]::after { content: ''; width: 100%; height: 100%; position: absolute; border-radius: 50%; } .platform-ios input[type="radio"]:not(:checked)::after { box-shadow:none; } input[type="radio"]:not(:checked)::after { box-shadow: inset 0 0 0 2px rgba(0,0,0,0.4); background-color: #fff !important; } input[type="radio"]:checked::before { content: ''; width: 10px; height: 10px; position: absolute; border: 3px solid #fff; z-index: 1; border-radius: 50%; margin-top: 2px; margin-left: 2px; } input[type="radio"]:disabled { opacity: 0.4; } .platform-ios input[type="radio"]::after { background: none !important; } .platform-ios input[type="radio"]:checked::before { position: absolute; margin-top: 4px; margin-left: 7px; width: 5px; height: 12px; border-width: 2px; border-top-width: 0; border-left-width: 0; border-style: solid; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0; } /*Defines a item of list is range input.*/ .item.range { position: relative; -ms-flex-item-align: center; -webkit-align-self: center; align-self: center; } .item.range input{ position: absolute;; height: 28px; width: calc(100% - 110px); margin: 4px 0 5px 0; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#ccc),color-stop(100%,#ccc)); background: linear-gradient(to right,#ccc 0,#ccc 100%); background-position: center; background-size: 100% 2px; background-repeat: no-repeat; outline: 0; border: none; box-sizing: content-box; -ms-background-position-y: 500px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; background-color: #666; width: 13px; height: 13px; border-radius: 50%; } input[type="range"]:active::-webkit-slider-thumb { width: 20px; height: 20px; } .platform-ios input[type="range"]::-webkit-slider-thumb { background-color: #fff; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); width: 25px; height: 25px; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 50%; } input[type="radio"].red-50::after, input[type="checkbox"].red-50.switch::before { background-color: #ffebee; } input[type="radio"].red-100::after, input[type="checkbox"].red-100.switch::before { background-color: #ffcdd2; } input[type="radio"].red-200::after, input[type="checkbox"].red-200.switch::before { background-color: #ef9a9a; } input[type="radio"].red-300::after, input[type="checkbox"].red-300.switch::before { background-color: #e57373; } input[type="radio"].red-400::after, input[type="checkbox"].red-400.switch::before { background-color: #ef5350; } input[type="radio"].red-500::after, input[type="checkbox"].red-500.switch::before { background-color: #f44336; } input[type="radio"].red-600::after, input[type="checkbox"].red-600.switch::before { background-color: #e53935; } input[type="radio"].red-700::after, input[type="checkbox"].red-700.switch::before { background-color: #d32f2f; } input[type="radio"].red-800::after, input[type="checkbox"].red-800.switch::before { background-color: #c62828; } input[type="radio"].red-900::after, input[type="checkbox"].red-900.switch::before { background-color: #b71c1c; } input[type="radio"].pink::after, input[type="checkbox"].pink.switch::before { background-color: #E91E63; } input[type="radio"].pink-50::after, input[type="checkbox"].pink-50.switch::before { background-color: #fce4ec; } input[type="radio"].pink-100::after, input[type="checkbox"].pink-100.switch::before { background-color: #f8bbd0; } input[type="radio"].pink-200::after, input[type="checkbox"].pink-200.switch::before { background-color: #f48fb1; } input[type="radio"].Pink-300::after, input[type="checkbox"].Pink-300.switch::before { background-color: #f06292; } input[type="radio"].pink-400::after, input[type="checkbox"].pink-400.switch::before { background-color: #ec407a; } input[type="radio"].pink-500::after, input[type="checkbox"].pink-500.switch::before { background-color: #e91e63; } input[type="radio"].pink-600::after, input[type="checkbox"].pink-600.switch::before { background-color: #d81b60; } input[type="radio"].pink-700::after, input[type="checkbox"].pink-700.switch::before { background-color: #c2185b; } input[type="radio"].pink-800::after, input[type="checkbox"].pink-800.switch::before { background-color: #ad1457; } input[type="radio"].pink-900::after, input[type="checkbox"].pink-900.switch::before { background-color: #880e4f; } input[type="radio"].purple::after, input[type="checkbox"].purple.switch::before { background-color: #9c27b0; } input[type="radio"].purple-50::after, input[type="checkbox"].purple-50.switch::before { background-color: #f3e5f5; } input[type="radio"].purple-100::after, input[type="checkbox"].purple-100.switch::before { background-color: #e1bee7; } input[type="radio"].purple-200::after, input[type="checkbox"].purple-200.switch::before { background-color: #ce93d8; } input[type="radio"].Purple-300::after, input[type="checkbox"].Purple-300.switch::before { background-color: #ba68c8; } input[type="radio"].Purple-400::after, input[type="checkbox"].Purple-400.switch::before { background-color: #ab47bc; } input[type="radio"].purple-500::after, input[type="checkbox"].purple-500.switch::before { background-color: #9c27b0; } input[type="radio"].purple-600::after, input[type="checkbox"].purple-600.switch::before { background-color: #8e24aa; } input[type="radio"].purple-700::after, input[type="checkbox"].purple-700.switch::before { background-color: #7b1fa2; } input[type="radio"].purple-800::after, input[type="checkbox"].purple-800.switch::before { background-color: #6a1b9a; } input[type="radio"].purple-900::after, input[type="checkbox"].purple-900.switch::before { background-color: #4a148c; } input[type="radio"].deep-purple::after, input[type="checkbox"].deep-purple.switch::before { background-color: #673ab7; } input[type="radio"].deep-purple-300::after, input[type="checkbox"].deep-purple-300.switch::before { background-color: #9575cd; } input[type="radio"].deep-purple-400::after, input[type="checkbox"].deep-purple-400.switch::before { background-color: #7e57c2; } input[type="radio"].deep-purple-500::after, input[type="checkbox"].deep-purple-500.switch::before { background-color: #673ab7; } input[type="radio"].deep-purple-600::after, input[type="checkbox"].deep-purple-600.switch::before { background-color: #5e35b1; } input[type="radio"].deep-purple-700::after, input[type="checkbox"].deep-purple-700.switch::before { background-color: #512da8; } input[type="radio"].deep-purple-800::after, input[type="checkbox"].deep-purple-800.switch::before { background-color: #4527a0; } input[type="radio"].deep-purple-900::after, input[type="checkbox"].deep-purple-900.switch::before { background-color: #311b92; } input[type="radio"].indigo::after, input[type="checkbox"].indigo.switch::before { background-color: #3f51b5; } input[type="radio"].indigo-50::after, input[type="checkbox"].indigo-50.switch::before { background-color: #e8eaf6; } input[type="radio"].indigo-100::after, input[type="checkbox"].indigo-100.switch::before { background-color: #c5cae9; } input[type="radio"].indigo-200::after, input[type="checkbox"].indigo-200.switch::before { background-color: #9fa8da; } input[type="radio"].indigo-300::after, input[type="checkbox"].indigo-300.switch::before { background-color: #7986cb; } input[type="radio"].indigo-400::after, input[type="checkbox"].indigo-400.switch::before { background-color: #5c6bc0; } input[type="radio"].indigo-500::after, input[type="checkbox"].indigo-500.switch::before { background-color: #3f51b5; } input[type="radio"].indigo-600::after, input[type="checkbox"].indigo-600.switch::before { background-color: #3949ab; } input[type="radio"].indigo-700::after, input[type="checkbox"].indigo-700.switch::before { background-color: #303f9f; } input[type="radio"].indigo-800::after, input[type="checkbox"].indigo-800.switch::before { background-color: #283593; } input[type="radio"].indigo-900::after, input[type="checkbox"].indigo-900.switch::before { background-color: #1a237e; } input[type="radio"].blue::after, input[type="checkbox"].blue.switch::before { background-color: #2196F3; } input[type="radio"].blue-50::after, input[type="checkbox"].blue-50.switch::before { background-color: #e3f2fd; } input[type="radio"].blue-100::after, input[type="checkbox"].blue-100.switch::before { background-color: #bbdefb; } input[type="radio"].blue-200::after, input[type="checkbox"].blue-200.switch::before { background-color: #90caf9; } input[type="radio"].blue-300::after, input[type="checkbox"].blue-300.switch::before { background-color: #64b5f6; } input[type="radio"].blue-400::after, input[type="checkbox"].blue-400.switch::before { background-color: #42a5f5; } input[type="radio"].blue-500::after, input[type="checkbox"].blue-500.switch::before { background-color: #2196f3; } input[type="radio"].blue-600::after, input[type="checkbox"].blue-600.switch::before { background-color: #1e88e5; } input[type="radio"].blue-700::after, input[type="checkbox"].blue-700.switch::before { background-color: #1976d2; } input[type="radio"].blue-800::after, input[type="checkbox"].blue-800.switch::before { background-color: #1565c0; } input[type="radio"].blue-900::after, input[type="checkbox"].blue-900.switch::before { background-color: #0d47a1; } input[type="radio"].light-blue::after, input[type="checkbox"].light-blue.switch::before { background-color: #03a9f4; } input[type="radio"].light-blue-50::after, input[type="checkbox"].light-blue-50.switch::before { background-color: #e1f5fe; } input[type="radio"].light-blue-100::after, input[type="checkbox"].light-blue-100.switch::before { background-color: #b3e5fc; } input[type="radio"].light-blue-200::after, input[type="checkbox"].light-blue-200.switch::before { background-color: #81d4fa; } input[type="radio"].light-blue-300::after, input[type="checkbox"].light-blue-300.switch::before { background-color: #4fc3f7; } input[type="radio"].light-blue-400::after, input[type="checkbox"].light-blue-400.switch::before { background-color: #29b6f6; } input[type="radio"].light-blue-500::after, input[type="checkbox"].light-blue-500.switch::before { background-color: #03a9f4; } input[type="radio"].light-blue-600::after, input[type="checkbox"].light-blue-600.switch::before { background-color: #039be5; } input[type="radio"].light-blue-700::after, input[type="checkbox"].light-blue-700.switch::before { background-color: #0288d1; } input[type="radio"].light-blue-800::after, input[type="checkbox"].light-blue-800.switch::before { background-color: #0277bd; } input[type="radio"].light-blue-900::after, input[type="checkbox"].light-blue-900.switch::before { background-color: #01579b; } input[type="radio"].cyan::after, input[type="checkbox"].cyan.switch::before { background-color: #00bcd4; } input[type="radio"].cyan-50::after, input[type="checkbox"].cyan-50.switch::before { background-color: #e0f7fa; } input[type="radio"].cyan-100::after, input[type="checkbox"].cyan-100.switch::before { background-color: #b2ebf2; } input[type="radio"].cyan-200::after, input[type="checkbox"].cyan-200.switch::before { background-color: #80deea; } input[type="radio"].cyan-300::after, input[type="checkbox"].cyan-300.switch::before { background-color: #4dd0e1; } input[type="radio"].cyan-400::after, input[type="checkbox"].cyan-400.switch::before { background-color: #26c6da; } input[type="radio"].cyan-500::after, input[type="checkbox"].cyan-500.switch::before { background-color: #00bcd4; } input[type="radio"].cyan-600::after, input[type="checkbox"].cyan-600.switch::before { background-color: #00acc1; } input[type="radio"].cyan-700::after, input[type="checkbox"].cyan-700.switch::before { background-color: #0097a7; } input[type="radio"].cyan-800::after, input[type="checkbox"].cyan-800.switch::before { background-color: #00838f; } input[type="radio"].cyan-900::after, input[type="checkbox"].cyan-900.switch::before { background-color: #006064; } input[type="radio"].teal::after, input[type="checkbox"].teal.switch::before { background-color: #009688; } input[type="radio"].teal-50::after, input[type="checkbox"].teal-50.switch::before { background-color: #e0f2f1; } input[type="radio"].teal-100::after, input[type="checkbox"].teal-100.switch::before { background-color: #b2dfdb; } input[type="radio"].teal-200::after, input[type="checkbox"].teal-200.switch::before { background-color: #80cbc4; } input[type="radio"].teal-300::after, input[type="checkbox"].teal-300.switch::before { background-color: #4db6ac; } input[type="radio"].teal-400::after, input[type="checkbox"].teal-400.switch::before { background-color: #26a69a; } input[type="radio"].teal-500::after, input[type="checkbox"].teal-500.switch::before { background-color: #009688; } input[type="radio"].teal-600::after, input[type="checkbox"].teal-600.switch::before { background-color: #00897b; } input[type="radio"].teal-700::after, input[type="checkbox"].teal-700.switch::before { background-color: #00796b; } input[type="radio"].teal-800::after, input[type="checkbox"].teal-800.switch::before { background-color: #00695c; } input[type="radio"].teal-900::after, input[type="checkbox"].teal-900.switch::before { background-color: #004d40; } input[type="radio"].green::after, input[type="checkbox"].green.switch::before { background-color: #4caf50; } input[type="radio"].green-50::after, input[type="checkbox"].green-50.switch::before { background-color: #e8f5e9; } input[type="radio"].green-100::after, input[type="checkbox"].green-100.switch::before { background-color: #c8e6c9; } input[type="radio"].green-200::after, input[type="checkbox"].green-200.switch::before { background-color: #a5d6a7; } input[type="radio"].green-300::after, input[type="checkbox"].green-300.switch::before { background-color: #81c784; } input[type="radio"].green-400::after, input[type="checkbox"].green-400.switch::before { background-color: #66bb6a; } input[type="radio"].green-500::after, input[type="checkbox"].green-500.switch::before { background-color: #4caf50; } input[type="radio"].green-600::after, input[type="checkbox"].green-600.switch::before { background-color: #43a047; } input[type="radio"].green-700::after, input[type="checkbox"].green-700.switch::before { background-color: #388e3c; } input[type="radio"].green-800::after, input[type="checkbox"].green-800.switch::before { background-color: #2e7d32; } input[type="radio"].green-900::after, input[type="checkbox"].green-900.switch::before { background-color: #1b5e20; } input[type="radio"].light-green::after, input[type="checkbox"].light-green.switch::before { background-color: #8bc34a; } input[type="radio"].light-green-50::after, input[type="checkbox"].light-green-50.switch::before { background-color: #f1f8e9; } input[type="radio"].light-green-100::after, input[type="checkbox"].light-green-100.switch::before { background-color: #dcedc8; } input[type="radio"].light-green-200::after, input[type="checkbox"].light-green-200.switch::before { background-color: #c5e1a5; } input[type="radio"].light-green-300::after, input[type="checkbox"].light-green-300.switch::before { background-color: #aed581; } input[type="radio"].light-green-400::after, input[type="checkbox"].light-green-400.switch::before { background-color: #9ccc65; } input[type="radio"].light-green-500::after, input[type="checkbox"].light-green-500.switch::before { background-color: #8bc34a; } input[type="radio"].light-green-600::after, input[type="checkbox"].light-green-600.switch::before { background-color: #7cb342; } input[type="radio"].light-green-700::after, input[type="checkbox"].light-green-700.switch::before { background-color: #689f38; } input[type="radio"].light-green-800::after, input[type="checkbox"].light-green-800.switch::before { background-color: #558b2f; } input[type="radio"].light-green-900::after, input[type="checkbox"].light-green-900.switch::before { background-color: #33691e; } input[type="radio"].lime::after, input[type="checkbox"].lime.switch::before { background-color: #cddc39; } input[type="radio"].lime-50::after, input[type="checkbox"].lime-50.switch::before { background-color: #f9fbe7; } input[type="radio"].lime-100::after, input[type="checkbox"].lime-100.switch::before { background-color: #f0f4c3; } input[type="radio"].lime-200::after, input[type="checkbox"].lime-200.switch::before { background-color: #e6ee9c; } input[type="radio"].lime-300::after, input[type="checkbox"].lime-300.switch::before { background-color: #dce775; } input[type="radio"].lime-400::after, input[type="checkbox"].lime-400.switch::before { background-color: #d4e157; } input[type="radio"].lime-500::after, input[type="checkbox"].lime-500.switch::before { background-color: #cddc39; } input[type="radio"].lime-600::after, input[type="checkbox"].lime-600.switch::before { background-color: #c0ca33; } input[type="radio"].lime-700::after, input[type="checkbox"].lime-700.switch::before { background-color: #afb42b; } input[type="radio"].lime-800::after, input[type="checkbox"].lime-800.switch::before { background-color: #9e9d24; } input[type="radio"].lime-900::after, input[type="checkbox"].lime-900.switch::before { background-color: #827717; } input[type="radio"].yellow::after, input[type="checkbox"].yellow.switch::before { background-color: #ffeb3b; } input[type="radio"].yellow-50::after, input[type="checkbox"].yellow-50.switch::before { background-color: #fffde7; } input[type="radio"].yellow-100::after, input[type="checkbox"].yellow-100.switch::before { background-color: #fff9c4; } input[type="radio"].yellow-200::after, input[type="checkbox"].yellow-200.switch::before { background-color: #fff59d; } input[type="radio"].yellow-300::after, input[type="checkbox"].yellow-300.switch::before { background-color: #fff176; } input[type="radio"].yellow-500::after, input[type="checkbox"].yellow-500.switch::before { background-color: #ffeb3b; } input[type="radio"].yellow-600::after, input[type="checkbox"].yellow-600.switch::before { background-color: #fdd835; } input[type="radio"].yellow-700::after, input[type="checkbox"].yellow-700.switch::before { background-color: #fbc02d; } input[type="radio"].yellow-800::after, input[type="checkbox"].yellow-800.switch::before { background-color: #f9a825; } input[type="radio"].yellow-900::after, input[type="checkbox"].yellow-900.switch::before { background-color: #f57f17; } input[type="radio"].amber-50::after, input[type="checkbox"].amber-50.switch::before { background-color: #fff8e1; } input[type="radio"].amber-100::after, input[type="checkbox"].amber-100.switch::before { background-color: #ffecb3; } input[type="radio"].amber-200::after, input[type="checkbox"].amber-200.switch::before { background-color: #ffe082; } input[type="radio"].amber-300::after, input[type="checkbox"].amber-300.switch::before { background-color: #ffd54f; } input[type="radio"].amber-500::after, input[type="checkbox"].amber-500.switch::before { background-color: #ffc107; } input[type="radio"].amber-600::after, input[type="checkbox"].amber-600.switch::before { background-color: #ffb300; } input[type="radio"].amber-700::after, input[type="checkbox"].amber-700.switch::before { background-color: #ffa000; } input[type="radio"].amber-800::after, input[type="checkbox"].amber-800.switch::before { background-color: #ff8f00; } input[type="radio"].amber-900::after, input[type="checkbox"].amber-900.switch::before { background-color: #ff6f00; } input[type="radio"].orange-50::after, input[type="checkbox"].orange-50.switch::before { background-color: #fff3e0; } input[type="radio"].orange-100::after, input[type="checkbox"].orange-100.switch::before { background-color: #ffe0b2; } input[type="radio"].orange-200::after, input[type="checkbox"].orange-200.switch::before { background-color: #ffcc80; } input[type="radio"].orange-300::after, input[type="checkbox"].orange-300.switch::before { background-color: #ffb74d; } input[type="radio"].orange-400::after, input[type="checkbox"].orange-400.switch::before { background-color: #ffa726; } input[type="radio"].orange-500::after, input[type="checkbox"].orange-500.switch::before { background-color: #ff9800; } input[type="radio"].orange-600::after, input[type="checkbox"].orange-600.switch::before { background-color: #fb8c00; } input[type="radio"].orange-700::after, input[type="checkbox"].orange-700.switch::before { background-color: #f57c00; } input[type="radio"].orange-800::after, input[type="checkbox"].orange-800.switch::before { background-color: #ef6c00; } input[type="radio"].orange-900::after, input[type="checkbox"].orange-900.switch::before { background-color: #e65100; } input[type="radio"].deep-orange::after, input[type="checkbox"].deep-orange.switch::before { background-color: #ff5722; } input[type="radio"].deep-orange-50::after, input[type="checkbox"].deep-orange-50.switch::before { background-color: #fbe9e7; } input[type="radio"].deep-orange-100::after, input[type="checkbox"].deep-orange-100.switch::before { background-color: #ffccbc; } input[type="radio"].deep-orange-200::after, input[type="checkbox"].deep-orange-200.switch::before { background-color: #ffab91; } input[type="radio"].deep-orange-300::after, input[type="checkbox"].deep-orange-300.switch::before { background-color: #ff8a65; } input[type="radio"].deep-orange-400::after, input[type="checkbox"].deep-orange-400.switch::before { background-color: #ff7043; } input[type="radio"].deep-orange-500::after, input[type="checkbox"].deep-orange-500.switch::before { background-color: #ff5722; } input[type="radio"].deep-orange-600::after, input[type="checkbox"].deep-orange-600.switch::before { background-color: #f4511e; } input[type="radio"].deep-orange-700::after, input[type="checkbox"].deep-orange-700.switch::before { background-color: #e64a19; } input[type="radio"].deep-orange-800::after, input[type="checkbox"].deep-orange-800.switch::before { background-color: #d84315; } input[type="radio"].deep-orange-900::after, input[type="checkbox"].deep-orange-900.switch::before { background-color: #bf360c; } input[type="radio"].brown::after, input[type="checkbox"].brown.switch::before { background-color: #795548; } input[type="radio"].brown-50::after, input[type="checkbox"].brown-50.switch::before { background-color: #efebe9; } input[type="radio"].brown-100::after, input[type="checkbox"].brown-100.switch::before { background-color: #d7ccc8; } input[type="radio"].brown-200::after, input[type="checkbox"].brown-200.switch::before { background-color: #bcaaa4; } input[type="radio"].brown-300::after, input[type="checkbox"].brown-300.switch::before { background-color: #a1887f; } input[type="radio"].brown-400::after, input[type="checkbox"].brown-400.switch::before { background-color: #8d6e63; } input[type="radio"].brown-500::after, input[type="checkbox"].brown-500.switch::before { background-color: #795548; } input[type="radio"].brown-600::after, input[type="checkbox"].brown-600.switch::before { background-color: #6d4c41; } input[type="radio"].brown-700::after, input[type="checkbox"].brown-700.switch::before { background-color: #5d4037; } input[type="radio"].brown-800::after, input[type="checkbox"].brown-800.switch::before { background-color: #4e342e; } input[type="radio"].brown-900::after, input[type="checkbox"].brown-900.switch::before { background-color: #3e2723; } input[type="radio"].grey::after, input[type="checkbox"].grey.switch::before { background-color: #9e9e9e; } input[type="radio"].grey-50::after, input[type="checkbox"].grey-50.switch::before { background-color: #fafafa; } input[type="radio"].grey-100::after, input[type="checkbox"].grey-100.switch::before { background-color: #f5f5f5; } input[type="radio"].grey-200::after, input[type="checkbox"].grey-200.switch::before { background-color: #eee; } input[type="radio"].grey-300::after, input[type="checkbox"].grey-300.switch::before { background-color: #e0e0e0; } input[type="radio"].grey-400::after, input[type="checkbox"].grey-400.switch::before { background-color: #bdbdbd; } input[type="radio"].grey-500::after, input[type="checkbox"].grey-500.switch::before { background-color: #9e9e9e; } input[type="radio"].grey-600::after, input[type="checkbox"].grey-600.switch::before { background-color: #757575; } input[type="radio"].grey-700::after, input[type="checkbox"].grey-700.switch::before { background-color: #616161; } input[type="radio"].grey-800::after, input[type="checkbox"].grey-800.switch::before { background-color: #424242; } input[type="radio"].grey-900::after, input[type="checkbox"].grey-900.switch::before { background-color: #212121; } input[type="radio"].blue-grey::after, input[type="checkbox"].blue-grey.switch::before { background-color: #607d8b; } input[type="radio"].blue-grey-50::after, input[type="checkbox"].blue-grey-50.switch::before { background-color: #eceff1; } input[type="radio"].blue-grey-100::after, input[type="checkbox"].blue-grey-100.switch::before { background-color: #cfd8dc; } input[type="radio"].blue-grey-200::after, input[type="checkbox"].blue-grey-200.switch::before { background-color: #b0bec5; } input[type="radio"].blue-grey-300::after, input[type="checkbox"].blue-grey-300.switch::before { background-color: #90a4ae; } input[type="radio"].blue-grey-400::after, input[type="checkbox"].blue-grey-400.switch::before { background-color: #78909c; } input[type="radio"].blue-grey-500::after, input[type="checkbox"].blue-grey-500.switch::before { background-color: #607d8b; } input[type="radio"].blue-grey-600::after, input[type="checkbox"].blue-grey-600.switch::before { background-color: #546e7a; } input[type="radio"].blue-grey-700::after, input[type="checkbox"].blue-grey-700.switch::before { background-color: #455a64; } input[type="radio"].blue-grey-800::after, input[type="checkbox"].blue-grey-800.switch::before { background-color: #37474f; } input[type="radio"].blue-grey-900::after, input[type="checkbox"].blue-grey-900.switch::before { background-color: #263238; } input[type="radio"].black::after, input[type="checkbox"].black.switch::before { background-color: #000; } .platform-ios input[type="radio"].red-50::before { border-color: #ffebee; } .platform-ios input[type="radio"].red-100::before { border-color: #ffcdd2; } .platform-ios input[type="radio"].red-200::before { border-color: #ef9a9a; } .platform-ios input[type="radio"].red-300::before { border-color: #e57373; } .platform-ios input[type="radio"].red-400::before { border-color: #ef5350; } .platform-ios input[type="radio"].red-500::before { border-color: #f44336; } .platform-ios input[type="radio"].red-600::before { border-color: #e53935; } .platform-ios input[type="radio"].red-700::before { border-color: #d32f2f; } .platform-ios input[type="radio"].red-800::before { border-color: #c62828; } .platform-ios input[type="radio"].red-900::before { border-color: #b71c1c; } .platform-ios input[type="radio"].pink::before { border-color: #E91E63; } .platform-ios input[type="radio"].pink-50::before { border-color: #fce4ec; } .platform-ios input[type="radio"].pink-100::before { border-color: #f8bbd0; } .platform-ios input[type="radio"].pink-200::before { border-color: #f48fb1; } .platform-ios input[type="radio"].Pink-300::before { border-color: #f06292; } .platform-ios input[type="radio"].pink-400::before { border-color: #ec407a; } .platform-ios input[type="radio"].pink-500::before { border-color: #e91e63; } .platform-ios input[type="radio"].pink-600::before { border-color: #d81b60; } .platform-ios input[type="radio"].pink-700::before { border-color: #c2185b; } .platform-ios input[type="radio"].pink-800::before { border-color: #ad1457; } .platform-ios input[type="radio"].pink-900::before { border-color: #880e4f; } .platform-ios input[type="radio"].purple::before { border-color: #9c27b0; } .platform-ios input[type="radio"].purple-50::before { border-color: #f3e5f5; } .platform-ios input[type="radio"].purple-100::before { border-color: #e1bee7; } .platform-ios input[type="radio"].purple-200::before { border-color: #ce93d8; } .platform-ios input[type="radio"].Purple-300::before { border-color: #ba68c8; } .platform-ios input[type="radio"].Purple-400::before { border-color: #ab47bc; } .platform-ios input[type="radio"].purple-500::before { border-color: #9c27b0; } .platform-ios input[type="radio"].purple-600::before { border-color: #8e24aa; } .platform-ios input[type="radio"].purple-700::before { border-color: #7b1fa2; } .platform-ios input[type="radio"].purple-800::before { border-color: #6a1b9a; } .platform-ios input[type="radio"].purple-900::before { border-color: #4a148c; } .platform-ios input[type="radio"].deep-purple::before { border-color: #673ab7; } .platform-ios input[type="radio"].deep-purple-300::before { border-color: #9575cd; } .platform-ios input[type="radio"].deep-purple-400::before { border-color: #7e57c2; } .platform-ios input[type="radio"].deep-purple-500::before { border-color: #673ab7; } .platform-ios input[type="radio"].deep-purple-600::before { border-color: #5e35b1; } .platform-ios input[type="radio"].deep-purple-700::before { border-color: #512da8; } .platform-ios input[type="radio"].deep-purple-800::before { border-color: #4527a0; } .platform-ios input[type="radio"].deep-purple-900::before { border-color: #311b92; } .platform-ios input[type="radio"].indigo::before { border-color: #3f51b5; } .platform-ios input[type="radio"].indigo-50::before { border-color: #e8eaf6; } .platform-ios input[type="radio"].indigo-100::before { border-color: #c5cae9; } .platform-ios input[type="radio"].indigo-200::before { border-color: #9fa8da; } .platform-ios input[type="radio"].indigo-300::before { border-color: #7986cb; } .platform-ios input[type="radio"].indigo-400::before { border-color: #5c6bc0; } .platform-ios input[type="radio"].indigo-500::before { border-color: #3f51b5; } .platform-ios input[type="radio"].indigo-600::before { border-color: #3949ab; } .platform-ios input[type="radio"].indigo-700::before { border-color: #303f9f; } .platform-ios input[type="radio"].indigo-800::before { border-color: #283593; } .platform-ios input[type="radio"].indigo-900::before { border-color: #1a237e; } .platform-ios input[type="radio"].blue::before { border-color: #2196F3; } .platform-ios input[type="radio"].blue-50::before { border-color: #e3f2fd; } .platform-ios input[type="radio"].blue-100::before { border-color: #bbdefb; } .platform-ios input[type="radio"].blue-200::before { border-color: #90caf9; } .platform-ios input[type="radio"].blue-300::before { border-color: #64b5f6; } .platform-ios input[type="radio"].blue-400::before { border-color: #42a5f5; } .platform-ios input[type="radio"].blue-500::before { border-color: #2196f3; } .platform-ios input[type="radio"].blue-600::before { border-color: #1e88e5; } .platform-ios input[type="radio"].blue-700::before { border-color: #1976d2; } .platform-ios input[type="radio"].blue-800::before { border-color: #1565c0; } .platform-ios input[type="radio"].blue-900::before { border-color: #0d47a1; } .platform-ios input[type="radio"].light-blue::before { border-color: #03a9f4; } .platform-ios input[type="radio"].light-blue-50::before { border-color: #e1f5fe; } .platform-ios input[type="radio"].light-blue-100::before { border-color: #b3e5fc; } .platform-ios input[type="radio"].light-blue-200::before { border-color: #81d4fa; } .platform-ios input[type="radio"].light-blue-300::before { border-color: #4fc3f7; } .platform-ios input[type="radio"].light-blue-400::before { border-color: #29b6f6; } .platform-ios input[type="radio"].light-blue-500::before { border-color: #03a9f4; } .platform-ios input[type="radio"].light-blue-600::before { border-color: #039be5; } .platform-ios input[type="radio"].light-blue-700::before { border-color: #0288d1; } .platform-ios input[type="radio"].light-blue-800::before { border-color: #0277bd; } .platform-ios input[type="radio"].light-blue-900::before { border-color: #01579b; } .platform-ios input[type="radio"].cyan::before { border-color: #00bcd4; } .platform-ios input[type="radio"].cyan-50::before { border-color: #e0f7fa; } .platform-ios input[type="radio"].cyan-100::before { border-color: #b2ebf2; } .platform-ios input[type="radio"].cyan-200::before { border-color: #80deea; } .platform-ios input[type="radio"].cyan-300::before { border-color: #4dd0e1; } .platform-ios input[type="radio"].cyan-400::before { border-color: #26c6da; } .platform-ios input[type="radio"].cyan-500::before { border-color: #00bcd4; } .platform-ios input[type="radio"].cyan-600::before { border-color: #00acc1; } .platform-ios input[type="radio"].cyan-700::before { border-color: #0097a7; } .platform-ios input[type="radio"].cyan-800::before { border-color: #00838f; } .platform-ios input[type="radio"].cyan-900::before { border-color: #006064; } .platform-ios input[type="radio"].teal::before { border-color: #009688; } .platform-ios input[type="radio"].teal-50::before { border-color: #e0f2f1; } .platform-ios input[type="radio"].teal-100::before { border-color: #b2dfdb; } .platform-ios input[type="radio"].teal-200::before { border-color: #80cbc4; } .platform-ios input[type="radio"].teal-300::before { border-color: #4db6ac; } .platform-ios input[type="radio"].teal-400::before { border-color: #26a69a; } .platform-ios input[type="radio"].teal-500::before { border-color: #009688; } .platform-ios input[type="radio"].teal-600::before { border-color: #00897b; } .platform-ios input[type="radio"].teal-700::before { border-color: #00796b; } .platform-ios input[type="radio"].teal-800::before { border-color: #00695c; } .platform-ios input[type="radio"].teal-900::before { border-color: #004d40; } .platform-ios input[type="radio"].green::before { border-color: #4caf50; } .platform-ios input[type="radio"].green-50::before { border-color: #e8f5e9; } .platform-ios input[type="radio"].green-100::before { border-color: #c8e6c9; } .platform-ios input[type="radio"].green-200::before { border-color: #a5d6a7; } .platform-ios input[type="radio"].green-300::before { border-color: #81c784; } .platform-ios input[type="radio"].green-400::before { border-color: #66bb6a; } .platform-ios input[type="radio"].green-500::before { border-color: #4caf50; } .platform-ios input[type="radio"].green-600::before { border-color: #43a047; } .platform-ios input[type="radio"].green-700::before { border-color: #388e3c; } .platform-ios input[type="radio"].green-800::before { border-color: #2e7d32; } .platform-ios input[type="radio"].green-900::before { border-color: #1b5e20; } .platform-ios input[type="radio"].light-green::before { border-color: #8bc34a; } .platform-ios input[type="radio"].light-green-50::before { border-color: #f1f8e9; } .platform-ios input[type="radio"].light-green-100::before { border-color: #dcedc8; } .platform-ios input[type="radio"].light-green-200::before { border-color: #c5e1a5; } .platform-ios input[type="radio"].light-green-300::before { border-color: #aed581; } .platform-ios input[type="radio"].light-green-400::before { border-color: #9ccc65; } .platform-ios input[type="radio"].light-green-500::before { border-color: #8bc34a; } .platform-ios input[type="radio"].light-green-600::before { border-color: #7cb342; } .platform-ios input[type="radio"].light-green-700::before { border-color: #689f38; } .platform-ios input[type="radio"].light-green-800::before { border-color: #558b2f; } .platform-ios input[type="radio"].light-green-900::before { border-color: #33691e; } .platform-ios input[type="radio"].lime::before { border-color: #cddc39; } .platform-ios input[type="radio"].lime-50::before { border-color: #f9fbe7; } .platform-ios input[type="radio"].lime-100::before { border-color: #f0f4c3; } .platform-ios input[type="radio"].lime-200::before { border-color: #e6ee9c; } .platform-ios input[type="radio"].lime-300::before { border-color: #dce775; } .platform-ios input[type="radio"].lime-400::before { border-color: #d4e157; } .platform-ios input[type="radio"].lime-500::before { border-color: #cddc39; } .platform-ios input[type="radio"].lime-600::before { border-color: #c0ca33; } .platform-ios input[type="radio"].lime-700::before { border-color: #afb42b; } .platform-ios input[type="radio"].lime-800::before { border-color: #9e9d24; } .platform-ios input[type="radio"].lime-900::before { border-color: #827717; } .platform-ios input[type="radio"].yellow::before { border-color: #ffeb3b; } .platform-ios input[type="radio"].yellow-50::before { border-color: #fffde7; } .platform-ios input[type="radio"].yellow-100::before { border-color: #fff9c4; } .platform-ios input[type="radio"].yellow-200::before { border-color: #fff59d; } .platform-ios input[type="radio"].yellow-300::before { border-color: #fff176; } .platform-ios input[type="radio"].yellow-500::before { border-color: #ffeb3b; } .platform-ios input[type="radio"].yellow-600::before { border-color: #fdd835; } .platform-ios input[type="radio"].yellow-700::before { border-color: #fbc02d; } .platform-ios input[type="radio"].yellow-800::before { border-color: #f9a825; } .platform-ios input[type="radio"].yellow-900::before { border-color: #f57f17; } .platform-ios input[type="radio"].amber-50::before { border-color: #fff8e1; } .platform-ios input[type="radio"].amber-100::before { border-color: #ffecb3; } .platform-ios input[type="radio"].amber-200::before { border-color: #ffe082; } .platform-ios input[type="radio"].amber-300::before { border-color: #ffd54f; } .platform-ios input[type="radio"].amber-500::before { border-color: #ffc107; } .platform-ios input[type="radio"].amber-600::before { border-color: #ffb300; } .platform-ios input[type="radio"].amber-700::before { border-color: #ffa000; } .platform-ios input[type="radio"].amber-800::before { border-color: #ff8f00; } .platform-ios input[type="radio"].amber-900::before { border-color: #ff6f00; } .platform-ios input[type="radio"].orange-50::before { border-color: #fff3e0; } .platform-ios input[type="radio"].orange-100::before { border-color: #ffe0b2; } .platform-ios input[type="radio"].orange-200::before { border-color: #ffcc80; } .platform-ios input[type="radio"].orange-300::before { border-color: #ffb74d; } .platform-ios input[type="radio"].orange-400::before { border-color: #ffa726; } .platform-ios input[type="radio"].orange-500::before { border-color: #ff9800; } .platform-ios input[type="radio"].orange-600::before { border-color: #fb8c00; } .platform-ios input[type="radio"].orange-700::before { border-color: #f57c00; } .platform-ios input[type="radio"].orange-800::before { border-color: #ef6c00; } .platform-ios input[type="radio"].orange-900::before { border-color: #e65100; } .platform-ios input[type="radio"].deep-orange::before { border-color: #ff5722; } .platform-ios input[type="radio"].deep-orange-50::before { border-color: #fbe9e7; } .platform-ios input[type="radio"].deep-orange-100::before { border-color: #ffccbc; } .platform-ios input[type="radio"].deep-orange-200::before { border-color: #ffab91; } .platform-ios input[type="radio"].deep-orange-300::before { border-color: #ff8a65; } .platform-ios input[type="radio"].deep-orange-400::before { border-color: #ff7043; } .platform-ios input[type="radio"].deep-orange-500::before { border-color: #ff5722; } .platform-ios input[type="radio"].deep-orange-600::before { border-color: #f4511e; } .platform-ios input[type="radio"].deep-orange-700::before { border-color: #e64a19; } .platform-ios input[type="radio"].deep-orange-800::before { border-color: #d84315; } .platform-ios input[type="radio"].deep-orange-900::before { border-color: #bf360c; } .platform-ios input[type="radio"].brown::before { border-color: #795548; } .platform-ios input[type="radio"].brown-50::before { border-color: #efebe9; } .platform-ios input[type="radio"].brown-100::before { border-color: #d7ccc8; } .platform-ios input[type="radio"].brown-200::before { border-color: #bcaaa4; } .platform-ios input[type="radio"].brown-300::before { border-color: #a1887f; } .platform-ios input[type="radio"].brown-400::before { border-color: #8d6e63; } .platform-ios input[type="radio"].brown-500::before { border-color: #795548; } .platform-ios input[type="radio"].brown-600::before { border-color: #6d4c41; } .platform-ios input[type="radio"].brown-700::before { border-color: #5d4037; } .platform-ios input[type="radio"].brown-800::before { border-color: #4e342e; } .platform-ios input[type="radio"].brown-900::before { border-color: #3e2723; } .platform-ios input[type="radio"].grey::before { border-color: #9e9e9e; } .platform-ios input[type="radio"].grey-50::before { border-color: #fafafa; } .platform-ios input[type="radio"].grey-100::before { border-color: #f5f5f5; } .platform-ios input[type="radio"].grey-200::before { border-color: #eee; } .platform-ios input[type="radio"].grey-300::before { border-color: #e0e0e0; } .platform-ios input[type="radio"].grey-400::before { border-color: #bdbdbd; } .platform-ios input[type="radio"].grey-500::before { border-color: #9e9e9e; } .platform-ios input[type="radio"].grey-600::before { border-color: #757575; } .platform-ios input[type="radio"].grey-700::before { border-color: #616161; } .platform-ios input[type="radio"].grey-800::before { border-color: #424242; } .platform-ios input[type="radio"].grey-900::before { border-color: #212121; } .platform-ios input[type="radio"].blue-grey::before { border-color: #607d8b; } .platform-ios input[type="radio"].blue-grey-50::before { border-color: #eceff1; } .platform-ios input[type="radio"].blue-grey-100::before { border-color: #cfd8dc; } .platform-ios input[type="radio"].blue-grey-200::before { border-color: #b0bec5; } .platform-ios input[type="radio"].blue-grey-300::before { border-color: #90a4ae; } .platform-ios input[type="radio"].blue-grey-400::before { border-color: #78909c; } .platform-ios input[type="radio"].blue-grey-500::before { border-color: #607d8b; } .platform-ios input[type="radio"].blue-grey-600::before { border-color: #546e7a; } .platform-ios input[type="radio"].blue-grey-700::before { border-color: #455a64; } .platform-ios input[type="radio"].blue-grey-800::before { border-color: #37474f; } .platform-ios input[type="radio"].blue-grey-900::before { border-color: #263238; } .platform-ios input[type="radio"].black::before { border-color: #000; } ================================================ FILE: jquery/component.json ================================================ { "name":"jquery", "author": "madrobby", "dependencies": [] } ================================================ FILE: jquery/index.html ================================================jQuery
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
To work on mobile devices requires a light and fast version of the frameworks for JavaScript, so MobileUI is equipped with Zepto.js.
Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto.
To use this component you need install with the command:
mobileui install jquery
See the Zepto documentation and its resources at zeptojs.com.
================================================ FILE: jquery/script.js ================================================ /* Zepto v1.2.0 - zepto event ajax form ie - zeptojs.com/license */ (function(global, factory) { if (typeof define === 'function' && define.amd) define(function() { return factory(global) }) else factory(global) }(this, function(window) { var Zepto = (function() { var undefined, key, $, classList, emptyArray = [], concat = emptyArray.concat, filter = emptyArray.filter, slice = emptyArray.slice, document = window.document, elementDisplay = {}, classCache = {}, cssNumber = { 'column-count': 1, 'columns': 1, 'font-weight': 1, 'line-height': 1,'opacity': 1, 'z-index': 1, 'zoom': 1 }, fragmentRE = /^\s*<(\w+|!)[^>]*>/, singleTagRE = /^<(\w+)\s*\/?>(?:<\/\1>|)$/, tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig, rootNodeRE = /^(?:body|html)$/i, capitalRE = /([A-Z])/g, // special attributes that should be get/set via method calls methodAttributes = ['val', 'css', 'html', 'text', 'data', 'width', 'height', 'offset'], adjacencyOperators = [ 'after', 'prepend', 'before', 'append' ], table = document.createElement('table'), tableRow = document.createElement('tr'), containers = { 'tr': document.createElement('tbody'), 'tbody': table, 'thead': table, 'tfoot': table, 'td': tableRow, 'th': tableRow, '*': document.createElement('div') }, readyRE = /complete|loaded|interactive/, simpleSelectorRE = /^[\w-]*$/, class2type = {}, toString = class2type.toString, zepto = {}, camelize, uniq, tempParent = document.createElement('div'), propMap = { 'tabindex': 'tabIndex', 'readonly': 'readOnly', 'for': 'htmlFor', 'class': 'className', 'maxlength': 'maxLength', 'cellspacing': 'cellSpacing', 'cellpadding': 'cellPadding', 'rowspan': 'rowSpan', 'colspan': 'colSpan', 'usemap': 'useMap', 'frameborder': 'frameBorder', 'contenteditable': 'contentEditable' }, isArray = Array.isArray || function(object){ return object instanceof Array } zepto.matches = function(element, selector) { if (!selector || !element || element.nodeType !== 1) return false var matchesSelector = element.matches || element.webkitMatchesSelector || element.mozMatchesSelector || element.oMatchesSelector || element.matchesSelector if (matchesSelector) return matchesSelector.call(element, selector) // fall back to performing a selector: var match, parent = element.parentNode, temp = !parent if (temp) (parent = tempParent).appendChild(element) match = ~zepto.qsa(parent, selector).indexOf(element) temp && tempParent.removeChild(element) return match } function type(obj) { return obj == null ? String(obj) : class2type[toString.call(obj)] || "object" } function isFunction(value) { return type(value) == "function" } function isWindow(obj) { return obj != null && obj == obj.window } function isDocument(obj) { return obj != null && obj.nodeType == obj.DOCUMENT_NODE } function isObject(obj) { return type(obj) == "object" } function isPlainObject(obj) { return isObject(obj) && !isWindow(obj) && Object.getPrototypeOf(obj) == Object.prototype } function likeArray(obj) { var length = !!obj && 'length' in obj && obj.length, type = $.type(obj) return 'function' != type && !isWindow(obj) && ( 'array' == type || length === 0 || (typeof length == 'number' && length > 0 && (length - 1) in obj) ) } function compact(array) { return filter.call(array, function(item){ return item != null }) } function flatten(array) { return array.length > 0 ? $.fn.concat.apply([], array) : array } camelize = function(str){ return str.replace(/-+(.)?/g, function(match, chr){ return chr ? chr.toUpperCase() : '' }) } function dasherize(str) { return str.replace(/::/g, '/') .replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2') .replace(/([a-z\d])([A-Z])/g, '$1_$2') .replace(/_/g, '-') .toLowerCase() } uniq = function(array){ return filter.call(array, function(item, idx){ return array.indexOf(item) == idx }) } function classRE(name) { return name in classCache ? classCache[name] : (classCache[name] = new RegExp('(^|\\s)' + name + '(\\s|$)')) } function maybeAddPx(name, value) { return (typeof value == "number" && !cssNumber[dasherize(name)]) ? value + "px" : value } function defaultDisplay(nodeName) { var element, display if (!elementDisplay[nodeName]) { element = document.createElement(nodeName) document.body.appendChild(element) display = getComputedStyle(element, '').getPropertyValue("display") element.parentNode.removeChild(element) display == "none" && (display = "block") elementDisplay[nodeName] = display } return elementDisplay[nodeName] } function children(element) { return 'children' in element ? slice.call(element.children) : $.map(element.childNodes, function(node){ if (node.nodeType == 1) return node }) } function Z(dom, selector) { var i, len = dom ? dom.length : 0 for (i = 0; i < len; i++) this[i] = dom[i] this.length = len this.selector = selector || '' } // `$.zepto.fragment` takes a html string and an optional tag name // to generate DOM nodes from the given html string. // The generated DOM nodes are returned as an array. // This function can be overridden in plugins for example to make // it compatible with browsers that don't support the DOM fully. zepto.fragment = function(html, name, properties) { var dom, nodes, container // A special case optimization for a single tag if (singleTagRE.test(html)) dom = $(document.createElement(RegExp.$1)) if (!dom) { if (html.replace) html = html.replace(tagExpanderRE, "<$1>") if (name === undefined) name = fragmentRE.test(html) && RegExp.$1 if (!(name in containers)) name = '*' container = containers[name] container.innerHTML = '' + html dom = $.each(slice.call(container.childNodes), function(){ container.removeChild(this) }) } if (isPlainObject(properties)) { nodes = $(dom) $.each(properties, function(key, value) { if (methodAttributes.indexOf(key) > -1) nodes[key](value) else nodes.attr(key, value) }) } return dom } // `$.zepto.Z` swaps out the prototype of the given `dom` array // of nodes with `$.fn` and thus supplying all the Zepto functions // to the array. This method can be overridden in plugins. zepto.Z = function(dom, selector) { return new Z(dom, selector) } // `$.zepto.isZ` should return `true` if the given object is a Zepto // collection. This method can be overridden in plugins. zepto.isZ = function(object) { return object instanceof zepto.Z } // `$.zepto.init` is Zepto's counterpart to jQuery's `$.fn.init` and // takes a CSS selector and an optional context (and handles various // special cases). // This method can be overridden in plugins. zepto.init = function(selector, context) { var dom // If nothing given, return an empty Zepto collection if (!selector) return zepto.Z() // Optimize for string selectors else if (typeof selector == 'string') { selector = selector.trim() // If it's a html fragment, create nodes from it // Note: In both Chrome 21 and Firefox 15, DOM error 12 // is thrown if the fragment doesn't begin with < if (selector[0] == '<' && fragmentRE.test(selector)) dom = zepto.fragment(selector, RegExp.$1, context), selector = null // If there's a context, create a collection on that context first, and select // nodes from there else if (context !== undefined) return $(context).find(selector) // If it's a CSS selector, use it to select nodes. else dom = zepto.qsa(document, selector) } // If a function is given, call it when the DOM is ready else if (isFunction(selector)) return $(document).ready(selector) // If a Zepto collection is given, just return it else if (zepto.isZ(selector)) return selector else { // normalize array if an array of nodes is given if (isArray(selector)) dom = compact(selector) // Wrap DOM nodes. else if (isObject(selector)) dom = [selector], selector = null // If it's a html fragment, create nodes from it else if (fragmentRE.test(selector)) dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null // If there's a context, create a collection on that context first, and select // nodes from there else if (context !== undefined) return $(context).find(selector) // And last but no least, if it's a CSS selector, use it to select nodes. else dom = zepto.qsa(document, selector) } // create a new Zepto collection from the nodes found return zepto.Z(dom, selector) } // `$` will be the base `Zepto` object. When calling this // function just call `$.zepto.init, which makes the implementation // details of selecting nodes and creating Zepto collections // patchable in plugins. $ = function(selector, context){ return zepto.init(selector, context) } function extend(target, source, deep) { for (key in source) if (deep && (isPlainObject(source[key]) || isArray(source[key]))) { if (isPlainObject(source[key]) && !isPlainObject(target[key])) target[key] = {} if (isArray(source[key]) && !isArray(target[key])) target[key] = [] extend(target[key], source[key], deep) } else if (source[key] !== undefined) target[key] = source[key] } // Copy all but undefined properties from one or more // objects to the `target` object. $.extend = function(target){ var deep, args = slice.call(arguments, 1) if (typeof target == 'boolean') { deep = target target = args.shift() } args.forEach(function(arg){ extend(target, arg, deep) }) return target } // `$.zepto.qsa` is Zepto's CSS selector implementation which // uses `document.querySelectorAll` and optimizes for some special cases, like `#id`. // This method can be overridden in plugins. zepto.qsa = function(element, selector){ var found, maybeID = selector[0] == '#', maybeClass = !maybeID && selector[0] == '.', nameOnly = maybeID || maybeClass ? selector.slice(1) : selector, // Ensure that a 1 char tag name still gets checked isSimple = simpleSelectorRE.test(nameOnly) return (element.getElementById && isSimple && maybeID) ? // Safari DocumentFragment doesn't have getElementById ( (found = element.getElementById(nameOnly)) ? [found] : [] ) : (element.nodeType !== 1 && element.nodeType !== 9 && element.nodeType !== 11) ? [] : slice.call( isSimple && !maybeID && element.getElementsByClassName ? // DocumentFragment doesn't have getElementsByClassName/TagName maybeClass ? element.getElementsByClassName(nameOnly) : // If it's simple, it could be a class element.getElementsByTagName(selector) : // Or a tag element.querySelectorAll(selector) // Or it's not simple, and we need to query all ) } function filtered(nodes, selector) { return selector == null ? $(nodes) : $(nodes).filter(selector) } $.contains = document.documentElement.contains ? function(parent, node) { return parent !== node && parent.contains(node) } : function(parent, node) { while (node && (node = node.parentNode)) if (node === parent) return true return false } function funcArg(context, arg, idx, payload) { return isFunction(arg) ? arg.call(context, idx, payload) : arg } function setAttribute(node, name, value) { value == null ? node.removeAttribute(name) : node.setAttribute(name, value) } // access className property while respecting SVGAnimatedString function className(node, value){ var klass = node.className || '', svg = klass && klass.baseVal !== undefined if (value === undefined) return svg ? klass.baseVal : klass svg ? (klass.baseVal = value) : (node.className = value) } // "true" => true // "false" => false // "null" => null // "42" => 42 // "42.5" => 42.5 // "08" => "08" // JSON => parse if valid // String => self function deserializeValue(value) { try { return value ? value == "true" || ( value == "false" ? false : value == "null" ? null : +value + "" == value ? +value : /^[\[\{]/.test(value) ? $.parseJSON(value) : value ) : value } catch(e) { return value } } $.type = type $.isFunction = isFunction $.isWindow = isWindow $.isArray = isArray $.isPlainObject = isPlainObject $.isEmptyObject = function(obj) { var name for (name in obj) return false return true } $.isNumeric = function(val) { var num = Number(val), type = typeof val return val != null && type != 'boolean' && (type != 'string' || val.length) && !isNaN(num) && isFinite(num) || false } $.inArray = function(elem, array, i){ return emptyArray.indexOf.call(array, elem, i) } $.camelCase = camelize $.trim = function(str) { return str == null ? "" : String.prototype.trim.call(str) } // plugin compatibility $.uuid = 0 $.support = { } $.expr = { } $.noop = function() {} $.map = function(elements, callback){ var value, values = [], i, key if (likeArray(elements)) for (i = 0; i < elements.length; i++) { value = callback(elements[i], i) if (value != null) values.push(value) } else for (key in elements) { value = callback(elements[key], key) if (value != null) values.push(value) } return flatten(values) } $.each = function(elements, callback){ var i, key if (likeArray(elements)) { for (i = 0; i < elements.length; i++) if (callback.call(elements[i], i, elements[i]) === false) return elements } else { for (key in elements) if (callback.call(elements[key], key, elements[key]) === false) return elements } return elements } $.grep = function(elements, callback){ return filter.call(elements, callback) } if (window.JSON) $.parseJSON = JSON.parse // Populate the class2type map $.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) { class2type[ "[object " + name + "]" ] = name.toLowerCase() }) // Define methods that will be available on all // Zepto collections $.fn = { constructor: zepto.Z, length: 0, // Because a collection acts like an array // copy over these useful array functions. forEach: emptyArray.forEach, reduce: emptyArray.reduce, push: emptyArray.push, sort: emptyArray.sort, splice: emptyArray.splice, indexOf: emptyArray.indexOf, concat: function(){ var i, value, args = [] for (i = 0; i < arguments.length; i++) { value = arguments[i] args[i] = zepto.isZ(value) ? value.toArray() : value } return concat.apply(zepto.isZ(this) ? this.toArray() : this, args) }, // `map` and `slice` in the jQuery API work differently // from their array counterparts map: function(fn){ return $($.map(this, function(el, i){ return fn.call(el, i, el) })) }, slice: function(){ return $(slice.apply(this, arguments)) }, ready: function(callback){ // need to check if document.body exists for IE as that browser reports // document ready when it hasn't yet created the body element if (readyRE.test(document.readyState) && document.body) callback($) else document.addEventListener('DOMContentLoaded', function(){ callback($) }, false) return this }, get: function(idx){ return idx === undefined ? slice.call(this) : this[idx >= 0 ? idx : idx + this.length] }, toArray: function(){ return this.get() }, size: function(){ return this.length }, remove: function(){ return this.each(function(){ if (this.parentNode != null) this.parentNode.removeChild(this) }) }, each: function(callback){ emptyArray.every.call(this, function(el, idx){ return callback.call(el, idx, el) !== false }) return this }, filter: function(selector){ if (isFunction(selector)) return this.not(this.not(selector)) return $(filter.call(this, function(element){ return zepto.matches(element, selector) })) }, add: function(selector,context){ return $(uniq(this.concat($(selector,context)))) }, is: function(selector){ return this.length > 0 && zepto.matches(this[0], selector) }, not: function(selector){ var nodes=[] if (isFunction(selector) && selector.call !== undefined) this.each(function(idx){ if (!selector.call(this,idx)) nodes.push(this) }) else { var excludes = typeof selector == 'string' ? this.filter(selector) : (likeArray(selector) && isFunction(selector.item)) ? slice.call(selector) : $(selector) this.forEach(function(el){ if (excludes.indexOf(el) < 0) nodes.push(el) }) } return $(nodes) }, has: function(selector){ return this.filter(function(){ return isObject(selector) ? $.contains(this, selector) : $(this).find(selector).size() }) }, eq: function(idx){ return idx === -1 ? this.slice(idx) : this.slice(idx, + idx + 1) }, first: function(){ var el = this[0] return el && !isObject(el) ? el : $(el) }, last: function(){ var el = this[this.length - 1] return el && !isObject(el) ? el : $(el) }, find: function(selector){ var result, $this = this if (!selector) result = $() else if (typeof selector == 'object') result = $(selector).filter(function(){ var node = this return emptyArray.some.call($this, function(parent){ return $.contains(parent, node) }) }) else if (this.length == 1) result = $(zepto.qsa(this[0], selector)) else result = this.map(function(){ return zepto.qsa(this, selector) }) return result }, closest: function(selector, context){ var nodes = [], collection = typeof selector == 'object' && $(selector) this.each(function(_, node){ while (node && !(collection ? collection.indexOf(node) >= 0 : zepto.matches(node, selector))) node = node !== context && !isDocument(node) && node.parentNode if (node && nodes.indexOf(node) < 0) nodes.push(node) }) return $(nodes) }, parents: function(selector){ var ancestors = [], nodes = this while (nodes.length > 0) nodes = $.map(nodes, function(node){ if ((node = node.parentNode) && !isDocument(node) && ancestors.indexOf(node) < 0) { ancestors.push(node) return node } }) return filtered(ancestors, selector) }, parent: function(selector){ return filtered(uniq(this.pluck('parentNode')), selector) }, children: function(selector){ return filtered(this.map(function(){ return children(this) }), selector) }, contents: function() { return this.map(function() { return this.contentDocument || slice.call(this.childNodes) }) }, siblings: function(selector){ return filtered(this.map(function(i, el){ return filter.call(children(el.parentNode), function(child){ return child!==el }) }), selector) }, empty: function(){ return this.each(function(){ this.innerHTML = '' }) }, // `pluck` is borrowed from Prototype.js pluck: function(property){ return $.map(this, function(el){ return el[property] }) }, show: function(){ return this.each(function(){ this.style.display == "none" && (this.style.display = '') if (getComputedStyle(this, '').getPropertyValue("display") == "none") this.style.display = defaultDisplay(this.nodeName) }) }, replaceWith: function(newContent){ return this.before(newContent).remove() }, wrap: function(structure){ var func = isFunction(structure) if (this[0] && !func) var dom = $(structure).get(0), clone = dom.parentNode || this.length > 1 return this.each(function(index){ $(this).wrapAll( func ? structure.call(this, index) : clone ? dom.cloneNode(true) : dom ) }) }, wrapAll: function(structure){ if (this[0]) { $(this[0]).before(structure = $(structure)) var children // drill down to the inmost element while ((children = structure.children()).length) structure = children.first() $(structure).append(this) } return this }, wrapInner: function(structure){ var func = isFunction(structure) return this.each(function(index){ var self = $(this), contents = self.contents(), dom = func ? structure.call(this, index) : structure contents.length ? contents.wrapAll(dom) : self.append(dom) }) }, unwrap: function(){ this.parent().each(function(){ $(this).replaceWith($(this).children()) }) return this }, clone: function(){ return this.map(function(){ return this.cloneNode(true) }) }, hide: function(){ return this.css("display", "none") }, toggle: function(setting){ return this.each(function(){ var el = $(this) ;(setting === undefined ? el.css("display") == "none" : setting) ? el.show() : el.hide() }) }, prev: function(selector){ return $(this.pluck('previousElementSibling')).filter(selector || '*') }, next: function(selector){ return $(this.pluck('nextElementSibling')).filter(selector || '*') }, html: function(html){ return 0 in arguments ? this.each(function(idx){ var originHtml = this.innerHTML $(this).empty().append( funcArg(this, html, idx, originHtml) ) }) : (0 in this ? this[0].innerHTML : null) }, text: function(text){ return 0 in arguments ? this.each(function(idx){ var newText = funcArg(this, text, idx, this.textContent) this.textContent = newText == null ? '' : ''+newText }) : (0 in this ? this.pluck('textContent').join("") : null) }, attr: function(name, value){ var result return (typeof name == 'string' && !(1 in arguments)) ? (0 in this && this[0].nodeType == 1 && (result = this[0].getAttribute(name)) != null ? result : undefined) : this.each(function(idx){ if (this.nodeType !== 1) return if (isObject(name)) for (key in name) setAttribute(this, key, name[key]) else setAttribute(this, name, funcArg(this, value, idx, this.getAttribute(name))) }) }, removeAttr: function(name){ return this.each(function(){ this.nodeType === 1 && name.split(' ').forEach(function(attribute){ setAttribute(this, attribute) }, this)}) }, prop: function(name, value){ name = propMap[name] || name return (1 in arguments) ? this.each(function(idx){ this[name] = funcArg(this, value, idx, this[name]) }) : (this[0] && this[0][name]) }, removeProp: function(name){ name = propMap[name] || name return this.each(function(){ delete this[name] }) }, data: function(name, value){ var attrName = 'data-' + name.replace(capitalRE, '-$1').toLowerCase() var data = (1 in arguments) ? this.attr(attrName, value) : this.attr(attrName) return data !== null ? deserializeValue(data) : undefined }, val: function(value){ if (0 in arguments) { if (value == null) value = "" return this.each(function(idx){ this.value = funcArg(this, value, idx, this.value) }) } else { return this[0] && (this[0].multiple ? $(this[0]).find('option').filter(function(){ return this.selected }).pluck('value') : this[0].value) } }, offset: function(coordinates){ if (coordinates) return this.each(function(index){ var $this = $(this), coords = funcArg(this, coordinates, index, $this.offset()), parentOffset = $this.offsetParent().offset(), props = { top: coords.top - parentOffset.top, left: coords.left - parentOffset.left } if ($this.css('position') == 'static') props['position'] = 'relative' $this.css(props) }) if (!this.length) return null if (document.documentElement !== this[0] && !$.contains(document.documentElement, this[0])) return {top: 0, left: 0} var obj = this[0].getBoundingClientRect() return { left: obj.left + window.pageXOffset, top: obj.top + window.pageYOffset, width: Math.round(obj.width), height: Math.round(obj.height) } }, css: function(property, value){ if (arguments.length < 2) { var element = this[0] if (typeof property == 'string') { if (!element) return return element.style[camelize(property)] || getComputedStyle(element, '').getPropertyValue(property) } else if (isArray(property)) { if (!element) return var props = {} var computedStyle = getComputedStyle(element, '') $.each(property, function(_, prop){ props[prop] = (element.style[camelize(prop)] || computedStyle.getPropertyValue(prop)) }) return props } } var css = '' if (type(property) == 'string') { if (!value && value !== 0) this.each(function(){ this.style.removeProperty(dasherize(property)) }) else css = dasherize(property) + ":" + maybeAddPx(property, value) } else { for (key in property) if (!property[key] && property[key] !== 0) this.each(function(){ this.style.removeProperty(dasherize(key)) }) else css += dasherize(key) + ':' + maybeAddPx(key, property[key]) + ';' } return this.each(function(){ this.style.cssText += ';' + css }) }, index: function(element){ return element ? this.indexOf($(element)[0]) : this.parent().children().indexOf(this[0]) }, hasClass: function(name){ if (!name) return false return emptyArray.some.call(this, function(el){ return this.test(className(el)) }, classRE(name)) }, addClass: function(name){ if (!name) return this return this.each(function(idx){ if (!('className' in this)) return classList = [] var cls = className(this), newName = funcArg(this, name, idx, cls) newName.split(/\s+/g).forEach(function(klass){ if (!$(this).hasClass(klass)) classList.push(klass) }, this) classList.length && className(this, cls + (cls ? " " : "") + classList.join(" ")) }) }, removeClass: function(name){ return this.each(function(idx){ if (!('className' in this)) return if (name === undefined) return className(this, '') classList = className(this) funcArg(this, name, idx, classList).split(/\s+/g).forEach(function(klass){ classList = classList.replace(classRE(klass), " ") }) className(this, classList.trim()) }) }, toggleClass: function(name, when){ if (!name) return this return this.each(function(idx){ var $this = $(this), names = funcArg(this, name, idx, className(this)) names.split(/\s+/g).forEach(function(klass){ (when === undefined ? !$this.hasClass(klass) : when) ? $this.addClass(klass) : $this.removeClass(klass) }) }) }, scrollTop: function(value){ if (!this.length) return var hasScrollTop = 'scrollTop' in this[0] if (value === undefined) return hasScrollTop ? this[0].scrollTop : this[0].pageYOffset return this.each(hasScrollTop ? function(){ this.scrollTop = value } : function(){ this.scrollTo(this.scrollX, value) }) }, scrollLeft: function(value){ if (!this.length) return var hasScrollLeft = 'scrollLeft' in this[0] if (value === undefined) return hasScrollLeft ? this[0].scrollLeft : this[0].pageXOffset return this.each(hasScrollLeft ? function(){ this.scrollLeft = value } : function(){ this.scrollTo(value, this.scrollY) }) }, position: function() { if (!this.length) return var elem = this[0], // Get *real* offsetParent offsetParent = this.offsetParent(), // Get correct offsets offset = this.offset(), parentOffset = rootNodeRE.test(offsetParent[0].nodeName) ? { top: 0, left: 0 } : offsetParent.offset() // Subtract element margins // note: when an element has margin: auto the offsetLeft and marginLeft // are the same in Safari causing offset.left to incorrectly be 0 offset.top -= parseFloat( $(elem).css('margin-top') ) || 0 offset.left -= parseFloat( $(elem).css('margin-left') ) || 0 // Add offsetParent borders parentOffset.top += parseFloat( $(offsetParent[0]).css('border-top-width') ) || 0 parentOffset.left += parseFloat( $(offsetParent[0]).css('border-left-width') ) || 0 // Subtract the two offsets return { top: offset.top - parentOffset.top, left: offset.left - parentOffset.left } }, offsetParent: function() { return this.map(function(){ var parent = this.offsetParent || document.body while (parent && !rootNodeRE.test(parent.nodeName) && $(parent).css("position") == "static") parent = parent.offsetParent return parent }) } } // for now $.fn.detach = $.fn.remove // Generate the `width` and `height` functions ;['width', 'height'].forEach(function(dimension){ var dimensionProperty = dimension.replace(/./, function(m){ return m[0].toUpperCase() }) $.fn[dimension] = function(value){ var offset, el = this[0] if (value === undefined) return isWindow(el) ? el['inner' + dimensionProperty] : isDocument(el) ? el.documentElement['scroll' + dimensionProperty] : (offset = this.offset()) && offset[dimension] else return this.each(function(idx){ el = $(this) el.css(dimension, funcArg(this, value, idx, el[dimension]())) }) } }) function traverseNode(node, fun) { fun(node) for (var i = 0, len = node.childNodes.length; i < len; i++) traverseNode(node.childNodes[i], fun) } // Generate the `after`, `prepend`, `before`, `append`, // `insertAfter`, `insertBefore`, `appendTo`, and `prependTo` methods. adjacencyOperators.forEach(function(operator, operatorIndex) { var inside = operatorIndex % 2 //=> prepend, append $.fn[operator] = function(){ // arguments can be nodes, arrays of nodes, Zepto objects and HTML strings var argType, nodes = $.map(arguments, function(arg) { var arr = [] argType = type(arg) if (argType == "array") { arg.forEach(function(el) { if (el.nodeType !== undefined) return arr.push(el) else if ($.zepto.isZ(el)) return arr = arr.concat(el.get()) arr = arr.concat(zepto.fragment(el)) }) return arr } return argType == "object" || arg == null ? arg : zepto.fragment(arg) }), parent, copyByClone = this.length > 1 if (nodes.length < 1) return this return this.each(function(_, target){ parent = inside ? target : target.parentNode // convert all methods to a "before" operation target = operatorIndex == 0 ? target.nextSibling : operatorIndex == 1 ? target.firstChild : operatorIndex == 2 ? target : null var parentInDocument = $.contains(document.documentElement, parent) nodes.forEach(function(node){ if (copyByClone) node = node.cloneNode(true) else if (!parent) return $(node).remove() parent.insertBefore(node, target) if (parentInDocument) traverseNode(node, function(el){ if (el.nodeName != null && el.nodeName.toUpperCase() === 'SCRIPT' && (!el.type || el.type === 'text/javascript') && !el.src){ var target = el.ownerDocument ? el.ownerDocument.defaultView : window target['eval'].call(target, el.innerHTML) } }) }) }) } // after => insertAfter // prepend => prependTo // before => insertBefore // append => appendTo $.fn[inside ? operator+'To' : 'insert'+(operatorIndex ? 'Before' : 'After')] = function(html){ $(html)[operator](this) return this } }) zepto.Z.prototype = Z.prototype = $.fn // Export internal API functions in the `$.zepto` namespace zepto.uniq = uniq zepto.deserializeValue = deserializeValue $.zepto = zepto return $ })() window.Zepto = Zepto window.$ === undefined && (window.$ = Zepto) ;(function($){ var _zid = 1, undefined, slice = Array.prototype.slice, isFunction = $.isFunction, isString = function(obj){ return typeof obj == 'string' }, handlers = {}, specialEvents={}, focusinSupported = 'onfocusin' in window, focus = { focus: 'focusin', blur: 'focusout' }, hover = { mouseenter: 'mouseover', mouseleave: 'mouseout' } specialEvents.click = specialEvents.mousedown = specialEvents.mouseup = specialEvents.mousemove = 'MouseEvents' function zid(element) { return element._zid || (element._zid = _zid++) } function findHandlers(element, event, fn, selector) { event = parse(event) if (event.ns) var matcher = matcherFor(event.ns) return (handlers[zid(element)] || []).filter(function(handler) { return handler && (!event.e || handler.e == event.e) && (!event.ns || matcher.test(handler.ns)) && (!fn || zid(handler.fn) === zid(fn)) && (!selector || handler.sel == selector) }) } function parse(event) { var parts = ('' + event).split('.') return {e: parts[0], ns: parts.slice(1).sort().join(' ')} } function matcherFor(ns) { return new RegExp('(?:^| )' + ns.replace(' ', ' .* ?') + '(?: |$)') } function eventCapture(handler, captureSetting) { return handler.del && (!focusinSupported && (handler.e in focus)) || !!captureSetting } function realEvent(type) { return hover[type] || (focusinSupported && focus[type]) || type } function add(element, events, fn, data, selector, delegator, capture){ var id = zid(element), set = (handlers[id] || (handlers[id] = [])) events.split(/\s/).forEach(function(event){ if (event == 'ready') return $(document).ready(fn) var handler = parse(event) handler.fn = fn handler.sel = selector // emulate mouseenter, mouseleave if (handler.e in hover) fn = function(e){ var related = e.relatedTarget if (!related || (related !== this && !$.contains(this, related))) return handler.fn.apply(this, arguments) } handler.del = delegator var callback = delegator || fn handler.proxy = function(e){ e = compatible(e) if (e.isImmediatePropagationStopped()) return e.data = data var result = callback.apply(element, e._args == undefined ? [e] : [e].concat(e._args)) if (result === false) e.preventDefault(), e.stopPropagation() return result } handler.i = set.length set.push(handler) if ('addEventListener' in element) element.addEventListener(realEvent(handler.e), handler.proxy, eventCapture(handler, capture)) }) } function remove(element, events, fn, selector, capture){ var id = zid(element) ;(events || '').split(/\s/).forEach(function(event){ findHandlers(element, event, fn, selector).forEach(function(handler){ delete handlers[id][handler.i] if ('removeEventListener' in element) element.removeEventListener(realEvent(handler.e), handler.proxy, eventCapture(handler, capture)) }) }) } $.event = { add: add, remove: remove } $.proxy = function(fn, context) { var args = (2 in arguments) && slice.call(arguments, 2) if (isFunction(fn)) { var proxyFn = function(){ return fn.apply(context, args ? args.concat(slice.call(arguments)) : arguments) } proxyFn._zid = zid(fn) return proxyFn } else if (isString(context)) { if (args) { args.unshift(fn[context], fn) return $.proxy.apply(null, args) } else { return $.proxy(fn[context], fn) } } else { throw new TypeError("expected function") } } $.fn.bind = function(event, data, callback){ return this.on(event, data, callback) } $.fn.unbind = function(event, callback){ return this.off(event, callback) } $.fn.one = function(event, selector, data, callback){ return this.on(event, selector, data, callback, 1) } var returnTrue = function(){return true}, returnFalse = function(){return false}, ignoreProperties = /^([A-Z]|returnValue$|layer[XY]$|webkitMovement[XY]$)/, eventMethods = { preventDefault: 'isDefaultPrevented', stopImmediatePropagation: 'isImmediatePropagationStopped', stopPropagation: 'isPropagationStopped' } function compatible(event, source) { if (source || !event.isDefaultPrevented) { source || (source = event) $.each(eventMethods, function(name, predicate) { var sourceMethod = source[name] event[name] = function(){ this[predicate] = returnTrue return sourceMethod && sourceMethod.apply(source, arguments) } event[predicate] = returnFalse }) event.timeStamp || (event.timeStamp = Date.now()) if (source.defaultPrevented !== undefined ? source.defaultPrevented : 'returnValue' in source ? source.returnValue === false : source.getPreventDefault && source.getPreventDefault()) event.isDefaultPrevented = returnTrue } return event } function createProxy(event) { var key, proxy = { originalEvent: event } for (key in event) if (!ignoreProperties.test(key) && event[key] !== undefined) proxy[key] = event[key] return compatible(proxy, event) } $.fn.delegate = function(selector, event, callback){ return this.on(event, selector, callback) } $.fn.undelegate = function(selector, event, callback){ return this.off(event, selector, callback) } $.fn.live = function(event, callback){ $(document.body).delegate(this.selector, event, callback) return this } $.fn.die = function(event, callback){ $(document.body).undelegate(this.selector, event, callback) return this } $.fn.on = function(event, selector, data, callback, one){ var autoRemove, delegator, $this = this if (event && !isString(event)) { $.each(event, function(type, fn){ $this.on(type, selector, data, fn, one) }) return $this } if (!isString(selector) && !isFunction(callback) && callback !== false) callback = data, data = selector, selector = undefined if (callback === undefined || data === false) callback = data, data = undefined if (callback === false) callback = returnFalse return $this.each(function(_, element){ if (one) autoRemove = function(e){ remove(element, e.type, callback) return callback.apply(this, arguments) } if (selector) delegator = function(e){ var evt, match = $(e.target).closest(selector, element).get(0) if (match && match !== element) { evt = $.extend(createProxy(e), {currentTarget: match, liveFired: element}) return (autoRemove || callback).apply(match, [evt].concat(slice.call(arguments, 1))) } } add(element, event, callback, data, selector, delegator || autoRemove) }) } $.fn.off = function(event, selector, callback){ var $this = this if (event && !isString(event)) { $.each(event, function(type, fn){ $this.off(type, selector, fn) }) return $this } if (!isString(selector) && !isFunction(callback) && callback !== false) callback = selector, selector = undefined if (callback === false) callback = returnFalse return $this.each(function(){ remove(this, event, callback, selector) }) } $.fn.trigger = function(event, args){ event = (isString(event) || $.isPlainObject(event)) ? $.Event(event) : compatible(event) event._args = args return this.each(function(){ // handle focus(), blur() by calling them directly if (event.type in focus && typeof this[event.type] == "function") this[event.type]() // items in the collection might not be DOM elements else if ('dispatchEvent' in this) this.dispatchEvent(event) else $(this).triggerHandler(event, args) }) } // triggers event handlers on current element just as if an event occurred, // doesn't trigger an actual event, doesn't bubble $.fn.triggerHandler = function(event, args){ var e, result this.each(function(i, element){ e = createProxy(isString(event) ? $.Event(event) : event) e._args = args e.target = element $.each(findHandlers(element, event.type || event), function(i, handler){ result = handler.proxy(e) if (e.isImmediatePropagationStopped()) return false }) }) return result } // shortcut methods for `.bind(event, fn)` for each event type ;('focusin focusout focus blur load resize scroll unload click dblclick '+ 'mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave '+ 'change select keydown keypress keyup error').split(' ').forEach(function(event) { $.fn[event] = function(callback) { return (0 in arguments) ? this.bind(event, callback) : this.trigger(event) } }) $.Event = function(type, props) { if (!isString(type)) props = type, type = props.type var event = document.createEvent(specialEvents[type] || 'Events'), bubbles = true if (props) for (var name in props) (name == 'bubbles') ? (bubbles = !!props[name]) : (event[name] = props[name]) event.initEvent(type, bubbles, true) return compatible(event) } })(Zepto) ;(function($){ var jsonpID = +new Date(), document = window.document, key, name, rscript = /').html(response.replace(rscript, "")).find(selector)
: response)
callback && callback.apply(self, arguments)
}
$.ajax(options)
return this
}
var escape = encodeURIComponent
function serialize(params, obj, traditional, scope){
var type, array = $.isArray(obj), hash = $.isPlainObject(obj)
$.each(obj, function(key, value) {
type = $.type(value)
if (scope) key = traditional ? scope :
scope + '[' + (hash || type == 'object' || type == 'array' ? key : '') + ']'
// handle data in serializeArray() format
if (!scope && array) params.add(value.name, value.value)
// recurse into nested objects
else if (type == "array" || (!traditional && type == "object"))
serialize(params, value, traditional, key)
else params.add(key, value)
})
}
$.param = function(obj, traditional){
var params = []
params.add = function(key, value) {
if ($.isFunction(value)) value = value()
if (value == null) value = ""
this.push(escape(key) + '=' + escape(value))
}
serialize(params, obj, traditional)
return params.join('&').replace(/%20/g, '+')
}
})(Zepto)
;(function($){
$.fn.serializeArray = function() {
var name, type, result = [],
add = function(value) {
if (value.forEach) return value.forEach(add)
result.push({ name: name, value: value })
}
if (this[0]) $.each(this[0].elements, function(_, field){
type = field.type, name = field.name
if (name && field.nodeName.toLowerCase() != 'fieldset' &&
!field.disabled && type != 'submit' && type != 'reset' && type != 'button' && type != 'file' &&
((type != 'radio' && type != 'checkbox') || field.checked))
add($(field).val())
})
return result
}
$.fn.serialize = function(){
var result = []
this.serializeArray().forEach(function(elm){
result.push(encodeURIComponent(elm.name) + '=' + encodeURIComponent(elm.value))
})
return result.join('&')
}
$.fn.submit = function(callback) {
if (0 in arguments) this.bind('submit', callback)
else if (this.length) {
var event = $.Event('submit')
this.eq(0).trigger(event)
if (!event.isDefaultPrevented()) this.get(0).submit()
}
return this
}
})(Zepto)
;(function(){
// getComputedStyle shouldn't freak out when called
// without a valid element as argument
try {
getComputedStyle(undefined)
} catch(e) {
var nativeGetComputedStyle = getComputedStyle
window.getComputedStyle = function(element, pseudoElement){
try {
return nativeGetComputedStyle(element, pseudoElement)
} catch(e) {
return null
}
}
}
})()
return Zepto
}))
================================================
FILE: list/component.json
================================================
{
"name":"list",
"author": "fabiorogeriosj",
"dependencies": [
"base"
]
}
================================================
FILE: list/index.html
================================================
=200&&a.status<300)},e.prototype.get=function(a){return this._header[a.toLowerCase()]},e.prototype.getHeader=e.prototype.get,e.prototype.set=function(a,b){if(d(a)){for(var c in a)this.set(c,a[c]);return this}return this._header[a.toLowerCase()]=b,this.header[a]=b,this},e.prototype.unset=function(a){return delete this._header[a.toLowerCase()],delete this.header[a],this},e.prototype.field=function(a,b){if(null===a||void 0===a)throw new Error(".field(name, val) name can not be empty");if(this._data&&console.error(".field() can't be used if .send() is used. Please use only .send() or only .field() & .attach()"),d(a)){for(var c in a)this.field(c,a[c]);return this}if(Array.isArray(b)){for(var e in b)this.field(a,b[e]);return this}if(null===b||void 0===b)throw new Error(".field(name, val) val can not be empty");return"boolean"==typeof b&&(b=""+b),this._getFormData().append(a,b),this},e.prototype.abort=function(){return this._aborted?this:(this._aborted=!0,this.xhr&&this.xhr.abort(),this.req&&this.req.abort(),this.clearTimeout(),this.emit("abort"),this)},e.prototype.withCredentials=function(a){return void 0==a&&(a=!0),this._withCredentials=a,this},e.prototype.redirects=function(a){return this._maxRedirects=a,this},e.prototype.toJSON=function(){return{method:this.method,url:this.url,data:this._data,headers:this._header}},e.prototype.send=function(a){var b=d(a),c=this._header["content-type"];if(this._formData&&console.error(".send() can't be used if .attach() or .field() is used. Please use only .send() or only .field() & .attach()"),b&&!this._data)Array.isArray(a)?this._data=[]:this._isHost(a)||(this._data={});else if(a&&this._data&&this._isHost(this._data))throw Error("Can't merge these send calls");if(b&&d(this._data))for(var e in a)this._data[e]=a[e];else"string"==typeof a?(c||this.type("form"),c=this._header["content-type"],this._data="application/x-www-form-urlencoded"==c?this._data?this._data+"&"+a:a:(this._data||"")+a):this._data=a;return!b||this._isHost(a)?this:(c||this.type("json"),this)},e.prototype.sortQuery=function(a){return this._sort=void 0===a||a,this},e.prototype._timeoutError=function(a,b,c){if(!this._aborted){var d=new Error(a+b+"ms exceeded");d.timeout=b,d.code="ECONNABORTED",d.errno=c,this.timedout=!0,this.abort(),this.callback(d)}},e.prototype._setTimeouts=function(){var a=this;this._timeout&&!this._timer&&(this._timer=setTimeout(function(){a._timeoutError("Timeout of ",a._timeout,"ETIME")},this._timeout)),this._responseTimeout&&!this._responseTimeoutTimer&&(this._responseTimeoutTimer=setTimeout(function(){a._timeoutError("Response timeout of ",a._responseTimeout,"ETIMEDOUT")},this._responseTimeout))}},{"./is-object":2}],4:[function(a,b,c){function e(a){if(a)return f(a)}function f(a){for(var b in e.prototype)a[b]=e.prototype[b];return a}var d=a("./utils");b.exports=e,e.prototype.get=function(a){return this.header[a.toLowerCase()]},e.prototype._setHeaderProperties=function(a){var b=a["content-type"]||"";this.type=d.type(b);var c=d.params(b);for(var e in c)this[e]=c[e];this.links={};try{a.link&&(this.links=d.parseLinks(a.link))}catch(a){}},e.prototype._setStatusProperties=function(a){var b=a/100|0;this.status=this.statusCode=a,this.statusType=b,this.info=1==b,this.ok=2==b,this.redirect=3==b,this.clientError=4==b,this.serverError=5==b,this.error=(4==b||5==b)&&this.toError(),this.accepted=202==a,this.noContent=204==a,this.badRequest=400==a,this.unauthorized=401==a,this.notAcceptable=406==a,this.forbidden=403==a,this.notFound=404==a}},{"./utils":6}],5:[function(a,b,c){var d=["ECONNRESET","ETIMEDOUT","EADDRINFO","ESOCKETTIMEDOUT"];b.exports=function(b,c){return!!(b&&b.code&&~d.indexOf(b.code))||(!!(c&&c.status&&c.status>=500)||(!!(b&&"timeout"in b&&"ECONNABORTED"==b.code)||!!(b&&"crossDomain"in b)))}},{}],6:[function(a,b,c){c.type=function(a){return a.split(/ *; */).shift()},c.params=function(a){return a.split(/ *; */).reduce(function(a,b){var c=b.split(/ *= */),d=c.shift(),e=c.shift();return d&&e&&(a[d]=e),a},{})},c.parseLinks=function(a){return a.split(/ *, */).reduce(function(a,b){var c=b.split(/ *; */),d=c[0].slice(1,-1);return a[c[1].split(/ *= */)[1].slice(1,-1)]=d,a},{})},c.cleanHeader=function(a,b){return delete a["content-type"],delete a["content-length"],delete a["transfer-encoding"],delete a.host,b&&delete a.cookie,a}},{}],7:[function(a,b,c){function d(a){if(a)return e(a)}function e(a){for(var b in d.prototype)a[b]=d.prototype[b];return a}void 0!==b&&(b.exports=d),d.prototype.on=d.prototype.addEventListener=function(a,b){return this._callbacks=this._callbacks||{},(this._callbacks["$"+a]=this._callbacks["$"+a]||[]).push(b),this},d.prototype.once=function(a,b){function c(){this.off(a,c),b.apply(this,arguments)}return c.fn=b,this.on(a,c),this},d.prototype.off=d.prototype.removeListener=d.prototype.removeAllListeners=d.prototype.removeEventListener=function(a,b){if(this._callbacks=this._callbacks||{},0==arguments.length)return this._callbacks={},this;var c=this._callbacks["$"+a];if(!c)return this;if(1==arguments.length)return delete this._callbacks["$"+a],this;for(var d,e=0;e=0?"&":"?")+a),this._sort){var b=this.url.indexOf("?");if(b>=0){var c=this.url.substring(b+1).split("&");h(this._sort)?c.sort(this._sort):c.sort(),this.url=this.url.substring(0,b)+"?"+c.join("&")}}},t.prototype._isHost=function(b){return b&&"object"==typeof b&&!Array.isArray(b)&&"[object Object]"!==Object.prototype.toString.call(b)},t.prototype.end=function(a){return this._endCalled&&console.warn("Warning: .end() was called twice. This is not supported in superagent"),this._endCalled=!0,this._callback=a||k,this._appendQueryString(),this._end()},t.prototype._end=function(){var a=this,b=this.xhr=l.getXHR(),c=this._formData||this._data;this._setTimeouts(),b.onreadystatechange=function(){var c=b.readyState;if(c>=2&&a._responseTimeoutTimer&&clearTimeout(a._responseTimeoutTimer),4==c){var d;try{d=b.status}catch(a){d=0}if(!d){if(a.timedout||a._aborted)return;return a.crossDomainError()}a.emit("end")}};var d=function(b,c){c.total>0&&(c.percent=c.loaded/c.total*100),c.direction=b,a.emit("progress",c)};if(this.hasListeners("progress"))try{b.onprogress=d.bind(null,"download"),b.upload&&(b.upload.onprogress=d.bind(null,"upload"))}catch(a){}try{this.username&&this.password?b.open(this.method,this.url,!0,this.username,this.password):b.open(this.method,this.url,!0)}catch(a){return this.callback(a)}if(this._withCredentials&&(b.withCredentials=!0),!this._formData&&"GET"!=this.method&&"HEAD"!=this.method&&"string"!=typeof c&&!this._isHost(c)){var e=this._header["content-type"],f=this._serializer||l.serialize[e?e.split(";")[0]:""];!f&&r(e)&&(f=l.serialize["application/json"]),f&&(c=f(c))}for(var g in this.header)null!=this.header[g]&&this.header.hasOwnProperty(g)&&b.setRequestHeader(g,this.header[g]);return this._responseType&&(b.responseType=this._responseType),this.emit("request",this),b.send(void 0!==c?c:null),this},l.get=function(a,b,c){var d=l("GET",a);return"function"==typeof b&&(c=b,b=null),b&&d.query(b),c&&d.end(c),d},l.head=function(a,b,c){var d=l("HEAD",a);return"function"==typeof b&&(c=b,b=null),b&&d.send(b),c&&d.end(c),d},l.options=function(a,b,c){var d=l("OPTIONS",a);return"function"==typeof b&&(c=b,b=null),b&&d.send(b),c&&d.end(c),d},l.del=u,l.delete=u,l.patch=function(a,b,c){var d=l("PATCH",a);return"function"==typeof b&&(c=b,b=null),b&&d.send(b),c&&d.end(c),d},l.post=function(a,b,c){var d=l("POST",a);return"function"==typeof b&&(c=b,b=null),b&&d.send(b),c&&d.end(c),d},l.put=function(a,b,c){var d=l("PUT",a);return"function"==typeof b&&(c=b,b=null),b&&d.send(b),c&&d.end(c),d}},{"./is-function":1,"./is-object":2,"./request-base":3,"./response-base":4,"./should-retry":5,"component-emitter":7}]},{},[8])(8)});
(function() {
var observerWatchers = [];
var tokenObserver = 0;
var dataBind = function(){
var elms = document.querySelectorAll('[data]');
for (var i = 0; i < elms.length; i++) {
if(elms[i].getAttribute('data') && !elms[i].getAttribute('data-binded')){
var data = elms[i].getAttribute('data');
data = fetchFromObject(window, data);
if(data){
writeElement(elms[i], data);
elms[i].setAttribute('data-binded','mobileui');
dataObserver(elms[i].getAttribute('data'), tokenObserver++);
} else {
}
}
}
eventLoopBind();
}
eventLoopBind = function(){
setTimeout(function(){
dataBind();
},100);
}
reDataBind = function(observerWatcher){
//TODO: Improve logic for performance
var data = fetchFromObject(window, observerWatcher.dataKey);
var elms = document.querySelectorAll('[data-binded]');
for (var i = 0; i < elms.length; i++) {
if(elms[i].getAttribute('data-binded') === observerWatcher.dataKey){
elms[i].parentNode.removeChild(elms[i])
}
}
elms = document.querySelectorAll('[data][data-binded]');
for (var i = 0; i < elms.length; i++) {
if(elms[i].getAttribute('data') === observerWatcher.dataKey){
writeElement(elms[i], data);
}
}
observerWatcher.dataValue = copyObj(data);
}
writeElement = function(elm, data){
var bindWriteElement = function(dataObj, index){
var html = elm.outerHTML;
var exp = /\${/g;
while (match = exp.exec(html)) {
var prop = html.slice(match.index+2, html.length).split('}')[0];
var value = fetchFromObject(dataObj,prop);
html = html.replace('${'+prop+'}', value);
}
if(index) {
html = html.replace(new RegExp('\\$\\$index', 'g'), index);
}
//valid funcionBind
//TODO: Improve performance and logic
var functionBind = html.split('$$');
for (var i = 1; i < functionBind.length; i++) {
var prop = functionBind[i].split('{')[1].split(',')[0].split('}')[0];
var value = fetchFromObject(dataObj,prop);
var functionName = functionBind[i].split('{')[0];
var functionReplace = functionBind[i].split('}')[0] + '}';
var functionInvoke = 'window.MobileUI.' + functionBind[i].split('}')[0].replace(prop, "'"+value+"'").replace('{','(') + ')';
var valueBind = eval(functionInvoke);
html = html.replace(new RegExp('\\$\\$'+functionReplace, 'g'), valueBind);
}
var divBind = document.createElement('div');
elm.parentNode.insertBefore(divBind, elm);
html = html.replace('data=','data-binded=');
divBind.outerHTML = html;
}
if(data.constructor === Array){
for(var id in data){
bindWriteElement(data[id], id);
}
} else {
bindWriteElement(data);
}
}
fetchFromObject = function(obj, prop) {
if(typeof obj === 'undefined') {
console.error('Object for property ',prop,' is undefined!');
return '';
}
var _index = prop.indexOf('.')
if(_index > -1) {
return fetchFromObject(obj[prop.substring(0, _index)], prop.substr(_index + 1));
}
if(obj.constructor === String || obj.constructor === Number || obj.constructor === Boolean || obj.constructor === Date){
return !obj ? '' : obj;
}
return !obj[prop] ? '' : obj[prop];
}
dispatchEventObserver = function(watcher){
var customEvent = new CustomEvent("dataUpdated",{ "detail": {dataKey:watcher.dataKey, dataValue: watcher.dataValue}});
document.dispatchEvent(customEvent);
}
dataObserver = function(data,token){
if(!observerWatchers[token]) {
observerWatchers[token] = {
dataKey: data,
dataValue: copyObj(fetchFromObject(window, data))
};
}
var observer = fetchFromObject(window, observerWatchers[token].dataKey);
if(observerWatchers[token].dataValue.constructor === Array && observerWatchers[token].dataValue.length !== observer.length){
//TODO: Improve logic for performance
reDataBind(observerWatchers[token]);
dispatchEventObserver(observerWatchers[token]);
} else if(observerWatchers[token].dataValue.constructor === Array && observerWatchers[token].dataValue.toString() !== observer.toString()){
//TODO: Improve logic for performance
reDataBind(observerWatchers[token]);
dispatchEventObserver(observerWatchers[token]);
} else if(JSON.stringify(observerWatchers[token].dataValue) !== JSON.stringify(observer)){
//TODO: Improve logic for performance
reDataBind(observerWatchers[token]);
dispatchEventObserver(observerWatchers[token]);
}
setTimeout(function(){ dataObserver(data, token) }, 100);
}
copyObj = function(obj){
return JSON.parse(JSON.stringify(obj));
}
dataBind();
//Functions Help
window.MobileUI = {
bind: function(){
dataBind();
},
objectByForm: function(id){
var form = document.getElementById(id);
var obj = {};
var elms = form.querySelectorAll('input,textarea,select');
for (var i = 0; i < elms.length; i++) {
if(elms[i].id && elms[i].type === 'checkbox'){
obj[elms[i].id] = elms[i].checked;
} else if(elms[i].name && elms[i].type === 'radio'){
var valueRaio = form.querySelector('input[name="'+elms[i].name+'"]:checked').value;
if(valueRaio){
obj[elms[i].name] = valueRaio;
}
} else if(elms[i].id) {
obj[elms[i].id] = elms[i].value;
}
}
return obj;
},
disable: function(id){
var form = document.getElementById(id);
var elms = form.querySelectorAll('input,textarea,select,button,a');
for (var i = 0; i < elms.length; i++) {
elms[i].setAttribute('disabled','disabled');
}
},
enable: function(id){
var form = document.getElementById(id);
var elms = form.querySelectorAll('input,textarea,select,button,a');
for (var i = 0; i < elms.length; i++) {
elms[i].removeAttribute('disabled');
}
},
formByObject: function(id, data){
var form = document.getElementById(id);
var elms = form.querySelectorAll('input,textarea,select');
for (var i = 0; i < elms.length; i++) {
if(elms[i].id && elms[i].type === 'checkbox'){
elms[i].checked = data[elms[i].id];
} else if(elms[i].name && elms[i].type === 'radio'){
var inputRadio = form.querySelector('input[name="'+elms[i].name+'"][value="'+data[elms[i].name]+'"]');
if(inputRadio){
inputRadio.checked=true;
}
} else if(elms[i].id && data[elms[i].id]) {
elms[i].value = data[elms[i].id];
}
}
},
clearForm: function(id){
var form = document.getElementById(id);
var elms = form.querySelectorAll('input,textarea,select');
for (var i = 0; i < elms.length; i++) {
if(elms[i].id && elms[i].type.indexOf('select') >= 0) {
var options = elms[i].options;
for (var iO = 0; iO < options.length; iO++) {
if(options[iO].defaultSelected){
elms[i].selectedIndex = iO;
elms[i].found=true;
}
}
if(!elms[i].found){
elms[i].selectedIndex = 0;
}
} else if(elms[i].id && elms[i].type === 'checkbox') {
elms[i].checked = elms[i].getAttribute('checked')!==null ? true : false;
} else if(elms[i].name && elms[i].type === 'radio') {
form.querySelector('input[name="'+elms[i].name+'"][checked]').checked=true;
} else if(elms[i].id){
elms[i].value = '';
}
}
},
show: function(id){
document.getElementById(id).style.display='block';
},
hide: function(id){
document.getElementById(id).style.display='none';
},
showHide: function(id){
if(document.getElementById(id).offsetParent === null){
this.show(id);
} else {
this.hide(id);
}
},
focus: function(id){
document.getElementById(id).focus();
},
formatMoney: function(n, c, d, t){
var c = isNaN(c = Math.abs(c)) ? 2 : c,
d = d == undefined ? "." : d,
t = t == undefined ? "," : t,
s = n < 0 ? "-" : "",
i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c))),
j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
},
ajax: superagent
}
})();
================================================
FILE: mobileuijs/style.css
================================================
*[data] {
display: none !important;
}
================================================
FILE: momentjs/component.json
================================================
{
"name":"momentjs",
"author": "timrwood",
"dependencies": []
}
================================================
FILE: momentjs/index.html
================================================
0)for(n=0;n=0?n?"+":"":"-")+Math.pow(10,Math.max(0,i)).toString().substr(1)+s}function C(e,t,n,s){var i=s;"string"==typeof s&&(i=function(){return this[s]()}),e&&(Vt[e]=i),t&&(Vt[t[0]]=function(){return R(i.apply(this,arguments),t[1],t[2])}),n&&(Vt[n]=function(){return this.localeData().ordinal(i.apply(this,arguments),e)})}function F(e){return e.match(/\[[\s\S]/)?e.replace(/^\[|\]$/g,""):e.replace(/\\/g,"")}function U(e){var t,n,s=e.match(Ht);for(t=0,n=s.length;t=0&&Lt.test(e);)e=e.replace(Lt,function(e){return t.longDateFormat(e)||e}),Lt.lastIndex=0,n-=1;return e}function L(e,t,n){rn[e]=D(t)?t:function(e,s){return e&&n?n:t}}function G(e,t){return u(rn,e)?rn[e](t._strict,t._locale):new RegExp(V(e))}function V(e){return j(e.replace("\\","").replace(/\\(\[)|\\(\])|\[([^\]\[]*)\]|\\(.)/g,function(e,t,n,s,i){return t||n||s||i}))}function j(e){return e.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&")}function I(e,t){var n,s=t;for("string"==typeof e&&(e=[e]),r(t)&&(s=function(e,n){n[t]=w(e)}),n=0;n=0&&isFinite(o.getFullYear())&&o.setFullYear(e),o}function se(e){var t=new Date(Date.UTC.apply(null,arguments));return e<100&&e>=0&&isFinite(t.getUTCFullYear())&&t.setUTCFullYear(e),t}function ie(e,t,n){var s=7+t-n;return-((7+se(e,0,s).getUTCDay()-t)%7)+s-1}function re(e,t,n,s,i){var r,a,o=1+7*(t-1)+(7+n-s)%7+ie(e,s,i);return o<=0?a=z(r=e-1)+o:o>z(e)?(r=e+1,a=o-z(e)):(r=e,a=o),{year:r,dayOfYear:a}}function ae(e,t,n){var s,i,r=ie(e.year(),t,n),a=Math.floor((e.dayOfYear()-r-1)/7)+1;return a<1?s=a+oe(i=e.year()-1,t,n):a>oe(e.year(),t,n)?(s=a-oe(e.year(),t,n),i=e.year()+1):(i=e.year(),s=a),{week:s,year:i}}function oe(e,t,n){var s=ie(e,t,n),i=ie(e+1,t,n);return(z(e)-s+i)/7}function ue(e,t){return"string"!=typeof e?e:isNaN(e)?"number"==typeof(e=t.weekdaysParse(e))?e:null:parseInt(e,10)}function le(e,t){return"string"==typeof e?t.weekdaysParse(e)%7||7:isNaN(e)?null:e}function de(e,t,n){var s,i,r,a=e.toLocaleLowerCase();if(!this._weekdaysParse)for(this._weekdaysParse=[],this._shortWeekdaysParse=[],this._minWeekdaysParse=[],s=0;s<7;++s)r=d([2e3,1]).day(s),this._minWeekdaysParse[s]=this.weekdaysMin(r,"").toLocaleLowerCase(),this._shortWeekdaysParse[s]=this.weekdaysShort(r,"").toLocaleLowerCase(),this._weekdaysParse[s]=this.weekdays(r,"").toLocaleLowerCase();return n?"dddd"===t?-1!==(i=yn.call(this._weekdaysParse,a))?i:null:"ddd"===t?-1!==(i=yn.call(this._shortWeekdaysParse,a))?i:null:-1!==(i=yn.call(this._minWeekdaysParse,a))?i:null:"dddd"===t?-1!==(i=yn.call(this._weekdaysParse,a))?i:-1!==(i=yn.call(this._shortWeekdaysParse,a))?i:-1!==(i=yn.call(this._minWeekdaysParse,a))?i:null:"ddd"===t?-1!==(i=yn.call(this._shortWeekdaysParse,a))?i:-1!==(i=yn.call(this._weekdaysParse,a))?i:-1!==(i=yn.call(this._minWeekdaysParse,a))?i:null:-1!==(i=yn.call(this._minWeekdaysParse,a))?i:-1!==(i=yn.call(this._weekdaysParse,a))?i:-1!==(i=yn.call(this._shortWeekdaysParse,a))?i:null}function he(){function e(e,t){return t.length-e.length}var t,n,s,i,r,a=[],o=[],u=[],l=[];for(t=0;t<7;t++)n=d([2e3,1]).day(t),s=this.weekdaysMin(n,""),i=this.weekdaysShort(n,""),r=this.weekdays(n,""),a.push(s),o.push(i),u.push(r),l.push(s),l.push(i),l.push(r);for(a.sort(e),o.sort(e),u.sort(e),l.sort(e),t=0;t<7;t++)o[t]=j(o[t]),u[t]=j(u[t]),l[t]=j(l[t]);this._weekdaysRegex=new RegExp("^("+l.join("|")+")","i"),this._weekdaysShortRegex=this._weekdaysRegex,this._weekdaysMinRegex=this._weekdaysRegex,this._weekdaysStrictRegex=new RegExp("^("+u.join("|")+")","i"),this._weekdaysShortStrictRegex=new RegExp("^("+o.join("|")+")","i"),this._weekdaysMinStrictRegex=new RegExp("^("+a.join("|")+")","i")}function ce(){return this.hours()%12||12}function fe(e,t){C(e,0,0,function(){return this.localeData().meridiem(this.hours(),this.minutes(),t)})}function me(e,t){return t._meridiemParse}function _e(e){return e?e.toLowerCase().replace("_","-"):e}function ye(e){for(var t,n,s,i,r=0;r0;){if(s=ge(i.slice(0,t).join("-")))return s;if(n&&n.length>=t&&v(i,n,!0)>=t-1)break;t--}r++}return null}function ge(e){var t=null;if(!Fn[e]&&"undefined"!=typeof module&&module&&module.exports){t=Pn._abbr;try{require("moment/locale/"+e)}catch(t){try{require("./locale/"+e)}catch(e){}}pe(t)}return Fn[e]}function pe(e,t){var n;return e&&(n=i(t)?ve(e):we(e,t))&&(Pn=n),Pn._abbr}function we(e,t){if(null!==t){var n=Cn;if(t.abbr=e,null!=Fn[e])S("defineLocaleOverride","use moment.updateLocale(localeName, config) to change an existing locale. moment.defineLocale(localeName, config) should only be used for creating a new locale See http://momentjs.com/guides/#/warnings/define-locale/ for more info."),n=Fn[e]._config;else if(null!=t.parentLocale){if(null==Fn[t.parentLocale])return Un[t.parentLocale]||(Un[t.parentLocale]=[]),Un[t.parentLocale].push({name:e,config:t}),null;n=Fn[t.parentLocale]._config}return Fn[e]=new O(Y(n,t)),Un[e]&&Un[e].forEach(function(e){we(e.name,e.config)}),pe(e),Fn[e]}return delete Fn[e],null}function ve(e){var n;if(e&&e._locale&&e._locale._abbr&&(e=e._locale._abbr),!e)return Pn;if(!t(e)){if(n=ge(e))return n;e=[e]}return ye(e)}function Me(e){var t,n=e._a;return n&&-2===c(e).overflow&&(t=n[un]<0||n[un]>11?un:n[ln]<1||n[ln]>Q(n[on],n[un])?ln:n[dn]<0||n[dn]>24||24===n[dn]&&(0!==n[hn]||0!==n[cn]||0!==n[fn])?dn:n[hn]<0||n[hn]>59?hn:n[cn]<0||n[cn]>59?cn:n[fn]<0||n[fn]>999?fn:-1,c(e)._overflowDayOfYear&&(tln)&&(t=ln),c(e)._overflowWeeks&&-1===t&&(t=mn),c(e)._overflowWeekday&&-1===t&&(t=_n),c(e).overflow=t),e}function ke(e,t,n){return null!=e?e:null!=t?t:n}function Se(t){var n=new Date(e.now());return t._useUTC?[n.getUTCFullYear(),n.getUTCMonth(),n.getUTCDate()]:[n.getFullYear(),n.getMonth(),n.getDate()]}function De(e){var t,n,s,i,r=[];if(!e._d){for(s=Se(e),e._w&&null==e._a[ln]&&null==e._a[un]&&Ye(e),null!=e._dayOfYear&&(i=ke(e._a[on],s[on]),(e._dayOfYear>z(i)||0===e._dayOfYear)&&(c(e)._overflowDayOfYear=!0),n=se(i,0,e._dayOfYear),e._a[un]=n.getUTCMonth(),e._a[ln]=n.getUTCDate()),t=0;t<3&&null==e._a[t];++t)e._a[t]=r[t]=s[t];for(;t<7;t++)e._a[t]=r[t]=null==e._a[t]?2===t?1:0:e._a[t];24===e._a[dn]&&0===e._a[hn]&&0===e._a[cn]&&0===e._a[fn]&&(e._nextDay=!0,e._a[dn]=0),e._d=(e._useUTC?se:ne).apply(null,r),null!=e._tzm&&e._d.setUTCMinutes(e._d.getUTCMinutes()-e._tzm),e._nextDay&&(e._a[dn]=24),e._w&&void 0!==e._w.d&&e._w.d!==e._d.getDay()&&(c(e).weekdayMismatch=!0)}}function Ye(e){var t,n,s,i,r,a,o,u;if(null!=(t=e._w).GG||null!=t.W||null!=t.E)r=1,a=4,n=ke(t.GG,e._a[on],ae(Ie(),1,4).year),s=ke(t.W,1),((i=ke(t.E,1))<1||i>7)&&(u=!0);else{r=e._locale._week.dow,a=e._locale._week.doy;var l=ae(Ie(),r,a);n=ke(t.gg,e._a[on],l.year),s=ke(t.w,l.week),null!=t.d?((i=t.d)<0||i>6)&&(u=!0):null!=t.e?(i=t.e+r,(t.e<0||t.e>6)&&(u=!0)):i=r}s<1||s>oe(n,r,a)?c(e)._overflowWeeks=!0:null!=u?c(e)._overflowWeekday=!0:(o=re(n,s,i,r,a),e._a[on]=o.year,e._dayOfYear=o.dayOfYear)}function Oe(e){var t,n,s,i,r,a,o=e._i,u=Nn.exec(o)||Hn.exec(o);if(u){for(c(e).iso=!0,t=0,n=Gn.length;t0&&c(t).unusedInput.push(a),o=o.slice(o.indexOf(s)+s.length),l+=s.length),Vt[r]?(s?c(t).empty=!1:c(t).unusedTokens.push(r),A(r,s,t)):t._strict&&!s&&c(t).unusedTokens.push(r);c(t).charsLeftOver=u-l,o.length>0&&c(t).unusedInput.push(o),t._a[dn]<=12&&!0===c(t).bigHour&&t._a[dn]>0&&(c(t).bigHour=void 0),c(t).parsedDateParts=t._a.slice(0),c(t).meridiem=t._meridiem,t._a[dn]=Ue(t._locale,t._a[dn],t._meridiem),De(t),Me(t)}else Re(t);else Oe(t)}function Ue(e,t,n){var s;return null==n?t:null!=e.meridiemHour?e.meridiemHour(t,n):null!=e.isPM?((s=e.isPM(n))&&t<12&&(t+=12),s||12!==t||(t=0),t):t}function Ne(e){var t,n,s,i,r;if(0===e._f.length)return c(e).invalidFormat=!0,void(e._d=new Date(NaN));for(i=0;ir&&(t=r),dt.call(this,e,t,n,s,i))}function dt(e,t,n,s,i){var r=re(e,t,n,s,i),a=se(r.year,0,r.dayOfYear);return this.year(a.getUTCFullYear()),this.month(a.getUTCMonth()),this.date(a.getUTCDate()),this}function ht(e){return e}function ct(e,t,n,s){var i=ve(),r=d().set(s,t);return i[n](r,e)}function ft(e,t,n){if(r(e)&&(t=e,e=void 0),e=e||"",null!=t)return ct(e,t,n,"month");var s,i=[];for(s=0;s<12;s++)i[s]=ct(e,s,n,"month");return i}function mt(e,t,n,s){"boolean"==typeof e?(r(t)&&(n=t,t=void 0),t=t||""):(n=t=e,e=!1,r(t)&&(n=t,t=void 0),t=t||"");var i=ve(),a=e?i._week.dow:0;if(null!=n)return ct(t,(n+a)%7,s,"day");var o,u=[];for(o=0;o<7;o++)u[o]=ct(t,(o+a)%7,s,"day");return u}function _t(e,t,n,s){var i=Ke(t,n);return e._milliseconds+=s*i._milliseconds,e._days+=s*i._days,e._months+=s*i._months,e._bubble()}function yt(e){return e<0?Math.floor(e):Math.ceil(e)}function gt(e){return 4800*e/146097}function pt(e){return 146097*e/4800}function wt(e){return function(){return this.as(e)}}function vt(e){return function(){return this.isValid()?this._data[e]:NaN}}function Mt(e,t,n,s,i){return i.relativeTime(t||1,!!n,e,s)}function kt(e,t,n){var s=Ke(e).abs(),i=ks(s.as("s")),r=ks(s.as("m")),a=ks(s.as("h")),o=ks(s.as("d")),u=ks(s.as("M")),l=ks(s.as("y")),d=i<=Ss.ss&&["s",i]||i0,d[4]=n,Mt.apply(null,d)}function St(e){return(e>0)-(e<0)||+e}function Dt(){if(!this.isValid())return this.localeData().invalidDate();var e,t,n,s=Ds(this._milliseconds)/1e3,i=Ds(this._days),r=Ds(this._months);t=p((e=p(s/60))/60),s%=60,e%=60;var a=n=p(r/12),o=r%=12,u=i,l=t,d=e,h=s?s.toFixed(3).replace(/\.?0+$/,""):"",c=this.asSeconds();if(!c)return"P0D";var f=c<0?"-":"",m=St(this._months)!==St(c)?"-":"",_=St(this._days)!==St(c)?"-":"",y=St(this._milliseconds)!==St(c)?"-":"";return f+"P"+(a?m+a+"Y":"")+(o?m+o+"M":"")+(u?_+u+"D":"")+(l||d||h?"T":"")+(l?y+l+"H":"")+(d?y+d+"M":"")+(h?y+h+"S":"")}var Yt,Ot;Ot=Array.prototype.some?Array.prototype.some:function(e){for(var t=Object(this),n=t.length>>>0,s=0;s68?1900:2e3)};var yn,gn=$("FullYear",!0);yn=Array.prototype.indexOf?Array.prototype.indexOf:function(e){var t;for(t=0;tthis?this:e:m()}),Zn=["year","quarter","month","week","day","hour","minute","second","millisecond"];qe("Z",":"),qe("ZZ",""),L("Z",tn),L("ZZ",tn),I(["Z","ZZ"],function(e,t,n){n._useUTC=!0,n._tzm=Je(tn,e)});var $n=/([\+\-]|\d\d)/gi;e.updateOffset=function(){};var qn=/^(\-|\+)?(?:(\d*)[. ])?(\d+)\:(\d+)(?:\:(\d+)(\.\d*)?)?$/,Jn=/^(-|\+)?P(?:([-+]?[0-9,.]*)Y)?(?:([-+]?[0-9,.]*)M)?(?:([-+]?[0-9,.]*)W)?(?:([-+]?[0-9,.]*)D)?(?:T(?:([-+]?[0-9,.]*)H)?(?:([-+]?[0-9,.]*)M)?(?:([-+]?[0-9,.]*)S)?)?$/;Ke.fn=ze.prototype,Ke.invalid=function(){return Ke(NaN)};var Bn=st(1,"add"),Qn=st(-1,"subtract");e.defaultFormat="YYYY-MM-DDTHH:mm:ssZ",e.defaultFormatUtc="YYYY-MM-DDTHH:mm:ss[Z]";var Xn=k("moment().lang() is deprecated. Instead, use moment().localeData() to get the language configuration. Use moment().locale() to change languages.",function(e){return void 0===e?this.localeData():this.locale(e)});C(0,["gg",2],0,function(){return this.weekYear()%100}),C(0,["GG",2],0,function(){return this.isoWeekYear()%100}),ut("gggg","weekYear"),ut("ggggg","weekYear"),ut("GGGG","isoWeekYear"),ut("GGGGG","isoWeekYear"),x("weekYear","gg"),x("isoWeekYear","GG"),P("weekYear",1),P("isoWeekYear",1),L("G",Kt),L("g",Kt),L("GG",Zt,It),L("gg",Zt,It),L("GGGG",Bt,At),L("gggg",Bt,At),L("GGGGG",Qt,zt),L("ggggg",Qt,zt),E(["gggg","ggggg","GGGG","GGGGG"],function(e,t,n,s){t[s.substr(0,2)]=w(e)}),E(["gg","GG"],function(t,n,s,i){n[i]=e.parseTwoDigitYear(t)}),C("Q",0,"Qo","quarter"),x("quarter","Q"),P("quarter",7),L("Q",jt),I("Q",function(e,t){t[un]=3*(w(e)-1)}),C("D",["DD",2],"Do","date"),x("date","D"),P("date",9),L("D",Zt),L("DD",Zt,It),L("Do",function(e,t){return e?t._dayOfMonthOrdinalParse||t._ordinalParse:t._dayOfMonthOrdinalParseLenient}),I(["D","DD"],ln),I("Do",function(e,t){t[ln]=w(e.match(Zt)[0],10)});var Kn=$("Date",!0);C("DDD",["DDDD",3],"DDDo","dayOfYear"),x("dayOfYear","DDD"),P("dayOfYear",4),L("DDD",Jt),L("DDDD",Et),I(["DDD","DDDD"],function(e,t,n){n._dayOfYear=w(e)}),C("m",["mm",2],0,"minute"),x("minute","m"),P("minute",14),L("m",Zt),L("mm",Zt,It),I(["m","mm"],hn);var es=$("Minutes",!1);C("s",["ss",2],0,"second"),x("second","s"),P("second",15),L("s",Zt),L("ss",Zt,It),I(["s","ss"],cn);var ts=$("Seconds",!1);C("S",0,0,function(){return~~(this.millisecond()/100)}),C(0,["SS",2],0,function(){return~~(this.millisecond()/10)}),C(0,["SSS",3],0,"millisecond"),C(0,["SSSS",4],0,function(){return 10*this.millisecond()}),C(0,["SSSSS",5],0,function(){return 100*this.millisecond()}),C(0,["SSSSSS",6],0,function(){return 1e3*this.millisecond()}),C(0,["SSSSSSS",7],0,function(){return 1e4*this.millisecond()}),C(0,["SSSSSSSS",8],0,function(){return 1e5*this.millisecond()}),C(0,["SSSSSSSSS",9],0,function(){return 1e6*this.millisecond()}),x("millisecond","ms"),P("millisecond",16),L("S",Jt,jt),L("SS",Jt,It),L("SSS",Jt,Et);var ns;for(ns="SSSS";ns.length<=9;ns+="S")L(ns,Xt);for(ns="S";ns.length<=9;ns+="S")I(ns,function(e,t){t[fn]=w(1e3*("0."+e))});var ss=$("Milliseconds",!1);C("z",0,0,"zoneAbbr"),C("zz",0,0,"zoneName");var is=y.prototype;is.add=Bn,is.calendar=function(t,n){var s=t||Ie(),i=Be(s,this).startOf("day"),r=e.calendarFormat(this,i)||"sameElse",a=n&&(D(n[r])?n[r].call(this,s):n[r]);return this.format(a||this.localeData().calendar(r,this,Ie(s)))},is.clone=function(){return new y(this)},is.diff=function(e,t,n){var s,i,r;if(!this.isValid())return NaN;if(!(s=Be(e,this)).isValid())return NaN;switch(i=6e4*(s.utcOffset()-this.utcOffset()),t=T(t)){case"year":r=rt(this,s)/12;break;case"month":r=rt(this,s);break;case"quarter":r=rt(this,s)/3;break;case"second":r=(this-s)/1e3;break;case"minute":r=(this-s)/6e4;break;case"hour":r=(this-s)/36e5;break;case"day":r=(this-s-i)/864e5;break;case"week":r=(this-s-i)/6048e5;break;default:r=this-s}return n?r:p(r)},is.endOf=function(e){return void 0===(e=T(e))||"millisecond"===e?this:("date"===e&&(e="day"),this.startOf(e).add(1,"isoWeek"===e?"week":e).subtract(1,"ms"))},is.format=function(t){t||(t=this.isUtc()?e.defaultFormatUtc:e.defaultFormat);var n=N(this,t);return this.localeData().postformat(n)},is.from=function(e,t){return this.isValid()&&(g(e)&&e.isValid()||Ie(e).isValid())?Ke({to:this,from:e}).locale(this.locale()).humanize(!t):this.localeData().invalidDate()},is.fromNow=function(e){return this.from(Ie(),e)},is.to=function(e,t){return this.isValid()&&(g(e)&&e.isValid()||Ie(e).isValid())?Ke({from:this,to:e}).locale(this.locale()).humanize(!t):this.localeData().invalidDate()},is.toNow=function(e){return this.to(Ie(),e)},is.get=function(e){return e=T(e),D(this[e])?this[e]():this},is.invalidAt=function(){return c(this).overflow},is.isAfter=function(e,t){var n=g(e)?e:Ie(e);return!(!this.isValid()||!n.isValid())&&("millisecond"===(t=T(i(t)?"millisecond":t))?this.valueOf()>n.valueOf():n.valueOf()9999?N(e,"YYYYYY-MM-DD[T]HH:mm:ss.SSS[Z]"):D(Date.prototype.toISOString)?this.toDate().toISOString():N(e,"YYYY-MM-DD[T]HH:mm:ss.SSS[Z]")},is.inspect=function(){if(!this.isValid())return"moment.invalid(/* "+this._i+" */)";var e="moment",t="";this.isLocal()||(e=0===this.utcOffset()?"moment.utc":"moment.parseZone",t="Z");var n="["+e+'("]',s=0<=this.year()&&this.year()<=9999?"YYYY":"YYYYYY",i=t+'[")]';return this.format(n+s+"-MM-DD[T]HH:mm:ss.SSS"+i)},is.toJSON=function(){return this.isValid()?this.toISOString():null},is.toString=function(){return this.clone().locale("en").format("ddd MMM DD YYYY HH:mm:ss [GMT]ZZ")},is.unix=function(){return Math.floor(this.valueOf()/1e3)},is.valueOf=function(){return this._d.valueOf()-6e4*(this._offset||0)},is.creationData=function(){return{input:this._i,format:this._f,locale:this._locale,isUTC:this._isUTC,strict:this._strict}},is.year=gn,is.isLeapYear=function(){return Z(this.year())},is.weekYear=function(e){return lt.call(this,e,this.week(),this.weekday(),this.localeData()._week.dow,this.localeData()._week.doy)},is.isoWeekYear=function(e){return lt.call(this,e,this.isoWeek(),this.isoWeekday(),1,4)},is.quarter=is.quarters=function(e){return null==e?Math.ceil((this.month()+1)/3):this.month(3*(e-1)+this.month()%3)},is.month=ee,is.daysInMonth=function(){return Q(this.year(),this.month())},is.week=is.weeks=function(e){var t=this.localeData().week(this);return null==e?t:this.add(7*(e-t),"d")},is.isoWeek=is.isoWeeks=function(e){var t=ae(this,1,4).week;return null==e?t:this.add(7*(e-t),"d")},is.weeksInYear=function(){var e=this.localeData()._week;return oe(this.year(),e.dow,e.doy)},is.isoWeeksInYear=function(){return oe(this.year(),1,4)},is.date=Kn,is.day=is.days=function(e){if(!this.isValid())return null!=e?this:NaN;var t=this._isUTC?this._d.getUTCDay():this._d.getDay();return null!=e?(e=ue(e,this.localeData()),this.add(e-t,"d")):t},is.weekday=function(e){if(!this.isValid())return null!=e?this:NaN;var t=(this.day()+7-this.localeData()._week.dow)%7;return null==e?t:this.add(e-t,"d")},is.isoWeekday=function(e){if(!this.isValid())return null!=e?this:NaN;if(null!=e){var t=le(e,this.localeData());return this.day(this.day()%7?t:t-7)}return this.day()||7},is.dayOfYear=function(e){var t=Math.round((this.clone().startOf("day")-this.clone().startOf("year"))/864e5)+1;return null==e?t:this.add(e-t,"d")},is.hour=is.hours=Rn,is.minute=is.minutes=es,is.second=is.seconds=ts,is.millisecond=is.milliseconds=ss,is.utcOffset=function(t,n,s){var i,r=this._offset||0;if(!this.isValid())return null!=t?this:NaN;if(null!=t){if("string"==typeof t){if(null===(t=Je(tn,t)))return this}else Math.abs(t)<16&&!s&&(t*=60);return!this._isUTC&&n&&(i=Qe(this)),this._offset=t,this._isUTC=!0,null!=i&&this.add(i,"m"),r!==t&&(!n||this._changeInProgress?it(this,Ke(t-r,"m"),1,!1):this._changeInProgress||(this._changeInProgress=!0,e.updateOffset(this,!0),this._changeInProgress=null)),this}return this._isUTC?r:Qe(this)},is.utc=function(e){return this.utcOffset(0,e)},is.local=function(e){return this._isUTC&&(this.utcOffset(0,e),this._isUTC=!1,e&&this.subtract(Qe(this),"m")),this},is.parseZone=function(){if(null!=this._tzm)this.utcOffset(this._tzm,!1,!0);else if("string"==typeof this._i){var e=Je(en,this._i);null!=e?this.utcOffset(e):this.utcOffset(0,!0)}return this},is.hasAlignedHourOffset=function(e){return!!this.isValid()&&(e=e?Ie(e).utcOffset():0,(this.utcOffset()-e)%60==0)},is.isDST=function(){return this.utcOffset()>this.clone().month(0).utcOffset()||this.utcOffset()>this.clone().month(5).utcOffset()},is.isLocal=function(){return!!this.isValid()&&!this._isUTC},is.isUtcOffset=function(){return!!this.isValid()&&this._isUTC},is.isUtc=Xe,is.isUTC=Xe,is.zoneAbbr=function(){return this._isUTC?"UTC":""},is.zoneName=function(){return this._isUTC?"Coordinated Universal Time":""},is.dates=k("dates accessor is deprecated. Use date instead.",Kn),is.months=k("months accessor is deprecated. Use month instead",ee),is.years=k("years accessor is deprecated. Use year instead",gn),is.zone=k("moment().zone is deprecated, use moment().utcOffset instead. http://momentjs.com/guides/#/warnings/zone/",function(e,t){return null!=e?("string"!=typeof e&&(e=-e),this.utcOffset(e,t),this):-this.utcOffset()}),is.isDSTShifted=k("isDSTShifted is deprecated. See http://momentjs.com/guides/#/warnings/dst-shifted/ for more information",function(){if(!i(this._isDSTShifted))return this._isDSTShifted;var e={};if(_(e,this),(e=Ge(e))._a){var t=e._isUTC?d(e._a):Ie(e._a);this._isDSTShifted=this.isValid()&&v(e._a,t.toArray())>0}else this._isDSTShifted=!1;return this._isDSTShifted});var rs=O.prototype;rs.calendar=function(e,t,n){var s=this._calendar[e]||this._calendar.sameElse;return D(s)?s.call(t,n):s},rs.longDateFormat=function(e){var t=this._longDateFormat[e],n=this._longDateFormat[e.toUpperCase()];return t||!n?t:(this._longDateFormat[e]=n.replace(/MMMM|MM|DD|dddd/g,function(e){return e.slice(1)}),this._longDateFormat[e])},rs.invalidDate=function(){return this._invalidDate},rs.ordinal=function(e){return this._ordinal.replace("%d",e)},rs.preparse=ht,rs.postformat=ht,rs.relativeTime=function(e,t,n,s){var i=this._relativeTime[n];return D(i)?i(e,t,n,s):i.replace(/%d/i,e)},rs.pastFuture=function(e,t){var n=this._relativeTime[e>0?"future":"past"];return D(n)?n(t):n.replace(/%s/i,t)},rs.set=function(e){var t,n;for(n in e)D(t=e[n])?this[n]=t:this["_"+n]=t;this._config=e,this._dayOfMonthOrdinalParseLenient=new RegExp((this._dayOfMonthOrdinalParse.source||this._ordinalParse.source)+"|"+/\d{1,2}/.source)},rs.months=function(e,n){return e?t(this._months)?this._months[e.month()]:this._months[(this._months.isFormat||pn).test(n)?"format":"standalone"][e.month()]:t(this._months)?this._months:this._months.standalone},rs.monthsShort=function(e,n){return e?t(this._monthsShort)?this._monthsShort[e.month()]:this._monthsShort[pn.test(n)?"format":"standalone"][e.month()]:t(this._monthsShort)?this._monthsShort:this._monthsShort.standalone},rs.monthsParse=function(e,t,n){var s,i,r;if(this._monthsParseExact)return X.call(this,e,t,n);for(this._monthsParse||(this._monthsParse=[],this._longMonthsParse=[],this._shortMonthsParse=[]),s=0;s<12;s++){if(i=d([2e3,s]),n&&!this._longMonthsParse[s]&&(this._longMonthsParse[s]=new RegExp("^"+this.months(i,"").replace(".","")+"$","i"),this._shortMonthsParse[s]=new RegExp("^"+this.monthsShort(i,"").replace(".","")+"$","i")),n||this._monthsParse[s]||(r="^"+this.months(i,"")+"|^"+this.monthsShort(i,""),this._monthsParse[s]=new RegExp(r.replace(".",""),"i")),n&&"MMMM"===t&&this._longMonthsParse[s].test(e))return s;if(n&&"MMM"===t&&this._shortMonthsParse[s].test(e))return s;if(!n&&this._monthsParse[s].test(e))return s}},rs.monthsRegex=function(e){return this._monthsParseExact?(u(this,"_monthsRegex")||te.call(this),e?this._monthsStrictRegex:this._monthsRegex):(u(this,"_monthsRegex")||(this._monthsRegex=kn),this._monthsStrictRegex&&e?this._monthsStrictRegex:this._monthsRegex)},rs.monthsShortRegex=function(e){return this._monthsParseExact?(u(this,"_monthsRegex")||te.call(this),e?this._monthsShortStrictRegex:this._monthsShortRegex):(u(this,"_monthsShortRegex")||(this._monthsShortRegex=Mn),this._monthsShortStrictRegex&&e?this._monthsShortStrictRegex:this._monthsShortRegex)},rs.week=function(e){return ae(e,this._week.dow,this._week.doy).week},rs.firstDayOfYear=function(){return this._week.doy},rs.firstDayOfWeek=function(){return this._week.dow},rs.weekdays=function(e,n){return e?t(this._weekdays)?this._weekdays[e.day()]:this._weekdays[this._weekdays.isFormat.test(n)?"format":"standalone"][e.day()]:t(this._weekdays)?this._weekdays:this._weekdays.standalone},rs.weekdaysMin=function(e){return e?this._weekdaysMin[e.day()]:this._weekdaysMin},rs.weekdaysShort=function(e){return e?this._weekdaysShort[e.day()]:this._weekdaysShort},rs.weekdaysParse=function(e,t,n){var s,i,r;if(this._weekdaysParseExact)return de.call(this,e,t,n);for(this._weekdaysParse||(this._weekdaysParse=[],this._minWeekdaysParse=[],this._shortWeekdaysParse=[],this._fullWeekdaysParse=[]),s=0;s<7;s++){if(i=d([2e3,1]).day(s),n&&!this._fullWeekdaysParse[s]&&(this._fullWeekdaysParse[s]=new RegExp("^"+this.weekdays(i,"").replace(".",".?")+"$","i"),this._shortWeekdaysParse[s]=new RegExp("^"+this.weekdaysShort(i,"").replace(".",".?")+"$","i"),this._minWeekdaysParse[s]=new RegExp("^"+this.weekdaysMin(i,"").replace(".",".?")+"$","i")),this._weekdaysParse[s]||(r="^"+this.weekdays(i,"")+"|^"+this.weekdaysShort(i,"")+"|^"+this.weekdaysMin(i,""),this._weekdaysParse[s]=new RegExp(r.replace(".",""),"i")),n&&"dddd"===t&&this._fullWeekdaysParse[s].test(e))return s;if(n&&"ddd"===t&&this._shortWeekdaysParse[s].test(e))return s;if(n&&"dd"===t&&this._minWeekdaysParse[s].test(e))return s;if(!n&&this._weekdaysParse[s].test(e))return s}},rs.weekdaysRegex=function(e){return this._weekdaysParseExact?(u(this,"_weekdaysRegex")||he.call(this),e?this._weekdaysStrictRegex:this._weekdaysRegex):(u(this,"_weekdaysRegex")||(this._weekdaysRegex=xn),this._weekdaysStrictRegex&&e?this._weekdaysStrictRegex:this._weekdaysRegex)},rs.weekdaysShortRegex=function(e){return this._weekdaysParseExact?(u(this,"_weekdaysRegex")||he.call(this),e?this._weekdaysShortStrictRegex:this._weekdaysShortRegex):(u(this,"_weekdaysShortRegex")||(this._weekdaysShortRegex=Tn),this._weekdaysShortStrictRegex&&e?this._weekdaysShortStrictRegex:this._weekdaysShortRegex)},rs.weekdaysMinRegex=function(e){return this._weekdaysParseExact?(u(this,"_weekdaysRegex")||he.call(this),e?this._weekdaysMinStrictRegex:this._weekdaysMinRegex):(u(this,"_weekdaysMinRegex")||(this._weekdaysMinRegex=bn),this._weekdaysMinStrictRegex&&e?this._weekdaysMinStrictRegex:this._weekdaysMinRegex)},rs.isPM=function(e){return"p"===(e+"").toLowerCase().charAt(0)},rs.meridiem=function(e,t,n){return e>11?n?"pm":"PM":n?"am":"AM"},pe("en",{dayOfMonthOrdinalParse:/\d{1,2}(th|st|nd|rd)/,ordinal:function(e){var t=e%10;return e+(1===w(e%100/10)?"th":1===t?"st":2===t?"nd":3===t?"rd":"th")}}),e.lang=k("moment.lang is deprecated. Use moment.locale instead.",pe),e.langData=k("moment.langData is deprecated. Use moment.localeData instead.",ve);var as=Math.abs,os=wt("ms"),us=wt("s"),ls=wt("m"),ds=wt("h"),hs=wt("d"),cs=wt("w"),fs=wt("M"),ms=wt("y"),_s=vt("milliseconds"),ys=vt("seconds"),gs=vt("minutes"),ps=vt("hours"),ws=vt("days"),vs=vt("months"),Ms=vt("years"),ks=Math.round,Ss={ss:44,s:45,m:45,h:22,d:26,M:11},Ds=Math.abs,Ys=ze.prototype;return Ys.isValid=function(){return this._isValid},Ys.abs=function(){var e=this._data;return this._milliseconds=as(this._milliseconds),this._days=as(this._days),this._months=as(this._months),e.milliseconds=as(e.milliseconds),e.seconds=as(e.seconds),e.minutes=as(e.minutes),e.hours=as(e.hours),e.months=as(e.months),e.years=as(e.years),this},Ys.add=function(e,t){return _t(this,e,t,1)},Ys.subtract=function(e,t){return _t(this,e,t,-1)},Ys.as=function(e){if(!this.isValid())return NaN;var t,n,s=this._milliseconds;if("month"===(e=T(e))||"year"===e)return t=this._days+s/864e5,n=this._months+gt(t),"month"===e?n:n/12;switch(t=this._days+Math.round(pt(this._months)),e){case"week":return t/7+s/6048e5;case"day":return t+s/864e5;case"hour":return 24*t+s/36e5;case"minute":return 1440*t+s/6e4;case"second":return 86400*t+s/1e3;case"millisecond":return Math.floor(864e5*t)+s;default:throw new Error("Unknown unit "+e)}},Ys.asMilliseconds=os,Ys.asSeconds=us,Ys.asMinutes=ls,Ys.asHours=ds,Ys.asDays=hs,Ys.asWeeks=cs,Ys.asMonths=fs,Ys.asYears=ms,Ys.valueOf=function(){return this.isValid()?this._milliseconds+864e5*this._days+this._months%12*2592e6+31536e6*w(this._months/12):NaN},Ys._bubble=function(){var e,t,n,s,i,r=this._milliseconds,a=this._days,o=this._months,u=this._data;return r>=0&&a>=0&&o>=0||r<=0&&a<=0&&o<=0||(r+=864e5*yt(pt(o)+a),a=0,o=0),u.milliseconds=r%1e3,e=p(r/1e3),u.seconds=e%60,t=p(e/60),u.minutes=t%60,n=p(t/60),u.hours=n%24,a+=p(n/24),i=p(gt(a)),o+=i,a-=yt(pt(i)),s=p(o/12),o%=12,u.days=a,u.months=o,u.years=s,this},Ys.clone=function(){return Ke(this)},Ys.get=function(e){return e=T(e),this.isValid()?this[e+"s"]():NaN},Ys.milliseconds=_s,Ys.seconds=ys,Ys.minutes=gs,Ys.hours=ps,Ys.days=ws,Ys.weeks=function(){return p(this.days()/7)},Ys.months=vs,Ys.years=Ms,Ys.humanize=function(e){if(!this.isValid())return this.localeData().invalidDate();var t=this.localeData(),n=kt(this,!e,t);return e&&(n=t.pastFuture(+this,n)),t.postformat(n)},Ys.toISOString=Dt,Ys.toString=Dt,Ys.toJSON=Dt,Ys.locale=at,Ys.localeData=ot,Ys.toIsoString=k("toIsoString() is deprecated. Please use toISOString() instead (notice the capitals)",Dt),Ys.lang=Xn,C("X",0,0,"unix"),C("x",0,0,"valueOf"),L("x",Kt),L("X",nn),I("X",function(e,t,n){n._d=new Date(1e3*parseFloat(e,10))}),I("x",function(e,t,n){n._d=new Date(w(e))}),e.version="2.19.0",function(e){Yt=e}(Ie),e.fn=is,e.min=function(){return Ee("isBefore",[].slice.call(arguments,0))},e.max=function(){return Ee("isAfter",[].slice.call(arguments,0))},e.now=function(){return Date.now?Date.now():+new Date},e.utc=d,e.unix=function(e){return Ie(1e3*e)},e.months=function(e,t){return ft(e,t,"months")},e.isDate=a,e.locale=pe,e.invalid=m,e.duration=Ke,e.isMoment=g,e.weekdays=function(e,t,n){return mt(e,t,n,"weekdays")},e.parseZone=function(){return Ie.apply(null,arguments).parseZone()},e.localeData=ve,e.isDuration=Ze,e.monthsShort=function(e,t){return ft(e,t,"monthsShort")},e.weekdaysMin=function(e,t,n){return mt(e,t,n,"weekdaysMin")},e.defineLocale=we,e.updateLocale=function(e,t){if(null!=t){var n,s=Cn;null!=Fn[e]&&(s=Fn[e]._config),(n=new O(t=Y(s,t))).parentLocale=Fn[e],Fn[e]=n,pe(e)}else null!=Fn[e]&&(null!=Fn[e].parentLocale?Fn[e]=Fn[e].parentLocale:null!=Fn[e]&&delete Fn[e]);return Fn[e]},e.locales=function(){return Pt(Fn)},e.weekdaysShort=function(e,t,n){return mt(e,t,n,"weekdaysShort")},e.normalizeUnits=T,e.relativeTimeRounding=function(e){return void 0===e?ks:"function"==typeof e&&(ks=e,!0)},e.relativeTimeThreshold=function(e,t){return void 0!==Ss[e]&&(void 0===t?Ss[e]:(Ss[e]=t,"s"===e&&(Ss.ss=t-1),!0))},e.calendarFormat=function(e,t){var n=e.diff(t,"days",!0);return n<-6?"sameElse":n<-1?"lastWeek":n<0?"lastDay":n<1?"sameDay":n<2?"nextDay":n<7?"nextWeek":"sameElse"},e.prototype=is,e});
================================================
FILE: package.json
================================================
{
"name": "components",
"version": "1.0.0",
"description": "Components",
"main": "generate_doc.js",
"dependencies": {
"node-minify": "^2.0.4",
"wrench": "^1.5.9"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/MobileUI/components.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/MobileUI/components/issues"
},
"homepage": "https://github.com/MobileUI/components#readme"
}
================================================
FILE: page/component.json
================================================
{
"name":"page",
"author": "fabiorogeriosj",
"dependencies": []
}
================================================
FILE: page/contact.html
================================================
================================================
FILE: page/contact.js
================================================
function functionOpenContact(params){
document.getElementById('name').value = params.name;
}
================================================
FILE: page/contacts.html
================================================
================================================
FILE: page/index.html
================================================
================================================
FILE: progress-semicircle/script.js
================================================
window.ProgressSemicircle = {
rebind : function(){
var self = this;
var progress = document.querySelectorAll('.progress-semicircle');
for (var i = 0; i < progress.length; i++) {
progress[i].classList.remove("binded");
progress[i].innerHTML = "";
}
self.bind();
},
bind : function(){
var progress = document.querySelectorAll('.progress-semicircle:not(.binded)');
var self = this;
for (var i = 0; i < progress.length; i++) {
var config = {};
config.value = Number(progress[i].getAttribute('value'));
config.maxValue = Number(progress[i].getAttribute('maxValue')) || 100;
config.title = progress[i].getAttribute('title') || '';
config.subTitle = progress[i].getAttribute('subTitle') || '';
config.text = progress[i].getAttribute('text') || '';
config.color = progress[i].getAttribute('color') || 'blue';
config.textColor = progress[i].getAttribute('textColor') || 'grey-800';
config.textWeight = progress[i].getAttribute('textWeight') || 'normal';
config.titleWeight = progress[i].getAttribute('titleWeight') || 'normal';
config.titleLineHeight = progress[i].getAttribute('titleLineHeight') || 'normal';
config.subTitleWeight = progress[i].getAttribute('subTitleWeight') || 'normal';
config.titleColor = progress[i].getAttribute('titleColor') || 'grey-500';
config.subTitleColor = progress[i].getAttribute('subTitleColor') || 'grey-300';
config.width = progress[i].getAttribute('width') || '100%';
config.height = progress[i].getAttribute('height') || '300px';
config.trailColor = progress[i].getAttribute('trailColor') || 'grey';
config.strokeWidth = progress[i].getAttribute('strokeWidth') || '1';
config.trailWidth = progress[i].getAttribute('trailWidth') || '1';
config.textSize = progress[i].getAttribute('textSize') || '16px';
config.titleSize = progress[i].getAttribute('titleSize') || '14px';
config.subTitleSize = progress[i].getAttribute('subTitleSize') || '12px';
config.fill = progress[i].getAttribute('fill') || '';
config.padding = progress[i].getAttribute('padding') || '0';
config.textMargin = progress[i].getAttribute('textMargin') || '100px 0';
config.durationAnimate = Number(progress[i].getAttribute('duration') || '800');
self.create(progress[i], config);
}
},
create: function(elm, config){
if(!elm.classList.contains('binded')){
elm.classList.add('binded');
if(!elm.classList.contains('progress-semicircle')){
elm.classList.add('progress-semicircle-js')
}
config.value = config.value || 0;
config.maxValue = config.maxValue || 100;
config.title = config.title || '';
config.subTitle = config.subTitle || '';
config.text = config.text || '';
config.color = config.color || 'blue';
config.textColor = config.textColor || 'grey-800';
config.textWeight = config.textWeight || 'normal';
config.titleWeight = config.titleWeight || 'normal';
config.subTitleWeight = config.subTitleWeight || 'normal';
config.titleColor = config.titleColor || 'grey-500';
config.subTitleColor = config.subTitleColor || 'grey-300';
config.width = config.width || '100%';
config.height = config.height || '300px';
config.trailColor = config.trailColor || 'grey';
config.strokeWidth = config.strokeWidth || '1';
config.trailWidth = config.trailWidth || '1';
config.textSize = config.textSize || '16px';
config.titleSize = config.titleSize || '14px';
config.subTitleSize = config.subTitleSize || '12px';
config.fill = config.fill || '';
config.padding = config.padding || '0';
config.durationAnimate = config.durationAnimate || '800';
config.textMargin = config.textMargin || '100px 0';
elm.style.width=config.width;
elm.style.height=config.height;
elm.progressSemicircle = {};
elm.progressSemicircle.bar = new ProgressBar.SemiCircle(elm, {
color: colorsMobileUI[config.color],
trailColor: colorsMobileUI[config.trailColor],
strokeWidth: config.strokeWidth,
trailWidth: config.trailWidth,
easing: 'easeInOut',
duration: config.durationAnimate,
fill: config.fill,
text: {
alignToBottom: false,
style: {
color: colorsMobileUI[config.textColor],
position: 'absolute',
fontSize: config.textSize,
fontWeight: config.textWeight,
left: '50%',
padding: 0,
margin: config.textMargin,
}
},
svgStyle: {
display: 'block',
width: config.width,
height: config.height,
padding: config.padding
},
from: { color: colorsMobileUI[config.color], width: config.strokeWidth },
to: { color: colorsMobileUI[config.color], width: config.strokeWidth },
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var valueInner = Math.round(circle.value() * config.maxValue);
var valueText = '';
if(config.title){
var style = 'style="';
if(config.titleSize) style += ';font-size:'+config.titleSize;
if(config.titleWeight) style += ';font-weight:'+config.titleWeight;
if(config.titleLineHeight) style += ';line-height:'+config.titleLineHeight;
if(config.titleColor) style += ';color:'+colorsMobileUI[config.titleColor];
style += '"';
valueText += 'a?0:(a-f)/e;for(h in b)b.hasOwnProperty(h)&&(i=g[h],k="function"==typeof i?i:o[i],b[h]=j(c[h],d[h],k,l));return b}function j(a,b,c,d){return a+(b-a)*c(d)}function k(a,b){var c=n.prototype.filter,d=a._filterArgs;f(c,function(e){"undefined"!=typeof c[e][b]&&c[e][b].apply(a,d)})}function l(a,b,c,d,e,f,g,h,j,l,m){v=b+c+d,w=Math.min(m||u(),v),x=w>=v,y=d-(v-w),a.isPlaying()&&(x?(j(g,a._attachment,y),a.stop(!0)):(a._scheduleId=l(a._timeoutHandler,s),k(a,"beforeTween"),b+c>w?i(1,e,f,g,1,1,h):i(w,e,f,g,d,b+c,h),k(a,"afterTween"),j(e,a._attachment,y)))}function m(a,b){var c={},d=typeof b;return"string"===d||"function"===d?f(a,function(a){c[a]=b}):f(a,function(a){c[a]||(c[a]=b[a]||q)}),c}function n(a,b){this._currentState=a||{},this._configured=!1,this._scheduleFunction=p,"undefined"!=typeof b&&this.setConfig(b)}var o,p,q="linear",r=500,s=1e3/60,t=Date.now?Date.now:function(){return+new Date},u="undefined"!=typeof SHIFTY_DEBUG_NOW?SHIFTY_DEBUG_NOW:t;p="undefined"!=typeof window?window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||window.mozCancelRequestAnimationFrame&&window.mozRequestAnimationFrame||setTimeout:setTimeout;var v,w,x,y;return n.prototype.tween=function(a){return this._isTweening?this:(void 0===a&&this._configured||this.setConfig(a),this._timestamp=u(),this._start(this.get(),this._attachment),this.resume())},n.prototype.setConfig=function(a){a=a||{},this._configured=!0,this._attachment=a.attachment,this._pausedAtTime=null,this._scheduleId=null,this._delay=a.delay||0,this._start=a.start||e,this._step=a.step||e,this._finish=a.finish||e,this._duration=a.duration||r,this._currentState=g({},a.from)||this.get(),this._originalState=this.get(),this._targetState=g({},a.to)||this.get();var b=this;this._timeoutHandler=function(){l(b,b._timestamp,b._delay,b._duration,b._currentState,b._originalState,b._targetState,b._easing,b._step,b._scheduleFunction)};var c=this._currentState,d=this._targetState;return h(d,c),this._easing=m(c,a.easing||q),this._filterArgs=[c,this._originalState,d,this._easing],k(this,"tweenCreated"),this},n.prototype.get=function(){return g({},this._currentState)},n.prototype.set=function(a){this._currentState=a},n.prototype.pause=function(){return this._pausedAtTime=u(),this._isPaused=!0,this},n.prototype.resume=function(){return this._isPaused&&(this._timestamp+=u()-this._pausedAtTime),this._isPaused=!1,this._isTweening=!0,this._timeoutHandler(),this},n.prototype.seek=function(a){a=Math.max(a,0);var b=u();return this._timestamp+a===0?this:(this._timestamp=b-a,this.isPlaying()||(this._isTweening=!0,this._isPaused=!1,l(this,this._timestamp,this._delay,this._duration,this._currentState,this._originalState,this._targetState,this._easing,this._step,this._scheduleFunction,b),this.pause()),this)},n.prototype.stop=function(a){return this._isTweening=!1,this._isPaused=!1,this._timeoutHandler=e,(b.cancelAnimationFrame||b.webkitCancelAnimationFrame||b.oCancelAnimationFrame||b.msCancelAnimationFrame||b.mozCancelRequestAnimationFrame||b.clearTimeout)(this._scheduleId),a&&(k(this,"beforeTween"),i(1,this._currentState,this._originalState,this._targetState,1,0,this._easing),k(this,"afterTween"),k(this,"afterTweenEnd"),this._finish.call(this,this._currentState,this._attachment)),this},n.prototype.isPlaying=function(){return this._isTweening&&!this._isPaused},n.prototype.setScheduleFunction=function(a){this._scheduleFunction=a},n.prototype.dispose=function(){var a;for(a in this)this.hasOwnProperty(a)&&delete this[a]},n.prototype.filter={},n.prototype.formula={linear:function(a){return a}},o=n.prototype.formula,g(n,{now:u,each:f,tweenProps:i,tweenProp:j,applyFilter:k,shallowCopy:g,defaults:h,composeEasingObject:m}),"function"==typeof SHIFTY_DEBUG_NOW&&(b.timeoutHandler=l),"object"==typeof d?c.exports=n:"function"==typeof a&&a.amd?a(function(){return n}):"undefined"==typeof b.Tweenable&&(b.Tweenable=n),n}();!function(){e.shallowCopy(e.prototype.formula,{easeInQuad:function(a){return Math.pow(a,2)},easeOutQuad:function(a){return-(Math.pow(a-1,2)-1)},easeInOutQuad:function(a){return(a/=.5)<1?.5*Math.pow(a,2):-.5*((a-=2)*a-2)},easeInCubic:function(a){return Math.pow(a,3)},easeOutCubic:function(a){return Math.pow(a-1,3)+1},easeInOutCubic:function(a){return(a/=.5)<1?.5*Math.pow(a,3):.5*(Math.pow(a-2,3)+2)},easeInQuart:function(a){return Math.pow(a,4)},easeOutQuart:function(a){return-(Math.pow(a-1,4)-1)},easeInOutQuart:function(a){return(a/=.5)<1?.5*Math.pow(a,4):-.5*((a-=2)*Math.pow(a,3)-2)},easeInQuint:function(a){return Math.pow(a,5)},easeOutQuint:function(a){return Math.pow(a-1,5)+1},easeInOutQuint:function(a){return(a/=.5)<1?.5*Math.pow(a,5):.5*(Math.pow(a-2,5)+2)},easeInSine:function(a){return-Math.cos(a*(Math.PI/2))+1},easeOutSine:function(a){return Math.sin(a*(Math.PI/2))},easeInOutSine:function(a){return-.5*(Math.cos(Math.PI*a)-1)},easeInExpo:function(a){return 0===a?0:Math.pow(2,10*(a-1))},easeOutExpo:function(a){return 1===a?1:-Math.pow(2,-10*a)+1},easeInOutExpo:function(a){return 0===a?0:1===a?1:(a/=.5)<1?.5*Math.pow(2,10*(a-1)):.5*(-Math.pow(2,-10*--a)+2)},easeInCirc:function(a){return-(Math.sqrt(1-a*a)-1)},easeOutCirc:function(a){return Math.sqrt(1-Math.pow(a-1,2))},easeInOutCirc:function(a){return(a/=.5)<1?-.5*(Math.sqrt(1-a*a)-1):.5*(Math.sqrt(1-(a-=2)*a)+1)},easeOutBounce:function(a){return 1/2.75>a?7.5625*a*a:2/2.75>a?7.5625*(a-=1.5/2.75)*a+.75:2.5/2.75>a?7.5625*(a-=2.25/2.75)*a+.9375:7.5625*(a-=2.625/2.75)*a+.984375},easeInBack:function(a){var b=1.70158;return a*a*((b+1)*a-b)},easeOutBack:function(a){var b=1.70158;return(a-=1)*a*((b+1)*a+b)+1},easeInOutBack:function(a){var b=1.70158;return(a/=.5)<1?.5*(a*a*(((b*=1.525)+1)*a-b)):.5*((a-=2)*a*(((b*=1.525)+1)*a+b)+2)},elastic:function(a){return-1*Math.pow(4,-8*a)*Math.sin((6*a-1)*(2*Math.PI)/2)+1},swingFromTo:function(a){var b=1.70158;return(a/=.5)<1?.5*(a*a*(((b*=1.525)+1)*a-b)):.5*((a-=2)*a*(((b*=1.525)+1)*a+b)+2)},swingFrom:function(a){var b=1.70158;return a*a*((b+1)*a-b)},swingTo:function(a){var b=1.70158;return(a-=1)*a*((b+1)*a+b)+1},bounce:function(a){return 1/2.75>a?7.5625*a*a:2/2.75>a?7.5625*(a-=1.5/2.75)*a+.75:2.5/2.75>a?7.5625*(a-=2.25/2.75)*a+.9375:7.5625*(a-=2.625/2.75)*a+.984375},bouncePast:function(a){return 1/2.75>a?7.5625*a*a:2/2.75>a?2-(7.5625*(a-=1.5/2.75)*a+.75):2.5/2.75>a?2-(7.5625*(a-=2.25/2.75)*a+.9375):2-(7.5625*(a-=2.625/2.75)*a+.984375)},easeFromTo:function(a){return(a/=.5)<1?.5*Math.pow(a,4):-.5*((a-=2)*Math.pow(a,3)-2)},easeFrom:function(a){return Math.pow(a,4)},easeTo:function(a){return Math.pow(a,.25)}})}(),function(){function a(a,b,c,d,e,f){function g(a){return((n*a+o)*a+p)*a}function h(a){return((q*a+r)*a+s)*a}function i(a){return(3*n*a+2*o)*a+p}function j(a){return 1/(200*a)}function k(a,b){return h(m(a,b))}function l(a){return a>=0?a:0-a}function m(a,b){var c,d,e,f,h,j;for(e=a,j=0;8>j;j++){if(f=g(e)-a,l(f)e)return c;if(e>d)return d;for(;d>c;){if(f=g(e),l(f-a)f?c=e:d=e,e=.5*(d-c)+c}return e}var n=0,o=0,p=0,q=0,r=0,s=0;return p=3*b,o=3*(d-b)-p,n=1-p-o,s=3*c,r=3*(e-c)-s,q=1-s-r,k(a,j(f))}function b(b,c,d,e){return function(f){return a(f,b,c,d,e,1)}}e.setBezierFunction=function(a,c,d,f,g){var h=b(c,d,f,g);return h.displayName=a,h.x1=c,h.y1=d,h.x2=f,h.y2=g,e.prototype.formula[a]=h},e.unsetBezierFunction=function(a){delete e.prototype.formula[a]}}(),function(){function a(a,b,c,d,f,g){return e.tweenProps(d,b,a,c,1,g,f)}var b=new e;b._filterArgs=[],e.interpolate=function(c,d,f,g,h){var i=e.shallowCopy({},c),j=h||0,k=e.composeEasingObject(c,g||"linear");b.set({});var l=b._filterArgs;l.length=0,l[0]=i,l[1]=c,l[2]=d,l[3]=k,e.applyFilter(b,"tweenCreated"),e.applyFilter(b,"beforeTween");var m=a(c,i,d,f,k,j);return e.applyFilter(b,"afterTween"),m}}(),function(a){function b(a,b){var c,d=[],e=a.length;for(c=0;e>c;c++)d.push("_"+b+"_"+c);return d}function c(a){var b=a.match(v);return b?(1===b.length||a[0].match(u))&&b.unshift(""):b=["",""],b.join(A)}function d(b){a.each(b,function(a){var c=b[a];"string"==typeof c&&c.match(z)&&(b[a]=e(c))})}function e(a){return i(z,a,f)}function f(a){var b=g(a);return"rgb("+b[0]+","+b[1]+","+b[2]+")"}function g(a){return a=a.replace(/#/,""),3===a.length&&(a=a.split(""),a=a[0]+a[0]+a[1]+a[1]+a[2]+a[2]),B[0]=h(a.substr(0,2)),B[1]=h(a.substr(2,2)),B[2]=h(a.substr(4,2)),B}function h(a){return parseInt(a,16)}function i(a,b,c){var d=b.match(a),e=b.replace(a,A);if(d)for(var f,g=d.length,h=0;g>h;h++)f=d.shift(),e=e.replace(A,c(f));return e}function j(a){return i(x,a,k)}function k(a){for(var b=a.match(w),c=b.length,d=a.match(y)[0],e=0;c>e;e++)d+=parseInt(b[e],10)+",";return d=d.slice(0,-1)+")"}function l(d){var e={};return a.each(d,function(a){var f=d[a];if("string"==typeof f){var g=r(f);e[a]={formatString:c(f),chunkNames:b(g,a)}}}),e}function m(b,c){a.each(c,function(a){for(var d=b[a],e=r(d),f=e.length,g=0;f>g;g++)b[c[a].chunkNames[g]]=+e[g];delete b[a]})}function n(b,c){a.each(c,function(a){var d=b[a],e=o(b,c[a].chunkNames),f=p(e,c[a].chunkNames);d=q(c[a].formatString,f),b[a]=j(d)})}function o(a,b){for(var c,d={},e=b.length,f=0;e>f;f++)c=b[f],d[c]=a[c],delete a[c];return d}function p(a,b){C.length=0;for(var c=b.length,d=0;c>d;d++)C.push(a[b[d]]);return C}function q(a,b){for(var c=a,d=b.length,e=0;d>e;e++)c=c.replace(A,+b[e].toFixed(4));return c}function r(a){return a.match(w)}function s(b,c){a.each(c,function(a){var d,e=c[a],f=e.chunkNames,g=f.length,h=b[a];if("string"==typeof h){var i=h.split(" "),j=i[i.length-1];for(d=0;g>d;d++)b[f[d]]=i[d]||j}else for(d=0;g>d;d++)b[f[d]]=h;delete b[a]})}function t(b,c){a.each(c,function(a){var d=c[a],e=d.chunkNames,f=e.length,g=b[e[0]],h=typeof g;if("string"===h){for(var i="",j=0;f>j;j++)i+=" "+b[e[j]],delete b[e[j]];b[a]=i.substr(1)}else b[a]=g})}var u=/(\d|\-|\.)/,v=/([^\-0-9\.]+)/g,w=/[0-9.\-]+/g,x=new RegExp("rgb\\("+w.source+/,\s*/.source+w.source+/,\s*/.source+w.source+"\\)","g"),y=/^.*\(/,z=/#([0-9]|[a-f]){3,6}/gi,A="VAL",B=[],C=[];a.prototype.filter.token={tweenCreated:function(a,b,c,e){d(a),d(b),d(c),this._tokenData=l(a)},beforeTween:function(a,b,c,d){s(d,this._tokenData),m(a,this._tokenData),m(b,this._tokenData),m(c,this._tokenData)},afterTween:function(a,b,c,d){n(a,this._tokenData),n(b,this._tokenData),n(c,this._tokenData),t(d,this._tokenData)}}}(e)}).call(null)},{}],2:[function(a,b,c){var d=a("./shape"),e=a("./utils"),f=function(a,b){this._pathTemplate="M 50,50 m 0,-{radius} a {radius},{radius} 0 1 1 0,{2radius} a {radius},{radius} 0 1 1 0,-{2radius}",this.containerAspectRatio=1,d.apply(this,arguments)};f.prototype=new d,f.prototype.constructor=f,f.prototype._pathString=function(a){var b=a.strokeWidth;a.trailWidth&&a.trailWidth>a.strokeWidth&&(b=a.trailWidth);var c=50-b/2;return e.render(this._pathTemplate,{radius:c,"2radius":2*c})},f.prototype._trailString=function(a){return this._pathString(a)},b.exports=f},{"./shape":7,"./utils":8}],3:[function(a,b,c){var d=a("./shape"),e=a("./utils"),f=function(a,b){this._pathTemplate="M 0,{center} L 100,{center}",d.apply(this,arguments)};f.prototype=new d,f.prototype.constructor=f,f.prototype._initializeSvg=function(a,b){a.setAttribute("viewBox","0 0 100 "+b.strokeWidth),a.setAttribute("preserveAspectRatio","none")},f.prototype._pathString=function(a){return e.render(this._pathTemplate,{center:a.strokeWidth/2})},f.prototype._trailString=function(a){return this._pathString(a)},b.exports=f},{"./shape":7,"./utils":8}],4:[function(a,b,c){b.exports={Line:a("./line"),Circle:a("./circle"),SemiCircle:a("./semicircle"),Path:a("./path"),Shape:a("./shape"),utils:a("./utils")}},{"./circle":2,"./line":3,"./path":5,"./semicircle":6,"./shape":7,"./utils":8}],5:[function(a,b,c){var d=a("shifty"),e=a("./utils"),f={easeIn:"easeInCubic",easeOut:"easeOutCubic",easeInOut:"easeInOutCubic"},g=function h(a,b){if(!(this instanceof h))throw new Error("Constructor was called without new keyword");b=e.extend({duration:800,easing:"linear",from:{},to:{},step:function(){}},b);var c;c=e.isString(a)?document.querySelector(a):a,this.path=c,this._opts=b,this._tweenable=null;var d=this.path.getTotalLength();this.path.style.strokeDasharray=d+" "+d,this.set(0)};g.prototype.value=function(){var a=this._getComputedDashOffset(),b=this.path.getTotalLength(),c=1-a/b;return parseFloat(c.toFixed(6),10)},g.prototype.set=function(a){this.stop(),this.path.style.strokeDashoffset=this._progressToOffset(a);var b=this._opts.step;if(e.isFunction(b)){var c=this._easing(this._opts.easing),d=this._calculateTo(a,c),f=this._opts.shape||this;b(d,f,this._opts.attachment)}},g.prototype.stop=function(){this._stopTween(),this.path.style.strokeDashoffset=this._getComputedDashOffset()},g.prototype.animate=function(a,b,c){b=b||{},e.isFunction(b)&&(c=b,b={});var f=e.extend({},b),g=e.extend({},this._opts);b=e.extend(g,b);var h=this._easing(b.easing),i=this._resolveFromAndTo(a,h,f);this.stop(),this.path.getBoundingClientRect();var j=this._getComputedDashOffset(),k=this._progressToOffset(a),l=this;this._tweenable=new d,this._tweenable.tween({from:e.extend({offset:j},i.from),to:e.extend({offset:k},i.to),duration:b.duration,easing:h,step:function(a){l.path.style.strokeDashoffset=a.offset;var c=b.shape||l;b.step(a,c,b.attachment)},finish:function(a){e.isFunction(c)&&c()}})},g.prototype._getComputedDashOffset=function(){var a=window.getComputedStyle(this.path,null);return parseFloat(a.getPropertyValue("stroke-dashoffset"),10)},g.prototype._progressToOffset=function(a){var b=this.path.getTotalLength();return b-a*b},g.prototype._resolveFromAndTo=function(a,b,c){return c.from&&c.to?{from:c.from,to:c.to}:{from:this._calculateFrom(b),to:this._calculateTo(a,b)}},g.prototype._calculateFrom=function(a){return d.interpolate(this._opts.from,this._opts.to,this.value(),a)},g.prototype._calculateTo=function(a,b){return d.interpolate(this._opts.from,this._opts.to,a,b)},g.prototype._stopTween=function(){null!==this._tweenable&&(this._tweenable.stop(),this._tweenable=null)},g.prototype._easing=function(a){return f.hasOwnProperty(a)?f[a]:a},b.exports=g},{"./utils":8,shifty:1}],6:[function(a,b,c){var d=a("./shape"),e=a("./circle"),f=a("./utils"),g=function(a,b){this._pathTemplate="M 50,50 m -{radius},0 a {radius},{radius} 0 1 1 {2radius},0",this.containerAspectRatio=2,d.apply(this,arguments)};g.prototype=new d,g.prototype.constructor=g,g.prototype._initializeSvg=function(a,b){a.setAttribute("viewBox","0 0 100 50")},g.prototype._initializeTextContainer=function(a,b,c){a.text.style&&(c.style.top="auto",c.style.bottom="0",a.text.alignToBottom?f.setStyle(c,"transform","translate(-50%, 0)"):f.setStyle(c,"transform","translate(-50%, 50%)"))},g.prototype._pathString=e.prototype._pathString,g.prototype._trailString=e.prototype._trailString,b.exports=g},{"./circle":2,"./shape":7,"./utils":8}],7:[function(a,b,c){var d=a("./path"),e=a("./utils"),f="Object is destroyed",g=function h(a,b){if(!(this instanceof h))throw new Error("Constructor was called without new keyword");if(0!==arguments.length){this._opts=e.extend({color:"#555",strokeWidth:1,trailColor:null,trailWidth:null,fill:null,text:{style:{color:null,position:"absolute",left:"50%",top:"50%",padding:0,margin:0,transform:{prefix:!0,value:"translate(-50%, -50%)"}},autoStyleContainer:!0,alignToBottom:!0,value:null,className:"progressbar-text"},svgStyle:{display:"block",width:"100%"},warnings:!1},b,!0),e.isObject(b)&&void 0!==b.svgStyle&&(this._opts.svgStyle=b.svgStyle),e.isObject(b)&&e.isObject(b.text)&&void 0!==b.text.style&&(this._opts.text.style=b.text.style);var c,f=this._createSvgView(this._opts);if(c=e.isString(a)?document.querySelector(a):a,!c)throw new Error("Container does not exist: "+a);this._container=c,this._container.appendChild(f.svg),this._opts.warnings&&this._warnContainerAspectRatio(this._container),this._opts.svgStyle&&e.setStyles(f.svg,this._opts.svgStyle),this.svg=f.svg,this.path=f.path,this.trail=f.trail,this.text=null;var g=e.extend({attachment:void 0,shape:this},this._opts);this._progressPath=new d(f.path,g),e.isObject(this._opts.text)&&null!==this._opts.text.value&&this.setText(this._opts.text.value)}};g.prototype.animate=function(a,b,c){if(null===this._progressPath)throw new Error(f);this._progressPath.animate(a,b,c)},g.prototype.stop=function(){if(null===this._progressPath)throw new Error(f);void 0!==this._progressPath&&this._progressPath.stop()},g.prototype.destroy=function(){if(null===this._progressPath)throw new Error(f);this.stop(),this.svg.parentNode.removeChild(this.svg),this.svg=null,this.path=null,this.trail=null,this._progressPath=null,null!==this.text&&(this.text.parentNode.removeChild(this.text),this.text=null)},g.prototype.set=function(a){if(null===this._progressPath)throw new Error(f);this._progressPath.set(a)},g.prototype.value=function(){if(null===this._progressPath)throw new Error(f);return void 0===this._progressPath?0:this._progressPath.value()},g.prototype.setText=function(a){if(null===this._progressPath)throw new Error(f);null===this.text&&(this.text=this._createTextContainer(this._opts,this._container),this._container.appendChild(this.text)),e.isObject(a)?(e.removeChildren(this.text),this.text.appendChild(a)):this.text.innerHTML=a},g.prototype._createSvgView=function(a){var b=document.createElementNS("http://www.w3.org/2000/svg","svg");this._initializeSvg(b,a);var c=null;(a.trailColor||a.trailWidth)&&(c=this._createTrail(a),b.appendChild(c));var d=this._createPath(a);return b.appendChild(d),{svg:b,path:d,trail:c}},g.prototype._initializeSvg=function(a,b){a.setAttribute("viewBox","0 0 100 100")},g.prototype._createPath=function(a){var b=this._pathString(a);return this._createPathElement(b,a)},g.prototype._createTrail=function(a){var b=this._trailString(a),c=e.extend({},a);return c.trailColor||(c.trailColor="#eee"),c.trailWidth||(c.trailWidth=c.strokeWidth),c.color=c.trailColor,c.strokeWidth=c.trailWidth,c.fill=null,this._createPathElement(b,c)},g.prototype._createPathElement=function(a,b){var c=document.createElementNS("http://www.w3.org/2000/svg","path");return c.setAttribute("d",a),c.setAttribute("stroke",b.color),c.setAttribute("stroke-width",b.strokeWidth),b.fill?c.setAttribute("fill",b.fill):c.setAttribute("fill-opacity","0"),c},g.prototype._createTextContainer=function(a,b){var c=document.createElement("div");c.className=a.text.className;var d=a.text.style;return d&&(a.text.autoStyleContainer&&(b.style.position="relative"),e.setStyles(c,d),d.color||(c.style.color=a.color)),this._initializeTextContainer(a,b,c),c},g.prototype._initializeTextContainer=function(a,b,c){},g.prototype._pathString=function(a){throw new Error("Override this function for each progress bar")},g.prototype._trailString=function(a){throw new Error("Override this function for each progress bar")},g.prototype._warnContainerAspectRatio=function(a){if(this.containerAspectRatio){var b=window.getComputedStyle(a,null),c=parseFloat(b.getPropertyValue("width"),10),d=parseFloat(b.getPropertyValue("height"),10);e.floatEquals(this.containerAspectRatio,c/d)||(console.warn("Incorrect aspect ratio of container","#"+a.id,"detected:",b.getPropertyValue("width")+"(width)","/",b.getPropertyValue("height")+"(height)","=",c/d),console.warn("Aspect ratio of should be",this.containerAspectRatio))}},b.exports=g},{"./path":5,"./utils":8}],8:[function(a,b,c){function d(a,b,c){a=a||{},b=b||{},c=c||!1;for(var e in b)if(b.hasOwnProperty(e)){var f=a[e],g=b[e];c&&l(f)&&l(g)?a[e]=d(f,g,c):a[e]=g}return a}function e(a,b){var c=a;for(var d in b)if(b.hasOwnProperty(d)){var e=b[d],f="\\{"+d+"\\}",g=new RegExp(f,"g");c=c.replace(g,e)}return c}function f(a,b,c){for(var d=a.style,e=0;e
:~]/)) {
// Pure ID selector
els = [document.getElementById(selector.split('#')[1])];
}
else {
// Other selectors
els = (context || document).querySelectorAll(selector);
}
for (i = 0; i < els.length; i++) {
if (els[i]) arr.push(els[i]);
}
}
}
// Node/element
else if (selector.nodeType || selector === window || selector === document) {
arr.push(selector);
}
//Array of elements or instance of Dom
else if (selector.length > 0 && selector[0].nodeType) {
for (i = 0; i < selector.length; i++) {
arr.push(selector[i]);
}
}
}
return new Dom7(arr);
};
Dom7.prototype = {
// Classes and attriutes
addClass: function (className) {
if (typeof className === 'undefined') {
return this;
}
var classes = className.split(' ');
for (var i = 0; i < classes.length; i++) {
for (var j = 0; j < this.length; j++) {
this[j].classList.add(classes[i]);
}
}
return this;
},
removeClass: function (className) {
var classes = className.split(' ');
for (var i = 0; i < classes.length; i++) {
for (var j = 0; j < this.length; j++) {
this[j].classList.remove(classes[i]);
}
}
return this;
},
hasClass: function (className) {
if (!this[0]) return false;
else return this[0].classList.contains(className);
},
toggleClass: function (className) {
var classes = className.split(' ');
for (var i = 0; i < classes.length; i++) {
for (var j = 0; j < this.length; j++) {
this[j].classList.toggle(classes[i]);
}
}
return this;
},
attr: function (attrs, value) {
if (arguments.length === 1 && typeof attrs === 'string') {
// Get attr
if (this[0]) return this[0].getAttribute(attrs);
else return undefined;
}
else {
// Set attrs
for (var i = 0; i < this.length; i++) {
if (arguments.length === 2) {
// String
this[i].setAttribute(attrs, value);
}
else {
// Object
for (var attrName in attrs) {
this[i][attrName] = attrs[attrName];
this[i].setAttribute(attrName, attrs[attrName]);
}
}
}
return this;
}
},
removeAttr: function (attr) {
for (var i = 0; i < this.length; i++) {
this[i].removeAttribute(attr);
}
return this;
},
data: function (key, value) {
if (typeof value === 'undefined') {
// Get value
if (this[0]) {
var dataKey = this[0].getAttribute('data-' + key);
if (dataKey) return dataKey;
else if (this[0].dom7ElementDataStorage && (key in this[0].dom7ElementDataStorage)) return this[0].dom7ElementDataStorage[key];
else return undefined;
}
else return undefined;
}
else {
// Set value
for (var i = 0; i < this.length; i++) {
var el = this[i];
if (!el.dom7ElementDataStorage) el.dom7ElementDataStorage = {};
el.dom7ElementDataStorage[key] = value;
}
return this;
}
},
// Transforms
transform : function (transform) {
for (var i = 0; i < this.length; i++) {
var elStyle = this[i].style;
elStyle.webkitTransform = elStyle.MsTransform = elStyle.msTransform = elStyle.MozTransform = elStyle.OTransform = elStyle.transform = transform;
}
return this;
},
transition: function (duration) {
if (typeof duration !== 'string') {
duration = duration + 'ms';
}
for (var i = 0; i < this.length; i++) {
var elStyle = this[i].style;
elStyle.webkitTransitionDuration = elStyle.MsTransitionDuration = elStyle.msTransitionDuration = elStyle.MozTransitionDuration = elStyle.OTransitionDuration = elStyle.transitionDuration = duration;
}
return this;
},
//Events
on: function (eventName, targetSelector, listener, capture) {
function handleLiveEvent(e) {
var target = e.target;
if ($(target).is(targetSelector)) listener.call(target, e);
else {
var parents = $(target).parents();
for (var k = 0; k < parents.length; k++) {
if ($(parents[k]).is(targetSelector)) listener.call(parents[k], e);
}
}
}
var events = eventName.split(' ');
var i, j;
for (i = 0; i < this.length; i++) {
if (typeof targetSelector === 'function' || targetSelector === false) {
// Usual events
if (typeof targetSelector === 'function') {
listener = arguments[1];
capture = arguments[2] || false;
}
for (j = 0; j < events.length; j++) {
this[i].addEventListener(events[j], listener, capture);
}
}
else {
//Live events
for (j = 0; j < events.length; j++) {
if (!this[i].dom7LiveListeners) this[i].dom7LiveListeners = [];
this[i].dom7LiveListeners.push({listener: listener, liveListener: handleLiveEvent});
this[i].addEventListener(events[j], handleLiveEvent, capture);
}
}
}
return this;
},
off: function (eventName, targetSelector, listener, capture) {
var events = eventName.split(' ');
for (var i = 0; i < events.length; i++) {
for (var j = 0; j < this.length; j++) {
if (typeof targetSelector === 'function' || targetSelector === false) {
// Usual events
if (typeof targetSelector === 'function') {
listener = arguments[1];
capture = arguments[2] || false;
}
this[j].removeEventListener(events[i], listener, capture);
}
else {
// Live event
if (this[j].dom7LiveListeners) {
for (var k = 0; k < this[j].dom7LiveListeners.length; k++) {
if (this[j].dom7LiveListeners[k].listener === listener) {
this[j].removeEventListener(events[i], this[j].dom7LiveListeners[k].liveListener, capture);
}
}
}
}
}
}
return this;
},
once: function (eventName, targetSelector, listener, capture) {
var dom = this;
if (typeof targetSelector === 'function') {
targetSelector = false;
listener = arguments[1];
capture = arguments[2];
}
function proxy(e) {
listener(e);
dom.off(eventName, targetSelector, proxy, capture);
}
dom.on(eventName, targetSelector, proxy, capture);
},
trigger: function (eventName, eventData) {
for (var i = 0; i < this.length; i++) {
var evt;
try {
evt = new window.CustomEvent(eventName, {detail: eventData, bubbles: true, cancelable: true});
}
catch (e) {
evt = document.createEvent('Event');
evt.initEvent(eventName, true, true);
evt.detail = eventData;
}
this[i].dispatchEvent(evt);
}
return this;
},
transitionEnd: function (callback) {
var events = ['webkitTransitionEnd', 'transitionend', 'oTransitionEnd', 'MSTransitionEnd', 'msTransitionEnd'],
i, j, dom = this;
function fireCallBack(e) {
/*jshint validthis:true */
if (e.target !== this) return;
callback.call(this, e);
for (i = 0; i < events.length; i++) {
dom.off(events[i], fireCallBack);
}
}
if (callback) {
for (i = 0; i < events.length; i++) {
dom.on(events[i], fireCallBack);
}
}
return this;
},
// Sizing/Styles
width: function () {
if (this[0] === window) {
return window.innerWidth;
}
else {
if (this.length > 0) {
return parseFloat(this.css('width'));
}
else {
return null;
}
}
},
outerWidth: function (includeMargins) {
if (this.length > 0) {
if (includeMargins)
return this[0].offsetWidth + parseFloat(this.css('margin-right')) + parseFloat(this.css('margin-left'));
else
return this[0].offsetWidth;
}
else return null;
},
height: function () {
if (this[0] === window) {
return window.innerHeight;
}
else {
if (this.length > 0) {
return parseFloat(this.css('height'));
}
else {
return null;
}
}
},
outerHeight: function (includeMargins) {
if (this.length > 0) {
if (includeMargins)
return this[0].offsetHeight + parseFloat(this.css('margin-top')) + parseFloat(this.css('margin-bottom'));
else
return this[0].offsetHeight;
}
else return null;
},
offset: function () {
if (this.length > 0) {
var el = this[0];
var box = el.getBoundingClientRect();
var body = document.body;
var clientTop = el.clientTop || body.clientTop || 0;
var clientLeft = el.clientLeft || body.clientLeft || 0;
var scrollTop = window.pageYOffset || el.scrollTop;
var scrollLeft = window.pageXOffset || el.scrollLeft;
return {
top: box.top + scrollTop - clientTop,
left: box.left + scrollLeft - clientLeft
};
}
else {
return null;
}
},
css: function (props, value) {
var i;
if (arguments.length === 1) {
if (typeof props === 'string') {
if (this[0]) return window.getComputedStyle(this[0], null).getPropertyValue(props);
}
else {
for (i = 0; i < this.length; i++) {
for (var prop in props) {
this[i].style[prop] = props[prop];
}
}
return this;
}
}
if (arguments.length === 2 && typeof props === 'string') {
for (i = 0; i < this.length; i++) {
this[i].style[props] = value;
}
return this;
}
return this;
},
//Dom manipulation
each: function (callback) {
for (var i = 0; i < this.length; i++) {
callback.call(this[i], i, this[i]);
}
return this;
},
html: function (html) {
if (typeof html === 'undefined') {
return this[0] ? this[0].innerHTML : undefined;
}
else {
for (var i = 0; i < this.length; i++) {
this[i].innerHTML = html;
}
return this;
}
},
text: function (text) {
if (typeof text === 'undefined') {
if (this[0]) {
return this[0].textContent.trim();
}
else return null;
}
else {
for (var i = 0; i < this.length; i++) {
this[i].textContent = text;
}
return this;
}
},
is: function (selector) {
if (!this[0]) return false;
var compareWith, i;
if (typeof selector === 'string') {
var el = this[0];
if (el === document) return selector === document;
if (el === window) return selector === window;
if (el.matches) return el.matches(selector);
else if (el.webkitMatchesSelector) return el.webkitMatchesSelector(selector);
else if (el.mozMatchesSelector) return el.mozMatchesSelector(selector);
else if (el.msMatchesSelector) return el.msMatchesSelector(selector);
else {
compareWith = $(selector);
for (i = 0; i < compareWith.length; i++) {
if (compareWith[i] === this[0]) return true;
}
return false;
}
}
else if (selector === document) return this[0] === document;
else if (selector === window) return this[0] === window;
else {
if (selector.nodeType || selector instanceof Dom7) {
compareWith = selector.nodeType ? [selector] : selector;
for (i = 0; i < compareWith.length; i++) {
if (compareWith[i] === this[0]) return true;
}
return false;
}
return false;
}
},
index: function () {
if (this[0]) {
var child = this[0];
var i = 0;
while ((child = child.previousSibling) !== null) {
if (child.nodeType === 1) i++;
}
return i;
}
else return undefined;
},
eq: function (index) {
if (typeof index === 'undefined') return this;
var length = this.length;
var returnIndex;
if (index > length - 1) {
return new Dom7([]);
}
if (index < 0) {
returnIndex = length + index;
if (returnIndex < 0) return new Dom7([]);
else return new Dom7([this[returnIndex]]);
}
return new Dom7([this[index]]);
},
append: function (newChild) {
var i, j;
for (i = 0; i < this.length; i++) {
if (typeof newChild === 'string') {
var tempDiv = document.createElement('div');
tempDiv.innerHTML = newChild;
while (tempDiv.firstChild) {
this[i].appendChild(tempDiv.firstChild);
}
}
else if (newChild instanceof Dom7) {
for (j = 0; j < newChild.length; j++) {
this[i].appendChild(newChild[j]);
}
}
else {
this[i].appendChild(newChild);
}
}
return this;
},
prepend: function (newChild) {
var i, j;
for (i = 0; i < this.length; i++) {
if (typeof newChild === 'string') {
var tempDiv = document.createElement('div');
tempDiv.innerHTML = newChild;
for (j = tempDiv.childNodes.length - 1; j >= 0; j--) {
this[i].insertBefore(tempDiv.childNodes[j], this[i].childNodes[0]);
}
// this[i].insertAdjacentHTML('afterbegin', newChild);
}
else if (newChild instanceof Dom7) {
for (j = 0; j < newChild.length; j++) {
this[i].insertBefore(newChild[j], this[i].childNodes[0]);
}
}
else {
this[i].insertBefore(newChild, this[i].childNodes[0]);
}
}
return this;
},
insertBefore: function (selector) {
var before = $(selector);
for (var i = 0; i < this.length; i++) {
if (before.length === 1) {
before[0].parentNode.insertBefore(this[i], before[0]);
}
else if (before.length > 1) {
for (var j = 0; j < before.length; j++) {
before[j].parentNode.insertBefore(this[i].cloneNode(true), before[j]);
}
}
}
},
insertAfter: function (selector) {
var after = $(selector);
for (var i = 0; i < this.length; i++) {
if (after.length === 1) {
after[0].parentNode.insertBefore(this[i], after[0].nextSibling);
}
else if (after.length > 1) {
for (var j = 0; j < after.length; j++) {
after[j].parentNode.insertBefore(this[i].cloneNode(true), after[j].nextSibling);
}
}
}
},
next: function (selector) {
if (this.length > 0) {
if (selector) {
if (this[0].nextElementSibling && $(this[0].nextElementSibling).is(selector)) return new Dom7([this[0].nextElementSibling]);
else return new Dom7([]);
}
else {
if (this[0].nextElementSibling) return new Dom7([this[0].nextElementSibling]);
else return new Dom7([]);
}
}
else return new Dom7([]);
},
nextAll: function (selector) {
var nextEls = [];
var el = this[0];
if (!el) return new Dom7([]);
while (el.nextElementSibling) {
var next = el.nextElementSibling;
if (selector) {
if($(next).is(selector)) nextEls.push(next);
}
else nextEls.push(next);
el = next;
}
return new Dom7(nextEls);
},
prev: function (selector) {
if (this.length > 0) {
if (selector) {
if (this[0].previousElementSibling && $(this[0].previousElementSibling).is(selector)) return new Dom7([this[0].previousElementSibling]);
else return new Dom7([]);
}
else {
if (this[0].previousElementSibling) return new Dom7([this[0].previousElementSibling]);
else return new Dom7([]);
}
}
else return new Dom7([]);
},
prevAll: function (selector) {
var prevEls = [];
var el = this[0];
if (!el) return new Dom7([]);
while (el.previousElementSibling) {
var prev = el.previousElementSibling;
if (selector) {
if($(prev).is(selector)) prevEls.push(prev);
}
else prevEls.push(prev);
el = prev;
}
return new Dom7(prevEls);
},
parent: function (selector) {
var parents = [];
for (var i = 0; i < this.length; i++) {
if (selector) {
if ($(this[i].parentNode).is(selector)) parents.push(this[i].parentNode);
}
else {
parents.push(this[i].parentNode);
}
}
return $($.unique(parents));
},
parents: function (selector) {
var parents = [];
for (var i = 0; i < this.length; i++) {
var parent = this[i].parentNode;
while (parent) {
if (selector) {
if ($(parent).is(selector)) parents.push(parent);
}
else {
parents.push(parent);
}
parent = parent.parentNode;
}
}
return $($.unique(parents));
},
find : function (selector) {
var foundElements = [];
for (var i = 0; i < this.length; i++) {
var found = this[i].querySelectorAll(selector);
for (var j = 0; j < found.length; j++) {
foundElements.push(found[j]);
}
}
return new Dom7(foundElements);
},
children: function (selector) {
var children = [];
for (var i = 0; i < this.length; i++) {
var childNodes = this[i].childNodes;
for (var j = 0; j < childNodes.length; j++) {
if (!selector) {
if (childNodes[j].nodeType === 1) children.push(childNodes[j]);
}
else {
if (childNodes[j].nodeType === 1 && $(childNodes[j]).is(selector)) children.push(childNodes[j]);
}
}
}
return new Dom7($.unique(children));
},
remove: function () {
for (var i = 0; i < this.length; i++) {
if (this[i].parentNode) this[i].parentNode.removeChild(this[i]);
}
return this;
},
add: function () {
var dom = this;
var i, j;
for (i = 0; i < arguments.length; i++) {
var toAdd = $(arguments[i]);
for (j = 0; j < toAdd.length; j++) {
dom[dom.length] = toAdd[j];
dom.length++;
}
}
return dom;
}
};
$.fn = Dom7.prototype;
$.unique = function (arr) {
var unique = [];
for (var i = 0; i < arr.length; i++) {
if (unique.indexOf(arr[i]) === -1) unique.push(arr[i]);
}
return unique;
};
return $;
})();
/*===========================
Get Dom libraries
===========================*/
var swiperDomPlugins = ['jQuery', 'Zepto', 'Dom7'];
for (var i = 0; i < swiperDomPlugins.length; i++) {
if (window[swiperDomPlugins[i]]) {
addLibraryPlugin(window[swiperDomPlugins[i]]);
}
}
// Required DOM Plugins
var domLib;
if (typeof Dom7 === 'undefined') {
domLib = window.Dom7 || window.Zepto || window.jQuery;
}
else {
domLib = Dom7;
}
/*===========================
Add .swiper plugin from Dom libraries
===========================*/
function addLibraryPlugin(lib) {
lib.fn.swiper = function (params) {
var firstInstance;
lib(this).each(function () {
var s = new Swiper(this, params);
if (!firstInstance) firstInstance = s;
});
return firstInstance;
};
}
if (domLib) {
if (!('transitionEnd' in domLib.fn)) {
domLib.fn.transitionEnd = function (callback) {
var events = ['webkitTransitionEnd', 'transitionend', 'oTransitionEnd', 'MSTransitionEnd', 'msTransitionEnd'],
i, j, dom = this;
function fireCallBack(e) {
/*jshint validthis:true */
if (e.target !== this) return;
callback.call(this, e);
for (i = 0; i < events.length; i++) {
dom.off(events[i], fireCallBack);
}
}
if (callback) {
for (i = 0; i < events.length; i++) {
dom.on(events[i], fireCallBack);
}
}
return this;
};
}
if (!('transform' in domLib.fn)) {
domLib.fn.transform = function (transform) {
for (var i = 0; i < this.length; i++) {
var elStyle = this[i].style;
elStyle.webkitTransform = elStyle.MsTransform = elStyle.msTransform = elStyle.MozTransform = elStyle.OTransform = elStyle.transform = transform;
}
return this;
};
}
if (!('transition' in domLib.fn)) {
domLib.fn.transition = function (duration) {
if (typeof duration !== 'string') {
duration = duration + 'ms';
}
for (var i = 0; i < this.length; i++) {
var elStyle = this[i].style;
elStyle.webkitTransitionDuration = elStyle.MsTransitionDuration = elStyle.msTransitionDuration = elStyle.MozTransitionDuration = elStyle.OTransitionDuration = elStyle.transitionDuration = duration;
}
return this;
};
}
if (!('outerWidth' in domLib.fn)) {
domLib.fn.outerWidth = function (includeMargins) {
if (this.length > 0) {
if (includeMargins)
return this[0].offsetWidth + parseFloat(this.css('margin-right')) + parseFloat(this.css('margin-left'));
else
return this[0].offsetWidth;
}
else return null;
};
}
}
window.Swiper = Swiper;
})();
/*===========================
Swiper AMD Export
===========================*/
if (typeof(module) !== 'undefined')
{
module.exports = window.Swiper;
}
else if (typeof define === 'function' && define.amd) {
define([], function () {
'use strict';
return window.Swiper;
});
}
//# sourceMappingURL=maps/swiper.js.map
================================================
FILE: swiper/style.css
================================================
/*Define a container of sliders.*/
.swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
z-index: 1;
}
.swiper-container-fullscreen {
height: 100%;
}
.swipper-gallery {
height: 300px;
}
.swiper-container-no-flexbox .swiper-slide {
float: left;
}
.swiper-container-vertical > .swiper-wrapper {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
/*Define a wrapper of swiper.*/
.swiper-wrapper {
position: relative;
width: 100%;
z-index: 1;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
-o-transform: translate(0px, 0px);
-ms-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto;
}
/*Define a element slide.*/
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
}
/*Align all elements in the center of vertical.*/
.swiper-slide.vertical-align-center {
display: flex;
flex-direction: column;
justify-content: center;
padding: 30px;
text-align: center;
}
.swiper-slide i {
font-size: 120px;
}
.swiper-slide h1 {
font-size: 40px;
font-weight: 600;
width: 100%;
}
.swiper-slide h2 {
font-size: 30px;
font-weight: 600;
width: 100%;
}
.swiper-slide .margin-bottom {
margin-bottom: 25px;
}
/* Auto Height */
.swiper-container-autoheight .swiper-slide, .swiper-container-autoheight {
height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-transition-property: -webkit-transform, height;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform, height;
}
/* a11y */
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
/* Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.swiper-wp8-vertical {
-ms-touch-action: pan-x;
touch-action: pan-x;
}
/* Arrows */
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 27px;
height: 44px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
-moz-background-size: 27px 44px;
-webkit-background-size: 27px 44px;
background-size: 27px 44px;
background-position: center;
background-repeat: no-repeat;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
left: 10px;
right: auto;
}
.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
right: 10px;
left: auto;
}
.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
/* Pagination Styles */
.swiper-pagination {
position: absolute;
text-align: center;
-webkit-transition: 300ms;
-moz-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 10px;
left: 0;
width: 100%;
}
/* Bullets */
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: 0.2;
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-moz-appearance: none;
-ms-appearance: none;
-webkit-appearance: none;
appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
/*Define a white bullet pagination.*/
.swiper-pagination-white {
}
/*Define a black bullet pagination.*/
.swiper-pagination-black {
}
.swiper-pagination-white .swiper-pagination-bullet {
background: #fff;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #007aff;
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff;
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: #000;
}
.swiper-container-vertical > .swiper-pagination-bullets {
right: 10px;
top: 50%;
-webkit-transform: translate3d(0px, -50%, 0);
-moz-transform: translate3d(0px, -50%, 0);
-o-transform: translate(0px, -50%);
-ms-transform: translate3d(0px, -50%, 0);
transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 5px 0;
display: block;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 5px;
}
/* Progress */
.swiper-pagination-progress {
background: rgba(0, 0, 0, 0.25);
position: absolute;
}
.swiper-pagination-progress .swiper-pagination-progressbar {
background: #007aff;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
}
.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
-webkit-transform-origin: right top;
-moz-transform-origin: right top;
-ms-transform-origin: right top;
-o-transform-origin: right top;
transform-origin: right top;
}
.swiper-container-horizontal > .swiper-pagination-progress {
width: 100%;
height: 4px;
left: 0;
top: 0;
}
.swiper-container-vertical > .swiper-pagination-progress {
width: 4px;
height: 100%;
left: 0;
top: 0;
}
.swiper-pagination-progress.swiper-pagination-white {
background: rgba(255, 255, 255, 0.5);
}
.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
background: #fff;
}
.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
background: #000;
}
/* 3D Container */
.swiper-container-3d {
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-coverflow .swiper-wrapper,
.swiper-container-flip .swiper-wrapper {
-ms-perspective: 1200px;
}
.swiper-container-cube,
.swiper-container-flip {
overflow: visible;
}
.swiper-container-cube .swiper-slide,
.swiper-container-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
}
.swiper-container-cube .swiper-slide .swiper-slide,
.swiper-container-flip .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-flip .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right,
.swiper-container-flip .swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-container-cube .swiper-slide {
visibility: hidden;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
width: 100%;
height: 100%;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
pointer-events: auto;
visibility: visible;
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
-webkit-filter: blur(50px);
filter: blur(50px);
z-index: 0;
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
text-align: center;
}
.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* Scrollbar */
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%;
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
left: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag {
cursor: move;
}
/* Preloader */
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
-moz-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
-moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
animation: swiper-preloader-spin 1s steps(12, end) infinite;
}
.swiper-lazy-preloader:after {
display: block;
content: "";
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: 50%;
-webkit-background-size: 100%;
background-size: 100%;
background-repeat: no-repeat;
}
.swiper-lazy-preloader-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
@-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes swiper-preloader-spin {
100% {
transform: rotate(360deg);
}
}
================================================
FILE: tab/component.json
================================================
{
"name":"tab",
"author": "fabiorogeriosj",
"dependencies": [
"base",
"button"
]
}
================================================
FILE: tab/index.html
================================================
List
To use this component you need install with the command:
Dependency:
base.
The dependencies will be installed together with this module
mobileui install list
You can use all features the base MobileUI in this component.
You can put images and icons in list.
You can combinate with others components and class.
Another example of a combination of components header, button and cover.
You can add class mark for change color border.
item to function properly.*/
.list {
width: 100%;
position: relative;
border: 1px solid #ddd;
}
/*Define an element as item. This feature depends on the list to function properly.*/
.list .item {
padding: 15px;
display: inline-block;
border-bottom: 1px solid #ddd;
width: 100%;
position: relative;
font-size: 18px;
}
.list .item.hidden {
display: none;
}
.list ol, .list ul {
list-style: none;
}
/*Define a small space between the top and bottom elements.*/
.list .item.space-small {
padding-top: 5px;
padding-bottom: 5px;
}
.list .item.mark {
border-right: 0;
border-top: 0;
}
/*Block line space with left avatar.*/
.item .block {
display: -webkit-box;
display: flex;
}
.list .item.mark.margin-button {
border-bottom: 0;
margin-bottom: 10px;
}
/*Remove space in top item.*/
.list .item.no-space-top {
padding-top: 0 !important;
}
/*Remove space in bottom item.*/
.list .item.no-space-bottom {
padding-bottom: 0 !important;
}
.list .item.row {
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
/*Define that a list or an item has no borders.*/
.list.no-border {
border: 0;
}
/*Define that a list or an item has a bottom border.*/
.list.no-border .item.border-bottom,
.list .item.no-border.border-bottom {
border-bottom-width: 1px;
border-bottom-style: solid;
}
.list.no-border .item,
.list .item.no-border {
border: none;
}
.list .item.cover {
padding: 0;
margin-left: 20px;
height:200px;
width: -webkit-calc(100% - 40px);
width: -moz-calc(100% - 40px);
width: calc(100% - 40px);
}
/*Define an item without internal spaces.*/
.list .item.full {
padding: 0;
display: flex;
}
.list .item h1,
.list .item h2 {
font-size: 16px;
margin:0;
padding: 0;
}
.list .item h1 {
margin-top: 7px;
}
.list .item p {
font-size: 14px;
margin:0;
padding: 0;
line-height: 20px;
}
.list .item:last-child {
border-bottom:0;
}
.list .left {
margin-right: 10px;
min-width: 25px;
}
.list .right {
margin-right: 20px;
position: absolute;
top: 0;
right: 0;
height: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
.list .right i {
margin-left: 5px;
}
.list .align-top {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: baseline;
margin-top: 10px;
}
/*Set a fixed size for an image.*/
.list .avatar {
height: 50px;
}
/*Set a floating badge above the image.*/
.avatar-badge {
position: absolute;
margin-left: -4px;
margin-top: -3px;
border-radius: 8px;
}
.list .item small,
.list .item small .icon {
font-size: 14px;
}
.list .item .icon {
font-size: 18px;
}
.list .item .icon.text-huge {
font-size: 32px;
}
.list .left .icon, .list .right .icon {
vertical-align: -webkit-baseline-middle;
}
/*Add big border in item or element.*/
.list .border-big {
border-width: 3px;
border-style: solid;
}
.list .item[onclick]:active,
.list a.item:active {
background-color: rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.list .item .right .icon,
.list .item .right.icon {
font-size: 24px;
padding: 0;
margin: 0;
}
================================================
FILE: loading/component.json
================================================
{
"name":"loading",
"author": "fabiorogeriosj",
"dependencies": [
"alert"
]
}
================================================
FILE: loading/index.html
================================================
Loading
The Loading component is an overlay that prevents user interaction while indicating activity. By default, it shows a spinner based on the mode. Dynamic content can be passed and displayed with the spinner. The spinner can be hidden or customized to use several predefined options. The loading indicator is presented on top of other content even during navigation.
Dependency:
alert.
The dependencies will be installed together with this module
To use this component you need install with the command:
mobileui install loading
For use you need call the function loading('MESSAGE TO LOADING') or loading() for just spinner show, and when you can close the loading component you call closeLoading() function.
You can show loading in button element, just call loadingElement('ID_YOUR_ELEMENT') and close call closeLoading('ID_YOUR_ELEMENT'). It is posible add another params: loadingElement('ID_ELEMENT','MESSAGE (optional)', 'LEFT/RIGHT','COLOR')
See this small example:
================================================ FILE: loading/script.js ================================================ window.loading = function(message){ var configLoading = {}; if(typeof message === "object"){ configLoading = message; } else { configLoading.message = message; } if(!configLoading.id){ configLoading.id = 'LOADING'+new Date().getTime(); } var body = document.getElementsByTagName('body')[0]; if(event && event.target && event.target.parentNode && event.target.parentNode.className.indexOf('body') >= 0) { body = event.target.parentNode; } var e = document.createElement('div'); e.className = 'backdrop show backdrop-alert'; e.id = configLoading.id + '_BACKDROP'; body.appendChild(e); var alertMobileUI = document.createElement('div'); alertMobileUI.className = 'alert-mobileui alert-loading'; alertMobileUI.id = configLoading.id; e.parentNode.appendChild(alertMobileUI); var alertContent = document.createElement('div'); configLoading.class = 'white'; alertContent.className = 'alert ' + configLoading.class; if(!window.SO || SO.code !== 2){ alertContent.innerHTML = ''; } else { alertContent.innerHTML = ''; } if(configLoading.message) { alertContent.innerHTML += ''+configLoading.message+'
'; } alertMobileUI.appendChild(alertContent); } window.loadingElement = function(e, message, position, color){ if(typeof(e) != "object"){ e = document.getElementById(e); } var withMessage = message ? 'with-message' : ''; if(!color){ color = 'white-loading'; } if(!position) { position = ''; } var divLoading = document.createElement('div'); var spinner = ''; if(!window.SO || SO.code !== 2){ spinner = ''; } else { spinner = ''; } e.oldValue = e.innerHTML; e.innerHTML = spinner; e.disabled=true; if(message){ e.innerHTML += message; } } window.closeLoading = function(e){ if(e){ if(typeof(e) != "object"){ e = document.getElementById(e); } e.innerHTML = e.oldValue; e.disabled=false; } else { var alert = document.getElementsByClassName('alert-mobileui')[0]; var alertId = alert.id; var alert = document.getElementById(alertId); alert.parentNode.removeChild(alert); var backdrop = document.getElementById(alertId+'_BACKDROP'); backdrop.parentNode.removeChild(backdrop); } } ================================================ FILE: loading/style.css ================================================ .alert-loading .alert { padding: 24px; text-align: center; } .loading-circle { fill: transparent; stroke: #009688; stroke-width: 5; -webkit-animation: dash 2s ease infinite,rotate 2s linear infinite; -moz-animation: dash 2s ease infinite,rotate 2s linear infinite; -o-animation: dash 2s ease infinite,rotate 2s linear infinite; animation: dash 2s ease infinite,rotate 2s linear infinite; margin:auto; } .loading-circle.loading-element { zoom:0.55; margin-top: -20px; margin-left: -20px; position: absolute; } button .loading-circle.loading-element { left: 50%; margin-left: -20px; top: 50%; margin-top: -20px; } .loading-circle.with-message.loading-element { margin-left: -50px; margin-top: 17px; top: auto; left: auto; } .loading-circle.loading-element.left { float: left; position: inherit; margin-left:0; } .loading-circle.loading-element.right { float: right; position: inherit; margin-left:0; } .loading-circle.white-loading{ stroke: rgba(255,255,255,0.8); } .loading-circle.with-message { margin-right: 10px; } .platform-ios .loading-circle { fill: #868686; -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none; stroke:none; stroke-width:0; } .platform-ios .loading-circle.loading-element.white-loading { fill: rgba(255,255,255,0.8); } .platform-ios .loading-circle path:nth-of-type(1) { -webkit-animation: pulse 1s infinite linear; -moz-animation: pulse 1s infinite linear; -o-animation: pulse 1s infinite linear; animation: pulse 1s infinite linear; } .platform-ios .loading-circle path:nth-of-type(2) { -webkit-animation: pulse 1s -.083s infinite linear; -moz-animation: pulse 1s -.083s infinite linear; -o-animation: pulse 1s -.083s infinite linear; animation: pulse 1s -.083s infinite linear; } .platform-ios .loading-circle path:nth-of-type(3) { -webkit-animation: pulse 1s -.166s infinite linear; -moz-animation: pulse 1s -.166s infinite linear; -o-animation: pulse 1s -.166s infinite linear; animation: pulse 1s -.166s infinite linear; } .platform-ios .loading-circle path:nth-of-type(4) { -webkit-animation: pulse 1s -.249s infinite linear; -moz-animation: pulse 1s -.249s infinite linear; -o-animation: pulse 1s -.249s infinite linear; animation: pulse 1s -.249s infinite linear; } .platform-ios .loading-circle path:nth-of-type(5) { -webkit-animation: pulse 1s -.332s infinite linear; -moz-animation: pulse 1s -.332s infinite linear; -o-animation: pulse 1s -.332s infinite linear; animation: pulse 1s -.332s infinite linear; } .platform-ios .loading-circle path:nth-of-type(6) { -webkit-animation: pulse 1s -.415s infinite linear; -moz-animation: pulse 1s -.415s infinite linear; -o-animation: pulse 1s -.415s infinite linear; animation: pulse 1s -.415s infinite linear; } .platform-ios .loading-circle path:nth-of-type(7) { -webkit-animation: pulse 1s -.498s infinite linear; -moz-animation: pulse 1s -.498s infinite linear; -o-animation: pulse 1s -.498s infinite linear; animation: pulse 1s -.498s infinite linear; } .platform-ios .loading-circle path:nth-of-type(8) { -webkit-animation: pulse 1s -.581s infinite linear; -moz-animation: pulse 1s -.581s infinite linear; -o-animation: pulse 1s -.581s infinite linear; animation: pulse 1s -.581s infinite linear; } .platform-ios .loading-circle path:nth-of-type(9) { -webkit-animation: pulse 1s -.664s infinite linear; -moz-animation: pulse 1s -.664s infinite linear; -o-animation: pulse 1s -.664s infinite linear; animation: pulse 1s -.664s infinite linear; } .platform-ios .loading-circle path:nth-of-type(10) { -webkit-animation: pulse 1s -.747s infinite linear; -moz-animation: pulse 1s -.747s infinite linear; -o-animation: pulse 1s -.747s infinite linear; animation: pulse 1s -.747s infinite linear; } .platform-ios .alert-loading .loading-circle path:nth-of-type(11) { -webkit-animation: pulse 1s -.83s infinite linear; -moz-animation: pulse 1s -.83s infinite linear; -o-animation: pulse 1s -.83s infinite linear; animation: pulse 1s -.83s infinite linear; } .platform-ios .alert-loading .loading-circle path:nth-of-type(12) { -webkit-animation: pulse 1s -.913s infinite linear; -moz-animation: pulse 1s -.913s infinite linear; -o-animation: pulse 1s -.913s infinite linear; animation: pulse 1s -.913s infinite linear; } .platform-ios .loading-circle.white-loading path:nth-of-type(1) { -webkit-animation: pulse-white 1s infinite linear; -moz-animation: pulse-white 1s infinite linear; -o-animation: pulse-white 1s infinite linear; animation: pulse-white 1s infinite linear; } .platform-ios .loading-circle.white-loading path:nth-of-type(2) { -webkit-animation: pulse-white 1s -.083s infinite linear; -moz-animation: pulse-white 1s -.083s infinite linear; -o-animation: pulse-white 1s -.083s infinite linear; animation: pulse-white 1s -.083s infinite linear; } .platform-ios .loading-circle.white-loading path:nth-of-type(3) { -webkit-animation: pulse-white 1s -.166s infinite linear; -moz-animation: pulse-white 1s -.166s infinite linear; -o-animation: pulse-white 1s -.166s infinite linear; animation: pulse-white 1s -.166s infinite linear; } .platform-ios .loading-circle.white-loading path:nth-of-type(4) { -webkit-animation: pulse-white 1s -.249s infinite linear; -moz-animation: pulse-white 1s -.249s infinite linear; -o-animation: pulse-white 1s -.249s infinite linear; animation: pulse-white 1s -.249s infinite linear; } .platform-ios .loading-circle.white-loading path:nth-of-type(5) { -webkit-animation: pulse-white 1s -.332s infinite linear; -moz-animation: pulse-white 1s -.332s infinite linear; -o-animation: pulse-white 1s -.332s infinite linear; animation: pulse-white 1s -.332s infinite linear; } .platform-ios .loading-circle.white-loading path:nth-of-type(6) { -webkit-animation: pulse-white 1s -.415s infinite linear; -moz-animation: pulse-white 1s -.415s infinite linear; -o-animation: pulse-white 1s -.415s infinite linear; animation: pulse-white 1s -.415s infinite linear; } .platform-ios .loading-circle.white-loading path:nth-of-type(7) { -webkit-animation: pulse-white 1s -.498s infinite linear; -moz-animation: pulse-white 1s -.498s infinite linear; -o-animation: pulse-white 1s -.498s infinite linear; animation: pulse-white 1s -.498s infinite linear; } .platform-ios .loading-circle.white-loading path:nth-of-type(8) { -webkit-animation: pulse-white 1s -.581s infinite linear; -moz-animation: pulse-white 1s -.581s infinite linear; -o-animation: pulse-white 1s -.581s infinite linear; animation: pulse-white 1s -.581s infinite linear; } .platform-ios .loading-circle.white-loading path:nth-of-type(9) { -webkit-animation: pulse-white 1s -.664s infinite linear; -moz-animation: pulse-white 1s -.664s infinite linear; -o-animation: pulse-white 1s -.664s infinite linear; animation: pulse-white 1s -.664s infinite linear; } .platform-ios .loading-circle.white-loading path:nth-of-type(10) { -webkit-animation: pulse-white 1s -.747s infinite linear; -moz-animation: pulse-white 1s -.747s infinite linear; -o-animation: pulse-white 1s -.747s infinite linear; animation: pulse-white 1s -.747s infinite linear; } .platform-ios .alert-loading.white-loading .loading-circle path:nth-of-type(11) { -webkit-animation: pulse-white 1s -.83s infinite linear; -moz-animation: pulse-white 1s -.83s infinite linear; -o-animation: pulse-white 1s -.83s infinite linear; animation: pulse-white 1s -.83s infinite linear; } .platform-ios .alert-loading.white-loading .loading-circle path:nth-of-type(12) { -webkit-animation: pulse-white 1s -.913s infinite linear; -moz-animation: pulse-white 1s -.913s infinite linear; -o-animation: pulse-white 1s -.913s infinite linear; animation: pulse-white 1s -.913s infinite linear; } @-webkit-keyframes pulse { 50% { fill: #868686; } to { fill: rgba(134,134,134,.4); } } @-moz-keyframes pulse { 50% { fill: #868686; } to { fill: rgba(134,134,134,.4); } } @-o-keyframes pulse { 50% { fill: #868686; } to { fill: rgba(134,134,134,.4); } } @keyframes pulse { 50% { fill: #868686; } to { fill: rgba(134,134,134,.4); } } @-webkit-keyframes pulse-white { 50% { fill: rgba(255,255,255,0.8); } to { fill: rgba(255,255,255,0.2); } } @-moz-keyframes pulse-white { 50% { fill: rgba(255,255,255,0.8); } to { fill: rgba(255,255,255,0.2); } } @-o-keyframes pulse-white { 50% { fill: rgba(255,255,255,0.8); } to { fill: rgba(255,255,255,0.2); } } @keyframes pulse-white { 50% { fill: rgba(255,255,255,0.8); } to { fill: rgba(255,255,255,0.2); } } @-webkit-keyframes iosIntro { from { -webkit-transform: scale(0); opacity: 0; } to { -webkit-transform: scale(1); opacity: 1; } } @-moz-keyframes iosIntro { from { -moz-transform: scale(0); opacity: 0; } to { -moz-transform: scale(1); opacity: 1; } } @-o-keyframes iosIntro { from { -o-transform: scale(0); opacity: 0; } to { -o-transform: scale(1); opacity: 1; } } @keyframes iosIntro { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .alert-mobileui.alert-loading .alert p { margin: 0; margin-top: 15px !important; text-align: center; } @-webkit-keyframes dash { 0% { stroke-dasharray: 1,95; stroke-dashoffset: 0; } 50% { stroke-dasharray: 85,95; stroke-dashoffset: -25; } 100% { stroke-dasharray: 85,95; stroke-dashoffset: -93; } } @-moz-keyframes dash { 0% { stroke-dasharray: 1,95; stroke-dashoffset: 0; } 50% { stroke-dasharray: 85,95; stroke-dashoffset: -25; } 100% { stroke-dasharray: 85,95; stroke-dashoffset: -93; } } @-o-keyframes dash { 0% { stroke-dasharray: 1,95; stroke-dashoffset: 0; } 50% { stroke-dasharray: 85,95; stroke-dashoffset: -25; } 100% { stroke-dasharray: 85,95; stroke-dashoffset: -93; } } @keyframes dash { 0% { stroke-dasharray: 1,95; stroke-dashoffset: 0; } 50% { stroke-dasharray: 85,95; stroke-dashoffset: -25; } 100% { stroke-dasharray: 85,95; stroke-dashoffset: -93; } } @-webkit-keyframes rotate { 0% {-webkit-transform: rotate(0deg); } 100% {-webkit-transform: rotate(360deg); } } @-moz-keyframes rotate { 0% {-moz-transform: rotate(0deg); } 100% {-moz-transform: rotate(360deg); } } @-o-keyframes rotate { 0% {-o-transform: rotate(0deg); } 100% {-o-transform: rotate(360deg); } } @keyframes rotate { 0% {transform: rotate(0deg); } 100% {transform: rotate(360deg); } } ================================================ FILE: menu/component.json ================================================ { "name":"menu", "author": "fabiorogeriosj", "dependencies": [ "base", "list" ] } ================================================ FILE: menu/index.html ================================================Menu
Menu is a side-menu navigation that can be dragged out or toggled to show. The content of a menu will be hidden when the menu is closed. Menu adapts to the appropriate style based on the platform.
To use this component you need install with the command:
Dependency:
base and list.
The dependencies will be installed together with this module
mobileui install menu
Your menu need have id and for you open menu, just call function openMenu('ID_YOUR_MENU'), for close menu just call function closeMenu('ID_YOU_MENU').
By default the menu is created in the left, but you can add class menu-right for create menu in right position.
See example:
You can use all features of colors theme, icons and list in menu.
You can combinate cover, badge, card, header and button for create a good apps.
For advanced mode you can listen to the event openMenu and closeMenu.
Your can enable the Swiper event (open or close the menu when clicking and dragging horizontally):
================================================ FILE: menu/script.js ================================================ window.menu = {} window.openMenu = function (m) { var name = m var m = document.getElementById(m) if (m.className.indexOf('menu') >= 0 && m.className.indexOf('open') < 0) { var e = document.createElement('div') e.className = 'backdrop backdrop-menu' m.parentNode.appendChild(e) setTimeout(function () { e.className += ' show' }) e.addEventListener('click', function (evt) { window.closeMenu(name) }, false) if (SO.code === 2) { m.style.height = window.innerHeight + 'px' var classSideMenu = ' side-menu' window.menu.position = 'left' if (m.className.indexOf('menu-right') >= 0) { classSideMenu = ' side-menu-right' window.menu.position = 'right' var headers = document.getElementsByClassName('header') if (headers.length) { for (i in headers) { if (headers[i].className && headers[i].className.indexOf('side-menu-right') < 0) { headers[i].className += ' side-menu-right' } } } } if (m.parentNode.className.indexOf('body') >= 0) { m.parentNode.className += classSideMenu } else { document.getElementsByTagName('body')[0].className += classSideMenu } } m.className += ' open' var customEvent = new CustomEvent('openMenu', { 'detail': {menu: name}}) document.dispatchEvent(customEvent) window.menu.openFired = true document.addEventListener('firedCloseMenu', function (e) { window.closeMenu(name) }, false) } } window.closeMenu = function (m) { var name = m m = document.getElementById(m) if (m.className.indexOf('open') < 0) { return false } var customEvent = new CustomEvent('closeMenu', { 'detail': {menu: name}}) document.dispatchEvent(customEvent) window.menu.openFired = false m.className = m.className.replace('open', '') var headers = document.getElementsByClassName('header') if (headers.length) { for (i in headers) { if (headers[i].className && headers[i].className.indexOf('side-menu-right') >= 0) { headers[i].className = headers[i].className.replace(' side-menu-right', '') } } } var e = m.parentNode.getElementsByClassName('backdrop-menu') if (e && e.length) { e = e[0] e.className = e.className.replace('show', '') setTimeout(function () { if (e && e.parentNode) { e.parentNode.removeChild(e) } }, 500) } if (SO.code !== 1) { if (m.parentNode.className.indexOf('body') >= 0) { m.parentNode.className = m.parentNode.className.replace('side-menu', '') } else { document.getElementsByTagName('body')[0].className = document.getElementsByTagName('body')[0].className.replace('side-menu', '') } } } document.querySelector('body').addEventListener('touchstart', function (evt) { window.menu.xDown = evt.touches[0].clientX window.menu.yDown = evt.touches[0].clientY }, false) window.menu.handleTouchMove = function (evt, name) { if (!window.menu.xDown || !window.menu.yDown) { return } var xUp = evt.touches[0].clientX var yUp = evt.touches[0].clientY window.menu.xDiff = window.menu.xDown - xUp window.menu.yDiff = window.menu.yDown - yUp if (Math.abs(window.menu.xDiff) > Math.abs(window.menu.yDiff)) { // Most significant. var menuRight = document.getElementById(name).classList.value.indexOf('menu-right') !== -1 if (window.menu.xDiff > 0) { if (menuRight && !window.menu.openFired) { window.openMenu(name) } else if (!menuRight && window.menu.openFired) { window.closeMenu(name) } } else { if (!menuRight && !window.menu.openFired) { window.openMenu(name) } else if (menuRight && window.menu.openFired) { window.closeMenu(name) } } } // Reset values. window.menu.xDown = null window.menu.yDown = null } window.menu.enableSwiper = function (name) { document.querySelector('body').addEventListener('touchmove', function (evt) { window.menu.handleTouchMove(evt, name) }, false) } ================================================ FILE: menu/style.css ================================================ /*Define an element being a menu, being able to disconnect over the page or to push the page, depending on the operating system.*/ .menu { position: fixed; top: 0; left: 0; width: 300px; height: 100%; z-index: 99999; transform: translateX(-312px); -webkit-transform: translateX(-312px); -moz-transform: translateX(-312px); -o-transform: translateX(-312px); transition-duration: 280ms; -webkit-transition-duration: 280ms; -moz-transition-duration: 280ms; -o-transition-duration: 280ms; box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); overflow: auto; } .menu.cover { width: 300px; } /*Set a menu on the right side.*/ .menu.menu-right { right: 0; left: auto; transform: translateX(105%); -webkit-transform: translateX(105%); -moz-transform: translateX(105%); -o-transform: translateX(105%); } /*Set a menu is open.*/ .menu.open { transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); } .menu.menu-right.open { margin-left: -312px; } .platform-ios .backdrop-menu { opacity: 0.01; } .platform-ios .menu { width: 264px; box-shadow:none; transition-duration: 0ms; -webkit-transition-duration: 0ms; -moz-transition-duration: 0ms; -o-transition-duration: 0ms; transform: translateX(-264px); -webkit-transform: translateX(-264px); -moz-transform: translateX(-264px); -o-transform: translateX(-264px); box-shadow: none; } .platform-ios .menu.cover { width: 264px; } .platform-ios .menu.menu-right { transform: translateX(105%); -webkit-transform: translateX(105%); -moz-transform: translateX(105%); -o-transform: translateX(105%); transition-duration: 0ms; -webkit-transition-duration: 0ms; -moz-transition-duration: 0ms; -o-transition-duration: 0ms; } .platform-ios .menu.open { transform: translateX(-264px); -webkit-transform: translateX(-264px); -moz-transform: translateX(-264px); -o-transform: translateX(-264px); margin-left: -1px; } .platform-ios .menu.menu-right.open { margin-left: -263px; transform:none; -webkit-transform: none; -moz-transform: none; -o-transform: none; box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); } .platform-ios .body, .platform-ios body { transition-duration: 0ms; -webkit-transition-duration: 0ms; -moz-transition-duration: 0ms; -o-transition-duration: 0ms; } .platform-ios .body.side-menu, .platform-ios.side-menu { transform: translateX(264px); -webkit-transform: translateX(264px); -moz-transform: translateX(264px); -o-transform: translateX(264px); border-left: 1px solid rgba(0, 0, 0, 0.15); overflow: hidden; } .platform-ios .body.side-menu-right, .platform-ios.side-menu-right, .platform-ios .header.side-menu-right { margin-left: -264px; } ================================================ FILE: mobileui-colors/component.json ================================================ { "name":"mobileui-colors", "author": "fabiorogeriosj", "dependencies": [] } ================================================ FILE: mobileui-colors/script.js ================================================ (function(){ window.colorsMobileUI = []; window.colorsMobileUI["red"] = "rgb(244, 67, 54)"; window.colorsMobileUI["red-50"] = "rgb(255, 235, 238)"; window.colorsMobileUI["red-100"] = "rgb(255, 205, 210)"; window.colorsMobileUI["red-200"] = "rgb(239, 154, 154)"; window.colorsMobileUI["red-300"] = "rgb(229, 115, 115)"; window.colorsMobileUI["red-400"] = "rgb(239, 83, 80)"; window.colorsMobileUI["red-500"] = "rgb(244, 67, 54)"; window.colorsMobileUI["red-600"] = "rgb(229, 57, 53)"; window.colorsMobileUI["red-700"] = "rgb(211, 47, 47)"; window.colorsMobileUI["red-800"] = "rgb(198, 40, 40)"; window.colorsMobileUI["red-900"] = "rgb(183, 28, 28)"; window.colorsMobileUI["pink"] = "rgb(233, 30, 99)"; window.colorsMobileUI["pink-50"] = "rgb(252, 228, 236)"; window.colorsMobileUI["pink-100"] = "rgb(248, 187, 208)"; window.colorsMobileUI["pink-200"] = "rgb(244, 143, 177)"; window.colorsMobileUI["Pink-300"] = "rgb(240, 98, 146)"; window.colorsMobileUI["pink-400"] = "rgb(236, 64, 122)"; window.colorsMobileUI["pink-500"] = "rgb(233, 30, 99)"; window.colorsMobileUI["pink-600"] = "rgb(216, 27, 96)"; window.colorsMobileUI["pink-700"] = "rgb(194, 24, 91)"; window.colorsMobileUI["pink-800"] = "rgb(173, 20, 87)"; window.colorsMobileUI["pink-900"] = "rgb(136, 14, 79)"; window.colorsMobileUI["purple"] = "rgb(156, 39, 176)"; window.colorsMobileUI["purple-50"] = "rgb(243, 229, 245)"; window.colorsMobileUI["purple-100"] = "rgb(225, 190, 231)"; window.colorsMobileUI["purple-200"] = "rgb(206, 147, 216)"; window.colorsMobileUI["Purple-300"] = "rgb(186, 104, 200)"; window.colorsMobileUI["Purple-400"] = "rgb(171, 71, 188)"; window.colorsMobileUI["purple-500"] = "rgb(156, 39, 176)"; window.colorsMobileUI["purple-600"] = "rgb(142, 36, 170)"; window.colorsMobileUI["purple-700"] = "rgb(123, 31, 162)"; window.colorsMobileUI["purple-800"] = "rgb(106, 27, 154)"; window.colorsMobileUI["purple-900"] = "rgb(74, 20, 140)"; window.colorsMobileUI["deep-purple"] = "rgb(103, 58, 183)"; window.colorsMobileUI["deep-purple-50"] = "rgb(237, 231, 246)"; window.colorsMobileUI["deep-purple-100"] = "rgb(209, 196, 233)"; window.colorsMobileUI["deep-purple-200"] = "rgb(179, 157, 219)"; window.colorsMobileUI["deep-purple-300"] = "rgb(149, 117, 205)"; window.colorsMobileUI["deep-purple-400"] = "rgb(126, 87, 194)"; window.colorsMobileUI["deep-purple-500"] = "rgb(103, 58, 183)"; window.colorsMobileUI["deep-purple-600"] = "rgb(94, 53, 177)"; window.colorsMobileUI["deep-purple-700"] = "rgb(81, 45, 168)"; window.colorsMobileUI["deep-purple-800"] = "rgb(69, 39, 160)"; window.colorsMobileUI["deep-purple-900"] = "rgb(49, 27, 146)"; window.colorsMobileUI["indigo"] = "rgb(63, 81, 181)"; window.colorsMobileUI["indigo-50"] = "rgb(232, 234, 246)"; window.colorsMobileUI["indigo-100"] = "rgb(197, 202, 233)"; window.colorsMobileUI["indigo-200"] = "rgb(159, 168, 218)"; window.colorsMobileUI["indigo-300"] = "rgb(121, 134, 203)"; window.colorsMobileUI["indigo-400"] = "rgb(92, 107, 192)"; window.colorsMobileUI["indigo-500"] = "rgb(63, 81, 181)"; window.colorsMobileUI["indigo-600"] = "rgb(57, 73, 171)"; window.colorsMobileUI["indigo-700"] = "rgb(48, 63, 159)"; window.colorsMobileUI["indigo-800"] = "rgb(40, 53, 147)"; window.colorsMobileUI["indigo-900"] = "rgb(26, 35, 126)"; window.colorsMobileUI["blue"] = "rgb(33, 150, 243)"; window.colorsMobileUI["blue-50"] = "rgb(227, 242, 253)"; window.colorsMobileUI["blue-100"] = "rgb(187, 222, 251)"; window.colorsMobileUI["blue-200"] = "rgb(144, 202, 249)"; window.colorsMobileUI["blue-300"] = "rgb(100, 181, 246)"; window.colorsMobileUI["blue-400"] = "rgb(66, 165, 245)"; window.colorsMobileUI["blue-500"] = "rgb(33, 150, 243)"; window.colorsMobileUI["blue-600"] = "rgb(30, 136, 229)"; window.colorsMobileUI["blue-700"] = "rgb(25, 118, 210)"; window.colorsMobileUI["blue-800"] = "rgb(21, 101, 192)"; window.colorsMobileUI["blue-900"] = "rgb(13, 71, 161)"; window.colorsMobileUI["light-blue"] = "rgb(3, 169, 244)"; window.colorsMobileUI["light-blue-50"] = "rgb(225, 245, 254)"; window.colorsMobileUI["light-blue-100"] = "rgb(179, 229, 252)"; window.colorsMobileUI["light-blue-200"] = "rgb(129, 212, 250)"; window.colorsMobileUI["light-blue-300"] = "rgb(79, 195, 247)"; window.colorsMobileUI["light-blue-400"] = "rgb(41, 182, 246)"; window.colorsMobileUI["light-blue-500"] = "rgb(3, 169, 244)"; window.colorsMobileUI["light-blue-600"] = "rgb(3, 155, 229)"; window.colorsMobileUI["light-blue-700"] = "rgb(2, 136, 209)"; window.colorsMobileUI["light-blue-800"] = "rgb(2, 119, 189)"; window.colorsMobileUI["light-blue-900"] = "rgb(1, 87, 155)"; window.colorsMobileUI["cyan"] = "rgb(0, 188, 212)"; window.colorsMobileUI["cyan-50"] = "rgb(224, 247, 250)"; window.colorsMobileUI["cyan-100"] = "rgb(178, 235, 242)"; window.colorsMobileUI["cyan-200"] = "rgb(128, 222, 234)"; window.colorsMobileUI["cyan-300"] = "rgb(77, 208, 225)"; window.colorsMobileUI["cyan-400"] = "rgb(38, 198, 218)"; window.colorsMobileUI["cyan-500"] = "rgb(0, 188, 212)"; window.colorsMobileUI["cyan-600"] = "rgb(0, 172, 193)"; window.colorsMobileUI["cyan-700"] = "rgb(0, 151, 167)"; window.colorsMobileUI["cyan-800"] = "rgb(0, 131, 143)"; window.colorsMobileUI["cyan-900"] = "rgb(0, 96, 100)"; window.colorsMobileUI["teal"] = "rgb(0, 150, 136)"; window.colorsMobileUI["teal-50"] = "rgb(224, 242, 241)"; window.colorsMobileUI["teal-100"] = "rgb(178, 223, 219)"; window.colorsMobileUI["teal-200"] = "rgb(128, 203, 196)"; window.colorsMobileUI["teal-300"] = "rgb(77, 182, 172)"; window.colorsMobileUI["teal-400"] = "rgb(38, 166, 154)"; window.colorsMobileUI["teal-500"] = "rgb(0, 150, 136)"; window.colorsMobileUI["teal-600"] = "rgb(0, 137, 123)"; window.colorsMobileUI["teal-700"] = "rgb(0, 121, 107)"; window.colorsMobileUI["teal-800"] = "rgb(0, 105, 92)"; window.colorsMobileUI["teal-900"] = "rgb(0, 77, 64)"; window.colorsMobileUI["green"] = "rgb(76, 175, 80)"; window.colorsMobileUI["green-50"] = "rgb(232, 245, 233)"; window.colorsMobileUI["green-100"] = "rgb(200, 230, 201)"; window.colorsMobileUI["green-200"] = "rgb(165, 214, 167)"; window.colorsMobileUI["green-300"] = "rgb(129, 199, 132)"; window.colorsMobileUI["green-400"] = "rgb(102, 187, 106)"; window.colorsMobileUI["green-500"] = "rgb(76, 175, 80)"; window.colorsMobileUI["green-600"] = "rgb(67, 160, 71)"; window.colorsMobileUI["green-700"] = "rgb(56, 142, 60)"; window.colorsMobileUI["green-800"] = "rgb(46, 125, 50)"; window.colorsMobileUI["green-900"] = "rgb(27, 94, 32)"; window.colorsMobileUI["light-green"] = "rgb(139, 195, 74)"; window.colorsMobileUI["light-green-50"] = "rgb(241, 248, 233)"; window.colorsMobileUI["light-green-100"] = "rgb(220, 237, 200)"; window.colorsMobileUI["light-green-200"] = "rgb(197, 225, 165)"; window.colorsMobileUI["light-green-300"] = "rgb(174, 213, 129)"; window.colorsMobileUI["light-green-400"] = "rgb(156, 204, 101)"; window.colorsMobileUI["light-green-500"] = "rgb(139, 195, 74)"; window.colorsMobileUI["light-green-600"] = "rgb(124, 179, 66)"; window.colorsMobileUI["light-green-700"] = "rgb(104, 159, 56)"; window.colorsMobileUI["light-green-800"] = "rgb(85, 139, 47)"; window.colorsMobileUI["light-green-900"] = "rgb(51, 105, 30)"; window.colorsMobileUI["lime"] = "rgb(205, 220, 57)"; window.colorsMobileUI["lime-50"] = "rgb(249, 251, 231)"; window.colorsMobileUI["lime-100"] = "rgb(240, 244, 195)"; window.colorsMobileUI["lime-200"] = "rgb(230, 238, 156)"; window.colorsMobileUI["lime-300"] = "rgb(220, 231, 117)"; window.colorsMobileUI["lime-400"] = "rgb(212, 225, 87)"; window.colorsMobileUI["lime-500"] = "rgb(205, 220, 57)"; window.colorsMobileUI["lime-600"] = "rgb(192, 202, 51)"; window.colorsMobileUI["lime-700"] = "rgb(175, 180, 43)"; window.colorsMobileUI["lime-800"] = "rgb(158, 157, 36)"; window.colorsMobileUI["lime-900"] = "rgb(130, 119, 23)"; window.colorsMobileUI["yellow"] = "rgb(255, 235, 59)"; window.colorsMobileUI["yellow-50"] = "rgb(255, 253, 231)"; window.colorsMobileUI["yellow-100"] = "rgb(255, 249, 196)"; window.colorsMobileUI["yellow-200"] = "rgb(255, 245, 157)"; window.colorsMobileUI["yellow-300"] = "rgb(255, 241, 118)"; window.colorsMobileUI["yellow-400"] = "rgb(255, 238, 88)"; window.colorsMobileUI["yellow-500"] = "rgb(255, 235, 59)"; window.colorsMobileUI["yellow-600"] = "rgb(253, 216, 53)"; window.colorsMobileUI["yellow-700"] = "rgb(251, 192, 45)"; window.colorsMobileUI["yellow-800"] = "rgb(249, 168, 37)"; window.colorsMobileUI["yellow-900"] = "rgb(245, 127, 23)"; window.colorsMobileUI["amber"] = "rgb(255, 193, 7)"; window.colorsMobileUI["amber-50"] = "rgb(255, 248, 225)"; window.colorsMobileUI["amber-100"] = "rgb(255, 236, 179)"; window.colorsMobileUI["amber-200"] = "rgb(255, 224, 130)"; window.colorsMobileUI["amber-300"] = "rgb(255, 213, 79)"; window.colorsMobileUI["amber-400"] = "rgb(255, 202, 40)"; window.colorsMobileUI["amber-500"] = "rgb(255, 193, 7)"; window.colorsMobileUI["amber-600"] = "rgb(255, 179, 0)"; window.colorsMobileUI["amber-700"] = "rgb(255, 160, 0)"; window.colorsMobileUI["amber-800"] = "rgb(255, 143, 0)"; window.colorsMobileUI["amber-900"] = "rgb(255, 111, 0)"; window.colorsMobileUI["orange"] = "rgb(255, 152, 0)"; window.colorsMobileUI["orange-50"] = "rgb(255, 243, 224)"; window.colorsMobileUI["orange-100"] = "rgb(255, 224, 178)"; window.colorsMobileUI["orange-200"] = "rgb(255, 204, 128)"; window.colorsMobileUI["orange-300"] = "rgb(255, 183, 77)"; window.colorsMobileUI["orange-400"] = "rgb(255, 167, 38)"; window.colorsMobileUI["orange-500"] = "rgb(255, 152, 0)"; window.colorsMobileUI["orange-600"] = "rgb(251, 140, 0)"; window.colorsMobileUI["orange-700"] = "rgb(245, 124, 0)"; window.colorsMobileUI["orange-800"] = "rgb(239, 108, 0)"; window.colorsMobileUI["orange-900"] = "rgb(230, 81, 0)"; window.colorsMobileUI["deep-orange"] = "rgb(255, 87, 34)"; window.colorsMobileUI["deep-orange-50"] = "rgb(251, 233, 231)"; window.colorsMobileUI["deep-orange-100"] = "rgb(255, 204, 188)"; window.colorsMobileUI["deep-orange-200"] = "rgb(255, 171, 145)"; window.colorsMobileUI["deep-orange-300"] = "rgb(255, 138, 101)"; window.colorsMobileUI["deep-orange-400"] = "rgb(255, 112, 67)"; window.colorsMobileUI["deep-orange-500"] = "rgb(255, 87, 34)"; window.colorsMobileUI["deep-orange-600"] = "rgb(244, 81, 30)"; window.colorsMobileUI["deep-orange-700"] = "rgb(230, 74, 25)"; window.colorsMobileUI["deep-orange-800"] = "rgb(216, 67, 21)"; window.colorsMobileUI["deep-orange-900"] = "rgb(191, 54, 12)"; window.colorsMobileUI["brown"] = "rgb(121, 85, 72)"; window.colorsMobileUI["brown-50"] = "rgb(239, 235, 233)"; window.colorsMobileUI["brown-100"] = "rgb(215, 204, 200)"; window.colorsMobileUI["brown-200"] = "rgb(188, 170, 164)"; window.colorsMobileUI["brown-300"] = "rgb(161, 136, 127)"; window.colorsMobileUI["brown-400"] = "rgb(141, 110, 99)"; window.colorsMobileUI["brown-500"] = "rgb(121, 85, 72)"; window.colorsMobileUI["brown-600"] = "rgb(109, 76, 65)"; window.colorsMobileUI["brown-700"] = "rgb(93, 64, 55)"; window.colorsMobileUI["brown-800"] = "rgb(78, 52, 46)"; window.colorsMobileUI["brown-900"] = "rgb(62, 39, 35)"; window.colorsMobileUI["grey"] = "rgb(158, 158, 158)"; window.colorsMobileUI["grey-50"] = "rgb(250, 250, 250)"; window.colorsMobileUI["grey-100"] = "rgb(245, 245, 245)"; window.colorsMobileUI["grey-200"] = "rgb(238, 238, 238)"; window.colorsMobileUI["grey-300"] = "rgb(224, 224, 224)"; window.colorsMobileUI["grey-400"] = "rgb(189, 189, 189)"; window.colorsMobileUI["grey-500"] = "rgb(158, 158, 158)"; window.colorsMobileUI["grey-600"] = "rgb(117, 117, 117)"; window.colorsMobileUI["grey-700"] = "rgb(97, 97, 97)"; window.colorsMobileUI["grey-800"] = "rgb(66, 66, 66)"; window.colorsMobileUI["grey-900"] = "rgb(33, 33, 33)"; window.colorsMobileUI["blue-grey"] = "rgb(96, 125, 139)"; window.colorsMobileUI["blue-grey-50"] = "rgb(236, 239, 241)"; window.colorsMobileUI["blue-grey-100"] = "rgb(207, 216, 220)"; window.colorsMobileUI["blue-grey-200"] = "rgb(176, 190, 197)"; window.colorsMobileUI["blue-grey-300"] = "rgb(144, 164, 174)"; window.colorsMobileUI["blue-grey-400"] = "rgb(120, 144, 156)"; window.colorsMobileUI["blue-grey-500"] = "rgb(96, 125, 139)"; window.colorsMobileUI["blue-grey-600"] = "rgb(84, 110, 122)"; window.colorsMobileUI["blue-grey-700"] = "rgb(69, 90, 100)"; window.colorsMobileUI["blue-grey-800"] = "rgb(55, 71, 79)"; window.colorsMobileUI["blue-grey-900"] = "rgb(38, 50, 56)"; window.colorsMobileUI["black"] = "rgb(0, 0, 0)"; window.colorsMobileUI["white"] = "rgb(255, 255, 255)"; window.colorsMobileUI["black-opacity-90"] = "rgba(0, 0, 0, 0.9)"; window.colorsMobileUI["white-opacity-90"] = "rgba(255, 255, 255, 0.9)"; window.colorsMobileUI["black-opacity-70"] = "rgba(0, 0, 0, 0.8)"; window.colorsMobileUI["white-opacity-70"] = "rgba(255, 255, 255, 0.7)"; window.colorsMobileUI["black-opacity-50"] = "rgba(0, 0, 0, 0.7)"; window.colorsMobileUI["white-opacity-50"] = "rgba(255, 255, 255, 0.5)"; window.colorsMobileUI["black-opacity-30"] = "rgba(0, 0, 0, 0.6)"; window.colorsMobileUI["white-opacity-30"] = "rgba(255, 255, 255, 0.3)"; window.colorsMobileUI["black-opacity-10"] = "rgba(0, 0, 0, 0.5)"; window.colorsMobileUI["white-opacity-10"] = "rgba(255, 255, 255, 0.1)"; })(); ================================================ FILE: mobileui-colors/style.css ================================================ ================================================ FILE: mobileuijs/component.json ================================================ { "name":"mobileuijs", "author": "fabiorogeriosj", "dependencies": [] } ================================================ FILE: mobileuijs/index.html ================================================MobileUI.JS
This component is a simple library for manipulating data, states of elements and Ajax request in JavaScript.
To use this component you need install with the command:
mobileui install mobileuijs
The most important functionality is the observation in objects and arrays.
For use you need add attribute data in your HTML element with the name of a object or array.
This causes an element to be changed if the object or array is modified and you can display using a escape expression ${}
MobileUI.js embed the lib SuperAgent for call ajax request, because it is light-weight progressive ajax API crafted for flexibility, readability, and a low learning curve.
In this example a have a object with attributes of user:
And in my HTML I have an element that uses this created object as data:
In this example a have a array with objects of user:
And in my HTML I have an element that uses this created array as data:
If you add another object in array, the HTML elements will update. Check this feature in action:
The features of this component are:
| Function | Description |
|---|---|
MobileUI.objectByForm('idElement') |
Returns an object with the values of the inputs found within the given element. |
MobileUI.formByObject('idElement', object) |
Set the input values from an informed object. |
MobileUI.clearForm('idElement') |
Clear and reset inputs within the entered element. |
MobileUI.ajax |
Ajax request flexibility, readability, and a low learning curve using SuperAgent. |
MobileUI.show('idElement') |
Display an element that is hidden. |
MobileUI.hide('idElement') |
Hidden an element. |
MobileUI.showHide('idElement') |
Display an element that is hidden or hides an element if it is visible. |
MobileUI.focus('idElement') |
Focus on an element, if input to keyboard is displayed. |
MobileUI.disable('idElement') |
Disable an element and your children's. |
MobileUI.enable('idElement') |
Enable an element and your children's. |
document.addEventListener('dataUpdated') |
Fire event when data is updated, you can check whats is data in the event.detail, ex:
document.addEventListener('dataUpdated', function(event){
//event.detail.dataKey
//event.detail.dataValue
})
|
MobileUI.formatMoney(number) |
Returns a string formatted in money, you can pass the number of decimal places, the decimal separator, and the thousands separator.
Example: MobileUI.formatMoney(256) MobileUI.formatMoney(1256, 2, ',','.')
|
MobileUI.myFunction = function(params){} |
You can create a custom function for use in data list HTML validation, example $$$myFunction{par1}
|
See this example using ajax request.
================================================ FILE: mobileuijs/script.js ================================================ !function(a){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=a();else if("function"==typeof define&&define.amd)define([],a);else{var b;b="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,b.superagent=a()}}(function(){return function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c||a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;gMoment.js
Moment.js is a lightweight JavaScript date library for parsing, manipulating, and formatting dates. It is design to work in both the browser and in NodeJS. Moment supports dates in all standard formats, locales, relative time, and time zones.
To use this component you need install with the command:
mobileui install momentjs
See the Moment.js documentation and its resources at momentjs.com/docs.
================================================ FILE: momentjs/script.js ================================================ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.moment=t()}(this,function(){"use strict";function e(){return Yt.apply(null,arguments)}function t(e){return e instanceof Array||"[object Array]"===Object.prototype.toString.call(e)}function n(e){return null!=e&&"[object Object]"===Object.prototype.toString.call(e)}function s(e){if(Object.getOwnPropertyNames)return 0===Object.getOwnPropertyNames(e).length;var t;for(t in e)if(e.hasOwnProperty(t))return!1;return!0}function i(e){return void 0===e}function r(e){return"number"==typeof e||"[object Number]"===Object.prototype.toString.call(e)}function a(e){return e instanceof Date||"[object Date]"===Object.prototype.toString.call(e)}function o(e,t){var n,s=[];for(n=0;nContact
Contacts
Jeanette Fletcher
jeanette.fletcher15@example.com
Jack Oliver
jack.oliver@example.com
Carter hudson
carter.hudson17@example.com
Page
Navigation is how users move between different pages in your app. MobileUI’s navigation follows standard native navigation concepts, like those in iOS.
For use this component you need install with command:
mobileui install page
The operation of this component is very simple, to open a new page just call the function openPage('NAME_FILE_HTML') and to go
back just call the function backPage().
If you need disabled BackButton in your device, just define window.disabledBackButton=true.
If you need disabled effect when the page is openning in your device, just define window.disabledOpenPageEffect=true.
For the example above we have the contacts page:
When you click on an item in the list the contact page appears:
And when opening the contact page the function functionOpenContact will be executed:
For advanced mode you can listener the event openPage and closePage.
Popover
The Popover is a view that floats above an app’s content. Popovers provide an easy way to present or gather information from the user and are commonly used in the following situations: Show more info about the current view ,select a commonly used tool or configuration and present a list of actions to perform inside one of your views.
Dependency:
base and list.
The dependencies will be installed together with this module
To use this component you need install with the command:
mobileui install popover
Your popover need have id and for you open popover, just call function openPopover('ID_YOUR_POPOVER').
See example:
If you need make bind some event after popover open just listener event:
================================================ FILE: popover/script.js ================================================ window.openPopover = function (p) { var button = event.target var rect = button.getBoundingClientRect() var name = p var p = document.getElementById(p) var e = document.createElement('div') e.className = 'backdrop backdrop-popover' p.parentNode.appendChild(e) e.addEventListener('click', function (evt) { window.closePopover(name) }) p.addEventListener('click', function (evt) { window.closePopover(name) }) var marginRight = document.body.offsetWidth - rect.left var diff = document.body.offsetWidth - marginRight marginRight = marginRight - rect.width if (diff > 250) { p.style += ';top: 110%;right: ' + marginRight + 'px;transform-origin: right top 0px;transform: scale(1);' } else { p.style += ';top: 110%;left: ' + diff + 'px;transform-origin: right top 0px;transform: scale(1);' } p.classList.add('show') if (SO.code === 2) { p.style.top = (rect.top + rect.height) + 'px' var divArrow = document.createElement('div') divArrow.classList.add('popover-arrow') p.parentNode.appendChild(divArrow) divArrow.setAttribute('style', 'top:' + (rect.top + rect.height - 5) + 'px;left:' + (rect.left + (rect.width / 2) - 7) + 'px') } else { var pHeight = p.clientHeight var pWidth = p.clientWidth p.style.height = 0 p.style.width = 0 p.style.top = rect.top + 'px' setTimeout(function () { var style = p.getAttribute('style') style += ' ;-webkit-transition: all 200ms ease;transition: all 200ms ease;' p.setAttribute('style', style) p.style.height = pHeight + 'px' p.style.width = pWidth + 'px' }) } var customEvent = new CustomEvent('popoverOpened') document.dispatchEvent(customEvent) } window.closePopover = function (p) { var p = document.getElementById(p) var timeEffect = 0 if (SO.code !== 2) { p.style.opacity = 0 timeEffect = 200 } setTimeout(function () { var arrow = document.getElementsByClassName('popover-arrow') if (arrow.length) { arrow[0].parentNode.removeChild(arrow[0]) } p.classList.remove('show') var e = p.parentNode.getElementsByClassName('backdrop-popover') if (e && e.length) { e = e[0] if (e && e.parentNode) { e.parentNode.removeChild(e) } } var customEvent = new CustomEvent('popoverClosed') document.dispatchEvent(customEvent) }, timeEffect) } ================================================ FILE: popover/style.css ================================================ /*Define a new popover.*/ .popover { position: absolute; z-index: 10001; border-radius: 3px; box-shadow: 0 3px 12px 2px rgba(0,0,0,.3); overflow: hidden; display: none; background-color: #fff; } .platform-ios .popover { border-radius: 10px; box-shadow: none; } .popover-arrow { z-index: 10000; position: absolute; width: 14px; height: 14px; border-radius: 3px; background-color: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .popover.show { display: block; } .popover .list, .popover .item { border-width: 0; } .popover .list .item h1 { margin: 0; } .popover .item { display: table !important; overflow: hidden; white-space: nowrap; padding: 10px; } .platform-ios .popover .item { border-width: 1px; } .popover .item:first-child { padding-top: 15px; } .popover .item:last-child { padding-bottom: 15px; } .backdrop-popover { opacity: 0.01; } .platform-ios .backdrop-popover { opacity: 0.08; } .popover .item[data] { display: none!important; } ================================================ FILE: progress-circle/component.json ================================================ { "name":"progress-circle", "author": "fabiorogeriosj", "dependencies": [ "mobileui-colors", "progressbarjs" ] } ================================================ FILE: progress-circle/index.html ================================================Progress Circle
Progress circle is a simple component widely used to inform metrics about a given. You can create it either by the HTML element or programmed via javascript.
Dependency:
progressbarjs.
The dependencies will be installed together with this module
To use this component you need install with the command:
mobileui install progress-circle
| Atribute/property | Description |
|---|---|
value |
Initial value for component |
title |
Title for component |
subTitle |
Subtitle for component |
text |
Info of the value, example: 65%, the simbol (%) is the text |
color |
Color of external line |
textColor |
Color of text. Use name theme colors |
textWeight |
Weight of text (bold, 300, normal, 800, etc) |
titleWeight |
Weight of title (bold, 300, normal, 800, etc) |
subTitleWeight |
Weight of subtitle (bold, 300, normal, 800, etc) |
titleColor |
Color of title. Use name theme colors |
subTitleColor |
Color of subtitle. Use name theme colors |
width |
Size canvas size area |
height |
Size canvas size area |
trailColor |
Color of trail line. Use name theme colors |
strokeWidth |
Size stroke line. |
trailWidth |
Size stroke line. |
textSize |
Size font text. Example textSize="25px" |
titleSize |
Size font text. Example textSize="25px" |
subTitleSize |
Size font text. Example textSize="25px" |
fill |
... |
padding |
... |
durationAnimate |
... |
You can create a progress circle by JavaScript:
================================================ FILE: progress-circle/script.js ================================================ window.ProgressCircle = { rebind : function(){ var self = this; var progress = document.querySelectorAll('.progress-circle'); for (var i = 0; i < progress.length; i++) { progress[i].classList.remove("binded"); progress[i].innerHTML = ""; } self.bind(); }, bind : function(){ var progress = document.querySelectorAll('.progress-circle:not(.binded)'); var self = this; for (var i = 0; i < progress.length; i++) { var config = {}; config.value = Number(progress[i].getAttribute('value')); config.maxValue = Number(progress[i].getAttribute('maxValue')) || 100; config.showValue = progress[i].getAttribute('showValue')==='1' || progress[i].getAttribute('showValue')==='true' || false; config.title = progress[i].getAttribute('title') || ''; config.subTitle = progress[i].getAttribute('subTitle') || ''; config.text = progress[i].getAttribute('text') || ''; config.color = progress[i].getAttribute('color') || 'blue'; config.textColor = progress[i].getAttribute('textColor') || 'grey-800'; config.textWeight = progress[i].getAttribute('textWeight') || 'normal'; config.titleWeight = progress[i].getAttribute('titleWeight') || 'normal'; config.subTitleWeight = progress[i].getAttribute('subTitleWeight') || 'normal'; config.titleColor = progress[i].getAttribute('titleColor') || 'grey-500'; config.subTitleColor = progress[i].getAttribute('subTitleColor') || 'grey-300'; config.width = progress[i].getAttribute('width') || '100%'; config.height = progress[i].getAttribute('height') || '300px'; config.trailColor = progress[i].getAttribute('trailColor') || 'grey'; config.strokeWidth = progress[i].getAttribute('strokeWidth') || '1'; config.trailWidth = progress[i].getAttribute('trailWidth') || '1'; config.textSize = progress[i].getAttribute('textSize') || '16px'; config.titleSize = progress[i].getAttribute('titleSize') || '14px'; config.subTitleSize = progress[i].getAttribute('subTitleSize') || '12px'; config.fill = progress[i].getAttribute('fill') || ''; config.padding = progress[i].getAttribute('padding') || '0'; config.durationAnimate = Number(progress[i].getAttribute('duration') || '800'); self.create(progress[i], config); } }, create: function(elm, config){ if(!elm.classList.contains('binded')){ elm.classList.add('binded'); if(!elm.classList.contains('progress-circle')){ elm.classList.add('progress-circle-js') } config.value = config.value || 0; config.maxValue = config.maxValue || 100; config.showValue = config.showValue || false; config.title = config.title || ''; config.subTitle = config.subTitle || ''; config.text = config.text || ''; config.color = config.color || 'blue'; config.textColor = config.textColor || 'grey-800'; config.textWeight = config.textWeight || 'normal'; config.titleWeight = config.titleWeight || 'normal'; config.subTitleWeight = config.subTitleWeight || 'normal'; config.titleColor = config.titleColor || 'grey-500'; config.subTitleColor = config.subTitleColor || 'grey-300'; config.width = config.width || '100%'; config.height = config.height || '300px'; config.trailColor = config.trailColor || 'grey'; config.strokeWidth = config.strokeWidth || '1'; config.trailWidth = config.trailWidth || '1'; config.textSize = config.textSize || '16px'; config.titleSize = config.titleSize || '14px'; config.subTitleSize = config.subTitleSize || '12px'; config.fill = config.fill || ''; config.padding = config.padding || '0'; config.durationAnimate = config.durationAnimate || '800'; elm.style.width=config.width; elm.style.height=config.height; elm.progressCircle = {}; elm.progressCircle.bar = new ProgressBar.Circle(elm, { color: colorsMobileUI[config.color], trailColor: colorsMobileUI[config.trailColor], strokeWidth: config.strokeWidth, trailWidth: config.trailWidth, easing: 'easeInOut', duration: config.durationAnimate, fill: config.fill, text: { autoStyleContainer: true, style: { color: colorsMobileUI[config.textColor], position: 'absolute', fontSize: config.textSize, fontWeight: config.textWeight, left: '50%', top: '50%', padding: 0, margin: 0, transform: { prefix: true, value: 'translate(-50%, -50%)' } } }, svgStyle: { display: 'block', width: config.width, height: config.height, padding: config.padding }, from: { color: colorsMobileUI[config.color], width: config.strokeWidth }, to: { color: colorsMobileUI[config.color], width: config.strokeWidth }, // Set default step function for all animate calls step: function(state, circle) { circle.path.setAttribute('stroke', state.color); circle.path.setAttribute('stroke-width', state.width); var valueInner = Math.round(circle.value() * config.maxValue); if(config.showValue){ valueInner = config.value } var valueText = ''; if(config.title){ var style = 'style="'; if(config.titleSize) style += ';font-size:'+config.titleSize; if(config.titleWeight) style += ';font-weight:'+config.titleWeight; if(config.titleColor) style += ';color:'+colorsMobileUI[config.titleColor]; style += '"'; valueText += ''+config.title+'
'
}
valueText += valueInner + config.text;
if(config.subTitle){
var style = 'style="';
if(config.subTitleSize) style += ';font-size:'+config.subTitleSize;
if(config.subTitleWeight) style += ';font-weight:'+config.subTitleWeight;
if(config.subTitleColor) style += ';color:'+colorsMobileUI[config.subTitleColor];
style += '"';
valueText += ''+config.subTitle+'
'
}
circle.setText(valueText);
}
});
elm.progressCircle.update = function(v){
var valueBar = 0;
if(v <= config.maxValue && v >= 0) {
valueBar = v/config.maxValue;
} else if(v < 0) {
console.warn("Value for progress circle is too small. (Requested value is "+v+")");
} else {
console.warn("Value for progress circle is too high. Maximum is "+config.maxValue+" and requested value is "+v+". (Value set to maximum for now.)")
valueBar=1;
}
this.bar.animate(valueBar);
}
elm.progressCircle.update(config.value);
}
}
}
================================================
FILE: progress-circle/style.css
================================================
.progress-circle, .progress-circle-js {
margin: auto;
}
.progress-circle-title {
opacity: 0.8;
}
.progress-circle-subtitle {
opacity: 0.6;
}
================================================
FILE: progress-semicircle/component.json
================================================
{
"name":"progress-semicircle",
"author": "fabiorogeriosj",
"dependencies": [
"mobileui-colors",
"progressbarjs"
]
}
================================================
FILE: progress-semicircle/index.html
================================================
Progress Semicircle
Progress semi circle is a simple component widely used to inform metrics about a given. You can create it either by the HTML element or programmed via javascript.
Dependency:
progressbarjs.
The dependencies will be installed together with this module
To use this component you need install with the command:
mobileui install progress-semicircle
| Atribute/property | Description |
|---|---|
value |
Initial value for component |
title |
Title for component |
subTitle |
Subtitle for component |
text |
Info of the value, example: 65%, the simbol (%) is the text |
color |
Color of external line |
textColor |
Color of text. Use name theme colors |
textWeight |
Weight of text (bold, 300, normal, 800, etc) |
titleWeight |
Weight of title (bold, 300, normal, 800, etc) |
subTitleWeight |
Weight of subtitle (bold, 300, normal, 800, etc) |
titleColor |
Color of title. Use name theme colors |
subTitleColor |
Color of subtitle. Use name theme colors |
width |
Size canvas size area |
height |
Size canvas size area |
trailColor |
Color of trail line. Use name theme colors |
strokeWidth |
Size stroke line. |
trailWidth |
Size stroke line. |
textSize |
Size font text. Example textSize="25px" |
textMargin |
Size margin text. Example textMargin="100px" |
titleSize |
Size font text. Example textSize="25px" |
subTitleSize |
Size font text. Example textSize="25px" |
fill |
... |
padding |
... |
durationAnimate |
... |
'+config.title+'
'
}
valueText += valueInner + config.text;
if(config.subTitle){
var style = 'style="';
if(config.subTitleSize) style += ';font-size:'+config.subTitleSize;
if(config.subTitleWeight) style += ';font-weight:'+config.subTitleWeight;
if(config.subTitleColor) style += ';color:'+colorsMobileUI[config.subTitleColor];
style += '"';
valueText += ''+config.subTitle+'
'
}
circle.setText(valueText);
}
});
elm.progressSemicircle.update = function(v){
var valueBar = 0;
if(v <= config.maxValue && v >= 0) {
valueBar = v/config.maxValue;
} else if(v < 0) {
console.warn("Value for progress semicircle is too small. (Requested value is "+v+")");
} else {
console.warn("Value for progress semicircle is too high. Maximum is "+config.maxValue+" and requested value is "+v+". (Value set to maximum for now.)")
valueBar=1;
}
this.bar.animate(valueBar);
}
elm.progressSemicircle.update(config.value);
}
}
}
================================================
FILE: progress-semicircle/style.css
================================================
.progress-semicircle, .progress-semicircle-js {
margin: auto;
}
.progress-semicircle-title {
opacity: 0.8;
}
.progress-semicircle-subtitle {
opacity: 0.6;
}
================================================
FILE: progressbarjs/component.json
================================================
{
"name":"progressbarjs",
"author": "kimmobrunfeldt",
"dependencies": []
}
================================================
FILE: progressbarjs/index.html
================================================
ProgressBar.js
With ProgressBar.js, it's easy to create responsive and stylish progress bars for the web. Animations perform well even on mobile devices. It provides a few built‑in shapes like Line, Circle and SemiCircle but you can also create custom shaped progress bars with any vector graphic editor.
To use this component you need install with the command:
mobileui install progressbarjs
MobileUI use this lib for create another components!
================================================ FILE: progressbarjs/script.js ================================================ // ProgressBar.js 1.0.1 // https://kimmobrunfeldt.github.io/progressbar.js // License: MIT !function(a){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=a();else if("function"==typeof define&&define.amd)define([],a);else{var b;b="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,b.ProgressBar=a()}}(function(){var a;return function b(a,c,d){function e(g,h){if(!c[g]){if(!a[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};a[g][0].call(k.exports,function(b){var c=a[g][1][b];return e(c?c:b)},k,k.exports,b,a,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;gPullToRefresh
PullToRefresh A small, but powerful Javascript library crafted to power your webapp's pull to refresh feature. No markup needed, highly customizable and dependency-free!
To use this component you need install with the command:
mobileui install pulltorefresh
See the PullToRefresh documentation and its resources at github.com/BoxFactura/pulltorefresh.js.
See this example:
================================================ FILE: pulltorefresh/script.js ================================================ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.PullToRefresh = factory()) }(this, function () { function _ptrMarkup () { return '\n\n
' }
function _ptrStyles () { return '.__PREFIX__ptr {\n box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.12);\n pointer-events: none;\n font-size: 0.85em;\n font-weight: bold;\n top: 0;\n height: 0;\n transition: height 0.3s, min-height 0.3s;\n text-align: center;\n width: 100%;\n overflow: hidden;\n display: flex;\n align-items: flex-end;\n align-content: stretch;\n}\n.__PREFIX__box {\n padding: 10px;\n flex-basis: 100%;\n}\n.__PREFIX__pull {\n transition: none;\n}\n.__PREFIX__text {\n margin-top: .33em;\n color: rgba(0, 0, 0, 0.3);\n}\n.__PREFIX__icon {\n color: rgba(0, 0, 0, 0.3);\n transition: transform .3s;\n}\n.__PREFIX__top {\n touch-action: pan-x pan-down pinch-zoom;\n}\n.__PREFIX__release .__PREFIX__icon {\n transform: rotate(180deg);\n}\n' }
var _defaults = {
distThreshold: 60,
distMax: 80,
distReload: 50,
bodyOffset: 20,
mainElement: 'body',
triggerElement: 'body',
ptrElement: '.ptr',
classPrefix: 'ptr--',
cssProp: 'min-height',
iconArrow: '⇣',
iconRefreshing: '…',
instructionsPullToRefresh: 'Pull down to refresh',
instructionsReleaseToRefresh: 'Release to refresh',
instructionsRefreshing: 'Refreshing',
refreshTimeout: 500,
getMarkup: _ptrMarkup,
getStyles: _ptrStyles,
onInit: function () {},
onRefresh: function () { return location.reload() },
resistanceFunction: function (t) { return Math.min(1, t / 2.5) },
shouldPullToRefresh: function () { return !window.scrollY }
}
var _methods = ['mainElement', 'ptrElement', 'triggerElement']
var _shared = {
pullStartY: null,
pullMoveY: null,
handlers: [],
styleEl: null,
events: null,
dist: 0,
state: 'pending',
timeout: null,
distResisted: 0,
supportsPassive: false
}
try {
window.addEventListener('test', null, {
get passive () { // eslint-disable-line getter-return
_shared.supportsPassive = true
}
})
} catch (e) {
// do nothing
}
var _ptr = {
setupDOM: function setupDOM (handler) {
if (!handler.ptrElement) {
var ptr = document.createElement('div')
if (handler.mainElement !== document.body) {
handler.mainElement.parentNode.insertBefore(ptr, handler.mainElement)
} else {
document.body.insertBefore(ptr, document.body.firstChild)
}
ptr.classList.add(((handler.classPrefix) + 'ptr'))
ptr.innerHTML = handler.getMarkup()
.replace(/__PREFIX__/g, handler.classPrefix)
handler.ptrElement = ptr
if (typeof handler.onInit === 'function') {
handler.onInit(handler)
}
// Add the css styles to the style node, and then
// insert it into the dom
if (!_shared.styleEl) {
_shared.styleEl = document.createElement('style')
_shared.styleEl.setAttribute('id', 'pull-to-refresh-js-style')
document.head.appendChild(_shared.styleEl)
}
_shared.styleEl.textContent = handler.getStyles()
.replace(/__PREFIX__/g, handler.classPrefix)
.replace(/\s+/g, ' ')
}
return handler
},
onReset: function onReset (handler) {
handler.ptrElement.classList.remove(((handler.classPrefix) + 'refresh'))
handler.ptrElement.style[handler.cssProp] = '0px'
setTimeout(function () {
// remove previous ptr-element from DOM
if (handler.ptrElement && handler.ptrElement.parentNode) {
handler.ptrElement.parentNode.removeChild(handler.ptrElement)
handler.ptrElement = null
}
// reset state
_shared.state = 'pending'
}, handler.refreshTimeout)
},
update: function update (handler) {
var iconEl = handler.ptrElement.querySelector(('.' + (handler.classPrefix) + 'icon'))
var textEl = handler.ptrElement.querySelector(('.' + (handler.classPrefix) + 'text'))
if (iconEl) {
if (_shared.state === 'refreshing') {
iconEl.innerHTML = handler.iconRefreshing
} else {
iconEl.innerHTML = handler.iconArrow
}
}
if (textEl) {
if (_shared.state === 'releasing') {
textEl.innerHTML = handler.instructionsReleaseToRefresh
}
if (_shared.state === 'pulling' || _shared.state === 'pending') {
textEl.innerHTML = handler.instructionsPullToRefresh
}
if (_shared.state === 'refreshing') {
textEl.innerHTML = handler.instructionsRefreshing
}
}
}
}
function _setupEvents () {
var _el
function _onTouchStart (e) {
// here, we must pick a handler first, and then append their html/css on the DOM
var target = _shared.handlers.filter(function (h) { return h.contains(e.target) })[0]
_shared.enable = !!target
if (target && _shared.state === 'pending') {
_el = _ptr.setupDOM(target)
if (target.shouldPullToRefresh()) {
_shared.pullStartY = e.touches[0].screenY
}
clearTimeout(_shared.timeout)
_ptr.update(target)
}
}
function _onTouchMove (e) {
if (!(_el && _el.ptrElement && _shared.enable)) {
return
}
if (!_shared.pullStartY) {
if (_el.shouldPullToRefresh()) {
_shared.pullStartY = e.touches[0].screenY
}
} else {
_shared.pullMoveY = e.touches[0].screenY
}
if (_shared.state === 'refreshing') {
if (_el.shouldPullToRefresh() && _shared.pullStartY < _shared.pullMoveY) {
e.preventDefault()
}
return
}
if (_shared.state === 'pending') {
_el.ptrElement.classList.add(((_el.classPrefix) + 'pull'))
_shared.state = 'pulling'
_ptr.update(_el)
}
if (_shared.pullStartY && _shared.pullMoveY) {
_shared.dist = _shared.pullMoveY - _shared.pullStartY
}
if (_shared.dist > 0) {
e.preventDefault()
_el.ptrElement.style[_el.cssProp] = (_shared.distResisted) + 'px'
_shared.distResisted = _el.resistanceFunction(_shared.dist / _el.distThreshold) *
Math.min(_el.distMax, _shared.dist)
if (_shared.state === 'pulling' && _shared.distResisted > _el.distThreshold) {
_el.ptrElement.classList.add(((_el.classPrefix) + 'release'))
_shared.state = 'releasing'
_ptr.update(_el)
}
if (_shared.state === 'releasing' && _shared.distResisted < _el.distThreshold) {
_el.ptrElement.classList.remove(((_el.classPrefix) + 'release'))
_shared.state = 'pulling'
_ptr.update(_el)
}
}
}
function _onTouchEnd () {
if (!(_el && _el.ptrElement && _shared.enable)) {
return
}
if (_shared.state === 'releasing' && _shared.distResisted > _el.distThreshold) {
_shared.state = 'refreshing'
_el.ptrElement.style[_el.cssProp] = (_el.distReload) + 'px'
_el.ptrElement.classList.add(((_el.classPrefix) + 'refresh'))
_shared.timeout = setTimeout(function () {
var retval = _el.onRefresh(function () { return _ptr.onReset(_el) })
if (retval && typeof retval.then === 'function') {
retval.then(function () { return _ptr.onReset(_el) })
}
if (!retval && !_el.onRefresh.length) {
_ptr.onReset(_el)
}
}, _el.refreshTimeout)
} else {
if (_shared.state === 'refreshing') {
return
}
_el.ptrElement.style[_el.cssProp] = '0px'
_shared.state = 'pending'
}
_ptr.update(_el)
_el.ptrElement.classList.remove(((_el.classPrefix) + 'release'))
_el.ptrElement.classList.remove(((_el.classPrefix) + 'pull'))
_shared.pullStartY = _shared.pullMoveY = null
_shared.dist = _shared.distResisted = 0
}
function _onScroll () {
if (_el) {
_el.mainElement.classList.toggle(((_el.classPrefix) + 'top'), _el.shouldPullToRefresh())
}
}
var _passiveSettings = _shared.supportsPassive
? { passive: _shared.passive || false }
: undefined
window.addEventListener('touchend', _onTouchEnd)
window.addEventListener('touchstart', _onTouchStart)
window.addEventListener('touchmove', _onTouchMove, _passiveSettings)
window.addEventListener('scroll', _onScroll)
return {
onTouchEnd: _onTouchEnd,
onTouchStart: _onTouchStart,
onTouchMove: _onTouchMove,
onScroll: _onScroll,
destroy: function destroy () {
// Teardown event listeners
window.removeEventListener('touchstart', _onTouchStart)
window.removeEventListener('touchend', _onTouchEnd)
window.removeEventListener('touchmove', _onTouchMove, _passiveSettings)
window.removeEventListener('scroll', _onScroll)
}
}
}
function _setupHandler (options) {
var _handler = {}
// merge options with defaults
Object.keys(_defaults).forEach(function (key) {
_handler[key] = options[key] || _defaults[key]
})
// normalize timeout value, even if it is zero
_handler.refreshTimeout = typeof options.refreshTimeout === 'number'
? options.refreshTimeout
: _defaults.refreshTimeout
// normalize elements
_methods.forEach(function (method) {
if (typeof _handler[method] === 'string') {
_handler[method] = document.querySelector(_handler[method])
}
})
// attach events lazily
if (!_shared.events) {
_shared.events = _setupEvents()
}
_handler.contains = function (target) {
return _handler.triggerElement.contains(target)
}
_handler.destroy = function () {
// stop pending any pending callbacks
clearTimeout(_shared.timeout)
// remove handler from shared state
_shared.handlers.splice(_handler.offset, 1)
}
return _handler
}
// public API
var index = {
setPassiveMode: function setPassiveMode (isPassive) {
_shared.passive = isPassive
},
destroyAll: function destroyAll () {
if (_shared.events) {
_shared.events.destroy()
_shared.events = null
}
_shared.handlers.forEach(function (h) {
h.destroy()
})
},
init: function init (options) {
if (options === void 0) options = {}
var handler = _setupHandler(options)
// store offset for later unsubscription
handler.offset = _shared.handlers.push(handler) - 1
return handler
},
// export utils for testing
_: {
setupHandler: _setupHandler,
setupEvents: _setupEvents,
setupDOM: _ptr.setupDOM,
onReset: _ptr.onReset,
update: _ptr.update
}
}
return index
}))
================================================
FILE: swiper/component.json
================================================
{
"name":"swiper",
"author": "fabiorogeriosj",
"dependencies": []
}
================================================
FILE: swiper/index.html
================================================
\n \n \n
\nSwiper
The Swiper component is a powerful multi-page container where each page can be swiped or dragged between of slides. This component is based on the Swiper widget from idangerous.
The lib Swiper is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers
There is a lot of combination and configuration for use with great elements in your sliders, for this see the documentation and examples to use Swiper.
To use this component you need install with the command:
mobileui install swiper
For use you need invoke a Swiper lib for create a slide, see a simple example below:
See another example using a Cover component.
================================================ FILE: swiper/script.js ================================================ /** * Swiper 3.4.2 * Most modern mobile touch slider and framework with hardware accelerated transitions * * http://www.idangero.us/swiper/ * * Copyright 2017, Vladimir Kharlampidi * The iDangero.us * http://www.idangero.us/ * * Licensed under MIT * * Released on: March 10, 2017 */ (function () { 'use strict'; var $; /*=========================== Swiper ===========================*/ var Swiper = function (container, params) { if (!(this instanceof Swiper)) return new Swiper(container, params); var defaults = { direction: 'horizontal', touchEventsTarget: 'container', initialSlide: 0, speed: 300, // autoplay autoplay: false, autoplayDisableOnInteraction: true, autoplayStopOnLast: false, // To support iOS's swipe-to-go-back gesture (when being used in-app, with UIWebView). iOSEdgeSwipeDetection: false, iOSEdgeSwipeThreshold: 20, // Free mode freeMode: false, freeModeMomentum: true, freeModeMomentumRatio: 1, freeModeMomentumBounce: true, freeModeMomentumBounceRatio: 1, freeModeMomentumVelocityRatio: 1, freeModeSticky: false, freeModeMinimumVelocity: 0.02, // Autoheight autoHeight: false, // Set wrapper width setWrapperSize: false, // Virtual Translate virtualTranslate: false, // Effects effect: 'slide', // 'slide' or 'fade' or 'cube' or 'coverflow' or 'flip' coverflow: { rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows : true }, flip: { slideShadows : true, limitRotation: true }, cube: { slideShadows: true, shadow: true, shadowOffset: 20, shadowScale: 0.94 }, fade: { crossFade: false }, // Parallax parallax: false, // Zoom zoom: false, zoomMax: 3, zoomMin: 1, zoomToggle: true, // Scrollbar scrollbar: null, scrollbarHide: true, scrollbarDraggable: false, scrollbarSnapOnRelease: false, // Keyboard Mousewheel keyboardControl: false, mousewheelControl: false, mousewheelReleaseOnEdges: false, mousewheelInvert: false, mousewheelForceToAxis: false, mousewheelSensitivity: 1, mousewheelEventsTarged: 'container', // Hash Navigation hashnav: false, hashnavWatchState: false, // History history: false, // Commong Nav State replaceState: false, // Breakpoints breakpoints: undefined, // Slides grid spaceBetween: 0, slidesPerView: 1, slidesPerColumn: 1, slidesPerColumnFill: 'column', slidesPerGroup: 1, centeredSlides: false, slidesOffsetBefore: 0, // in px slidesOffsetAfter: 0, // in px // Round length roundLengths: false, // Touches touchRatio: 1, touchAngle: 45, simulateTouch: true, shortSwipes: true, longSwipes: true, longSwipesRatio: 0.5, longSwipesMs: 300, followFinger: true, onlyExternal: false, threshold: 0, touchMoveStopPropagation: true, touchReleaseOnEdges: false, // Unique Navigation Elements uniqueNavElements: true, // Pagination pagination: null, paginationElement: 'span', paginationClickable: false, paginationHide: false, paginationBulletRender: null, paginationProgressRender: null, paginationFractionRender: null, paginationCustomRender: null, paginationType: 'bullets', // 'bullets' or 'progress' or 'fraction' or 'custom' // Resistance resistance: true, resistanceRatio: 0.85, // Next/prev buttons nextButton: null, prevButton: null, // Progress watchSlidesProgress: false, watchSlidesVisibility: false, // Cursor grabCursor: false, // Clicks preventClicks: true, preventClicksPropagation: true, slideToClickedSlide: false, // Lazy Loading lazyLoading: false, lazyLoadingInPrevNext: false, lazyLoadingInPrevNextAmount: 1, lazyLoadingOnTransitionStart: false, // Images preloadImages: true, updateOnImagesReady: true, // loop loop: false, loopAdditionalSlides: 0, loopedSlides: null, // Control control: undefined, controlInverse: false, controlBy: 'slide', //or 'container' normalizeSlideIndex: true, // Swiping/no swiping allowSwipeToPrev: true, allowSwipeToNext: true, swipeHandler: null, //'.swipe-handler', noSwiping: true, noSwipingClass: 'swiper-no-swiping', // Passive Listeners passiveListeners: true, // NS containerModifierClass: 'swiper-container-', // NEW slideClass: 'swiper-slide', slideActiveClass: 'swiper-slide-active', slideDuplicateActiveClass: 'swiper-slide-duplicate-active', slideVisibleClass: 'swiper-slide-visible', slideDuplicateClass: 'swiper-slide-duplicate', slideNextClass: 'swiper-slide-next', slideDuplicateNextClass: 'swiper-slide-duplicate-next', slidePrevClass: 'swiper-slide-prev', slideDuplicatePrevClass: 'swiper-slide-duplicate-prev', wrapperClass: 'swiper-wrapper', bulletClass: 'swiper-pagination-bullet', bulletActiveClass: 'swiper-pagination-bullet-active', buttonDisabledClass: 'swiper-button-disabled', paginationCurrentClass: 'swiper-pagination-current', paginationTotalClass: 'swiper-pagination-total', paginationHiddenClass: 'swiper-pagination-hidden', paginationProgressbarClass: 'swiper-pagination-progressbar', paginationClickableClass: 'swiper-pagination-clickable', // NEW paginationModifierClass: 'swiper-pagination-', // NEW lazyLoadingClass: 'swiper-lazy', lazyStatusLoadingClass: 'swiper-lazy-loading', lazyStatusLoadedClass: 'swiper-lazy-loaded', lazyPreloaderClass: 'swiper-lazy-preloader', notificationClass: 'swiper-notification', preloaderClass: 'preloader', zoomContainerClass: 'swiper-zoom-container', // Observer observer: false, observeParents: false, // Accessibility a11y: false, prevSlideMessage: 'Previous slide', nextSlideMessage: 'Next slide', firstSlideMessage: 'This is the first slide', lastSlideMessage: 'This is the last slide', paginationBulletMessage: 'Go to slide {{index}}', // Callbacks runCallbacksOnInit: true /* Callbacks: onInit: function (swiper) onDestroy: function (swiper) onBeforeResize: function (swiper) onAfterResize: function (swiper) onClick: function (swiper, e) onTap: function (swiper, e) onDoubleTap: function (swiper, e) onSliderMove: function (swiper, e) onSlideChangeStart: function (swiper) onSlideChangeEnd: function (swiper) onTransitionStart: function (swiper) onTransitionEnd: function (swiper) onImagesReady: function (swiper) onProgress: function (swiper, progress) onTouchStart: function (swiper, e) onTouchMove: function (swiper, e) onTouchMoveOpposite: function (swiper, e) onTouchEnd: function (swiper, e) onReachBeginning: function (swiper) onReachEnd: function (swiper) onSetTransition: function (swiper, duration) onSetTranslate: function (swiper, translate) onAutoplayStart: function (swiper) onAutoplayStop: function (swiper), onLazyImageLoad: function (swiper, slide, image) onLazyImageReady: function (swiper, slide, image) onKeyPress: function (swiper, keyCode) */ }; var initialVirtualTranslate = params && params.virtualTranslate; params = params || {}; var originalParams = {}; for (var param in params) { if (typeof params[param] === 'object' && params[param] !== null && !(params[param].nodeType || params[param] === window || params[param] === document || (typeof Dom7 !== 'undefined' && params[param] instanceof Dom7) || (typeof jQuery !== 'undefined' && params[param] instanceof jQuery))) { originalParams[param] = {}; for (var deepParam in params[param]) { originalParams[param][deepParam] = params[param][deepParam]; } } else { originalParams[param] = params[param]; } } for (var def in defaults) { if (typeof params[def] === 'undefined') { params[def] = defaults[def]; } else if (typeof params[def] === 'object') { for (var deepDef in defaults[def]) { if (typeof params[def][deepDef] === 'undefined') { params[def][deepDef] = defaults[def][deepDef]; } } } } // Swiper var s = this; // Params s.params = params; s.originalParams = originalParams; // Classname s.classNames = []; /*========================= Dom Library and plugins ===========================*/ if (typeof $ !== 'undefined' && typeof Dom7 !== 'undefined'){ $ = Dom7; } if (typeof $ === 'undefined') { if (typeof Dom7 === 'undefined') { $ = window.Dom7 || window.Zepto || window.jQuery; } else { $ = Dom7; } if (!$) return; } // Export it to Swiper instance s.$ = $; /*========================= Breakpoints ===========================*/ s.currentBreakpoint = undefined; s.getActiveBreakpoint = function () { //Get breakpoint for window width if (!s.params.breakpoints) return false; var breakpoint = false; var points = [], point; for ( point in s.params.breakpoints ) { if (s.params.breakpoints.hasOwnProperty(point)) { points.push(point); } } points.sort(function (a, b) { return parseInt(a, 10) > parseInt(b, 10); }); for (var i = 0; i < points.length; i++) { point = points[i]; if (point >= window.innerWidth && !breakpoint) { breakpoint = point; } } return breakpoint || 'max'; }; s.setBreakpoint = function () { //Set breakpoint for window width and update parameters var breakpoint = s.getActiveBreakpoint(); if (breakpoint && s.currentBreakpoint !== breakpoint) { var breakPointsParams = breakpoint in s.params.breakpoints ? s.params.breakpoints[breakpoint] : s.originalParams; var needsReLoop = s.params.loop && (breakPointsParams.slidesPerView !== s.params.slidesPerView); for ( var param in breakPointsParams ) { s.params[param] = breakPointsParams[param]; } s.currentBreakpoint = breakpoint; if(needsReLoop && s.destroyLoop) { s.reLoop(true); } } }; // Set breakpoint on load if (s.params.breakpoints) { s.setBreakpoint(); } /*========================= Preparation - Define Container, Wrapper and Pagination ===========================*/ s.container = $(container); if (s.container.length === 0) return; if (s.container.length > 1) { var swipers = []; s.container.each(function () { var container = this; swipers.push(new Swiper(this, params)); }); return swipers; } // Save instance in container HTML Element and in data s.container[0].swiper = s; s.container.data('swiper', s); s.classNames.push(s.params.containerModifierClass + s.params.direction); if (s.params.freeMode) { s.classNames.push(s.params.containerModifierClass + 'free-mode'); } if (!s.support.flexbox) { s.classNames.push(s.params.containerModifierClass + 'no-flexbox'); s.params.slidesPerColumn = 1; } if (s.params.autoHeight) { s.classNames.push(s.params.containerModifierClass + 'autoheight'); } // Enable slides progress when required if (s.params.parallax || s.params.watchSlidesVisibility) { s.params.watchSlidesProgress = true; } // Max resistance when touchReleaseOnEdges if (s.params.touchReleaseOnEdges) { s.params.resistanceRatio = 0; } // Coverflow / 3D if (['cube', 'coverflow', 'flip'].indexOf(s.params.effect) >= 0) { if (s.support.transforms3d) { s.params.watchSlidesProgress = true; s.classNames.push(s.params.containerModifierClass + '3d'); } else { s.params.effect = 'slide'; } } if (s.params.effect !== 'slide') { s.classNames.push(s.params.containerModifierClass + s.params.effect); } if (s.params.effect === 'cube') { s.params.resistanceRatio = 0; s.params.slidesPerView = 1; s.params.slidesPerColumn = 1; s.params.slidesPerGroup = 1; s.params.centeredSlides = false; s.params.spaceBetween = 0; s.params.virtualTranslate = true; } if (s.params.effect === 'fade' || s.params.effect === 'flip') { s.params.slidesPerView = 1; s.params.slidesPerColumn = 1; s.params.slidesPerGroup = 1; s.params.watchSlidesProgress = true; s.params.spaceBetween = 0; if (typeof initialVirtualTranslate === 'undefined') { s.params.virtualTranslate = true; } } // Grab Cursor if (s.params.grabCursor && s.support.touch) { s.params.grabCursor = false; } // Wrapper s.wrapper = s.container.children('.' + s.params.wrapperClass); // Pagination if (s.params.pagination) { s.paginationContainer = $(s.params.pagination); if (s.params.uniqueNavElements && typeof s.params.pagination === 'string' && s.paginationContainer.length > 1 && s.container.find(s.params.pagination).length === 1) { s.paginationContainer = s.container.find(s.params.pagination); } if (s.params.paginationType === 'bullets' && s.params.paginationClickable) { s.paginationContainer.addClass(s.params.paginationModifierClass + 'clickable'); } else { s.params.paginationClickable = false; } s.paginationContainer.addClass(s.params.paginationModifierClass + s.params.paginationType); } // Next/Prev Buttons if (s.params.nextButton || s.params.prevButton) { if (s.params.nextButton) { s.nextButton = $(s.params.nextButton); if (s.params.uniqueNavElements && typeof s.params.nextButton === 'string' && s.nextButton.length > 1 && s.container.find(s.params.nextButton).length === 1) { s.nextButton = s.container.find(s.params.nextButton); } } if (s.params.prevButton) { s.prevButton = $(s.params.prevButton); if (s.params.uniqueNavElements && typeof s.params.prevButton === 'string' && s.prevButton.length > 1 && s.container.find(s.params.prevButton).length === 1) { s.prevButton = s.container.find(s.params.prevButton); } } } // Is Horizontal s.isHorizontal = function () { return s.params.direction === 'horizontal'; }; // s.isH = isH; // RTL s.rtl = s.isHorizontal() && (s.container[0].dir.toLowerCase() === 'rtl' || s.container.css('direction') === 'rtl'); if (s.rtl) { s.classNames.push(s.params.containerModifierClass + 'rtl'); } // Wrong RTL support if (s.rtl) { s.wrongRTL = s.wrapper.css('display') === '-webkit-box'; } // Columns if (s.params.slidesPerColumn > 1) { s.classNames.push(s.params.containerModifierClass + 'multirow'); } // Check for Android if (s.device.android) { s.classNames.push(s.params.containerModifierClass + 'android'); } // Add classes s.container.addClass(s.classNames.join(' ')); // Translate s.translate = 0; // Progress s.progress = 0; // Velocity s.velocity = 0; /*========================= Locks, unlocks ===========================*/ s.lockSwipeToNext = function () { s.params.allowSwipeToNext = false; if (s.params.allowSwipeToPrev === false && s.params.grabCursor) { s.unsetGrabCursor(); } }; s.lockSwipeToPrev = function () { s.params.allowSwipeToPrev = false; if (s.params.allowSwipeToNext === false && s.params.grabCursor) { s.unsetGrabCursor(); } }; s.lockSwipes = function () { s.params.allowSwipeToNext = s.params.allowSwipeToPrev = false; if (s.params.grabCursor) s.unsetGrabCursor(); }; s.unlockSwipeToNext = function () { s.params.allowSwipeToNext = true; if (s.params.allowSwipeToPrev === true && s.params.grabCursor) { s.setGrabCursor(); } }; s.unlockSwipeToPrev = function () { s.params.allowSwipeToPrev = true; if (s.params.allowSwipeToNext === true && s.params.grabCursor) { s.setGrabCursor(); } }; s.unlockSwipes = function () { s.params.allowSwipeToNext = s.params.allowSwipeToPrev = true; if (s.params.grabCursor) s.setGrabCursor(); }; /*========================= Round helper ===========================*/ function round(a) { return Math.floor(a); } /*========================= Set grab cursor ===========================*/ s.setGrabCursor = function(moving) { s.container[0].style.cursor = 'move'; s.container[0].style.cursor = moving ? '-webkit-grabbing' : '-webkit-grab'; s.container[0].style.cursor = moving ? '-moz-grabbin' : '-moz-grab'; s.container[0].style.cursor = moving ? 'grabbing': 'grab'; }; s.unsetGrabCursor = function () { s.container[0].style.cursor = ''; }; if (s.params.grabCursor) { s.setGrabCursor(); } /*========================= Update on Images Ready ===========================*/ s.imagesToLoad = []; s.imagesLoaded = 0; s.loadImage = function (imgElement, src, srcset, sizes, checkForComplete, callback) { var image; function onReady () { if (callback) callback(); } if (!imgElement.complete || !checkForComplete) { if (src) { image = new window.Image(); image.onload = onReady; image.onerror = onReady; if (sizes) { image.sizes = sizes; } if (srcset) { image.srcset = srcset; } if (src) { image.src = src; } } else { onReady(); } } else {//image already loaded... onReady(); } }; s.preloadImages = function () { s.imagesToLoad = s.container.find('img'); function _onReady() { if (typeof s === 'undefined' || s === null || !s) return; if (s.imagesLoaded !== undefined) s.imagesLoaded++; if (s.imagesLoaded === s.imagesToLoad.length) { if (s.params.updateOnImagesReady) s.update(); s.emit('onImagesReady', s); } } for (var i = 0; i < s.imagesToLoad.length; i++) { s.loadImage(s.imagesToLoad[i], (s.imagesToLoad[i].currentSrc || s.imagesToLoad[i].getAttribute('src')), (s.imagesToLoad[i].srcset || s.imagesToLoad[i].getAttribute('srcset')), s.imagesToLoad[i].sizes || s.imagesToLoad[i].getAttribute('sizes'), true, _onReady); } }; /*========================= Autoplay ===========================*/ s.autoplayTimeoutId = undefined; s.autoplaying = false; s.autoplayPaused = false; function autoplay() { var autoplayDelay = s.params.autoplay; var activeSlide = s.slides.eq(s.activeIndex); if (activeSlide.attr('data-swiper-autoplay')) { autoplayDelay = activeSlide.attr('data-swiper-autoplay') || s.params.autoplay; } s.autoplayTimeoutId = setTimeout(function () { if (s.params.loop) { s.fixLoop(); s._slideNext(); s.emit('onAutoplay', s); } else { if (!s.isEnd) { s._slideNext(); s.emit('onAutoplay', s); } else { if (!params.autoplayStopOnLast) { s._slideTo(0); s.emit('onAutoplay', s); } else { s.stopAutoplay(); } } } }, autoplayDelay); } s.startAutoplay = function () { if (typeof s.autoplayTimeoutId !== 'undefined') return false; if (!s.params.autoplay) return false; if (s.autoplaying) return false; s.autoplaying = true; s.emit('onAutoplayStart', s); autoplay(); }; s.stopAutoplay = function (internal) { if (!s.autoplayTimeoutId) return; if (s.autoplayTimeoutId) clearTimeout(s.autoplayTimeoutId); s.autoplaying = false; s.autoplayTimeoutId = undefined; s.emit('onAutoplayStop', s); }; s.pauseAutoplay = function (speed) { if (s.autoplayPaused) return; if (s.autoplayTimeoutId) clearTimeout(s.autoplayTimeoutId); s.autoplayPaused = true; if (speed === 0) { s.autoplayPaused = false; autoplay(); } else { s.wrapper.transitionEnd(function () { if (!s) return; s.autoplayPaused = false; if (!s.autoplaying) { s.stopAutoplay(); } else { autoplay(); } }); } }; /*========================= Min/Max Translate ===========================*/ s.minTranslate = function () { return (-s.snapGrid[0]); }; s.maxTranslate = function () { return (-s.snapGrid[s.snapGrid.length - 1]); }; /*========================= Slider/slides sizes ===========================*/ s.updateAutoHeight = function () { var activeSlides = []; var newHeight = 0; var i; // Find slides currently in view if(s.params.slidesPerView !== 'auto' && s.params.slidesPerView > 1) { for (i = 0; i < Math.ceil(s.params.slidesPerView); i++) { var index = s.activeIndex + i; if(index > s.slides.length) break; activeSlides.push(s.slides.eq(index)[0]); } } else { activeSlides.push(s.slides.eq(s.activeIndex)[0]); } // Find new height from heighest slide in view for (i = 0; i < activeSlides.length; i++) { if (typeof activeSlides[i] !== 'undefined') { var height = activeSlides[i].offsetHeight; newHeight = height > newHeight ? height : newHeight; } } // Update Height if (newHeight) s.wrapper.css('height', newHeight + 'px'); }; s.updateContainerSize = function () { var width, height; if (typeof s.params.width !== 'undefined') { width = s.params.width; } else { width = s.container[0].clientWidth; } if (typeof s.params.height !== 'undefined') { height = s.params.height; } else { height = s.container[0].clientHeight; } if (width === 0 && s.isHorizontal() || height === 0 && !s.isHorizontal()) { return; } //Subtract paddings width = width - parseInt(s.container.css('padding-left'), 10) - parseInt(s.container.css('padding-right'), 10); height = height - parseInt(s.container.css('padding-top'), 10) - parseInt(s.container.css('padding-bottom'), 10); // Store values s.width = width; s.height = height; s.size = s.isHorizontal() ? s.width : s.height; }; s.updateSlidesSize = function () { s.slides = s.wrapper.children('.' + s.params.slideClass); s.snapGrid = []; s.slidesGrid = []; s.slidesSizesGrid = []; var spaceBetween = s.params.spaceBetween, slidePosition = -s.params.slidesOffsetBefore, i, prevSlideSize = 0, index = 0; if (typeof s.size === 'undefined') return; if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) { spaceBetween = parseFloat(spaceBetween.replace('%', '')) / 100 * s.size; } s.virtualSize = -spaceBetween; // reset margins if (s.rtl) s.slides.css({marginLeft: '', marginTop: ''}); else s.slides.css({marginRight: '', marginBottom: ''}); var slidesNumberEvenToRows; if (s.params.slidesPerColumn > 1) { if (Math.floor(s.slides.length / s.params.slidesPerColumn) === s.slides.length / s.params.slidesPerColumn) { slidesNumberEvenToRows = s.slides.length; } else { slidesNumberEvenToRows = Math.ceil(s.slides.length / s.params.slidesPerColumn) * s.params.slidesPerColumn; } if (s.params.slidesPerView !== 'auto' && s.params.slidesPerColumnFill === 'row') { slidesNumberEvenToRows = Math.max(slidesNumberEvenToRows, s.params.slidesPerView * s.params.slidesPerColumn); } } // Calc slides var slideSize; var slidesPerColumn = s.params.slidesPerColumn; var slidesPerRow = slidesNumberEvenToRows / slidesPerColumn; var numFullColumns = slidesPerRow - (s.params.slidesPerColumn * slidesPerRow - s.slides.length); for (i = 0; i < s.slides.length; i++) { slideSize = 0; var slide = s.slides.eq(i); if (s.params.slidesPerColumn > 1) { // Set slides order var newSlideOrderIndex; var column, row; if (s.params.slidesPerColumnFill === 'column') { column = Math.floor(i / slidesPerColumn); row = i - column * slidesPerColumn; if (column > numFullColumns || (column === numFullColumns && row === slidesPerColumn-1)) { if (++row >= slidesPerColumn) { row = 0; column++; } } newSlideOrderIndex = column + row * slidesNumberEvenToRows / slidesPerColumn; slide .css({ '-webkit-box-ordinal-group': newSlideOrderIndex, '-moz-box-ordinal-group': newSlideOrderIndex, '-ms-flex-order': newSlideOrderIndex, '-webkit-order': newSlideOrderIndex, 'order': newSlideOrderIndex }); } else { row = Math.floor(i / slidesPerRow); column = i - row * slidesPerRow; } slide .css( 'margin-' + (s.isHorizontal() ? 'top' : 'left'), (row !== 0 && s.params.spaceBetween) && (s.params.spaceBetween + 'px') ) .attr('data-swiper-column', column) .attr('data-swiper-row', row); } if (slide.css('display') === 'none') continue; if (s.params.slidesPerView === 'auto') { slideSize = s.isHorizontal() ? slide.outerWidth(true) : slide.outerHeight(true); if (s.params.roundLengths) slideSize = round(slideSize); } else { slideSize = (s.size - (s.params.slidesPerView - 1) * spaceBetween) / s.params.slidesPerView; if (s.params.roundLengths) slideSize = round(slideSize); if (s.isHorizontal()) { s.slides[i].style.width = slideSize + 'px'; } else { s.slides[i].style.height = slideSize + 'px'; } } s.slides[i].swiperSlideSize = slideSize; s.slidesSizesGrid.push(slideSize); if (s.params.centeredSlides) { slidePosition = slidePosition + slideSize / 2 + prevSlideSize / 2 + spaceBetween; if(prevSlideSize === 0 && i !== 0) slidePosition = slidePosition - s.size / 2 - spaceBetween; if (i === 0) slidePosition = slidePosition - s.size / 2 - spaceBetween; if (Math.abs(slidePosition) < 1 / 1000) slidePosition = 0; if ((index) % s.params.slidesPerGroup === 0) s.snapGrid.push(slidePosition); s.slidesGrid.push(slidePosition); } else { if ((index) % s.params.slidesPerGroup === 0) s.snapGrid.push(slidePosition); s.slidesGrid.push(slidePosition); slidePosition = slidePosition + slideSize + spaceBetween; } s.virtualSize += slideSize + spaceBetween; prevSlideSize = slideSize; index ++; } s.virtualSize = Math.max(s.virtualSize, s.size) + s.params.slidesOffsetAfter; var newSlidesGrid; if ( s.rtl && s.wrongRTL && (s.params.effect === 'slide' || s.params.effect === 'coverflow')) { s.wrapper.css({width: s.virtualSize + s.params.spaceBetween + 'px'}); } if (!s.support.flexbox || s.params.setWrapperSize) { if (s.isHorizontal()) s.wrapper.css({width: s.virtualSize + s.params.spaceBetween + 'px'}); else s.wrapper.css({height: s.virtualSize + s.params.spaceBetween + 'px'}); } if (s.params.slidesPerColumn > 1) { s.virtualSize = (slideSize + s.params.spaceBetween) * slidesNumberEvenToRows; s.virtualSize = Math.ceil(s.virtualSize / s.params.slidesPerColumn) - s.params.spaceBetween; if (s.isHorizontal()) s.wrapper.css({width: s.virtualSize + s.params.spaceBetween + 'px'}); else s.wrapper.css({height: s.virtualSize + s.params.spaceBetween + 'px'}); if (s.params.centeredSlides) { newSlidesGrid = []; for (i = 0; i < s.snapGrid.length; i++) { if (s.snapGrid[i] < s.virtualSize + s.snapGrid[0]) newSlidesGrid.push(s.snapGrid[i]); } s.snapGrid = newSlidesGrid; } } // Remove last grid elements depending on width if (!s.params.centeredSlides) { newSlidesGrid = []; for (i = 0; i < s.snapGrid.length; i++) { if (s.snapGrid[i] <= s.virtualSize - s.size) { newSlidesGrid.push(s.snapGrid[i]); } } s.snapGrid = newSlidesGrid; if (Math.floor(s.virtualSize - s.size) - Math.floor(s.snapGrid[s.snapGrid.length - 1]) > 1) { s.snapGrid.push(s.virtualSize - s.size); } } if (s.snapGrid.length === 0) s.snapGrid = [0]; if (s.params.spaceBetween !== 0) { if (s.isHorizontal()) { if (s.rtl) s.slides.css({marginLeft: spaceBetween + 'px'}); else s.slides.css({marginRight: spaceBetween + 'px'}); } else s.slides.css({marginBottom: spaceBetween + 'px'}); } if (s.params.watchSlidesProgress) { s.updateSlidesOffset(); } }; s.updateSlidesOffset = function () { for (var i = 0; i < s.slides.length; i++) { s.slides[i].swiperSlideOffset = s.isHorizontal() ? s.slides[i].offsetLeft : s.slides[i].offsetTop; } }; /*========================= Dynamic Slides Per View ===========================*/ s.currentSlidesPerView = function () { var spv = 1, i, j; if (s.params.centeredSlides) { var size = s.slides[s.activeIndex].swiperSlideSize; var breakLoop; for (i = s.activeIndex + 1; i < s.slides.length; i++) { if (s.slides[i] && !breakLoop) { size += s.slides[i].swiperSlideSize; spv ++; if (size > s.size) breakLoop = true; } } for (j = s.activeIndex - 1; j >= 0; j--) { if (s.slides[j] && !breakLoop) { size += s.slides[j].swiperSlideSize; spv ++; if (size > s.size) breakLoop = true; } } } else { for (i = s.activeIndex + 1; i < s.slides.length; i++) { if (s.slidesGrid[i] - s.slidesGrid[s.activeIndex] < s.size) { spv++; } } } return spv; }; /*========================= Slider/slides progress ===========================*/ s.updateSlidesProgress = function (translate) { if (typeof translate === 'undefined') { translate = s.translate || 0; } if (s.slides.length === 0) return; if (typeof s.slides[0].swiperSlideOffset === 'undefined') s.updateSlidesOffset(); var offsetCenter = -translate; if (s.rtl) offsetCenter = translate; // Visible Slides s.slides.removeClass(s.params.slideVisibleClass); for (var i = 0; i < s.slides.length; i++) { var slide = s.slides[i]; var slideProgress = (offsetCenter + (s.params.centeredSlides ? s.minTranslate() : 0) - slide.swiperSlideOffset) / (slide.swiperSlideSize + s.params.spaceBetween); if (s.params.watchSlidesVisibility) { var slideBefore = -(offsetCenter - slide.swiperSlideOffset); var slideAfter = slideBefore + s.slidesSizesGrid[i]; var isVisible = (slideBefore >= 0 && slideBefore < s.size) || (slideAfter > 0 && slideAfter <= s.size) || (slideBefore <= 0 && slideAfter >= s.size); if (isVisible) { s.slides.eq(i).addClass(s.params.slideVisibleClass); } } slide.progress = s.rtl ? -slideProgress : slideProgress; } }; s.updateProgress = function (translate) { if (typeof translate === 'undefined') { translate = s.translate || 0; } var translatesDiff = s.maxTranslate() - s.minTranslate(); var wasBeginning = s.isBeginning; var wasEnd = s.isEnd; if (translatesDiff === 0) { s.progress = 0; s.isBeginning = s.isEnd = true; } else { s.progress = (translate - s.minTranslate()) / (translatesDiff); s.isBeginning = s.progress <= 0; s.isEnd = s.progress >= 1; } if (s.isBeginning && !wasBeginning) s.emit('onReachBeginning', s); if (s.isEnd && !wasEnd) s.emit('onReachEnd', s); if (s.params.watchSlidesProgress) s.updateSlidesProgress(translate); s.emit('onProgress', s, s.progress); }; s.updateActiveIndex = function () { var translate = s.rtl ? s.translate : -s.translate; var newActiveIndex, i, snapIndex; for (i = 0; i < s.slidesGrid.length; i ++) { if (typeof s.slidesGrid[i + 1] !== 'undefined') { if (translate >= s.slidesGrid[i] && translate < s.slidesGrid[i + 1] - (s.slidesGrid[i + 1] - s.slidesGrid[i]) / 2) { newActiveIndex = i; } else if (translate >= s.slidesGrid[i] && translate < s.slidesGrid[i + 1]) { newActiveIndex = i + 1; } } else { if (translate >= s.slidesGrid[i]) { newActiveIndex = i; } } } // Normalize slideIndex if(s.params.normalizeSlideIndex){ if (newActiveIndex < 0 || typeof newActiveIndex === 'undefined') newActiveIndex = 0; } // for (i = 0; i < s.slidesGrid.length; i++) { // if (- translate >= s.slidesGrid[i]) { // newActiveIndex = i; // } // } snapIndex = Math.floor(newActiveIndex / s.params.slidesPerGroup); if (snapIndex >= s.snapGrid.length) snapIndex = s.snapGrid.length - 1; if (newActiveIndex === s.activeIndex) { return; } s.snapIndex = snapIndex; s.previousIndex = s.activeIndex; s.activeIndex = newActiveIndex; s.updateClasses(); s.updateRealIndex(); }; s.updateRealIndex = function(){ s.realIndex = parseInt(s.slides.eq(s.activeIndex).attr('data-swiper-slide-index') || s.activeIndex, 10); }; /*========================= Classes ===========================*/ s.updateClasses = function () { s.slides.removeClass(s.params.slideActiveClass + ' ' + s.params.slideNextClass + ' ' + s.params.slidePrevClass + ' ' + s.params.slideDuplicateActiveClass + ' ' + s.params.slideDuplicateNextClass + ' ' + s.params.slideDuplicatePrevClass); var activeSlide = s.slides.eq(s.activeIndex); // Active classes activeSlide.addClass(s.params.slideActiveClass); if (params.loop) { // Duplicate to all looped slides if (activeSlide.hasClass(s.params.slideDuplicateClass)) { s.wrapper.children('.' + s.params.slideClass + ':not(.' + s.params.slideDuplicateClass + ')[data-swiper-slide-index="' + s.realIndex + '"]').addClass(s.params.slideDuplicateActiveClass); } else { s.wrapper.children('.' + s.params.slideClass + '.' + s.params.slideDuplicateClass + '[data-swiper-slide-index="' + s.realIndex + '"]').addClass(s.params.slideDuplicateActiveClass); } } // Next Slide var nextSlide = activeSlide.next('.' + s.params.slideClass).addClass(s.params.slideNextClass); if (s.params.loop && nextSlide.length === 0) { nextSlide = s.slides.eq(0); nextSlide.addClass(s.params.slideNextClass); } // Prev Slide var prevSlide = activeSlide.prev('.' + s.params.slideClass).addClass(s.params.slidePrevClass); if (s.params.loop && prevSlide.length === 0) { prevSlide = s.slides.eq(-1); prevSlide.addClass(s.params.slidePrevClass); } if (params.loop) { // Duplicate to all looped slides if (nextSlide.hasClass(s.params.slideDuplicateClass)) { s.wrapper.children('.' + s.params.slideClass + ':not(.' + s.params.slideDuplicateClass + ')[data-swiper-slide-index="' + nextSlide.attr('data-swiper-slide-index') + '"]').addClass(s.params.slideDuplicateNextClass); } else { s.wrapper.children('.' + s.params.slideClass + '.' + s.params.slideDuplicateClass + '[data-swiper-slide-index="' + nextSlide.attr('data-swiper-slide-index') + '"]').addClass(s.params.slideDuplicateNextClass); } if (prevSlide.hasClass(s.params.slideDuplicateClass)) { s.wrapper.children('.' + s.params.slideClass + ':not(.' + s.params.slideDuplicateClass + ')[data-swiper-slide-index="' + prevSlide.attr('data-swiper-slide-index') + '"]').addClass(s.params.slideDuplicatePrevClass); } else { s.wrapper.children('.' + s.params.slideClass + '.' + s.params.slideDuplicateClass + '[data-swiper-slide-index="' + prevSlide.attr('data-swiper-slide-index') + '"]').addClass(s.params.slideDuplicatePrevClass); } } // Pagination if (s.paginationContainer && s.paginationContainer.length > 0) { // Current/Total var current, total = s.params.loop ? Math.ceil((s.slides.length - s.loopedSlides * 2) / s.params.slidesPerGroup) : s.snapGrid.length; if (s.params.loop) { current = Math.ceil((s.activeIndex - s.loopedSlides)/s.params.slidesPerGroup); if (current > s.slides.length - 1 - s.loopedSlides * 2) { current = current - (s.slides.length - s.loopedSlides * 2); } if (current > total - 1) current = current - total; if (current < 0 && s.params.paginationType !== 'bullets') current = total + current; } else { if (typeof s.snapIndex !== 'undefined') { current = s.snapIndex; } else { current = s.activeIndex || 0; } } // Types if (s.params.paginationType === 'bullets' && s.bullets && s.bullets.length > 0) { s.bullets.removeClass(s.params.bulletActiveClass); if (s.paginationContainer.length > 1) { s.bullets.each(function () { if ($(this).index() === current) $(this).addClass(s.params.bulletActiveClass); }); } else { s.bullets.eq(current).addClass(s.params.bulletActiveClass); } } if (s.params.paginationType === 'fraction') { s.paginationContainer.find('.' + s.params.paginationCurrentClass).text(current + 1); s.paginationContainer.find('.' + s.params.paginationTotalClass).text(total); } if (s.params.paginationType === 'progress') { var scale = (current + 1) / total, scaleX = scale, scaleY = 1; if (!s.isHorizontal()) { scaleY = scale; scaleX = 1; } s.paginationContainer.find('.' + s.params.paginationProgressbarClass).transform('translate3d(0,0,0) scaleX(' + scaleX + ') scaleY(' + scaleY + ')').transition(s.params.speed); } if (s.params.paginationType === 'custom' && s.params.paginationCustomRender) { s.paginationContainer.html(s.params.paginationCustomRender(s, current + 1, total)); s.emit('onPaginationRendered', s, s.paginationContainer[0]); } } // Next/active buttons if (!s.params.loop) { if (s.params.prevButton && s.prevButton && s.prevButton.length > 0) { if (s.isBeginning) { s.prevButton.addClass(s.params.buttonDisabledClass); if (s.params.a11y && s.a11y) s.a11y.disable(s.prevButton); } else { s.prevButton.removeClass(s.params.buttonDisabledClass); if (s.params.a11y && s.a11y) s.a11y.enable(s.prevButton); } } if (s.params.nextButton && s.nextButton && s.nextButton.length > 0) { if (s.isEnd) { s.nextButton.addClass(s.params.buttonDisabledClass); if (s.params.a11y && s.a11y) s.a11y.disable(s.nextButton); } else { s.nextButton.removeClass(s.params.buttonDisabledClass); if (s.params.a11y && s.a11y) s.a11y.enable(s.nextButton); } } } }; /*========================= Pagination ===========================*/ s.updatePagination = function () { if (!s.params.pagination) return; if (s.paginationContainer && s.paginationContainer.length > 0) { var paginationHTML = ''; if (s.params.paginationType === 'bullets') { var numberOfBullets = s.params.loop ? Math.ceil((s.slides.length - s.loopedSlides * 2) / s.params.slidesPerGroup) : s.snapGrid.length; for (var i = 0; i < numberOfBullets; i++) { if (s.params.paginationBulletRender) { paginationHTML += s.params.paginationBulletRender(s, i, s.params.bulletClass); } else { paginationHTML += '<' + s.params.paginationElement+' class="' + s.params.bulletClass + '">'; } } s.paginationContainer.html(paginationHTML); s.bullets = s.paginationContainer.find('.' + s.params.bulletClass); if (s.params.paginationClickable && s.params.a11y && s.a11y) { s.a11y.initPagination(); } } if (s.params.paginationType === 'fraction') { if (s.params.paginationFractionRender) { paginationHTML = s.params.paginationFractionRender(s, s.params.paginationCurrentClass, s.params.paginationTotalClass); } else { paginationHTML = '' + ' / ' + ''; } s.paginationContainer.html(paginationHTML); } if (s.params.paginationType === 'progress') { if (s.params.paginationProgressRender) { paginationHTML = s.params.paginationProgressRender(s, s.params.paginationProgressbarClass); } else { paginationHTML = ''; } s.paginationContainer.html(paginationHTML); } if (s.params.paginationType !== 'custom') { s.emit('onPaginationRendered', s, s.paginationContainer[0]); } } }; /*========================= Common update method ===========================*/ s.update = function (updateTranslate) { if (!s) return; s.updateContainerSize(); s.updateSlidesSize(); s.updateProgress(); s.updatePagination(); s.updateClasses(); if (s.params.scrollbar && s.scrollbar) { s.scrollbar.set(); } var newTranslate; function forceSetTranslate() { var translate = s.rtl ? -s.translate : s.translate; newTranslate = Math.min(Math.max(s.translate, s.maxTranslate()), s.minTranslate()); s.setWrapperTranslate(newTranslate); s.updateActiveIndex(); s.updateClasses(); } if (updateTranslate) { var translated; if (s.controller && s.controller.spline) { s.controller.spline = undefined; } if (s.params.freeMode) { forceSetTranslate(); if (s.params.autoHeight) { s.updateAutoHeight(); } } else { if ((s.params.slidesPerView === 'auto' || s.params.slidesPerView > 1) && s.isEnd && !s.params.centeredSlides) { translated = s.slideTo(s.slides.length - 1, 0, false, true); } else { translated = s.slideTo(s.activeIndex, 0, false, true); } if (!translated) { forceSetTranslate(); } } } else if (s.params.autoHeight) { s.updateAutoHeight(); } }; /*========================= Resize Handler ===========================*/ s.onResize = function (forceUpdatePagination) { if (s.params.onBeforeResize) s.params.onBeforeResize(s); //Breakpoints if (s.params.breakpoints) { s.setBreakpoint(); } // Disable locks on resize var allowSwipeToPrev = s.params.allowSwipeToPrev; var allowSwipeToNext = s.params.allowSwipeToNext; s.params.allowSwipeToPrev = s.params.allowSwipeToNext = true; s.updateContainerSize(); s.updateSlidesSize(); if (s.params.slidesPerView === 'auto' || s.params.freeMode || forceUpdatePagination) s.updatePagination(); if (s.params.scrollbar && s.scrollbar) { s.scrollbar.set(); } if (s.controller && s.controller.spline) { s.controller.spline = undefined; } var slideChangedBySlideTo = false; if (s.params.freeMode) { var newTranslate = Math.min(Math.max(s.translate, s.maxTranslate()), s.minTranslate()); s.setWrapperTranslate(newTranslate); s.updateActiveIndex(); s.updateClasses(); if (s.params.autoHeight) { s.updateAutoHeight(); } } else { s.updateClasses(); if ((s.params.slidesPerView === 'auto' || s.params.slidesPerView > 1) && s.isEnd && !s.params.centeredSlides) { slideChangedBySlideTo = s.slideTo(s.slides.length - 1, 0, false, true); } else { slideChangedBySlideTo = s.slideTo(s.activeIndex, 0, false, true); } } if (s.params.lazyLoading && !slideChangedBySlideTo && s.lazy) { s.lazy.load(); } // Return locks after resize s.params.allowSwipeToPrev = allowSwipeToPrev; s.params.allowSwipeToNext = allowSwipeToNext; if (s.params.onAfterResize) s.params.onAfterResize(s); }; /*========================= Events ===========================*/ //Define Touch Events s.touchEventsDesktop = {start: 'mousedown', move: 'mousemove', end: 'mouseup'}; if (window.navigator.pointerEnabled) s.touchEventsDesktop = {start: 'pointerdown', move: 'pointermove', end: 'pointerup'}; else if (window.navigator.msPointerEnabled) s.touchEventsDesktop = {start: 'MSPointerDown', move: 'MSPointerMove', end: 'MSPointerUp'}; s.touchEvents = { start : s.support.touch || !s.params.simulateTouch ? 'touchstart' : s.touchEventsDesktop.start, move : s.support.touch || !s.params.simulateTouch ? 'touchmove' : s.touchEventsDesktop.move, end : s.support.touch || !s.params.simulateTouch ? 'touchend' : s.touchEventsDesktop.end }; // WP8 Touch Events Fix if (window.navigator.pointerEnabled || window.navigator.msPointerEnabled) { (s.params.touchEventsTarget === 'container' ? s.container : s.wrapper).addClass('swiper-wp8-' + s.params.direction); } // Attach/detach events s.initEvents = function (detach) { var actionDom = detach ? 'off' : 'on'; var action = detach ? 'removeEventListener' : 'addEventListener'; var touchEventsTarget = s.params.touchEventsTarget === 'container' ? s.container[0] : s.wrapper[0]; var target = s.support.touch ? touchEventsTarget : document; var moveCapture = s.params.nested ? true : false; //Touch Events if (s.browser.ie) { touchEventsTarget[action](s.touchEvents.start, s.onTouchStart, false); target[action](s.touchEvents.move, s.onTouchMove, moveCapture); target[action](s.touchEvents.end, s.onTouchEnd, false); } else { if (s.support.touch) { var passiveListener = s.touchEvents.start === 'touchstart' && s.support.passiveListener && s.params.passiveListeners ? {passive: true, capture: false} : false; touchEventsTarget[action](s.touchEvents.start, s.onTouchStart, passiveListener); touchEventsTarget[action](s.touchEvents.move, s.onTouchMove, moveCapture); touchEventsTarget[action](s.touchEvents.end, s.onTouchEnd, passiveListener); } if ((params.simulateTouch && !s.device.ios && !s.device.android) || (params.simulateTouch && !s.support.touch && s.device.ios)) { touchEventsTarget[action]('mousedown', s.onTouchStart, false); document[action]('mousemove', s.onTouchMove, moveCapture); document[action]('mouseup', s.onTouchEnd, false); } } window[action]('resize', s.onResize); // Next, Prev, Index if (s.params.nextButton && s.nextButton && s.nextButton.length > 0) { s.nextButton[actionDom]('click', s.onClickNext); if (s.params.a11y && s.a11y) s.nextButton[actionDom]('keydown', s.a11y.onEnterKey); } if (s.params.prevButton && s.prevButton && s.prevButton.length > 0) { s.prevButton[actionDom]('click', s.onClickPrev); if (s.params.a11y && s.a11y) s.prevButton[actionDom]('keydown', s.a11y.onEnterKey); } if (s.params.pagination && s.params.paginationClickable) { s.paginationContainer[actionDom]('click', '.' + s.params.bulletClass, s.onClickIndex); if (s.params.a11y && s.a11y) s.paginationContainer[actionDom]('keydown', '.' + s.params.bulletClass, s.a11y.onEnterKey); } // Prevent Links Clicks if (s.params.preventClicks || s.params.preventClicksPropagation) touchEventsTarget[action]('click', s.preventClicks, true); }; s.attachEvents = function () { s.initEvents(); }; s.detachEvents = function () { s.initEvents(true); }; /*========================= Handle Clicks ===========================*/ // Prevent Clicks s.allowClick = true; s.preventClicks = function (e) { if (!s.allowClick) { if (s.params.preventClicks) e.preventDefault(); if (s.params.preventClicksPropagation && s.animating) { e.stopPropagation(); e.stopImmediatePropagation(); } } }; // Clicks s.onClickNext = function (e) { e.preventDefault(); if (s.isEnd && !s.params.loop) return; s.slideNext(); }; s.onClickPrev = function (e) { e.preventDefault(); if (s.isBeginning && !s.params.loop) return; s.slidePrev(); }; s.onClickIndex = function (e) { e.preventDefault(); var index = $(this).index() * s.params.slidesPerGroup; if (s.params.loop) index = index + s.loopedSlides; s.slideTo(index); }; /*========================= Handle Touches ===========================*/ function findElementInEvent(e, selector) { var el = $(e.target); if (!el.is(selector)) { if (typeof selector === 'string') { el = el.parents(selector); } else if (selector.nodeType) { var found; el.parents().each(function (index, _el) { if (_el === selector) found = selector; }); if (!found) return undefined; else return selector; } } if (el.length === 0) { return undefined; } return el[0]; } s.updateClickedSlide = function (e) { var slide = findElementInEvent(e, '.' + s.params.slideClass); var slideFound = false; if (slide) { for (var i = 0; i < s.slides.length; i++) { if (s.slides[i] === slide) slideFound = true; } } if (slide && slideFound) { s.clickedSlide = slide; s.clickedIndex = $(slide).index(); } else { s.clickedSlide = undefined; s.clickedIndex = undefined; return; } if (s.params.slideToClickedSlide && s.clickedIndex !== undefined && s.clickedIndex !== s.activeIndex) { var slideToIndex = s.clickedIndex, realIndex, duplicatedSlides, slidesPerView = s.params.slidesPerView === 'auto' ? s.currentSlidesPerView() : s.params.slidesPerView; if (s.params.loop) { if (s.animating) return; realIndex = parseInt($(s.clickedSlide).attr('data-swiper-slide-index'), 10); if (s.params.centeredSlides) { if ((slideToIndex < s.loopedSlides - slidesPerView/2) || (slideToIndex > s.slides.length - s.loopedSlides + slidesPerView/2)) { s.fixLoop(); slideToIndex = s.wrapper.children('.' + s.params.slideClass + '[data-swiper-slide-index="' + realIndex + '"]:not(.' + s.params.slideDuplicateClass + ')').eq(0).index(); setTimeout(function () { s.slideTo(slideToIndex); }, 0); } else { s.slideTo(slideToIndex); } } else { if (slideToIndex > s.slides.length - slidesPerView) { s.fixLoop(); slideToIndex = s.wrapper.children('.' + s.params.slideClass + '[data-swiper-slide-index="' + realIndex + '"]:not(.' + s.params.slideDuplicateClass + ')').eq(0).index(); setTimeout(function () { s.slideTo(slideToIndex); }, 0); } else { s.slideTo(slideToIndex); } } } else { s.slideTo(slideToIndex); } } }; var isTouched, isMoved, allowTouchCallbacks, touchStartTime, isScrolling, currentTranslate, startTranslate, allowThresholdMove, // Form elements to match formElements = 'input, select, textarea, button, video', // Last click time lastClickTime = Date.now(), clickTimeout, //Velocities velocities = [], allowMomentumBounce; // Animating Flag s.animating = false; // Touches information s.touches = { startX: 0, startY: 0, currentX: 0, currentY: 0, diff: 0 }; // Touch handlers var isTouchEvent, startMoving; s.onTouchStart = function (e) { if (e.originalEvent) e = e.originalEvent; isTouchEvent = e.type === 'touchstart'; if (!isTouchEvent && 'which' in e && e.which === 3) return; if (s.params.noSwiping && findElementInEvent(e, '.' + s.params.noSwipingClass)) { s.allowClick = true; return; } if (s.params.swipeHandler) { if (!findElementInEvent(e, s.params.swipeHandler)) return; } var startX = s.touches.currentX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; var startY = s.touches.currentY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; // Do NOT start if iOS edge swipe is detected. Otherwise iOS app (UIWebView) cannot swipe-to-go-back anymore if(s.device.ios && s.params.iOSEdgeSwipeDetection && startX <= s.params.iOSEdgeSwipeThreshold) { return; } isTouched = true; isMoved = false; allowTouchCallbacks = true; isScrolling = undefined; startMoving = undefined; s.touches.startX = startX; s.touches.startY = startY; touchStartTime = Date.now(); s.allowClick = true; s.updateContainerSize(); s.swipeDirection = undefined; if (s.params.threshold > 0) allowThresholdMove = false; if (e.type !== 'touchstart') { var preventDefault = true; if ($(e.target).is(formElements)) preventDefault = false; if (document.activeElement && $(document.activeElement).is(formElements)) { document.activeElement.blur(); } if (preventDefault) { e.preventDefault(); } } s.emit('onTouchStart', s, e); }; s.onTouchMove = function (e) { if (e.originalEvent) e = e.originalEvent; if (isTouchEvent && e.type === 'mousemove') return; if (e.preventedByNestedSwiper) { s.touches.startX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; s.touches.startY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; return; } if (s.params.onlyExternal) { // isMoved = true; s.allowClick = false; if (isTouched) { s.touches.startX = s.touches.currentX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; s.touches.startY = s.touches.currentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; touchStartTime = Date.now(); } return; } if (isTouchEvent && s.params.touchReleaseOnEdges && !s.params.loop) { if (!s.isHorizontal()) { // Vertical if ( (s.touches.currentY < s.touches.startY && s.translate <= s.maxTranslate()) || (s.touches.currentY > s.touches.startY && s.translate >= s.minTranslate()) ) { return; } } else { if ( (s.touches.currentX < s.touches.startX && s.translate <= s.maxTranslate()) || (s.touches.currentX > s.touches.startX && s.translate >= s.minTranslate()) ) { return; } } } if (isTouchEvent && document.activeElement) { if (e.target === document.activeElement && $(e.target).is(formElements)) { isMoved = true; s.allowClick = false; return; } } if (allowTouchCallbacks) { s.emit('onTouchMove', s, e); } if (e.targetTouches && e.targetTouches.length > 1) return; s.touches.currentX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; s.touches.currentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; if (typeof isScrolling === 'undefined') { var touchAngle; if (s.isHorizontal() && s.touches.currentY === s.touches.startY || !s.isHorizontal() && s.touches.currentX === s.touches.startX) { isScrolling = false; } else { touchAngle = Math.atan2(Math.abs(s.touches.currentY - s.touches.startY), Math.abs(s.touches.currentX - s.touches.startX)) * 180 / Math.PI; isScrolling = s.isHorizontal() ? touchAngle > s.params.touchAngle : (90 - touchAngle > s.params.touchAngle); } } if (isScrolling) { s.emit('onTouchMoveOpposite', s, e); } if (typeof startMoving === 'undefined') { if (s.touches.currentX !== s.touches.startX || s.touches.currentY !== s.touches.startY) { startMoving = true; } } if (!isTouched) return; if (isScrolling) { isTouched = false; return; } if (!startMoving) { return; } s.allowClick = false; s.emit('onSliderMove', s, e); e.preventDefault(); if (s.params.touchMoveStopPropagation && !s.params.nested) { e.stopPropagation(); } if (!isMoved) { if (params.loop) { s.fixLoop(); } startTranslate = s.getWrapperTranslate(); s.setWrapperTransition(0); if (s.animating) { s.wrapper.trigger('webkitTransitionEnd transitionend oTransitionEnd MSTransitionEnd msTransitionEnd'); } if (s.params.autoplay && s.autoplaying) { if (s.params.autoplayDisableOnInteraction) { s.stopAutoplay(); } else { s.pauseAutoplay(); } } allowMomentumBounce = false; //Grab Cursor if (s.params.grabCursor && (s.params.allowSwipeToNext === true || s.params.allowSwipeToPrev === true)) { s.setGrabCursor(true); } } isMoved = true; var diff = s.touches.diff = s.isHorizontal() ? s.touches.currentX - s.touches.startX : s.touches.currentY - s.touches.startY; diff = diff * s.params.touchRatio; if (s.rtl) diff = -diff; s.swipeDirection = diff > 0 ? 'prev' : 'next'; currentTranslate = diff + startTranslate; var disableParentSwiper = true; if ((diff > 0 && currentTranslate > s.minTranslate())) { disableParentSwiper = false; if (s.params.resistance) currentTranslate = s.minTranslate() - 1 + Math.pow(-s.minTranslate() + startTranslate + diff, s.params.resistanceRatio); } else if (diff < 0 && currentTranslate < s.maxTranslate()) { disableParentSwiper = false; if (s.params.resistance) currentTranslate = s.maxTranslate() + 1 - Math.pow(s.maxTranslate() - startTranslate - diff, s.params.resistanceRatio); } if (disableParentSwiper) { e.preventedByNestedSwiper = true; } // Directions locks if (!s.params.allowSwipeToNext && s.swipeDirection === 'next' && currentTranslate < startTranslate) { currentTranslate = startTranslate; } if (!s.params.allowSwipeToPrev && s.swipeDirection === 'prev' && currentTranslate > startTranslate) { currentTranslate = startTranslate; } // Threshold if (s.params.threshold > 0) { if (Math.abs(diff) > s.params.threshold || allowThresholdMove) { if (!allowThresholdMove) { allowThresholdMove = true; s.touches.startX = s.touches.currentX; s.touches.startY = s.touches.currentY; currentTranslate = startTranslate; s.touches.diff = s.isHorizontal() ? s.touches.currentX - s.touches.startX : s.touches.currentY - s.touches.startY; return; } } else { currentTranslate = startTranslate; return; } } if (!s.params.followFinger) return; // Update active index in free mode if (s.params.freeMode || s.params.watchSlidesProgress) { s.updateActiveIndex(); } if (s.params.freeMode) { //Velocity if (velocities.length === 0) { velocities.push({ position: s.touches[s.isHorizontal() ? 'startX' : 'startY'], time: touchStartTime }); } velocities.push({ position: s.touches[s.isHorizontal() ? 'currentX' : 'currentY'], time: (new window.Date()).getTime() }); } // Update progress s.updateProgress(currentTranslate); // Update translate s.setWrapperTranslate(currentTranslate); }; s.onTouchEnd = function (e) { if (e.originalEvent) e = e.originalEvent; if (allowTouchCallbacks) { s.emit('onTouchEnd', s, e); } allowTouchCallbacks = false; if (!isTouched) return; //Return Grab Cursor if (s.params.grabCursor && isMoved && isTouched && (s.params.allowSwipeToNext === true || s.params.allowSwipeToPrev === true)) { s.setGrabCursor(false); } // Time diff var touchEndTime = Date.now(); var timeDiff = touchEndTime - touchStartTime; // Tap, doubleTap, Click if (s.allowClick) { s.updateClickedSlide(e); s.emit('onTap', s, e); if (timeDiff < 300 && (touchEndTime - lastClickTime) > 300) { if (clickTimeout) clearTimeout(clickTimeout); clickTimeout = setTimeout(function () { if (!s) return; if (s.params.paginationHide && s.paginationContainer.length > 0 && !$(e.target).hasClass(s.params.bulletClass)) { s.paginationContainer.toggleClass(s.params.paginationHiddenClass); } s.emit('onClick', s, e); }, 300); } if (timeDiff < 300 && (touchEndTime - lastClickTime) < 300) { if (clickTimeout) clearTimeout(clickTimeout); s.emit('onDoubleTap', s, e); } } lastClickTime = Date.now(); setTimeout(function () { if (s) s.allowClick = true; }, 0); if (!isTouched || !isMoved || !s.swipeDirection || s.touches.diff === 0 || currentTranslate === startTranslate) { isTouched = isMoved = false; return; } isTouched = isMoved = false; var currentPos; if (s.params.followFinger) { currentPos = s.rtl ? s.translate : -s.translate; } else { currentPos = -currentTranslate; } if (s.params.freeMode) { if (currentPos < -s.minTranslate()) { s.slideTo(s.activeIndex); return; } else if (currentPos > -s.maxTranslate()) { if (s.slides.length < s.snapGrid.length) { s.slideTo(s.snapGrid.length - 1); } else { s.slideTo(s.slides.length - 1); } return; } if (s.params.freeModeMomentum) { if (velocities.length > 1) { var lastMoveEvent = velocities.pop(), velocityEvent = velocities.pop(); var distance = lastMoveEvent.position - velocityEvent.position; var time = lastMoveEvent.time - velocityEvent.time; s.velocity = distance / time; s.velocity = s.velocity / 2; if (Math.abs(s.velocity) < s.params.freeModeMinimumVelocity) { s.velocity = 0; } // this implies that the user stopped moving a finger then released. // There would be no events with distance zero, so the last event is stale. if (time > 150 || (new window.Date().getTime() - lastMoveEvent.time) > 300) { s.velocity = 0; } } else { s.velocity = 0; } s.velocity = s.velocity * s.params.freeModeMomentumVelocityRatio; velocities.length = 0; var momentumDuration = 1000 * s.params.freeModeMomentumRatio; var momentumDistance = s.velocity * momentumDuration; var newPosition = s.translate + momentumDistance; if (s.rtl) newPosition = - newPosition; var doBounce = false; var afterBouncePosition; var bounceAmount = Math.abs(s.velocity) * 20 * s.params.freeModeMomentumBounceRatio; if (newPosition < s.maxTranslate()) { if (s.params.freeModeMomentumBounce) { if (newPosition + s.maxTranslate() < -bounceAmount) { newPosition = s.maxTranslate() - bounceAmount; } afterBouncePosition = s.maxTranslate(); doBounce = true; allowMomentumBounce = true; } else { newPosition = s.maxTranslate(); } } else if (newPosition > s.minTranslate()) { if (s.params.freeModeMomentumBounce) { if (newPosition - s.minTranslate() > bounceAmount) { newPosition = s.minTranslate() + bounceAmount; } afterBouncePosition = s.minTranslate(); doBounce = true; allowMomentumBounce = true; } else { newPosition = s.minTranslate(); } } else if (s.params.freeModeSticky) { var j = 0, nextSlide; for (j = 0; j < s.snapGrid.length; j += 1) { if (s.snapGrid[j] > -newPosition) { nextSlide = j; break; } } if (Math.abs(s.snapGrid[nextSlide] - newPosition) < Math.abs(s.snapGrid[nextSlide - 1] - newPosition) || s.swipeDirection === 'next') { newPosition = s.snapGrid[nextSlide]; } else { newPosition = s.snapGrid[nextSlide - 1]; } if (!s.rtl) newPosition = - newPosition; } //Fix duration if (s.velocity !== 0) { if (s.rtl) { momentumDuration = Math.abs((-newPosition - s.translate) / s.velocity); } else { momentumDuration = Math.abs((newPosition - s.translate) / s.velocity); } } else if (s.params.freeModeSticky) { s.slideReset(); return; } if (s.params.freeModeMomentumBounce && doBounce) { s.updateProgress(afterBouncePosition); s.setWrapperTransition(momentumDuration); s.setWrapperTranslate(newPosition); s.onTransitionStart(); s.animating = true; s.wrapper.transitionEnd(function () { if (!s || !allowMomentumBounce) return; s.emit('onMomentumBounce', s); s.setWrapperTransition(s.params.speed); s.setWrapperTranslate(afterBouncePosition); s.wrapper.transitionEnd(function () { if (!s) return; s.onTransitionEnd(); }); }); } else if (s.velocity) { s.updateProgress(newPosition); s.setWrapperTransition(momentumDuration); s.setWrapperTranslate(newPosition); s.onTransitionStart(); if (!s.animating) { s.animating = true; s.wrapper.transitionEnd(function () { if (!s) return; s.onTransitionEnd(); }); } } else { s.updateProgress(newPosition); } s.updateActiveIndex(); } if (!s.params.freeModeMomentum || timeDiff >= s.params.longSwipesMs) { s.updateProgress(); s.updateActiveIndex(); } return; } // Find current slide var i, stopIndex = 0, groupSize = s.slidesSizesGrid[0]; for (i = 0; i < s.slidesGrid.length; i += s.params.slidesPerGroup) { if (typeof s.slidesGrid[i + s.params.slidesPerGroup] !== 'undefined') { if (currentPos >= s.slidesGrid[i] && currentPos < s.slidesGrid[i + s.params.slidesPerGroup]) { stopIndex = i; groupSize = s.slidesGrid[i + s.params.slidesPerGroup] - s.slidesGrid[i]; } } else { if (currentPos >= s.slidesGrid[i]) { stopIndex = i; groupSize = s.slidesGrid[s.slidesGrid.length - 1] - s.slidesGrid[s.slidesGrid.length - 2]; } } } // Find current slide size var ratio = (currentPos - s.slidesGrid[stopIndex]) / groupSize; if (timeDiff > s.params.longSwipesMs) { // Long touches if (!s.params.longSwipes) { s.slideTo(s.activeIndex); return; } if (s.swipeDirection === 'next') { if (ratio >= s.params.longSwipesRatio) s.slideTo(stopIndex + s.params.slidesPerGroup); else s.slideTo(stopIndex); } if (s.swipeDirection === 'prev') { if (ratio > (1 - s.params.longSwipesRatio)) s.slideTo(stopIndex + s.params.slidesPerGroup); else s.slideTo(stopIndex); } } else { // Short swipes if (!s.params.shortSwipes) { s.slideTo(s.activeIndex); return; } if (s.swipeDirection === 'next') { s.slideTo(stopIndex + s.params.slidesPerGroup); } if (s.swipeDirection === 'prev') { s.slideTo(stopIndex); } } }; /*========================= Transitions ===========================*/ s._slideTo = function (slideIndex, speed) { return s.slideTo(slideIndex, speed, true, true); }; s.slideTo = function (slideIndex, speed, runCallbacks, internal) { if (typeof runCallbacks === 'undefined') runCallbacks = true; if (typeof slideIndex === 'undefined') slideIndex = 0; if (slideIndex < 0) slideIndex = 0; s.snapIndex = Math.floor(slideIndex / s.params.slidesPerGroup); if (s.snapIndex >= s.snapGrid.length) s.snapIndex = s.snapGrid.length - 1; var translate = - s.snapGrid[s.snapIndex]; // Stop autoplay if (s.params.autoplay && s.autoplaying) { if (internal || !s.params.autoplayDisableOnInteraction) { s.pauseAutoplay(speed); } else { s.stopAutoplay(); } } // Update progress s.updateProgress(translate); // Normalize slideIndex if(s.params.normalizeSlideIndex){ for (var i = 0; i < s.slidesGrid.length; i++) { if (- Math.floor(translate * 100) >= Math.floor(s.slidesGrid[i] * 100)) { slideIndex = i; } } } // Directions locks if (!s.params.allowSwipeToNext && translate < s.translate && translate < s.minTranslate()) { return false; } if (!s.params.allowSwipeToPrev && translate > s.translate && translate > s.maxTranslate()) { if ((s.activeIndex || 0) !== slideIndex ) return false; } // Update Index if (typeof speed === 'undefined') speed = s.params.speed; s.previousIndex = s.activeIndex || 0; s.activeIndex = slideIndex; s.updateRealIndex(); if ((s.rtl && -translate === s.translate) || (!s.rtl && translate === s.translate)) { // Update Height if (s.params.autoHeight) { s.updateAutoHeight(); } s.updateClasses(); if (s.params.effect !== 'slide') { s.setWrapperTranslate(translate); } return false; } s.updateClasses(); s.onTransitionStart(runCallbacks); if (speed === 0 || s.browser.lteIE9) { s.setWrapperTranslate(translate); s.setWrapperTransition(0); s.onTransitionEnd(runCallbacks); } else { s.setWrapperTranslate(translate); s.setWrapperTransition(speed); if (!s.animating) { s.animating = true; s.wrapper.transitionEnd(function () { if (!s) return; s.onTransitionEnd(runCallbacks); }); } } return true; }; s.onTransitionStart = function (runCallbacks) { if (typeof runCallbacks === 'undefined') runCallbacks = true; if (s.params.autoHeight) { s.updateAutoHeight(); } if (s.lazy) s.lazy.onTransitionStart(); if (runCallbacks) { s.emit('onTransitionStart', s); if (s.activeIndex !== s.previousIndex) { s.emit('onSlideChangeStart', s); if (s.activeIndex > s.previousIndex) { s.emit('onSlideNextStart', s); } else { s.emit('onSlidePrevStart', s); } } } }; s.onTransitionEnd = function (runCallbacks) { s.animating = false; s.setWrapperTransition(0); if (typeof runCallbacks === 'undefined') runCallbacks = true; if (s.lazy) s.lazy.onTransitionEnd(); if (runCallbacks) { s.emit('onTransitionEnd', s); if (s.activeIndex !== s.previousIndex) { s.emit('onSlideChangeEnd', s); if (s.activeIndex > s.previousIndex) { s.emit('onSlideNextEnd', s); } else { s.emit('onSlidePrevEnd', s); } } } if (s.params.history && s.history) { s.history.setHistory(s.params.history, s.activeIndex); } if (s.params.hashnav && s.hashnav) { s.hashnav.setHash(); } }; s.slideNext = function (runCallbacks, speed, internal) { if (s.params.loop) { if (s.animating) return false; s.fixLoop(); var clientLeft = s.container[0].clientLeft; return s.slideTo(s.activeIndex + s.params.slidesPerGroup, speed, runCallbacks, internal); } else return s.slideTo(s.activeIndex + s.params.slidesPerGroup, speed, runCallbacks, internal); }; s._slideNext = function (speed) { return s.slideNext(true, speed, true); }; s.slidePrev = function (runCallbacks, speed, internal) { if (s.params.loop) { if (s.animating) return false; s.fixLoop(); var clientLeft = s.container[0].clientLeft; return s.slideTo(s.activeIndex - 1, speed, runCallbacks, internal); } else return s.slideTo(s.activeIndex - 1, speed, runCallbacks, internal); }; s._slidePrev = function (speed) { return s.slidePrev(true, speed, true); }; s.slideReset = function (runCallbacks, speed, internal) { return s.slideTo(s.activeIndex, speed, runCallbacks); }; s.disableTouchControl = function () { s.params.onlyExternal = true; return true; }; s.enableTouchControl = function () { s.params.onlyExternal = false; return true; }; /*========================= Translate/transition helpers ===========================*/ s.setWrapperTransition = function (duration, byController) { s.wrapper.transition(duration); if (s.params.effect !== 'slide' && s.effects[s.params.effect]) { s.effects[s.params.effect].setTransition(duration); } if (s.params.parallax && s.parallax) { s.parallax.setTransition(duration); } if (s.params.scrollbar && s.scrollbar) { s.scrollbar.setTransition(duration); } if (s.params.control && s.controller) { s.controller.setTransition(duration, byController); } s.emit('onSetTransition', s, duration); }; s.setWrapperTranslate = function (translate, updateActiveIndex, byController) { var x = 0, y = 0, z = 0; if (s.isHorizontal()) { x = s.rtl ? -translate : translate; } else { y = translate; } if (s.params.roundLengths) { x = round(x); y = round(y); } if (!s.params.virtualTranslate) { if (s.support.transforms3d) s.wrapper.transform('translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px)'); else s.wrapper.transform('translate(' + x + 'px, ' + y + 'px)'); } s.translate = s.isHorizontal() ? x : y; // Check if we need to update progress var progress; var translatesDiff = s.maxTranslate() - s.minTranslate(); if (translatesDiff === 0) { progress = 0; } else { progress = (translate - s.minTranslate()) / (translatesDiff); } if (progress !== s.progress) { s.updateProgress(translate); } if (updateActiveIndex) s.updateActiveIndex(); if (s.params.effect !== 'slide' && s.effects[s.params.effect]) { s.effects[s.params.effect].setTranslate(s.translate); } if (s.params.parallax && s.parallax) { s.parallax.setTranslate(s.translate); } if (s.params.scrollbar && s.scrollbar) { s.scrollbar.setTranslate(s.translate); } if (s.params.control && s.controller) { s.controller.setTranslate(s.translate, byController); } s.emit('onSetTranslate', s, s.translate); }; s.getTranslate = function (el, axis) { var matrix, curTransform, curStyle, transformMatrix; // automatic axis detection if (typeof axis === 'undefined') { axis = 'x'; } if (s.params.virtualTranslate) { return s.rtl ? -s.translate : s.translate; } curStyle = window.getComputedStyle(el, null); if (window.WebKitCSSMatrix) { curTransform = curStyle.transform || curStyle.webkitTransform; if (curTransform.split(',').length > 6) { curTransform = curTransform.split(', ').map(function(a){ return a.replace(',','.'); }).join(', '); } // Some old versions of Webkit choke when 'none' is passed; pass // empty string instead in this case transformMatrix = new window.WebKitCSSMatrix(curTransform === 'none' ? '' : curTransform); } else { transformMatrix = curStyle.MozTransform || curStyle.OTransform || curStyle.MsTransform || curStyle.msTransform || curStyle.transform || curStyle.getPropertyValue('transform').replace('translate(', 'matrix(1, 0, 0, 1,'); matrix = transformMatrix.toString().split(','); } if (axis === 'x') { //Latest Chrome and webkits Fix if (window.WebKitCSSMatrix) curTransform = transformMatrix.m41; //Crazy IE10 Matrix else if (matrix.length === 16) curTransform = parseFloat(matrix[12]); //Normal Browsers else curTransform = parseFloat(matrix[4]); } if (axis === 'y') { //Latest Chrome and webkits Fix if (window.WebKitCSSMatrix) curTransform = transformMatrix.m42; //Crazy IE10 Matrix else if (matrix.length === 16) curTransform = parseFloat(matrix[13]); //Normal Browsers else curTransform = parseFloat(matrix[5]); } if (s.rtl && curTransform) curTransform = -curTransform; return curTransform || 0; }; s.getWrapperTranslate = function (axis) { if (typeof axis === 'undefined') { axis = s.isHorizontal() ? 'x' : 'y'; } return s.getTranslate(s.wrapper[0], axis); }; /*========================= Observer ===========================*/ s.observers = []; function initObserver(target, options) { options = options || {}; // create an observer instance var ObserverFunc = window.MutationObserver || window.WebkitMutationObserver; var observer = new ObserverFunc(function (mutations) { mutations.forEach(function (mutation) { s.onResize(true); s.emit('onObserverUpdate', s, mutation); }); }); observer.observe(target, { attributes: typeof options.attributes === 'undefined' ? true : options.attributes, childList: typeof options.childList === 'undefined' ? true : options.childList, characterData: typeof options.characterData === 'undefined' ? true : options.characterData }); s.observers.push(observer); } s.initObservers = function () { if (s.params.observeParents) { var containerParents = s.container.parents(); for (var i = 0; i < containerParents.length; i++) { initObserver(containerParents[i]); } } // Observe container initObserver(s.container[0], {childList: false}); // Observe wrapper initObserver(s.wrapper[0], {attributes: false}); }; s.disconnectObservers = function () { for (var i = 0; i < s.observers.length; i++) { s.observers[i].disconnect(); } s.observers = []; }; /*========================= Loop ===========================*/ // Create looped slides s.createLoop = function () { // Remove duplicated slides s.wrapper.children('.' + s.params.slideClass + '.' + s.params.slideDuplicateClass).remove(); var slides = s.wrapper.children('.' + s.params.slideClass); if(s.params.slidesPerView === 'auto' && !s.params.loopedSlides) s.params.loopedSlides = slides.length; s.loopedSlides = parseInt(s.params.loopedSlides || s.params.slidesPerView, 10); s.loopedSlides = s.loopedSlides + s.params.loopAdditionalSlides; if (s.loopedSlides > slides.length) { s.loopedSlides = slides.length; } var prependSlides = [], appendSlides = [], i; slides.each(function (index, el) { var slide = $(this); if (index < s.loopedSlides) appendSlides.push(el); if (index < slides.length && index >= slides.length - s.loopedSlides) prependSlides.push(el); slide.attr('data-swiper-slide-index', index); }); for (i = 0; i < appendSlides.length; i++) { s.wrapper.append($(appendSlides[i].cloneNode(true)).addClass(s.params.slideDuplicateClass)); } for (i = prependSlides.length - 1; i >= 0; i--) { s.wrapper.prepend($(prependSlides[i].cloneNode(true)).addClass(s.params.slideDuplicateClass)); } }; s.destroyLoop = function () { s.wrapper.children('.' + s.params.slideClass + '.' + s.params.slideDuplicateClass).remove(); s.slides.removeAttr('data-swiper-slide-index'); }; s.reLoop = function (updatePosition) { var oldIndex = s.activeIndex - s.loopedSlides; s.destroyLoop(); s.createLoop(); s.updateSlidesSize(); if (updatePosition) { s.slideTo(oldIndex + s.loopedSlides, 0, false); } }; s.fixLoop = function () { var newIndex; //Fix For Negative Oversliding if (s.activeIndex < s.loopedSlides) { newIndex = s.slides.length - s.loopedSlides * 3 + s.activeIndex; newIndex = newIndex + s.loopedSlides; s.slideTo(newIndex, 0, false, true); } //Fix For Positive Oversliding else if ((s.params.slidesPerView === 'auto' && s.activeIndex >= s.loopedSlides * 2) || (s.activeIndex > s.slides.length - s.params.slidesPerView * 2)) { newIndex = -s.slides.length + s.activeIndex + s.loopedSlides; newIndex = newIndex + s.loopedSlides; s.slideTo(newIndex, 0, false, true); } }; /*========================= Append/Prepend/Remove Slides ===========================*/ s.appendSlide = function (slides) { if (s.params.loop) { s.destroyLoop(); } if (typeof slides === 'object' && slides.length) { for (var i = 0; i < slides.length; i++) { if (slides[i]) s.wrapper.append(slides[i]); } } else { s.wrapper.append(slides); } if (s.params.loop) { s.createLoop(); } if (!(s.params.observer && s.support.observer)) { s.update(true); } }; s.prependSlide = function (slides) { if (s.params.loop) { s.destroyLoop(); } var newActiveIndex = s.activeIndex + 1; if (typeof slides === 'object' && slides.length) { for (var i = 0; i < slides.length; i++) { if (slides[i]) s.wrapper.prepend(slides[i]); } newActiveIndex = s.activeIndex + slides.length; } else { s.wrapper.prepend(slides); } if (s.params.loop) { s.createLoop(); } if (!(s.params.observer && s.support.observer)) { s.update(true); } s.slideTo(newActiveIndex, 0, false); }; s.removeSlide = function (slidesIndexes) { if (s.params.loop) { s.destroyLoop(); s.slides = s.wrapper.children('.' + s.params.slideClass); } var newActiveIndex = s.activeIndex, indexToRemove; if (typeof slidesIndexes === 'object' && slidesIndexes.length) { for (var i = 0; i < slidesIndexes.length; i++) { indexToRemove = slidesIndexes[i]; if (s.slides[indexToRemove]) s.slides.eq(indexToRemove).remove(); if (indexToRemove < newActiveIndex) newActiveIndex--; } newActiveIndex = Math.max(newActiveIndex, 0); } else { indexToRemove = slidesIndexes; if (s.slides[indexToRemove]) s.slides.eq(indexToRemove).remove(); if (indexToRemove < newActiveIndex) newActiveIndex--; newActiveIndex = Math.max(newActiveIndex, 0); } if (s.params.loop) { s.createLoop(); } if (!(s.params.observer && s.support.observer)) { s.update(true); } if (s.params.loop) { s.slideTo(newActiveIndex + s.loopedSlides, 0, false); } else { s.slideTo(newActiveIndex, 0, false); } }; s.removeAllSlides = function () { var slidesIndexes = []; for (var i = 0; i < s.slides.length; i++) { slidesIndexes.push(i); } s.removeSlide(slidesIndexes); }; /*========================= Effects ===========================*/ s.effects = { fade: { setTranslate: function () { for (var i = 0; i < s.slides.length; i++) { var slide = s.slides.eq(i); var offset = slide[0].swiperSlideOffset; var tx = -offset; if (!s.params.virtualTranslate) tx = tx - s.translate; var ty = 0; if (!s.isHorizontal()) { ty = tx; tx = 0; } var slideOpacity = s.params.fade.crossFade ? Math.max(1 - Math.abs(slide[0].progress), 0) : 1 + Math.min(Math.max(slide[0].progress, -1), 0); slide .css({ opacity: slideOpacity }) .transform('translate3d(' + tx + 'px, ' + ty + 'px, 0px)'); } }, setTransition: function (duration) { s.slides.transition(duration); if (s.params.virtualTranslate && duration !== 0) { var eventTriggered = false; s.slides.transitionEnd(function () { if (eventTriggered) return; if (!s) return; eventTriggered = true; s.animating = false; var triggerEvents = ['webkitTransitionEnd', 'transitionend', 'oTransitionEnd', 'MSTransitionEnd', 'msTransitionEnd']; for (var i = 0; i < triggerEvents.length; i++) { s.wrapper.trigger(triggerEvents[i]); } }); } } }, flip: { setTranslate: function () { for (var i = 0; i < s.slides.length; i++) { var slide = s.slides.eq(i); var progress = slide[0].progress; if (s.params.flip.limitRotation) { progress = Math.max(Math.min(slide[0].progress, 1), -1); } var offset = slide[0].swiperSlideOffset; var rotate = -180 * progress, rotateY = rotate, rotateX = 0, tx = -offset, ty = 0; if (!s.isHorizontal()) { ty = tx; tx = 0; rotateX = -rotateY; rotateY = 0; } else if (s.rtl) { rotateY = -rotateY; } slide[0].style.zIndex = -Math.abs(Math.round(progress)) + s.slides.length; if (s.params.flip.slideShadows) { //Set shadows var shadowBefore = s.isHorizontal() ? slide.find('.swiper-slide-shadow-left') : slide.find('.swiper-slide-shadow-top'); var shadowAfter = s.isHorizontal() ? slide.find('.swiper-slide-shadow-right') : slide.find('.swiper-slide-shadow-bottom'); if (shadowBefore.length === 0) { shadowBefore = $(''); slide.append(shadowBefore); } if (shadowAfter.length === 0) { shadowAfter = $(''); slide.append(shadowAfter); } if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0); if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0); } slide .transform('translate3d(' + tx + 'px, ' + ty + 'px, 0px) rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)'); } }, setTransition: function (duration) { s.slides.transition(duration).find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').transition(duration); if (s.params.virtualTranslate && duration !== 0) { var eventTriggered = false; s.slides.eq(s.activeIndex).transitionEnd(function () { if (eventTriggered) return; if (!s) return; if (!$(this).hasClass(s.params.slideActiveClass)) return; eventTriggered = true; s.animating = false; var triggerEvents = ['webkitTransitionEnd', 'transitionend', 'oTransitionEnd', 'MSTransitionEnd', 'msTransitionEnd']; for (var i = 0; i < triggerEvents.length; i++) { s.wrapper.trigger(triggerEvents[i]); } }); } } }, cube: { setTranslate: function () { var wrapperRotate = 0, cubeShadow; if (s.params.cube.shadow) { if (s.isHorizontal()) { cubeShadow = s.wrapper.find('.swiper-cube-shadow'); if (cubeShadow.length === 0) { cubeShadow = $(''); s.wrapper.append(cubeShadow); } cubeShadow.css({height: s.width + 'px'}); } else { cubeShadow = s.container.find('.swiper-cube-shadow'); if (cubeShadow.length === 0) { cubeShadow = $(''); s.container.append(cubeShadow); } } } for (var i = 0; i < s.slides.length; i++) { var slide = s.slides.eq(i); var slideAngle = i * 90; var round = Math.floor(slideAngle / 360); if (s.rtl) { slideAngle = -slideAngle; round = Math.floor(-slideAngle / 360); } var progress = Math.max(Math.min(slide[0].progress, 1), -1); var tx = 0, ty = 0, tz = 0; if (i % 4 === 0) { tx = - round * 4 * s.size; tz = 0; } else if ((i - 1) % 4 === 0) { tx = 0; tz = - round * 4 * s.size; } else if ((i - 2) % 4 === 0) { tx = s.size + round * 4 * s.size; tz = s.size; } else if ((i - 3) % 4 === 0) { tx = - s.size; tz = 3 * s.size + s.size * 4 * round; } if (s.rtl) { tx = -tx; } if (!s.isHorizontal()) { ty = tx; tx = 0; } var transform = 'rotateX(' + (s.isHorizontal() ? 0 : -slideAngle) + 'deg) rotateY(' + (s.isHorizontal() ? slideAngle : 0) + 'deg) translate3d(' + tx + 'px, ' + ty + 'px, ' + tz + 'px)'; if (progress <= 1 && progress > -1) { wrapperRotate = i * 90 + progress * 90; if (s.rtl) wrapperRotate = -i * 90 - progress * 90; } slide.transform(transform); if (s.params.cube.slideShadows) { //Set shadows var shadowBefore = s.isHorizontal() ? slide.find('.swiper-slide-shadow-left') : slide.find('.swiper-slide-shadow-top'); var shadowAfter = s.isHorizontal() ? slide.find('.swiper-slide-shadow-right') : slide.find('.swiper-slide-shadow-bottom'); if (shadowBefore.length === 0) { shadowBefore = $(''); slide.append(shadowBefore); } if (shadowAfter.length === 0) { shadowAfter = $(''); slide.append(shadowAfter); } if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0); if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0); } } s.wrapper.css({ '-webkit-transform-origin': '50% 50% -' + (s.size / 2) + 'px', '-moz-transform-origin': '50% 50% -' + (s.size / 2) + 'px', '-ms-transform-origin': '50% 50% -' + (s.size / 2) + 'px', 'transform-origin': '50% 50% -' + (s.size / 2) + 'px' }); if (s.params.cube.shadow) { if (s.isHorizontal()) { cubeShadow.transform('translate3d(0px, ' + (s.width / 2 + s.params.cube.shadowOffset) + 'px, ' + (-s.width / 2) + 'px) rotateX(90deg) rotateZ(0deg) scale(' + (s.params.cube.shadowScale) + ')'); } else { var shadowAngle = Math.abs(wrapperRotate) - Math.floor(Math.abs(wrapperRotate) / 90) * 90; var multiplier = 1.5 - (Math.sin(shadowAngle * 2 * Math.PI / 360) / 2 + Math.cos(shadowAngle * 2 * Math.PI / 360) / 2); var scale1 = s.params.cube.shadowScale, scale2 = s.params.cube.shadowScale / multiplier, offset = s.params.cube.shadowOffset; cubeShadow.transform('scale3d(' + scale1 + ', 1, ' + scale2 + ') translate3d(0px, ' + (s.height / 2 + offset) + 'px, ' + (-s.height / 2 / scale2) + 'px) rotateX(-90deg)'); } } var zFactor = (s.isSafari || s.isUiWebView) ? (-s.size / 2) : 0; s.wrapper.transform('translate3d(0px,0,' + zFactor + 'px) rotateX(' + (s.isHorizontal() ? 0 : wrapperRotate) + 'deg) rotateY(' + (s.isHorizontal() ? -wrapperRotate : 0) + 'deg)'); }, setTransition: function (duration) { s.slides.transition(duration).find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').transition(duration); if (s.params.cube.shadow && !s.isHorizontal()) { s.container.find('.swiper-cube-shadow').transition(duration); } } }, coverflow: { setTranslate: function () { var transform = s.translate; var center = s.isHorizontal() ? -transform + s.width / 2 : -transform + s.height / 2; var rotate = s.isHorizontal() ? s.params.coverflow.rotate: -s.params.coverflow.rotate; var translate = s.params.coverflow.depth; //Each slide offset from center for (var i = 0, length = s.slides.length; i < length; i++) { var slide = s.slides.eq(i); var slideSize = s.slidesSizesGrid[i]; var slideOffset = slide[0].swiperSlideOffset; var offsetMultiplier = (center - slideOffset - slideSize / 2) / slideSize * s.params.coverflow.modifier; var rotateY = s.isHorizontal() ? rotate * offsetMultiplier : 0; var rotateX = s.isHorizontal() ? 0 : rotate * offsetMultiplier; // var rotateZ = 0 var translateZ = -translate * Math.abs(offsetMultiplier); var translateY = s.isHorizontal() ? 0 : s.params.coverflow.stretch * (offsetMultiplier); var translateX = s.isHorizontal() ? s.params.coverflow.stretch * (offsetMultiplier) : 0; //Fix for ultra small values if (Math.abs(translateX) < 0.001) translateX = 0; if (Math.abs(translateY) < 0.001) translateY = 0; if (Math.abs(translateZ) < 0.001) translateZ = 0; if (Math.abs(rotateY) < 0.001) rotateY = 0; if (Math.abs(rotateX) < 0.001) rotateX = 0; var slideTransform = 'translate3d(' + translateX + 'px,' + translateY + 'px,' + translateZ + 'px) rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)'; slide.transform(slideTransform); slide[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1; if (s.params.coverflow.slideShadows) { //Set shadows var shadowBefore = s.isHorizontal() ? slide.find('.swiper-slide-shadow-left') : slide.find('.swiper-slide-shadow-top'); var shadowAfter = s.isHorizontal() ? slide.find('.swiper-slide-shadow-right') : slide.find('.swiper-slide-shadow-bottom'); if (shadowBefore.length === 0) { shadowBefore = $(''); slide.append(shadowBefore); } if (shadowAfter.length === 0) { shadowAfter = $(''); slide.append(shadowAfter); } if (shadowBefore.length) shadowBefore[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0; if (shadowAfter.length) shadowAfter[0].style.opacity = (-offsetMultiplier) > 0 ? -offsetMultiplier : 0; } } //Set correct perspective for IE10 if (s.browser.ie) { var ws = s.wrapper[0].style; ws.perspectiveOrigin = center + 'px 50%'; } }, setTransition: function (duration) { s.slides.transition(duration).find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').transition(duration); } } }; /*========================= Images Lazy Loading ===========================*/ s.lazy = { initialImageLoaded: false, loadImageInSlide: function (index, loadInDuplicate) { if (typeof index === 'undefined') return; if (typeof loadInDuplicate === 'undefined') loadInDuplicate = true; if (s.slides.length === 0) return; var slide = s.slides.eq(index); var img = slide.find('.' + s.params.lazyLoadingClass + ':not(.' + s.params.lazyStatusLoadedClass + '):not(.' + s.params.lazyStatusLoadingClass + ')'); if (slide.hasClass(s.params.lazyLoadingClass) && !slide.hasClass(s.params.lazyStatusLoadedClass) && !slide.hasClass(s.params.lazyStatusLoadingClass)) { img = img.add(slide[0]); } if (img.length === 0) return; img.each(function () { var _img = $(this); _img.addClass(s.params.lazyStatusLoadingClass); var background = _img.attr('data-background'); var src = _img.attr('data-src'), srcset = _img.attr('data-srcset'), sizes = _img.attr('data-sizes'); s.loadImage(_img[0], (src || background), srcset, sizes, false, function () { if (typeof s === 'undefined' || s === null || !s) return; if (background) { _img.css('background-image', 'url("' + background + '")'); _img.removeAttr('data-background'); } else { if (srcset) { _img.attr('srcset', srcset); _img.removeAttr('data-srcset'); } if (sizes) { _img.attr('sizes', sizes); _img.removeAttr('data-sizes'); } if (src) { _img.attr('src', src); _img.removeAttr('data-src'); } } _img.addClass(s.params.lazyStatusLoadedClass).removeClass(s.params.lazyStatusLoadingClass); slide.find('.' + s.params.lazyPreloaderClass + ', .' + s.params.preloaderClass).remove(); if (s.params.loop && loadInDuplicate) { var slideOriginalIndex = slide.attr('data-swiper-slide-index'); if (slide.hasClass(s.params.slideDuplicateClass)) { var originalSlide = s.wrapper.children('[data-swiper-slide-index="' + slideOriginalIndex + '"]:not(.' + s.params.slideDuplicateClass + ')'); s.lazy.loadImageInSlide(originalSlide.index(), false); } else { var duplicatedSlide = s.wrapper.children('.' + s.params.slideDuplicateClass + '[data-swiper-slide-index="' + slideOriginalIndex + '"]'); s.lazy.loadImageInSlide(duplicatedSlide.index(), false); } } s.emit('onLazyImageReady', s, slide[0], _img[0]); }); s.emit('onLazyImageLoad', s, slide[0], _img[0]); }); }, load: function () { var i; var slidesPerView = s.params.slidesPerView; if (slidesPerView === 'auto') { slidesPerView = 0; } if (!s.lazy.initialImageLoaded) s.lazy.initialImageLoaded = true; if (s.params.watchSlidesVisibility) { s.wrapper.children('.' + s.params.slideVisibleClass).each(function () { s.lazy.loadImageInSlide($(this).index()); }); } else { if (slidesPerView > 1) { for (i = s.activeIndex; i < s.activeIndex + slidesPerView ; i++) { if (s.slides[i]) s.lazy.loadImageInSlide(i); } } else { s.lazy.loadImageInSlide(s.activeIndex); } } if (s.params.lazyLoadingInPrevNext) { if (slidesPerView > 1 || (s.params.lazyLoadingInPrevNextAmount && s.params.lazyLoadingInPrevNextAmount > 1)) { var amount = s.params.lazyLoadingInPrevNextAmount; var spv = slidesPerView; var maxIndex = Math.min(s.activeIndex + spv + Math.max(amount, spv), s.slides.length); var minIndex = Math.max(s.activeIndex - Math.max(spv, amount), 0); // Next Slides for (i = s.activeIndex + slidesPerView; i < maxIndex; i++) { if (s.slides[i]) s.lazy.loadImageInSlide(i); } // Prev Slides for (i = minIndex; i < s.activeIndex ; i++) { if (s.slides[i]) s.lazy.loadImageInSlide(i); } } else { var nextSlide = s.wrapper.children('.' + s.params.slideNextClass); if (nextSlide.length > 0) s.lazy.loadImageInSlide(nextSlide.index()); var prevSlide = s.wrapper.children('.' + s.params.slidePrevClass); if (prevSlide.length > 0) s.lazy.loadImageInSlide(prevSlide.index()); } } }, onTransitionStart: function () { if (s.params.lazyLoading) { if (s.params.lazyLoadingOnTransitionStart || (!s.params.lazyLoadingOnTransitionStart && !s.lazy.initialImageLoaded)) { s.lazy.load(); } } }, onTransitionEnd: function () { if (s.params.lazyLoading && !s.params.lazyLoadingOnTransitionStart) { s.lazy.load(); } } }; /*========================= Scrollbar ===========================*/ s.scrollbar = { isTouched: false, setDragPosition: function (e) { var sb = s.scrollbar; var x = 0, y = 0; var translate; var pointerPosition = s.isHorizontal() ? ((e.type === 'touchstart' || e.type === 'touchmove') ? e.targetTouches[0].pageX : e.pageX || e.clientX) : ((e.type === 'touchstart' || e.type === 'touchmove') ? e.targetTouches[0].pageY : e.pageY || e.clientY) ; var position = (pointerPosition) - sb.track.offset()[s.isHorizontal() ? 'left' : 'top'] - sb.dragSize / 2; var positionMin = -s.minTranslate() * sb.moveDivider; var positionMax = -s.maxTranslate() * sb.moveDivider; if (position < positionMin) { position = positionMin; } else if (position > positionMax) { position = positionMax; } position = -position / sb.moveDivider; s.updateProgress(position); s.setWrapperTranslate(position, true); }, dragStart: function (e) { var sb = s.scrollbar; sb.isTouched = true; e.preventDefault(); e.stopPropagation(); sb.setDragPosition(e); clearTimeout(sb.dragTimeout); sb.track.transition(0); if (s.params.scrollbarHide) { sb.track.css('opacity', 1); } s.wrapper.transition(100); sb.drag.transition(100); s.emit('onScrollbarDragStart', s); }, dragMove: function (e) { var sb = s.scrollbar; if (!sb.isTouched) return; if (e.preventDefault) e.preventDefault(); else e.returnValue = false; sb.setDragPosition(e); s.wrapper.transition(0); sb.track.transition(0); sb.drag.transition(0); s.emit('onScrollbarDragMove', s); }, dragEnd: function (e) { var sb = s.scrollbar; if (!sb.isTouched) return; sb.isTouched = false; if (s.params.scrollbarHide) { clearTimeout(sb.dragTimeout); sb.dragTimeout = setTimeout(function () { sb.track.css('opacity', 0); sb.track.transition(400); }, 1000); } s.emit('onScrollbarDragEnd', s); if (s.params.scrollbarSnapOnRelease) { s.slideReset(); } }, draggableEvents: (function () { if ((s.params.simulateTouch === false && !s.support.touch)) return s.touchEventsDesktop; else return s.touchEvents; })(), enableDraggable: function () { var sb = s.scrollbar; var target = s.support.touch ? sb.track : document; $(sb.track).on(sb.draggableEvents.start, sb.dragStart); $(target).on(sb.draggableEvents.move, sb.dragMove); $(target).on(sb.draggableEvents.end, sb.dragEnd); }, disableDraggable: function () { var sb = s.scrollbar; var target = s.support.touch ? sb.track : document; $(sb.track).off(sb.draggableEvents.start, sb.dragStart); $(target).off(sb.draggableEvents.move, sb.dragMove); $(target).off(sb.draggableEvents.end, sb.dragEnd); }, set: function () { if (!s.params.scrollbar) return; var sb = s.scrollbar; sb.track = $(s.params.scrollbar); if (s.params.uniqueNavElements && typeof s.params.scrollbar === 'string' && sb.track.length > 1 && s.container.find(s.params.scrollbar).length === 1) { sb.track = s.container.find(s.params.scrollbar); } sb.drag = sb.track.find('.swiper-scrollbar-drag'); if (sb.drag.length === 0) { sb.drag = $(''); sb.track.append(sb.drag); } sb.drag[0].style.width = ''; sb.drag[0].style.height = ''; sb.trackSize = s.isHorizontal() ? sb.track[0].offsetWidth : sb.track[0].offsetHeight; sb.divider = s.size / s.virtualSize; sb.moveDivider = sb.divider * (sb.trackSize / s.size); sb.dragSize = sb.trackSize * sb.divider; if (s.isHorizontal()) { sb.drag[0].style.width = sb.dragSize + 'px'; } else { sb.drag[0].style.height = sb.dragSize + 'px'; } if (sb.divider >= 1) { sb.track[0].style.display = 'none'; } else { sb.track[0].style.display = ''; } if (s.params.scrollbarHide) { sb.track[0].style.opacity = 0; } }, setTranslate: function () { if (!s.params.scrollbar) return; var diff; var sb = s.scrollbar; var translate = s.translate || 0; var newPos; var newSize = sb.dragSize; newPos = (sb.trackSize - sb.dragSize) * s.progress; if (s.rtl && s.isHorizontal()) { newPos = -newPos; if (newPos > 0) { newSize = sb.dragSize - newPos; newPos = 0; } else if (-newPos + sb.dragSize > sb.trackSize) { newSize = sb.trackSize + newPos; } } else { if (newPos < 0) { newSize = sb.dragSize + newPos; newPos = 0; } else if (newPos + sb.dragSize > sb.trackSize) { newSize = sb.trackSize - newPos; } } if (s.isHorizontal()) { if (s.support.transforms3d) { sb.drag.transform('translate3d(' + (newPos) + 'px, 0, 0)'); } else { sb.drag.transform('translateX(' + (newPos) + 'px)'); } sb.drag[0].style.width = newSize + 'px'; } else { if (s.support.transforms3d) { sb.drag.transform('translate3d(0px, ' + (newPos) + 'px, 0)'); } else { sb.drag.transform('translateY(' + (newPos) + 'px)'); } sb.drag[0].style.height = newSize + 'px'; } if (s.params.scrollbarHide) { clearTimeout(sb.timeout); sb.track[0].style.opacity = 1; sb.timeout = setTimeout(function () { sb.track[0].style.opacity = 0; sb.track.transition(400); }, 1000); } }, setTransition: function (duration) { if (!s.params.scrollbar) return; s.scrollbar.drag.transition(duration); } }; /*========================= Controller ===========================*/ s.controller = { LinearSpline: function (x, y) { var binarySearch = (function() { var maxIndex, minIndex, guess; return function(array, val) { minIndex = -1; maxIndex = array.length; while (maxIndex - minIndex > 1) if (array[guess = maxIndex + minIndex >> 1] <= val) { minIndex = guess; } else { maxIndex = guess; } return maxIndex; }; })(); this.x = x; this.y = y; this.lastIndex = x.length - 1; // Given an x value (x2), return the expected y2 value: // (x1,y1) is the known point before given value, // (x3,y3) is the known point after given value. var i1, i3; var l = this.x.length; this.interpolate = function (x2) { if (!x2) return 0; // Get the indexes of x1 and x3 (the array indexes before and after given x2): i3 = binarySearch(this.x, x2); i1 = i3 - 1; // We have our indexes i1 & i3, so we can calculate already: // y2 := ((x2−x1) × (y3−y1)) ÷ (x3−x1) + y1 return ((x2 - this.x[i1]) * (this.y[i3] - this.y[i1])) / (this.x[i3] - this.x[i1]) + this.y[i1]; }; }, //xxx: for now i will just save one spline function to to getInterpolateFunction: function(c){ if(!s.controller.spline) s.controller.spline = s.params.loop ? new s.controller.LinearSpline(s.slidesGrid, c.slidesGrid) : new s.controller.LinearSpline(s.snapGrid, c.snapGrid); }, setTranslate: function (translate, byController) { var controlled = s.params.control; var multiplier, controlledTranslate; function setControlledTranslate(c) { // this will create an Interpolate function based on the snapGrids // x is the Grid of the scrolled scroller and y will be the controlled scroller // it makes sense to create this only once and recall it for the interpolation // the function does a lot of value caching for performance translate = c.rtl && c.params.direction === 'horizontal' ? -s.translate : s.translate; if (s.params.controlBy === 'slide') { s.controller.getInterpolateFunction(c); // i am not sure why the values have to be multiplicated this way, tried to invert the snapGrid // but it did not work out controlledTranslate = -s.controller.spline.interpolate(-translate); } if(!controlledTranslate || s.params.controlBy === 'container'){ multiplier = (c.maxTranslate() - c.minTranslate()) / (s.maxTranslate() - s.minTranslate()); controlledTranslate = (translate - s.minTranslate()) * multiplier + c.minTranslate(); } if (s.params.controlInverse) { controlledTranslate = c.maxTranslate() - controlledTranslate; } c.updateProgress(controlledTranslate); c.setWrapperTranslate(controlledTranslate, false, s); c.updateActiveIndex(); } if (Array.isArray(controlled)) { for (var i = 0; i < controlled.length; i++) { if (controlled[i] !== byController && controlled[i] instanceof Swiper) { setControlledTranslate(controlled[i]); } } } else if (controlled instanceof Swiper && byController !== controlled) { setControlledTranslate(controlled); } }, setTransition: function (duration, byController) { var controlled = s.params.control; var i; function setControlledTransition(c) { c.setWrapperTransition(duration, s); if (duration !== 0) { c.onTransitionStart(); c.wrapper.transitionEnd(function(){ if (!controlled) return; if (c.params.loop && s.params.controlBy === 'slide') { c.fixLoop(); } c.onTransitionEnd(); }); } } if (Array.isArray(controlled)) { for (i = 0; i < controlled.length; i++) { if (controlled[i] !== byController && controlled[i] instanceof Swiper) { setControlledTransition(controlled[i]); } } } else if (controlled instanceof Swiper && byController !== controlled) { setControlledTransition(controlled); } } }; /*========================= Hash Navigation ===========================*/ s.hashnav = { onHashCange: function (e, a) { var newHash = document.location.hash.replace('#', ''); var activeSlideHash = s.slides.eq(s.activeIndex).attr('data-hash'); if (newHash !== activeSlideHash) { s.slideTo(s.wrapper.children('.' + s.params.slideClass + '[data-hash="' + (newHash) + '"]').index()); } }, attachEvents: function (detach) { var action = detach ? 'off' : 'on'; $(window)[action]('hashchange', s.hashnav.onHashCange); }, setHash: function () { if (!s.hashnav.initialized || !s.params.hashnav) return; if (s.params.replaceState && window.history && window.history.replaceState) { window.history.replaceState(null, null, ('#' + s.slides.eq(s.activeIndex).attr('data-hash') || '')); } else { var slide = s.slides.eq(s.activeIndex); var hash = slide.attr('data-hash') || slide.attr('data-history'); document.location.hash = hash || ''; } }, init: function () { if (!s.params.hashnav || s.params.history) return; s.hashnav.initialized = true; var hash = document.location.hash.replace('#', ''); if (hash) { var speed = 0; for (var i = 0, length = s.slides.length; i < length; i++) { var slide = s.slides.eq(i); var slideHash = slide.attr('data-hash') || slide.attr('data-history'); if (slideHash === hash && !slide.hasClass(s.params.slideDuplicateClass)) { var index = slide.index(); s.slideTo(index, speed, s.params.runCallbacksOnInit, true); } } } if (s.params.hashnavWatchState) s.hashnav.attachEvents(); }, destroy: function () { if (s.params.hashnavWatchState) s.hashnav.attachEvents(true); } }; /*========================= History Api with fallback to Hashnav ===========================*/ s.history = { init: function () { if (!s.params.history) return; if (!window.history || !window.history.pushState) { s.params.history = false; s.params.hashnav = true; return; } s.history.initialized = true; this.paths = this.getPathValues(); if (!this.paths.key && !this.paths.value) return; this.scrollToSlide(0, this.paths.value, s.params.runCallbacksOnInit); if (!s.params.replaceState) { window.addEventListener('popstate', this.setHistoryPopState); } }, setHistoryPopState: function() { s.history.paths = s.history.getPathValues(); s.history.scrollToSlide(s.params.speed, s.history.paths.value, false); }, getPathValues: function() { var pathArray = window.location.pathname.slice(1).split('/'); var total = pathArray.length; var key = pathArray[total - 2]; var value = pathArray[total - 1]; return { key: key, value: value }; }, setHistory: function (key, index) { if (!s.history.initialized || !s.params.history) return; var slide = s.slides.eq(index); var value = this.slugify(slide.attr('data-history')); if (!window.location.pathname.includes(key)) { value = key + '/' + value; } if (s.params.replaceState) { window.history.replaceState(null, null, value); } else { window.history.pushState(null, null, value); } }, slugify: function(text) { return text.toString().toLowerCase() .replace(/\s+/g, '-') .replace(/[^\w\-]+/g, '') .replace(/\-\-+/g, '-') .replace(/^-+/, '') .replace(/-+$/, ''); }, scrollToSlide: function(speed, value, runCallbacks) { if (value) { for (var i = 0, length = s.slides.length; i < length; i++) { var slide = s.slides.eq(i); var slideHistory = this.slugify(slide.attr('data-history')); if (slideHistory === value && !slide.hasClass(s.params.slideDuplicateClass)) { var index = slide.index(); s.slideTo(index, speed, runCallbacks); } } } else { s.slideTo(0, speed, runCallbacks); } } }; /*========================= Keyboard Control ===========================*/ function handleKeyboard(e) { if (e.originalEvent) e = e.originalEvent; //jquery fix var kc = e.keyCode || e.charCode; // Directions locks if (!s.params.allowSwipeToNext && (s.isHorizontal() && kc === 39 || !s.isHorizontal() && kc === 40)) { return false; } if (!s.params.allowSwipeToPrev && (s.isHorizontal() && kc === 37 || !s.isHorizontal() && kc === 38)) { return false; } if (e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) { return; } if (document.activeElement && document.activeElement.nodeName && (document.activeElement.nodeName.toLowerCase() === 'input' || document.activeElement.nodeName.toLowerCase() === 'textarea')) { return; } if (kc === 37 || kc === 39 || kc === 38 || kc === 40) { var inView = false; //Check that swiper should be inside of visible area of window if (s.container.parents('.' + s.params.slideClass).length > 0 && s.container.parents('.' + s.params.slideActiveClass).length === 0) { return; } var windowScroll = { left: window.pageXOffset, top: window.pageYOffset }; var windowWidth = window.innerWidth; var windowHeight = window.innerHeight; var swiperOffset = s.container.offset(); if (s.rtl) swiperOffset.left = swiperOffset.left - s.container[0].scrollLeft; var swiperCoord = [ [swiperOffset.left, swiperOffset.top], [swiperOffset.left + s.width, swiperOffset.top], [swiperOffset.left, swiperOffset.top + s.height], [swiperOffset.left + s.width, swiperOffset.top + s.height] ]; for (var i = 0; i < swiperCoord.length; i++) { var point = swiperCoord[i]; if ( point[0] >= windowScroll.left && point[0] <= windowScroll.left + windowWidth && point[1] >= windowScroll.top && point[1] <= windowScroll.top + windowHeight ) { inView = true; } } if (!inView) return; } if (s.isHorizontal()) { if (kc === 37 || kc === 39) { if (e.preventDefault) e.preventDefault(); else e.returnValue = false; } if ((kc === 39 && !s.rtl) || (kc === 37 && s.rtl)) s.slideNext(); if ((kc === 37 && !s.rtl) || (kc === 39 && s.rtl)) s.slidePrev(); } else { if (kc === 38 || kc === 40) { if (e.preventDefault) e.preventDefault(); else e.returnValue = false; } if (kc === 40) s.slideNext(); if (kc === 38) s.slidePrev(); } s.emit('onKeyPress', s, kc); } s.disableKeyboardControl = function () { s.params.keyboardControl = false; $(document).off('keydown', handleKeyboard); }; s.enableKeyboardControl = function () { s.params.keyboardControl = true; $(document).on('keydown', handleKeyboard); }; /*========================= Mousewheel Control ===========================*/ s.mousewheel = { event: false, lastScrollTime: (new window.Date()).getTime() }; function isEventSupported() { var eventName = 'onwheel'; var isSupported = eventName in document; if (!isSupported) { var element = document.createElement('div'); element.setAttribute(eventName, 'return;'); isSupported = typeof element[eventName] === 'function'; } if (!isSupported && document.implementation && document.implementation.hasFeature && // always returns true in newer browsers as per the standard. // @see http://dom.spec.whatwg.org/#dom-domimplementation-hasfeature document.implementation.hasFeature('', '') !== true ) { // This is the only way to test support for the `wheel` event in IE9+. isSupported = document.implementation.hasFeature('Events.wheel', '3.0'); } return isSupported; } /** * Mouse wheel (and 2-finger trackpad) support on the web sucks. It is * complicated, thus this doc is long and (hopefully) detailed enough to answer * your questions. * * If you need to react to the mouse wheel in a predictable way, this code is * like your bestest friend. * hugs * * * As of today, there are 4 DOM event types you can listen to: * * 'wheel' -- Chrome(31+), FF(17+), IE(9+) * 'mousewheel' -- Chrome, IE(6+), Opera, Safari * 'MozMousePixelScroll' -- FF(3.5 only!) (2010-2013) -- don't bother! * 'DOMMouseScroll' -- FF(0.9.7+) since 2003 * * So what to do? The is the best: * * normalizeWheel.getEventType(); * * In your event callback, use this code to get sane interpretation of the * deltas. This code will return an object with properties: * * spinX -- normalized spin speed (use for zoom) - x plane * spinY -- " - y plane * pixelX -- normalized distance (to pixels) - x plane * pixelY -- " - y plane * * Wheel values are provided by the browser assuming you are using the wheel to * scroll a web page by a number of lines or pixels (or pages). Values can vary * significantly on different platforms and browsers, forgetting that you can * scroll at different speeds. Some devices (like trackpads) emit more events * at smaller increments with fine granularity, and some emit massive jumps with * linear speed or acceleration. * * This code does its best to normalize the deltas for you: * * - spin is trying to normalize how far the wheel was spun (or trackpad * dragged). This is super useful for zoom support where you want to * throw away the chunky scroll steps on the PC and make those equal to * the slow and smooth tiny steps on the Mac. Key data: This code tries to * resolve a single slow step on a wheel to 1. * * - pixel is normalizing the desired scroll delta in pixel units. You'll * get the crazy differences between browsers, but at least it'll be in * pixels! * * - positive value indicates scrolling DOWN/RIGHT, negative UP/LEFT. This * should translate to positive value zooming IN, negative zooming OUT. * This matches the newer 'wheel' event. * * Why are there spinX, spinY (or pixels)? * * - spinX is a 2-finger side drag on the trackpad, and a shift + wheel turn * with a mouse. It results in side-scrolling in the browser by default. * * - spinY is what you expect -- it's the classic axis of a mouse wheel. * * - I dropped spinZ/pixelZ. It is supported by the DOM 3 'wheel' event and * probably is by browsers in conjunction with fancy 3D controllers .. but * you know. * * Implementation info: * * Examples of 'wheel' event if you scroll slowly (down) by one step with an * average mouse: * * OS X + Chrome (mouse) - 4 pixel delta (wheelDelta -120) * OS X + Safari (mouse) - N/A pixel delta (wheelDelta -12) * OS X + Firefox (mouse) - 0.1 line delta (wheelDelta N/A) * Win8 + Chrome (mouse) - 100 pixel delta (wheelDelta -120) * Win8 + Firefox (mouse) - 3 line delta (wheelDelta -120) * * On the trackpad: * * OS X + Chrome (trackpad) - 2 pixel delta (wheelDelta -6) * OS X + Firefox (trackpad) - 1 pixel delta (wheelDelta N/A) * * On other/older browsers.. it's more complicated as there can be multiple and * also missing delta values. * * The 'wheel' event is more standard: * * http://www.w3.org/TR/DOM-Level-3-Events/#events-wheelevents * * The basics is that it includes a unit, deltaMode (pixels, lines, pages), and * deltaX, deltaY and deltaZ. Some browsers provide other values to maintain * backward compatibility with older events. Those other values help us * better normalize spin speed. Example of what the browsers provide: * * | event.wheelDelta | event.detail * ------------------+------------------+-------------- * Safari v5/OS X | -120 | 0 * Safari v5/Win7 | -120 | 0 * Chrome v17/OS X | -120 | 0 * Chrome v17/Win7 | -120 | 0 * IE9/Win7 | -120 | undefined * Firefox v4/OS X | undefined | 1 * Firefox v4/Win7 | undefined | 3 * */ function normalizeWheel( /*object*/ event ) /*object*/ { // Reasonable defaults var PIXEL_STEP = 10; var LINE_HEIGHT = 40; var PAGE_HEIGHT = 800; var sX = 0, sY = 0, // spinX, spinY pX = 0, pY = 0; // pixelX, pixelY // Legacy if( 'detail' in event ) { sY = event.detail; } if( 'wheelDelta' in event ) { sY = -event.wheelDelta / 120; } if( 'wheelDeltaY' in event ) { sY = -event.wheelDeltaY / 120; } if( 'wheelDeltaX' in event ) { sX = -event.wheelDeltaX / 120; } // side scrolling on FF with DOMMouseScroll if( 'axis' in event && event.axis === event.HORIZONTAL_AXIS ) { sX = sY; sY = 0; } pX = sX * PIXEL_STEP; pY = sY * PIXEL_STEP; if( 'deltaY' in event ) { pY = event.deltaY; } if( 'deltaX' in event ) { pX = event.deltaX; } if( (pX || pY) && event.deltaMode ) { if( event.deltaMode === 1 ) { // delta in LINE units pX *= LINE_HEIGHT; pY *= LINE_HEIGHT; } else { // delta in PAGE units pX *= PAGE_HEIGHT; pY *= PAGE_HEIGHT; } } // Fall-back if spin cannot be determined if( pX && !sX ) { sX = (pX < 1) ? -1 : 1; } if( pY && !sY ) { sY = (pY < 1) ? -1 : 1; } return { spinX: sX, spinY: sY, pixelX: pX, pixelY: pY }; } if (s.params.mousewheelControl) { /** * The best combination if you prefer spinX + spinY normalization. It favors * the older DOMMouseScroll for Firefox, as FF does not include wheelDelta with * 'wheel' event, making spin speed determination impossible. */ s.mousewheel.event = (navigator.userAgent.indexOf('firefox') > -1) ? 'DOMMouseScroll' : isEventSupported() ? 'wheel' : 'mousewheel'; } function handleMousewheel(e) { if (e.originalEvent) e = e.originalEvent; //jquery fix var delta = 0; var rtlFactor = s.rtl ? -1 : 1; var data = normalizeWheel( e ); if (s.params.mousewheelForceToAxis) { if (s.isHorizontal()) { if (Math.abs(data.pixelX) > Math.abs(data.pixelY)) delta = data.pixelX * rtlFactor; else return; } else { if (Math.abs(data.pixelY) > Math.abs(data.pixelX)) delta = data.pixelY; else return; } } else { delta = Math.abs(data.pixelX) > Math.abs(data.pixelY) ? - data.pixelX * rtlFactor : - data.pixelY; } if (delta === 0) return; if (s.params.mousewheelInvert) delta = -delta; if (!s.params.freeMode) { if ((new window.Date()).getTime() - s.mousewheel.lastScrollTime > 60) { if (delta < 0) { if ((!s.isEnd || s.params.loop) && !s.animating) { s.slideNext(); s.emit('onScroll', s, e); } else if (s.params.mousewheelReleaseOnEdges) return true; } else { if ((!s.isBeginning || s.params.loop) && !s.animating) { s.slidePrev(); s.emit('onScroll', s, e); } else if (s.params.mousewheelReleaseOnEdges) return true; } } s.mousewheel.lastScrollTime = (new window.Date()).getTime(); } else { //Freemode or scrollContainer: var position = s.getWrapperTranslate() + delta * s.params.mousewheelSensitivity; var wasBeginning = s.isBeginning, wasEnd = s.isEnd; if (position >= s.minTranslate()) position = s.minTranslate(); if (position <= s.maxTranslate()) position = s.maxTranslate(); s.setWrapperTransition(0); s.setWrapperTranslate(position); s.updateProgress(); s.updateActiveIndex(); if (!wasBeginning && s.isBeginning || !wasEnd && s.isEnd) { s.updateClasses(); } if (s.params.freeModeSticky) { clearTimeout(s.mousewheel.timeout); s.mousewheel.timeout = setTimeout(function () { s.slideReset(); }, 300); } else { if (s.params.lazyLoading && s.lazy) { s.lazy.load(); } } // Emit event s.emit('onScroll', s, e); // Stop autoplay if (s.params.autoplay && s.params.autoplayDisableOnInteraction) s.stopAutoplay(); // Return page scroll on edge positions if (position === 0 || position === s.maxTranslate()) return; } if (e.preventDefault) e.preventDefault(); else e.returnValue = false; return false; } s.disableMousewheelControl = function () { if (!s.mousewheel.event) return false; var target = s.container; if (s.params.mousewheelEventsTarged !== 'container') { target = $(s.params.mousewheelEventsTarged); } target.off(s.mousewheel.event, handleMousewheel); s.params.mousewheelControl = false; return true; }; s.enableMousewheelControl = function () { if (!s.mousewheel.event) return false; var target = s.container; if (s.params.mousewheelEventsTarged !== 'container') { target = $(s.params.mousewheelEventsTarged); } target.on(s.mousewheel.event, handleMousewheel); s.params.mousewheelControl = true; return true; }; /*========================= Parallax ===========================*/ function setParallaxTransform(el, progress) { el = $(el); var p, pX, pY; var rtlFactor = s.rtl ? -1 : 1; p = el.attr('data-swiper-parallax') || '0'; pX = el.attr('data-swiper-parallax-x'); pY = el.attr('data-swiper-parallax-y'); if (pX || pY) { pX = pX || '0'; pY = pY || '0'; } else { if (s.isHorizontal()) { pX = p; pY = '0'; } else { pY = p; pX = '0'; } } if ((pX).indexOf('%') >= 0) { pX = parseInt(pX, 10) * progress * rtlFactor + '%'; } else { pX = pX * progress * rtlFactor + 'px' ; } if ((pY).indexOf('%') >= 0) { pY = parseInt(pY, 10) * progress + '%'; } else { pY = pY * progress + 'px' ; } el.transform('translate3d(' + pX + ', ' + pY + ',0px)'); } s.parallax = { setTranslate: function () { s.container.children('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y]').each(function(){ setParallaxTransform(this, s.progress); }); s.slides.each(function () { var slide = $(this); slide.find('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y]').each(function () { var progress = Math.min(Math.max(slide[0].progress, -1), 1); setParallaxTransform(this, progress); }); }); }, setTransition: function (duration) { if (typeof duration === 'undefined') duration = s.params.speed; s.container.find('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y]').each(function(){ var el = $(this); var parallaxDuration = parseInt(el.attr('data-swiper-parallax-duration'), 10) || duration; if (duration === 0) parallaxDuration = 0; el.transition(parallaxDuration); }); } }; /*========================= Zoom ===========================*/ s.zoom = { // "Global" Props scale: 1, currentScale: 1, isScaling: false, gesture: { slide: undefined, slideWidth: undefined, slideHeight: undefined, image: undefined, imageWrap: undefined, zoomMax: s.params.zoomMax }, image: { isTouched: undefined, isMoved: undefined, currentX: undefined, currentY: undefined, minX: undefined, minY: undefined, maxX: undefined, maxY: undefined, width: undefined, height: undefined, startX: undefined, startY: undefined, touchesStart: {}, touchesCurrent: {} }, velocity: { x: undefined, y: undefined, prevPositionX: undefined, prevPositionY: undefined, prevTime: undefined }, // Calc Scale From Multi-touches getDistanceBetweenTouches: function (e) { if (e.targetTouches.length < 2) return 1; var x1 = e.targetTouches[0].pageX, y1 = e.targetTouches[0].pageY, x2 = e.targetTouches[1].pageX, y2 = e.targetTouches[1].pageY; var distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); return distance; }, // Events onGestureStart: function (e) { var z = s.zoom; if (!s.support.gestures) { if (e.type !== 'touchstart' || e.type === 'touchstart' && e.targetTouches.length < 2) { return; } z.gesture.scaleStart = z.getDistanceBetweenTouches(e); } if (!z.gesture.slide || !z.gesture.slide.length) { z.gesture.slide = $(this); if (z.gesture.slide.length === 0) z.gesture.slide = s.slides.eq(s.activeIndex); z.gesture.image = z.gesture.slide.find('img, svg, canvas'); z.gesture.imageWrap = z.gesture.image.parent('.' + s.params.zoomContainerClass); z.gesture.zoomMax = z.gesture.imageWrap.attr('data-swiper-zoom') || s.params.zoomMax ; if (z.gesture.imageWrap.length === 0) { z.gesture.image = undefined; return; } } z.gesture.image.transition(0); z.isScaling = true; }, onGestureChange: function (e) { var z = s.zoom; if (!s.support.gestures) { if (e.type !== 'touchmove' || e.type === 'touchmove' && e.targetTouches.length < 2) { return; } z.gesture.scaleMove = z.getDistanceBetweenTouches(e); } if (!z.gesture.image || z.gesture.image.length === 0) return; if (s.support.gestures) { z.scale = e.scale * z.currentScale; } else { z.scale = (z.gesture.scaleMove / z.gesture.scaleStart) * z.currentScale; } if (z.scale > z.gesture.zoomMax) { z.scale = z.gesture.zoomMax - 1 + Math.pow((z.scale - z.gesture.zoomMax + 1), 0.5); } if (z.scale < s.params.zoomMin) { z.scale = s.params.zoomMin + 1 - Math.pow((s.params.zoomMin - z.scale + 1), 0.5); } z.gesture.image.transform('translate3d(0,0,0) scale(' + z.scale + ')'); }, onGestureEnd: function (e) { var z = s.zoom; if (!s.support.gestures) { if (e.type !== 'touchend' || e.type === 'touchend' && e.changedTouches.length < 2) { return; } } if (!z.gesture.image || z.gesture.image.length === 0) return; z.scale = Math.max(Math.min(z.scale, z.gesture.zoomMax), s.params.zoomMin); z.gesture.image.transition(s.params.speed).transform('translate3d(0,0,0) scale(' + z.scale + ')'); z.currentScale = z.scale; z.isScaling = false; if (z.scale === 1) z.gesture.slide = undefined; }, onTouchStart: function (s, e) { var z = s.zoom; if (!z.gesture.image || z.gesture.image.length === 0) return; if (z.image.isTouched) return; if (s.device.os === 'android') e.preventDefault(); z.image.isTouched = true; z.image.touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; z.image.touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; }, onTouchMove: function (e) { var z = s.zoom; if (!z.gesture.image || z.gesture.image.length === 0) return; s.allowClick = false; if (!z.image.isTouched || !z.gesture.slide) return; if (!z.image.isMoved) { z.image.width = z.gesture.image[0].offsetWidth; z.image.height = z.gesture.image[0].offsetHeight; z.image.startX = s.getTranslate(z.gesture.imageWrap[0], 'x') || 0; z.image.startY = s.getTranslate(z.gesture.imageWrap[0], 'y') || 0; z.gesture.slideWidth = z.gesture.slide[0].offsetWidth; z.gesture.slideHeight = z.gesture.slide[0].offsetHeight; z.gesture.imageWrap.transition(0); if (s.rtl) z.image.startX = -z.image.startX; if (s.rtl) z.image.startY = -z.image.startY; } // Define if we need image drag var scaledWidth = z.image.width * z.scale; var scaledHeight = z.image.height * z.scale; if (scaledWidth < z.gesture.slideWidth && scaledHeight < z.gesture.slideHeight) return; z.image.minX = Math.min((z.gesture.slideWidth / 2 - scaledWidth / 2), 0); z.image.maxX = -z.image.minX; z.image.minY = Math.min((z.gesture.slideHeight / 2 - scaledHeight / 2), 0); z.image.maxY = -z.image.minY; z.image.touchesCurrent.x = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; z.image.touchesCurrent.y = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; if (!z.image.isMoved && !z.isScaling) { if (s.isHorizontal() && (Math.floor(z.image.minX) === Math.floor(z.image.startX) && z.image.touchesCurrent.x < z.image.touchesStart.x) || (Math.floor(z.image.maxX) === Math.floor(z.image.startX) && z.image.touchesCurrent.x > z.image.touchesStart.x) ) { z.image.isTouched = false; return; } else if (!s.isHorizontal() && (Math.floor(z.image.minY) === Math.floor(z.image.startY) && z.image.touchesCurrent.y < z.image.touchesStart.y) || (Math.floor(z.image.maxY) === Math.floor(z.image.startY) && z.image.touchesCurrent.y > z.image.touchesStart.y) ) { z.image.isTouched = false; return; } } e.preventDefault(); e.stopPropagation(); z.image.isMoved = true; z.image.currentX = z.image.touchesCurrent.x - z.image.touchesStart.x + z.image.startX; z.image.currentY = z.image.touchesCurrent.y - z.image.touchesStart.y + z.image.startY; if (z.image.currentX < z.image.minX) { z.image.currentX = z.image.minX + 1 - Math.pow((z.image.minX - z.image.currentX + 1), 0.8); } if (z.image.currentX > z.image.maxX) { z.image.currentX = z.image.maxX - 1 + Math.pow((z.image.currentX - z.image.maxX + 1), 0.8); } if (z.image.currentY < z.image.minY) { z.image.currentY = z.image.minY + 1 - Math.pow((z.image.minY - z.image.currentY + 1), 0.8); } if (z.image.currentY > z.image.maxY) { z.image.currentY = z.image.maxY - 1 + Math.pow((z.image.currentY - z.image.maxY + 1), 0.8); } //Velocity if (!z.velocity.prevPositionX) z.velocity.prevPositionX = z.image.touchesCurrent.x; if (!z.velocity.prevPositionY) z.velocity.prevPositionY = z.image.touchesCurrent.y; if (!z.velocity.prevTime) z.velocity.prevTime = Date.now(); z.velocity.x = (z.image.touchesCurrent.x - z.velocity.prevPositionX) / (Date.now() - z.velocity.prevTime) / 2; z.velocity.y = (z.image.touchesCurrent.y - z.velocity.prevPositionY) / (Date.now() - z.velocity.prevTime) / 2; if (Math.abs(z.image.touchesCurrent.x - z.velocity.prevPositionX) < 2) z.velocity.x = 0; if (Math.abs(z.image.touchesCurrent.y - z.velocity.prevPositionY) < 2) z.velocity.y = 0; z.velocity.prevPositionX = z.image.touchesCurrent.x; z.velocity.prevPositionY = z.image.touchesCurrent.y; z.velocity.prevTime = Date.now(); z.gesture.imageWrap.transform('translate3d(' + z.image.currentX + 'px, ' + z.image.currentY + 'px,0)'); }, onTouchEnd: function (s, e) { var z = s.zoom; if (!z.gesture.image || z.gesture.image.length === 0) return; if (!z.image.isTouched || !z.image.isMoved) { z.image.isTouched = false; z.image.isMoved = false; return; } z.image.isTouched = false; z.image.isMoved = false; var momentumDurationX = 300; var momentumDurationY = 300; var momentumDistanceX = z.velocity.x * momentumDurationX; var newPositionX = z.image.currentX + momentumDistanceX; var momentumDistanceY = z.velocity.y * momentumDurationY; var newPositionY = z.image.currentY + momentumDistanceY; //Fix duration if (z.velocity.x !== 0) momentumDurationX = Math.abs((newPositionX - z.image.currentX) / z.velocity.x); if (z.velocity.y !== 0) momentumDurationY = Math.abs((newPositionY - z.image.currentY) / z.velocity.y); var momentumDuration = Math.max(momentumDurationX, momentumDurationY); z.image.currentX = newPositionX; z.image.currentY = newPositionY; // Define if we need image drag var scaledWidth = z.image.width * z.scale; var scaledHeight = z.image.height * z.scale; z.image.minX = Math.min((z.gesture.slideWidth / 2 - scaledWidth / 2), 0); z.image.maxX = -z.image.minX; z.image.minY = Math.min((z.gesture.slideHeight / 2 - scaledHeight / 2), 0); z.image.maxY = -z.image.minY; z.image.currentX = Math.max(Math.min(z.image.currentX, z.image.maxX), z.image.minX); z.image.currentY = Math.max(Math.min(z.image.currentY, z.image.maxY), z.image.minY); z.gesture.imageWrap.transition(momentumDuration).transform('translate3d(' + z.image.currentX + 'px, ' + z.image.currentY + 'px,0)'); }, onTransitionEnd: function (s) { var z = s.zoom; if (z.gesture.slide && s.previousIndex !== s.activeIndex) { z.gesture.image.transform('translate3d(0,0,0) scale(1)'); z.gesture.imageWrap.transform('translate3d(0,0,0)'); z.gesture.slide = z.gesture.image = z.gesture.imageWrap = undefined; z.scale = z.currentScale = 1; } }, // Toggle Zoom toggleZoom: function (s, e) { var z = s.zoom; if (!z.gesture.slide) { z.gesture.slide = s.clickedSlide ? $(s.clickedSlide) : s.slides.eq(s.activeIndex); z.gesture.image = z.gesture.slide.find('img, svg, canvas'); z.gesture.imageWrap = z.gesture.image.parent('.' + s.params.zoomContainerClass); } if (!z.gesture.image || z.gesture.image.length === 0) return; var touchX, touchY, offsetX, offsetY, diffX, diffY, translateX, translateY, imageWidth, imageHeight, scaledWidth, scaledHeight, translateMinX, translateMinY, translateMaxX, translateMaxY, slideWidth, slideHeight; if (typeof z.image.touchesStart.x === 'undefined' && e) { touchX = e.type === 'touchend' ? e.changedTouches[0].pageX : e.pageX; touchY = e.type === 'touchend' ? e.changedTouches[0].pageY : e.pageY; } else { touchX = z.image.touchesStart.x; touchY = z.image.touchesStart.y; } if (z.scale && z.scale !== 1) { // Zoom Out z.scale = z.currentScale = 1; z.gesture.imageWrap.transition(300).transform('translate3d(0,0,0)'); z.gesture.image.transition(300).transform('translate3d(0,0,0) scale(1)'); z.gesture.slide = undefined; } else { // Zoom In z.scale = z.currentScale = z.gesture.imageWrap.attr('data-swiper-zoom') || s.params.zoomMax; if (e) { slideWidth = z.gesture.slide[0].offsetWidth; slideHeight = z.gesture.slide[0].offsetHeight; offsetX = z.gesture.slide.offset().left; offsetY = z.gesture.slide.offset().top; diffX = offsetX + slideWidth/2 - touchX; diffY = offsetY + slideHeight/2 - touchY; imageWidth = z.gesture.image[0].offsetWidth; imageHeight = z.gesture.image[0].offsetHeight; scaledWidth = imageWidth * z.scale; scaledHeight = imageHeight * z.scale; translateMinX = Math.min((slideWidth / 2 - scaledWidth / 2), 0); translateMinY = Math.min((slideHeight / 2 - scaledHeight / 2), 0); translateMaxX = -translateMinX; translateMaxY = -translateMinY; translateX = diffX * z.scale; translateY = diffY * z.scale; if (translateX < translateMinX) { translateX = translateMinX; } if (translateX > translateMaxX) { translateX = translateMaxX; } if (translateY < translateMinY) { translateY = translateMinY; } if (translateY > translateMaxY) { translateY = translateMaxY; } } else { translateX = 0; translateY = 0; } z.gesture.imageWrap.transition(300).transform('translate3d(' + translateX + 'px, ' + translateY + 'px,0)'); z.gesture.image.transition(300).transform('translate3d(0,0,0) scale(' + z.scale + ')'); } }, // Attach/Detach Events attachEvents: function (detach) { var action = detach ? 'off' : 'on'; if (s.params.zoom) { var target = s.slides; var passiveListener = s.touchEvents.start === 'touchstart' && s.support.passiveListener && s.params.passiveListeners ? {passive: true, capture: false} : false; // Scale image if (s.support.gestures) { s.slides[action]('gesturestart', s.zoom.onGestureStart, passiveListener); s.slides[action]('gesturechange', s.zoom.onGestureChange, passiveListener); s.slides[action]('gestureend', s.zoom.onGestureEnd, passiveListener); } else if (s.touchEvents.start === 'touchstart') { s.slides[action](s.touchEvents.start, s.zoom.onGestureStart, passiveListener); s.slides[action](s.touchEvents.move, s.zoom.onGestureChange, passiveListener); s.slides[action](s.touchEvents.end, s.zoom.onGestureEnd, passiveListener); } // Move image s[action]('touchStart', s.zoom.onTouchStart); s.slides.each(function (index, slide){ if ($(slide).find('.' + s.params.zoomContainerClass).length > 0) { $(slide)[action](s.touchEvents.move, s.zoom.onTouchMove); } }); s[action]('touchEnd', s.zoom.onTouchEnd); // Scale Out s[action]('transitionEnd', s.zoom.onTransitionEnd); if (s.params.zoomToggle) { s.on('doubleTap', s.zoom.toggleZoom); } } }, init: function () { s.zoom.attachEvents(); }, destroy: function () { s.zoom.attachEvents(true); } }; /*========================= Plugins API. Collect all and init all plugins ===========================*/ s._plugins = []; for (var plugin in s.plugins) { var p = s.plugins[plugin](s, s.params[plugin]); if (p) s._plugins.push(p); } // Method to call all plugins event/method s.callPlugins = function (eventName) { for (var i = 0; i < s._plugins.length; i++) { if (eventName in s._plugins[i]) { s._plugins[i][eventName](arguments[1], arguments[2], arguments[3], arguments[4], arguments[5]); } } }; /*========================= Events/Callbacks/Plugins Emitter ===========================*/ function normalizeEventName (eventName) { if (eventName.indexOf('on') !== 0) { if (eventName[0] !== eventName[0].toUpperCase()) { eventName = 'on' + eventName[0].toUpperCase() + eventName.substring(1); } else { eventName = 'on' + eventName; } } return eventName; } s.emitterEventListeners = { }; s.emit = function (eventName) { // Trigger callbacks if (s.params[eventName]) { s.params[eventName](arguments[1], arguments[2], arguments[3], arguments[4], arguments[5]); } var i; // Trigger events if (s.emitterEventListeners[eventName]) { for (i = 0; i < s.emitterEventListeners[eventName].length; i++) { s.emitterEventListeners[eventName][i](arguments[1], arguments[2], arguments[3], arguments[4], arguments[5]); } } // Trigger plugins if (s.callPlugins) s.callPlugins(eventName, arguments[1], arguments[2], arguments[3], arguments[4], arguments[5]); }; s.on = function (eventName, handler) { eventName = normalizeEventName(eventName); if (!s.emitterEventListeners[eventName]) s.emitterEventListeners[eventName] = []; s.emitterEventListeners[eventName].push(handler); return s; }; s.off = function (eventName, handler) { var i; eventName = normalizeEventName(eventName); if (typeof handler === 'undefined') { // Remove all handlers for such event s.emitterEventListeners[eventName] = []; return s; } if (!s.emitterEventListeners[eventName] || s.emitterEventListeners[eventName].length === 0) return; for (i = 0; i < s.emitterEventListeners[eventName].length; i++) { if(s.emitterEventListeners[eventName][i] === handler) s.emitterEventListeners[eventName].splice(i, 1); } return s; }; s.once = function (eventName, handler) { eventName = normalizeEventName(eventName); var _handler = function () { handler(arguments[0], arguments[1], arguments[2], arguments[3], arguments[4]); s.off(eventName, _handler); }; s.on(eventName, _handler); return s; }; // Accessibility tools s.a11y = { makeFocusable: function ($el) { $el.attr('tabIndex', '0'); return $el; }, addRole: function ($el, role) { $el.attr('role', role); return $el; }, addLabel: function ($el, label) { $el.attr('aria-label', label); return $el; }, disable: function ($el) { $el.attr('aria-disabled', true); return $el; }, enable: function ($el) { $el.attr('aria-disabled', false); return $el; }, onEnterKey: function (event) { if (event.keyCode !== 13) return; if ($(event.target).is(s.params.nextButton)) { s.onClickNext(event); if (s.isEnd) { s.a11y.notify(s.params.lastSlideMessage); } else { s.a11y.notify(s.params.nextSlideMessage); } } else if ($(event.target).is(s.params.prevButton)) { s.onClickPrev(event); if (s.isBeginning) { s.a11y.notify(s.params.firstSlideMessage); } else { s.a11y.notify(s.params.prevSlideMessage); } } if ($(event.target).is('.' + s.params.bulletClass)) { $(event.target)[0].click(); } }, liveRegion: $(''), notify: function (message) { var notification = s.a11y.liveRegion; if (notification.length === 0) return; notification.html(''); notification.html(message); }, init: function () { // Setup accessibility if (s.params.nextButton && s.nextButton && s.nextButton.length > 0) { s.a11y.makeFocusable(s.nextButton); s.a11y.addRole(s.nextButton, 'button'); s.a11y.addLabel(s.nextButton, s.params.nextSlideMessage); } if (s.params.prevButton && s.prevButton && s.prevButton.length > 0) { s.a11y.makeFocusable(s.prevButton); s.a11y.addRole(s.prevButton, 'button'); s.a11y.addLabel(s.prevButton, s.params.prevSlideMessage); } $(s.container).append(s.a11y.liveRegion); }, initPagination: function () { if (s.params.pagination && s.params.paginationClickable && s.bullets && s.bullets.length) { s.bullets.each(function () { var bullet = $(this); s.a11y.makeFocusable(bullet); s.a11y.addRole(bullet, 'button'); s.a11y.addLabel(bullet, s.params.paginationBulletMessage.replace(/{{index}}/, bullet.index() + 1)); }); } }, destroy: function () { if (s.a11y.liveRegion && s.a11y.liveRegion.length > 0) s.a11y.liveRegion.remove(); } }; /*========================= Init/Destroy ===========================*/ s.init = function () { if (s.params.loop) s.createLoop(); s.updateContainerSize(); s.updateSlidesSize(); s.updatePagination(); if (s.params.scrollbar && s.scrollbar) { s.scrollbar.set(); if (s.params.scrollbarDraggable) { s.scrollbar.enableDraggable(); } } if (s.params.effect !== 'slide' && s.effects[s.params.effect]) { if (!s.params.loop) s.updateProgress(); s.effects[s.params.effect].setTranslate(); } if (s.params.loop) { s.slideTo(s.params.initialSlide + s.loopedSlides, 0, s.params.runCallbacksOnInit); } else { s.slideTo(s.params.initialSlide, 0, s.params.runCallbacksOnInit); if (s.params.initialSlide === 0) { if (s.parallax && s.params.parallax) s.parallax.setTranslate(); if (s.lazy && s.params.lazyLoading) { s.lazy.load(); s.lazy.initialImageLoaded = true; } } } s.attachEvents(); if (s.params.observer && s.support.observer) { s.initObservers(); } if (s.params.preloadImages && !s.params.lazyLoading) { s.preloadImages(); } if (s.params.zoom && s.zoom) { s.zoom.init(); } if (s.params.autoplay) { s.startAutoplay(); } if (s.params.keyboardControl) { if (s.enableKeyboardControl) s.enableKeyboardControl(); } if (s.params.mousewheelControl) { if (s.enableMousewheelControl) s.enableMousewheelControl(); } // Deprecated hashnavReplaceState changed to replaceState for use in hashnav and history if (s.params.hashnavReplaceState) { s.params.replaceState = s.params.hashnavReplaceState; } if (s.params.history) { if (s.history) s.history.init(); } if (s.params.hashnav) { if (s.hashnav) s.hashnav.init(); } if (s.params.a11y && s.a11y) s.a11y.init(); s.emit('onInit', s); }; // Cleanup dynamic styles s.cleanupStyles = function () { // Container s.container.removeClass(s.classNames.join(' ')).removeAttr('style'); // Wrapper s.wrapper.removeAttr('style'); // Slides if (s.slides && s.slides.length) { s.slides .removeClass([ s.params.slideVisibleClass, s.params.slideActiveClass, s.params.slideNextClass, s.params.slidePrevClass ].join(' ')) .removeAttr('style') .removeAttr('data-swiper-column') .removeAttr('data-swiper-row'); } // Pagination/Bullets if (s.paginationContainer && s.paginationContainer.length) { s.paginationContainer.removeClass(s.params.paginationHiddenClass); } if (s.bullets && s.bullets.length) { s.bullets.removeClass(s.params.bulletActiveClass); } // Buttons if (s.params.prevButton) $(s.params.prevButton).removeClass(s.params.buttonDisabledClass); if (s.params.nextButton) $(s.params.nextButton).removeClass(s.params.buttonDisabledClass); // Scrollbar if (s.params.scrollbar && s.scrollbar) { if (s.scrollbar.track && s.scrollbar.track.length) s.scrollbar.track.removeAttr('style'); if (s.scrollbar.drag && s.scrollbar.drag.length) s.scrollbar.drag.removeAttr('style'); } }; // Destroy s.destroy = function (deleteInstance, cleanupStyles) { // Detach evebts s.detachEvents(); // Stop autoplay s.stopAutoplay(); // Disable draggable if (s.params.scrollbar && s.scrollbar) { if (s.params.scrollbarDraggable) { s.scrollbar.disableDraggable(); } } // Destroy loop if (s.params.loop) { s.destroyLoop(); } // Cleanup styles if (cleanupStyles) { s.cleanupStyles(); } // Disconnect observer s.disconnectObservers(); // Destroy zoom if (s.params.zoom && s.zoom) { s.zoom.destroy(); } // Disable keyboard/mousewheel if (s.params.keyboardControl) { if (s.disableKeyboardControl) s.disableKeyboardControl(); } if (s.params.mousewheelControl) { if (s.disableMousewheelControl) s.disableMousewheelControl(); } // Disable a11y if (s.params.a11y && s.a11y) s.a11y.destroy(); // Delete history popstate if (s.params.history && !s.params.replaceState) { window.removeEventListener('popstate', s.history.setHistoryPopState); } if (s.params.hashnav && s.hashnav) { s.hashnav.destroy(); } // Destroy callback s.emit('onDestroy'); // Delete instance if (deleteInstance !== false) s = null; }; s.init(); // Return swiper instance return s; }; /*================================================== Prototype ====================================================*/ Swiper.prototype = { isSafari: (function () { var ua = window.navigator.userAgent.toLowerCase(); return (ua.indexOf('safari') >= 0 && ua.indexOf('chrome') < 0 && ua.indexOf('android') < 0); })(), isUiWebView: /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(window.navigator.userAgent), isArray: function (arr) { return Object.prototype.toString.apply(arr) === '[object Array]'; }, /*================================================== Browser ====================================================*/ browser: { ie: window.navigator.pointerEnabled || window.navigator.msPointerEnabled, ieTouch: (window.navigator.msPointerEnabled && window.navigator.msMaxTouchPoints > 1) || (window.navigator.pointerEnabled && window.navigator.maxTouchPoints > 1), lteIE9: (function() { // create temporary DIV var div = document.createElement('div'); // add content to tmp DIV which is wrapped into the IE HTML conditional statement div.innerHTML = ''; // return true / false value based on what will browser render return div.getElementsByTagName('i').length === 1; })() }, /*================================================== Devices ====================================================*/ device: (function () { var ua = window.navigator.userAgent; var android = ua.match(/(Android);?[\s\/]+([\d.]+)?/); var ipad = ua.match(/(iPad).*OS\s([\d_]+)/); var ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/); var iphone = !ipad && ua.match(/(iPhone\sOS|iOS)\s([\d_]+)/); return { ios: ipad || iphone || ipod, android: android }; })(), /*================================================== Feature Detection ====================================================*/ support: { touch : (window.Modernizr && Modernizr.touch === true) || (function () { return !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch); })(), transforms3d : (window.Modernizr && Modernizr.csstransforms3d === true) || (function () { var div = document.createElement('div').style; return ('webkitPerspective' in div || 'MozPerspective' in div || 'OPerspective' in div || 'MsPerspective' in div || 'perspective' in div); })(), flexbox: (function () { var div = document.createElement('div').style; var styles = ('alignItems webkitAlignItems webkitBoxAlign msFlexAlign mozBoxAlign webkitFlexDirection msFlexDirection mozBoxDirection mozBoxOrient webkitBoxDirection webkitBoxOrient').split(' '); for (var i = 0; i < styles.length; i++) { if (styles[i] in div) return true; } })(), observer: (function () { return ('MutationObserver' in window || 'WebkitMutationObserver' in window); })(), passiveListener: (function () { var supportsPassive = false; try { var opts = Object.defineProperty({}, 'passive', { get: function() { supportsPassive = true; } }); window.addEventListener('testPassiveListener', null, opts); } catch (e) {} return supportsPassive; })(), gestures: (function () { return 'ongesturestart' in window; })() }, /*================================================== Plugins ====================================================*/ plugins: {} }; /*=========================== Dom7 Library ===========================*/ var Dom7 = (function () { var Dom7 = function (arr) { var _this = this, i = 0; // Create array-like object for (i = 0; i < arr.length; i++) { _this[i] = arr[i]; } _this.length = arr.length; // Return collection with methods return this; }; var $ = function (selector, context) { var arr = [], i = 0; if (selector && !context) { if (selector instanceof Dom7) { return selector; } } if (selector) { // String if (typeof selector === 'string') { var els, tempParent, html = selector.trim(); if (html.indexOf('<') >= 0 && html.indexOf('>') >= 0) { var toCreate = 'div'; if (html.indexOf('Tab
Tabs are a horizontal region of buttons or links that allow for a consistent navigation experience between screens. It can contain any combination of text and icons, and is a popular method for enabling mobile navigation.
Dependency:
base and button.
The dependencies will be installed together with this module
To use this component you need install with the command:
mobileui install tab
Your tab need have id and for you open tab, just call function openTab('ID_YOUR_TAB'). For init you tab opne you need add class `active` in your button by tab and in your content of tab.
See this small example:
You can put your tab in footer and using just icon
See this good example using another components MobileUI :)
================================================ FILE: tab/script.js ================================================ window.openTab = function(t){ var button = event.target; while (!button.parentNode.classList.contains('tab')) { if(button.nodeName == 'BODY') { console.error('The component tab not found, please check your code.'); return false; } button = button.parentNode } var tabContent = document.getElementById(t).parentNode.getElementsByClassName('tab-content'); var buttonActived = button.parentNode.getElementsByClassName('active'); for (var i = 0; i < tabContent.length; i++) { tabContent[i].setAttribute('class',tabContent[i].getAttribute('class').replace('active','')); } for (var i = 0; i < buttonActived.length; i++) { buttonActived[i].setAttribute('class',buttonActived[i].getAttribute('class').replace('active','')); } button.setAttribute('class', button.getAttribute('class') + ' active'); document.getElementById(t).setAttribute('class', document.getElementById(t).getAttribute('class') + ' active'); } ================================================ FILE: tab/style.css ================================================ /*Define a new tab.*/ .tab { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } /*Define a area content by tab*/ .tab-content { display: none; } /*Define that tab and ab-content is open.*/ .tab-content.active { display: block; } .tab button { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; font-size: 13px !important; text-transform: uppercase; opacity: 0.6; margin: 0; } .footer.tab button.icon { margin-top: 0; } .header.tab.shadow { box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); } .platform-ios .tab button { text-transform: none; } .tab button.active { opacity: 1; } .tab button.icon { font-size: 14px; line-height: 16px; } .tab button::before { display: block; font-size: 25px; } .tab button.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: #fff; } /*Create a badge in tab.*/ .tab button .badge { width: 20px; height: 20px; margin-left: 10px; text-align: center; font-size: 14px; font-weight: bold; border-radius: 50%; margin-top: 10px; position: absolute; line-height: 18px; padding-top: 1px; } .tab.footer button.active::after { top: 0; } .header.tab.footer.shadow { box-shadow: -2px -2px 3px rgba(0, 0, 0, 0.2); } .platform-ios .tab button.active::after { display: none; } ================================================ FILE: timeline/component.json ================================================ { "name":"timeline", "author": "gustavoquinalha", "dependencies": ["base", "grid"] } ================================================ FILE: timeline/index.html ================================================Timeline
To use this component you need install with the command:
mobileui install timeline================================================ FILE: timeline/style.css ================================================ /*Define a timeline component.*/ .timeline { font-size: 14px; padding: 2px; } .timeline .marker { position: relative; } .timeline .marker::before { background: rgba(0,0,0,0.3); content: ""; height: 100%; width: 2px; margin: 0 auto; position: absolute; margin-top: 10px; z-index: 0; left: 18px; } .timeline .row:last-child .marker::before { display: none; } .timeline .icon-circle, .timeline .icon-circle-small, .timeline .icon-circle-big { margin: 0 auto; margin-top: 10px; position: absolute; margin-left: 7px; } .timeline .icon-circle i::before, .timeline .icon-circle-small i::before, .timeline .icon-circle-big i::before { margin-top: 4px; } .timeline .avatar-group { -webkit-transform: translateX(10px); transform: translateX(10px); } .timeline .avatar-photo { background: #eaeaea; width: 30px; height: 30px; overflow: hidden; text-align: center; border: 1px solid #d7d2d2 } .timeline .avatar-photo small { margin-top: 100px; } .timeline .circle-more { background: #eaeaea; width: 30px; height: 30px; overflow: hidden; text-align: center; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #bdbbbb; border: 1px solid #d7d2d2; font-size: 12px; } ================================================ FILE: toast/component.json ================================================ { "name":"toast", "author": "lucasssv", "dependencies": [ "base" ] } ================================================ FILE: toast/index.html ================================================
Toast
A toast provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and interactive. Toasts automatically disappear after a timeout.
Dependency:
base.
The dependencies will be installed together with this module
To use this component you need install with the command:
mobileui install toast
To use, you need to call the function openToast('YOUR MESSAGE') or openToast(objectCustomized).
See this small example:
================================================ FILE: toast/script.js ================================================ window.openToast = function (config) { var defaultConfig = { class: 'black radius padding shadow', duration: 2000, position: 'bottom', onclick: window.closeToast } if (typeof config === 'string') { defaultConfig.message = config } if (typeof config === 'object' && config.message) { defaultConfig.message = config.message } if (typeof config === 'object' && config.class) { defaultConfig.class = config.class } if (typeof config === 'object' && config.duration) { defaultConfig.duration = config.duration } if (typeof config === 'object' && config.position) { defaultConfig.position = 'toast-' + config.position } if (typeof config === 'object' && config.onclick) { defaultConfig.onclick = config.onclick } var body = document.getElementsByTagName('body')[0] if (event && event.target && event.target.parentNode && event.target.parentNode.className.indexOf('body') >= 0) { body = event.target.parentNode } var toast = document.createElement('div') toast.className = 'toast' toast.classList.add(defaultConfig.position) var spanToast = document.createElement('div') spanToast.className = defaultConfig.class spanToast.innerHTML = defaultConfig.message spanToast.onclick = defaultConfig.onclick toast.appendChild(spanToast) body.appendChild(toast) setTimeout(function() { toast.classList.add('show') }, 100) setTimeout(function() { if(!toast) return false toast.classList.remove('show') setTimeout(function() { if(!toast.parentNode) return false toast.parentNode.removeChild(toast) }, 400) }, defaultConfig.duration) } window.closeToast = function(event) { event.target.parentNode.classList.remove('show') setTimeout(function() { event.target.parentNode.parentNode.removeChild(event.target.parentNode) }, 400) } ================================================ FILE: toast/style.css ================================================ /* Show a Toast message (a little text popup) */ .toast { z-index: 999999; position: absolute; left: 0; padding: 20px; text-align: center; width: 100%; opacity: 0; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } .toast.show { opacity: 1; } .toast.toast-bottom { bottom: 10px; } .toast.toast-top { top: 10px; } .toast.toast-center { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 100%; top: 0; } .toast div { padding: 10px; display: inline-block; } .toast .full { display: block; width: 100%; }