").append( jQuery.parseHTML( responseText ) ).find( selector ) :
// Otherwise use the full result
responseText );
}).complete( callback && function( jqXHR, status ) {
self.each( callback, response || [ jqXHR.responseText, status, jqXHR ] );
});
}
return this;
};
jQuery.expr.filters.animated = function( elem ) {
return jQuery.grep(jQuery.timers, function( fn ) {
return elem === fn.elem;
}).length;
};
var docElem = window.document.documentElement;
/**
* Gets a window from an element
*/
function getWindow( elem ) {
return jQuery.isWindow( elem ) ?
elem :
elem.nodeType === 9 ?
elem.defaultView || elem.parentWindow :
false;
}
jQuery.offset = {
setOffset: function( elem, options, i ) {
var curPosition, curLeft, curCSSTop, curTop, curOffset, curCSSLeft, calculatePosition,
position = jQuery.css( elem, "position" ),
curElem = jQuery( elem ),
props = {};
// set position first, in-case top/left are set even on static elem
if ( position === "static" ) {
elem.style.position = "relative";
}
curOffset = curElem.offset();
curCSSTop = jQuery.css( elem, "top" );
curCSSLeft = jQuery.css( elem, "left" );
calculatePosition = ( position === "absolute" || position === "fixed" ) &&
jQuery.inArray("auto", [ curCSSTop, curCSSLeft ] ) > -1;
// need to be able to calculate position if either top or left is auto and position is either absolute or fixed
if ( calculatePosition ) {
curPosition = curElem.position();
curTop = curPosition.top;
curLeft = curPosition.left;
} else {
curTop = parseFloat( curCSSTop ) || 0;
curLeft = parseFloat( curCSSLeft ) || 0;
}
if ( jQuery.isFunction( options ) ) {
options = options.call( elem, i, curOffset );
}
if ( options.top != null ) {
props.top = ( options.top - curOffset.top ) + curTop;
}
if ( options.left != null ) {
props.left = ( options.left - curOffset.left ) + curLeft;
}
if ( "using" in options ) {
options.using.call( elem, props );
} else {
curElem.css( props );
}
}
};
jQuery.fn.extend({
offset: function( options ) {
if ( arguments.length ) {
return options === undefined ?
this :
this.each(function( i ) {
jQuery.offset.setOffset( this, options, i );
});
}
var docElem, win,
box = { top: 0, left: 0 },
elem = this[ 0 ],
doc = elem && elem.ownerDocument;
if ( !doc ) {
return;
}
docElem = doc.documentElement;
// Make sure it's not a disconnected DOM node
if ( !jQuery.contains( docElem, elem ) ) {
return box;
}
// If we don't have gBCR, just use 0,0 rather than error
// BlackBerry 5, iOS 3 (original iPhone)
if ( typeof elem.getBoundingClientRect !== strundefined ) {
box = elem.getBoundingClientRect();
}
win = getWindow( doc );
return {
top: box.top + ( win.pageYOffset || docElem.scrollTop ) - ( docElem.clientTop || 0 ),
left: box.left + ( win.pageXOffset || docElem.scrollLeft ) - ( docElem.clientLeft || 0 )
};
},
position: function() {
if ( !this[ 0 ] ) {
return;
}
var offsetParent, offset,
parentOffset = { top: 0, left: 0 },
elem = this[ 0 ];
// fixed elements are offset from window (parentOffset = {top:0, left: 0}, because it is its only offset parent
if ( jQuery.css( elem, "position" ) === "fixed" ) {
// we assume that getBoundingClientRect is available when computed position is fixed
offset = elem.getBoundingClientRect();
} else {
// Get *real* offsetParent
offsetParent = this.offsetParent();
// Get correct offsets
offset = this.offset();
if ( !jQuery.nodeName( offsetParent[ 0 ], "html" ) ) {
parentOffset = offsetParent.offset();
}
// Add offsetParent borders
parentOffset.top += jQuery.css( offsetParent[ 0 ], "borderTopWidth", true );
parentOffset.left += jQuery.css( offsetParent[ 0 ], "borderLeftWidth", true );
}
// Subtract parent offsets and 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
return {
top: offset.top - parentOffset.top - jQuery.css( elem, "marginTop", true ),
left: offset.left - parentOffset.left - jQuery.css( elem, "marginLeft", true)
};
},
offsetParent: function() {
return this.map(function() {
var offsetParent = this.offsetParent || docElem;
while ( offsetParent && ( !jQuery.nodeName( offsetParent, "html" ) && jQuery.css( offsetParent, "position" ) === "static" ) ) {
offsetParent = offsetParent.offsetParent;
}
return offsetParent || docElem;
});
}
});
// Create scrollLeft and scrollTop methods
jQuery.each( { scrollLeft: "pageXOffset", scrollTop: "pageYOffset" }, function( method, prop ) {
var top = /Y/.test( prop );
jQuery.fn[ method ] = function( val ) {
return access( this, function( elem, method, val ) {
var win = getWindow( elem );
if ( val === undefined ) {
return win ? (prop in win) ? win[ prop ] :
win.document.documentElement[ method ] :
elem[ method ];
}
if ( win ) {
win.scrollTo(
!top ? val : jQuery( win ).scrollLeft(),
top ? val : jQuery( win ).scrollTop()
);
} else {
elem[ method ] = val;
}
}, method, val, arguments.length, null );
};
});
// Add the top/left cssHooks using jQuery.fn.position
// Webkit bug: https://bugs.webkit.org/show_bug.cgi?id=29084
// getComputedStyle returns percent when specified for top/left/bottom/right
// rather than make the css module depend on the offset module, we just check for it here
jQuery.each( [ "top", "left" ], function( i, prop ) {
jQuery.cssHooks[ prop ] = addGetHookIf( support.pixelPosition,
function( elem, computed ) {
if ( computed ) {
computed = curCSS( elem, prop );
// if curCSS returns percentage, fallback to offset
return rnumnonpx.test( computed ) ?
jQuery( elem ).position()[ prop ] + "px" :
computed;
}
}
);
});
// Create innerHeight, innerWidth, height, width, outerHeight and outerWidth methods
jQuery.each( { Height: "height", Width: "width" }, function( name, type ) {
jQuery.each( { padding: "inner" + name, content: type, "": "outer" + name }, function( defaultExtra, funcName ) {
// margin is only for outerHeight, outerWidth
jQuery.fn[ funcName ] = function( margin, value ) {
var chainable = arguments.length && ( defaultExtra || typeof margin !== "boolean" ),
extra = defaultExtra || ( margin === true || value === true ? "margin" : "border" );
return access( this, function( elem, type, value ) {
var doc;
if ( jQuery.isWindow( elem ) ) {
// As of 5/8/2012 this will yield incorrect results for Mobile Safari, but there
// isn't a whole lot we can do. See pull request at this URL for discussion:
// https://github.com/jquery/jquery/pull/764
return elem.document.documentElement[ "client" + name ];
}
// Get document width or height
if ( elem.nodeType === 9 ) {
doc = elem.documentElement;
// Either scroll[Width/Height] or offset[Width/Height] or client[Width/Height], whichever is greatest
// unfortunately, this causes bug #3838 in IE6/8 only, but there is currently no good, small way to fix it.
return Math.max(
elem.body[ "scroll" + name ], doc[ "scroll" + name ],
elem.body[ "offset" + name ], doc[ "offset" + name ],
doc[ "client" + name ]
);
}
return value === undefined ?
// Get width or height on the element, requesting but not forcing parseFloat
jQuery.css( elem, type, extra ) :
// Set width or height on the element
jQuery.style( elem, type, value, extra );
}, type, chainable ? margin : undefined, chainable, null );
};
});
});
// The number of elements contained in the matched element set
jQuery.fn.size = function() {
return this.length;
};
jQuery.fn.andSelf = jQuery.fn.addBack;
// Register as a named AMD module, since jQuery can be concatenated with other
// files that may use define, but not via a proper concatenation script that
// understands anonymous AMD modules. A named AMD is safest and most robust
// way to register. Lowercase jquery is used because AMD module names are
// derived from file names, and jQuery is normally delivered in a lowercase
// file name. Do this after creating the global so that if an AMD module wants
// to call noConflict to hide this version of jQuery, it will work.
// Note that for maximum portability, libraries that are not jQuery should
// declare themselves as anonymous modules, and avoid setting a global if an
// AMD loader is present. jQuery is a special case. For more information, see
// https://github.com/jrburke/requirejs/wiki/Updating-existing-libraries#wiki-anon
if ( typeof define === "function" && define.amd ) {
define( "jquery", [], function() {
return jQuery;
});
}
var
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$;
jQuery.noConflict = function( deep ) {
if ( window.$ === jQuery ) {
window.$ = _$;
}
if ( deep && window.jQuery === jQuery ) {
window.jQuery = _jQuery;
}
return jQuery;
};
// Expose jQuery and $ identifiers, even in
// AMD (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
// and CommonJS for browser emulators (#13566)
if ( typeof noGlobal === strundefined ) {
window.jQuery = window.$ = jQuery;
}
return jQuery;
}));
================================================
FILE: examples/login/libs/easymob-webim-sdk/json2.js
================================================
/*
json2.js
2014-02-04
Public Domain.
NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
See http://www.JSON.org/js.html
This code should be minified before deployment.
See http://javascript.crockford.com/jsmin.html
USE YOUR OWN COPY. IT IS EXTREMELY UNWISE TO LOAD CODE FROM SERVERS YOU DO
NOT CONTROL.
This file creates a global JSON object containing two methods: stringify
and parse.
JSON.stringify(value, replacer, space)
value any JavaScript value, usually an object or array.
replacer an optional parameter that determines how object
values are stringified for objects. It can be a
function or an array of strings.
space an optional parameter that specifies the indentation
of nested structures. If it is omitted, the text will
be packed without extra whitespace. If it is a number,
it will specify the number of spaces to indent at each
level. If it is a string (such as '\t' or ' '),
it contains the characters used to indent at each level.
This method produces a JSON text from a JavaScript value.
When an object value is found, if the object contains a toJSON
method, its toJSON method will be called and the result will be
stringified. A toJSON method does not serialize: it returns the
value represented by the name/value pair that should be serialized,
or undefined if nothing should be serialized. The toJSON method
will be passed the key associated with the value, and this will be
bound to the value
For example, this would serialize Dates as ISO strings.
Date.prototype.toJSON = function (key) {
function f(n) {
// Format integers to have at least two digits.
return n < 10 ? '0' + n : n;
}
return this.getUTCFullYear() + '-' +
f(this.getUTCMonth() + 1) + '-' +
f(this.getUTCDate()) + 'T' +
f(this.getUTCHours()) + ':' +
f(this.getUTCMinutes()) + ':' +
f(this.getUTCSeconds()) + 'Z';
};
You can provide an optional replacer method. It will be passed the
key and value of each member, with this bound to the containing
object. The value that is returned from your method will be
serialized. If your method returns undefined, then the member will
be excluded from the serialization.
If the replacer parameter is an array of strings, then it will be
used to select the members to be serialized. It filters the results
such that only members with keys listed in the replacer array are
stringified.
Values that do not have JSON representations, such as undefined or
functions, will not be serialized. Such values in objects will be
dropped; in arrays they will be replaced with null. You can use
a replacer function to replace those with JSON values.
JSON.stringify(undefined) returns undefined.
The optional space parameter produces a stringification of the
value that is filled with line breaks and indentation to make it
easier to read.
If the space parameter is a non-empty string, then that string will
be used for indentation. If the space parameter is a number, then
the indentation will be that many spaces.
Example:
text = JSON.stringify(['e', {pluribus: 'unum'}]);
// text is '["e",{"pluribus":"unum"}]'
text = JSON.stringify(['e', {pluribus: 'unum'}], null, '\t');
// text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]'
text = JSON.stringify([new Date()], function (key, value) {
return this[key] instanceof Date ?
'Date(' + this[key] + ')' : value;
});
// text is '["Date(---current time---)"]'
JSON.parse(text, reviver)
This method parses a JSON text to produce an object or array.
It can throw a SyntaxError exception.
The optional reviver parameter is a function that can filter and
transform the results. It receives each of the keys and values,
and its return value is used instead of the original value.
If it returns what it received, then the structure is not modified.
If it returns undefined then the member is deleted.
Example:
// Parse the text. Values that look like ISO date strings will
// be converted to Date objects.
myData = JSON.parse(text, function (key, value) {
var a;
if (typeof value === 'string') {
a =
/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
if (a) {
return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],
+a[5], +a[6]));
}
}
return value;
});
myData = JSON.parse('["Date(09/09/2001)"]', function (key, value) {
var d;
if (typeof value === 'string' &&
value.slice(0, 5) === 'Date(' &&
value.slice(-1) === ')') {
d = new Date(value.slice(5, -1));
if (d) {
return d;
}
}
return value;
});
This is a reference implementation. You are free to copy, modify, or
redistribute.
*/
/*jslint evil: true, regexp: true */
/*members "", "\b", "\t", "\n", "\f", "\r", "\"", JSON, "\\", apply,
call, charCodeAt, getUTCDate, getUTCFullYear, getUTCHours,
getUTCMinutes, getUTCMonth, getUTCSeconds, hasOwnProperty, join,
lastIndex, length, parse, prototype, push, replace, slice, stringify,
test, toJSON, toString, valueOf
*/
// Create a JSON object only if one does not already exist. We create the
// methods in a closure to avoid creating global variables.
if (typeof JSON !== 'object') {
JSON = {};
}
(function () {
'use strict';
function f(n) {
// Format integers to have at least two digits.
return n < 10 ? '0' + n : n;
}
if (typeof Date.prototype.toJSON !== 'function') {
Date.prototype.toJSON = function () {
return isFinite(this.valueOf())
? this.getUTCFullYear() + '-' +
f(this.getUTCMonth() + 1) + '-' +
f(this.getUTCDate()) + 'T' +
f(this.getUTCHours()) + ':' +
f(this.getUTCMinutes()) + ':' +
f(this.getUTCSeconds()) + 'Z'
: null;
};
String.prototype.toJSON =
Number.prototype.toJSON =
Boolean.prototype.toJSON = function () {
return this.valueOf();
};
}
var cx,
escapable,
gap,
indent,
meta,
rep;
function quote(string) {
// If the string contains no control characters, no quote characters, and no
// backslash characters, then we can safely slap some quotes around it.
// Otherwise we must also replace the offending characters with safe escape
// sequences.
escapable.lastIndex = 0;
return escapable.test(string) ? '"' + string.replace(escapable, function (a) {
var c = meta[a];
return typeof c === 'string'
? c
: '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
}) + '"' : '"' + string + '"';
}
function str(key, holder) {
// Produce a string from holder[key].
var i, // The loop counter.
k, // The member key.
v, // The member value.
length,
mind = gap,
partial,
value = holder[key];
// If the value has a toJSON method, call it to obtain a replacement value.
if (value && typeof value === 'object' &&
typeof value.toJSON === 'function') {
value = value.toJSON(key);
}
// If we were called with a replacer function, then call the replacer to
// obtain a replacement value.
if (typeof rep === 'function') {
value = rep.call(holder, key, value);
}
// What happens next depends on the value's type.
switch (typeof value) {
case 'string':
return quote(value);
case 'number':
// JSON numbers must be finite. Encode non-finite numbers as null.
return isFinite(value) ? String(value) : 'null';
case 'boolean':
case 'null':
// If the value is a boolean or null, convert it to a string. Note:
// typeof null does not produce 'null'. The case is included here in
// the remote chance that this gets fixed someday.
return String(value);
// If the type is 'object', we might be dealing with an object or an array or
// null.
case 'object':
// Due to a specification blunder in ECMAScript, typeof null is 'object',
// so watch out for that case.
if (!value) {
return 'null';
}
// Make an array to hold the partial results of stringifying this object value.
gap += indent;
partial = [];
// Is the value an array?
if (Object.prototype.toString.apply(value) === '[object Array]') {
// The value is an array. Stringify every element. Use null as a placeholder
// for non-JSON values.
length = value.length;
for (i = 0; i < length; i += 1) {
partial[i] = str(i, value) || 'null';
}
// Join all of the elements together, separated with commas, and wrap them in
// brackets.
v = partial.length === 0
? '[]'
: gap
? '[\n' + gap + partial.join(',\n' + gap) + '\n' + mind + ']'
: '[' + partial.join(',') + ']';
gap = mind;
return v;
}
// If the replacer is an array, use it to select the members to be stringified.
if (rep && typeof rep === 'object') {
length = rep.length;
for (i = 0; i < length; i += 1) {
if (typeof rep[i] === 'string') {
k = rep[i];
v = str(k, value);
if (v) {
partial.push(quote(k) + (gap ? ': ' : ':') + v);
}
}
}
} else {
// Otherwise, iterate through all of the keys in the object.
for (k in value) {
if (Object.prototype.hasOwnProperty.call(value, k)) {
v = str(k, value);
if (v) {
partial.push(quote(k) + (gap ? ': ' : ':') + v);
}
}
}
}
// Join all of the member texts together, separated with commas,
// and wrap them in braces.
v = partial.length === 0
? '{}'
: gap
? '{\n' + gap + partial.join(',\n' + gap) + '\n' + mind + '}'
: '{' + partial.join(',') + '}';
gap = mind;
return v;
}
}
// If the JSON object does not yet have a stringify method, give it one.
if (typeof JSON.stringify !== 'function') {
escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
meta = { // table of character substitutions
'\b': '\\b',
'\t': '\\t',
'\n': '\\n',
'\f': '\\f',
'\r': '\\r',
'"' : '\\"',
'\\': '\\\\'
};
JSON.stringify = function (value, replacer, space) {
// The stringify method takes a value and an optional replacer, and an optional
// space parameter, and returns a JSON text. The replacer can be a function
// that can replace values, or an array of strings that will select the keys.
// A default replacer method can be provided. Use of the space parameter can
// produce text that is more easily readable.
var i;
gap = '';
indent = '';
// If the space parameter is a number, make an indent string containing that
// many spaces.
if (typeof space === 'number') {
for (i = 0; i < space; i += 1) {
indent += ' ';
}
// If the space parameter is a string, it will be used as the indent string.
} else if (typeof space === 'string') {
indent = space;
}
// If there is a replacer, it must be a function or an array.
// Otherwise, throw an error.
rep = replacer;
if (replacer && typeof replacer !== 'function' &&
(typeof replacer !== 'object' ||
typeof replacer.length !== 'number')) {
throw new Error('JSON.stringify');
}
// Make a fake root object containing our value under the key of ''.
// Return the result of stringifying the value.
return str('', {'': value});
};
}
// If the JSON object does not yet have a parse method, give it one.
if (typeof JSON.parse !== 'function') {
cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
JSON.parse = function (text, reviver) {
// The parse method takes a text and an optional reviver function, and returns
// a JavaScript value if the text is a valid JSON text.
var j;
function walk(holder, key) {
// The walk method is used to recursively walk the resulting structure so
// that modifications can be made.
var k, v, value = holder[key];
if (value && typeof value === 'object') {
for (k in value) {
if (Object.prototype.hasOwnProperty.call(value, k)) {
v = walk(value, k);
if (v !== undefined) {
value[k] = v;
} else {
delete value[k];
}
}
}
}
return reviver.call(holder, key, value);
}
// Parsing happens in four stages. In the first stage, we replace certain
// Unicode characters with escape sequences. JavaScript handles many characters
// incorrectly, either silently deleting them, or treating them as line endings.
text = String(text);
cx.lastIndex = 0;
if (cx.test(text)) {
text = text.replace(cx, function (a) {
return '\\u' +
('0000' + a.charCodeAt(0).toString(16)).slice(-4);
});
}
// In the second stage, we run the text against regular expressions that look
// for non-JSON patterns. We are especially concerned with '()' and 'new'
// because they can cause invocation, and '=' because it can cause mutation.
// But just to be safe, we want to reject all unexpected forms.
// We split the second stage into 4 regexp operations in order to work around
// crippling inefficiencies in IE's and Safari's regexp engines. First we
// replace the JSON backslash pairs with '@' (a non-JSON character). Second, we
// replace all simple value tokens with ']' characters. Third, we delete all
// open brackets that follow a colon or comma or that begin the text. Finally,
// we look to see that the remaining characters are only whitespace or ']' or
// ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval.
if (/^[\],:{}\s]*$/
.test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@')
.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']')
.replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
// In the third stage we use the eval function to compile the text into a
// JavaScript structure. The '{' operator is subject to a syntactic ambiguity
// in JavaScript: it can begin a block or an object literal. We wrap the text
// in parens to eliminate the ambiguity.
j = eval('(' + text + ')');
// In the optional fourth stage, we recursively walk the new structure, passing
// each name/value pair to a reviver function for possible transformation.
return typeof reviver === 'function'
? walk({'': j}, '')
: j;
}
// If the text is not JSON parseable, then a SyntaxError is thrown.
throw new SyntaxError('JSON.parse');
};
}
}());
================================================
FILE: examples/login/libs/easymob-webim-sdk/quickstart.md
================================================
---
title: WebIM 开发指南
sidebar: webimsidebar
secondnavwebim: true
---
# 快速入门
## 初始化
### 创建连接{#conn_new}
var conn = new Easemob.im.Connection();
### 初始化连接{#conn_init}
conn.init({
https : true,//非必填，url值未设置时有效，优先采用url配置的参数。默认采用http连接，地址为‘http://im-api.easemob.com/http-bind/’，启用https时传递此值，地址为：‘https://im-api.easemob.com/http-bind/’
url ： 'http://im-api.easemob.com/http-bind/',//非必填，默认聊天服务器地址，
domain : 'aa.com',//非必填，默认：‘easemob.com’
wait ： '60',//非必填，连接超时，默认：60，单位seconds
onOpened : function() {
curUserId = conn.context.userId;
//查询好友列表
conn.getRoster(....);
},
onClosed : function() {
//处理登出事件
},
onTextMessage : function(message) {
/**处理文本消息，消息格式为：
{ type :'chat',//群聊为“groupchat”
from : from,
to : too,
data : { "type":"txt",
"msg":"hello from test2"
}
}
*/
handleTextMessage(message);
},
onEmotionMessage : function(message) {
/*处理表情消息,消息格式为：
{ type :'chat',//群聊为“groupchat”
from : from,
to : too,
data : [{ "type":"txt",
"msg":"hello from test2"
},
{ "type":"emotion",
"msg":"data:image/png;base64, ……"//图片的base64编码
}]
}
*/
handleEmotion(message);
},
onPictureMessage : function(message) {
/**处理图片消息，消息格式为：
{ type :'chat',//群聊为“groupchat”
from : "test1",
to : "test2",
url : "http://s1.easemob.com/weiquan2/a2/chatfiles/0c0f5f3a-e66b-11e3-8863-f1c202c2b3ae",
secret : "NSgGYPCxEeOou00jZasg9e-GqKUZGdph96EFxJ4WxW-qkxV4",
filename : "logo.png",
thumb : "http://s1.easemob.com/weiquan2/a2/chatfiles/0c0f5f3a-e66b-11e3-8863-f1c202c2b3ae",
thumb_secret : "0595b06a-ed8b-11e3-9b85-93fade9c198c",
file_length : 42394,
width : 280,
height : 160,
filetype : "image/png",
accessToken :"YWMtjPPoovCqEeOQs7myPqqaOwAAAUaqNH0a8rRj4PwJLQju6-S47ZO6wYs3Lwo"
}
*/
handlePictureMessage(message);
},
onAudioMessage : function(message) {
/**处理音频消息，消息格式为：
{ type :'chat',//群聊为“groupchat”
from : "test1",
to : "test2",
url : "http://s1.easemob.com/weiquan2/a2/chatfiles/0c0f5f3a-e66b-11e3-8863-f1c202c2b3ae",
secret :"NSgGYPCxEeOou00jZasg9e-GqKUZGdph96EFxJ4WxW-qkxV4",
filename : "风雨无阻.mp3",
length :45223,
file_length : 304,
filetype : "mp3",
accessToken :"YWMtjPPoovCqEeOQs7myPqqaOwAAAUaqNH0a8rRj4PwJLQju6-S47ZO6wYs3Lwo"
}
*/
handleAudioMessage(message);
},
//收到联系人订阅请求的回调方法
onPresence : function (message){
/**
{
from: "l2",
fromJid: "easemob-demo#chatdemoui_l2@easemob.com",
status: "下午11:44:47",
to: "test1",
toJid: "easemob-demo#chatdemoui_test1@easemob.com/13856640471403797405809685",
type: "subscribed"
}
*/
handlePresence(message);
},
//收到联系人信息的回调方法
onRoster : function (message){
/**
[{
groups: [{0: "default",
length: 1}],
jid: "easemob-demo#chatdemoui_l2@easemob.com",
name: "l2",
subscription: "to"
}]
*/
handleRoster(message);
},
onError : function(e) {
//异常处理
alert(e.msg);
}
});
### 打开连接{#conn_open}
支持username/password和username/token登录两种方式，sdk中会根据传入的参数进行自动选择是否登录usergrid，获取登录成功的token后再进行登录聊天，如果使用token的打开连接将跳过登录usergird，直接登录IM服务器。
//用户名
var user = $("#username").val();
//密码
var pass = $("#password").val();
if (user == '' || pass == '') {
alert("请输入用户名和密码");
return;
}
conn.open({
user : user,
pwd : pass,
appKey : 'easemob-demo#chatdemoui'//开发者APPKey
//accessToken : 'YWMt8bfZfFk5EeSiAzsQ0OXu4QAAAUpoZFOMJ66ic5m2LOZRhYUsRKZWINA06HI'
});
## 单聊{#single_chat}
### 查询好友列表{#getRoster}
查询好友列表时，要注意susciption（both，to,from）为不同值得处理,此处默认both和to的为好友，开发者自定义处理，保持跟APP端处理一致即可。
conn.getRoster({
success : function(roster) {
//获取好友列表，并进行好友列表渲染，roster格式为：
/** [
{
jid:"asemoemo#chatdemoui_test1@easemob.com",
name:"test1",
subscription: "both"
},
{
jid:"asemoemo#chatdemoui_test2@easemob.com",
name:"test2",
subscription: "from"
}
]
*/
for(var i in roster){
var ros = roster[i];
//ros.subscriptio值为both/to为要显示的联系人,此处与APP需保持一致，才能保证两个客户端登录后的好友列表一致
if(ros.subscription =='both' || ros.subscription=='to'){
newroster.push(ros);
}
}
if (newroster.length >=0) {
buildContactDiv("contractlist", newroster);//页面处理
if (newroster.length > 0) {
setCurrentContact(newroster[0].name);//页面处理将第一个联系人作为当前聊天div
}
}
//conn.setPresence();
},
});
### 添加好友{#subscribe}
通过sdk的subscribe和unsubcribe进行添加或者删除好友操作，登录用户通过注册onPresence，监听对方的添加或者删除好友请求，并做相应的处理。
//easemobwebim-sdk中收到联系人订阅请求的处理方法，具体的type值所对应的值请参考xmpp协议规范
var handlePresence = function (e){
//（发送者希望订阅接收者的出席信息），即别人申请加你为好友
if (e.type == 'subscribe') {
//若e.status中含有[resp:true],则表示为对方同意好友后反向添加自己为好友的消息，demo中发现此类消息，默认同意操作，完成双方互为好友；如果不含有[resp:true]，则表示为正常的对方请求添加自己为好友的申请消息。
......
}
//(发送者允许接收者接收他们的出席信息)，即别人同意你加他为好友
if (e.type == 'subscribed') {
......
}
//（发送者取消订阅另一个实体的出席信息）,即删除现有好友
if (e.type == 'unsubscribe') {
.......
}
//（订阅者的请求被拒绝或以前的订阅被取消），即对方单向的删除了好友
if (e.type == 'unsubscribed') {
.......
}
};
#### 申请添加对方为好友{#addFriend}
//主动申请添加对方为好友
var startAddFriend = function startAddFriend(){
//对方用户账号
var user = $("addfridentId").val();
//请求添加对方为好友
conn.subscribe({
to : user,
message : "加个好友呗-" + getLoacalTimeString()
});
return;
};
var getLoacalTimeString = function getLoacalTimeString() {
var date = new Date();
var time = date.getHours() + ":" + date.getMinutes() + ":"
+ date.getSeconds();
return time;
}
#### 对方收到请求，同意或者拒绝{#agreed_reject}
//对方收到请求加为好友，接受请求
$('#confirm-block-footer-confirmButton').click(function() {
//同意好友请求
agreeAddFriend(e.from);//e.from用户名
//反向添加对方好友
conn.subscribe({
to : e.from,
message : "[resp:true]"
});
}
//同意
var agreeAddFriend = function agreeAddFriend(connection,who,jid){
conn.subscribed({
to : user,
message : "[resp:true]"//同意后发送反加对方为好友的消息，反加消息标识[resp:true]
});
};
//对方收到请求加为好友，拒绝请求
$('#confirm-block-footer-cancelButton').click(function() {
rejectAddFriend(e.from);//拒绝加为好友
});
//拒绝
var rejectAddFriend = function(user) {
conn.unsubscribed({
to : user,
message : getLoacalTimeString()
});
};
对于好友的分组，添加好友时在addroster可以指定group属性（默认为：default组），添加好友成功后，好友列表渲染时，根据好友的group属性进行分组渲染，实现类似其他聊天工具的自定义好友分组管理的功能。
#### 删除好友{#delfriend}
取消订阅，同时将对方从自己的好友列表上删除掉。
var delFriend = function(user) {
conn.removeRoster({
to : user,
groups : [ 'default' ],
success : function() {
conn.**unsubscribed**({
to : user
});
}
});
};
### 发送文本（表情）聊天消息{#sendTextMessage}
//发送文本消息
conn.sendTextMessage({
to : to,//用户登录名，sd根据appkey和domain组织jid，如easemob-demo#chatdemoui_**TEST**@easemob.com，中"to:TEST",下同
msg :'hello world！' //文本消息
});
//发送表情消息，调用接口同文本消息
conn.sendTextMessage({
to : to,
msg :'hello world！[(*)][(#)]' //文本消息+表情
});
### 发送图片消息{#sendPic}
发送图片消息sdk自动分两步完成：
1）上传图片文件到服务器，并得到服务返回的图片信息等
2）发送图片消息，消息体包含图片的基本信息、服务器路径、secret等，接收方初始化连接中的onPictureMessage的格式，根据图片消息内容到服务器下载图片，并进行显示
function sendPic() {
//图片接收者，如“test1”
var to = curChatUserId;
if (to == null) {
alert("请选择联系人");
return;
}
//fileInputId：文件选择输入框的Id，sdk自动根据id自动获取文件对象（含图片，或者其他类型文件）
var fileObj = Easemob.im.Helper.getFileUrl(fileInputId);
if (fileObj.url == null || fileObj.url == '') {
alert("请选择发送图片");
return;
}
var filetype = fileObj.filetype;
var filename = fileObj.filename;
if (filetype in {
"jpg" : true,
"gif" : true,
"png" : true,
"bmp" : true
}) {
var opt = {
fileInputId : fileInputId,
to : to,
onFileUploadError : function(error) {
//处理图片上传失败
},
onFileUploadComplete : function(data) {
//处理图片上传成功，如本地消息显示
}
};
conn.sendPicture(opt);
return;
}
alert("不支持此图片类型" + filetype);
};
### 发送音频消息{#sendAudio}
sdk处理同发送图片消息，分两步：
1. 上传音频文件到服务器，得到音频文件的信息；
2. 发送音频消息给接收方，消息体包含音频的基本信息、下载路径和secret信息等，接收方收到消息后，根据消息体内部的音频下载路径和secret路径，下载音频并进行显示。
function sendAudio () {
var to = curChatUserId;
if (to == null) {
alert("请选择联系人");
return;
}
var fileObj = Easemob.im.Helper.getFileUrl(fileInputId);
if (fileObj.url == null || fileObj.url == '') {
alert("请选择发送音频");
return;
}
var filetype = fileObj.filetype;
var filename = fileObj.filename;
if (filetype in {
"mp3" : true,
"wma" : true,
"wav" : true,
"avi" : true
})
{
var opt = {
fileInputId : fileInputId,
to : to,
onFileUploadError : function(error) {
//处理上传音频失败
},
onFileUploadComplete : function(data) {
//处理上传音频成功，如本地消息提示发送成功
}
};
conn.sendAudio(opt);
return;
}
alert("不支持此音频类型" + filetype);
};
### 接收消息
#### 注册接收消息 {#onmessage}
conn.init({
onTextMessage : function(message) { },//收到文本消息处理动作
onEmotionMessage : function(message) { },//收到表情消息处理动作
onPictureMessage : function(message) { },//收到图片消息处理动作
onAudioMessage : function(message) { }, //收到语音消息处理动作
...
});
#### 处理消息{#options}
conn.init()中注册不同消息接收handler之后，可自行解析消息体，定位聊天好友，并追加到与其聊天窗口。具体参考webim.easemob.com效果，消息体格式参见前章节：初始化连接。
注：对于图片、语音消息需要先进行下载，然后进行显示或者播放处理。如下(下载图片，音频同)：
var handlePictureMessage = function(message) {
var filename = message.filename;//文件名称，带文件扩展名
var from = message.from;//文件的发送者
var mestype = message.type;//消息发送的类型是群组消息还是个人消息
......
...
var options = message;
// 图片消息下载成功后的处理逻辑
options.onFileDownloadComplete = function(response, xhr) {
var objectURL = window.URL.createObjectURL(response);
img = document.createElement("img");
img.onload = function(e) {
img.onload = null;
window.URL.revokeObjectURL(img.src);
};
img.onerror = function() {
img.onerror = null;
if (typeof FileReader == 'undefined') {
img.alter = "当前浏览器不支持blob方式";
return;
}
img.onerror = function() {
img.alter = "当前浏览器不支持blob方式";
};
var reader = new FileReader();
reader.onload = function(event) {
img.src = this.result;
};
reader.readAsDataURL(response);
}
img.src = objectURL;
var pic_real_width = options.width;
......
...
};
options.onFileDownloadError = function(e) {
appendMsg(from, contactDivId, e.msg + ",下载图片" + filename + "失败");
};
Easemob.im.Helper.download(options);
#### 历史消息{#history_message}
sdk暂不具有缓存历史消息功能，demo中聊天窗口只能显示，当前登录后会话实时在聊天信息，不能查看历史消息，可以对登录后的聊天信息进行清除操作。
#### 新消息提示{#new_message}
sdk在收到新消息是会直接转发给登录用户，接收到消息后，demo中会在好友或者群组的后面显示红色消息数，具体样式开发者可自行处理。
## 群聊{#group_chat}
### 查询群组成员{#queryOccupants}
//根据roomId查询room成员列表
var queryOccupants = function queryOccupants(roomId) {
var occupants = [];//存放成员容器
//查询获取room信息
conn.queryRoomInfo({
roomId : roomId,
success : function(occs) {
if (occs) {
for ( var i = 0; i < occs.length; i++) {
occupants.push(occs[i]);
}
}
//查询获取room成员信息
conn.queryRoomMember({
roomId : roomId,
success : function(members) {
if (members) {
for ( var i = 0; i < members.length; i++) {
occupants.push(members[i]);
}
}
}
});
}
});
};
### 发送文本（表情）聊天消息{#group_sendTextMessage}
//发送文本消息
conn.sendTextMessage({
to : to,
type : 'groupchat',
msg :'hello world！' //文本消息
});
//发送表情消息，调用接口同文本消息
conn.sendTextMessage({
to : to,
type : 'groupchat',
msg :'hello world！[(*)][(#)]' //文本消息+表情
});
### 发送图片消息{#group_sendPic}
发送图片消息sdk自动分两步完成
1. 上传图片文件
2. 发送图片消息初始化连接中的onPictureMessage的格式
//发送图片消息时调用方法
var sendPic = function() {
var to = curChatUserId;
if (to == null) {
return;
}
// Easemob.im.Helper.getFileUrl为easemobwebim-sdk获取发送文件对象的方法，fileInputId为 input 标签的id值
var fileObj = Easemob.im.Helper.getFileUrl(fileInputId);
if (fileObj.url == null || fileObj.url == '') {
alert("请选择发送图片");
return;
}
var filetype = fileObj.filetype;
var filename = fileObj.filename;
if (filetype in pictype) {
document.getElementById("fileSend").disabled = true;
document.getElementById("cancelfileSend").disabled = true;
var opt = {
type:'chat',
fileInputId : fileInputId,
to : to,
onFileUploadError : function(error) {
//处理图片上传失败
},
onFileUploadComplete : function(data) {
//关闭文件选择窗口
$('#fileModal').modal('hide');
//本地缩略图
var file = document.getElementById(fileInputId);
if (file && file.files) {
var objUrl = getObjectURL(file.files[0]);
if (objUrl) {
var img = document.createElement("img");
img.src = objUrl;
img.width = maxWidth;
}
}
}
};
//判断是否为群组标识
if (curChatUserId.indexOf(groupFlagMark) >= 0) {
opt.type = 'groupchat';//群组标识符
opt.to = curRoomId;
}
conn.sendPicture(opt);
return;
}
alert("不支持此图片类型" + filetype);
};
### 发送音频消息{#group_sendAudio}
sdk处理同群发送图片消息，分两步
1. 上传音频
2. 发送消息
//发送音频消息时调用的方法
var sendAudio = function() {
var to = curChatUserId;
if (to == null) {
alert("请选择联系人");
return;
}
//利用easemobwebim-sdk提供的方法来构造一个file对象
var fileObj = Easemob.im.Helper.getFileUrl(fileInputId);
if (fileObj.url == null || fileObj.url == '') {
alert("请选择发送音频");
return;
}
var filetype = fileObj.filetype;
var filename = fileObj.filename;
if (filetype in audtype) {
document.getElementById("fileSend").disabled = true;
document.getElementById("cancelfileSend").disabled = true;
var opt = {
type:"chat",
fileInputId : fileInputId,
to : to,//发给谁
onFileUploadError : function(error) {
//处理上传音频失败
},
onFileUploadComplete : function(data) {
//处理上传音频成功，如本地消息提示发送成功
}
};
//构造完opt对象后调用easemobwebim-sdk中发送音频的方法
if (curChatUserId.indexOf(groupFlagMark) >= 0) {
opt.type = 'groupchat';
opt.to = curRoomId;
}
conn.sendAudio(opt);
return;
}
alert("不支持此音频类型" + filetype);
};
### 接收及处理消息{#messageType}
群聊接收及处理消息同单聊，消息体与单聊消息根据message的type进行区分，单聊为：“chat”，群聊为：“groupchat”。根据消息的类型进行不同处理即可。
## 退出{#quit}
### 关闭连接{#conn_close}
//sdk关闭连接并处理连接状态为CLOSED
conn.close();
## 工具类说明{#sdk_tools}
### 表情工具类{#emotion}
//返回表情JSON object，格式为：
{
"[):]" : "data:image/png;base64,iVBORw0K....==",
"[:D]" : "data:image/png;base64,iVBORw0KGgoAAAANSUh....=="
}
var emotion_json = Easemob.im.Helper.EmotionPicData;
### Base64工具类{#base64}
var base64 = Easemob.im.Helper.Base64;
var srcstr="ssss";
var base64str = base64.encode(srcstr);
var orgstr = base64.decode(srcstr);
### 文件上传工具类{#fileupload}
//是否能上传file
var canupload = Easemob.im.Helper.isCanUploadFile;
//是否能下载file
var candownload = Easemob.im.Helper.isCanDownLoadFile ;
//是否设置header
var hasheader = Easemob.im.Helper.hasSetRequestHeader;
//是否设置mimetype
var hasmimetype = Easemob.im.Helper.hasOverrideMimeType;
### 表情解析工具类{#handleMotion}
//返回表情JSON，格式为：
{
isemotion:true;
body:[{
type:txt,
msg:ssss
},
{
type:emotion,
msg:imgdata
}]
}
var emotionMsg = Easemob.im.Helper.parseTextMessage(message);
### 文件上传工具类{#fileupdate}
//返回fileinfo对象，格式为：
{
url : '',
filename : '',
filetype : ''
}
var fileInfo = Easemob.im.Helper.getFileUrl(fileInputId);
//上传
var options={
appName = 'chatdemoui',
orgName = 'easemob-demo',
accessToken = 'YWMtjPPoovCqEeOQs7myPqqaOwAAAUaqNH0a8rRj4PwJLQju6-S47ZO6wYs3Lwo',
onFileUploadComplete:function(data){//upload file success },
onFileUploadError:function(e){//upload file error },
width:100,//only for pic
heght:100//only for pic
}
Easemob.im.Helper.upload(options);
//下载
var options = {
method:'GET',//default GET
responseType:'blob',//default blob
mimeType:'text/plain; charset=x-user-defined',//default
url:'http://s1.easemob.com/weiquan2/a2/chatfiles/0c0f5f3a-e66b-11e3-8863-f1c202c2b3ae',
secret = 'NSgGYPCxEeOou00jZasg9e-GqKUZGdph96EFxJ4WxW-qkxV4',
accessToken = 'YWMtjPPoovCqEeOQs7myPqqaOwAAAUaqNH0a8rRj4PwJLQju6-S47ZO6wYs3Lwo',
onFileUploadComplete:function(data){//upload file success },
onFileUploadError:function(e){//upload file error },
}
Easemob.im.Helper.download(options);
//文件大小
var options={
fileInputId:'uploadfileinput'//文件输入框id
};
var fileSize = getFileSize(options.fileInputId);;
### 发送Ajax请求{#ajaxresquest}
var options = {
dataType:'text',//default
success:function(){//handle request success},
error :function(){//handle request error},
type : 'post',//default 'post'
url : 'http://s1.easemob.com/weiquan2/a2/chatfiles/0c0f5f3a-e66b-11e3-8863-f1c202c2b3ae',
headers:'',//default {}
data : '';//default null
};
Easemob.im.Helper.xhr(options);
### 登录{#sdk_login}
var options = {
appKey:'easemob-demo#chatdemoui',//default ''
success:function(data){ //login success },//default emptyFn
error : cunction(error){ //login error }, //default emptyFn
user : 'test1', //default ''
pwd : '123456' //default ''
};
Easemob.im.Helper.login2UserGrid(options);
### 注册{#sdk_regist}
vvar options = {
username : 'zjj8',
password : '123456',
appKey : 'easemob-demo#chatdemoui',
success : function(result) {
//注册成功
},
error : function(e) {
//注册失败
}
};
Easemob.im.Helper.registerUser(options);
### 内置空函数{#null_function}
当所有需要回调的地方接受到函数时，默认采用此函数
var emptyFn = function() {};
================================================
FILE: examples/login/libs/easymob-webim-sdk/strophe-custom-2.0.0.js
================================================
/* All of the Strophe globals are defined in this special function below so
* that references to the globals become closures. This will ensure that
* on page reload, these references will still be available to callbacks
* that are still executing.
*/
/* jshint ignore:start */
(function (callback) {
/* jshint ignore:end */
// This code was written by Tyler Akins and has been placed in the
// public domain. It would be nice if you left this header intact.
// Base64 code from Tyler Akins -- http://rumkin.com
var Base64 = (function () {
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
var obj = {
/**
* Encodes a string in base64
* @param {String} input The string to encode in base64.
*/
encode: function (input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
do {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc2 = ((chr1 & 3) << 4);
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output + keyStr.charAt(enc1) + keyStr.charAt(enc2) +
keyStr.charAt(enc3) + keyStr.charAt(enc4);
} while (i < input.length);
return output;
},
/**
* Decodes a base64 string.
* @param {String} input The string to decode.
*/
decode: function (input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
// remove all characters that are not A-Z, a-z, 0-9, +, /, or =
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
do {
enc1 = keyStr.indexOf(input.charAt(i++));
enc2 = keyStr.indexOf(input.charAt(i++));
enc3 = keyStr.indexOf(input.charAt(i++));
enc4 = keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}
} while (i < input.length);
return output;
}
};
return obj;
})();
/*
* A JavaScript implementation of the Secure Hash Algorithm, SHA-1, as defined
* in FIPS PUB 180-1
* Version 2.1a Copyright Paul Johnston 2000 - 2002.
* Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
* Distributed under the BSD License
* See http://pajhome.org.uk/crypt/md5 for details.
*/
/* Some functions and variables have been stripped for use with Strophe */
/*
* These are the functions you'll usually want to call
* They take string arguments and return either hex or base-64 encoded strings
*/
function b64_sha1(s){return binb2b64(core_sha1(str2binb(s),s.length * 8));}
function str_sha1(s){return binb2str(core_sha1(str2binb(s),s.length * 8));}
function b64_hmac_sha1(key, data){ return binb2b64(core_hmac_sha1(key, data));}
function str_hmac_sha1(key, data){ return binb2str(core_hmac_sha1(key, data));}
/*
* Calculate the SHA-1 of an array of big-endian words, and a bit length
*/
function core_sha1(x, len)
{
/* append padding */
x[len >> 5] |= 0x80 << (24 - len % 32);
x[((len + 64 >> 9) << 4) + 15] = len;
var w = new Array(80);
var a = 1732584193;
var b = -271733879;
var c = -1732584194;
var d = 271733878;
var e = -1009589776;
var i, j, t, olda, oldb, oldc, oldd, olde;
for (i = 0; i < x.length; i += 16)
{
olda = a;
oldb = b;
oldc = c;
oldd = d;
olde = e;
for (j = 0; j < 80; j++)
{
if (j < 16) { w[j] = x[i + j]; }
else { w[j] = rol(w[j-3] ^ w[j-8] ^ w[j-14] ^ w[j-16], 1); }
t = safe_add(safe_add(rol(a, 5), sha1_ft(j, b, c, d)),
safe_add(safe_add(e, w[j]), sha1_kt(j)));
e = d;
d = c;
c = rol(b, 30);
b = a;
a = t;
}
a = safe_add(a, olda);
b = safe_add(b, oldb);
c = safe_add(c, oldc);
d = safe_add(d, oldd);
e = safe_add(e, olde);
}
return [a, b, c, d, e];
}
/*
* Perform the appropriate triplet combination function for the current
* iteration
*/
function sha1_ft(t, b, c, d)
{
if (t < 20) { return (b & c) | ((~b) & d); }
if (t < 40) { return b ^ c ^ d; }
if (t < 60) { return (b & c) | (b & d) | (c & d); }
return b ^ c ^ d;
}
/*
* Determine the appropriate additive constant for the current iteration
*/
function sha1_kt(t)
{
return (t < 20) ? 1518500249 : (t < 40) ? 1859775393 :
(t < 60) ? -1894007588 : -899497514;
}
/*
* Calculate the HMAC-SHA1 of a key and some data
*/
function core_hmac_sha1(key, data)
{
var bkey = str2binb(key);
if (bkey.length > 16) { bkey = core_sha1(bkey, key.length * 8); }
var ipad = new Array(16), opad = new Array(16);
for (var i = 0; i < 16; i++)
{
ipad[i] = bkey[i] ^ 0x36363636;
opad[i] = bkey[i] ^ 0x5C5C5C5C;
}
var hash = core_sha1(ipad.concat(str2binb(data)), 512 + data.length * 8);
return core_sha1(opad.concat(hash), 512 + 160);
}
/*
* Add integers, wrapping at 2^32. This uses 16-bit operations internally
* to work around bugs in some JS interpreters.
*/
function safe_add(x, y)
{
var lsw = (x & 0xFFFF) + (y & 0xFFFF);
var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
return (msw << 16) | (lsw & 0xFFFF);
}
/*
* Bitwise rotate a 32-bit number to the left.
*/
function rol(num, cnt)
{
return (num << cnt) | (num >>> (32 - cnt));
}
/*
* Convert an 8-bit or 16-bit string to an array of big-endian words
* In 8-bit function, characters >255 have their hi-byte silently ignored.
*/
function str2binb(str)
{
var bin = [];
var mask = 255;
for (var i = 0; i < str.length * 8; i += 8)
{
bin[i>>5] |= (str.charCodeAt(i / 8) & mask) << (24 - i%32);
}
return bin;
}
/*
* Convert an array of big-endian words to a string
*/
function binb2str(bin)
{
var str = "";
var mask = 255;
for (var i = 0; i < bin.length * 32; i += 8)
{
str += String.fromCharCode((bin[i>>5] >>> (24 - i%32)) & mask);
}
return str;
}
/*
* Convert an array of big-endian words to a base-64 string
*/
function binb2b64(binarray)
{
var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
var str = "";
var triplet, j;
for (var i = 0; i < binarray.length * 4; i += 3)
{
triplet = (((binarray[i >> 2] >> 8 * (3 - i %4)) & 0xFF) << 16) |
(((binarray[i+1 >> 2] >> 8 * (3 - (i+1)%4)) & 0xFF) << 8 ) |
((binarray[i+2 >> 2] >> 8 * (3 - (i+2)%4)) & 0xFF);
for (j = 0; j < 4; j++)
{
if (i * 8 + j * 6 > binarray.length * 32) { str += "="; }
else { str += tab.charAt((triplet >> 6*(3-j)) & 0x3F); }
}
}
return str;
}
/*
* A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
* Digest Algorithm, as defined in RFC 1321.
* Version 2.1 Copyright (C) Paul Johnston 1999 - 2002.
* Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
* Distributed under the BSD License
* See http://pajhome.org.uk/crypt/md5 for more info.
*/
/*
* Everything that isn't used by Strophe has been stripped here!
*/
var MD5 = (function () {
/*
* Add integers, wrapping at 2^32. This uses 16-bit operations internally
* to work around bugs in some JS interpreters.
*/
var safe_add = function (x, y) {
var lsw = (x & 0xFFFF) + (y & 0xFFFF);
var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
return (msw << 16) | (lsw & 0xFFFF);
};
/*
* Bitwise rotate a 32-bit number to the left.
*/
var bit_rol = function (num, cnt) {
return (num << cnt) | (num >>> (32 - cnt));
};
/*
* Convert a string to an array of little-endian words
*/
var str2binl = function (str) {
var bin = [];
for(var i = 0; i < str.length * 8; i += 8)
{
bin[i>>5] |= (str.charCodeAt(i / 8) & 255) << (i%32);
}
return bin;
};
/*
* Convert an array of little-endian words to a string
*/
var binl2str = function (bin) {
var str = "";
for(var i = 0; i < bin.length * 32; i += 8)
{
str += String.fromCharCode((bin[i>>5] >>> (i % 32)) & 255);
}
return str;
};
/*
* Convert an array of little-endian words to a hex string.
*/
var binl2hex = function (binarray) {
var hex_tab = "0123456789abcdef";
var str = "";
for(var i = 0; i < binarray.length * 4; i++)
{
str += hex_tab.charAt((binarray[i>>2] >> ((i%4)*8+4)) & 0xF) +
hex_tab.charAt((binarray[i>>2] >> ((i%4)*8 )) & 0xF);
}
return str;
};
/*
* These functions implement the four basic operations the algorithm uses.
*/
var md5_cmn = function (q, a, b, x, s, t) {
return safe_add(bit_rol(safe_add(safe_add(a, q),safe_add(x, t)), s),b);
};
var md5_ff = function (a, b, c, d, x, s, t) {
return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
};
var md5_gg = function (a, b, c, d, x, s, t) {
return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
};
var md5_hh = function (a, b, c, d, x, s, t) {
return md5_cmn(b ^ c ^ d, a, b, x, s, t);
};
var md5_ii = function (a, b, c, d, x, s, t) {
return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
};
/*
* Calculate the MD5 of an array of little-endian words, and a bit length
*/
var core_md5 = function (x, len) {
/* append padding */
x[len >> 5] |= 0x80 << ((len) % 32);
x[(((len + 64) >>> 9) << 4) + 14] = len;
var a = 1732584193;
var b = -271733879;
var c = -1732584194;
var d = 271733878;
var olda, oldb, oldc, oldd;
for (var i = 0; i < x.length; i += 16)
{
olda = a;
oldb = b;
oldc = c;
oldd = d;
a = md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936);
d = md5_ff(d, a, b, c, x[i+ 1], 12, -389564586);
c = md5_ff(c, d, a, b, x[i+ 2], 17, 606105819);
b = md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330);
a = md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897);
d = md5_ff(d, a, b, c, x[i+ 5], 12, 1200080426);
c = md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341);
b = md5_ff(b, c, d, a, x[i+ 7], 22, -45705983);
a = md5_ff(a, b, c, d, x[i+ 8], 7 , 1770035416);
d = md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417);
c = md5_ff(c, d, a, b, x[i+10], 17, -42063);
b = md5_ff(b, c, d, a, x[i+11], 22, -1990404162);
a = md5_ff(a, b, c, d, x[i+12], 7 , 1804603682);
d = md5_ff(d, a, b, c, x[i+13], 12, -40341101);
c = md5_ff(c, d, a, b, x[i+14], 17, -1502002290);
b = md5_ff(b, c, d, a, x[i+15], 22, 1236535329);
a = md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510);
d = md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632);
c = md5_gg(c, d, a, b, x[i+11], 14, 643717713);
b = md5_gg(b, c, d, a, x[i+ 0], 20, -373897302);
a = md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691);
d = md5_gg(d, a, b, c, x[i+10], 9 , 38016083);
c = md5_gg(c, d, a, b, x[i+15], 14, -660478335);
b = md5_gg(b, c, d, a, x[i+ 4], 20, -405537848);
a = md5_gg(a, b, c, d, x[i+ 9], 5 , 568446438);
d = md5_gg(d, a, b, c, x[i+14], 9 , -1019803690);
c = md5_gg(c, d, a, b, x[i+ 3], 14, -187363961);
b = md5_gg(b, c, d, a, x[i+ 8], 20, 1163531501);
a = md5_gg(a, b, c, d, x[i+13], 5 , -1444681467);
d = md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784);
c = md5_gg(c, d, a, b, x[i+ 7], 14, 1735328473);
b = md5_gg(b, c, d, a, x[i+12], 20, -1926607734);
a = md5_hh(a, b, c, d, x[i+ 5], 4 , -378558);
d = md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463);
c = md5_hh(c, d, a, b, x[i+11], 16, 1839030562);
b = md5_hh(b, c, d, a, x[i+14], 23, -35309556);
a = md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060);
d = md5_hh(d, a, b, c, x[i+ 4], 11, 1272893353);
c = md5_hh(c, d, a, b, x[i+ 7], 16, -155497632);
b = md5_hh(b, c, d, a, x[i+10], 23, -1094730640);
a = md5_hh(a, b, c, d, x[i+13], 4 , 681279174);
d = md5_hh(d, a, b, c, x[i+ 0], 11, -358537222);
c = md5_hh(c, d, a, b, x[i+ 3], 16, -722521979);
b = md5_hh(b, c, d, a, x[i+ 6], 23, 76029189);
a = md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487);
d = md5_hh(d, a, b, c, x[i+12], 11, -421815835);
c = md5_hh(c, d, a, b, x[i+15], 16, 530742520);
b = md5_hh(b, c, d, a, x[i+ 2], 23, -995338651);
a = md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844);
d = md5_ii(d, a, b, c, x[i+ 7], 10, 1126891415);
c = md5_ii(c, d, a, b, x[i+14], 15, -1416354905);
b = md5_ii(b, c, d, a, x[i+ 5], 21, -57434055);
a = md5_ii(a, b, c, d, x[i+12], 6 , 1700485571);
d = md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606);
c = md5_ii(c, d, a, b, x[i+10], 15, -1051523);
b = md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799);
a = md5_ii(a, b, c, d, x[i+ 8], 6 , 1873313359);
d = md5_ii(d, a, b, c, x[i+15], 10, -30611744);
c = md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380);
b = md5_ii(b, c, d, a, x[i+13], 21, 1309151649);
a = md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070);
d = md5_ii(d, a, b, c, x[i+11], 10, -1120210379);
c = md5_ii(c, d, a, b, x[i+ 2], 15, 718787259);
b = md5_ii(b, c, d, a, x[i+ 9], 21, -343485551);
a = safe_add(a, olda);
b = safe_add(b, oldb);
c = safe_add(c, oldc);
d = safe_add(d, oldd);
}
return [a, b, c, d];
};
var obj = {
/*
* These are the functions you'll usually want to call.
* They take string arguments and return either hex or base-64 encoded
* strings.
*/
hexdigest: function (s) {
return binl2hex(core_md5(str2binl(s), s.length * 8));
},
hash: function (s) {
return binl2str(core_md5(str2binl(s), s.length * 8));
}
};
return obj;
})();
/*
This program is distributed under the terms of the MIT license.
Please see the LICENSE file for details.
Copyright 2006-2008, OGG, LLC
*/
/* jshint undef: true, unused: true:, noarg: true, latedef: true */
/** File: polyfills.js
* A JavaScript library for XMPP BOSH/XMPP over Websocket.
*
* This file contains some polyfills used by strophe.js
*/
/** PrivateFunction: Function.prototype.bind
* Bind a function to an instance.
*
* This Function object extension method creates a bound method similar
* to those in Python. This means that the 'this' object will point
* to the instance you want. See
*
MDC's bind() documentation and
*
Bound Functions and Function Imports in JavaScript
* for a complete explanation.
*
* This extension already exists in some browsers (namely, Firefox 3), but
* we provide it to support those that don't.
*
* Parameters:
* (Object) obj - The object that will become 'this' in the bound function.
* (Object) argN - An option argument that will be prepended to the
* arguments given for the function call
*
* Returns:
* The bound function.
*/
if (!Function.prototype.bind) {
Function.prototype.bind = function (obj /*, arg1, arg2, ... */)
{
var func = this;
var _slice = Array.prototype.slice;
var _concat = Array.prototype.concat;
var _args = _slice.call(arguments, 1);
return function () {
return func.apply(obj ? obj : this,
_concat.call(_args,
_slice.call(arguments, 0)));
};
};
}
/** PrivateFunction: Array.isArray
* This is a polyfill for the ES5 Array.isArray method.
*/
if (!Array.isArray) {
Array.isArray = function(arg) {
return Object.prototype.toString.call(arg) === '[object Array]';
};
}
/** PrivateFunction: Array.prototype.indexOf
* Return the index of an object in an array.
*
* This function is not supplied by some JavaScript implementations, so
* we provide it if it is missing. This code is from:
* http://developer.mozilla.org/En/Core_JavaScript_1.5_Reference:Objects:Array:indexOf
*
* Parameters:
* (Object) elt - The object to look for.
* (Integer) from - The index from which to start looking. (optional).
*
* Returns:
* The index of elt in the array or -1 if not found.
*/
if (!Array.prototype.indexOf)
{
Array.prototype.indexOf = function(elt /*, from*/)
{
var len = this.length;
var from = Number(arguments[1]) || 0;
from = (from < 0) ? Math.ceil(from) : Math.floor(from);
if (from < 0) {
from += len;
}
for (; from < len; from++) {
if (from in this && this[from] === elt) {
return from;
}
}
return -1;
};
}
/*
This program is distributed under the terms of the MIT license.
Please see the LICENSE file for details.
Copyright 2006-2008, OGG, LLC
*/
/* jshint undef: true, unused: true:, noarg: true, latedef: true */
/*global document, window, setTimeout, clearTimeout, console,
ActiveXObject, Base64, MD5, DOMParser */
// from sha1.js
/*global core_hmac_sha1, binb2str, str_hmac_sha1, str_sha1, b64_hmac_sha1*/
/** File: strophe.js
* A JavaScript library for XMPP BOSH/XMPP over Websocket.
*
* This is the JavaScript version of the Strophe library. Since JavaScript
* had no facilities for persistent TCP connections, this library uses
* Bidirectional-streams Over Synchronous HTTP (BOSH) to emulate
* a persistent, stateful, two-way connection to an XMPP server. More
* information on BOSH can be found in XEP 124.
*
* This version of Strophe also works with WebSockets.
* For more information on XMPP-over WebSocket see this RFC draft:
* http://tools.ietf.org/html/draft-ietf-xmpp-websocket-00
*/
/* All of the Strophe globals are defined in this special function below so
* that references to the globals become closures. This will ensure that
* on page reload, these references will still be available to callbacks
* that are still executing.
*/
var Strophe;
/** Function: $build
* Create a Strophe.Builder.
* This is an alias for 'new Strophe.Builder(name, attrs)'.
*
* Parameters:
* (String) name - The root element name.
* (Object) attrs - The attributes for the root element in object notation.
*
* Returns:
* A new Strophe.Builder object.
*/
function $build(name, attrs) { return new Strophe.Builder(name, attrs); }
/** Function: $msg
* Create a Strophe.Builder with a
element as the root.
*
* Parmaeters:
* (Object) attrs - The
element attributes in object notation.
*
* Returns:
* A new Strophe.Builder object.
*/
/* jshint ignore:start */
function $msg(attrs) { return new Strophe.Builder("message", attrs); }
/* jshint ignore:end */
/** Function: $iq
* Create a Strophe.Builder with an
element as the root.
*
* Parameters:
* (Object) attrs - The
element attributes in object notation.
*
* Returns:
* A new Strophe.Builder object.
*/
function $iq(attrs) { return new Strophe.Builder("iq", attrs); }
/** Function: $pres
* Create a Strophe.Builder with a
element as the root.
*
* Parameters:
* (Object) attrs - The
element attributes in object notation.
*
* Returns:
* A new Strophe.Builder object.
*/
function $pres(attrs) { return new Strophe.Builder("presence", attrs); }
/** Class: Strophe
* An object container for all Strophe library functions.
*
* This class is just a container for all the objects and constants
* used in the library. It is not meant to be instantiated, but to
* provide a namespace for library objects, constants, and functions.
*/
Strophe = {
/** Constant: VERSION
* The version of the Strophe library. Unreleased builds will have
* a version of head-HASH where HASH is a partial revision.
*/
VERSION: "1.1.4dev1",
/** Constants: XMPP Namespace Constants
* Common namespace constants from the XMPP RFCs and XEPs.
*
* NS.HTTPBIND - HTTP BIND namespace from XEP 124.
* NS.BOSH - BOSH namespace from XEP 206.
* NS.CLIENT - Main XMPP client namespace.
* NS.AUTH - Legacy authentication namespace.
* NS.ROSTER - Roster operations namespace.
* NS.PROFILE - Profile namespace.
* NS.DISCO_INFO - Service discovery info namespace from XEP 30.
* NS.DISCO_ITEMS - Service discovery items namespace from XEP 30.
* NS.MUC - Multi-User Chat namespace from XEP 45.
* NS.SASL - XMPP SASL namespace from RFC 3920.
* NS.STREAM - XMPP Streams namespace from RFC 3920.
* NS.BIND - XMPP Binding namespace from RFC 3920.
* NS.SESSION - XMPP Session namespace from RFC 3920.
* NS.XHTML_IM - XHTML-IM namespace from XEP 71.
* NS.XHTML - XHTML body namespace from XEP 71.
*/
NS: {
HTTPBIND: "http://jabber.org/protocol/httpbind",
BOSH: "urn:xmpp:xbosh",
CLIENT: "jabber:client",
AUTH: "jabber:iq:auth",
ROSTER: "jabber:iq:roster",
PROFILE: "jabber:iq:profile",
DISCO_INFO: "http://jabber.org/protocol/disco#info",
DISCO_ITEMS: "http://jabber.org/protocol/disco#items",
MUC: "http://jabber.org/protocol/muc",
SASL: "urn:ietf:params:xml:ns:xmpp-sasl",
STREAM: "http://etherx.jabber.org/streams",
FRAMING: "urn:ietf:params:xml:ns:xmpp-framing",
BIND: "urn:ietf:params:xml:ns:xmpp-bind",
SESSION: "urn:ietf:params:xml:ns:xmpp-session",
VERSION: "jabber:iq:version",
STANZAS: "urn:ietf:params:xml:ns:xmpp-stanzas",
XHTML_IM: "http://jabber.org/protocol/xhtml-im",
XHTML: "http://www.w3.org/1999/xhtml"
},
/** Constants: XHTML_IM Namespace
* contains allowed tags, tag attributes, and css properties.
* Used in the createHtml function to filter incoming html into the allowed XHTML-IM subset.
* See http://xmpp.org/extensions/xep-0071.html#profile-summary for the list of recommended
* allowed tags and their attributes.
*/
XHTML: {
tags: ['a','blockquote','br','cite','em','img','li','ol','p','span','strong','ul','body'],
attributes: {
'a': ['href'],
'blockquote': ['style'],
'br': [],
'cite': ['style'],
'em': [],
'img': ['src', 'alt', 'style', 'height', 'width'],
'li': ['style'],
'ol': ['style'],
'p': ['style'],
'span': ['style'],
'strong': [],
'ul': ['style'],
'body': []
},
css: ['background-color','color','font-family','font-size','font-style','font-weight','margin-left','margin-right','text-align','text-decoration'],
validTag: function(tag)
{
for(var i = 0; i < Strophe.XHTML.tags.length; i++) {
if(tag == Strophe.XHTML.tags[i]) {
return true;
}
}
return false;
},
validAttribute: function(tag, attribute)
{
if(typeof Strophe.XHTML.attributes[tag] !== 'undefined' && Strophe.XHTML.attributes[tag].length > 0) {
for(var i = 0; i < Strophe.XHTML.attributes[tag].length; i++) {
if(attribute == Strophe.XHTML.attributes[tag][i]) {
return true;
}
}
}
return false;
},
validCSS: function(style)
{
for(var i = 0; i < Strophe.XHTML.css.length; i++) {
if(style == Strophe.XHTML.css[i]) {
return true;
}
}
return false;
}
},
/** Constants: Connection Status Constants
* Connection status constants for use by the connection handler
* callback.
*
* Status.ERROR - An error has occurred
* Status.CONNECTING - The connection is currently being made
* Status.CONNFAIL - The connection attempt failed
* Status.AUTHENTICATING - The connection is authenticating
* Status.AUTHFAIL - The authentication attempt failed
* Status.CONNECTED - The connection has succeeded
* Status.DISCONNECTED - The connection has been terminated
* Status.DISCONNECTING - The connection is currently being terminated
* Status.ATTACHED - The connection has been attached
*/
Status: {
ERROR: 0,
CONNECTING: 1,
CONNFAIL: 2,
AUTHENTICATING: 3,
AUTHFAIL: 4,
CONNECTED: 5,
DISCONNECTED: 6,
DISCONNECTING: 7,
ATTACHED: 8,
REDIRECT: 9
},
/** Constants: Log Level Constants
* Logging level indicators.
*
* LogLevel.DEBUG - Debug output
* LogLevel.INFO - Informational output
* LogLevel.WARN - Warnings
* LogLevel.ERROR - Errors
* LogLevel.FATAL - Fatal errors
*/
LogLevel: {
DEBUG: 0,
INFO: 1,
WARN: 2,
ERROR: 3,
FATAL: 4
},
/** PrivateConstants: DOM Element Type Constants
* DOM element types.
*
* ElementType.NORMAL - Normal element.
* ElementType.TEXT - Text data element.
* ElementType.FRAGMENT - XHTML fragment element.
*/
ElementType: {
NORMAL: 1,
TEXT: 3,
CDATA: 4,
FRAGMENT: 11
},
/** PrivateConstants: Timeout Values
* Timeout values for error states. These values are in seconds.
* These should not be changed unless you know exactly what you are
* doing.
*
* TIMEOUT - Timeout multiplier. A waiting request will be considered
* failed after Math.floor(TIMEOUT * wait) seconds have elapsed.
* This defaults to 1.1, and with default wait, 66 seconds.
* SECONDARY_TIMEOUT - Secondary timeout multiplier. In cases where
* Strophe can detect early failure, it will consider the request
* failed if it doesn't return after
* Math.floor(SECONDARY_TIMEOUT * wait) seconds have elapsed.
* This defaults to 0.1, and with default wait, 6 seconds.
*/
TIMEOUT: 1.1,
SECONDARY_TIMEOUT: 0.1,
/** Function: addNamespace
* This function is used to extend the current namespaces in
* Strophe.NS. It takes a key and a value with the key being the
* name of the new namespace, with its actual value.
* For example:
* Strophe.addNamespace('PUBSUB', "http://jabber.org/protocol/pubsub");
*
* Parameters:
* (String) name - The name under which the namespace will be
* referenced under Strophe.NS
* (String) value - The actual namespace.
*/
addNamespace: function (name, value)
{
Strophe.NS[name] = value;
},
/** Function: forEachChild
* Map a function over some or all child elements of a given element.
*
* This is a small convenience function for mapping a function over
* some or all of the children of an element. If elemName is null, all
* children will be passed to the function, otherwise only children
* whose tag names match elemName will be passed.
*
* Parameters:
* (XMLElement) elem - The element to operate on.
* (String) elemName - The child element tag name filter.
* (Function) func - The function to apply to each child. This
* function should take a single argument, a DOM element.
*/
forEachChild: function (elem, elemName, func)
{
var i, childNode;
for (i = 0; i < elem.childNodes.length; i++) {
childNode = elem.childNodes[i];
if (childNode.nodeType == Strophe.ElementType.NORMAL &&
(!elemName || this.isTagEqual(childNode, elemName))) {
func(childNode);
}
}
},
/** Function: isTagEqual
* Compare an element's tag name with a string.
*
* This function is case sensitive.
*
* Parameters:
* (XMLElement) el - A DOM element.
* (String) name - The element name.
*
* Returns:
* true if the element's tag name matches _el_, and false
* otherwise.
*/
isTagEqual: function (el, name)
{
return el.tagName == name;
},
/** PrivateVariable: _xmlGenerator
* _Private_ variable that caches a DOM document to
* generate elements.
*/
_xmlGenerator: null,
/** PrivateFunction: _makeGenerator
* _Private_ function that creates a dummy XML DOM document to serve as
* an element and text node generator.
*/
_makeGenerator: function () {
var doc;
// IE9 does implement createDocument(); however, using it will cause the browser to leak memory on page unload.
// Here, we test for presence of createDocument() plus IE's proprietary documentMode attribute, which would be
// less than 10 in the case of IE9 and below.
if (document.implementation.createDocument === undefined ||
document.implementation.createDocument && document.documentMode && document.documentMode < 10) {
doc = this._getIEXmlDom();
doc.appendChild(doc.createElement('strophe'));
} else {
doc = document.implementation
.createDocument('jabber:client', 'strophe', null);
}
return doc;
},
/** Function: xmlGenerator
* Get the DOM document to generate elements.
*
* Returns:
* The currently used DOM document.
*/
xmlGenerator: function () {
if (!Strophe._xmlGenerator) {
Strophe._xmlGenerator = Strophe._makeGenerator();
}
return Strophe._xmlGenerator;
},
/** PrivateFunction: _getIEXmlDom
* Gets IE xml doc object
*
* Returns:
* A Microsoft XML DOM Object
* See Also:
* http://msdn.microsoft.com/en-us/library/ms757837%28VS.85%29.aspx
*/
_getIEXmlDom : function() {
var doc = null;
var docStrings = [
"Msxml2.DOMDocument.6.0",
"Msxml2.DOMDocument.5.0",
"Msxml2.DOMDocument.4.0",
"MSXML2.DOMDocument.3.0",
"MSXML2.DOMDocument",
"MSXML.DOMDocument",
"Microsoft.XMLDOM"
];
for (var d = 0; d < docStrings.length; d++) {
if (doc === null) {
try {
doc = new ActiveXObject(docStrings[d]);
} catch (e) {
doc = null;
}
} else {
break;
}
}
return doc;
},
/** Function: xmlElement
* Create an XML DOM element.
*
* This function creates an XML DOM element correctly across all
* implementations. Note that these are not HTML DOM elements, which
* aren't appropriate for XMPP stanzas.
*
* Parameters:
* (String) name - The name for the element.
* (Array|Object) attrs - An optional array or object containing
* key/value pairs to use as element attributes. The object should
* be in the format {'key': 'value'} or {key: 'value'}. The array
* should have the format [['key1', 'value1'], ['key2', 'value2']].
* (String) text - The text child data for the element.
*
* Returns:
* A new XML DOM element.
*/
xmlElement: function (name)
{
if (!name) { return null; }
var node = Strophe.xmlGenerator().createElement(name);
// FIXME: this should throw errors if args are the wrong type or
// there are more than two optional args
var a, i, k;
for (a = 1; a < arguments.length; a++) {
if (!arguments[a]) { continue; }
if (typeof(arguments[a]) == "string" ||
typeof(arguments[a]) == "number") {
node.appendChild(Strophe.xmlTextNode(arguments[a]));
} else if (typeof(arguments[a]) == "object" &&
typeof(arguments[a].sort) == "function") {
for (i = 0; i < arguments[a].length; i++) {
if (typeof(arguments[a][i]) == "object" &&
typeof(arguments[a][i].sort) == "function") {
node.setAttribute(arguments[a][i][0],
arguments[a][i][1]);
}
}
} else if (typeof(arguments[a]) == "object") {
for (k in arguments[a]) {
if (arguments[a].hasOwnProperty(k)) {
node.setAttribute(k, arguments[a][k]);
}
}
}
}
return node;
},
/* Function: xmlescape
* Excapes invalid xml characters.
*
* Parameters:
* (String) text - text to escape.
*
* Returns:
* Escaped text.
*/
xmlescape: function(text)
{
text = text.replace(/\&/g, "&");
text = text.replace(//g, ">");
text = text.replace(/'/g, "'");
text = text.replace(/"/g, """);
return text;
},
/* Function: xmlunescape
* Unexcapes invalid xml characters.
*
* Parameters:
* (String) text - text to unescape.
*
* Returns:
* Unescaped text.
*/
xmlunescape: function(text)
{
text = text.replace(/\&/g, "&");
text = text.replace(/</g, "<");
text = text.replace(/>/g, ">");
text = text.replace(/'/g, "'");
text = text.replace(/"/g, "\"");
return text;
},
/** Function: xmlTextNode
* Creates an XML DOM text node.
*
* Provides a cross implementation version of document.createTextNode.
*
* Parameters:
* (String) text - The content of the text node.
*
* Returns:
* A new XML DOM text node.
*/
xmlTextNode: function (text)
{
return Strophe.xmlGenerator().createTextNode(text);
},
/** Function: xmlHtmlNode
* Creates an XML DOM html node.
*
* Parameters:
* (String) html - The content of the html node.
*
* Returns:
* A new XML DOM text node.
*/
xmlHtmlNode: function (html)
{
var node;
//ensure text is escaped
if (window.DOMParser) {
var parser = new DOMParser();
node = parser.parseFromString(html, "text/xml");
} else {
node = new ActiveXObject("Microsoft.XMLDOM");
node.async="false";
node.loadXML(html);
}
return node;
},
/** Function: getText
* Get the concatenation of all text children of an element.
*
* Parameters:
* (XMLElement) elem - A DOM element.
*
* Returns:
* A String with the concatenated text of all text element children.
*/
getText: function (elem)
{
if (!elem) { return null; }
var str = "";
if (elem.childNodes.length === 0 && elem.nodeType ==
Strophe.ElementType.TEXT) {
str += elem.nodeValue;
}
for (var i = 0; i < elem.childNodes.length; i++) {
if (elem.childNodes[i].nodeType == Strophe.ElementType.TEXT) {
str += elem.childNodes[i].nodeValue;
}
}
return Strophe.xmlescape(str);
},
/** Function: copyElement
* Copy an XML DOM element.
*
* This function copies a DOM element and all its descendants and returns
* the new copy.
*
* Parameters:
* (XMLElement) elem - A DOM element.
*
* Returns:
* A new, copied DOM element tree.
*/
copyElement: function (elem)
{
var i, el;
if (elem.nodeType == Strophe.ElementType.NORMAL) {
el = Strophe.xmlElement(elem.tagName);
for (i = 0; i < elem.attributes.length; i++) {
el.setAttribute(elem.attributes[i].nodeName,
elem.attributes[i].value);
}
for (i = 0; i < elem.childNodes.length; i++) {
el.appendChild(Strophe.copyElement(elem.childNodes[i]));
}
} else if (elem.nodeType == Strophe.ElementType.TEXT) {
el = Strophe.xmlGenerator().createTextNode(elem.nodeValue);
}
return el;
},
/** Function: createHtml
* Copy an HTML DOM element into an XML DOM.
*
* This function copies a DOM element and all its descendants and returns
* the new copy.
*
* Parameters:
* (HTMLElement) elem - A DOM element.
*
* Returns:
* A new, copied DOM element tree.
*/
createHtml: function (elem)
{
var i, el, j, tag, attribute, value, css, cssAttrs, attr, cssName, cssValue;
if (elem.nodeType == Strophe.ElementType.NORMAL) {
tag = elem.nodeName;
if(Strophe.XHTML.validTag(tag)) {
try {
el = Strophe.xmlElement(tag);
for(i = 0; i < Strophe.XHTML.attributes[tag].length; i++) {
attribute = Strophe.XHTML.attributes[tag][i];
value = elem.getAttribute(attribute);
if(typeof value == 'undefined' || value === null || value === '' || value === false || value === 0) {
continue;
}
if(attribute == 'style' && typeof value == 'object') {
if(typeof value.cssText != 'undefined') {
value = value.cssText; // we're dealing with IE, need to get CSS out
}
}
// filter out invalid css styles
if(attribute == 'style') {
css = [];
cssAttrs = value.split(';');
for(j = 0; j < cssAttrs.length; j++) {
attr = cssAttrs[j].split(':');
cssName = attr[0].replace(/^\s*/, "").replace(/\s*$/, "").toLowerCase();
if(Strophe.XHTML.validCSS(cssName)) {
cssValue = attr[1].replace(/^\s*/, "").replace(/\s*$/, "");
css.push(cssName + ': ' + cssValue);
}
}
if(css.length > 0) {
value = css.join('; ');
el.setAttribute(attribute, value);
}
} else {
el.setAttribute(attribute, value);
}
}
for (i = 0; i < elem.childNodes.length; i++) {
el.appendChild(Strophe.createHtml(elem.childNodes[i]));
}
} catch(e) { // invalid elements
el = Strophe.xmlTextNode('');
}
} else {
el = Strophe.xmlGenerator().createDocumentFragment();
for (i = 0; i < elem.childNodes.length; i++) {
el.appendChild(Strophe.createHtml(elem.childNodes[i]));
}
}
} else if (elem.nodeType == Strophe.ElementType.FRAGMENT) {
el = Strophe.xmlGenerator().createDocumentFragment();
for (i = 0; i < elem.childNodes.length; i++) {
el.appendChild(Strophe.createHtml(elem.childNodes[i]));
}
} else if (elem.nodeType == Strophe.ElementType.TEXT) {
el = Strophe.xmlTextNode(elem.nodeValue);
}
return el;
},
/** Function: escapeNode
* Escape the node part (also called local part) of a JID.
*
* Parameters:
* (String) node - A node (or local part).
*
* Returns:
* An escaped node (or local part).
*/
escapeNode: function (node)
{
if (typeof node !== "string") { return node; }
return node.replace(/^\s+|\s+$/g, '')
.replace(/\\/g, "\\5c")
.replace(/ /g, "\\20")
.replace(/\"/g, "\\22")
.replace(/\&/g, "\\26")
.replace(/\'/g, "\\27")
.replace(/\//g, "\\2f")
.replace(/:/g, "\\3a")
.replace(//g, "\\3e")
.replace(/@/g, "\\40");
},
/** Function: unescapeNode
* Unescape a node part (also called local part) of a JID.
*
* Parameters:
* (String) node - A node (or local part).
*
* Returns:
* An unescaped node (or local part).
*/
unescapeNode: function (node)
{
if (typeof node !== "string") { return node; }
return node.replace(/\\20/g, " ")
.replace(/\\22/g, '"')
.replace(/\\26/g, "&")
.replace(/\\27/g, "'")
.replace(/\\2f/g, "/")
.replace(/\\3a/g, ":")
.replace(/\\3c/g, "<")
.replace(/\\3e/g, ">")
.replace(/\\40/g, "@")
.replace(/\\5c/g, "\\");
},
/** Function: getNodeFromJid
* Get the node portion of a JID String.
*
* Parameters:
* (String) jid - A JID.
*
* Returns:
* A String containing the node.
*/
getNodeFromJid: function (jid)
{
if (jid.indexOf("@") < 0) { return null; }
return jid.split("@")[0];
},
/** Function: getDomainFromJid
* Get the domain portion of a JID String.
*
* Parameters:
* (String) jid - A JID.
*
* Returns:
* A String containing the domain.
*/
getDomainFromJid: function (jid)
{
var bare = Strophe.getBareJidFromJid(jid);
if (bare.indexOf("@") < 0) {
return bare;
} else {
var parts = bare.split("@");
parts.splice(0, 1);
return parts.join('@');
}
},
/** Function: getResourceFromJid
* Get the resource portion of a JID String.
*
* Parameters:
* (String) jid - A JID.
*
* Returns:
* A String containing the resource.
*/
getResourceFromJid: function (jid)
{
var s = jid.split("/");
if (s.length < 2) { return null; }
s.splice(0, 1);
return s.join('/');
},
/** Function: getBareJidFromJid
* Get the bare JID from a JID String.
*
* Parameters:
* (String) jid - A JID.
*
* Returns:
* A String containing the bare JID.
*/
getBareJidFromJid: function (jid)
{
return jid ? jid.split("/")[0] : null;
},
/** Function: log
* User overrideable logging function.
*
* This function is called whenever the Strophe library calls any
* of the logging functions. The default implementation of this
* function does nothing. If client code wishes to handle the logging
* messages, it should override this with
* > Strophe.log = function (level, msg) {
* > (user code here)
* > };
*
* Please note that data sent and received over the wire is logged
* via Strophe.Connection.rawInput() and Strophe.Connection.rawOutput().
*
* The different levels and their meanings are
*
* DEBUG - Messages useful for debugging purposes.
* INFO - Informational messages. This is mostly information like
* 'disconnect was called' or 'SASL auth succeeded'.
* WARN - Warnings about potential problems. This is mostly used
* to report transient connection errors like request timeouts.
* ERROR - Some error occurred.
* FATAL - A non-recoverable fatal error occurred.
*
* Parameters:
* (Integer) level - The log level of the log message. This will
* be one of the values in Strophe.LogLevel.
* (String) msg - The log message.
*/
/* jshint ignore:start */
log: function (level, msg)
{
return;
},
/* jshint ignore:end */
/** Function: debug
* Log a message at the Strophe.LogLevel.DEBUG level.
*
* Parameters:
* (String) msg - The log message.
*/
debug: function(msg)
{
this.log(this.LogLevel.DEBUG, msg);
},
/** Function: info
* Log a message at the Strophe.LogLevel.INFO level.
*
* Parameters:
* (String) msg - The log message.
*/
info: function (msg)
{
this.log(this.LogLevel.INFO, msg);
},
/** Function: warn
* Log a message at the Strophe.LogLevel.WARN level.
*
* Parameters:
* (String) msg - The log message.
*/
warn: function (msg)
{
this.log(this.LogLevel.WARN, msg);
},
/** Function: error
* Log a message at the Strophe.LogLevel.ERROR level.
*
* Parameters:
* (String) msg - The log message.
*/
error: function (msg)
{
this.log(this.LogLevel.ERROR, msg);
},
/** Function: fatal
* Log a message at the Strophe.LogLevel.FATAL level.
*
* Parameters:
* (String) msg - The log message.
*/
fatal: function (msg)
{
this.log(this.LogLevel.FATAL, msg);
},
/** Function: serialize
* Render a DOM element and all descendants to a String.
*
* Parameters:
* (XMLElement) elem - A DOM element.
*
* Returns:
* The serialized element tree as a String.
*/
serialize: function (elem)
{
var result;
if (!elem) { return null; }
if (typeof(elem.tree) === "function") {
elem = elem.tree();
}
var nodeName = elem.nodeName;
var i, child;
if (elem.getAttribute("_realname")) {
nodeName = elem.getAttribute("_realname");
}
result = "<" + nodeName;
for (i = 0; i < elem.attributes.length; i++) {
if(elem.attributes[i].nodeName != "_realname") {
result += " " + elem.attributes[i].nodeName +
"='" + elem.attributes[i].value
.replace(/&/g, "&")
.replace(/\'/g, "'")
.replace(/>/g, ">")
.replace(/ 0) {
result += ">";
for (i = 0; i < elem.childNodes.length; i++) {
child = elem.childNodes[i];
switch( child.nodeType ){
case Strophe.ElementType.NORMAL:
// normal element, so recurse
result += Strophe.serialize(child);
break;
case Strophe.ElementType.TEXT:
// text element to escape values
result += Strophe.xmlescape(child.nodeValue);
break;
case Strophe.ElementType.CDATA:
// cdata section so don't escape values
result += "";
}
}
result += "";
} else {
result += "/>";
}
return result;
},
/** PrivateVariable: _requestId
* _Private_ variable that keeps track of the request ids for
* connections.
*/
_requestId: 0,
/** PrivateVariable: Strophe.connectionPlugins
* _Private_ variable Used to store plugin names that need
* initialization on Strophe.Connection construction.
*/
_connectionPlugins: {},
/** Function: addConnectionPlugin
* Extends the Strophe.Connection object with the given plugin.
*
* Parameters:
* (String) name - The name of the extension.
* (Object) ptype - The plugin's prototype.
*/
addConnectionPlugin: function (name, ptype)
{
Strophe._connectionPlugins[name] = ptype;
}
};
/** Class: Strophe.Builder
* XML DOM builder.
*
* This object provides an interface similar to JQuery but for building
* DOM element easily and rapidly. All the functions except for toString()
* and tree() return the object, so calls can be chained. Here's an
* example using the $iq() builder helper.
* > $iq({to: 'you', from: 'me', type: 'get', id: '1'})
* > .c('query', {xmlns: 'strophe:example'})
* > .c('example')
* > .toString()
* The above generates this XML fragment
* >
* >
* >
* >
* The corresponding DOM manipulations to get a similar fragment would be
* a lot more tedious and probably involve several helper variables.
*
* Since adding children makes new operations operate on the child, up()
* is provided to traverse up the tree. To add two children, do
* > builder.c('child1', ...).up().c('child2', ...)
* The next operation on the Builder will be relative to the second child.
*/
/** Constructor: Strophe.Builder
* Create a Strophe.Builder object.
*
* The attributes should be passed in object notation. For example
* > var b = new Builder('message', {to: 'you', from: 'me'});
* or
* > var b = new Builder('messsage', {'xml:lang': 'en'});
*
* Parameters:
* (String) name - The name of the root element.
* (Object) attrs - The attributes for the root element in object notation.
*
* Returns:
* A new Strophe.Builder.
*/
Strophe.Builder = function (name, attrs)
{
// Set correct namespace for jabber:client elements
if (name == "presence" || name == "message" || name == "iq") {
if (attrs && !attrs.xmlns) {
attrs.xmlns = Strophe.NS.CLIENT;
} else if (!attrs) {
attrs = {xmlns: Strophe.NS.CLIENT};
}
}
// Holds the tree being built.
this.nodeTree = Strophe.xmlElement(name, attrs);
// Points to the current operation node.
this.node = this.nodeTree;
};
Strophe.Builder.prototype = {
/** Function: tree
* Return the DOM tree.
*
* This function returns the current DOM tree as an element object. This
* is suitable for passing to functions like Strophe.Connection.send().
*
* Returns:
* The DOM tree as a element object.
*/
tree: function ()
{
return this.nodeTree;
},
/** Function: toString
* Serialize the DOM tree to a String.
*
* This function returns a string serialization of the current DOM
* tree. It is often used internally to pass data to a
* Strophe.Request object.
*
* Returns:
* The serialized DOM tree in a String.
*/
toString: function ()
{
return Strophe.serialize(this.nodeTree);
},
/** Function: up
* Make the current parent element the new current element.
*
* This function is often used after c() to traverse back up the tree.
* For example, to add two children to the same element
* > builder.c('child1', {}).up().c('child2', {});
*
* Returns:
* The Stophe.Builder object.
*/
up: function ()
{
this.node = this.node.parentNode;
return this;
},
/** Function: attrs
* Add or modify attributes of the current element.
*
* The attributes should be passed in object notation. This function
* does not move the current element pointer.
*
* Parameters:
* (Object) moreattrs - The attributes to add/modify in object notation.
*
* Returns:
* The Strophe.Builder object.
*/
attrs: function (moreattrs)
{
for (var k in moreattrs) {
if (moreattrs.hasOwnProperty(k)) {
this.node.setAttribute(k, moreattrs[k]);
}
}
return this;
},
/** Function: c
* Add a child to the current element and make it the new current
* element.
*
* This function moves the current element pointer to the child,
* unless text is provided. If you need to add another child, it
* is necessary to use up() to go back to the parent in the tree.
*
* Parameters:
* (String) name - The name of the child.
* (Object) attrs - The attributes of the child in object notation.
* (String) text - The text to add to the child.
*
* Returns:
* The Strophe.Builder object.
*/
c: function (name, attrs, text)
{
var child = Strophe.xmlElement(name, attrs, text);
this.node.appendChild(child);
if (!text) {
this.node = child;
}
return this;
},
/** Function: cnode
* Add a child to the current element and make it the new current
* element.
*
* This function is the same as c() except that instead of using a
* name and an attributes object to create the child it uses an
* existing DOM element object.
*
* Parameters:
* (XMLElement) elem - A DOM element.
*
* Returns:
* The Strophe.Builder object.
*/
cnode: function (elem)
{
var impNode;
var xmlGen = Strophe.xmlGenerator();
try {
impNode = (xmlGen.importNode !== undefined);
}
catch (e) {
impNode = false;
}
var newElem = impNode ?
xmlGen.importNode(elem, true) :
Strophe.copyElement(elem);
this.node.appendChild(newElem);
this.node = newElem;
return this;
},
/** Function: t
* Add a child text element.
*
* This *does not* make the child the new current element since there
* are no children of text elements.
*
* Parameters:
* (String) text - The text data to append to the current element.
*
* Returns:
* The Strophe.Builder object.
*/
t: function (text)
{
var child = Strophe.xmlTextNode(text);
this.node.appendChild(child);
return this;
},
/** Function: h
* Replace current element contents with the HTML passed in.
*
* This *does not* make the child the new current element
*
* Parameters:
* (String) html - The html to insert as contents of current element.
*
* Returns:
* The Strophe.Builder object.
*/
h: function (html)
{
var fragment = document.createElement('body');
// force the browser to try and fix any invalid HTML tags
fragment.innerHTML = html;
// copy cleaned html into an xml dom
var xhtml = Strophe.createHtml(fragment);
while(xhtml.childNodes.length > 0) {
this.node.appendChild(xhtml.childNodes[0]);
}
return this;
}
};
/** PrivateClass: Strophe.Handler
* _Private_ helper class for managing stanza handlers.
*
* A Strophe.Handler encapsulates a user provided callback function to be
* executed when matching stanzas are received by the connection.
* Handlers can be either one-off or persistant depending on their
* return value. Returning true will cause a Handler to remain active, and
* returning false will remove the Handler.
*
* Users will not use Strophe.Handler objects directly, but instead they
* will use Strophe.Connection.addHandler() and
* Strophe.Connection.deleteHandler().
*/
/** PrivateConstructor: Strophe.Handler
* Create and initialize a new Strophe.Handler.
*
* Parameters:
* (Function) handler - A function to be executed when the handler is run.
* (String) ns - The namespace to match.
* (String) name - The element name to match.
* (String) type - The element type to match.
* (String) id - The element id attribute to match.
* (String) from - The element from attribute to match.
* (Object) options - Handler options
*
* Returns:
* A new Strophe.Handler object.
*/
Strophe.Handler = function (handler, ns, name, type, id, from, options)
{
this.handler = handler;
this.ns = ns;
this.name = name;
this.type = type;
this.id = id;
this.options = options || {matchBare: false};
// default matchBare to false if undefined
if (!this.options.matchBare) {
this.options.matchBare = false;
}
if (this.options.matchBare) {
this.from = from ? Strophe.getBareJidFromJid(from) : null;
} else {
this.from = from;
}
// whether the handler is a user handler or a system handler
this.user = true;
};
Strophe.Handler.prototype = {
/** PrivateFunction: isMatch
* Tests if a stanza matches the Strophe.Handler.
*
* Parameters:
* (XMLElement) elem - The XML element to test.
*
* Returns:
* true if the stanza matches and false otherwise.
*/
isMatch: function (elem)
{
var nsMatch;
var from = null;
if (this.options.matchBare) {
from = Strophe.getBareJidFromJid(elem.getAttribute('from'));
} else {
from = elem.getAttribute('from');
}
nsMatch = false;
if (!this.ns) {
nsMatch = true;
} else {
var that = this;
Strophe.forEachChild(elem, null, function (elem) {
if (elem.getAttribute("xmlns") == that.ns) {
nsMatch = true;
}
});
nsMatch = nsMatch || elem.getAttribute("xmlns") == this.ns;
}
var elem_type = elem.getAttribute("type");
if (nsMatch &&
(!this.name || Strophe.isTagEqual(elem, this.name)) &&
(!this.type || (Array.isArray(this.type) ? this.type.indexOf(elem_type) != -1 : elem_type == this.type)) &&
(!this.id || elem.getAttribute("id") == this.id) &&
(!this.from || from == this.from)) {
return true;
}
return false;
},
/** PrivateFunction: run
* Run the callback on a matching stanza.
*
* Parameters:
* (XMLElement) elem - The DOM element that triggered the
* Strophe.Handler.
*
* Returns:
* A boolean indicating if the handler should remain active.
*/
run: function (elem)
{
var result = null;
try {
result = this.handler(elem);
} catch (e) {
if (e.sourceURL) {
Strophe.fatal("error: " + this.handler +
" " + e.sourceURL + ":" +
e.line + " - " + e.name + ": " + e.message);
} else if (e.fileName) {
if (typeof(console) != "undefined") {
console.trace();
console.error(this.handler, " - error - ", e, e.message);
}
Strophe.fatal("error: " + this.handler + " " +
e.fileName + ":" + e.lineNumber + " - " +
e.name + ": " + e.message);
} else {
Strophe.fatal("error: " + e.message + "\n" + e.stack);
}
throw e;
}
return result;
},
/** PrivateFunction: toString
* Get a String representation of the Strophe.Handler object.
*
* Returns:
* A String.
*/
toString: function ()
{
return "{Handler: " + this.handler + "(" + this.name + "," +
this.id + "," + this.ns + ")}";
}
};
/** PrivateClass: Strophe.TimedHandler
* _Private_ helper class for managing timed handlers.
*
* A Strophe.TimedHandler encapsulates a user provided callback that
* should be called after a certain period of time or at regular
* intervals. The return value of the callback determines whether the
* Strophe.TimedHandler will continue to fire.
*
* Users will not use Strophe.TimedHandler objects directly, but instead
* they will use Strophe.Connection.addTimedHandler() and
* Strophe.Connection.deleteTimedHandler().
*/
/** PrivateConstructor: Strophe.TimedHandler
* Create and initialize a new Strophe.TimedHandler object.
*
* Parameters:
* (Integer) period - The number of milliseconds to wait before the
* handler is called.
* (Function) handler - The callback to run when the handler fires. This
* function should take no arguments.
*
* Returns:
* A new Strophe.TimedHandler object.
*/
Strophe.TimedHandler = function (period, handler)
{
this.period = period;
this.handler = handler;
this.lastCalled = new Date().getTime();
this.user = true;
};
Strophe.TimedHandler.prototype = {
/** PrivateFunction: run
* Run the callback for the Strophe.TimedHandler.
*
* Returns:
* true if the Strophe.TimedHandler should be called again, and false
* otherwise.
*/
run: function ()
{
this.lastCalled = new Date().getTime();
return this.handler();
},
/** PrivateFunction: reset
* Reset the last called time for the Strophe.TimedHandler.
*/
reset: function ()
{
this.lastCalled = new Date().getTime();
},
/** PrivateFunction: toString
* Get a string representation of the Strophe.TimedHandler object.
*
* Returns:
* The string representation.
*/
toString: function ()
{
return "{TimedHandler: " + this.handler + "(" + this.period +")}";
}
};
/** Class: Strophe.Connection
* XMPP Connection manager.
*
* This class is the main part of Strophe. It manages a BOSH connection
* to an XMPP server and dispatches events to the user callbacks as
* data arrives. It supports SASL PLAIN, SASL DIGEST-MD5, SASL SCRAM-SHA1
* and legacy authentication.
*
* After creating a Strophe.Connection object, the user will typically
* call connect() with a user supplied callback to handle connection level
* events like authentication failure, disconnection, or connection
* complete.
*
* The user will also have several event handlers defined by using
* addHandler() and addTimedHandler(). These will allow the user code to
* respond to interesting stanzas or do something periodically with the
* connection. These handlers will be active once authentication is
* finished.
*
* To send data to the connection, use send().
*/
/** Constructor: Strophe.Connection
* Create and initialize a Strophe.Connection object.
*
* The transport-protocol for this connection will be chosen automatically
* based on the given service parameter. URLs starting with "ws://" or
* "wss://" will use WebSockets, URLs starting with "http://", "https://"
* or without a protocol will use BOSH.
*
* To make Strophe connect to the current host you can leave out the protocol
* and host part and just pass the path, e.g.
*
* > var conn = new Strophe.Connection("/http-bind/");
*
* WebSocket options:
*
* If you want to connect to the current host with a WebSocket connection you
* can tell Strophe to use WebSockets through a "protocol" attribute in the
* optional options parameter. Valid values are "ws" for WebSocket and "wss"
* for Secure WebSocket.
* So to connect to "wss://CURRENT_HOSTNAME/xmpp-websocket" you would call
*
* > var conn = new Strophe.Connection("/xmpp-websocket/", {protocol: "wss"});
*
* Note that relative URLs _NOT_ starting with a "/" will also include the path
* of the current site.
*
* Also because downgrading security is not permitted by browsers, when using
* relative URLs both BOSH and WebSocket connections will use their secure
* variants if the current connection to the site is also secure (https).
*
* BOSH options:
*
* by adding "sync" to the options, you can control if requests will
* be made synchronously or not. The default behaviour is asynchronous.
* If you want to make requests synchronous, make "sync" evaluate to true:
* > var conn = new Strophe.Connection("/http-bind/", {sync: true});
* You can also toggle this on an already established connection:
* > conn.options.sync = true;
*
*
* Parameters:
* (String) service - The BOSH or WebSocket service URL.
* (Object) options - A hash of configuration options
*
* Returns:
* A new Strophe.Connection object.
*/
Strophe.Connection = function (service, options)
{
// The service URL
this.service = service;
// Configuration options
this.options = options || {};
var proto = this.options.protocol || "";
// Select protocal based on service or options
if (service.indexOf("ws:") === 0 || service.indexOf("wss:") === 0 ||
proto.indexOf("ws") === 0) {
this._proto = new Strophe.Websocket(this);
} else {
this._proto = new Strophe.Bosh(this);
}
/* The connected JID. */
this.jid = "";
/* the JIDs domain */
this.domain = null;
/* stream:features */
this.features = null;
// SASL
this._sasl_data = {};
this.do_session = false;
this.do_bind = false;
// handler lists
this.timedHandlers = [];
this.handlers = [];
this.removeTimeds = [];
this.removeHandlers = [];
this.addTimeds = [];
this.addHandlers = [];
this._authentication = {};
this._idleTimeout = null;
this._disconnectTimeout = null;
this.do_authentication = true;
this.authenticated = false;
this.disconnecting = false;
this.connected = false;
this.paused = false;
this._data = [];
this._uniqueId = 0;
this._sasl_success_handler = null;
this._sasl_failure_handler = null;
this._sasl_challenge_handler = null;
// Max retries before disconnecting
this.maxRetries = 5;
// setup onIdle callback every 1/10th of a second
this._idleTimeout = setTimeout(this._onIdle.bind(this), 100);
// initialize plugins
for (var k in Strophe._connectionPlugins) {
if (Strophe._connectionPlugins.hasOwnProperty(k)) {
var ptype = Strophe._connectionPlugins[k];
// jslint complaints about the below line, but this is fine
var F = function () {}; // jshint ignore:line
F.prototype = ptype;
this[k] = new F();
this[k].init(this);
}
}
};
Strophe.Connection.prototype = {
/** Function: reset
* Reset the connection.
*
* This function should be called after a connection is disconnected
* before that connection is reused.
*/
reset: function ()
{
this._proto._reset();
// SASL
this.do_session = false;
this.do_bind = false;
// handler lists
this.timedHandlers = [];
this.handlers = [];
this.removeTimeds = [];
this.removeHandlers = [];
this.addTimeds = [];
this.addHandlers = [];
this._authentication = {};
this.authenticated = false;
this.disconnecting = false;
this.connected = false;
this._data = [];
this._requests = [];
this._uniqueId = 0;
},
/** Function: pause
* Pause the request manager.
*
* This will prevent Strophe from sending any more requests to the
* server. This is very useful for temporarily pausing
* BOSH-Connections while a lot of send() calls are happening quickly.
* This causes Strophe to send the data in a single request, saving
* many request trips.
*/
pause: function ()
{
this.paused = true;
},
/** Function: resume
* Resume the request manager.
*
* This resumes after pause() has been called.
*/
resume: function ()
{
this.paused = false;
},
/** Function: getUniqueId
* Generate a unique ID for use in
elements.
*
* All
stanzas are required to have unique id attributes. This
* function makes creating these easy. Each connection instance has
* a counter which starts from zero, and the value of this counter
* plus a colon followed by the suffix becomes the unique id. If no
* suffix is supplied, the counter is used as the unique id.
*
* Suffixes are used to make debugging easier when reading the stream
* data, and their use is recommended. The counter resets to 0 for
* every new connection for the same reason. For connections to the
* same server that authenticate the same way, all the ids should be
* the same, which makes it easy to see changes. This is useful for
* automated testing as well.
*
* Parameters:
* (String) suffix - A optional suffix to append to the id.
*
* Returns:
* A unique string to be used for the id attribute.
*/
getUniqueId: function (suffix)
{
if (typeof(suffix) == "string" || typeof(suffix) == "number") {
return ++this._uniqueId + ":" + suffix;
} else {
return ++this._uniqueId + "";
}
},
/** Function: connect
* Starts the connection process.
*
* As the connection process proceeds, the user supplied callback will
* be triggered multiple times with status updates. The callback
* should take two arguments - the status code and the error condition.
*
* The status code will be one of the values in the Strophe.Status
* constants. The error condition will be one of the conditions
* defined in RFC 3920 or the condition 'strophe-parsererror'.
*
* The Parameters _wait_, _hold_ and _route_ are optional and only relevant
* for BOSH connections. Please see XEP 124 for a more detailed explanation
* of the optional parameters.
*
* Parameters:
* (String) jid - The user's JID. This may be a bare JID,
* or a full JID. If a node is not supplied, SASL ANONYMOUS
* authentication will be attempted.
* (String) pass - The user's password.
* (Function) callback - The connect callback function.
* (Integer) wait - The optional HTTPBIND wait value. This is the
* time the server will wait before returning an empty result for
* a request. The default setting of 60 seconds is recommended.
* (Integer) hold - The optional HTTPBIND hold value. This is the
* number of connections the server will hold at one time. This
* should almost always be set to 1 (the default).
* (String) route - The optional route value.
*/
connect: function (jid, pass, callback, wait, hold, route)
{
this.jid = jid;
/** Variable: authzid
* Authorization identity.
*/
this.authzid = Strophe.getBareJidFromJid(this.jid);
/** Variable: authcid
* Authentication identity (User name).
*/
this.authcid = Strophe.getNodeFromJid(this.jid);
/** Variable: pass
* Authentication identity (User password).
*/
this.pass = pass;
/** Variable: servtype
* Digest MD5 compatibility.
*/
this.servtype = "xmpp";
this.connect_callback = callback;
this.disconnecting = false;
this.connected = false;
this.authenticated = false;
// parse jid for domain
this.domain = Strophe.getDomainFromJid(this.jid);
this._changeConnectStatus(Strophe.Status.CONNECTING, null);
this._proto._connect(wait, hold, route);
},
/** Function: attach
* Attach to an already created and authenticated BOSH session.
*
* This function is provided to allow Strophe to attach to BOSH
* sessions which have been created externally, perhaps by a Web
* application. This is often used to support auto-login type features
* without putting user credentials into the page.
*
* Parameters:
* (String) jid - The full JID that is bound by the session.
* (String) sid - The SID of the BOSH session.
* (String) rid - The current RID of the BOSH session. This RID
* will be used by the next request.
* (Function) callback The connect callback function.
* (Integer) wait - The optional HTTPBIND wait value. This is the
* time the server will wait before returning an empty result for
* a request. The default setting of 60 seconds is recommended.
* Other settings will require tweaks to the Strophe.TIMEOUT value.
* (Integer) hold - The optional HTTPBIND hold value. This is the
* number of connections the server will hold at one time. This
* should almost always be set to 1 (the default).
* (Integer) wind - The optional HTTBIND window value. This is the
* allowed range of request ids that are valid. The default is 5.
*/
attach: function (jid, sid, rid, callback, wait, hold, wind)
{
this._proto._attach(jid, sid, rid, callback, wait, hold, wind);
},
/** Function: xmlInput
* User overrideable function that receives XML data coming into the
* connection.
*
* The default function does nothing. User code can override this with
* > Strophe.Connection.xmlInput = function (elem) {
* > (user code)
* > };
*
* Due to limitations of current Browsers' XML-Parsers the opening and closing
*
tag for WebSocket-Connoctions will be passed as selfclosing here.
*
* BOSH-Connections will have all stanzas wrapped in a tag. See
* if you want to strip this tag.
*
* Parameters:
* (XMLElement) elem - The XML data received by the connection.
*/
/* jshint unused:false */
xmlInput: function (elem)
{
return;
},
/* jshint unused:true */
/** Function: xmlOutput
* User overrideable function that receives XML data sent to the
* connection.
*
* The default function does nothing. User code can override this with
* > Strophe.Connection.xmlOutput = function (elem) {
* > (user code)
* > };
*
* Due to limitations of current Browsers' XML-Parsers the opening and closing
* tag for WebSocket-Connoctions will be passed as selfclosing here.
*
* BOSH-Connections will have all stanzas wrapped in a tag. See
* if you want to strip this tag.
*
* Parameters:
* (XMLElement) elem - The XMLdata sent by the connection.
*/
/* jshint unused:false */
xmlOutput: function (elem)
{
return;
},
/* jshint unused:true */
/** Function: rawInput
* User overrideable function that receives raw data coming into the
* connection.
*
* The default function does nothing. User code can override this with
* > Strophe.Connection.rawInput = function (data) {
* > (user code)
* > };
*
* Parameters:
* (String) data - The data received by the connection.
*/
/* jshint unused:false */
rawInput: function (data)
{
return;
},
/* jshint unused:true */
/** Function: rawOutput
* User overrideable function that receives raw data sent to the
* connection.
*
* The default function does nothing. User code can override this with
* > Strophe.Connection.rawOutput = function (data) {
* > (user code)
* > };
*
* Parameters:
* (String) data - The data sent by the connection.
*/
/* jshint unused:false */
rawOutput: function (data)
{
return;
},
/* jshint unused:true */
/** Function: send
* Send a stanza.
*
* This function is called to push data onto the send queue to
* go out over the wire. Whenever a request is sent to the BOSH
* server, all pending data is sent and the queue is flushed.
*
* Parameters:
* (XMLElement |
* [XMLElement] |
* Strophe.Builder) elem - The stanza to send.
*/
send: function (elem)
{
if (elem === null) { return ; }
if (typeof(elem.sort) === "function") {
for (var i = 0; i < elem.length; i++) {
this._queueData(elem[i]);
}
} else if (typeof(elem.tree) === "function") {
this._queueData(elem.tree());
} else {
this._queueData(elem);
}
this._proto._send();
},
/** Function: flush
* Immediately send any pending outgoing data.
*
* Normally send() queues outgoing data until the next idle period
* (100ms), which optimizes network use in the common cases when
* several send()s are called in succession. flush() can be used to
* immediately send all pending data.
*/
flush: function ()
{
// cancel the pending idle period and run the idle function
// immediately
clearTimeout(this._idleTimeout);
this._onIdle();
},
/** Function: sendIQ
* Helper function to send IQ stanzas.
*
* Parameters:
* (XMLElement) elem - The stanza to send.
* (Function) callback - The callback function for a successful request.
* (Function) errback - The callback function for a failed or timed
* out request. On timeout, the stanza will be null.
* (Integer) timeout - The time specified in milliseconds for a
* timeout to occur.
*
* Returns:
* The id used to send the IQ.
*/
sendIQ: function(elem, callback, errback, timeout) {
var timeoutHandler = null;
var that = this;
if (typeof(elem.tree) === "function") {
elem = elem.tree();
}
var id = elem.getAttribute('id');
// inject id if not found
if (!id) {
id = this.getUniqueId("sendIQ");
elem.setAttribute("id", id);
}
var expectedFrom = elem.getAttribute("to");
var fulljid = this.jid;
var handler = this.addHandler(function (stanza) {
// remove timeout handler if there is one
if (timeoutHandler) {
that.deleteTimedHandler(timeoutHandler);
}
var acceptable = false;
var from = stanza.getAttribute("from");
if (from === expectedFrom ||
(expectedFrom === null &&
(from === Strophe.getBareJidFromJid(fulljid) ||
from === Strophe.getDomainFromJid(fulljid) ||
from === fulljid))) {
acceptable = true;
}
if (!acceptable) {
throw {
name: "StropheError",
message: "Got answer to IQ from wrong jid:" + from +
"\nExpected jid: " + expectedFrom
};
}
var iqtype = stanza.getAttribute('type');
if (iqtype == 'result') {
if (callback) {
callback(stanza);
}
} else if (iqtype == 'error') {
if (errback) {
errback(stanza);
}
} else {
throw {
name: "StropheError",
message: "Got bad IQ type of " + iqtype
};
}
}, null, 'iq', ['error', 'result'], id);
// if timeout specified, setup timeout handler.
if (timeout) {
timeoutHandler = this.addTimedHandler(timeout, function () {
// get rid of normal handler
that.deleteHandler(handler);
// call errback on timeout with null stanza
if (errback) {
errback(null);
}
return false;
});
}
this.send(elem);
return id;
},
/** PrivateFunction: _queueData
* Queue outgoing data for later sending. Also ensures that the data
* is a DOMElement.
*/
_queueData: function (element) {
if (element === null ||
!element.tagName ||
!element.childNodes) {
throw {
name: "StropheError",
message: "Cannot queue non-DOMElement."
};
}
this._data.push(element);
},
/** PrivateFunction: _sendRestart
* Send an xmpp:restart stanza.
*/
_sendRestart: function ()
{
this._data.push("restart");
this._proto._sendRestart();
this._idleTimeout = setTimeout(this._onIdle.bind(this), 100);
},
/** Function: addTimedHandler
* Add a timed handler to the connection.
*
* This function adds a timed handler. The provided handler will
* be called every period milliseconds until it returns false,
* the connection is terminated, or the handler is removed. Handlers
* that wish to continue being invoked should return true.
*
* Because of method binding it is necessary to save the result of
* this function if you wish to remove a handler with
* deleteTimedHandler().
*
* Note that user handlers are not active until authentication is
* successful.
*
* Parameters:
* (Integer) period - The period of the handler.
* (Function) handler - The callback function.
*
* Returns:
* A reference to the handler that can be used to remove it.
*/
addTimedHandler: function (period, handler)
{
var thand = new Strophe.TimedHandler(period, handler);
this.addTimeds.push(thand);
return thand;
},
/** Function: deleteTimedHandler
* Delete a timed handler for a connection.
*
* This function removes a timed handler from the connection. The
* handRef parameter is *not* the function passed to addTimedHandler(),
* but is the reference returned from addTimedHandler().
*
* Parameters:
* (Strophe.TimedHandler) handRef - The handler reference.
*/
deleteTimedHandler: function (handRef)
{
// this must be done in the Idle loop so that we don't change
// the handlers during iteration
this.removeTimeds.push(handRef);
},
/** Function: addHandler
* Add a stanza handler for the connection.
*
* This function adds a stanza handler to the connection. The
* handler callback will be called for any stanza that matches
* the parameters. Note that if multiple parameters are supplied,
* they must all match for the handler to be invoked.
*
* The handler will receive the stanza that triggered it as its argument.
* *The handler should return true if it is to be invoked again;
* returning false will remove the handler after it returns.*
*
* As a convenience, the ns parameters applies to the top level element
* and also any of its immediate children. This is primarily to make
* matching /iq/query elements easy.
*
* The options argument contains handler matching flags that affect how
* matches are determined. Currently the only flag is matchBare (a
* boolean). When matchBare is true, the from parameter and the from
* attribute on the stanza will be matched as bare JIDs instead of
* full JIDs. To use this, pass {matchBare: true} as the value of
* options. The default value for matchBare is false.
*
* The return value should be saved if you wish to remove the handler
* with deleteHandler().
*
* Parameters:
* (Function) handler - The user callback.
* (String) ns - The namespace to match.
* (String) name - The stanza name to match.
* (String) type - The stanza type attribute to match.
* (String) id - The stanza id attribute to match.
* (String) from - The stanza from attribute to match.
* (String) options - The handler options
*
* Returns:
* A reference to the handler that can be used to remove it.
*/
addHandler: function (handler, ns, name, type, id, from, options)
{
var hand = new Strophe.Handler(handler, ns, name, type, id, from, options);
this.addHandlers.push(hand);
return hand;
},
/** Function: deleteHandler
* Delete a stanza handler for a connection.
*
* This function removes a stanza handler from the connection. The
* handRef parameter is *not* the function passed to addHandler(),
* but is the reference returned from addHandler().
*
* Parameters:
* (Strophe.Handler) handRef - The handler reference.
*/
deleteHandler: function (handRef)
{
// this must be done in the Idle loop so that we don't change
// the handlers during iteration
this.removeHandlers.push(handRef);
// If a handler is being deleted while it is being added,
// prevent it from getting added
var i = this.addHandlers.indexOf(handRef);
if (i >= 0) {
this.addHandlers.splice(i, 1);
}
},
/** Function: disconnect
* Start the graceful disconnection process.
*
* This function starts the disconnection process. This process starts
* by sending unavailable presence and sending BOSH body of type
* terminate. A timeout handler makes sure that disconnection happens
* even if the BOSH server does not respond.
* If the Connection object isn't connected, at least tries to abort all pending requests
* so the connection object won't generate successful requests (which were already opened).
*
* The user supplied connection callback will be notified of the
* progress as this process happens.
*
* Parameters:
* (String) reason - The reason the disconnect is occuring.
*/
disconnect: function (reason)
{
this._changeConnectStatus(Strophe.Status.DISCONNECTING, reason);
Strophe.info("Disconnect was called because: " + reason);
if (this.connected) {
var pres = false;
this.disconnecting = true;
if (this.authenticated) {
pres = $pres({
xmlns: Strophe.NS.CLIENT,
type: 'unavailable'
});
}
// setup timeout handler
this._disconnectTimeout = this._addSysTimedHandler(
3000, this._onDisconnectTimeout.bind(this));
this._proto._disconnect(pres);
} else {
Strophe.info("Disconnect was called before Strophe connected to the server");
this._proto._abortAllRequests();
}
},
/** PrivateFunction: _changeConnectStatus
* _Private_ helper function that makes sure plugins and the user's
* callback are notified of connection status changes.
*
* Parameters:
* (Integer) status - the new connection status, one of the values
* in Strophe.Status
* (String) condition - the error condition or null
*/
_changeConnectStatus: function (status, condition)
{
// notify all plugins listening for status changes
for (var k in Strophe._connectionPlugins) {
if (Strophe._connectionPlugins.hasOwnProperty(k)) {
var plugin = this[k];
if (plugin.statusChanged) {
try {
plugin.statusChanged(status, condition);
} catch (err) {
Strophe.error("" + k + " plugin caused an exception " +
"changing status: " + err);
}
}
}
}
// notify the user's callback
if (this.connect_callback) {
try {
this.connect_callback(status, condition);
} catch (e) {
Strophe.error("User connection callback caused an " +
"exception: " + e);
}
}
},
/** PrivateFunction: _doDisconnect
* _Private_ function to disconnect.
*
* This is the last piece of the disconnection logic. This resets the
* connection and alerts the user's connection callback.
*/
_doDisconnect: function ()
{
if (typeof this._idleTimeout == "number") {
clearTimeout(this._idleTimeout);
}
// Cancel Disconnect Timeout
if (this._disconnectTimeout !== null) {
this.deleteTimedHandler(this._disconnectTimeout);
this._disconnectTimeout = null;
}
Strophe.info("_doDisconnect was called");
this._proto._doDisconnect();
this.authenticated = false;
this.disconnecting = false;
// delete handlers
this.handlers = [];
this.timedHandlers = [];
this.removeTimeds = [];
this.removeHandlers = [];
this.addTimeds = [];
this.addHandlers = [];
// tell the parent we disconnected
this._changeConnectStatus(Strophe.Status.DISCONNECTED, null);
this.connected = false;
},
/** PrivateFunction: _dataRecv
* _Private_ handler to processes incoming data from the the connection.
*
* Except for _connect_cb handling the initial connection request,
* this function handles the incoming data for all requests. This
* function also fires stanza handlers that match each incoming
* stanza.
*
* Parameters:
* (Strophe.Request) req - The request that has data ready.
* (string) req - The stanza a raw string (optiona).
*/
_dataRecv: function (req, raw)
{
Strophe.info("_dataRecv called");
var elem = this._proto._reqToData(req);
if (elem === null) { return; }
if (this.xmlInput !== Strophe.Connection.prototype.xmlInput) {
if (elem.nodeName === this._proto.strip && elem.childNodes.length) {
this.xmlInput(elem.childNodes[0]);
} else {
this.xmlInput(elem);
}
}
if (this.rawInput !== Strophe.Connection.prototype.rawInput) {
if (raw) {
this.rawInput(raw);
} else {
this.rawInput(Strophe.serialize(elem));
}
}
// remove handlers scheduled for deletion
var i, hand;
while (this.removeHandlers.length > 0) {
hand = this.removeHandlers.pop();
i = this.handlers.indexOf(hand);
if (i >= 0) {
this.handlers.splice(i, 1);
}
}
// add handlers scheduled for addition
while (this.addHandlers.length > 0) {
this.handlers.push(this.addHandlers.pop());
}
// handle graceful disconnect
if (this.disconnecting && this._proto._emptyQueue()) {
this._doDisconnect();
return;
}
var type = elem.getAttribute("type");
var cond, conflict;
if (type !== null && type == "terminate") {
// Don't process stanzas that come in after disconnect
if (this.disconnecting) {
return;
}
// an error occurred
cond = elem.getAttribute("condition");
conflict = elem.getElementsByTagName("conflict");
if (cond !== null) {
if (cond == "remote-stream-error" && conflict.length > 0) {
cond = "conflict";
}
this._changeConnectStatus(Strophe.Status.CONNFAIL, cond);
} else {
this._changeConnectStatus(Strophe.Status.CONNFAIL, "unknown");
}
this._doDisconnect();
return;
}
// send each incoming stanza through the handler chain
var that = this;
Strophe.forEachChild(elem, null, function (child) {
var i, newList;
// process handlers
newList = that.handlers;
that.handlers = [];
for (i = 0; i < newList.length; i++) {
var hand = newList[i];
// encapsulate 'handler.run' not to lose the whole handler list if
// one of the handlers throws an exception
try {
if (hand.isMatch(child) &&
(that.authenticated || !hand.user)) {
if (hand.run(child)) {
that.handlers.push(hand);
}
} else {
that.handlers.push(hand);
}
} catch(e) {
// if the handler throws an exception, we consider it as false
Strophe.warn('Removing Strophe handlers due to uncaught exception: ' + e.message);
}
}
});
},
/** Attribute: mechanisms
* SASL Mechanisms available for Conncection.
*/
mechanisms: {},
/** PrivateFunction: _connect_cb
* _Private_ handler for initial connection request.
*
* This handler is used to process the initial connection request
* response from the BOSH server. It is used to set up authentication
* handlers and start the authentication process.
*
* SASL authentication will be attempted if available, otherwise
* the code will fall back to legacy authentication.
*
* Parameters:
* (Strophe.Request) req - The current request.
* (Function) _callback - low level (xmpp) connect callback function.
* Useful for plugins with their own xmpp connect callback (when their)
* want to do something special).
*/
_connect_cb: function (req, _callback, raw)
{
Strophe.info("_connect_cb was called");
this.connected = true;
var bodyWrap = this._proto._reqToData(req);
if (!bodyWrap) { return; }
if (this.xmlInput !== Strophe.Connection.prototype.xmlInput) {
if (bodyWrap.nodeName === this._proto.strip && bodyWrap.childNodes.length) {
this.xmlInput(bodyWrap.childNodes[0]);
} else {
this.xmlInput(bodyWrap);
}
}
if (this.rawInput !== Strophe.Connection.prototype.rawInput) {
if (raw) {
this.rawInput(raw);
} else {
this.rawInput(Strophe.serialize(bodyWrap));
}
}
var conncheck = this._proto._connect_cb(bodyWrap);
if (conncheck === Strophe.Status.CONNFAIL) {
return;
}
this._authentication.sasl_scram_sha1 = false;
this._authentication.sasl_plain = false;
this._authentication.sasl_digest_md5 = false;
this._authentication.sasl_anonymous = false;
this._authentication.legacy_auth = false;
// Check for the stream:features tag
var hasFeatures = bodyWrap.getElementsByTagNameNS(Strophe.NS.STREAM, "features").length > 0;
var mechanisms = bodyWrap.getElementsByTagName("mechanism");
var matched = [];
var i, mech, found_authentication = false;
if (!hasFeatures) {
this._proto._no_auth_received(_callback);
return;
}
if (mechanisms.length > 0) {
for (i = 0; i < mechanisms.length; i++) {
mech = Strophe.getText(mechanisms[i]);
if (this.mechanisms[mech]) matched.push(this.mechanisms[mech]);
}
}
this._authentication.legacy_auth =
bodyWrap.getElementsByTagName("auth").length > 0;
found_authentication = this._authentication.legacy_auth ||
matched.length > 0;
if (!found_authentication) {
this._proto._no_auth_received(_callback);
return;
}
if (this.do_authentication !== false)
this.authenticate(matched);
},
/** Function: authenticate
* Set up authentication
*
* Contiunues the initial connection request by setting up authentication
* handlers and start the authentication process.
*
* SASL authentication will be attempted if available, otherwise
* the code will fall back to legacy authentication.
*
*/
authenticate: function (matched)
{
var i;
// Sorting matched mechanisms according to priority.
for (i = 0; i < matched.length - 1; ++i) {
var higher = i;
for (var j = i + 1; j < matched.length; ++j) {
if (matched[j].prototype.priority > matched[higher].prototype.priority) {
higher = j;
}
}
if (higher != i) {
var swap = matched[i];
matched[i] = matched[higher];
matched[higher] = swap;
}
}
// run each mechanism
var mechanism_found = false;
for (i = 0; i < matched.length; ++i) {
if (!matched[i].test(this)) continue;
this._sasl_success_handler = this._addSysHandler(
this._sasl_success_cb.bind(this), null,
"success", null, null);
this._sasl_failure_handler = this._addSysHandler(
this._sasl_failure_cb.bind(this), null,
"failure", null, null);
this._sasl_challenge_handler = this._addSysHandler(
this._sasl_challenge_cb.bind(this), null,
"challenge", null, null);
this._sasl_mechanism = new matched[i]();
this._sasl_mechanism.onStart(this);
var request_auth_exchange = $build("auth", {
xmlns: Strophe.NS.SASL,
mechanism: this._sasl_mechanism.name
});
if (this._sasl_mechanism.isClientFirst) {
var response = this._sasl_mechanism.onChallenge(this, null);
request_auth_exchange.t(Base64.encode(response));
}
this.send(request_auth_exchange.tree());
mechanism_found = true;
break;
}
if (!mechanism_found) {
// if none of the mechanism worked
if (Strophe.getNodeFromJid(this.jid) === null) {
// we don't have a node, which is required for non-anonymous
// client connections
this._changeConnectStatus(Strophe.Status.CONNFAIL,
'x-strophe-bad-non-anon-jid');
this.disconnect('x-strophe-bad-non-anon-jid');
} else {
// fall back to legacy authentication
this._changeConnectStatus(Strophe.Status.AUTHENTICATING, null);
this._addSysHandler(this._auth1_cb.bind(this), null, null,
null, "_auth_1");
this.send($iq({
type: "get",
to: this.domain,
id: "_auth_1"
}).c("query", {
xmlns: Strophe.NS.AUTH
}).c("username", {}).t(Strophe.getNodeFromJid(this.jid)).tree());
}
}
},
_sasl_challenge_cb: function(elem) {
var challenge = Base64.decode(Strophe.getText(elem));
var response = this._sasl_mechanism.onChallenge(this, challenge);
var stanza = $build('response', {
xmlns: Strophe.NS.SASL
});
if (response !== "") {
stanza.t(Base64.encode(response));
}
this.send(stanza.tree());
return true;
},
/** PrivateFunction: _auth1_cb
* _Private_ handler for legacy authentication.
*
* This handler is called in response to the initial for information about changing priority and for informatian on
* how to disable a mechanism.
*
* By default, all mechanisms are enabled and the priorities are
*
* SCRAM-SHA1 - 40
* DIGEST-MD5 - 30
* Plain - 20
*/
/**
* PrivateConstructor: Strophe.SASLMechanism
* SASL auth mechanism abstraction.
*
* Parameters:
* (String) name - SASL Mechanism name.
* (Boolean) isClientFirst - If client should send response first without challenge.
* (Number) priority - Priority.
*
* Returns:
* A new Strophe.SASLMechanism object.
*/
Strophe.SASLMechanism = function(name, isClientFirst, priority) {
/** PrivateVariable: name
* Mechanism name.
*/
this.name = name;
/** PrivateVariable: isClientFirst
* If client sends response without initial server challenge.
*/
this.isClientFirst = isClientFirst;
/** Variable: priority
* Determines which is chosen for authentication (Higher is better).
* Users may override this to prioritize mechanisms differently.
*
* In the default configuration the priorities are
*
* SCRAM-SHA1 - 40
* DIGEST-MD5 - 30
* Plain - 20
*
* Example: (This will cause Strophe to choose the mechanism that the server sent first)
*
* > Strophe.SASLMD5.priority = Strophe.SASLSHA1.priority;
*
* See for a list of available mechanisms.
*
*/
this.priority = priority;
};
Strophe.SASLMechanism.prototype = {
/**
* Function: test
* Checks if mechanism able to run.
* To disable a mechanism, make this return false;
*
* To disable plain authentication run
* > Strophe.SASLPlain.test = function() {
* > return false;
* > }
*
* See for a list of available mechanisms.
*
* Parameters:
* (Strophe.Connection) connection - Target Connection.
*
* Returns:
* (Boolean) If mechanism was able to run.
*/
/* jshint unused:false */
test: function(connection) {
return true;
},
/* jshint unused:true */
/** PrivateFunction: onStart
* Called before starting mechanism on some connection.
*
* Parameters:
* (Strophe.Connection) connection - Target Connection.
*/
onStart: function(connection)
{
this._connection = connection;
},
/** PrivateFunction: onChallenge
* Called by protocol implementation on incoming challenge. If client is
* first (isClientFirst == true) challenge will be null on the first call.
*
* Parameters:
* (Strophe.Connection) connection - Target Connection.
* (String) challenge - current challenge to handle.
*
* Returns:
* (String) Mechanism response.
*/
/* jshint unused:false */
onChallenge: function(connection, challenge) {
throw new Error("You should implement challenge handling!");
},
/* jshint unused:true */
/** PrivateFunction: onFailure
* Protocol informs mechanism implementation about SASL failure.
*/
onFailure: function() {
this._connection = null;
},
/** PrivateFunction: onSuccess
* Protocol informs mechanism implementation about SASL success.
*/
onSuccess: function() {
this._connection = null;
}
};
/** Constants: SASL mechanisms
* Available authentication mechanisms
*
* Strophe.SASLAnonymous - SASL Anonymous authentication.
* Strophe.SASLPlain - SASL Plain authentication.
* Strophe.SASLMD5 - SASL Digest-MD5 authentication
* Strophe.SASLSHA1 - SASL SCRAM-SHA1 authentication
*/
// Building SASL callbacks
/** PrivateConstructor: SASLAnonymous
* SASL Anonymous authentication.
*/
Strophe.SASLAnonymous = function() {};
Strophe.SASLAnonymous.prototype = new Strophe.SASLMechanism("ANONYMOUS", false, 10);
Strophe.SASLAnonymous.test = function(connection) {
return connection.authcid === null;
};
Strophe.Connection.prototype.mechanisms[Strophe.SASLAnonymous.prototype.name] = Strophe.SASLAnonymous;
/** PrivateConstructor: SASLPlain
* SASL Plain authentication.
*/
Strophe.SASLPlain = function() {};
Strophe.SASLPlain.prototype = new Strophe.SASLMechanism("PLAIN", true, 20);
Strophe.SASLPlain.test = function(connection) {
return connection.authcid !== null;
};
Strophe.SASLPlain.prototype.onChallenge = function(connection) {
var auth_str = connection.authzid;
auth_str = auth_str + "\u0000";
auth_str = auth_str + connection.authcid;
auth_str = auth_str + "\u0000";
auth_str = auth_str + connection.pass;
return auth_str;
};
Strophe.Connection.prototype.mechanisms[Strophe.SASLPlain.prototype.name] = Strophe.SASLPlain;
/** PrivateConstructor: SASLSHA1
* SASL SCRAM SHA 1 authentication.
*/
Strophe.SASLSHA1 = function() {};
/* TEST:
* This is a simple example of a SCRAM-SHA-1 authentication exchange
* when the client doesn't support channel bindings (username 'user' and
* password 'pencil' are used):
*
* C: n,,n=user,r=fyko+d2lbbFgONRv9qkxdawL
* S: r=fyko+d2lbbFgONRv9qkxdawL3rfcNHYJY1ZVvWVs7j,s=QSXCR+Q6sek8bf92,
* i=4096
* C: c=biws,r=fyko+d2lbbFgONRv9qkxdawL3rfcNHYJY1ZVvWVs7j,
* p=v0X8v3Bz2T0CJGbJQyF0X+HI4Ts=
* S: v=rmF9pqV8S7suAoZWja4dJRkFsKQ=
*
*/
Strophe.SASLSHA1.prototype = new Strophe.SASLMechanism("SCRAM-SHA-1", true, 40);
Strophe.SASLSHA1.test = function(connection) {
return connection.authcid !== null;
};
Strophe.SASLSHA1.prototype.onChallenge = function(connection, challenge, test_cnonce) {
var cnonce = test_cnonce || MD5.hexdigest(Math.random() * 1234567890);
var auth_str = "n=" + connection.authcid;
auth_str += ",r=";
auth_str += cnonce;
connection._sasl_data.cnonce = cnonce;
connection._sasl_data["client-first-message-bare"] = auth_str;
auth_str = "n,," + auth_str;
this.onChallenge = function (connection, challenge)
{
var nonce, salt, iter, Hi, U, U_old, i, k;
var clientKey, serverKey, clientSignature;
var responseText = "c=biws,";
var authMessage = connection._sasl_data["client-first-message-bare"] + "," +
challenge + ",";
var cnonce = connection._sasl_data.cnonce;
var attribMatch = /([a-z]+)=([^,]+)(,|$)/;
while (challenge.match(attribMatch)) {
var matches = challenge.match(attribMatch);
challenge = challenge.replace(matches[0], "");
switch (matches[1]) {
case "r":
nonce = matches[2];
break;
case "s":
salt = matches[2];
break;
case "i":
iter = matches[2];
break;
}
}
if (nonce.substr(0, cnonce.length) !== cnonce) {
connection._sasl_data = {};
return connection._sasl_failure_cb();
}
responseText += "r=" + nonce;
authMessage += responseText;
salt = Base64.decode(salt);
salt += "\x00\x00\x00\x01";
Hi = U_old = core_hmac_sha1(connection.pass, salt);
for (i = 1; i < iter; i++) {
U = core_hmac_sha1(connection.pass, binb2str(U_old));
for (k = 0; k < 5; k++) {
Hi[k] ^= U[k];
}
U_old = U;
}
Hi = binb2str(Hi);
clientKey = core_hmac_sha1(Hi, "Client Key");
serverKey = str_hmac_sha1(Hi, "Server Key");
clientSignature = core_hmac_sha1(str_sha1(binb2str(clientKey)), authMessage);
connection._sasl_data["server-signature"] = b64_hmac_sha1(serverKey, authMessage);
for (k = 0; k < 5; k++) {
clientKey[k] ^= clientSignature[k];
}
responseText += ",p=" + Base64.encode(binb2str(clientKey));
return responseText;
}.bind(this);
return auth_str;
};
Strophe.Connection.prototype.mechanisms[Strophe.SASLSHA1.prototype.name] = Strophe.SASLSHA1;
/** PrivateConstructor: SASLMD5
* SASL DIGEST MD5 authentication.
*/
Strophe.SASLMD5 = function() {};
Strophe.SASLMD5.prototype = new Strophe.SASLMechanism("DIGEST-MD5", false, 30);
Strophe.SASLMD5.test = function(connection) {
return connection.authcid !== null;
};
/** PrivateFunction: _quote
* _Private_ utility function to backslash escape and quote strings.
*
* Parameters:
* (String) str - The string to be quoted.
*
* Returns:
* quoted string
*/
Strophe.SASLMD5.prototype._quote = function (str)
{
return '"' + str.replace(/\\/g, "\\\\").replace(/"/g, '\\"') + '"';
//" end string workaround for emacs
};
Strophe.SASLMD5.prototype.onChallenge = function(connection, challenge, test_cnonce) {
var attribMatch = /([a-z]+)=("[^"]+"|[^,"]+)(?:,|$)/;
var cnonce = test_cnonce || MD5.hexdigest("" + (Math.random() * 1234567890));
var realm = "";
var host = null;
var nonce = "";
var qop = "";
var matches;
while (challenge.match(attribMatch)) {
matches = challenge.match(attribMatch);
challenge = challenge.replace(matches[0], "");
matches[2] = matches[2].replace(/^"(.+)"$/, "$1");
switch (matches[1]) {
case "realm":
realm = matches[2];
break;
case "nonce":
nonce = matches[2];
break;
case "qop":
qop = matches[2];
break;
case "host":
host = matches[2];
break;
}
}
var digest_uri = connection.servtype + "/" + connection.domain;
if (host !== null) {
digest_uri = digest_uri + "/" + host;
}
var A1 = MD5.hash(connection.authcid +
":" + realm + ":" + this._connection.pass) +
":" + nonce + ":" + cnonce;
var A2 = 'AUTHENTICATE:' + digest_uri;
var responseText = "";
responseText += 'charset=utf-8,';
responseText += 'username=' +
this._quote(connection.authcid) + ',';
responseText += 'realm=' + this._quote(realm) + ',';
responseText += 'nonce=' + this._quote(nonce) + ',';
responseText += 'nc=00000001,';
responseText += 'cnonce=' + this._quote(cnonce) + ',';
responseText += 'digest-uri=' + this._quote(digest_uri) + ',';
responseText += 'response=' + MD5.hexdigest(MD5.hexdigest(A1) + ":" +
nonce + ":00000001:" +
cnonce + ":auth:" +
MD5.hexdigest(A2)) + ",";
responseText += 'qop=auth';
this.onChallenge = function ()
{
return "";
}.bind(this);
return responseText;
};
Strophe.Connection.prototype.mechanisms[Strophe.SASLMD5.prototype.name] = Strophe.SASLMD5;
/*
This program is distributed under the terms of the MIT license.
Please see the LICENSE file for details.
Copyright 2006-2008, OGG, LLC
*/
/* jshint undef: true, unused: true:, noarg: true, latedef: true */
/*global window, setTimeout, clearTimeout,
XMLHttpRequest, ActiveXObject,
Strophe, $build */
/** PrivateClass: Strophe.Request
* _Private_ helper class that provides a cross implementation abstraction
* for a BOSH related XMLHttpRequest.
*
* The Strophe.Request class is used internally to encapsulate BOSH request
* information. It is not meant to be used from user's code.
*/
/** PrivateConstructor: Strophe.Request
* Create and initialize a new Strophe.Request object.
*
* Parameters:
* (XMLElement) elem - The XML data to be sent in the request.
* (Function) func - The function that will be called when the
* XMLHttpRequest readyState changes.
* (Integer) rid - The BOSH rid attribute associated with this request.
* (Integer) sends - The number of times this same request has been
* sent.
*/
Strophe.Request = function (elem, func, rid, sends)
{
this.id = ++Strophe._requestId;
this.xmlData = elem;
this.data = Strophe.serialize(elem);
// save original function in case we need to make a new request
// from this one.
this.origFunc = func;
this.func = func;
this.rid = rid;
this.date = NaN;
this.sends = sends || 0;
this.abort = false;
this.dead = null;
this.age = function () {
if (!this.date) { return 0; }
var now = new Date();
return (now - this.date) / 1000;
};
this.timeDead = function () {
if (!this.dead) { return 0; }
var now = new Date();
return (now - this.dead) / 1000;
};
this.xhr = this._newXHR();
};
Strophe.Request.prototype = {
/** PrivateFunction: getResponse
* Get a response from the underlying XMLHttpRequest.
*
* This function attempts to get a response from the request and checks
* for errors.
*
* Throws:
* "parsererror" - A parser error occured.
*
* Returns:
* The DOM element tree of the response.
*/
getResponse: function ()
{
var node = null;
if (this.xhr.responseXML && this.xhr.responseXML.documentElement) {
node = this.xhr.responseXML.documentElement;
if (node.tagName == "parsererror") {
Strophe.error("invalid response received");
Strophe.error("responseText: " + this.xhr.responseText);
Strophe.error("responseXML: " +
Strophe.serialize(this.xhr.responseXML));
throw "parsererror";
}
} else if (this.xhr.responseText) {
Strophe.error("invalid response received");
Strophe.error("responseText: " + this.xhr.responseText);
Strophe.error("responseXML: " +
Strophe.serialize(this.xhr.responseXML));
}
return node;
},
/** PrivateFunction: _newXHR
* _Private_ helper function to create XMLHttpRequests.
*
* This function creates XMLHttpRequests across all implementations.
*
* Returns:
* A new XMLHttpRequest.
*/
_newXHR: function ()
{
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
if (xhr.overrideMimeType) {
xhr.overrideMimeType("text/xml; charset=utf-8");
}
} else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// use Function.bind() to prepend ourselves as an argument
xhr.onreadystatechange = this.func.bind(null, this);
return xhr;
}
};
/** Class: Strophe.Bosh
* _Private_ helper class that handles BOSH Connections
*
* The Strophe.Bosh class is used internally by Strophe.Connection
* to encapsulate BOSH sessions. It is not meant to be used from user's code.
*/
/** File: bosh.js
* A JavaScript library to enable BOSH in Strophejs.
*
* this library uses Bidirectional-streams Over Synchronous HTTP (BOSH)
* to emulate a persistent, stateful, two-way connection to an XMPP server.
* More information on BOSH can be found in XEP 124.
*/
/** PrivateConstructor: Strophe.Bosh
* Create and initialize a Strophe.Bosh object.
*
* Parameters:
* (Strophe.Connection) connection - The Strophe.Connection that will use BOSH.
*
* Returns:
* A new Strophe.Bosh object.
*/
Strophe.Bosh = function(connection) {
this._conn = connection;
/* request id for body tags */
this.rid = Math.floor(Math.random() * 4294967295);
/* The current session ID. */
this.sid = null;
// default BOSH values
this.hold = 1;
this.wait = 60;
this.window = 5;
this.errors = 0;
this._requests = [];
};
Strophe.Bosh.prototype = {
/** Variable: strip
*
* BOSH-Connections will have all stanzas wrapped in a tag when
* passed to or .
* To strip this tag, User code can set to "body":
*
* > Strophe.Bosh.prototype.strip = "body";
*
* This will enable stripping of the body tag in both
* and .
*/
strip: null,
/** PrivateFunction: _buildBody
* _Private_ helper function to generate the wrapper for BOSH.
*
* Returns:
* A Strophe.Builder with a element.
*/
_buildBody: function ()
{
var bodyWrap = $build('body', {
rid: this.rid++,
xmlns: Strophe.NS.HTTPBIND
});
if (this.sid !== null) {
bodyWrap.attrs({sid: this.sid});
}
return bodyWrap;
},
/** PrivateFunction: _reset
* Reset the connection.
*
* This function is called by the reset function of the Strophe Connection
*/
_reset: function ()
{
this.rid = Math.floor(Math.random() * 4294967295);
this.sid = null;
this.errors = 0;
},
/** PrivateFunction: _connect
* _Private_ function that initializes the BOSH connection.
*
* Creates and sends the Request that initializes the BOSH connection.
*/
_connect: function (wait, hold, route)
{
this.wait = wait || this.wait;
this.hold = hold || this.hold;
this.errors = 0;
// build the body tag
var body = this._buildBody().attrs({
to: this._conn.domain,
"xml:lang": "en",
wait: this.wait,
hold: this.hold,
content: "text/xml; charset=utf-8",
ver: "1.6",
"xmpp:version": "1.0",
"xmlns:xmpp": Strophe.NS.BOSH
});
if(route){
body.attrs({
route: route
});
}
var _connect_cb = this._conn._connect_cb;
this._requests.push(
new Strophe.Request(body.tree(),
this._onRequestStateChange.bind(
this, _connect_cb.bind(this._conn)),
body.tree().getAttribute("rid")));
this._throttledRequestHandler();
},
/** PrivateFunction: _attach
* Attach to an already created and authenticated BOSH session.
*
* This function is provided to allow Strophe to attach to BOSH
* sessions which have been created externally, perhaps by a Web
* application. This is often used to support auto-login type features
* without putting user credentials into the page.
*
* Parameters:
* (String) jid - The full JID that is bound by the session.
* (String) sid - The SID of the BOSH session.
* (String) rid - The current RID of the BOSH session. This RID
* will be used by the next request.
* (Function) callback The connect callback function.
* (Integer) wait - The optional HTTPBIND wait value. This is the
* time the server will wait before returning an empty result for
* a request. The default setting of 60 seconds is recommended.
* Other settings will require tweaks to the Strophe.TIMEOUT value.
* (Integer) hold - The optional HTTPBIND hold value. This is the
* number of connections the server will hold at one time. This
* should almost always be set to 1 (the default).
* (Integer) wind - The optional HTTBIND window value. This is the
* allowed range of request ids that are valid. The default is 5.
*/
_attach: function (jid, sid, rid, callback, wait, hold, wind)
{
this._conn.jid = jid;
this.sid = sid;
this.rid = rid;
this._conn.connect_callback = callback;
this._conn.domain = Strophe.getDomainFromJid(this._conn.jid);
this._conn.authenticated = true;
this._conn.connected = true;
this.wait = wait || this.wait;
this.hold = hold || this.hold;
this.window = wind || this.window;
this._conn._changeConnectStatus(Strophe.Status.ATTACHED, null);
},
/** PrivateFunction: _connect_cb
* _Private_ handler for initial connection request.
*
* This handler is used to process the Bosh-part of the initial request.
* Parameters:
* (Strophe.Request) bodyWrap - The received stanza.
*/
_connect_cb: function (bodyWrap)
{
var typ = bodyWrap.getAttribute("type");
var cond, conflict;
if (typ !== null && typ == "terminate") {
// an error occurred
Strophe.error("BOSH-Connection failed: " + cond);
cond = bodyWrap.getAttribute("condition");
conflict = bodyWrap.getElementsByTagName("conflict");
if (cond !== null) {
if (cond == "remote-stream-error" && conflict.length > 0) {
cond = "conflict";
}
this._conn._changeConnectStatus(Strophe.Status.CONNFAIL, cond);
} else {
this._conn._changeConnectStatus(Strophe.Status.CONNFAIL, "unknown");
}
this._conn._doDisconnect();
return Strophe.Status.CONNFAIL;
}
// check to make sure we don't overwrite these if _connect_cb is
// called multiple times in the case of missing stream:features
if (!this.sid) {
this.sid = bodyWrap.getAttribute("sid");
}
var wind = bodyWrap.getAttribute('requests');
if (wind) { this.window = parseInt(wind, 10); }
var hold = bodyWrap.getAttribute('hold');
if (hold) { this.hold = parseInt(hold, 10); }
var wait = bodyWrap.getAttribute('wait');
if (wait) { this.wait = parseInt(wait, 10); }
},
/** PrivateFunction: _disconnect
* _Private_ part of Connection.disconnect for Bosh
*
* Parameters:
* (Request) pres - This stanza will be sent before disconnecting.
*/
_disconnect: function (pres)
{
this._sendTerminate(pres);
},
/** PrivateFunction: _doDisconnect
* _Private_ function to disconnect.
*
* Resets the SID and RID.
*/
_doDisconnect: function ()
{
this.sid = null;
this.rid = Math.floor(Math.random() * 4294967295);
},
/** PrivateFunction: _emptyQueue
* _Private_ function to check if the Request queue is empty.
*
* Returns:
* True, if there are no Requests queued, False otherwise.
*/
_emptyQueue: function ()
{
return this._requests.length === 0;
},
/** PrivateFunction: _hitError
* _Private_ function to handle the error count.
*
* Requests are resent automatically until their error count reaches
* 5. Each time an error is encountered, this function is called to
* increment the count and disconnect if the count is too high.
*
* Parameters:
* (Integer) reqStatus - The request status.
*/
_hitError: function (reqStatus)
{
this.errors++;
Strophe.warn("request errored, status: " + reqStatus +
", number of errors: " + this.errors);
if (this.errors > 4) {
this._conn._onDisconnectTimeout();
}
},
/** PrivateFunction: _no_auth_received
*
* Called on stream start/restart when no stream:features
* has been received and sends a blank poll request.
*/
_no_auth_received: function (_callback)
{
if (_callback) {
_callback = _callback.bind(this._conn);
} else {
_callback = this._conn._connect_cb.bind(this._conn);
}
var body = this._buildBody();
this._requests.push(
new Strophe.Request(body.tree(),
this._onRequestStateChange.bind(
this, _callback.bind(this._conn)),
body.tree().getAttribute("rid")));
this._throttledRequestHandler();
},
/** PrivateFunction: _onDisconnectTimeout
* _Private_ timeout handler for handling non-graceful disconnection.
*
* Cancels all remaining Requests and clears the queue.
*/
_onDisconnectTimeout: function () {
this._abortAllRequests();
},
/** PrivateFunction: _abortAllRequests
* _Private_ helper function that makes sure all pending requests are aborted.
*/
_abortAllRequests: function _abortAllRequests() {
var req;
while (this._requests.length > 0) {
req = this._requests.pop();
req.abort = true;
req.xhr.abort();
// jslint complains, but this is fine. setting to empty func
// is necessary for IE6
req.xhr.onreadystatechange = function () {}; // jshint ignore:line
}
},
/** PrivateFunction: _onIdle
* _Private_ handler called by Strophe.Connection._onIdle
*
* Sends all queued Requests or polls with empty Request if there are none.
*/
_onIdle: function () {
var data = this._conn._data;
// if no requests are in progress, poll
if (this._conn.authenticated && this._requests.length === 0 &&
data.length === 0 && !this._conn.disconnecting) {
Strophe.info("no requests during idle cycle, sending " +
"blank request");
data.push(null);
}
if (this._conn.paused) {
return;
}
if (this._requests.length < 2 && data.length > 0) {
var body = this._buildBody();
for (var i = 0; i < data.length; i++) {
if (data[i] !== null) {
if (data[i] === "restart") {
body.attrs({
to: this._conn.domain,
"xml:lang": "en",
"xmpp:restart": "true",
"xmlns:xmpp": Strophe.NS.BOSH
});
} else {
body.cnode(data[i]).up();
}
}
}
delete this._conn._data;
this._conn._data = [];
this._requests.push(
new Strophe.Request(body.tree(),
this._onRequestStateChange.bind(
this, this._conn._dataRecv.bind(this._conn)),
body.tree().getAttribute("rid")));
this._throttledRequestHandler();
}
if (this._requests.length > 0) {
var time_elapsed = this._requests[0].age();
if (this._requests[0].dead !== null) {
if (this._requests[0].timeDead() >
Math.floor(Strophe.SECONDARY_TIMEOUT * this.wait)) {
this._throttledRequestHandler();
}
}
if (time_elapsed > Math.floor(Strophe.TIMEOUT * this.wait)) {
Strophe.warn("Request " +
this._requests[0].id +
" timed out, over " + Math.floor(Strophe.TIMEOUT * this.wait) +
" seconds since last activity");
this._throttledRequestHandler();
}
}
},
/** PrivateFunction: _onRequestStateChange
* _Private_ handler for Strophe.Request state changes.
*
* This function is called when the XMLHttpRequest readyState changes.
* It contains a lot of error handling logic for the many ways that
* requests can fail, and calls the request callback when requests
* succeed.
*
* Parameters:
* (Function) func - The handler for the request.
* (Strophe.Request) req - The request that is changing readyState.
*/
_onRequestStateChange: function (func, req)
{
Strophe.debug("request id " + req.id +
"." + req.sends + " state changed to " +
req.xhr.readyState);
if (req.abort) {
req.abort = false;
return;
}
// request complete
var reqStatus;
if (req.xhr.readyState == 4) {
reqStatus = 0;
try {
reqStatus = req.xhr.status;
} catch (e) {
// ignore errors from undefined status attribute. works
// around a browser bug
}
if (typeof(reqStatus) == "undefined") {
reqStatus = 0;
}
if (this.disconnecting) {
if (reqStatus >= 400) {
this._hitError(reqStatus);
return;
}
}
var reqIs0 = (this._requests[0] == req);
var reqIs1 = (this._requests[1] == req);
if ((reqStatus > 0 && reqStatus < 500) || req.sends > 5) {
// remove from internal queue
this._removeRequest(req);
Strophe.debug("request id " +
req.id +
" should now be removed");
}
// request succeeded
if (reqStatus == 200) {
// if request 1 finished, or request 0 finished and request
// 1 is over Strophe.SECONDARY_TIMEOUT seconds old, we need to
// restart the other - both will be in the first spot, as the
// completed request has been removed from the queue already
if (reqIs1 ||
(reqIs0 && this._requests.length > 0 &&
this._requests[0].age() > Math.floor(Strophe.SECONDARY_TIMEOUT * this.wait))) {
this._restartRequest(0);
}
// call handler
Strophe.debug("request id " +
req.id + "." +
req.sends + " got 200");
func(req);
this.errors = 0;
} else {
Strophe.error("request id " +
req.id + "." +
req.sends + " error " + reqStatus +
" happened");
if (reqStatus === 0 ||
(reqStatus >= 400 && reqStatus < 600) ||
reqStatus >= 12000) {
this._hitError(reqStatus);
if (reqStatus >= 400 && reqStatus < 500) {
this._conn._changeConnectStatus(Strophe.Status.DISCONNECTING,
null);
this._conn._doDisconnect();
}
}
}
if (!((reqStatus > 0 && reqStatus < 500) ||
req.sends > 5)) {
this._throttledRequestHandler();
}
}
},
/** PrivateFunction: _processRequest
* _Private_ function to process a request in the queue.
*
* This function takes requests off the queue and sends them and
* restarts dead requests.
*
* Parameters:
* (Integer) i - The index of the request in the queue.
*/
_processRequest: function (i)
{
var self = this;
var req = this._requests[i];
var reqStatus = -1;
try {
if (req.xhr.readyState == 4) {
reqStatus = req.xhr.status;
}
} catch (e) {
Strophe.error("caught an error in _requests[" + i +
"], reqStatus: " + reqStatus);
}
if (typeof(reqStatus) == "undefined") {
reqStatus = -1;
}
// make sure we limit the number of retries
if (req.sends > this._conn.maxRetries) {
this._conn._onDisconnectTimeout();
return;
}
var time_elapsed = req.age();
var primaryTimeout = (!isNaN(time_elapsed) &&
time_elapsed > Math.floor(Strophe.TIMEOUT * this.wait));
var secondaryTimeout = (req.dead !== null &&
req.timeDead() > Math.floor(Strophe.SECONDARY_TIMEOUT * this.wait));
var requestCompletedWithServerError = (req.xhr.readyState == 4 &&
(reqStatus < 1 ||
reqStatus >= 500));
if (primaryTimeout || secondaryTimeout ||
requestCompletedWithServerError) {
if (secondaryTimeout) {
Strophe.error("Request " +
this._requests[i].id +
" timed out (secondary), restarting");
}
req.abort = true;
req.xhr.abort();
// setting to null fails on IE6, so set to empty function
req.xhr.onreadystatechange = function () {};
this._requests[i] = new Strophe.Request(req.xmlData,
req.origFunc,
req.rid,
req.sends);
req = this._requests[i];
}
if (req.xhr.readyState === 0) {
Strophe.debug("request id " + req.id +
"." + req.sends + " posting");
try {
req.xhr.open("POST", this._conn.service, this._conn.options.sync ? false : true);
req.xhr.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
} catch (e2) {
Strophe.error("XHR open failed.");
if (!this._conn.connected) {
this._conn._changeConnectStatus(Strophe.Status.CONNFAIL,
"bad-service");
}
this._conn.disconnect();
return;
}
// Fires the XHR request -- may be invoked immediately
// or on a gradually expanding retry window for reconnects
var sendFunc = function () {
req.date = new Date();
if (self._conn.options.customHeaders){
var headers = self._conn.options.customHeaders;
for (var header in headers) {
if (headers.hasOwnProperty(header)) {
req.xhr.setRequestHeader(header, headers[header]);
}
}
}
req.xhr.send(req.data);
};
// Implement progressive backoff for reconnects --
// First retry (send == 1) should also be instantaneous
if (req.sends > 1) {
// Using a cube of the retry number creates a nicely
// expanding retry window
var backoff = Math.min(Math.floor(Strophe.TIMEOUT * this.wait),
Math.pow(req.sends, 3)) * 1000;
setTimeout(sendFunc, backoff);
} else {
sendFunc();
}
req.sends++;
if (this._conn.xmlOutput !== Strophe.Connection.prototype.xmlOutput) {
if (req.xmlData.nodeName === this.strip && req.xmlData.childNodes.length) {
this._conn.xmlOutput(req.xmlData.childNodes[0]);
} else {
this._conn.xmlOutput(req.xmlData);
}
}
if (this._conn.rawOutput !== Strophe.Connection.prototype.rawOutput) {
this._conn.rawOutput(req.data);
}
} else {
Strophe.debug("_processRequest: " +
(i === 0 ? "first" : "second") +
" request has readyState of " +
req.xhr.readyState);
}
},
/** PrivateFunction: _removeRequest
* _Private_ function to remove a request from the queue.
*
* Parameters:
* (Strophe.Request) req - The request to remove.
*/
_removeRequest: function (req)
{
Strophe.debug("removing request");
var i;
for (i = this._requests.length - 1; i >= 0; i--) {
if (req == this._requests[i]) {
this._requests.splice(i, 1);
}
}
// IE6 fails on setting to null, so set to empty function
req.xhr.onreadystatechange = function () {};
this._throttledRequestHandler();
},
/** PrivateFunction: _restartRequest
* _Private_ function to restart a request that is presumed dead.
*
* Parameters:
* (Integer) i - The index of the request in the queue.
*/
_restartRequest: function (i)
{
var req = this._requests[i];
if (req.dead === null) {
req.dead = new Date();
}
this._processRequest(i);
},
/** PrivateFunction: _reqToData
* _Private_ function to get a stanza out of a request.
*
* Tries to extract a stanza out of a Request Object.
* When this fails the current connection will be disconnected.
*
* Parameters:
* (Object) req - The Request.
*
* Returns:
* The stanza that was passed.
*/
_reqToData: function (req)
{
try {
return req.getResponse();
} catch (e) {
if (e != "parsererror") { throw e; }
this._conn.disconnect("strophe-parsererror");
}
},
/** PrivateFunction: _sendTerminate
* _Private_ function to send initial disconnect sequence.
*
* This is the first step in a graceful disconnect. It sends
* the BOSH server a terminate body and includes an unavailable
* presence if authentication has completed.
*/
_sendTerminate: function (pres)
{
Strophe.info("_sendTerminate was called");
var body = this._buildBody().attrs({type: "terminate"});
if (pres) {
body.cnode(pres.tree());
}
var req = new Strophe.Request(body.tree(),
this._onRequestStateChange.bind(
this, this._conn._dataRecv.bind(this._conn)),
body.tree().getAttribute("rid"));
this._requests.push(req);
this._throttledRequestHandler();
},
/** PrivateFunction: _send
* _Private_ part of the Connection.send function for BOSH
*
* Just triggers the RequestHandler to send the messages that are in the queue
*/
_send: function () {
clearTimeout(this._conn._idleTimeout);
this._throttledRequestHandler();
this._conn._idleTimeout = setTimeout(this._conn._onIdle.bind(this._conn), 100);
},
/** PrivateFunction: _sendRestart
*
* Send an xmpp:restart stanza.
*/
_sendRestart: function ()
{
this._throttledRequestHandler();
clearTimeout(this._conn._idleTimeout);
},
/** PrivateFunction: _throttledRequestHandler
* _Private_ function to throttle requests to the connection window.
*
* This function makes sure we don't send requests so fast that the
* request ids overflow the connection window in the case that one
* request died.
*/
_throttledRequestHandler: function ()
{
if (!this._requests) {
Strophe.debug("_throttledRequestHandler called with " +
"undefined requests");
} else {
Strophe.debug("_throttledRequestHandler called with " +
this._requests.length + " requests");
}
if (!this._requests || this._requests.length === 0) {
return;
}
if (this._requests.length > 0) {
this._processRequest(0);
}
if (this._requests.length > 1 &&
Math.abs(this._requests[0].rid -
this._requests[1].rid) < this.window) {
this._processRequest(1);
}
}
};
/*
This program is distributed under the terms of the MIT license.
Please see the LICENSE file for details.
Copyright 2006-2008, OGG, LLC
*/
/* jshint undef: true, unused: true:, noarg: true, latedef: true */
/*global window, clearTimeout, WebSocket,
DOMParser, Strophe, $build */
/** Class: Strophe.WebSocket
* _Private_ helper class that handles WebSocket Connections
*
* The Strophe.WebSocket class is used internally by Strophe.Connection
* to encapsulate WebSocket sessions. It is not meant to be used from user's code.
*/
/** File: websocket.js
* A JavaScript library to enable XMPP over Websocket in Strophejs.
*
* This file implements XMPP over WebSockets for Strophejs.
* If a Connection is established with a Websocket url (ws://...)
* Strophe will use WebSockets.
* For more information on XMPP-over WebSocket see this RFC draft:
* http://tools.ietf.org/html/draft-ietf-xmpp-websocket-00
*
* WebSocket support implemented by Andreas Guth (andreas.guth@rwth-aachen.de)
*/
/** PrivateConstructor: Strophe.Websocket
* Create and initialize a Strophe.WebSocket object.
* Currently only sets the connection Object.
*
* Parameters:
* (Strophe.Connection) connection - The Strophe.Connection that will use WebSockets.
*
* Returns:
* A new Strophe.WebSocket object.
*/
Strophe.Websocket = function(connection) {
this._conn = connection;
this.strip = "wrapper";
var service = connection.service;
if (service.indexOf("ws:") !== 0 && service.indexOf("wss:") !== 0) {
// If the service is not an absolute URL, assume it is a path and put the absolute
// URL together from options, current URL and the path.
var new_service = "";
if (connection.options.protocol === "ws" && window.location.protocol !== "https:") {
new_service += "ws";
} else {
new_service += "wss";
}
new_service += "://" + window.location.host;
if (service.indexOf("/") !== 0) {
new_service += window.location.pathname + service;
} else {
new_service += service;
}
connection.service = new_service;
}
};
Strophe.Websocket.prototype = {
/** PrivateFunction: _buildStream
* _Private_ helper function to generate the start tag for WebSockets
*
* Returns:
* A Strophe.Builder with a element.
*/
_buildStream: function ()
{
return $build("open", {
"xmlns": Strophe.NS.FRAMING,
"to": this._conn.domain,
"version": '1.0'
});
},
/** PrivateFunction: _check_streamerror
* _Private_ checks a message for stream:error
*
* Parameters:
* (Strophe.Request) bodyWrap - The received stanza.
* connectstatus - The ConnectStatus that will be set on error.
* Returns:
* true if there was a streamerror, false otherwise.
*/
_check_streamerror: function (bodyWrap, connectstatus) {
var errors = bodyWrap.getElementsByTagNameNS(Strophe.NS.STREAM, "error");
if (errors.length === 0) {
return false;
}
var error = errors[0];
var condition = "";
var text = "";
var ns = "urn:ietf:params:xml:ns:xmpp-streams";
for (var i = 0; i < error.childNodes.length; i++) {
var e = error.childNodes[i];
if (e.getAttribute("xmlns") !== ns) {
break;
} if (e.nodeName === "text") {
text = e.textContent;
} else {
condition = e.nodeName;
}
}
var errorString = "WebSocket stream error: ";
if (condition) {
errorString += condition;
} else {
errorString += "unknown";
}
if (text) {
errorString += " - " + condition;
}
Strophe.error(errorString);
// close the connection on stream_error
this._conn._changeConnectStatus(connectstatus, condition);
this._conn._doDisconnect();
return true;
},
/** PrivateFunction: _reset
* Reset the connection.
*
* This function is called by the reset function of the Strophe Connection.
* Is not needed by WebSockets.
*/
_reset: function ()
{
return;
},
/** PrivateFunction: _connect
* _Private_ function called by Strophe.Connection.connect
*
* Creates a WebSocket for a connection and assigns Callbacks to it.
* Does nothing if there already is a WebSocket.
*/
_connect: function () {
// Ensure that there is no open WebSocket from a previous Connection.
this._closeSocket();
// Create the new WobSocket
this.socket = new WebSocket(this._conn.service, "xmpp");
this.socket.onopen = this._onOpen.bind(this);
this.socket.onerror = this._onError.bind(this);
this.socket.onclose = this._onClose.bind(this);
this.socket.onmessage = this._connect_cb_wrapper.bind(this);
},
/** PrivateFunction: _connect_cb
* _Private_ function called by Strophe.Connection._connect_cb
*
* checks for stream:error
*
* Parameters:
* (Strophe.Request) bodyWrap - The received stanza.
*/
_connect_cb: function(bodyWrap) {
var error = this._check_streamerror(bodyWrap, Strophe.Status.CONNFAIL);
if (error) {
return Strophe.Status.CONNFAIL;
}
},
/** PrivateFunction: _handleStreamStart
* _Private_ function that checks the opening \s*)*/, "");
if (data === '') return;
var streamStart = new DOMParser().parseFromString(data, "text/xml").documentElement;
this._conn.xmlInput(streamStart);
this._conn.rawInput(message.data);
//_handleStreamSteart will check for XML errors and disconnect on error
if (this._handleStreamStart(streamStart)) {
//_connect_cb will check for stream:error and disconnect on error
this._connect_cb(streamStart);
}
} else if (message.data.indexOf(" tag.
* This is used so Strophe can process stanzas from WebSockets like BOSH
*/
_streamWrap: function (stanza)
{
return "" + stanza + ' ';
},
/** PrivateFunction: _closeSocket
* _Private_ function to close the WebSocket.
*
* Closes the socket if it is still open and deletes it
*/
_closeSocket: function ()
{
if (this.socket) { try {
this.socket.close();
} catch (e) {} }
this.socket = null;
},
/** PrivateFunction: _emptyQueue
* _Private_ function to check if the message queue is empty.
*
* Returns:
* True, because WebSocket messages are send immediately after queueing.
*/
_emptyQueue: function ()
{
return true;
},
/** PrivateFunction: _onClose
* _Private_ function to handle websockets closing.
*
* Nothing to do here for WebSockets
*/
_onClose: function() {
if(this._conn.connected && !this._conn.disconnecting) {
Strophe.error("Websocket closed unexcectedly");
this._conn._doDisconnect();
} else {
Strophe.info("Websocket closed");
}
},
/** PrivateFunction: _no_auth_received
*
* Called on stream start/restart when no stream:features
* has been received.
*/
_no_auth_received: function (_callback)
{
Strophe.error("Server did not send any auth methods");
this._conn._changeConnectStatus(Strophe.Status.CONNFAIL, "Server did not send any auth methods");
if (_callback) {
_callback = _callback.bind(this._conn);
_callback();
}
this._conn._doDisconnect();
},
/** PrivateFunction: _onDisconnectTimeout
* _Private_ timeout handler for handling non-graceful disconnection.
*
* This does nothing for WebSockets
*/
_onDisconnectTimeout: function () {},
/** PrivateFunction: _abortAllRequests
* _Private_ helper function that makes sure all pending requests are aborted.
*/
_abortAllRequests: function () {},
/** PrivateFunction: _onError
* _Private_ function to handle websockets errors.
*
* Parameters:
* (Object) error - The websocket error.
*/
_onError: function(error) {
Strophe.error("Websocket error " + error);
this._conn._changeConnectStatus(Strophe.Status.CONNFAIL, "The WebSocket connection could not be established was disconnected.");
this._disconnect();
},
/** PrivateFunction: _onIdle
* _Private_ function called by Strophe.Connection._onIdle
*
* sends all queued stanzas
*/
_onIdle: function () {
var data = this._conn._data;
if (data.length > 0 && !this._conn.paused) {
for (var i = 0; i < data.length; i++) {
if (data[i] !== null) {
var stanza, rawStanza;
if (data[i] === "restart") {
stanza = this._buildStream().tree();
} else {
stanza = data[i];
}
rawStanza = Strophe.serialize(stanza);
this._conn.xmlOutput(stanza);
this._conn.rawOutput(rawStanza);
this.socket.send(rawStanza);
}
}
this._conn._data = [];
}
},
/** PrivateFunction: _onMessage
* _Private_ function to handle websockets messages.
*
* This function parses each of the messages as if they are full documents. [TODO : We may actually want to use a SAX Push parser].
*
* Since all XMPP traffic starts with ""
* The first stanza will always fail to be parsed...
* Addtionnaly, the seconds stanza will always be a with the stream NS defined in the previous stanza... so we need to 'force' the inclusion of the NS in this stanza!
*
* Parameters:
* (string) message - The websocket message.
*/
_onMessage: function(message) {
var elem, data;
// check for closing stream
var close = ' tag before we close the connection
return;
}
this._conn._dataRecv(elem, message.data);
},
/** PrivateFunction: _onOpen
* _Private_ function to handle websockets connection setup.
*
* The opening stream tag is sent here.
*/
_onOpen: function() {
Strophe.info("Websocket open");
var start = this._buildStream();
this._conn.xmlOutput(start.tree());
var startString = Strophe.serialize(start);
this._conn.rawOutput(startString);
this.socket.send(startString);
},
/** PrivateFunction: _reqToData
* _Private_ function to get a stanza out of a request.
*
* WebSockets don't use requests, so the passed argument is just returned.
*
* Parameters:
* (Object) stanza - The stanza.
*
* Returns:
* The stanza that was passed.
*/
_reqToData: function (stanza)
{
return stanza;
},
/** PrivateFunction: _send
* _Private_ part of the Connection.send function for WebSocket
*
* Just flushes the messages that are in the queue
*/
_send: function () {
this._conn.flush();
},
/** PrivateFunction: _sendRestart
*
* Send an xmpp:restart stanza.
*/
_sendRestart: function ()
{
clearTimeout(this._conn._idleTimeout);
this._conn._onIdle.bind(this._conn)();
}
};
/* jshint ignore:start */
if (callback) {
return callback(Strophe, $build, $msg, $iq, $pres);
}
})(function (Strophe, build, msg, iq, pres) {
window.Strophe = Strophe;
window.$build = build;
window.$msg = msg;
window.$iq = iq;
window.$pres = pres;
});
/* jshint ignore:end */
================================================
FILE: examples/login/login.html
================================================
您好
这是mui带登录和设置模板的示例App首页。
您可以点击右上角的 “设置” 按钮，进入设置模板，体验div窗体切换示例。
在 “设置” 中点击 “退出” 可以 “注销当前账户” 或 “直接关闭应用”。
你可以设置 “锁屏图案”，这样可通过手势密码代替输入账号、密码；
================================================
FILE: examples/login/manifest.json
================================================
{
"@platforms": [
"android",
"iPhone",
"iPad"
],
"id": "mui_template_login",/*应用的标识，创建应用时自动生成，勿手动修改*/
"name": "mui登录模板",/*应用名称，程序桌面图标名称*/
"version": {
"name": "1.0.0",/*应用版本名称*/
"code": "83"
},
"description": "",/*应用描述信息*/
"icons": {
"72": "icon.png"
},
"launch_path": "login.html",/*应用的入口页面，默认为根目录下的index.html；支持网络地址，必须以http://或https://开头*/
"developer": {
"name": "",/*开发者名称*/
"email": "",/*开发者邮箱地址*/
"url": "http://www.dcloud.io"
},
"permissions": {
"Cache": {
"description": "管理应用缓存"
},
"Console": {
"description": "跟踪调试输出日志"
},
"Events": {
"description": "应用扩展事件"
},
"UI": {},
"Share": {},
"OAuth": {},
"Push": {},
"Maps": {},
"Speech": {},
"Payment": {},
"Contacts": {},
"Statistic": {},
"Messaging": {}
},
"plus": {
"splashscreen": {
"autoclose": false,/*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；false则需调plus.navigator.closeSplashscreen()关闭*/
"waiting": true
},
"runmode": "liberate",/*应用的首次启动运行模式，可取liberate或normal，liberate模式在第一次启动时将解压应用资源（Android平台File API才可正常访问_www目录）*/
"signature": "Sk9JTiBVUyBtYWlsdG86aHIyMDEzQGRjbG91ZC5pbw==",/*可选，保留给应用签名，暂不使用*/
"distribute": {
"apple": {
"appid": "",/*iOS应用标识，苹果开发网站申请的appid，如io.dcloud.HelloH5*/
"mobileprovision": "",/*iOS应用打包配置文件*/
"password": "",/*iOS应用打包个人证书导入密码*/
"p12": "",/*iOS应用打包个人证书，打包配置文件关联的个人证书*/
"devices": "universal",/*iOS应用支持的设备类型，可取值iphone/ipad/universal*/
"frameworks": []
},
"google": {
"packagename": "",/*Android应用包名，如io.dcloud.HelloH5*/
"keystore": "",/*Android应用打包使用的密钥库文件*/
"password": "",/*Android应用打包使用密钥库中证书的密码*/
"aliasname": "",/*Android应用打包使用密钥库中证书的别名*/
"permissions": [
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
""
]
},
"orientation": [
"portrait-primary",
"portrait-secondary"
],/*应用支持的方向，portrait-primary：竖屏正方向；portrait-secondary：竖屏反方向；landscape-primary：横屏正方向；landscape-secondary：横屏反方向*/
"icons": {
"ios": {
"prerendered": true, /*应用图标是否已经高亮处理，在iOS6及以下设备上有效*/
"auto": "", /*应用图标，分辨率：512x512，用于自动生成各种尺寸程序图标*/
"iphone": {
"normal": "unpackage/res/icons/57x57.png",/*iPhone普通屏幕程序图标，分辨率：57x57*/
"retina": "unpackage/res/icons/114x114.png",/*iPhone高分屏程序图标，分辨率：114x114*/
"retina7": "unpackage/res/icons/120x120.png",/*iPhone iOS7高分屏程序图标，分辨率：120x120*/
"spotlight-normal": "unpackage/res/icons/29x29.png", /*iPhone Spotlight搜索程序图标，分辨率：29x29*/
"spotlight-retina": "unpackage/res/icons/58x58.png", /*iPhone高分屏Spotlight搜索程序图标，分辨率：58x58*/
"spotlight-retina7": "unpackage/res/icons/80x80.png",/*iPhone iOS7高分屏Spotlight搜索程序图标，分辨率：80x80*/
"settings-normal": "unpackage/res/icons/29x29.png", /*iPhone设置页面程序图标，分辨率：29x29*/
"settings-retina": "unpackage/res/icons/58x58.png",
"retina8": "unpackage/res/icons/180x180.png",
"settings-retina8": "unpackage/res/icons/87x87.png"
},
"ipad": {
"normal": "unpackage/res/icons/72x72.png", /*iPad普通屏幕程序图标，分辨率：72x72*/
"retina": "unpackage/res/icons/144x144.png", /*iPad高分屏程序图标，分辨率：144x144*/
"normal7": "unpackage/res/icons/76x76.png", /*iPad iOS7程序图标，分辨率：76x76*/
"retina7": "unpackage/res/icons/152x152.png", /*iPad iOS7高分屏程序图标，分辨率：152x152*/
"spotlight-normal": "unpackage/res/icons/50x50.png", /*iPad Spotlight搜索程序图标，分辨率：50x50*/
"spotlight-retina": "unpackage/res/icons/100x100.png", /*iPad高分屏Spotlight搜索程序图标，分辨率：100x100*/
"spotlight-normal7": "unpackage/res/icons/40x40.png",/*iPad iOS7 Spotlight搜索程序图标，分辨率：40x40*/
"spotlight-retina7": "unpackage/res/icons/80x80.png",/*iPad iOS7高分屏Spotlight搜索程序图标，分辨率：80x80*/
"settings-normal": "unpackage/res/icons/29x29.png",/*iPad设置页面程序图标，分辨率：29x29*/
"settings-retina": "unpackage/res/icons/58x58.png"
}
},
"android": {
"mdpi": "unpackage/res/icons/48x48.png", /*普通屏程序图标，分辨率：48x48*/
"ldpi": "unpackage/res/icons/48x48.png", /*大屏程序图标，分辨率：48x48*/
"hdpi": "unpackage/res/icons/72x72.png", /*高分屏程序图标，分辨率：72x72*/
"xhdpi": "unpackage/res/icons/96x96.png",/*720P高分屏程序图标，分辨率：96x96*/
"xxhdpi": "unpackage/res/icons/144x144.png"
}
},
"splashscreen": {
"ios": {
"iphone": {
"default": "", /*iPhone3启动图片选，分辨率：320x480*/
"retina35": "",/*3.5英寸设备(iPhone4)启动图片，分辨率：640x960*/
"retina40": ""
},
"ipad": {
"portrait": "", /*iPad竖屏启动图片，分辨率：768x1004*/
"portrait-retina": "",/*iPad高分屏竖屏图片，分辨率：1536x2008*/
"landscape": "", /*iPad横屏启动图片，分辨率：1024x748*/
"landscape-retina": "", /*iPad高分屏横屏启动图片，分辨率：2048x1496*/
"portrait7": "", /*iPad iOS7竖屏启动图片，分辨率：768x1024*/
"portrait-retina7": "",/*iPad iOS7高分屏竖屏图片，分辨率：1536x2048*/
"landscape7": "", /*iPad iOS7横屏启动图片，分辨率：1024x768*/
"landscape-retina7": ""
}
},
"android": {
"mdpi": "", /*普通屏启动图片，分辨率：240x282*/
"ldpi": "", /*大屏启动图片，分辨率：320x442*/
"hdpi": "", /*高分屏启动图片，分辨率：480x762*/
"xhdpi": "", /*720P高分屏启动图片，分辨率：720x1242*/
"xxhdpi": ""
}
}
}
},
"dependencies": {
"pages": {
"setting.html": {
"href": "setting.html",
"resources": [
"js/mui.min.js",
"js/mui.view.js",
"libs/easymob-webim-sdk/jquery-1.11.1.js",
"libs/easymob-webim-sdk/strophe-custom-2.0.0.js",
"libs/easymob-webim-sdk/json2.js",
"libs/easymob-webim-sdk/easemob.im-1.0.5.js",
"js/feedback.js",
"js/feedback-page.js",
"js/mui.locker.js",
"js/app.js",
"css/mui.min.css",
"fonts/mui.ttf",
"css/feedback-page.css",
"images/iconfont-tianjia.png"
],
"refer": [
"login.html"
],
"priority": 1
},
"main.html": {
"href": "main.html",
"resources": [
"css/mui.min.css",
"fonts/mui.ttf",
"js/mui.min.js",
"js/app.js"
],
"refer": [
"setting.html"
],
"priority": 1
},
"unlock.html": {
"href": "unlock.html",
"resources": [
"css/mui.min.css",
"fonts/mui.ttf",
"js/mui.min.js",
"js/mui.locker.js",
"js/app.js"
],
"refer": [
"login.html",
"main.html"
],
"priority": 0
},
"forget_password.html": {
"href": "forget_password.html",
"resources": [
"css/mui.min.css",
"fonts/mui.ttf",
"css/style.css",
"js/mui.min.js",
"js/app.js"
],
"priority": 1
},
"reg.html": {
"href": "reg.html",
"resources": [
"css/mui.min.css",
"fonts/mui.ttf",
"css/style.css",
"js/mui.min.js",
"js/app.js"
],
"refer": [
"login.html"
],
"priority": 3
},
"login.html": {
"href": "login.html",
"resources": [
"css/mui.min.css",
"fonts/mui.ttf",
"css/style.css",
"js/mui.min.js",
"js/mui.enterfocus.js",
"js/app.js",
"images/qihoo.png",
"images/qq.png",
"images/sinaweibo.png",
"images/weixin.png"
],
"refer": [
"unlock.html",
"forget_password.html",
"main.html",
"reg.html"
],
"priority": 0
}
},
"idle": {
"resources": [
"js/service.js",
"libs/easymob-webim-sdk/quickstart.md",
"images/user-photo.png",
"README.md"
]
}
},
"unpackage": [
"README.md"
]
}
================================================
FILE: examples/login/reg.html
================================================
注册
注册真实可用，注册成功后的用户可用于登录，但是示例程序并未和服务端交互，用户相关数据仅存储于本地。
================================================
FILE: examples/login/setting.html
================================================
Hello MUI
问题反馈
问题和意见
图片(选填,提供问题截图)
QQ/邮箱
提交
此示例基于环信 “WebIM SDK” + 环信 “移动客服” 实现，在环信 “移动客服面板” 能够查阅反馈信息。
================================================
FILE: examples/login/unlock.html
================================================
new webview
Hello MUI
Hello MUI
这是subNView模式选项卡中的第2个子页面，该页面展示一个通讯录示例
================================================
FILE: examples/nativeTab/index.html
================================================
首页
这是使用nativeObj 原生控件绘制的底部选项卡示例，当前为父页面，显示第一个tab项内容；
这里采用将第一个tab项内容放在父页面显示，因为是入口页面，会在启动中进行渲染，使首页显示速度更快
选项卡常用于App首页，为加快渲染，原生底部选项卡是在manifest.json中通过plus -> launchwebview -> subNViews 节点配置的；
选项卡图标使用字体绘制，点击可切换对应选项卡的高亮状态，开发者可自定义相应的点击事件；
本示例中，点击第二个选项卡打开一个支持下拉刷新的webview；点击第四个选项卡，打开一个新窗口。
中间悬浮大球图标，因涉及屏幕分辨率动态计算，目前是在首页plusReady事件中实现绘制的。该悬浮大球支持点击事件，开发者可定制实现对应的点击逻辑。
为提高性能，本示例选项卡图标全部使用字体文件绘制（推荐），实际使用中也可以使用图片绘制。
================================================
FILE: examples/nativeTab/js/mui.js
================================================
/*!
* =====================================================
* Mui v3.7.0 (http://dev.dcloud.net.cn/mui)
* =====================================================
*/
/**
* MUI核心JS
* @type _L4.$|Function
*/
var mui = (function(document, undefined) {
var readyRE = /complete|loaded|interactive/;
var idSelectorRE = /^#([\w-]+)$/;
var classSelectorRE = /^\.([\w-]+)$/;
var tagSelectorRE = /^[\w-]+$/;
var translateRE = /translate(?:3d)?\((.+?)\)/;
var translateMatrixRE = /matrix(3d)?\((.+?)\)/;
var $ = function(selector, context) {
context = context || document;
if (!selector)
return wrap();
if (typeof selector === 'object')
if ($.isArrayLike(selector)) {
return wrap($.slice.call(selector), null);
} else {
return wrap([selector], null);
}
if (typeof selector === 'function')
return $.ready(selector);
if (typeof selector === 'string') {
try {
selector = selector.trim();
if (idSelectorRE.test(selector)) {
var found = document.getElementById(RegExp.$1);
return wrap(found ? [found] : []);
}
return wrap($.qsa(selector, context), selector);
} catch (e) {}
}
return wrap();
};
var wrap = function(dom, selector) {
dom = dom || [];
Object.setPrototypeOf(dom, $.fn);
dom.selector = selector || '';
return dom;
};
$.uuid = 0;
$.data = {};
/**
* extend(simple)
* @param {type} target
* @param {type} source
* @param {type} deep
* @returns {unresolved}
*/
$.extend = function() { //from jquery2
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;
if (typeof target === "boolean") {
deep = target;
target = arguments[i] || {};
i++;
}
if (typeof target !== "object" && !$.isFunction(target)) {
target = {};
}
if (i === length) {
target = this;
i--;
}
for (; i < length; i++) {
if ((options = arguments[i]) != null) {
for (name in options) {
src = target[name];
copy = options[name];
if (target === copy) {
continue;
}
if (deep && copy && ($.isPlainObject(copy) || (copyIsArray = $.isArray(copy)))) {
if (copyIsArray) {
copyIsArray = false;
clone = src && $.isArray(src) ? src : [];
} else {
clone = src && $.isPlainObject(src) ? src : {};
}
target[name] = $.extend(deep, clone, copy);
} else if (copy !== undefined) {
target[name] = copy;
}
}
}
}
return target;
};
/**
* mui noop(function)
*/
$.noop = function() {};
/**
* mui slice(array)
*/
$.slice = [].slice;
/**
* mui filter(array)
*/
$.filter = [].filter;
$.type = function(obj) {
return obj == null ? String(obj) : class2type[{}.toString.call(obj)] || "object";
};
/**
* mui isArray
*/
$.isArray = Array.isArray ||
function(object) {
return object instanceof Array;
};
/**
* mui isArrayLike
* @param {Object} obj
*/
$.isArrayLike = function(obj) {
var length = !!obj && "length" in obj && obj.length;
var type = $.type(obj);
if (type === "function" || $.isWindow(obj)) {
return false;
}
return type === "array" || length === 0 ||
typeof length === "number" && length > 0 && (length - 1) in obj;
};
/**
* mui isWindow(需考虑obj为undefined的情况)
*/
$.isWindow = function(obj) {
return obj != null && obj === obj.window;
};
/**
* mui isObject
*/
$.isObject = function(obj) {
return $.type(obj) === "object";
};
/**
* mui isPlainObject
*/
$.isPlainObject = function(obj) {
return $.isObject(obj) && !$.isWindow(obj) && Object.getPrototypeOf(obj) === Object.prototype;
};
/**
* mui isEmptyObject
* @param {Object} o
*/
$.isEmptyObject = function(o) {
for (var p in o) {
if (p !== undefined) {
return false;
}
}
return true;
};
/**
* mui isFunction
*/
$.isFunction = function(value) {
return $.type(value) === "function";
};
/**
* mui querySelectorAll
* @param {type} selector
* @param {type} context
* @returns {Array}
*/
$.qsa = function(selector, context) {
context = context || document;
return $.slice.call(classSelectorRE.test(selector) ? context.getElementsByClassName(RegExp.$1) : tagSelectorRE.test(selector) ? context.getElementsByTagName(selector) : context.querySelectorAll(selector));
};
/**
* ready(DOMContentLoaded)
* @param {type} callback
* @returns {_L6.$}
*/
$.ready = function(callback) {
if (readyRE.test(document.readyState)) {
callback($);
} else {
document.addEventListener('DOMContentLoaded', function() {
callback($);
}, false);
}
return this;
};
/**
* 将 fn 缓存一段时间后, 再被调用执行
* 此方法为了避免在 ms 段时间内, 执行 fn 多次. 常用于 resize , scroll , mousemove 等连续性事件中;
* 当 ms 设置为 -1, 表示立即执行 fn, 即和直接调用 fn 一样;
* 调用返回函数的 stop 停止最后一次的 buffer 效果
* @param {Object} fn
* @param {Object} ms
* @param {Object} context
*/
$.buffer = function(fn, ms, context) {
var timer;
var lastStart = 0;
var lastEnd = 0;
var ms = ms || 150;
function run() {
if (timer) {
timer.cancel();
timer = 0;
}
lastStart = $.now();
fn.apply(context || this, arguments);
lastEnd = $.now();
}
return $.extend(function() {
if (
(!lastStart) || // 从未运行过
(lastEnd >= lastStart && $.now() - lastEnd > ms) || // 上次运行成功后已经超过ms毫秒
(lastEnd < lastStart && $.now() - lastStart > ms * 8) // 上次运行或未完成，后8*ms毫秒
) {
run.apply(this, arguments);
} else {
if (timer) {
timer.cancel();
}
timer = $.later(run, ms, null, $.slice.call(arguments));
}
}, {
stop: function() {
if (timer) {
timer.cancel();
timer = 0;
}
}
});
};
/**
* each
* @param {type} elements
* @param {type} callback
* @returns {_L8.$}
*/
$.each = function(elements, callback, hasOwnProperty) {
if (!elements) {
return this;
}
if (typeof elements.length === 'number') {
[].every.call(elements, function(el, idx) {
return callback.call(el, idx, el) !== false;
});
} else {
for (var key in elements) {
if (hasOwnProperty) {
if (elements.hasOwnProperty(key)) {
if (callback.call(elements[key], key, elements[key]) === false) return elements;
}
} else {
if (callback.call(elements[key], key, elements[key]) === false) return elements;
}
}
}
return this;
};
$.focus = function(element) {
if ($.os.ios) {
setTimeout(function() {
element.focus();
}, 10);
} else {
element.focus();
}
};
/**
* trigger event
* @param {type} element
* @param {type} eventType
* @param {type} eventData
* @returns {_L8.$}
*/
$.trigger = function(element, eventType, eventData) {
element.dispatchEvent(new CustomEvent(eventType, {
detail: eventData,
bubbles: true,
cancelable: true
}));
return this;
};
/**
* getStyles
* @param {type} element
* @param {type} property
* @returns {styles}
*/
$.getStyles = function(element, property) {
var styles = element.ownerDocument.defaultView.getComputedStyle(element, null);
if (property) {
return styles.getPropertyValue(property) || styles[property];
}
return styles;
};
/**
* parseTranslate
* @param {type} translateString
* @param {type} position
* @returns {Object}
*/
$.parseTranslate = function(translateString, position) {
var result = translateString.match(translateRE || '');
if (!result || !result[1]) {
result = ['', '0,0,0'];
}
result = result[1].split(",");
result = {
x: parseFloat(result[0]),
y: parseFloat(result[1]),
z: parseFloat(result[2])
};
if (position && result.hasOwnProperty(position)) {
return result[position];
}
return result;
};
/**
* parseTranslateMatrix
* @param {type} translateString
* @param {type} position
* @returns {Object}
*/
$.parseTranslateMatrix = function(translateString, position) {
var matrix = translateString.match(translateMatrixRE);
var is3D = matrix && matrix[1];
if (matrix) {
matrix = matrix[2].split(",");
if (is3D === "3d")
matrix = matrix.slice(12, 15);
else {
matrix.push(0);
matrix = matrix.slice(4, 7);
}
} else {
matrix = [0, 0, 0];
}
var result = {
x: parseFloat(matrix[0]),
y: parseFloat(matrix[1]),
z: parseFloat(matrix[2])
};
if (position && result.hasOwnProperty(position)) {
return result[position];
}
return result;
};
$.hooks = {};
$.addAction = function(type, hook) {
var hooks = $.hooks[type];
if (!hooks) {
hooks = [];
}
hook.index = hook.index || 1000;
hooks.push(hook);
hooks.sort(function(a, b) {
return a.index - b.index;
});
$.hooks[type] = hooks;
return $.hooks[type];
};
$.doAction = function(type, callback) {
if ($.isFunction(callback)) { //指定了callback
$.each($.hooks[type], callback);
} else { //未指定callback，直接执行
$.each($.hooks[type], function(index, hook) {
return !hook.handle();
});
}
};
/**
* setTimeout封装
* @param {Object} fn
* @param {Object} when
* @param {Object} context
* @param {Object} data
*/
$.later = function(fn, when, context, data) {
when = when || 0;
var m = fn;
var d = data;
var f;
var r;
if (typeof fn === 'string') {
m = context[fn];
}
f = function() {
m.apply(context, $.isArray(d) ? d : [d]);
};
r = setTimeout(f, when);
return {
id: r,
cancel: function() {
clearTimeout(r);
}
};
};
$.now = Date.now || function() {
return +new Date();
};
var class2type = {};
$.each(['Boolean', 'Number', 'String', 'Function', 'Array', 'Date', 'RegExp', 'Object', 'Error'], function(i, name) {
class2type["[object " + name + "]"] = name.toLowerCase();
});
if (window.JSON) {
$.parseJSON = JSON.parse;
}
/**
* $.fn
*/
$.fn = {
each: function(callback) {
[].every.call(this, function(el, idx) {
return callback.call(el, idx, el) !== false;
});
return this;
}
};
/**
* 兼容 AMD 模块
**/
if (typeof define === 'function' && define.amd) {
define('mui', [], function() {
return $;
});
}
return $;
})(document);
//window.mui = mui;
//'$' in window || (window.$ = mui);
/**
* $.os
* @param {type} $
* @returns {undefined}
*/
(function($, window) {
function detect(ua) {
this.os = {};
var funcs = [
function() { //wechat
var wechat = ua.match(/(MicroMessenger)\/([\d\.]+)/i);
if (wechat) { //wechat
this.os.wechat = {
version: wechat[2].replace(/_/g, '.')
};
}
return false;
},
function() { //android
var android = ua.match(/(Android);?[\s\/]+([\d.]+)?/);
if (android) {
this.os.android = true;
this.os.version = android[2];
this.os.isBadAndroid = !(/Chrome\/\d/.test(window.navigator.appVersion));
}
return this.os.android === true;
},
function() { //ios
var iphone = ua.match(/(iPhone\sOS)\s([\d_]+)/);
if (iphone) { //iphone
this.os.ios = this.os.iphone = true;
this.os.version = iphone[2].replace(/_/g, '.');
} else {
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
if (ipad) { //ipad
this.os.ios = this.os.ipad = true;
this.os.version = ipad[2].replace(/_/g, '.');
}
}
return this.os.ios === true;
}
];
[].every.call(funcs, function(func) {
return !func.call($);
});
}
detect.call($, navigator.userAgent);
})(mui, window);
/**
* $.os.plus
* @param {type} $
* @returns {undefined}
*/
(function($, document) {
function detect(ua) {
this.os = this.os || {};
var plus = ua.match(/Html5Plus/i); //TODO 5\+Browser?
if (plus) {
this.os.plus = true;
$(function() {
document.body.classList.add('mui-plus');
});
if (ua.match(/StreamApp/i)) { //TODO 最好有流应用自己的标识
this.os.stream = true;
$(function() {
document.body.classList.add('mui-plus-stream');
});
}
}
}
detect.call($, navigator.userAgent);
})(mui, document);
/**
* 仅提供简单的on，off(仅支持事件委托，不支持当前元素绑定，当前元素绑定请直接使用addEventListener,removeEventListener)
* @param {Object} $
*/
(function($) {
if ('ontouchstart' in window) {
$.isTouchable = true;
$.EVENT_START = 'touchstart';
$.EVENT_MOVE = 'touchmove';
$.EVENT_END = 'touchend';
} else {
$.isTouchable = false;
$.EVENT_START = 'mousedown';
$.EVENT_MOVE = 'mousemove';
$.EVENT_END = 'mouseup';
}
$.EVENT_CANCEL = 'touchcancel';
$.EVENT_CLICK = 'click';
var _mid = 1;
var delegates = {};
//需要wrap的函数
var eventMethods = {
preventDefault: 'isDefaultPrevented',
stopImmediatePropagation: 'isImmediatePropagationStopped',
stopPropagation: 'isPropagationStopped'
};
//默认true返回函数
var returnTrue = function() {
return true
};
//默认false返回函数
var returnFalse = function() {
return false
};
//wrap浏览器事件
var compatible = function(event, target) {
if (!event.detail) {
event.detail = {
currentTarget: target
};
} else {
event.detail.currentTarget = target;
}
$.each(eventMethods, function(name, predicate) {
var sourceMethod = event[name];
event[name] = function() {
this[predicate] = returnTrue;
return sourceMethod && sourceMethod.apply(event, arguments)
}
event[predicate] = returnFalse;
}, true);
return event;
};
//简单的wrap对象_mid
var mid = function(obj) {
return obj && (obj._mid || (obj._mid = _mid++));
};
//事件委托对象绑定的事件回调列表
var delegateFns = {};
//返回事件委托的wrap事件回调
var delegateFn = function(element, event, selector, callback) {
return function(e) {
//same event
var callbackObjs = delegates[element._mid][event];
var handlerQueue = [];
var target = e.target;
var selectorAlls = {};
for (; target && target !== document; target = target.parentNode) {
if (target === element) {
break;
}
if (~['click', 'tap', 'doubletap', 'longtap', 'hold'].indexOf(event) && (target.disabled || target.classList.contains('mui-disabled'))) {
break;
}
var matches = {};
$.each(callbackObjs, function(selector, callbacks) { //same selector
selectorAlls[selector] || (selectorAlls[selector] = $.qsa(selector, element));
if (selectorAlls[selector] && ~(selectorAlls[selector]).indexOf(target)) {
if (!matches[selector]) {
matches[selector] = callbacks;
}
}
}, true);
if (!$.isEmptyObject(matches)) {
handlerQueue.push({
element: target,
handlers: matches
});
}
}
selectorAlls = null;
e = compatible(e); //compatible event
$.each(handlerQueue, function(index, handler) {
target = handler.element;
var tagName = target.tagName;
if (event === 'tap' && (tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'SELECT')) {
e.preventDefault();
e.detail && e.detail.gesture && e.detail.gesture.preventDefault();
}
$.each(handler.handlers, function(index, handler) {
$.each(handler, function(index, callback) {
if (callback.call(target, e) === false) {
e.preventDefault();
e.stopPropagation();
}
}, true);
}, true)
if (e.isPropagationStopped()) {
return false;
}
}, true);
};
};
var findDelegateFn = function(element, event) {
var delegateCallbacks = delegateFns[mid(element)];
var result = [];
if (delegateCallbacks) {
result = [];
if (event) {
var filterFn = function(fn) {
return fn.type === event;
}
return delegateCallbacks.filter(filterFn);
} else {
result = delegateCallbacks;
}
}
return result;
};
var preventDefaultException = /^(INPUT|TEXTAREA|BUTTON|SELECT)$/;
/**
* mui delegate events
* @param {type} event
* @param {type} selector
* @param {type} callback
* @returns {undefined}
*/
$.fn.on = function(event, selector, callback) { //仅支持简单的事件委托,主要是tap事件使用，类似mouse,focus之类暂不封装支持
return this.each(function() {
var element = this;
mid(element);
mid(callback);
var isAddEventListener = false;
var delegateEvents = delegates[element._mid] || (delegates[element._mid] = {});
var delegateCallbackObjs = delegateEvents[event] || ((delegateEvents[event] = {}));
if ($.isEmptyObject(delegateCallbackObjs)) {
isAddEventListener = true;
}
var delegateCallbacks = delegateCallbackObjs[selector] || (delegateCallbackObjs[selector] = []);
delegateCallbacks.push(callback);
if (isAddEventListener) {
var delegateFnArray = delegateFns[mid(element)];
if (!delegateFnArray) {
delegateFnArray = [];
}
var delegateCallback = delegateFn(element, event, selector, callback);
delegateFnArray.push(delegateCallback);
delegateCallback.i = delegateFnArray.length - 1;
delegateCallback.type = event;
delegateFns[mid(element)] = delegateFnArray;
element.addEventListener(event, delegateCallback);
if (event === 'tap') { //TODO 需要找个更好的解决方案
element.addEventListener('click', function(e) {
if (e.target) {
var tagName = e.target.tagName;
if (!preventDefaultException.test(tagName)) {
if (tagName === 'A') {
var href = e.target.href;
if (!(href && ~href.indexOf('tel:'))) {
e.preventDefault();
}
} else {
e.preventDefault();
}
}
}
});
}
}
});
};
$.fn.off = function(event, selector, callback) {
return this.each(function() {
var _mid = mid(this);
if (!event) { //mui(selector).off();
delegates[_mid] && delete delegates[_mid];
} else if (!selector) { //mui(selector).off(event);
delegates[_mid] && delete delegates[_mid][event];
} else if (!callback) { //mui(selector).off(event,selector);
delegates[_mid] && delegates[_mid][event] && delete delegates[_mid][event][selector];
} else { //mui(selector).off(event,selector,callback);
var delegateCallbacks = delegates[_mid] && delegates[_mid][event] && delegates[_mid][event][selector];
$.each(delegateCallbacks, function(index, delegateCallback) {
if (mid(delegateCallback) === mid(callback)) {
delegateCallbacks.splice(index, 1);
return false;
}
}, true);
}
if (delegates[_mid]) {
//如果off掉了所有当前element的指定的event事件，则remove掉当前element的delegate回调
if ((!delegates[_mid][event] || $.isEmptyObject(delegates[_mid][event]))) {
findDelegateFn(this, event).forEach(function(fn) {
this.removeEventListener(fn.type, fn);
delete delegateFns[_mid][fn.i];
}.bind(this));
}
} else {
//如果delegates[_mid]已不存在，删除所有
findDelegateFn(this).forEach(function(fn) {
this.removeEventListener(fn.type, fn);
delete delegateFns[_mid][fn.i];
}.bind(this));
}
});
};
})(mui);
/**
* mui target(action>popover>modal>tab>toggle)
*/
(function($, window, document) {
/**
* targets
*/
$.targets = {};
/**
* target handles
*/
$.targetHandles = [];
/**
* register target
* @param {type} target
* @returns {$.targets}
*/
$.registerTarget = function(target) {
target.index = target.index || 1000;
$.targetHandles.push(target);
$.targetHandles.sort(function(a, b) {
return a.index - b.index;
});
return $.targetHandles;
};
window.addEventListener($.EVENT_START, function(event) {
var target = event.target;
var founds = {};
for (; target && target !== document; target = target.parentNode) {
var isFound = false;
$.each($.targetHandles, function(index, targetHandle) {
var name = targetHandle.name;
if (!isFound && !founds[name] && targetHandle.hasOwnProperty('handle')) {
$.targets[name] = targetHandle.handle(event, target);
if ($.targets[name]) {
founds[name] = true;
if (targetHandle.isContinue !== true) {
isFound = true;
}
}
} else {
if (!founds[name]) {
if (targetHandle.isReset !== false)
$.targets[name] = false;
}
}
});
if (isFound) {
break;
}
}
});
window.addEventListener('click', function(event) { //解决touch与click的target不一致的问题(比如链接边缘点击时，touch的target为html，而click的target为A)
var target = event.target;
var isFound = false;
for (; target && target !== document; target = target.parentNode) {
if (target.tagName === 'A') {
$.each($.targetHandles, function(index, targetHandle) {
var name = targetHandle.name;
if (targetHandle.hasOwnProperty('handle')) {
if (targetHandle.handle(event, target)) {
isFound = true;
event.preventDefault();
return false;
}
}
});
if (isFound) {
break;
}
}
}
});
})(mui, window, document);
/**
* fixed trim
* @param {type} undefined
* @returns {undefined}
*/
(function(undefined) {
if (String.prototype.trim === undefined) { // fix for iOS 3.2
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
};
}
Object.setPrototypeOf = Object.setPrototypeOf || function(obj, proto) {
obj['__proto__'] = proto;
return obj;
};
})();
/**
* fixed CustomEvent
*/
(function() {
if (typeof window.CustomEvent === 'undefined') {
function CustomEvent(event, params) {
params = params || {
bubbles: false,
cancelable: false,
detail: undefined
};
var evt = document.createEvent('Events');
var bubbles = true;
for (var name in params) {
(name === 'bubbles') ? (bubbles = !!params[name]) : (evt[name] = params[name]);
}
evt.initEvent(event, bubbles, true);
return evt;
};
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
}
})();
/*
A shim for non ES5 supporting browsers.
Adds function bind to Function prototype, so that you can do partial application.
Works even with the nasty thing, where the first word is the opposite of extranet, the second one is the profession of Columbus, and the version number is 9, flipped 180 degrees.
*/
Function.prototype.bind = Function.prototype.bind || function(to) {
// Make an array of our arguments, starting from second argument
var partial = Array.prototype.splice.call(arguments, 1),
// We'll need the original function.
fn = this;
var bound = function() {
// Join the already applied arguments to the now called ones (after converting to an array again).
var args = partial.concat(Array.prototype.splice.call(arguments, 0));
// If not being called as a constructor
if (!(this instanceof bound)) {
// return the result of the function called bound to target and partially applied.
return fn.apply(to, args);
}
// If being called as a constructor, apply the function bound to self.
fn.apply(this, args);
}
// Attach the prototype of the function to our newly created function.
bound.prototype = fn.prototype;
return bound;
};
/**
* mui fixed classList
* @param {type} document
* @returns {undefined}
*/
(function(document) {
if (!("classList" in document.documentElement) && Object.defineProperty && typeof HTMLElement !== 'undefined') {
Object.defineProperty(HTMLElement.prototype, 'classList', {
get: function() {
var self = this;
function update(fn) {
return function(value) {
var classes = self.className.split(/\s+/),
index = classes.indexOf(value);
fn(classes, index, value);
self.className = classes.join(" ");
};
}
var ret = {
add: update(function(classes, index, value) {
~index || classes.push(value);
}),
remove: update(function(classes, index) {
~index && classes.splice(index, 1);
}),
toggle: update(function(classes, index, value) {
~index ? classes.splice(index, 1) : classes.push(value);
}),
contains: function(value) {
return !!~self.className.split(/\s+/).indexOf(value);
},
item: function(i) {
return self.className.split(/\s+/)[i] || null;
}
};
Object.defineProperty(ret, 'length', {
get: function() {
return self.className.split(/\s+/).length;
}
});
return ret;
}
});
}
})(document);
/**
* mui fixed requestAnimationFrame
* @param {type} window
* @returns {undefined}
*/
(function(window) {
if (!window.requestAnimationFrame) {
var lastTime = 0;
window.requestAnimationFrame = window.webkitRequestAnimationFrame || function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
window.cancelAnimationFrame = window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame || function(id) {
clearTimeout(id);
};
};
}(window));
/**
* fastclick(only for radio,checkbox)
*/
(function($, window, name) {
if (!$.os.android && !$.os.ios) { //目前仅识别android和ios
return;
}
if (window.FastClick) {
return;
}
var handle = function(event, target) {
if (target.tagName === 'LABEL') {
if (target.parentNode) {
target = target.parentNode.querySelector('input');
}
}
if (target && (target.type === 'radio' || target.type === 'checkbox')) {
if (!target.disabled) { //disabled
return target;
}
}
return false;
};
$.registerTarget({
name: name,
index: 40,
handle: handle,
target: false
});
var dispatchEvent = function(event) {
var targetElement = $.targets.click;
if (targetElement) {
var clickEvent, touch;
// On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect
if (document.activeElement && document.activeElement !== targetElement) {
document.activeElement.blur();
}
touch = event.detail.gesture.changedTouches[0];
// Synthesise a click event, with an extra attribute so it can be tracked
clickEvent = document.createEvent('MouseEvents');
clickEvent.initMouseEvent('click', true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
clickEvent.forwardedTouchEvent = true;
targetElement.dispatchEvent(clickEvent);
event.detail && event.detail.gesture.preventDefault();
}
};
window.addEventListener('tap', dispatchEvent);
window.addEventListener('doubletap', dispatchEvent);
//捕获
window.addEventListener('click', function(event) {
if ($.targets.click) {
if (!event.forwardedTouchEvent) { //stop click
if (event.stopImmediatePropagation) {
event.stopImmediatePropagation();
} else {
// Part of the hack for browsers that don't support Event#stopImmediatePropagation
event.propagationStopped = true;
}
event.stopPropagation();
event.preventDefault();
return false;
}
}
}, true);
})(mui, window, 'click');
(function($, document) {
$(function() {
if (!$.os.ios) {
return;
}
var CLASS_FOCUSIN = 'mui-focusin';
var CLASS_BAR_TAB = 'mui-bar-tab';
var CLASS_BAR_FOOTER = 'mui-bar-footer';
var CLASS_BAR_FOOTER_SECONDARY = 'mui-bar-footer-secondary';
var CLASS_BAR_FOOTER_SECONDARY_TAB = 'mui-bar-footer-secondary-tab';
// var content = document.querySelector('.' + CLASS_CONTENT);
// if (content) {
// document.body.insertBefore(content, document.body.firstElementChild);
// }
document.addEventListener('focusin', function(e) {
if ($.os.plus) { //在父webview里边不fix
if (window.plus) {
if (plus.webview.currentWebview().children().length > 0) {
return;
}
}
}
var target = e.target;
//TODO 需考虑所有键盘弹起的情况
if (target.tagName && (target.tagName === 'TEXTAREA' || (target.tagName === 'INPUT' && (target.type === 'text' || target.type === 'search' || target.type === 'number')))) {
if (target.disabled || target.readOnly) {
return;
}
document.body.classList.add(CLASS_FOCUSIN);
var isFooter = false;
for (; target && target !== document; target = target.parentNode) {
var classList = target.classList;
if (classList && classList.contains(CLASS_BAR_TAB) || classList.contains(CLASS_BAR_FOOTER) || classList.contains(CLASS_BAR_FOOTER_SECONDARY) || classList.contains(CLASS_BAR_FOOTER_SECONDARY_TAB)) {
isFooter = true;
break;
}
}
if (isFooter) {
var scrollTop = document.body.scrollHeight;
var scrollLeft = document.body.scrollLeft;
setTimeout(function() {
window.scrollTo(scrollLeft, scrollTop);
}, 20);
}
}
});
document.addEventListener('focusout', function(e) {
var classList = document.body.classList;
if (classList.contains(CLASS_FOCUSIN)) {
classList.remove(CLASS_FOCUSIN);
setTimeout(function() {
window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
}, 20);
}
});
});
})(mui, document);
/**
* mui namespace(optimization)
* @param {type} $
* @returns {undefined}
*/
(function($) {
$.namespace = 'mui';
$.classNamePrefix = $.namespace + '-';
$.classSelectorPrefix = '.' + $.classNamePrefix;
/**
* 返回正确的className
* @param {type} className
* @returns {String}
*/
$.className = function(className) {
return $.classNamePrefix + className;
};
/**
* 返回正确的classSelector
* @param {type} classSelector
* @returns {String}
*/
$.classSelector = function(classSelector) {
return classSelector.replace(/\./g, $.classSelectorPrefix);
};
/**
* 返回正确的eventName
* @param {type} event
* @param {type} module
* @returns {String}
*/
$.eventName = function(event, module) {
return event + ($.namespace ? ('.' + $.namespace) : '') + ( module ? ('.' + module) : '');
};
})(mui);
/**
* mui gestures
* @param {type} $
* @param {type} window
* @returns {undefined}
*/
(function($, window) {
$.gestures = {
session: {}
};
/**
* Gesture preventDefault
* @param {type} e
* @returns {undefined}
*/
$.preventDefault = function(e) {
e.preventDefault();
};
/**
* Gesture stopPropagation
* @param {type} e
* @returns {undefined}
*/
$.stopPropagation = function(e) {
e.stopPropagation();
};
/**
* register gesture
* @param {type} gesture
* @returns {$.gestures}
*/
$.addGesture = function(gesture) {
return $.addAction('gestures', gesture);
};
var round = Math.round;
var abs = Math.abs;
var sqrt = Math.sqrt;
var atan = Math.atan;
var atan2 = Math.atan2;
/**
* distance
* @param {type} p1
* @param {type} p2
* @returns {Number}
*/
var getDistance = function(p1, p2, props) {
if (!props) {
props = ['x', 'y'];
}
var x = p2[props[0]] - p1[props[0]];
var y = p2[props[1]] - p1[props[1]];
return sqrt((x * x) + (y * y));
};
/**
* scale
* @param {Object} starts
* @param {Object} moves
*/
var getScale = function(starts, moves) {
if (starts.length >= 2 && moves.length >= 2) {
var props = ['pageX', 'pageY'];
return getDistance(moves[1], moves[0], props) / getDistance(starts[1], starts[0], props);
}
return 1;
};
/**
* angle
* @param {type} p1
* @param {type} p2
* @returns {Number}
*/
var getAngle = function(p1, p2, props) {
if (!props) {
props = ['x', 'y'];
}
var x = p2[props[0]] - p1[props[0]];
var y = p2[props[1]] - p1[props[1]];
return atan2(y, x) * 180 / Math.PI;
};
/**
* direction
* @param {Object} x
* @param {Object} y
*/
var getDirection = function(x, y) {
if (x === y) {
return '';
}
if (abs(x) >= abs(y)) {
return x > 0 ? 'left' : 'right';
}
return y > 0 ? 'up' : 'down';
};
/**
* rotation
* @param {Object} start
* @param {Object} end
*/
var getRotation = function(start, end) {
var props = ['pageX', 'pageY'];
return getAngle(end[1], end[0], props) - getAngle(start[1], start[0], props);
};
/**
* px per ms
* @param {Object} deltaTime
* @param {Object} x
* @param {Object} y
*/
var getVelocity = function(deltaTime, x, y) {
return {
x: x / deltaTime || 0,
y: y / deltaTime || 0
};
};
/**
* detect gestures
* @param {type} event
* @param {type} touch
* @returns {undefined}
*/
var detect = function(event, touch) {
if ($.gestures.stoped) {
return;
}
$.doAction('gestures', function(index, gesture) {
if (!$.gestures.stoped) {
if ($.options.gestureConfig[gesture.name] !== false) {
gesture.handle(event, touch);
}
}
});
};
/**
* 暂时无用
* @param {Object} node
* @param {Object} parent
*/
var hasParent = function(node, parent) {
while (node) {
if (node == parent) {
return true;
}
node = node.parentNode;
}
return false;
};
var uniqueArray = function(src, key, sort) {
var results = [];
var values = [];
var i = 0;
while (i < src.length) {
var val = key ? src[i][key] : src[i];
if (values.indexOf(val) < 0) {
results.push(src[i]);
}
values[i] = val;
i++;
}
if (sort) {
if (!key) {
results = results.sort();
} else {
results = results.sort(function sortUniqueArray(a, b) {
return a[key] > b[key];
});
}
}
return results;
};
var getMultiCenter = function(touches) {
var touchesLength = touches.length;
if (touchesLength === 1) {
return {
x: round(touches[0].pageX),
y: round(touches[0].pageY)
};
}
var x = 0;
var y = 0;
var i = 0;
while (i < touchesLength) {
x += touches[i].pageX;
y += touches[i].pageY;
i++;
}
return {
x: round(x / touchesLength),
y: round(y / touchesLength)
};
};
var multiTouch = function() {
return $.options.gestureConfig.pinch;
};
var copySimpleTouchData = function(touch) {
var touches = [];
var i = 0;
while (i < touch.touches.length) {
touches[i] = {
pageX: round(touch.touches[i].pageX),
pageY: round(touch.touches[i].pageY)
};
i++;
}
return {
timestamp: $.now(),
gesture: touch.gesture,
touches: touches,
center: getMultiCenter(touch.touches),
deltaX: touch.deltaX,
deltaY: touch.deltaY
};
};
var calDelta = function(touch) {
var session = $.gestures.session;
var center = touch.center;
var offset = session.offsetDelta || {};
var prevDelta = session.prevDelta || {};
var prevTouch = session.prevTouch || {};
if (touch.gesture.type === $.EVENT_START || touch.gesture.type === $.EVENT_END) {
prevDelta = session.prevDelta = {
x: prevTouch.deltaX || 0,
y: prevTouch.deltaY || 0
};
offset = session.offsetDelta = {
x: center.x,
y: center.y
};
}
touch.deltaX = prevDelta.x + (center.x - offset.x);
touch.deltaY = prevDelta.y + (center.y - offset.y);
};
var calTouchData = function(touch) {
var session = $.gestures.session;
var touches = touch.touches;
var touchesLength = touches.length;
if (!session.firstTouch) {
session.firstTouch = copySimpleTouchData(touch);
}
if (multiTouch() && touchesLength > 1 && !session.firstMultiTouch) {
session.firstMultiTouch = copySimpleTouchData(touch);
} else if (touchesLength === 1) {
session.firstMultiTouch = false;
}
var firstTouch = session.firstTouch;
var firstMultiTouch = session.firstMultiTouch;
var offsetCenter = firstMultiTouch ? firstMultiTouch.center : firstTouch.center;
var center = touch.center = getMultiCenter(touches);
touch.timestamp = $.now();
touch.deltaTime = touch.timestamp - firstTouch.timestamp;
touch.angle = getAngle(offsetCenter, center);
touch.distance = getDistance(offsetCenter, center);
calDelta(touch);
touch.offsetDirection = getDirection(touch.deltaX, touch.deltaY);
touch.scale = firstMultiTouch ? getScale(firstMultiTouch.touches, touches) : 1;
touch.rotation = firstMultiTouch ? getRotation(firstMultiTouch.touches, touches) : 0;
calIntervalTouchData(touch);
};
var CAL_INTERVAL = 25;
var calIntervalTouchData = function(touch) {
var session = $.gestures.session;
var last = session.lastInterval || touch;
var deltaTime = touch.timestamp - last.timestamp;
var velocity;
var velocityX;
var velocityY;
var direction;
if (touch.gesture.type != $.EVENT_CANCEL && (deltaTime > CAL_INTERVAL || last.velocity === undefined)) {
var deltaX = last.deltaX - touch.deltaX;
var deltaY = last.deltaY - touch.deltaY;
var v = getVelocity(deltaTime, deltaX, deltaY);
velocityX = v.x;
velocityY = v.y;
velocity = (abs(v.x) > abs(v.y)) ? v.x : v.y;
direction = getDirection(deltaX, deltaY) || last.direction;
session.lastInterval = touch;
} else {
velocity = last.velocity;
velocityX = last.velocityX;
velocityY = last.velocityY;
direction = last.direction;
}
touch.velocity = velocity;
touch.velocityX = velocityX;
touch.velocityY = velocityY;
touch.direction = direction;
};
var targetIds = {};
var convertTouches = function(touches) {
for (var i = 0; i < touches.length; i++) {
!touches['identifier'] && (touches['identifier'] = 0);
}
return touches;
};
var getTouches = function(event, touch) {
var allTouches = convertTouches($.slice.call(event.touches || [event]));
var type = event.type;
var targetTouches = [];
var changedTargetTouches = [];
//当touchstart或touchmove且touches长度为1，直接获得all和changed
if ((type === $.EVENT_START || type === $.EVENT_MOVE) && allTouches.length === 1) {
targetIds[allTouches[0].identifier] = true;
targetTouches = allTouches;
changedTargetTouches = allTouches;
touch.target = event.target;
} else {
var i = 0;
var targetTouches = [];
var changedTargetTouches = [];
var changedTouches = convertTouches($.slice.call(event.changedTouches || [event]));
touch.target = event.target;
var sessionTarget = $.gestures.session.target || event.target;
targetTouches = allTouches.filter(function(touch) {
return hasParent(touch.target, sessionTarget);
});
if (type === $.EVENT_START) {
i = 0;
while (i < targetTouches.length) {
targetIds[targetTouches[i].identifier] = true;
i++;
}
}
i = 0;
while (i < changedTouches.length) {
if (targetIds[changedTouches[i].identifier]) {
changedTargetTouches.push(changedTouches[i]);
}
if (type === $.EVENT_END || type === $.EVENT_CANCEL) {
delete targetIds[changedTouches[i].identifier];
}
i++;
}
if (!changedTargetTouches.length) {
return false;
}
}
targetTouches = uniqueArray(targetTouches.concat(changedTargetTouches), 'identifier', true);
var touchesLength = targetTouches.length;
var changedTouchesLength = changedTargetTouches.length;
if (type === $.EVENT_START && touchesLength - changedTouchesLength === 0) { //first
touch.isFirst = true;
$.gestures.touch = $.gestures.session = {
target: event.target
};
}
touch.isFinal = ((type === $.EVENT_END || type === $.EVENT_CANCEL) && (touchesLength - changedTouchesLength === 0));
touch.touches = targetTouches;
touch.changedTouches = changedTargetTouches;
return true;
};
var handleTouchEvent = function(event) {
var touch = {
gesture: event
};
var touches = getTouches(event, touch);
if (!touches) {
return;
}
calTouchData(touch);
detect(event, touch);
$.gestures.session.prevTouch = touch;
if (event.type === $.EVENT_END && !$.isTouchable) {
$.gestures.touch = $.gestures.session = {};
}
};
window.addEventListener($.EVENT_START, handleTouchEvent);
window.addEventListener($.EVENT_MOVE, handleTouchEvent);
window.addEventListener($.EVENT_END, handleTouchEvent);
window.addEventListener($.EVENT_CANCEL, handleTouchEvent);
//fixed hashchange(android)
window.addEventListener($.EVENT_CLICK, function(e) {
//TODO 应该判断当前target是不是在targets.popover内部，而不是非要相等
if (($.os.android || $.os.ios) && (($.targets.popover && e.target === $.targets.popover) || ($.targets.tab) || $.targets.offcanvas || $.targets.modal)) {
e.preventDefault();
}
}, true);
//增加原生滚动识别
$.isScrolling = false;
var scrollingTimeout = null;
window.addEventListener('scroll', function() {
$.isScrolling = true;
scrollingTimeout && clearTimeout(scrollingTimeout);
scrollingTimeout = setTimeout(function() {
$.isScrolling = false;
}, 250);
});
})(mui, window);
/**
* mui gesture flick[left|right|up|down]
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var flickStartTime = 0;
var handle = function(event, touch) {
var session = $.gestures.session;
var options = this.options;
var now = $.now();
switch (event.type) {
case $.EVENT_MOVE:
if (now - flickStartTime > 300) {
flickStartTime = now;
session.flickStart = touch.center;
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
touch.flick = false;
if (session.flickStart && options.flickMaxTime > (now - flickStartTime) && touch.distance > options.flickMinDistince) {
touch.flick = true;
touch.flickTime = now - flickStartTime;
touch.flickDistanceX = touch.center.x - session.flickStart.x;
touch.flickDistanceY = touch.center.y - session.flickStart.y;
$.trigger(session.target, name, touch);
$.trigger(session.target, name + touch.direction, touch);
}
break;
}
};
/**
* mui gesture flick
*/
$.addGesture({
name: name,
index: 5,
handle: handle,
options: {
flickMaxTime: 200,
flickMinDistince: 10
}
});
})(mui, 'flick');
/**
* mui gesture swipe[left|right|up|down]
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var handle = function(event, touch) {
var session = $.gestures.session;
if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
var options = this.options;
touch.swipe = false;
//TODO 后续根据velocity计算
if (touch.direction && options.swipeMaxTime > touch.deltaTime && touch.distance > options.swipeMinDistince) {
touch.swipe = true;
$.trigger(session.target, name, touch);
$.trigger(session.target, name + touch.direction, touch);
}
}
};
/**
* mui gesture swipe
*/
$.addGesture({
name: name,
index: 10,
handle: handle,
options: {
swipeMaxTime: 300,
swipeMinDistince: 18
}
});
})(mui, 'swipe');
/**
* mui gesture drag[start|left|right|up|down|end]
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var handle = function(event, touch) {
var session = $.gestures.session;
switch (event.type) {
case $.EVENT_START:
break;
case $.EVENT_MOVE:
if (!touch.direction || !session.target) {
return;
}
//修正direction,可在session期间自行锁定拖拽方向，方便开发scroll类不同方向拖拽插件嵌套
if (session.lockDirection && session.startDirection) {
if (session.startDirection && session.startDirection !== touch.direction) {
if (session.startDirection === 'up' || session.startDirection === 'down') {
touch.direction = touch.deltaY < 0 ? 'up' : 'down';
} else {
touch.direction = touch.deltaX < 0 ? 'left' : 'right';
}
}
}
if (!session.drag) {
session.drag = true;
$.trigger(session.target, name + 'start', touch);
}
$.trigger(session.target, name, touch);
$.trigger(session.target, name + touch.direction, touch);
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if (session.drag && touch.isFinal) {
$.trigger(session.target, name + 'end', touch);
}
break;
}
};
/**
* mui gesture drag
*/
$.addGesture({
name: name,
index: 20,
handle: handle,
options: {
fingers: 1
}
});
})(mui, 'drag');
/**
* mui gesture tap and doubleTap
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var lastTarget;
var lastTapTime;
var handle = function(event, touch) {
var session = $.gestures.session;
var options = this.options;
switch (event.type) {
case $.EVENT_END:
if (!touch.isFinal) {
return;
}
var target = session.target;
if (!target || (target.disabled || (target.classList && target.classList.contains('mui-disabled')))) {
return;
}
if (touch.distance < options.tapMaxDistance && touch.deltaTime < options.tapMaxTime) {
if ($.options.gestureConfig.doubletap && lastTarget && (lastTarget === target)) { //same target
if (lastTapTime && (touch.timestamp - lastTapTime) < options.tapMaxInterval) {
$.trigger(target, 'doubletap', touch);
lastTapTime = $.now();
lastTarget = target;
return;
}
}
$.trigger(target, name, touch);
lastTapTime = $.now();
lastTarget = target;
}
break;
}
};
/**
* mui gesture tap
*/
$.addGesture({
name: name,
index: 30,
handle: handle,
options: {
fingers: 1,
tapMaxInterval: 300,
tapMaxDistance: 5,
tapMaxTime: 250
}
});
})(mui, 'tap');
/**
* mui gesture longtap
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var timer;
var handle = function(event, touch) {
var session = $.gestures.session;
var options = this.options;
switch (event.type) {
case $.EVENT_START:
clearTimeout(timer);
timer = setTimeout(function() {
$.trigger(session.target, name, touch);
}, options.holdTimeout);
break;
case $.EVENT_MOVE:
if (touch.distance > options.holdThreshold) {
clearTimeout(timer);
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
clearTimeout(timer);
break;
}
};
/**
* mui gesture longtap
*/
$.addGesture({
name: name,
index: 10,
handle: handle,
options: {
fingers: 1,
holdTimeout: 500,
holdThreshold: 2
}
});
})(mui, 'longtap');
/**
* mui gesture hold
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var timer;
var handle = function(event, touch) {
var session = $.gestures.session;
var options = this.options;
switch (event.type) {
case $.EVENT_START:
if ($.options.gestureConfig.hold) {
timer && clearTimeout(timer);
timer = setTimeout(function() {
touch.hold = true;
$.trigger(session.target, name, touch);
}, options.holdTimeout);
}
break;
case $.EVENT_MOVE:
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if (timer) {
clearTimeout(timer) && (timer = null);
$.trigger(session.target, 'release', touch);
}
break;
}
};
/**
* mui gesture hold
*/
$.addGesture({
name: name,
index: 10,
handle: handle,
options: {
fingers: 1,
holdTimeout: 0
}
});
})(mui, 'hold');
/**
* mui gesture pinch
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var handle = function(event, touch) {
var options = this.options;
var session = $.gestures.session;
switch (event.type) {
case $.EVENT_START:
break;
case $.EVENT_MOVE:
if ($.options.gestureConfig.pinch) {
if (touch.touches.length < 2) {
return;
}
if (!session.pinch) { //start
session.pinch = true;
$.trigger(session.target, name + 'start', touch);
}
$.trigger(session.target, name, touch);
var scale = touch.scale;
var rotation = touch.rotation;
var lastScale = typeof touch.lastScale === 'undefined' ? 1 : touch.lastScale;
var scaleDiff = 0.000000000001; //防止scale与lastScale相等，不触发事件的情况。
if (scale > lastScale) { //out
lastScale = scale - scaleDiff;
$.trigger(session.target, name + 'out', touch);
} //in
else if (scale < lastScale) {
lastScale = scale + scaleDiff;
$.trigger(session.target, name + 'in', touch);
}
if (Math.abs(rotation) > options.minRotationAngle) {
$.trigger(session.target, 'rotate', touch);
}
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
session.pinch = false;
$.trigger(session.target, name + 'end', touch);
}
break;
}
};
/**
* mui gesture pinch
*/
$.addGesture({
name: name,
index: 10,
handle: handle,
options: {
minRotationAngle: 0
}
});
})(mui, 'pinch');
/**
* mui.init
* @param {type} $
* @returns {undefined}
*/
(function($) {
$.global = $.options = {
gestureConfig: {
tap: true,
doubletap: false,
longtap: false,
hold: false,
flick: true,
swipe: true,
drag: true,
pinch: false
}
};
/**
*
* @param {type} options
* @returns {undefined}
*/
$.initGlobal = function(options) {
$.options = $.extend(true, $.global, options);
return this;
};
var inits = {};
/**
* 单页配置 初始化
* @param {object} options
*/
$.init = function(options) {
$.options = $.extend(true, $.global, options || {});
$.ready(function() {
$.doAction('inits', function(index, init) {
var isInit = !!(!inits[init.name] || init.repeat);
if (isInit) {
init.handle.call($);
inits[init.name] = true;
}
});
});
return this;
};
/**
* 增加初始化执行流程
* @param {function} init
*/
$.addInit = function(init) {
return $.addAction('inits', init);
};
/**
* 处理html5版本subpages
*/
$.addInit({
name: 'iframe',
index: 100,
handle: function() {
var options = $.options;
var subpages = options.subpages || [];
if (!$.os.plus && subpages.length) {
//暂时只处理单个subpage。后续可以考虑支持多个subpage
createIframe(subpages[0]);
}
}
});
var createIframe = function(options) {
var wrapper = document.createElement('div');
wrapper.className = 'mui-iframe-wrapper';
var styles = options.styles || {};
if (typeof styles.top !== 'string') {
styles.top = '0px';
}
if (typeof styles.bottom !== 'string') {
styles.bottom = '0px';
}
wrapper.style.top = styles.top;
wrapper.style.bottom = styles.bottom;
var iframe = document.createElement('iframe');
iframe.src = options.url;
iframe.id = options.id || options.url;
iframe.name = iframe.id;
wrapper.appendChild(iframe);
document.body.appendChild(wrapper);
//目前仅处理微信
$.os.wechat && handleScroll(wrapper, iframe);
};
function handleScroll(wrapper, iframe) {
var key = 'MUI_SCROLL_POSITION_' + document.location.href + '_' + iframe.src;
var scrollTop = (parseFloat(localStorage.getItem(key)) || 0);
if (scrollTop) {
(function(y) {
iframe.onload = function() {
window.scrollTo(0, y);
};
})(scrollTop);
}
setInterval(function() {
var _scrollTop = window.scrollY;
if (scrollTop !== _scrollTop) {
localStorage.setItem(key, _scrollTop + '');
scrollTop = _scrollTop;
}
}, 100);
};
$(function() {
var classList = document.body.classList;
var os = [];
if ($.os.ios) {
os.push({
os: 'ios',
version: $.os.version
});
classList.add('mui-ios');
} else if ($.os.android) {
os.push({
os: 'android',
version: $.os.version
});
classList.add('mui-android');
}
if ($.os.wechat) {
os.push({
os: 'wechat',
version: $.os.wechat.version
});
classList.add('mui-wechat');
}
if (os.length) {
$.each(os, function(index, osObj) {
var version = '';
var classArray = [];
if (osObj.version) {
$.each(osObj.version.split('.'), function(i, v) {
version = version + (version ? '-' : '') + v;
classList.add($.className(osObj.os + '-' + version));
});
}
});
}
});
})(mui);
/**
* mui.init 5+
* @param {type} $
* @returns {undefined}
*/
(function($) {
var defaultOptions = {
swipeBack: false,
preloadPages: [], //5+ lazyLoad webview
preloadLimit: 10, //预加载窗口的数量限制(一旦超出，先进先出)
keyEventBind: {
backbutton: true,
menubutton: true
},
titleConfig: {
height: "44px",
backgroundColor: "#f7f7f7", //导航栏背景色
bottomBorderColor: "#cccccc", //底部边线颜色
title: { //标题配置
text: "", //标题文字
position: {
top: 0,
left: 0,
width: "100%",
height: "100%"
},
styles: {
color: "#000000",
align: "center",
family: "'Helvetica Neue',Helvetica,sans-serif",
size: "17px",
style: "normal",
weight: "normal",
fontSrc: ""
}
},
back: {
image: {
base64Data: '',
imgSrc: '',
sprite: {
top: '0px',
left: '0px',
width: '100%',
height: '100%'
},
position: {
top: "10px",
left: "10px",
width: "24px",
height: "24px"
}
}
}
}
};
//默认页面动画
var defaultShow = {
event:"titleUpdate",
autoShow: true,
duration: 300,
aniShow: 'slide-in-right',
extras:{}
};
//若执行了显示动画初始化操作，则要覆盖默认配置
if($.options.show) {
defaultShow = $.extend(true, defaultShow, $.options.show);
}
$.currentWebview = null;
$.extend(true, $.global, defaultOptions);
$.extend(true, $.options, defaultOptions);
/**
* 等待动画配置
* @param {type} options
* @returns {Object}
*/
$.waitingOptions = function(options) {
return $.extend(true, {}, {
autoShow: true,
title: '',
modal: false
}, options);
};
/**
* 窗口显示配置
* @param {type} options
* @returns {Object}
*/
$.showOptions = function(options) {
return $.extend(true, {}, defaultShow, options);
};
/**
* 窗口默认配置
* @param {type} options
* @returns {Object}
*/
$.windowOptions = function(options) {
return $.extend({
scalable: false,
bounce: "" //vertical
}, options);
};
/**
* plusReady
* @param {type} callback
* @returns {_L6.$}
*/
$.plusReady = function(callback) {
if(window.plus) {
setTimeout(function() { //解决callback与plusready事件的执行时机问题(典型案例:showWaiting,closeWaiting)
callback();
}, 0);
} else {
document.addEventListener("plusready", function() {
callback();
}, false);
}
return this;
};
/**
* 5+ event(5+没提供之前我自己实现)
* @param {type} webview
* @param {type} eventType
* @param {type} data
* @returns {undefined}
*/
$.fire = function(webview, eventType, data) {
if(webview) {
if(typeof data === 'undefined') {
data = '';
} else if(typeof data === 'boolean' || typeof data === 'number') {
webview.evalJS("typeof mui!=='undefined'&&mui.receive('" + eventType + "'," + data + ")");
return;
} else if($.isPlainObject(data) || $.isArray(data)) {
data = JSON.stringify(data || {}).replace(/\'/g, "\\u0027").replace(/\\/g, "\\u005c");
}
webview.evalJS("typeof mui!=='undefined'&&mui.receive('" + eventType + "','" + data + "')");
}
};
/**
* 5+ event(5+没提供之前我自己实现)
* @param {type} eventType
* @param {type} data
* @returns {undefined}
*/
$.receive = function(eventType, data) {
if(eventType) {
try {
if(data && typeof data === 'string') {
data = JSON.parse(data);
}
} catch(e) {}
$.trigger(document, eventType, data);
}
};
var triggerPreload = function(webview) {
if(!webview.preloaded) { //保证仅触发一次
$.fire(webview, 'preload');
var list = webview.children();
for(var i = 0; i < list.length; i++) {
$.fire(list[i], 'preload');
}
webview.preloaded = true;
}
};
var trigger = function(webview, eventType, timeChecked) {
if(timeChecked) {
if(!webview[eventType + 'ed']) {
$.fire(webview, eventType);
var list = webview.children();
for(var i = 0; i < list.length; i++) {
$.fire(list[i], eventType);
}
webview[eventType + 'ed'] = true;
}
} else {
$.fire(webview, eventType);
var list = webview.children();
for(var i = 0; i < list.length; i++) {
$.fire(list[i], eventType);
}
}
};
/**
* 打开新窗口
* @param {string} url 要打开的页面地址
* @param {string} id 指定页面ID
* @param {object} options 可选:参数,等待,窗口,显示配置{params:{},waiting:{},styles:{},show:{}}
*/
$.openWindow = function(url, id, options) {
if(typeof url === 'object') {
options = url;
url = options.url;
id = options.id || url;
} else {
if(typeof id === 'object') {
options = id;
id = options.id || url;
} else {
id = id || url;
}
}
if(!$.os.plus) {
//TODO 先临时这么处理：手机上顶层跳，PC上parent跳
if($.os.ios || $.os.android) {
window.top.location.href = url;
} else {
window.parent.location.href = url;
}
return;
}
if(!window.plus) {
return;
}
options = options || {};
var params = options.params || {};
var webview = null,
webviewCache = null,
nShow, nWaiting;
if($.webviews[id]) {
webviewCache = $.webviews[id];
//webview真实存在，才能获取
if(plus.webview.getWebviewById(id)) {
webview = webviewCache.webview;
}
} else if(options.createNew !== true) {
webview = plus.webview.getWebviewById(id);
}
if(webview) { //已缓存
//每次show都需要传递动画参数；
//预加载的动画参数优先级：openWindow配置>preloadPages配置>mui默认配置；
nShow = webviewCache ? webviewCache.show : defaultShow;
nShow = options.show ? $.extend(nShow, options.show) : nShow;
nShow.autoShow && webview.show(nShow.aniShow, nShow.duration, function() {
triggerPreload(webview);
trigger(webview, 'pagebeforeshow', false);
});
if(webviewCache) {
webviewCache.afterShowMethodName && webview.evalJS(webviewCache.afterShowMethodName + '(\'' + JSON.stringify(params) + '\')');
}
return webview;
} else { //新窗口
if(!url) {
throw new Error('webview[' + id + '] does not exist');
}
//显示waiting
var waitingConfig = $.waitingOptions(options.waiting);
if(waitingConfig.autoShow) {
nWaiting = plus.nativeUI.showWaiting(waitingConfig.title, waitingConfig.options);
}
//创建页面
options = $.extend(options, {
id: id,
url: url
});
webview = $.createWindow(options);
//显示
nShow = $.showOptions(options.show);
if(nShow.autoShow) {
var showWebview = function() {
//关闭等待框
if(nWaiting) {
nWaiting.close();
}
//显示页面
webview.show(nShow.aniShow, nShow.duration, function() {},nShow.extras);
options.afterShowMethodName && webview.evalJS(options.afterShowMethodName + '(\'' + JSON.stringify(params) + '\')');
};
//titleUpdate触发时机早于loaded，更换为titleUpdate后，可以更早的显示webview
webview.addEventListener(nShow.event, showWebview, false);
//loaded事件发生后，触发预加载和pagebeforeshow事件
webview.addEventListener("loaded", function() {
triggerPreload(webview);
trigger(webview, 'pagebeforeshow', false);
}, false);
}
}
return webview;
};
$.openWindowWithTitle = function(options, titleConfig) {
options = options || {};
var url = options.url;
var id = options.id || url;
if(!$.os.plus) {
//TODO 先临时这么处理：手机上顶层跳，PC上parent跳
if($.os.ios || $.os.android) {
window.top.location.href = url;
} else {
window.parent.location.href = url;
}
return;
}
if(!window.plus) {
return;
}
var params = options.params || {};
var webview = null,
webviewCache = null,
nShow, nWaiting;
if($.webviews[id]) {
webviewCache = $.webviews[id];
//webview真实存在，才能获取
if(plus.webview.getWebviewById(id)) {
webview = webviewCache.webview;
}
} else if(options.createNew !== true) {
webview = plus.webview.getWebviewById(id);
}
if(webview) { //已缓存
//每次show都需要传递动画参数；
//预加载的动画参数优先级：openWindow配置>preloadPages配置>mui默认配置；
nShow = webviewCache ? webviewCache.show : defaultShow;
nShow = options.show ? $.extend(nShow, options.show) : nShow;
nShow.autoShow && webview.show(nShow.aniShow, nShow.duration, function() {
triggerPreload(webview);
trigger(webview, 'pagebeforeshow', false);
});
if(webviewCache) {
webviewCache.afterShowMethodName && webview.evalJS(webviewCache.afterShowMethodName + '(\'' + JSON.stringify(params) + '\')');
}
return webview;
} else { //新窗口
if(!url) {
throw new Error('webview[' + id + '] does not exist');
}
//显示waiting
var waitingConfig = $.waitingOptions(options.waiting);
if(waitingConfig.autoShow) {
nWaiting = plus.nativeUI.showWaiting(waitingConfig.title, waitingConfig.options);
}
//创建页面
options = $.extend(options, {
id: id,
url: url
});
webview = $.createWindow(options);
if(titleConfig) { //处理原生头
$.extend(true, $.options.titleConfig, titleConfig);
var tid = $.options.titleConfig.id ? $.options.titleConfig.id : id + "_title";
var view = new plus.nativeObj.View(tid, {
top: 0,
height: $.options.titleConfig.height,
width: "100%",
dock: "top",
position: "dock"
});
view.drawRect($.options.titleConfig.backgroundColor); //绘制背景色
var _b = parseInt($.options.titleConfig.height) - 1;
view.drawRect($.options.titleConfig.bottomBorderColor, {
top: _b + "px",
left: "0px"
}); //绘制底部边线
//绘制文字
if($.options.titleConfig.title.text){
var _title = $.options.titleConfig.title;
view.drawText(_title.text,_title.position , _title.styles);
}
//返回图标绘制
var _back = $.options.titleConfig.back;
var backClick = null;
//优先字体
//其次是图片
var _backImage = _back.image;
if(_backImage.base64Data || _backImage.imgSrc) {
//TODO 此处需要处理百分比的情况
backClick = {
left:parseInt(_backImage.position.left),
right:parseInt(_backImage.position.left) + parseInt(_backImage.position.width)
};
var bitmap = new plus.nativeObj.Bitmap(id + "_back");
if(_backImage.base64Data) { //优先base64编码字符串
bitmap.loadBase64Data(_backImage.base64Data);
} else { //其次加载图片文件
bitmap.load(_backImage.imgSrc);
}
view.drawBitmap(bitmap,_backImage.sprite , _backImage.position);
}
//处理点击事件
view.setTouchEventRect({
top: "0px",
left: "0px",
width: "100%",
height: "100%"
});
view.interceptTouchEvent(true);
view.addEventListener("click", function(e) {
var x = e.clientX;
//返回按钮点击
if(backClick&& x > backClick.left && x < backClick.right){
if( _back.click && $.isFunction(_back.click)){
_back.click();
}else{
webview.evalJS("window.mui&&mui.back();");
}
}
}, false);
webview.append(view);
}
//显示
nShow = $.showOptions(options.show);
if(nShow.autoShow) {
//titleUpdate触发时机早于loaded，更换为titleUpdate后，可以更早的显示webview
webview.addEventListener(nShow.event, function () {
//关闭等待框
if(nWaiting) {
nWaiting.close();
}
//显示页面
webview.show(nShow.aniShow, nShow.duration, function() {},nShow.extras);
}, false);
}
}
return webview;
};
/**
* 根据配置信息创建一个webview
* @param {type} options
* @param {type} isCreate
* @returns {webview}
*/
$.createWindow = function(options, isCreate) {
if(!window.plus) {
return;
}
var id = options.id || options.url;
var webview;
if(options.preload) {
if($.webviews[id] && $.webviews[id].webview.getURL()) { //已经cache
webview = $.webviews[id].webview;
} else { //新增预加载窗口
//判断是否携带createNew参数，默认为false
if(options.createNew !== true) {
webview = plus.webview.getWebviewById(id);
}
//之前没有，那就新创建
if(!webview) {
webview = plus.webview.create(options.url, id, $.windowOptions(options.styles), $.extend({
preload: true
}, options.extras));
if(options.subpages) {
$.each(options.subpages, function(index, subpage) {
var subpageId = subpage.id || subpage.url;
if(subpageId) { //过滤空对象
var subWebview = plus.webview.getWebviewById(subpageId);
if(!subWebview) { //如果该webview不存在，则创建
subWebview = plus.webview.create(subpage.url, subpageId, $.windowOptions(subpage.styles), $.extend({
preload: true
}, subpage.extras));
}
webview.append(subWebview);
}
});
}
}
}
//TODO 理论上，子webview也应该计算到预加载队列中，但这样就麻烦了，要退必须退整体，否则可能出现问题；
$.webviews[id] = {
webview: webview, //目前仅preload的缓存webview
preload: true,
show: $.showOptions(options.show),
afterShowMethodName: options.afterShowMethodName //就不应该用evalJS。应该是通过事件消息通讯
};
//索引该预加载窗口
var preloads = $.data.preloads;
var index = preloads.indexOf(id);
if(~index) { //删除已存在的(变相调整插入位置)
preloads.splice(index, 1);
}
preloads.push(id);
if(preloads.length > $.options.preloadLimit) {
//先进先出
var first = $.data.preloads.shift();
var webviewCache = $.webviews[first];
if(webviewCache && webviewCache.webview) {
//需要将自己打开的所有页面，全部close；
//关闭该预加载webview
$.closeAll(webviewCache.webview);
}
//删除缓存
delete $.webviews[first];
}
} else {
if(isCreate !== false) { //直接创建非预加载窗口
webview = plus.webview.create(options.url, id, $.windowOptions(options.styles), options.extras);
if(options.subpages) {
$.each(options.subpages, function(index, subpage) {
var subpageId = subpage.id || subpage.url;
var subWebview = plus.webview.getWebviewById(subpageId);
if(!subWebview) {
subWebview = plus.webview.create(subpage.url, subpageId, $.windowOptions(subpage.styles), subpage.extras);
}
webview.append(subWebview);
});
}
}
}
return webview;
};
/**
* 预加载
*/
$.preload = function(options) {
//调用预加载函数，不管是否传递preload参数，强制变为true
if(!options.preload) {
options.preload = true;
}
return $.createWindow(options);
};
/**
*关闭当前webview打开的所有webview；
*/
$.closeOpened = function(webview) {
var opened = webview.opened();
if(opened) {
for(var i = 0, len = opened.length; i < len; i++) {
var openedWebview = opened[i];
var open_open = openedWebview.opened();
if(open_open && open_open.length > 0) {
//关闭打开的webview
$.closeOpened(openedWebview);
//关闭自己
openedWebview.close("none");
} else {
//如果直接孩子节点，就不用关闭了，因为父关闭的时候，会自动关闭子；
if(openedWebview.parent() !== webview) {
openedWebview.close('none');
}
}
}
}
};
$.closeAll = function(webview, aniShow) {
$.closeOpened(webview);
if(aniShow) {
webview.close(aniShow);
} else {
webview.close();
}
};
/**
* 批量创建webview
* @param {type} options
* @returns {undefined}
*/
$.createWindows = function(options) {
$.each(options, function(index, option) {
//初始化预加载窗口(创建)和非预加载窗口(仅配置，不创建)
$.createWindow(option, false);
});
};
/**
* 创建当前页面的子webview
* @param {type} options
* @returns {webview}
*/
$.appendWebview = function(options) {
if(!window.plus) {
return;
}
var id = options.id || options.url;
var webview;
if(!$.webviews[id]) { //保证执行一遍
//TODO 这里也有隐患，比如某个webview不是作为subpage创建的，而是作为target webview的话；
if(!plus.webview.getWebviewById(id)) {
webview = plus.webview.create(options.url, id, options.styles, options.extras);
}
//之前的实现方案：子窗口loaded之后再append到父窗口中；
//问题：部分子窗口loaded事件发生较晚，此时执行父窗口的children方法会返回空，导致父子通讯失败；
// 比如父页面执行完preload事件后，需触发子页面的preload事件，此时未append的话，就无法触发；
//修改方式：不再监控loaded事件，直接append
//by chb@20150521
// webview.addEventListener('loaded', function() {
plus.webview.currentWebview().append(webview);
// });
$.webviews[id] = options;
}
return webview;
};
//全局webviews
$.webviews = {};
//预加载窗口索引
$.data.preloads = [];
//$.currentWebview
$.plusReady(function() {
$.currentWebview = plus.webview.currentWebview();
});
$.addInit({
name: '5+',
index: 100,
handle: function() {
var options = $.options;
var subpages = options.subpages || [];
if($.os.plus) {
$.plusReady(function() {
//TODO 这里需要判断一下，最好等子窗口加载完毕后，再调用主窗口的show方法；
//或者：在openwindow方法中，监听实现；
$.each(subpages, function(index, subpage) {
$.appendWebview(subpage);
});
//判断是否首页
if(plus.webview.currentWebview() === plus.webview.getWebviewById(plus.runtime.appid)) {
//首页需要自己激活预加载；
//timeout因为子页面loaded之后才append的，防止子页面尚未append、从而导致其preload未触发的问题；
setTimeout(function() {
triggerPreload(plus.webview.currentWebview());
}, 300);
}
//设置ios顶部状态栏颜色；
if($.os.ios && $.options.statusBarBackground) {
plus.navigator.setStatusBarBackground($.options.statusBarBackground);
}
if($.os.android && parseFloat($.os.version) < 4.4) {
//解决Android平台4.4版本以下，resume后，父窗体标题延迟渲染的问题；
if(plus.webview.currentWebview().parent() == null) {
document.addEventListener("resume", function() {
var body = document.body;
body.style.display = 'none';
setTimeout(function() {
body.style.display = '';
}, 10);
});
}
}
});
} else {
//已支持iframe嵌入
// if (subpages.length > 0) {
// var err = document.createElement('div');
// err.className = 'mui-error';
// //文字描述
// var span = document.createElement('span');
// span.innerHTML = '在该浏览器下，不支持创建子页面，具体参考';
// err.appendChild(span);
// var a = document.createElement('a');
// a.innerHTML = '"mui框架适用场景"';
// a.href = 'http://ask.dcloud.net.cn/article/113';
// err.appendChild(a);
// document.body.appendChild(err);
// console.log('在该浏览器下，不支持创建子页面');
// }
}
}
});
window.addEventListener('preload', function() {
//处理预加载部分
var webviews = $.options.preloadPages || [];
$.plusReady(function() {
$.each(webviews, function(index, webview) {
$.createWindow($.extend(webview, {
preload: true
}));
});
});
});
$.supportStatusbarOffset = function() {
return $.os.plus && $.os.ios && parseFloat($.os.version) >= 7;
};
$.ready(function() {
//标识当前环境支持statusbar
if($.supportStatusbarOffset()) {
document.body.classList.add('mui-statusbar');
}
});
})(mui);
/**
* mui back
* @param {type} $
* @param {type} window
* @returns {undefined}
*/
(function($, window) {
/**
* register back
* @param {type} back
* @returns {$.gestures}
*/
$.addBack = function(back) {
return $.addAction('backs', back);
};
/**
* default
*/
$.addBack({
name: 'browser',
index: 100,
handle: function() {
if (window.history.length > 1) {
window.history.back();
return true;
}
return false;
}
});
/**
* 后退
*/
$.back = function() {
if (typeof $.options.beforeback === 'function') {
if ($.options.beforeback() === false) {
return;
}
}
$.doAction('backs');
};
window.addEventListener('tap', function(e) {
var action = $.targets.action;
if (action && action.classList.contains('mui-action-back')) {
$.back();
$.targets.action = false;
}
});
window.addEventListener('swiperight', function(e) {
var detail = e.detail;
if ($.options.swipeBack === true && Math.abs(detail.angle) < 3) {
$.back();
}
});
})(mui, window);
/**
* mui back 5+
* @param {type} $
* @param {type} window
* @returns {undefined}
*/
(function($, window) {
if ($.os.plus && $.os.android) {
$.addBack({
name: 'mui',
index: 5,
handle: function() {
//后续重新设计此处，将back放到各个空间内部实现
//popover
if ($.targets._popover && $.targets._popover.classList.contains('mui-active')) {
$($.targets._popover).popover('hide');
return true;
}
//offcanvas
var offCanvas = document.querySelector('.mui-off-canvas-wrap.mui-active');
if (offCanvas) {
$(offCanvas).offCanvas('close');
return true;
}
var previewImage = $.isFunction($.getPreviewImage) && $.getPreviewImage();
if (previewImage && previewImage.isShown()) {
previewImage.close();
return true;
}
//popup
return $.closePopup();
}
});
}
//首次按下back按键的时间
$.__back__first = null;
/**
* 5+ back
*/
$.addBack({
name: '5+',
index: 10,
handle: function() {
if (!window.plus) {
return false;
}
var wobj = plus.webview.currentWebview();
var parent = wobj.parent();
if (parent) {
parent.evalJS('mui&&mui.back();');
} else {
wobj.canBack(function(e) {
//by chb 暂时注释，在碰到类似popover之类的锚点的时候，需多次点击才能返回；
if (e.canBack) { //webview history back
window.history.back();
} else { //webview close or hide
//fixed by fxy 此处不应该用opener判断，因为用户有可能自己close掉当前窗口的opener。这样的话。opener就为空了，导致不能执行close
if (wobj.id === plus.runtime.appid) { //首页
//首页不存在opener的情况下，后退实际上应该是退出应用；
//首次按键，提示‘再按一次退出应用’
if (!$.__back__first) {
$.__back__first = new Date().getTime();
mui.toast('再按一次退出应用');
setTimeout(function() {
$.__back__first = null;
}, 2000);
} else {
if (new Date().getTime() - $.__back__first < 2000) {
plus.runtime.quit();
}
}
} else { //其他页面，
if (wobj.preload) {
wobj.hide("auto");
} else {
//关闭页面时，需要将其打开的所有子页面全部关闭；
$.closeAll(wobj);
}
}
}
});
}
return true;
}
});
$.menu = function() {
var menu = document.querySelector('.mui-action-menu');
if (menu) {
$.trigger(menu, $.EVENT_START); //临时处理menu无touchstart的话，找不到当前targets的问题
$.trigger(menu, 'tap');
} else { //执行父窗口的menu
if (window.plus) {
var wobj = $.currentWebview;
var parent = wobj.parent();
if (parent) { //又得evalJS
parent.evalJS('mui&&mui.menu();');
}
}
}
};
var __back = function() {
$.back();
};
var __menu = function() {
$.menu();
};
//默认监听
$.plusReady(function() {
if ($.options.keyEventBind.backbutton) {
plus.key.addEventListener('backbutton', __back, false);
}
if ($.options.keyEventBind.menubutton) {
plus.key.addEventListener('menubutton', __menu, false);
}
});
//处理按键监听事件
$.addInit({
name: 'keyEventBind',
index: 1000,
handle: function() {
$.plusReady(function() {
//如果不为true，则移除默认监听
if (!$.options.keyEventBind.backbutton) {
plus.key.removeEventListener('backbutton', __back);
}
if (!$.options.keyEventBind.menubutton) {
plus.key.removeEventListener('menubutton', __menu);
}
});
}
});
})(mui, window);
/**
* mui.init pulldownRefresh
* @param {type} $
* @returns {undefined}
*/
(function($) {
$.addInit({
name: 'pullrefresh',
index: 1000,
handle: function() {
var options = $.options;
var pullRefreshOptions = options.pullRefresh || {};
var hasPulldown = pullRefreshOptions.down && pullRefreshOptions.down.hasOwnProperty('callback');
var hasPullup = pullRefreshOptions.up && pullRefreshOptions.up.hasOwnProperty('callback');
if(hasPulldown || hasPullup) {
var container = pullRefreshOptions.container;
if(container) {
var $container = $(container);
if($container.length === 1) {
if($.os.plus) { //5+环境
if(hasPulldown && pullRefreshOptions.down.style == "circle") { //原生转圈
$.plusReady(function() {
//这里改写$.fn.pullRefresh
$.fn.pullRefresh = $.fn.pullRefresh_native;
$container.pullRefresh(pullRefreshOptions);
});
} else if($.os.android) { //非原生转圈，但是Android环境
$.plusReady(function() {
//这里改写$.fn.pullRefresh
$.fn.pullRefresh = $.fn.pullRefresh_native
var webview = plus.webview.currentWebview();
if(window.__NWin_Enable__ === false) { //不支持多webview
$container.pullRefresh(pullRefreshOptions);
} else {
if(hasPullup) {
//当前页面初始化pullup
var upOptions = {};
upOptions.up = pullRefreshOptions.up;
upOptions.webviewId = webview.id || webview.getURL();
$container.pullRefresh(upOptions);
}
if(hasPulldown) {
var parent = webview.parent();
var id = webview.id || webview.getURL();
if(parent) {
if(!hasPullup) { //如果没有上拉加载，需要手动初始化一个默认的pullRefresh，以便当前页面容器可以调用endPulldownToRefresh等方法
$container.pullRefresh({
webviewId: id
});
}
var downOptions = {
webviewId: id//子页面id
};
downOptions.down = $.extend({}, pullRefreshOptions.down);
downOptions.down.callback = '_CALLBACK';
//改写父页面的$.fn.pullRefresh
parent.evalJS("mui.fn.pullRefresh=mui.fn.pullRefresh_native");
//父页面初始化pulldown
parent.evalJS("mui&&mui(document.querySelector('.mui-content')).pullRefresh('" + JSON.stringify(downOptions) + "')");
}
}
}
});
} else { //非原生转圈，iOS环境
$container.pullRefresh(pullRefreshOptions);
}
} else {
$container.pullRefresh(pullRefreshOptions);
}
}
}
}
}
});
})(mui);
/**
* mui ajax
* @param {type} $
* @returns {undefined}
*/
(function($, window, undefined) {
var jsonType = 'application/json';
var htmlType = 'text/html';
var rscript = /)<[^<]*)*<\/script>/gi;
var scriptTypeRE = /^(?:text|application)\/javascript/i;
var xmlTypeRE = /^(?:text|application)\/xml/i;
var blankRE = /^\s*$/;
$.ajaxSettings = {
type: 'GET',
beforeSend: $.noop,
success: $.noop,
error: $.noop,
complete: $.noop,
context: null,
xhr: function(protocol) {
return new window.XMLHttpRequest();
},
accepts: {
script: 'text/javascript, application/javascript, application/x-javascript',
json: jsonType,
xml: 'application/xml, text/xml',
html: htmlType,
text: 'text/plain'
},
timeout: 0,
processData: true,
cache: true
};
var ajaxBeforeSend = function(xhr, settings) {
var context = settings.context
if(settings.beforeSend.call(context, xhr, settings) === false) {
return false;
}
};
var ajaxSuccess = function(data, xhr, settings) {
settings.success.call(settings.context, data, 'success', xhr);
ajaxComplete('success', xhr, settings);
};
// type: "timeout", "error", "abort", "parsererror"
var ajaxError = function(error, type, xhr, settings) {
settings.error.call(settings.context, xhr, type, error);
ajaxComplete(type, xhr, settings);
};
// status: "success", "notmodified", "error", "timeout", "abort", "parsererror"
var ajaxComplete = function(status, xhr, settings) {
settings.complete.call(settings.context, xhr, status);
};
var serialize = function(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);
}
});
};
var serializeData = function(options) {
if(options.processData && options.data && typeof options.data !== "string") {
var contentType = options.contentType;
if(!contentType && options.headers) {
contentType = options.headers['Content-Type'];
}
if(contentType && ~contentType.indexOf(jsonType)) { //application/json
options.data = JSON.stringify(options.data);
} else {
options.data = $.param(options.data, options.traditional);
}
}
if(options.data && (!options.type || options.type.toUpperCase() === 'GET')) {
options.url = appendQuery(options.url, options.data);
options.data = undefined;
}
};
var appendQuery = function(url, query) {
if(query === '') {
return url;
}
return(url + '&' + query).replace(/[&?]{1,2}/, '?');
};
var mimeToDataType = function(mime) {
if(mime) {
mime = mime.split(';', 2)[0];
}
return mime && (mime === htmlType ? 'html' :
mime === jsonType ? 'json' :
scriptTypeRE.test(mime) ? 'script' :
xmlTypeRE.test(mime) && 'xml') || 'text';
};
var parseArguments = function(url, data, success, dataType) {
if($.isFunction(data)) {
dataType = success, success = data, data = undefined;
}
if(!$.isFunction(success)) {
dataType = success, success = undefined;
}
return {
url: url,
data: data,
success: success,
dataType: dataType
};
};
$.ajax = function(url, options) {
if(typeof url === "object") {
options = url;
url = undefined;
}
var settings = options || {};
settings.url = url || settings.url;
for(var key in $.ajaxSettings) {
if(settings[key] === undefined) {
settings[key] = $.ajaxSettings[key];
}
}
serializeData(settings);
var dataType = settings.dataType;
if(settings.cache === false || ((!options || options.cache !== true) && ('script' === dataType))) {
settings.url = appendQuery(settings.url, '_=' + $.now());
}
var mime = settings.accepts[dataType && dataType.toLowerCase()];
var headers = {};
var setHeader = function(name, value) {
headers[name.toLowerCase()] = [name, value];
};
var protocol = /^([\w-]+:)\/\//.test(settings.url) ? RegExp.$1 : window.location.protocol;
var xhr = settings.xhr(settings);
var nativeSetHeader = xhr.setRequestHeader;
var abortTimeout;
setHeader('X-Requested-With', 'XMLHttpRequest');
setHeader('Accept', mime || '*/*');
if(!!(mime = settings.mimeType || mime)) {
if(mime.indexOf(',') > -1) {
mime = mime.split(',', 2)[0];
}
xhr.overrideMimeType && xhr.overrideMimeType(mime);
}
if(settings.contentType || (settings.contentType !== false && settings.data && settings.type.toUpperCase() !== 'GET')) {
setHeader('Content-Type', settings.contentType || 'application/x-www-form-urlencoded');
}
if(settings.headers) {
for(var name in settings.headers)
setHeader(name, settings.headers[name]);
}
xhr.setRequestHeader = setHeader;
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
xhr.onreadystatechange = $.noop;
clearTimeout(abortTimeout);
var result, error = false;
var isLocal = protocol === 'file:';
if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304 || (xhr.status === 0 && isLocal && xhr.responseText)) {
dataType = dataType || mimeToDataType(settings.mimeType || xhr.getResponseHeader('content-type'));
result = xhr.responseText;
try {
// http://perfectionkills.com/global-eval-what-are-the-options/
if(dataType === 'script') {
(1, eval)(result);
} else if(dataType === 'xml') {
result = xhr.responseXML;
} else if(dataType === 'json') {
result = blankRE.test(result) ? null : $.parseJSON(result);
}
} catch(e) {
error = e;
}
if(error) {
ajaxError(error, 'parsererror', xhr, settings);
} else {
ajaxSuccess(result, xhr, settings);
}
} else {
var status = xhr.status ? 'error' : 'abort';
var statusText = xhr.statusText || null;
if(isLocal) {
status = 'error';
statusText = '404';
}
ajaxError(statusText, status, xhr, settings);
}
}
};
if(ajaxBeforeSend(xhr, settings) === false) {
xhr.abort();
ajaxError(null, 'abort', xhr, settings);
return xhr;
}
if(settings.xhrFields) {
for(var name in settings.xhrFields) {
xhr[name] = settings.xhrFields[name];
}
}
var async = 'async' in settings ? settings.async : true;
xhr.open(settings.type.toUpperCase(), settings.url, async, settings.username, settings.password);
for(var name in headers) {
if(headers.hasOwnProperty(name)) {
nativeSetHeader.apply(xhr, headers[name]);
}
}
if(settings.timeout > 0) {
abortTimeout = setTimeout(function() {
xhr.onreadystatechange = $.noop;
xhr.abort();
ajaxError(null, 'timeout', xhr, settings);
}, settings.timeout);
}
xhr.send(settings.data ? settings.data : null);
return xhr;
};
$.param = function(obj, traditional) {
var params = [];
params.add = function(k, v) {
this.push(encodeURIComponent(k) + '=' + encodeURIComponent(v));
};
serialize(params, obj, traditional);
return params.join('&').replace(/%20/g, '+');
};
$.get = function( /* url, data, success, dataType */ ) {
return $.ajax(parseArguments.apply(null, arguments));
};
$.post = function( /* url, data, success, dataType */ ) {
var options = parseArguments.apply(null, arguments);
options.type = 'POST';
return $.ajax(options);
};
$.getJSON = function( /* url, data, success */ ) {
var options = parseArguments.apply(null, arguments);
options.dataType = 'json';
return $.ajax(options);
};
$.fn.load = function(url, data, success) {
if(!this.length)
return this;
var self = this,
parts = url.split(/\s/),
selector,
options = parseArguments(url, data, success),
callback = options.success;
if(parts.length > 1)
options.url = parts[0], selector = parts[1];
options.success = function(response) {
if(selector) {
var div = document.createElement('div');
div.innerHTML = response.replace(rscript, "");
var selectorDiv = document.createElement('div');
var childs = div.querySelectorAll(selector);
if(childs && childs.length > 0) {
for(var i = 0, len = childs.length; i < len; i++) {
selectorDiv.appendChild(childs[i]);
}
}
self[0].innerHTML = selectorDiv.innerHTML;
} else {
self[0].innerHTML = response;
}
callback && callback.apply(self, arguments);
};
$.ajax(options);
return this;
};
})(mui, window);
/**
* 5+ ajax
*/
(function($) {
var originAnchor = document.createElement('a');
originAnchor.href = window.location.href;
$.plusReady(function() {
$.ajaxSettings = $.extend($.ajaxSettings, {
xhr: function(settings) {
if (settings.crossDomain) { //强制使用plus跨域
return new plus.net.XMLHttpRequest();
}
//仅在webview的url为远程文件，且ajax请求的资源不同源下使用plus.net.XMLHttpRequest
if (originAnchor.protocol !== 'file:') {
var urlAnchor = document.createElement('a');
urlAnchor.href = settings.url;
urlAnchor.href = urlAnchor.href;
settings.crossDomain = (originAnchor.protocol + '//' + originAnchor.host) !== (urlAnchor.protocol + '//' + urlAnchor.host);
if (settings.crossDomain) {
return new plus.net.XMLHttpRequest();
}
}
if ($.os.ios && window.webkit && window.webkit.messageHandlers) { //wkwebview下同样使用5+ xhr
return new plus.net.XMLHttpRequest();
}
return new window.XMLHttpRequest();
}
});
});
})(mui);
/**
* mui layout(offset[,position,width,height...])
* @param {type} $
* @param {type} window
* @param {type} undefined
* @returns {undefined}
*/
(function($, window, undefined) {
$.offset = function(element) {
var box = {
top : 0,
left : 0
};
if ( typeof element.getBoundingClientRect !== undefined) {
box = element.getBoundingClientRect();
}
return {
top : box.top + window.pageYOffset - element.clientTop,
left : box.left + window.pageXOffset - element.clientLeft
};
};
})(mui, window);
/**
* mui animation
*/
(function($, window) {
/**
* scrollTo
*/
$.scrollTo = function(scrollTop, duration, callback) {
duration = duration || 1000;
var scroll = function(duration) {
if (duration <= 0) {
window.scrollTo(0, scrollTop);
callback && callback();
return;
}
var distaince = scrollTop - window.scrollY;
setTimeout(function() {
window.scrollTo(0, window.scrollY + distaince / duration * 10);
scroll(duration - 10);
}, 16.7);
};
scroll(duration);
};
$.animationFrame = function(cb) {
var args, isQueued, context;
return function() {
args = arguments;
context = this;
if (!isQueued) {
isQueued = true;
requestAnimationFrame(function() {
cb.apply(context, args);
isQueued = false;
});
}
};
};
})(mui, window);
(function($) {
var initializing = false,
fnTest = /xyz/.test(function() {
xyz;
}) ? /\b_super\b/ : /.*/;
var Class = function() {};
Class.extend = function(prop) {
var _super = this.prototype;
initializing = true;
var prototype = new this();
initializing = false;
for (var name in prop) {
prototype[name] = typeof prop[name] == "function" &&
typeof _super[name] == "function" && fnTest.test(prop[name]) ?
(function(name, fn) {
return function() {
var tmp = this._super;
this._super = _super[name];
var ret = fn.apply(this, arguments);
this._super = tmp;
return ret;
};
})(name, prop[name]) :
prop[name];
}
function Class() {
if (!initializing && this.init)
this.init.apply(this, arguments);
}
Class.prototype = prototype;
Class.prototype.constructor = Class;
Class.extend = arguments.callee;
return Class;
};
$.Class = Class;
})(mui);
(function($, document, undefined) {
var CLASS_PULL_TOP_POCKET = 'mui-pull-top-pocket';
var CLASS_PULL_BOTTOM_POCKET = 'mui-pull-bottom-pocket';
var CLASS_PULL = 'mui-pull';
var CLASS_PULL_LOADING = 'mui-pull-loading';
var CLASS_PULL_CAPTION = 'mui-pull-caption';
var CLASS_PULL_CAPTION_DOWN = 'mui-pull-caption-down';
var CLASS_PULL_CAPTION_REFRESH = 'mui-pull-caption-refresh';
var CLASS_PULL_CAPTION_NOMORE = 'mui-pull-caption-nomore';
var CLASS_ICON = 'mui-icon';
var CLASS_SPINNER = 'mui-spinner';
var CLASS_ICON_PULLDOWN = 'mui-icon-pulldown';
var CLASS_BLOCK = 'mui-block';
var CLASS_HIDDEN = 'mui-hidden';
var CLASS_VISIBILITY = 'mui-visibility';
var CLASS_LOADING_UP = CLASS_PULL_LOADING + ' ' + CLASS_ICON + ' ' + CLASS_ICON_PULLDOWN;
var CLASS_LOADING_DOWN = CLASS_PULL_LOADING + ' ' + CLASS_ICON + ' ' + CLASS_ICON_PULLDOWN;
var CLASS_LOADING = CLASS_PULL_LOADING + ' ' + CLASS_ICON + ' ' + CLASS_SPINNER;
var pocketHtml = ['', '
', '
{contentrefresh}
', '
' + message + '
';
toast.addEventListener('webkitTransitionEnd', function() {
if (!toast.classList.contains(CLASS_ACTIVE)) {
toast.parentNode.removeChild(toast);
toast = null;
}
});
//点击则自动消失
toast.addEventListener('click', function() {
toast.parentNode.removeChild(toast);
toast = null;
});
document.body.appendChild(toast);
toast.offsetHeight;
toast.classList.add(CLASS_ACTIVE);
setTimeout(function() {
toast && toast.classList.remove(CLASS_ACTIVE);
}, duration);
return {
isVisible: function() {return !!toast;}
}
}
};
})(mui, window);
/**
* Popup(alert,confirm,prompt)
* @param {Object} $
* @param {Object} window
* @param {Object} document
*/
(function($, window, document) {
var CLASS_POPUP = 'mui-popup';
var CLASS_POPUP_BACKDROP = 'mui-popup-backdrop';
var CLASS_POPUP_IN = 'mui-popup-in';
var CLASS_POPUP_OUT = 'mui-popup-out';
var CLASS_POPUP_INNER = 'mui-popup-inner';
var CLASS_POPUP_TITLE = 'mui-popup-title';
var CLASS_POPUP_TEXT = 'mui-popup-text';
var CLASS_POPUP_INPUT = 'mui-popup-input';
var CLASS_POPUP_BUTTONS = 'mui-popup-buttons';
var CLASS_POPUP_BUTTON = 'mui-popup-button';
var CLASS_POPUP_BUTTON_BOLD = 'mui-popup-button-bold';
var CLASS_POPUP_BACKDROP = 'mui-popup-backdrop';
var CLASS_ACTIVE = 'mui-active';
var popupStack = [];
var backdrop = (function() {
var element = document.createElement('div');
element.classList.add(CLASS_POPUP_BACKDROP);
element.addEventListener($.EVENT_MOVE, $.preventDefault);
element.addEventListener('webkitTransitionEnd', function() {
if (!this.classList.contains(CLASS_ACTIVE)) {
element.parentNode && element.parentNode.removeChild(element);
}
});
return element;
}());
var createInput = function(placeholder) {
return '';
};
var createInner = function(message, title, extra) {
return '';
};
var createButtons = function(btnArray) {
var length = btnArray.length;
var btns = [];
for (var i = 0; i < length; i++) {
btns.push('');
}
return '';
};
var createPopup = function(html, callback) {
var popupElement = document.createElement('div');
popupElement.className = CLASS_POPUP;
popupElement.innerHTML = html;
var removePopupElement = function() {
popupElement.parentNode && popupElement.parentNode.removeChild(popupElement);
popupElement = null;
};
popupElement.addEventListener($.EVENT_MOVE, $.preventDefault);
popupElement.addEventListener('webkitTransitionEnd', function(e) {
if (popupElement && e.target === popupElement && popupElement.classList.contains(CLASS_POPUP_OUT)) {
removePopupElement();
}
});
popupElement.style.display = 'block';
document.body.appendChild(popupElement);
popupElement.offsetHeight;
popupElement.classList.add(CLASS_POPUP_IN);
if (!backdrop.classList.contains(CLASS_ACTIVE)) {
backdrop.style.display = 'block';
document.body.appendChild(backdrop);
backdrop.offsetHeight;
backdrop.classList.add(CLASS_ACTIVE);
}
var btns = $.qsa('.' + CLASS_POPUP_BUTTON, popupElement);
var input = popupElement.querySelector('.' + CLASS_POPUP_INPUT + ' input');
var popup = {
element: popupElement,
close: function(index, animate) {
if (popupElement) {
var result = callback && callback({
index: index || 0,
value: input && input.value || ''
});
if (result === false) { //返回false则不关闭当前popup
return;
}
if (animate !== false) {
popupElement.classList.remove(CLASS_POPUP_IN);
popupElement.classList.add(CLASS_POPUP_OUT);
} else {
removePopupElement();
}
popupStack.pop();
//如果还有其他popup，则不remove backdrop
if (popupStack.length) {
popupStack[popupStack.length - 1]['show'](animate);
} else {
backdrop.classList.remove(CLASS_ACTIVE);
}
}
}
};
var handleEvent = function(e) {
popup.close(btns.indexOf(e.target));
};
$(popupElement).on('tap', '.' + CLASS_POPUP_BUTTON, handleEvent);
if (popupStack.length) {
popupStack[popupStack.length - 1]['hide']();
}
popupStack.push({
close: popup.close,
show: function(animate) {
popupElement.style.display = 'block';
popupElement.offsetHeight;
popupElement.classList.add(CLASS_POPUP_IN);
},
hide: function() {
popupElement.style.display = 'none';
popupElement.classList.remove(CLASS_POPUP_IN);
}
});
return popup;
};
var createAlert = function(message, title, btnValue, callback, type) {
if (typeof message === 'undefined') {
return;
} else {
if (typeof title === 'function') {
callback = title;
type = btnValue;
title = null;
btnValue = null;
} else if (typeof btnValue === 'function') {
type = callback;
callback = btnValue;
btnValue = null;
}
}
if (!$.os.plus || type === 'div') {
return createPopup(createInner(message, title || '提示') + createButtons([btnValue || '确定']), callback);
}
return plus.nativeUI.alert(message, callback, title || '提示', btnValue || '确定');
};
var createConfirm = function(message, title, btnArray, callback, type) {
if (typeof message === 'undefined') {
return;
} else {
if (typeof title === 'function') {
callback = title;
type = btnArray;
title = null;
btnArray = null;
} else if (typeof btnArray === 'function') {
type = callback;
callback = btnArray;
btnArray = null;
}
}
if (!$.os.plus || type === 'div') {
return createPopup(createInner(message, title || '提示') + createButtons(btnArray || ['取消', '确认']), callback);
}
return plus.nativeUI.confirm(message, callback, title, btnArray || ['取消', '确认']);
};
var createPrompt = function(message, placeholder, title, btnArray, callback, type) {
if (typeof message === 'undefined') {
return;
} else {
if (typeof placeholder === 'function') {
callback = placeholder;
type = title;
placeholder = null;
title = null;
btnArray = null;
} else if (typeof title === 'function') {
callback = title;
type = btnArray;
title = null;
btnArray = null;
} else if (typeof btnArray === 'function') {
type = callback;
callback = btnArray;
btnArray = null;
}
}
if (!$.os.plus || type === 'div') {
return createPopup(createInner(message, title || '提示', createInput(placeholder)) + createButtons(btnArray || ['取消', '确认']), callback);
}
return plus.nativeUI.prompt(message, callback, title || '提示', placeholder, btnArray || ['取消', '确认']);
};
var closePopup = function() {
if (popupStack.length) {
popupStack[popupStack.length - 1]['close']();
return true;
} else {
return false;
}
};
var closePopups = function() {
while (popupStack.length) {
popupStack[popupStack.length - 1]['close']();
}
};
$.closePopup = closePopup;
$.closePopups = closePopups;
$.alert = createAlert;
$.confirm = createConfirm;
$.prompt = createPrompt;
})(mui, window, document);
(function($, document) {
var CLASS_PROGRESSBAR = 'mui-progressbar';
var CLASS_PROGRESSBAR_IN = 'mui-progressbar-in';
var CLASS_PROGRESSBAR_OUT = 'mui-progressbar-out';
var CLASS_PROGRESSBAR_INFINITE = 'mui-progressbar-infinite';
var SELECTOR_PROGRESSBAR = '.mui-progressbar';
var _findProgressbar = function(container) {
container = $(container || 'body');
if (container.length === 0) return;
container = container[0];
if (container.classList.contains(CLASS_PROGRESSBAR)) {
return container;
}
var progressbars = container.querySelectorAll(SELECTOR_PROGRESSBAR);
if (progressbars) {
for (var i = 0, len = progressbars.length; i < len; i++) {
var progressbar = progressbars[i];
if (progressbar.parentNode === container) {
return progressbar;
}
}
}
};
/**
* 创建并显示进度条
* @param {Object} container 可选，默认body，支持selector,DOM Node,mui wrapper
* @param {Object} progress 可选，undefined表示循环，数字表示具体进度
* @param {Object} color 可选，指定颜色样式(目前暂未提供实际样式，可暂时不暴露此参数)
*/
var showProgressbar = function(container, progress, color) {
if (typeof container === 'number') {
color = progress;
progress = container;
container = 'body';
}
container = $(container || 'body');
if (container.length === 0) return;
container = container[0];
var progressbar;
if (container.classList.contains(CLASS_PROGRESSBAR)) {
progressbar = container;
} else {
var progressbars = container.querySelectorAll(SELECTOR_PROGRESSBAR + ':not(.' + CLASS_PROGRESSBAR_OUT + ')');
if (progressbars) {
for (var i = 0, len = progressbars.length; i < len; i++) {
var _progressbar = progressbars[i];
if (_progressbar.parentNode === container) {
progressbar = _progressbar;
break;
}
}
}
if (!progressbar) {
progressbar = document.createElement('span');
progressbar.className = CLASS_PROGRESSBAR + ' ' + CLASS_PROGRESSBAR_IN + (typeof progress !== 'undefined' ? '' : (' ' + CLASS_PROGRESSBAR_INFINITE)) + (color ? (' ' + CLASS_PROGRESSBAR + '-' + color) : '');
if (typeof progress !== 'undefined') {
progressbar.innerHTML = '' + this.element.getAttribute('placeholder') + ' ';
this.element.setAttribute('placeholder', '');
if (this.element.value.trim()) {
row.classList.add('mui-active');
}
}
row.insertBefore(action, this.element.nextSibling);
}
return action;
};
Input.prototype.initElementEvent = function() {
var element = this.element;
if (this.sliderActionClass) {
var tooltip = this.sliderAction;
var timer = null;
var showTip = function() { //每次重新计算是因为控件可能被隐藏，初始化时计算是不正确的
tooltip.classList.remove(CLASS_HIDDEN);
var offsetLeft = element.offsetLeft;
var width = element.offsetWidth - 28;
var tooltipWidth = tooltip.offsetWidth;
var distince = Math.abs(element.max - element.min);
var scaleWidth = (width / distince) * Math.abs(element.value - element.min);
tooltip.style.left = (14 + offsetLeft + scaleWidth - tooltipWidth / 2) + 'px';
tooltip.innerText = element.value;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
tooltip.classList.add(CLASS_HIDDEN);
}, 1000);
};
element.addEventListener('input', showTip);
element.addEventListener('tap', showTip);
element.addEventListener($.EVENT_MOVE, function(e) {
e.stopPropagation();
});
} else {
if (this.clearActionClass) {
var action = this.clearAction;
if (!action) {
return;
}
$.each(['keyup', 'change', 'input', 'focus', 'cut', 'paste'], function(index, type) {
(function(type) {
element.addEventListener(type, function() {
action.classList[element.value.trim() ? 'remove' : 'add'](CLASS_HIDDEN);
});
})(type);
});
element.addEventListener('blur', function() {
action.classList.add(CLASS_HIDDEN);
});
}
if (this.searchActionClass) {
element.addEventListener('focus', function() {
element.parentNode.classList.add('mui-active');
});
element.addEventListener('blur', function() {
if (!element.value.trim()) {
element.parentNode.classList.remove('mui-active');
}
});
}
}
};
Input.prototype.setPlaceholder = function(text) {
if (this.searchActionClass) {
var placeholder = this.element.parentNode.querySelector(SELECTOR_PLACEHOLDER);
placeholder && (placeholder.getElementsByTagName('span')[1].innerText = text);
} else {
this.element.setAttribute('placeholder', text);
}
};
Input.prototype.passwordActionClick = function(event) {
if (this.element.type === 'text') {
this.element.type = 'password';
} else {
this.element.type = 'text';
}
this.passwordAction.classList.toggle('mui-active');
event.preventDefault();
};
Input.prototype.clearActionClick = function(event) {
var self = this;
self.element.value = '';
$.focus(self.element);
self.clearAction.classList.add(CLASS_HIDDEN);
event.preventDefault();
};
Input.prototype.speechActionClick = function(event) {
if (window.plus) {
var self = this;
var oldValue = self.element.value;
self.element.value = '';
document.body.classList.add(CLASS_FOCUSIN);
plus.speech.startRecognize({
engine: 'iFly'
}, function(s) {
self.element.value += s;
$.focus(self.element);
plus.speech.stopRecognize();
$.trigger(self.element, 'recognized', {
value: self.element.value
});
if (oldValue !== self.element.value) {
$.trigger(self.element, 'change');
$.trigger(self.element, 'input');
}
// document.body.classList.remove(CLASS_FOCUSIN);
}, function(e) {
document.body.classList.remove(CLASS_FOCUSIN);
});
} else {
alert('only for 5+');
}
event.preventDefault();
};
$.fn.input = function(options) {
var inputApis = [];
this.each(function() {
var inputApi = null;
var actions = [];
var row = findRow(this.parentNode);
if (this.type === 'range' && row.classList.contains('mui-input-range')) {
actions.push('slider');
} else {
var classList = this.classList;
if (classList.contains('mui-input-clear')) {
actions.push('clear');
}
if (!($.os.android && $.os.stream) && classList.contains('mui-input-speech')) {
actions.push('speech');
}
if (classList.contains('mui-input-password')) {
actions.push('password');
}
if (this.type === 'search' && row.classList.contains('mui-search')) {
actions.push('search');
}
}
var id = this.getAttribute('data-input-' + actions[0]);
if (!id) {
id = ++$.uuid;
inputApi = $.data[id] = new Input(this, {
actions: actions.join(',')
});
for (var i = 0, len = actions.length; i < len; i++) {
this.setAttribute('data-input-' + actions[i], id);
}
} else {
inputApi = $.data[id];
}
inputApis.push(inputApi);
});
return inputApis.length === 1 ? inputApis[0] : inputApis;
};
$.ready(function() {
$('.mui-input-row input').input();
});
})(mui, window, document);
(function($, window) {
var CLASS_ACTIVE = 'mui-active';
var rgbaRegex = /^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d*(?:\.\d+)?)\)$/;
var getColor = function(colorStr) {
var matches = colorStr.match(rgbaRegex);
if (matches && matches.length === 5) {
return [
matches[1],
matches[2],
matches[3],
matches[4]
];
}
return [];
};
var Transparent = function(element, options) {
this.element = element;
this.options = $.extend({
top: 0, //距离顶部高度(到达该高度即触发)
offset: 150, //滚动透明距离
duration: 16, //过渡时间
scrollby: window//监听滚动距离容器
}, options || {});
this.scrollByElem = this.options.scrollby || window;
if (!this.scrollByElem) {
throw new Error("监听滚动的元素不存在");
}
this.isNativeScroll = false;
if (this.scrollByElem === window) {
this.isNativeScroll = true;
} else if (!~this.scrollByElem.className.indexOf('mui-scroll-wrapper')) {
this.isNativeScroll = true;
}
this._style = this.element.style;
this._bgColor = this._style.backgroundColor;
var color = getColor(mui.getStyles(this.element, 'backgroundColor'));
if (color.length) {
this._R = color[0];
this._G = color[1];
this._B = color[2];
this._A = parseFloat(color[3]);
this.lastOpacity = this._A;
this._bufferFn = $.buffer(this.handleScroll, this.options.duration, this);
this.initEvent();
} else {
throw new Error("元素背景颜色必须为RGBA");
}
};
Transparent.prototype.initEvent = function() {
this.scrollByElem.addEventListener('scroll', this._bufferFn);
if (this.isNativeScroll) { //原生scroll
this.scrollByElem.addEventListener($.EVENT_MOVE, this._bufferFn);
}
}
Transparent.prototype.handleScroll = function(e) {
var y = window.scrollY;
if (!this.isNativeScroll && e && e.detail) {
y = -e.detail.y;
}
var opacity = (y - this.options.top) / this.options.offset + this._A;
opacity = Math.min(Math.max(this._A, opacity), 1);
this._style.backgroundColor = 'rgba(' + this._R + ',' + this._G + ',' + this._B + ',' + opacity + ')';
if (opacity > this._A) {
this.element.classList.add(CLASS_ACTIVE);
} else {
this.element.classList.remove(CLASS_ACTIVE);
}
if (this.lastOpacity !== opacity) {
$.trigger(this.element, 'alpha', {
alpha: opacity
});
this.lastOpacity = opacity;
}
};
Transparent.prototype.destory = function() {
this.scrollByElem.removeEventListener('scroll', this._bufferFn);
this.scrollByElem.removeEventListener($.EVENT_MOVE, this._bufferFn);
this.element.style.backgroundColor = this._bgColor;
this.element.mui_plugin_transparent = null;
};
$.fn.transparent = function(options) {
options = options || {};
var transparentApis = [];
this.each(function() {
var transparentApi = this.mui_plugin_transparent;
if (!transparentApi) {
var top = this.getAttribute('data-top');
var offset = this.getAttribute('data-offset');
var duration = this.getAttribute('data-duration');
var scrollby = this.getAttribute('data-scrollby');
if (top !== null && typeof options.top === 'undefined') {
options.top = top;
}
if (offset !== null && typeof options.offset === 'undefined') {
options.offset = offset;
}
if (duration !== null && typeof options.duration === 'undefined') {
options.duration = duration;
}
if (scrollby !== null && typeof options.scrollby === 'undefined') {
options.scrollby = document.querySelector(scrollby) || window;
}
transparentApi = this.mui_plugin_transparent = new Transparent(this, options);
}
transparentApis.push(transparentApi);
});
return transparentApis.length === 1 ? transparentApis[0] : transparentApis;
};
$.ready(function() {
$('.mui-bar-transparent').transparent();
});
})(mui, window);
/**
* 数字输入框
* varstion 1.0.1
* by Houfeng
* Houfeng@DCloud.io
*/
(function($) {
var touchSupport = ('ontouchstart' in document);
var tapEventName = touchSupport ? 'tap' : 'click';
var changeEventName = 'change';
var holderClassName = 'mui-numbox';
var plusClassSelector = '.mui-btn-numbox-plus,.mui-numbox-btn-plus';
var minusClassSelector = '.mui-btn-numbox-minus,.mui-numbox-btn-minus';
var inputClassSelector = '.mui-input-numbox,.mui-numbox-input';
var Numbox = $.Numbox = $.Class.extend({
/**
* 构造函数
**/
init: function(holder, options) {
var self = this;
if (!holder) {
throw "构造 numbox 时缺少容器元素";
}
self.holder = holder;
options = options || {};
options.step = parseInt(options.step || 1);
self.options = options;
self.input = $.qsa(inputClassSelector, self.holder)[0];
self.plus = $.qsa(plusClassSelector, self.holder)[0];
self.minus = $.qsa(minusClassSelector, self.holder)[0];
self.checkValue();
self.initEvent();
},
/**
* 初始化事件绑定
**/
initEvent: function() {
var self = this;
self.plus.addEventListener(tapEventName, function(event) {
var val = parseInt(self.input.value) + self.options.step;
self.input.value = val.toString();
$.trigger(self.input, changeEventName, null);
});
self.minus.addEventListener(tapEventName, function(event) {
var val = parseInt(self.input.value) - self.options.step;
self.input.value = val.toString();
$.trigger(self.input, changeEventName, null);
});
self.input.addEventListener(changeEventName, function(event) {
self.checkValue();
var val = parseInt(self.input.value);
//触发顶层容器
$.trigger(self.holder, changeEventName, {
value: val
});
});
},
/**
* 获取当前值
**/
getValue: function() {
var self = this;
return parseInt(self.input.value);
},
/**
* 验证当前值是法合法
**/
checkValue: function() {
var self = this;
var val = self.input.value;
if (val == null || val == '' || isNaN(val)) {
self.input.value = self.options.min || 0;
self.minus.disabled = self.options.min != null;
} else {
var val = parseInt(val);
if (self.options.max != null && !isNaN(self.options.max) && val >= parseInt(self.options.max)) {
val = self.options.max;
self.plus.disabled = true;
} else {
self.plus.disabled = false;
}
if (self.options.min != null && !isNaN(self.options.min) && val <= parseInt(self.options.min)) {
val = self.options.min;
self.minus.disabled = true;
} else {
self.minus.disabled = false;
}
self.input.value = val;
}
},
/**
* 更新选项
**/
setOption: function(name, value) {
var self = this;
self.options[name] = value;
},
/**
* 动态设置新值
**/
setValue: function(value) {
this.input.value = value;
this.checkValue();
}
});
$.fn.numbox = function(options) {
var instanceArray = [];
//遍历选择的元素
this.each(function(i, element) {
if (element.numbox) {
return;
}
if (options) {
element.numbox = new Numbox(element, options);
} else {
var optionsText = element.getAttribute('data-numbox-options');
var options = optionsText ? JSON.parse(optionsText) : {};
options.step = element.getAttribute('data-numbox-step') || options.step;
options.min = element.getAttribute('data-numbox-min') || options.min;
options.max = element.getAttribute('data-numbox-max') || options.max;
element.numbox = new Numbox(element, options);
}
});
return this[0] ? this[0].numbox : null;
}
//自动处理 class='mui-locker' 的 dom
$.ready(function() {
$('.' + holderClassName).numbox();
});
}(mui));
/**
* Button
* @param {type} $
* @param {type} window
* @param {type} document
* @returns {undefined}
*/
(function($, window, document) {
var CLASS_ICON = 'mui-icon';
var CLASS_DISABLED = 'mui-disabled';
var STATE_RESET = 'reset';
var STATE_LOADING = 'loading';
var defaultOptions = {
loadingText: 'Loading...', //文案
loadingIcon: 'mui-spinner' + ' ' + 'mui-spinner-white', //图标，可为空
loadingIconPosition: 'left' //图标所处位置，仅支持left|right
};
var Button = function(element, options) {
this.element = element;
this.options = $.extend({}, defaultOptions, options);
if (!this.options.loadingText) {
this.options.loadingText = defaultOptions.loadingText;
}
if (this.options.loadingIcon === null) {
this.options.loadingIcon = 'mui-spinner';
if ($.getStyles(this.element, 'color') === 'rgb(255, 255, 255)') {
this.options.loadingIcon += ' ' + 'mui-spinner-white';
}
}
this.isInput = this.element.tagName === 'INPUT';
this.resetHTML = this.isInput ? this.element.value : this.element.innerHTML;
this.state = '';
};
Button.prototype.loading = function() {
this.setState(STATE_LOADING);
};
Button.prototype.reset = function() {
this.setState(STATE_RESET);
};
Button.prototype.setState = function(state) {
if (this.state === state) {
return false;
}
this.state = state;
if (state === STATE_RESET) {
this.element.disabled = false;
this.element.classList.remove(CLASS_DISABLED);
this.setHtml(this.resetHTML);
} else if (state === STATE_LOADING) {
this.element.disabled = true;
this.element.classList.add(CLASS_DISABLED);
var html = this.isInput ? this.options.loadingText : ('' + this.options.loadingText + ' ');
if (this.options.loadingIcon && !this.isInput) {
if (this.options.loadingIconPosition === 'right') {
html += ' ",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
""
]
},
"orientation": [
"portrait-primary"
],/*应用支持的方向，portrait-primary：竖屏正方向；portrait-secondary：竖屏反方向；landscape-primary：横屏正方向；landscape-secondary：横屏反方向*/
"icons": {
"ios": {
"prerendered": true, /*应用图标是否已经高亮处理，在iOS6及以下设备上有效*/
"auto": "", /*应用图标，分辨率：512x512，用于自动生成各种尺寸程序图标*/
"iphone": {
"normal": "", /*iPhone3/3GS程序图标，分辨率：57x57*/
"retina": "", /*iPhone4程序图标，分辨率：114x114*/
"retina7": "", /*iPhone4S/5/6程序图标，分辨率：120x120*/
"retina8": "", /*iPhone6 Plus程序图标，分辨率：180x180*/
"spotlight-normal": "", /*iPhone3/3GS Spotlight搜索程序图标，分辨率：29x29*/
"spotlight-retina": "", /*iPhone4 Spotlight搜索程序图标，分辨率：58x58*/
"spotlight-retina7": "", /*iPhone4S/5/6 Spotlight搜索程序图标，分辨率：80x80*/
"settings-normal": "", /*iPhone4设置页面程序图标，分辨率：29x29*/
"settings-retina": "", /*iPhone4S/5/6设置页面程序图标，分辨率：58x58*/
"settings-retina8": ""
},
"ipad": {
"normal": "", /*iPad普通屏幕程序图标，分辨率：72x72*/
"retina": "", /*iPad高分屏程序图标，分辨率：144x144*/
"normal7": "", /*iPad iOS7程序图标，分辨率：76x76*/
"retina7": "", /*iPad iOS7高分屏程序图标，分辨率：152x152*/
"spotlight-normal": "", /*iPad Spotlight搜索程序图标，分辨率：50x50*/
"spotlight-retina": "", /*iPad高分屏Spotlight搜索程序图标，分辨率：100x100*/
"spotlight-normal7": "",/*iPad iOS7 Spotlight搜索程序图标，分辨率：40x40*/
"spotlight-retina7": "",/*iPad iOS7高分屏Spotlight搜索程序图标，分辨率：80x80*/
"settings-normal": "",/*iPad设置页面程序图标，分辨率：29x29*/
"settings-retina": ""
}
},
"android": {
"mdpi": "", /*普通屏程序图标，分辨率：48x48*/
"ldpi": "", /*大屏程序图标，分辨率：48x48*/
"hdpi": "", /*高分屏程序图标，分辨率：72x72*/
"xhdpi": "",/*720P高分屏程序图标，分辨率：96x96*/
"xxhdpi": ""
}
},
"splashscreen": {
"ios": {
"iphone": {
"default": "", /*iPhone3启动图片选，分辨率：320x480*/
"retina35": "",/*3.5英寸设备(iPhone4)启动图片，分辨率：640x960*/
"retina40": "",/*4.0 英寸设备(iPhone5/iPhone5s)启动图片，分辨率：640x1136*/
"retina47": "",/*4.7 英寸设备(iPhone6)启动图片，分辨率：750x1334*/
"retina55": "",/*5.5 英寸设备(iPhone6 Plus)启动图片，分辨率：1242x2208*/
"retina55l": ""
},
"ipad": {
"portrait": "", /*iPad竖屏启动图片，分辨率：768x1004*/
"portrait-retina": "",/*iPad高分屏竖屏图片，分辨率：1536x2008*/
"landscape": "", /*iPad横屏启动图片，分辨率：1024x748*/
"landscape-retina": "", /*iPad高分屏横屏启动图片，分辨率：2048x1496*/
"portrait7": "", /*iPad iOS7竖屏启动图片，分辨率：768x1024*/
"portrait-retina7": "",/*iPad iOS7高分屏竖屏图片，分辨率：1536x2048*/
"landscape7": "", /*iPad iOS7横屏启动图片，分辨率：1024x768*/
"landscape-retina7": ""
}
},
"android": {
"mdpi": "", /*普通屏启动图片，分辨率：240x282*/
"ldpi": "", /*大屏启动图片，分辨率：320x442*/
"hdpi": "", /*高分屏启动图片，分辨率：480x762*/
"xhdpi": "", /*720P高分屏启动图片，分辨率：720x1242*/
"xxhdpi": ""
}
}
}
},
"dependencies": {
"pages": {
"index.html": {
"resources": [
"js/mui.min.js",
"css/mui.min.css",
"html/tab-webview-subpage-about.html",
"fonts/mui.ttf",
"fonts/iconfont.ttf",
"html/tab-webview-subpage-chat.html",
"js/util.js"
],
"refer": [
"html/tab-webview-subpage-contact.html",
"html/new-webview.html"
],
"priority": 0
},
"launch.html": {
"resources": [
"js/mui.min.js",
"css/mui.min.css",
"html/tab-webview-subpage-about.html"
],
"refer": [
"html/tab-webview-subpage-setting.html",
"html/tab-webview-subpage-chat.html",
"html/tab-webview-subpage-contact.html"
],
"priority": 0
},
"html/tab-webview-subpage-setting.html": {
"resources": [
"fonts/mui.ttf",
"css/mui.min.css",
"js/mui.min.js"
],
"refer": [],
"priority": 0
},
"html/tab-webview-subpage-about.html": {
"resources": [
"css/mui.min.css",
"js/mui.min.js",
"js/util.js"
],
"refer": [],
"priority": 0
},
"html/tab-webview-subpage-chat.html": {
"resources": [
"fonts/mui.ttf",
"js/mui.min.js",
"css/mui.min.css"
],
"refer": [],
"priority": 0
},
"html/tab-webview-subpage-contact.html": {
"resources": [
"images/60x60.gif",
"js/mui.min.js",
"css/mui.min.css"
],
"refer": [],
"priority": 0
},
"html/new-webview.html": {
"resources": [
"css/mui.min.css",
"js/mui.min.js",
"fonts/mui.ttf"
],
"refer": [],
"priority": 0
}
},
"idle": {
"resources": [
"js/mui.js",
"css/mui.css"
]
}
}
}
================================================
FILE: examples/nativeTab/unpackage/.confirmed_dependencies
================================================
{
"index.html": {
"resources": [
"js/mui.min.js",
"css/mui.min.css",
"html/tab-webview-subpage-about.html",
"fonts/mui.ttf",
"fonts/iconfont.ttf",
"js/util.js",
"html/tab-webview-subpage-chat.html"
],
"refer": [
"html/tab-webview-subpage-setting.html",
"html/tab-webview-subpage-chat.html",
"html/tab-webview-subpage-contact.html",
"html/tab-webview-subpage-about.html",
"html/new-webview.html"
]
},
"launch.html": {
"resources": [
"js/mui.min.js",
"css/mui.min.css",
"html/tab-webview-subpage-about.html"
],
"refer": [
"html/tab-webview-subpage-setting.html",
"html/tab-webview-subpage-chat.html",
"html/tab-webview-subpage-contact.html",
"html/tab-webview-subpage-about.html"
]
},
"html/tab-webview-subpage-setting.html": {
"resources": [
"fonts/mui.ttf",
"css/mui.min.css",
"js/mui.min.js"
],
"refer": []
},
"html/tab-webview-subpage-about.html": {
"resources": [
"css/mui.min.css",
"js/mui.min.js",
"js/util.js"
],
"refer": []
},
"html/tab-webview-subpage-chat.html": {
"resources": [
"fonts/mui.ttf",
"js/mui.min.js",
"css/mui.min.css"
],
"refer": []
},
"html/tab-webview-subpage-contact.html": {
"resources": [
"images/60x60.gif",
"js/mui.min.js",
"css/mui.min.css"
],
"refer": []
},
"html/new-webview.html": {
"resources": [
"css/mui.min.css",
"js/mui.min.js",
"fonts/mui.ttf"
],
"refer": []
}
}
================================================
FILE: examples/nativeTab/unpackage/.dependencies
================================================
null
================================================
FILE: grunt/mui-namespace-generator.js
================================================
/*!
* Mui Grunt task for namespace generation
*/
/* jshint node: true */'use strict';
var fs = require('fs');
module.exports = function generateNamespace() {
var dir = fs.readdirSync('dist/js/');
dir.forEach(function(file) {
if (~file.indexOf('.js') && !~file.indexOf('.min')) {
var source = fs.readFileSync('dist/js/' + file, 'utf8');
var name = file.replace('.js', '').split('.')[0];
source = source.toString().replace(/\$\.className\(([\'|"])([^\'|"]*)[\'|"]\)/g, '$1' + name + '-$2$1').replace(/\$\.classSelector\(([\'|"])([^\'|"]*)[\'|"]\)/g, function(match, p1, p2) {
return p1 + p2.replace(/\./g, '.' + name + '-') + p1;
});
fs.writeFileSync('dist/js/' + file, source);
}
});
};
================================================
FILE: js/actions.js
================================================
/**
* actions
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var CLASS_ACTION = $.className('action');
var handle = function(event, target) {
var className = target.className || '';
if (typeof className !== 'string') { //svg className(SVGAnimatedString)
className = '';
}
if (className && ~className.indexOf(CLASS_ACTION)) {
if (target.classList.contains($.className('action-back'))) {
event.preventDefault();
}
return target;
}
return false;
};
$.registerTarget({
name: name,
index: 50,
handle: handle,
target: false,
isContinue: true
});
})(mui, 'action');
================================================
FILE: js/ajax.plugin.js
================================================
(function($) {
//TODO
})(mui);
================================================
FILE: js/input.plugin.js
================================================
/**
* Input(TODO resize)
* @param {type} $
* @param {type} window
* @param {type} document
* @returns {undefined}
*/
(function($, window, document) {
var CLASS_ICON = $.className('icon');
var CLASS_ICON_CLEAR = $.className('icon-clear');
var CLASS_ICON_SPEECH = $.className('icon-speech');
var CLASS_ICON_SEARCH = $.className('icon-search');
var CLASS_ICON_PASSWORD = $.className('icon-eye');
var CLASS_INPUT_ROW = $.className('input-row');
var CLASS_PLACEHOLDER = $.className('placeholder');
var CLASS_TOOLTIP = $.className('tooltip');
var CLASS_HIDDEN = $.className('hidden');
var CLASS_FOCUSIN = $.className('focusin');
var SELECTOR_ICON_CLOSE = '.' + CLASS_ICON_CLEAR;
var SELECTOR_ICON_SPEECH = '.' + CLASS_ICON_SPEECH;
var SELECTOR_ICON_PASSWORD = '.' + CLASS_ICON_PASSWORD;
var SELECTOR_PLACEHOLDER = '.' + CLASS_PLACEHOLDER;
var SELECTOR_TOOLTIP = '.' + CLASS_TOOLTIP;
var findRow = function(target) {
for (; target && target !== document; target = target.parentNode) {
if (target.classList && target.classList.contains(CLASS_INPUT_ROW)) {
return target;
}
}
return null;
};
var Input = function(element, options) {
this.element = element;
this.options = options || {
actions: 'clear'
};
if (~this.options.actions.indexOf('slider')) { //slider
this.sliderActionClass = CLASS_TOOLTIP + ' ' + CLASS_HIDDEN;
this.sliderActionSelector = SELECTOR_TOOLTIP;
} else { //clear,speech,search
if (~this.options.actions.indexOf('clear')) {
this.clearActionClass = CLASS_ICON + ' ' + CLASS_ICON_CLEAR + ' ' + CLASS_HIDDEN;
this.clearActionSelector = SELECTOR_ICON_CLOSE;
}
if (~this.options.actions.indexOf('speech')) { //only for 5+
this.speechActionClass = CLASS_ICON + ' ' + CLASS_ICON_SPEECH;
this.speechActionSelector = SELECTOR_ICON_SPEECH;
}
if (~this.options.actions.indexOf('search')) {
this.searchActionClass = CLASS_PLACEHOLDER;
this.searchActionSelector = SELECTOR_PLACEHOLDER;
}
if (~this.options.actions.indexOf('password')) {
this.passwordActionClass = CLASS_ICON + ' ' + CLASS_ICON_PASSWORD;
this.passwordActionSelector = SELECTOR_ICON_PASSWORD;
}
}
this.init();
};
Input.prototype.init = function() {
this.initAction();
this.initElementEvent();
};
Input.prototype.initAction = function() {
var self = this;
var row = self.element.parentNode;
if (row) {
if (self.sliderActionClass) {
self.sliderAction = self.createAction(row, self.sliderActionClass, self.sliderActionSelector);
} else {
if (self.searchActionClass) {
self.searchAction = self.createAction(row, self.searchActionClass, self.searchActionSelector);
self.searchAction.addEventListener('tap', function(e) {
$.focus(self.element);
e.stopPropagation();
});
}
if (self.speechActionClass) {
self.speechAction = self.createAction(row, self.speechActionClass, self.speechActionSelector);
self.speechAction.addEventListener('click', $.stopPropagation);
self.speechAction.addEventListener('tap', function(event) {
self.speechActionClick(event);
});
}
if (self.clearActionClass) {
self.clearAction = self.createAction(row, self.clearActionClass, self.clearActionSelector);
self.clearAction.addEventListener('tap', function(event) {
self.clearActionClick(event);
});
}
if (self.passwordActionClass) {
self.passwordAction = self.createAction(row, self.passwordActionClass, self.passwordActionSelector);
self.passwordAction.addEventListener('tap', function(event) {
self.passwordActionClick(event);
});
}
}
}
};
Input.prototype.createAction = function(row, actionClass, actionSelector) {
var action = row.querySelector(actionSelector);
if (!action) {
var action = document.createElement('span');
action.className = actionClass;
if (actionClass === this.searchActionClass) {
action.innerHTML = '' + this.element.getAttribute('placeholder') + ' ';
this.element.setAttribute('placeholder', '');
if (this.element.value.trim()) {
row.classList.add($.className('active'));
}
}
row.insertBefore(action, this.element.nextSibling);
}
return action;
};
Input.prototype.initElementEvent = function() {
var element = this.element;
if (this.sliderActionClass) {
var tooltip = this.sliderAction;
var timer = null;
var showTip = function() { //每次重新计算是因为控件可能被隐藏，初始化时计算是不正确的
tooltip.classList.remove(CLASS_HIDDEN);
var offsetLeft = element.offsetLeft;
var width = element.offsetWidth - 28;
var tooltipWidth = tooltip.offsetWidth;
var distince = Math.abs(element.max - element.min);
var scaleWidth = (width / distince) * Math.abs(element.value - element.min);
tooltip.style.left = (14 + offsetLeft + scaleWidth - tooltipWidth / 2) + 'px';
tooltip.innerText = element.value;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
tooltip.classList.add(CLASS_HIDDEN);
}, 1000);
};
element.addEventListener('input', showTip);
element.addEventListener('tap', showTip);
element.addEventListener($.EVENT_MOVE, function(e) {
e.stopPropagation();
});
} else {
if (this.clearActionClass) {
var action = this.clearAction;
if (!action) {
return;
}
$.each(['keyup', 'change', 'input', 'focus', 'cut', 'paste'], function(index, type) {
(function(type) {
element.addEventListener(type, function() {
action.classList[element.value.trim() ? 'remove' : 'add'](CLASS_HIDDEN);
});
})(type);
});
element.addEventListener('blur', function() {
action.classList.add(CLASS_HIDDEN);
});
}
if (this.searchActionClass) {
element.addEventListener('focus', function() {
element.parentNode.classList.add($.className('active'));
});
element.addEventListener('blur', function() {
if (!element.value.trim()) {
element.parentNode.classList.remove($.className('active'));
}
});
}
}
};
Input.prototype.setPlaceholder = function(text) {
if (this.searchActionClass) {
var placeholder = this.element.parentNode.querySelector(SELECTOR_PLACEHOLDER);
placeholder && (placeholder.getElementsByTagName('span')[1].innerText = text);
} else {
this.element.setAttribute('placeholder', text);
}
};
Input.prototype.passwordActionClick = function(event) {
if (this.element.type === 'text') {
this.element.type = 'password';
} else {
this.element.type = 'text';
}
this.passwordAction.classList.toggle($.className('active'));
event.preventDefault();
};
Input.prototype.clearActionClick = function(event) {
var self = this;
self.element.value = '';
$.focus(self.element);
self.clearAction.classList.add(CLASS_HIDDEN);
event.preventDefault();
};
Input.prototype.speechActionClick = function(event) {
if (window.plus) {
var self = this;
var oldValue = self.element.value;
self.element.value = '';
document.body.classList.add(CLASS_FOCUSIN);
plus.speech.startRecognize({
engine: 'iFly'
}, function(s) {
self.element.value += s;
$.focus(self.element);
plus.speech.stopRecognize();
$.trigger(self.element, 'recognized', {
value: self.element.value
});
if (oldValue !== self.element.value) {
$.trigger(self.element, 'change');
$.trigger(self.element, 'input');
}
// document.body.classList.remove(CLASS_FOCUSIN);
}, function(e) {
document.body.classList.remove(CLASS_FOCUSIN);
});
} else {
alert('only for 5+');
}
event.preventDefault();
};
$.fn.input = function(options) {
var inputApis = [];
this.each(function() {
var inputApi = null;
var actions = [];
var row = findRow(this.parentNode);
if (this.type === 'range' && row.classList.contains($.className('input-range'))) {
actions.push('slider');
} else {
var classList = this.classList;
if (classList.contains($.className('input-clear'))) {
actions.push('clear');
}
if (!($.os.android && $.os.stream) && classList.contains($.className('input-speech'))) {
actions.push('speech');
}
if (classList.contains($.className('input-password'))) {
actions.push('password');
}
if (this.type === 'search' && row.classList.contains($.className('search'))) {
actions.push('search');
}
}
var id = this.getAttribute('data-input-' + actions[0]);
if (!id) {
id = ++$.uuid;
inputApi = $.data[id] = new Input(this, {
actions: actions.join(',')
});
for (var i = 0, len = actions.length; i < len; i++) {
this.setAttribute('data-input-' + actions[i], id);
}
} else {
inputApi = $.data[id];
}
inputApis.push(inputApi);
});
return inputApis.length === 1 ? inputApis[0] : inputApis;
};
$.ready(function() {
$($.classSelector('.input-row input')).input();
});
})(mui, window, document);
================================================
FILE: js/modals.js
================================================
/**
* Modals
* @param {type} $
* @param {type} window
* @param {type} document
* @param {type} name
* @returns {undefined}
*/
(function($, window, document, name) {
var CLASS_MODAL = $.className('modal');
var handle = function(event, target) {
if (target.tagName === 'A' && target.hash) {
var modal = document.getElementById(target.hash.replace('#', ''));
if (modal && modal.classList.contains(CLASS_MODAL)) {
return modal;
}
}
return false;
};
$.registerTarget({
name: name,
index: 50,
handle: handle,
target: false,
isReset: false,
isContinue: true
});
window.addEventListener('tap', function(event) {
if ($.targets.modal) {
event.detail.gesture.preventDefault(); //fixed hashchange
$.targets.modal.classList.toggle($.className('active'));
}
});
})(mui, window, document, 'modal');
================================================
FILE: js/mui.active.js
================================================
/**
* TODO mui active
*/
(function(window) {
var active;
window.addEventListener($.EVENT_START, function(event) {
var target = event.target;
var isCellDisabled = false;
for (; target && target !== document; target = target.parentNode) {
if (target.classList) {
var classList = target.classList;
if (classList.contains(CLASS_DISABLED)) { //normal
isCellDisabled = true;
} else if (target.tagName === 'INPUT' || target.tagName === 'BUTTON' || classList.contains(CLASS_TOGGLE) || classList.contains(CLASS_BTN)) {
isCellDisabled = true;
}
if (classList.contains(CLASS_TABLE_VIEW_CELL)) {
if (!isCellDisabled) {
active = target;
var link = cell.querySelector('a');
if (link && link.parentNode === cell) { //li>a
active = link;
}
}
break;
}
}
}
});
})(window);
================================================
FILE: js/mui.ajax.5+.js
================================================
/**
* 5+ ajax
*/
(function($) {
var originAnchor = document.createElement('a');
originAnchor.href = window.location.href;
$.plusReady(function() {
$.ajaxSettings = $.extend($.ajaxSettings, {
xhr: function(settings) {
if (settings.crossDomain) { //强制使用plus跨域
return new plus.net.XMLHttpRequest();
}
//仅在webview的url为远程文件，且ajax请求的资源不同源下使用plus.net.XMLHttpRequest
if (originAnchor.protocol !== 'file:') {
var urlAnchor = document.createElement('a');
urlAnchor.href = settings.url;
urlAnchor.href = urlAnchor.href;
settings.crossDomain = (originAnchor.protocol + '//' + originAnchor.host) !== (urlAnchor.protocol + '//' + urlAnchor.host);
if (settings.crossDomain) {
return new plus.net.XMLHttpRequest();
}
}
if ($.os.ios && window.webkit && window.webkit.messageHandlers) { //wkwebview下同样使用5+ xhr
return new plus.net.XMLHttpRequest();
}
return new window.XMLHttpRequest();
}
});
});
})(mui);
================================================
FILE: js/mui.ajax.js
================================================
/**
* mui ajax
* @param {type} $
* @returns {undefined}
*/
(function($, window, undefined) {
var jsonType = 'application/json';
var htmlType = 'text/html';
var rscript = /)<[^<]*)*<\/script>/gi;
var scriptTypeRE = /^(?:text|application)\/javascript/i;
var xmlTypeRE = /^(?:text|application)\/xml/i;
var blankRE = /^\s*$/;
$.ajaxSettings = {
type: 'GET',
beforeSend: $.noop,
success: $.noop,
error: $.noop,
complete: $.noop,
context: null,
xhr: function(protocol) {
return new window.XMLHttpRequest();
},
accepts: {
script: 'text/javascript, application/javascript, application/x-javascript',
json: jsonType,
xml: 'application/xml, text/xml',
html: htmlType,
text: 'text/plain'
},
timeout: 0,
processData: true,
cache: true
};
var ajaxBeforeSend = function(xhr, settings) {
var context = settings.context
if(settings.beforeSend.call(context, xhr, settings) === false) {
return false;
}
};
var ajaxSuccess = function(data, xhr, settings) {
settings.success.call(settings.context, data, 'success', xhr);
ajaxComplete('success', xhr, settings);
};
// type: "timeout", "error", "abort", "parsererror"
var ajaxError = function(error, type, xhr, settings) {
settings.error.call(settings.context, xhr, type, error);
ajaxComplete(type, xhr, settings);
};
// status: "success", "notmodified", "error", "timeout", "abort", "parsererror"
var ajaxComplete = function(status, xhr, settings) {
settings.complete.call(settings.context, xhr, status);
};
var serialize = function(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);
}
});
};
var serializeData = function(options) {
if(options.processData && options.data && typeof options.data !== "string") {
var contentType = options.contentType;
if(!contentType && options.headers) {
contentType = options.headers['Content-Type'];
}
if(contentType && ~contentType.indexOf(jsonType)) { //application/json
options.data = JSON.stringify(options.data);
} else {
options.data = $.param(options.data, options.traditional);
}
}
if(options.data && (!options.type || options.type.toUpperCase() === 'GET')) {
options.url = appendQuery(options.url, options.data);
options.data = undefined;
}
};
var appendQuery = function(url, query) {
if(query === '') {
return url;
}
return(url + '&' + query).replace(/[&?]{1,2}/, '?');
};
var mimeToDataType = function(mime) {
if(mime) {
mime = mime.split(';', 2)[0];
}
return mime && (mime === htmlType ? 'html' :
mime === jsonType ? 'json' :
scriptTypeRE.test(mime) ? 'script' :
xmlTypeRE.test(mime) && 'xml') || 'text';
};
var parseArguments = function(url, data, success, dataType) {
if($.isFunction(data)) {
dataType = success, success = data, data = undefined;
}
if(!$.isFunction(success)) {
dataType = success, success = undefined;
}
return {
url: url,
data: data,
success: success,
dataType: dataType
};
};
$.ajax = function(url, options) {
if(typeof url === "object") {
options = url;
url = undefined;
}
var settings = options || {};
settings.url = url || settings.url;
for(var key in $.ajaxSettings) {
if(settings[key] === undefined) {
settings[key] = $.ajaxSettings[key];
}
}
serializeData(settings);
var dataType = settings.dataType;
if(settings.cache === false || ((!options || options.cache !== true) && ('script' === dataType))) {
settings.url = appendQuery(settings.url, '_=' + $.now());
}
var mime = settings.accepts[dataType && dataType.toLowerCase()];
var headers = {};
var setHeader = function(name, value) {
headers[name.toLowerCase()] = [name, value];
};
var protocol = /^([\w-]+:)\/\//.test(settings.url) ? RegExp.$1 : window.location.protocol;
var xhr = settings.xhr(settings);
if(location.protocol === 'file:' && $.os.ios && window.webkit && window.webkit.messageHandlers && !(xhr instanceof plus.net.XMLHttpRequest)){
console.error("当前运行环境为WKWebview，需在plusReady事件触发后再调用mui.ajax，否则可能会执行失败或报Script error的错误")
}
var nativeSetHeader = xhr.setRequestHeader;
var abortTimeout;
setHeader('X-Requested-With', 'XMLHttpRequest');
setHeader('Accept', mime || '*/*');
if(!!(mime = settings.mimeType || mime)) {
if(mime.indexOf(',') > -1) {
mime = mime.split(',', 2)[0];
}
xhr.overrideMimeType && xhr.overrideMimeType(mime);
}
if(settings.contentType || (settings.contentType !== false && settings.data && settings.type.toUpperCase() !== 'GET')) {
setHeader('Content-Type', settings.contentType || 'application/x-www-form-urlencoded');
}
if(settings.headers) {
for(var name in settings.headers)
setHeader(name, settings.headers[name]);
}
xhr.setRequestHeader = setHeader;
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
xhr.onreadystatechange = $.noop;
clearTimeout(abortTimeout);
var result, error = false;
var isLocal = protocol === 'file:';
if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304 || (xhr.status === 0 && isLocal && xhr.responseText)) {
dataType = dataType || mimeToDataType(settings.mimeType || xhr.getResponseHeader('content-type'));
result = xhr.responseText;
try {
// http://perfectionkills.com/global-eval-what-are-the-options/
if(dataType === 'script') {
(1, eval)(result);
} else if(dataType === 'xml') {
result = xhr.responseXML;
} else if(dataType === 'json') {
result = blankRE.test(result) ? null : $.parseJSON(result);
}
} catch(e) {
error = e;
}
if(error) {
ajaxError(error, 'parsererror', xhr, settings);
} else {
ajaxSuccess(result, xhr, settings);
}
} else {
var status = xhr.status ? 'error' : 'abort';
var statusText = xhr.statusText || null;
if(isLocal) {
status = 'error';
statusText = '404';
}
ajaxError(statusText, status, xhr, settings);
}
}
};
if(ajaxBeforeSend(xhr, settings) === false) {
xhr.abort();
ajaxError(null, 'abort', xhr, settings);
return xhr;
}
if(settings.xhrFields) {
for(var name in settings.xhrFields) {
xhr[name] = settings.xhrFields[name];
}
}
var async = 'async' in settings ? settings.async : true;
xhr.open(settings.type.toUpperCase(), settings.url, async, settings.username, settings.password);
for(var name in headers) {
if(headers.hasOwnProperty(name)) {
nativeSetHeader.apply(xhr, headers[name]);
}
}
if(settings.timeout > 0) {
abortTimeout = setTimeout(function() {
xhr.onreadystatechange = $.noop;
xhr.abort();
ajaxError(null, 'timeout', xhr, settings);
}, settings.timeout);
}
xhr.send(settings.data ? settings.data : null);
return xhr;
};
$.param = function(obj, traditional) {
var params = [];
params.add = function(k, v) {
this.push(encodeURIComponent(k) + '=' + encodeURIComponent(v));
};
serialize(params, obj, traditional);
return params.join('&').replace(/%20/g, '+');
};
$.get = function( /* url, data, success, dataType */ ) {
return $.ajax(parseArguments.apply(null, arguments));
};
$.post = function( /* url, data, success, dataType */ ) {
var options = parseArguments.apply(null, arguments);
options.type = 'POST';
return $.ajax(options);
};
$.getJSON = function( /* url, data, success */ ) {
var options = parseArguments.apply(null, arguments);
options.dataType = 'json';
return $.ajax(options);
};
$.fn.load = function(url, data, success) {
if(!this.length)
return this;
var self = this,
parts = url.split(/\s/),
selector,
options = parseArguments(url, data, success),
callback = options.success;
if(parts.length > 1)
options.url = parts[0], selector = parts[1];
options.success = function(response) {
if(selector) {
var div = document.createElement('div');
div.innerHTML = response.replace(rscript, "");
var selectorDiv = document.createElement('div');
var childs = div.querySelectorAll(selector);
if(childs && childs.length > 0) {
for(var i = 0, len = childs.length; i < len; i++) {
selectorDiv.appendChild(childs[i]);
}
}
self[0].innerHTML = selectorDiv.innerHTML;
} else {
self[0].innerHTML = response;
}
callback && callback.apply(self, arguments);
};
$.ajax(options);
return this;
};
})(mui, window);
================================================
FILE: js/mui.animation.js
================================================
/**
* mui animation
*/
(function($, window) {
/**
* scrollTo
*/
$.scrollTo = function(scrollTop, duration, callback) {
duration = duration || 1000;
var scroll = function(duration) {
if (duration <= 0) {
window.scrollTo(0, scrollTop);
callback && callback();
return;
}
var distaince = scrollTop - window.scrollY;
setTimeout(function() {
window.scrollTo(0, window.scrollY + distaince / duration * 10);
scroll(duration - 10);
}, 16.7);
};
scroll(duration);
};
$.animationFrame = function(cb) {
var args, isQueued, context;
return function() {
args = arguments;
context = this;
if (!isQueued) {
isQueued = true;
requestAnimationFrame(function() {
cb.apply(context, args);
isQueued = false;
});
}
};
};
})(mui, window);
================================================
FILE: js/mui.animationframe.js
================================================
/**
* mui animationFrame
*/
(function($, window) {
var rAF = window.requestAnimationFrame;
var cAF = window.cancelAnimationFrame;
var queues = {};
var animationFrame = {
queue : queue,
queueAfter : queueAfter,
cancel : cancel
};
function animation_id() {
var id;
do {
id = Math.floor(Math.random() * 1E9);
} while (id in queues);
return id;
}
function recursion(callback) {
var qid = animation_id();
(function wrapper() {
callback();
queues[qid] = rAF(function() {
delete queues[qid];
wrapper();
});
})();
return qid;
}
function queue(callback) {
var qid = animation_id();
queues[qid] = rAF(function() {
delete queues[qid];
callback.apply(animationFrame, arguments);
});
return qid;
}
function queueAfter(callback) {
var qid;
qid = queue(function() {
queues[qid] = rAF(function() {
delete queues[qid];
callback.apply(animationFrame, arguments);
});
});
return qid;
}
function cancel(qid) {
if ( qid in queues) {
cAF(queues[qid]);
delete queues[qid];
}
return animationFrame;
}
$.animationFrame = animationFrame;
})(mui, window);
================================================
FILE: js/mui.back.5+.js
================================================
/**
* mui back 5+
* @param {type} $
* @param {type} window
* @returns {undefined}
*/
(function($, window) {
if ($.os.plus && $.os.android) {
$.addBack({
name: 'mui',
index: 5,
handle: function() {
//后续重新设计此处，将back放到各个空间内部实现
//popover
if ($.targets._popover && $.targets._popover.classList.contains($.className('active'))) {
$($.targets._popover).popover('hide');
return true;
}
//offcanvas
var offCanvas = document.querySelector($.classSelector('.off-canvas-wrap.active'));
if (offCanvas) {
$(offCanvas).offCanvas('close');
return true;
}
var previewImage = $.isFunction($.getPreviewImage) && $.getPreviewImage();
if (previewImage && previewImage.isShown()) {
previewImage.close();
return true;
}
//popup
return $.closePopup();
}
});
}
//首次按下back按键的时间
$.__back__first = null;
/**
* 5+ back
*/
$.addBack({
name: '5+',
index: 10,
handle: function() {
if (!window.plus) {
return false;
}
var wobj = plus.webview.currentWebview();
var parent = wobj.parent();
if (parent) {
parent.evalJS('mui&&mui.back();');
} else {
wobj.canBack(function(e) {
//by chb 暂时注释，在碰到类似popover之类的锚点的时候，需多次点击才能返回；
if (e.canBack) { //webview history back
window.history.back();
} else { //webview close or hide
//fixed by fxy 此处不应该用opener判断，因为用户有可能自己close掉当前窗口的opener。这样的话。opener就为空了，导致不能执行close
if (wobj.id === plus.runtime.appid) { //首页
//首页不存在opener的情况下，后退实际上应该是退出应用；
//首次按键，提示‘再按一次退出应用’
if (!$.__back__first) {
$.__back__first = new Date().getTime();
mui.toast('再按一次退出应用');
setTimeout(function() {
$.__back__first = null;
}, 2000);
} else {
if (new Date().getTime() - $.__back__first < 2000) {
plus.runtime.quit();
}
}
} else { //其他页面，
if (wobj.preload) {
wobj.hide("auto");
} else {
//关闭页面时，需要将其打开的所有子页面全部关闭；
$.closeAll(wobj);
}
}
}
});
}
return true;
}
});
$.menu = function() {
var menu = document.querySelector($.classSelector('.action-menu'));
if (menu) {
$.trigger(menu, $.EVENT_START); //临时处理menu无touchstart的话，找不到当前targets的问题
$.trigger(menu, 'tap');
} else { //执行父窗口的menu
if (window.plus) {
var wobj = $.currentWebview;
var parent = wobj.parent();
if (parent) { //又得evalJS
parent.evalJS('mui&&mui.menu();');
}
}
}
};
var __back = function() {
$.back();
};
var __menu = function() {
$.menu();
};
//默认监听
$.plusReady(function() {
if ($.options.keyEventBind.backbutton) {
plus.key.addEventListener('backbutton', __back, false);
}
if ($.options.keyEventBind.menubutton) {
plus.key.addEventListener('menubutton', __menu, false);
}
});
//处理按键监听事件
$.addInit({
name: 'keyEventBind',
index: 1000,
handle: function() {
$.plusReady(function() {
//如果不为true，则移除默认监听
if (!$.options.keyEventBind.backbutton) {
plus.key.removeEventListener('backbutton', __back);
}
if (!$.options.keyEventBind.menubutton) {
plus.key.removeEventListener('menubutton', __menu);
}
});
}
});
})(mui, window);
================================================
FILE: js/mui.back.js
================================================
/**
* mui back
* @param {type} $
* @param {type} window
* @returns {undefined}
*/
(function($, window) {
/**
* register back
* @param {type} back
* @returns {$.gestures}
*/
$.addBack = function(back) {
return $.addAction('backs', back);
};
/**
* default
*/
$.addBack({
name: 'browser',
index: 100,
handle: function() {
if (window.history.length > 1) {
window.history.back();
return true;
}
return false;
}
});
/**
* 后退
*/
$.back = function() {
if (typeof $.options.beforeback === 'function') {
if ($.options.beforeback() === false) {
return;
}
}
$.doAction('backs');
};
window.addEventListener('tap', function(e) {
var action = $.targets.action;
if (action && action.classList.contains($.className('action-back'))) {
$.back();
$.targets.action = false;
}
});
window.addEventListener('swiperight', function(e) {
var detail = e.detail;
if ($.options.swipeBack === true && Math.abs(detail.angle) < 3) {
$.back();
}
});
})(mui, window);
================================================
FILE: js/mui.button.js
================================================
/**
* Button
* @param {type} $
* @param {type} window
* @param {type} document
* @returns {undefined}
*/
(function($, window, document) {
var CLASS_ICON = $.className('icon');
var CLASS_DISABLED = $.className('disabled');
var STATE_RESET = 'reset';
var STATE_LOADING = 'loading';
var defaultOptions = {
loadingText: 'Loading...', //文案
loadingIcon: $.className('spinner') + ' ' + $.className('spinner-white'), //图标，可为空
loadingIconPosition: 'left' //图标所处位置，仅支持left|right
};
var Button = function(element, options) {
this.element = element;
this.options = $.extend({}, defaultOptions, options);
if (!this.options.loadingText) {
this.options.loadingText = defaultOptions.loadingText;
}
if (this.options.loadingIcon === null) {
this.options.loadingIcon = $.className('spinner');
if ($.getStyles(this.element, 'color') === 'rgb(255, 255, 255)') {
this.options.loadingIcon += ' ' + $.className('spinner-white');
}
}
this.isInput = this.element.tagName === 'INPUT';
this.resetHTML = this.isInput ? this.element.value : this.element.innerHTML;
this.state = '';
};
Button.prototype.loading = function() {
this.setState(STATE_LOADING);
};
Button.prototype.reset = function() {
this.setState(STATE_RESET);
};
Button.prototype.setState = function(state) {
if (this.state === state) {
return false;
}
this.state = state;
if (state === STATE_RESET) {
this.element.disabled = false;
this.element.classList.remove(CLASS_DISABLED);
this.setHtml(this.resetHTML);
} else if (state === STATE_LOADING) {
this.element.disabled = true;
this.element.classList.add(CLASS_DISABLED);
var html = this.isInput ? this.options.loadingText : ('' + this.options.loadingText + ' ');
if (this.options.loadingIcon && !this.isInput) {
if (this.options.loadingIconPosition === 'right') {
html += ' ' + message + '
';
toast.addEventListener('webkitTransitionEnd', function() {
if (!toast.classList.contains(CLASS_ACTIVE)) {
toast.parentNode.removeChild(toast);
toast = null;
}
});
//点击则自动消失
toast.addEventListener('click', function() {
toast.parentNode.removeChild(toast);
toast = null;
});
document.body.appendChild(toast);
toast.offsetHeight;
toast.classList.add(CLASS_ACTIVE);
setTimeout(function() {
toast && toast.classList.remove(CLASS_ACTIVE);
}, duration);
return {
isVisible: function() {return !!toast;}
}
}
};
})(mui, window);
================================================
FILE: js/mui.event.js
================================================
/**
* 仅提供简单的on，off(仅支持事件委托，不支持当前元素绑定，当前元素绑定请直接使用addEventListener,removeEventListener)
* @param {Object} $
*/
(function($) {
if ('ontouchstart' in window) {
$.isTouchable = true;
$.EVENT_START = 'touchstart';
$.EVENT_MOVE = 'touchmove';
$.EVENT_END = 'touchend';
} else {
$.isTouchable = false;
$.EVENT_START = 'mousedown';
$.EVENT_MOVE = 'mousemove';
$.EVENT_END = 'mouseup';
}
$.EVENT_CANCEL = 'touchcancel';
$.EVENT_CLICK = 'click';
var _mid = 1;
var delegates = {};
//需要wrap的函数
var eventMethods = {
preventDefault: 'isDefaultPrevented',
stopImmediatePropagation: 'isImmediatePropagationStopped',
stopPropagation: 'isPropagationStopped'
};
//默认true返回函数
var returnTrue = function() {
return true
};
//默认false返回函数
var returnFalse = function() {
return false
};
//wrap浏览器事件
var compatible = function(event, target) {
if (!event.detail) {
event.detail = {
currentTarget: target
};
} else {
event.detail.currentTarget = target;
}
$.each(eventMethods, function(name, predicate) {
var sourceMethod = event[name];
event[name] = function() {
this[predicate] = returnTrue;
return sourceMethod && sourceMethod.apply(event, arguments)
}
event[predicate] = returnFalse;
}, true);
return event;
};
//简单的wrap对象_mid
var mid = function(obj) {
return obj && (obj._mid || (obj._mid = _mid++));
};
//事件委托对象绑定的事件回调列表
var delegateFns = {};
//返回事件委托的wrap事件回调
var delegateFn = function(element, event, selector, callback) {
return function(e) {
//same event
var callbackObjs = delegates[element._mid][event];
var handlerQueue = [];
var target = e.target;
var selectorAlls = {};
for (; target && target !== document; target = target.parentNode) {
if (target === element) {
break;
}
if (~['click', 'tap', 'doubletap', 'longtap', 'hold'].indexOf(event) && (target.disabled || target.classList.contains($.className('disabled')))) {
break;
}
var matches = {};
$.each(callbackObjs, function(selector, callbacks) { //same selector
selectorAlls[selector] || (selectorAlls[selector] = $.qsa(selector, element));
if (selectorAlls[selector] && ~(selectorAlls[selector]).indexOf(target)) {
if (!matches[selector]) {
matches[selector] = callbacks;
}
}
}, true);
if (!$.isEmptyObject(matches)) {
handlerQueue.push({
element: target,
handlers: matches
});
}
}
selectorAlls = null;
e = compatible(e); //compatible event
$.each(handlerQueue, function(index, handler) {
target = handler.element;
var tagName = target.tagName;
if (event === 'tap' && (tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'SELECT')) {
e.preventDefault();
e.detail && e.detail.gesture && e.detail.gesture.preventDefault();
}
$.each(handler.handlers, function(index, handler) {
$.each(handler, function(index, callback) {
if (callback.call(target, e) === false) {
e.preventDefault();
e.stopPropagation();
}
}, true);
}, true)
if (e.isPropagationStopped()) {
return false;
}
}, true);
};
};
var findDelegateFn = function(element, event) {
var delegateCallbacks = delegateFns[mid(element)];
var result = [];
if (delegateCallbacks) {
result = [];
if (event) {
var filterFn = function(fn) {
return fn.type === event;
}
return delegateCallbacks.filter(filterFn);
} else {
result = delegateCallbacks;
}
}
return result;
};
var preventDefaultException = /^(INPUT|TEXTAREA|BUTTON|SELECT)$/;
/**
* mui delegate events
* @param {type} event
* @param {type} selector
* @param {type} callback
* @returns {undefined}
*/
$.fn.on = function(event, selector, callback) { //仅支持简单的事件委托,主要是tap事件使用，类似mouse,focus之类暂不封装支持
return this.each(function() {
var element = this;
mid(element);
mid(callback);
var isAddEventListener = false;
var delegateEvents = delegates[element._mid] || (delegates[element._mid] = {});
var delegateCallbackObjs = delegateEvents[event] || ((delegateEvents[event] = {}));
if ($.isEmptyObject(delegateCallbackObjs)) {
isAddEventListener = true;
}
var delegateCallbacks = delegateCallbackObjs[selector] || (delegateCallbackObjs[selector] = []);
delegateCallbacks.push(callback);
if (isAddEventListener) {
var delegateFnArray = delegateFns[mid(element)];
if (!delegateFnArray) {
delegateFnArray = [];
}
var delegateCallback = delegateFn(element, event, selector, callback);
delegateFnArray.push(delegateCallback);
delegateCallback.i = delegateFnArray.length - 1;
delegateCallback.type = event;
delegateFns[mid(element)] = delegateFnArray;
element.addEventListener(event, delegateCallback);
if (event === 'tap') { //TODO 需要找个更好的解决方案
element.addEventListener('click', function(e) {
if (e.target) {
var tagName = e.target.tagName;
if (!preventDefaultException.test(tagName)) {
if (tagName === 'A') {
var href = e.target.href;
if (!(href && ~href.indexOf('tel:'))) {
e.preventDefault();
}
} else {
e.preventDefault();
}
}
}
});
}
}
});
};
$.fn.off = function(event, selector, callback) {
return this.each(function() {
var _mid = mid(this);
if (!event) { //mui(selector).off();
delegates[_mid] && delete delegates[_mid];
} else if (!selector) { //mui(selector).off(event);
delegates[_mid] && delete delegates[_mid][event];
} else if (!callback) { //mui(selector).off(event,selector);
delegates[_mid] && delegates[_mid][event] && delete delegates[_mid][event][selector];
} else { //mui(selector).off(event,selector,callback);
var delegateCallbacks = delegates[_mid] && delegates[_mid][event] && delegates[_mid][event][selector];
$.each(delegateCallbacks, function(index, delegateCallback) {
if (mid(delegateCallback) === mid(callback)) {
delegateCallbacks.splice(index, 1);
return false;
}
}, true);
}
if (delegates[_mid]) {
//如果off掉了所有当前element的指定的event事件，则remove掉当前element的delegate回调
if ((!delegates[_mid][event] || $.isEmptyObject(delegates[_mid][event]))) {
findDelegateFn(this, event).forEach(function(fn) {
this.removeEventListener(fn.type, fn);
delete delegateFns[_mid][fn.i];
}.bind(this));
}
} else {
//如果delegates[_mid]已不存在，删除所有
findDelegateFn(this).forEach(function(fn) {
this.removeEventListener(fn.type, fn);
delete delegateFns[_mid][fn.i];
}.bind(this));
}
});
};
})(mui);
================================================
FILE: js/mui.fixed.animation.js
================================================
/**
* mui fixed requestAnimationFrame
* @param {type} window
* @returns {undefined}
*/
(function(window) {
if (!window.requestAnimationFrame) {
var lastTime = 0;
window.requestAnimationFrame = window.webkitRequestAnimationFrame || function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
window.cancelAnimationFrame = window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame || function(id) {
clearTimeout(id);
};
};
}(window));
================================================
FILE: js/mui.fixed.bind.js
================================================
/*
A shim for non ES5 supporting browsers.
Adds function bind to Function prototype, so that you can do partial application.
Works even with the nasty thing, where the first word is the opposite of extranet, the second one is the profession of Columbus, and the version number is 9, flipped 180 degrees.
*/
Function.prototype.bind = Function.prototype.bind || function(to) {
// Make an array of our arguments, starting from second argument
var partial = Array.prototype.splice.call(arguments, 1),
// We'll need the original function.
fn = this;
var bound = function() {
// Join the already applied arguments to the now called ones (after converting to an array again).
var args = partial.concat(Array.prototype.splice.call(arguments, 0));
// If not being called as a constructor
if (!(this instanceof bound)) {
// return the result of the function called bound to target and partially applied.
return fn.apply(to, args);
}
// If being called as a constructor, apply the function bound to self.
fn.apply(this, args);
}
// Attach the prototype of the function to our newly created function.
bound.prototype = fn.prototype;
return bound;
};
================================================
FILE: js/mui.fixed.classlist.js
================================================
/**
* mui fixed classList
* @param {type} document
* @returns {undefined}
*/
(function(document) {
if (!("classList" in document.documentElement) && Object.defineProperty && typeof HTMLElement !== 'undefined') {
Object.defineProperty(HTMLElement.prototype, 'classList', {
get: function() {
var self = this;
function update(fn) {
return function(value) {
var classes = self.className.split(/\s+/),
index = classes.indexOf(value);
fn(classes, index, value);
self.className = classes.join(" ");
};
}
var ret = {
add: update(function(classes, index, value) {
~index || classes.push(value);
}),
remove: update(function(classes, index) {
~index && classes.splice(index, 1);
}),
toggle: update(function(classes, index, value) {
~index ? classes.splice(index, 1) : classes.push(value);
}),
contains: function(value) {
return !!~self.className.split(/\s+/).indexOf(value);
},
item: function(i) {
return self.className.split(/\s+/)[i] || null;
}
};
Object.defineProperty(ret, 'length', {
get: function() {
return self.className.split(/\s+/).length;
}
});
return ret;
}
});
}
})(document);
================================================
FILE: js/mui.fixed.fastclick.js
================================================
/**
* fastclick(only for radio,checkbox)
*/
(function($, window, name) {
if (!$.os.android && !$.os.ios) { //目前仅识别android和ios
return;
}
if (window.FastClick) {
return;
}
var handle = function(event, target) {
if (target.tagName === 'LABEL') {
if (target.parentNode) {
target = target.parentNode.querySelector('input');
}
}
if (target && (target.type === 'radio' || target.type === 'checkbox')) {
if (!target.disabled) { //disabled
return target;
}
}
return false;
};
$.registerTarget({
name: name,
index: 40,
handle: handle,
target: false
});
var dispatchEvent = function(event) {
var targetElement = $.targets.click;
if (targetElement) {
var clickEvent, touch;
// On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect
if (document.activeElement && document.activeElement !== targetElement) {
document.activeElement.blur();
}
touch = event.detail.gesture.changedTouches[0];
// Synthesise a click event, with an extra attribute so it can be tracked
clickEvent = document.createEvent('MouseEvents');
clickEvent.initMouseEvent('click', true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
clickEvent.forwardedTouchEvent = true;
targetElement.dispatchEvent(clickEvent);
event.detail && event.detail.gesture.preventDefault();
}
};
window.addEventListener('tap', dispatchEvent);
window.addEventListener('doubletap', dispatchEvent);
//捕获
window.addEventListener('click', function(event) {
if ($.targets.click) {
if (!event.forwardedTouchEvent) { //stop click
if (event.stopImmediatePropagation) {
event.stopImmediatePropagation();
} else {
// Part of the hack for browsers that don't support Event#stopImmediatePropagation
event.propagationStopped = true;
}
event.stopPropagation();
event.preventDefault();
return false;
}
}
}, true);
})(mui, window, 'click');
================================================
FILE: js/mui.fixed.js
================================================
/**
* fixed trim
* @param {type} undefined
* @returns {undefined}
*/
(function(undefined) {
if (String.prototype.trim === undefined) { // fix for iOS 3.2
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
};
}
Object.setPrototypeOf = Object.setPrototypeOf || function(obj, proto) {
obj['__proto__'] = proto;
return obj;
};
})();
/**
* fixed CustomEvent
*/
(function() {
if (typeof window.CustomEvent === 'undefined') {
function CustomEvent(event, params) {
params = params || {
bubbles: false,
cancelable: false,
detail: undefined
};
var evt = document.createEvent('Events');
var bubbles = true;
for (var name in params) {
(name === 'bubbles') ? (bubbles = !!params[name]) : (evt[name] = params[name]);
}
evt.initEvent(event, bubbles, true);
return evt;
};
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
}
})();
================================================
FILE: js/mui.fixed.keyboard.js
================================================
(function($, document) {
$(function() {
if (!$.os.ios) {
return;
}
var CLASS_FOCUSIN = $.className('focusin');
var CLASS_BAR_TAB = $.className('bar-tab');
var CLASS_BAR_FOOTER = $.className('bar-footer');
var CLASS_BAR_FOOTER_SECONDARY = $.className('bar-footer-secondary');
var CLASS_BAR_FOOTER_SECONDARY_TAB = $.className('bar-footer-secondary-tab');
// var content = document.querySelector('.' + CLASS_CONTENT);
// if (content) {
// document.body.insertBefore(content, document.body.firstElementChild);
// }
document.addEventListener('focusin', function(e) {
if ($.os.plus) { //在父webview里边不fix
if (window.plus) {
if (plus.webview.currentWebview().children().length > 0) {
return;
}
}
}
var target = e.target;
//TODO 需考虑所有键盘弹起的情况
if (target.tagName && (target.tagName === 'TEXTAREA' || (target.tagName === 'INPUT' && (target.type === 'text' || target.type === 'search' || target.type === 'number')))) {
if (target.disabled || target.readOnly) {
return;
}
document.body.classList.add(CLASS_FOCUSIN);
var isFooter = false;
for (; target && target !== document; target = target.parentNode) {
var classList = target.classList;
if (classList && classList.contains(CLASS_BAR_TAB) || classList.contains(CLASS_BAR_FOOTER) || classList.contains(CLASS_BAR_FOOTER_SECONDARY) || classList.contains(CLASS_BAR_FOOTER_SECONDARY_TAB)) {
isFooter = true;
break;
}
}
if (isFooter) {
var scrollTop = document.body.scrollHeight;
var scrollLeft = document.body.scrollLeft;
setTimeout(function() {
window.scrollTo(scrollLeft, scrollTop);
}, 20);
}
}
});
document.addEventListener('focusout', function(e) {
var classList = document.body.classList;
if (classList.contains(CLASS_FOCUSIN)) {
classList.remove(CLASS_FOCUSIN);
setTimeout(function() {
window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
}, 20);
}
});
});
})(mui, document);
================================================
FILE: js/mui.gestures.drag.js
================================================
/**
* mui gesture drag[start|left|right|up|down|end]
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var handle = function(event, touch) {
var session = $.gestures.session;
switch (event.type) {
case $.EVENT_START:
break;
case $.EVENT_MOVE:
if (!touch.direction || !session.target) {
return;
}
//修正direction,可在session期间自行锁定拖拽方向，方便开发scroll类不同方向拖拽插件嵌套
if (session.lockDirection && session.startDirection) {
if (session.startDirection && session.startDirection !== touch.direction) {
if (session.startDirection === 'up' || session.startDirection === 'down') {
touch.direction = touch.deltaY < 0 ? 'up' : 'down';
} else {
touch.direction = touch.deltaX < 0 ? 'left' : 'right';
}
}
}
if (!session.drag) {
session.drag = true;
$.trigger(session.target, name + 'start', touch);
}
$.trigger(session.target, name, touch);
$.trigger(session.target, name + touch.direction, touch);
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if (session.drag && touch.isFinal) {
$.trigger(session.target, name + 'end', touch);
}
break;
}
};
/**
* mui gesture drag
*/
$.addGesture({
name: name,
index: 20,
handle: handle,
options: {
fingers: 1
}
});
})(mui, 'drag');
================================================
FILE: js/mui.gestures.flick.js
================================================
/**
* mui gesture flick[left|right|up|down]
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var flickStartTime = 0;
var handle = function(event, touch) {
var session = $.gestures.session;
var options = this.options;
var now = $.now();
switch (event.type) {
case $.EVENT_MOVE:
if (now - flickStartTime > 300) {
flickStartTime = now;
session.flickStart = touch.center;
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
touch.flick = false;
if (session.flickStart && options.flickMaxTime > (now - flickStartTime) && touch.distance > options.flickMinDistince) {
touch.flick = true;
touch.flickTime = now - flickStartTime;
touch.flickDistanceX = touch.center.x - session.flickStart.x;
touch.flickDistanceY = touch.center.y - session.flickStart.y;
$.trigger(session.target, name, touch);
$.trigger(session.target, name + touch.direction, touch);
}
break;
}
};
/**
* mui gesture flick
*/
$.addGesture({
name: name,
index: 5,
handle: handle,
options: {
flickMaxTime: 200,
flickMinDistince: 10
}
});
})(mui, 'flick');
================================================
FILE: js/mui.gestures.hold.js
================================================
/**
* mui gesture hold
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var timer;
var handle = function(event, touch) {
var session = $.gestures.session;
var options = this.options;
switch (event.type) {
case $.EVENT_START:
if ($.options.gestureConfig.hold) {
timer && clearTimeout(timer);
timer = setTimeout(function() {
touch.hold = true;
$.trigger(session.target, name, touch);
}, options.holdTimeout);
}
break;
case $.EVENT_MOVE:
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if (timer) {
clearTimeout(timer) && (timer = null);
$.trigger(session.target, 'release', touch);
}
break;
}
};
/**
* mui gesture hold
*/
$.addGesture({
name: name,
index: 10,
handle: handle,
options: {
fingers: 1,
holdTimeout: 0
}
});
})(mui, 'hold');
================================================
FILE: js/mui.gestures.js
================================================
/**
* mui gestures
* @param {type} $
* @param {type} window
* @returns {undefined}
*/
(function($, window) {
$.gestures = {
session: {}
};
/**
* Gesture preventDefault
* @param {type} e
* @returns {undefined}
*/
$.preventDefault = function(e) {
e.preventDefault();
};
/**
* Gesture stopPropagation
* @param {type} e
* @returns {undefined}
*/
$.stopPropagation = function(e) {
e.stopPropagation();
};
/**
* register gesture
* @param {type} gesture
* @returns {$.gestures}
*/
$.addGesture = function(gesture) {
return $.addAction('gestures', gesture);
};
var round = Math.round;
var abs = Math.abs;
var sqrt = Math.sqrt;
var atan = Math.atan;
var atan2 = Math.atan2;
/**
* distance
* @param {type} p1
* @param {type} p2
* @returns {Number}
*/
var getDistance = function(p1, p2, props) {
if(!props) {
props = ['x', 'y'];
}
var x = p2[props[0]] - p1[props[0]];
var y = p2[props[1]] - p1[props[1]];
return sqrt((x * x) + (y * y));
};
/**
* scale
* @param {Object} starts
* @param {Object} moves
*/
var getScale = function(starts, moves) {
if(starts.length >= 2 && moves.length >= 2) {
var props = ['pageX', 'pageY'];
return getDistance(moves[1], moves[0], props) / getDistance(starts[1], starts[0], props);
}
return 1;
};
/**
* angle
* @param {type} p1
* @param {type} p2
* @returns {Number}
*/
var getAngle = function(p1, p2, props) {
if(!props) {
props = ['x', 'y'];
}
var x = p2[props[0]] - p1[props[0]];
var y = p2[props[1]] - p1[props[1]];
return atan2(y, x) * 180 / Math.PI;
};
/**
* direction
* @param {Object} x
* @param {Object} y
*/
var getDirection = function(x, y) {
if(x === y) {
return '';
}
if(abs(x) >= abs(y)) {
return x > 0 ? 'left' : 'right';
}
return y > 0 ? 'up' : 'down';
};
/**
* rotation
* @param {Object} start
* @param {Object} end
*/
var getRotation = function(start, end) {
var props = ['pageX', 'pageY'];
return getAngle(end[1], end[0], props) - getAngle(start[1], start[0], props);
};
/**
* px per ms
* @param {Object} deltaTime
* @param {Object} x
* @param {Object} y
*/
var getVelocity = function(deltaTime, x, y) {
return {
x: x / deltaTime || 0,
y: y / deltaTime || 0
};
};
/**
* detect gestures
* @param {type} event
* @param {type} touch
* @returns {undefined}
*/
var detect = function(event, touch) {
if($.gestures.stoped) {
return;
}
$.doAction('gestures', function(index, gesture) {
if(!$.gestures.stoped) {
if($.options.gestureConfig[gesture.name] !== false) {
gesture.handle(event, touch);
}
}
});
};
/**
* 暂时无用
* @param {Object} node
* @param {Object} parent
*/
var hasParent = function(node, parent) {
while(node) {
if(node == parent) {
return true;
}
node = node.parentNode;
}
return false;
};
var uniqueArray = function(src, key, sort) {
var results = [];
var values = [];
var i = 0;
while(i < src.length) {
var val = key ? src[i][key] : src[i];
if(values.indexOf(val) < 0) {
results.push(src[i]);
}
values[i] = val;
i++;
}
if(sort) {
if(!key) {
results = results.sort();
} else {
results = results.sort(function sortUniqueArray(a, b) {
return a[key] > b[key];
});
}
}
return results;
};
var getMultiCenter = function(touches) {
var touchesLength = touches.length;
if(touchesLength === 1) {
return {
x: round(touches[0].pageX),
y: round(touches[0].pageY)
};
}
var x = 0;
var y = 0;
var i = 0;
while(i < touchesLength) {
x += touches[i].pageX;
y += touches[i].pageY;
i++;
}
return {
x: round(x / touchesLength),
y: round(y / touchesLength)
};
};
var multiTouch = function() {
return $.options.gestureConfig.pinch;
};
var copySimpleTouchData = function(touch) {
var touches = [];
var i = 0;
while(i < touch.touches.length) {
touches[i] = {
pageX: round(touch.touches[i].pageX),
pageY: round(touch.touches[i].pageY)
};
i++;
}
return {
timestamp: $.now(),
gesture: touch.gesture,
touches: touches,
center: getMultiCenter(touch.touches),
deltaX: touch.deltaX,
deltaY: touch.deltaY
};
};
var calDelta = function(touch) {
var session = $.gestures.session;
var center = touch.center;
var offset = session.offsetDelta || {};
var prevDelta = session.prevDelta || {};
var prevTouch = session.prevTouch || {};
if(touch.gesture.type === $.EVENT_START || touch.gesture.type === $.EVENT_END) {
prevDelta = session.prevDelta = {
x: prevTouch.deltaX || 0,
y: prevTouch.deltaY || 0
};
offset = session.offsetDelta = {
x: center.x,
y: center.y
};
}
touch.deltaX = prevDelta.x + (center.x - offset.x);
touch.deltaY = prevDelta.y + (center.y - offset.y);
};
var calTouchData = function(touch) {
var session = $.gestures.session;
var touches = touch.touches;
var touchesLength = touches.length;
if(!session.firstTouch) {
session.firstTouch = copySimpleTouchData(touch);
}
if(multiTouch() && touchesLength > 1 && !session.firstMultiTouch) {
session.firstMultiTouch = copySimpleTouchData(touch);
} else if(touchesLength === 1) {
session.firstMultiTouch = false;
}
var firstTouch = session.firstTouch;
var firstMultiTouch = session.firstMultiTouch;
var offsetCenter = firstMultiTouch ? firstMultiTouch.center : firstTouch.center;
var center = touch.center = getMultiCenter(touches);
touch.timestamp = $.now();
touch.deltaTime = touch.timestamp - firstTouch.timestamp;
touch.angle = getAngle(offsetCenter, center);
touch.distance = getDistance(offsetCenter, center);
calDelta(touch);
touch.offsetDirection = getDirection(touch.deltaX, touch.deltaY);
touch.scale = firstMultiTouch ? getScale(firstMultiTouch.touches, touches) : 1;
touch.rotation = firstMultiTouch ? getRotation(firstMultiTouch.touches, touches) : 0;
calIntervalTouchData(touch);
};
var CAL_INTERVAL = 25;
var calIntervalTouchData = function(touch) {
var session = $.gestures.session;
var last = session.lastInterval || touch;
var deltaTime = touch.timestamp - last.timestamp;
var velocity;
var velocityX;
var velocityY;
var direction;
if(touch.gesture.type != $.EVENT_CANCEL && (deltaTime > CAL_INTERVAL || last.velocity === undefined)) {
var deltaX = last.deltaX - touch.deltaX;
var deltaY = last.deltaY - touch.deltaY;
var v = getVelocity(deltaTime, deltaX, deltaY);
velocityX = v.x;
velocityY = v.y;
velocity = (abs(v.x) > abs(v.y)) ? v.x : v.y;
direction = getDirection(deltaX, deltaY) || last.direction;
session.lastInterval = touch;
} else {
velocity = last.velocity;
velocityX = last.velocityX;
velocityY = last.velocityY;
direction = last.direction;
}
touch.velocity = velocity;
touch.velocityX = velocityX;
touch.velocityY = velocityY;
touch.direction = direction;
};
var targetIds = {};
var convertTouches = function(touches) {
for(var i = 0; i < touches.length; i++) {
!touches['identifier'] && (touches['identifier'] = 0);
}
return touches;
};
var getTouches = function(event, touch) {
var allTouches = convertTouches($.slice.call(event.touches || [event]));
var type = event.type;
var targetTouches = [];
var changedTargetTouches = [];
//当touchstart或touchmove且touches长度为1，直接获得all和changed
if((type === $.EVENT_START || type === $.EVENT_MOVE) && allTouches.length === 1) {
targetIds[allTouches[0].identifier] = true;
targetTouches = allTouches;
changedTargetTouches = allTouches;
touch.target = event.target;
} else {
var i = 0;
var targetTouches = [];
var changedTargetTouches = [];
var changedTouches = convertTouches($.slice.call(event.changedTouches || [event]));
touch.target = event.target;
var sessionTarget = $.gestures.session.target || event.target;
targetTouches = allTouches.filter(function(touch) {
return hasParent(touch.target, sessionTarget);
});
if(type === $.EVENT_START) {
i = 0;
while(i < targetTouches.length) {
targetIds[targetTouches[i].identifier] = true;
i++;
}
}
i = 0;
while(i < changedTouches.length) {
if(targetIds[changedTouches[i].identifier]) {
changedTargetTouches.push(changedTouches[i]);
}
if(type === $.EVENT_END || type === $.EVENT_CANCEL) {
delete targetIds[changedTouches[i].identifier];
}
i++;
}
if(!changedTargetTouches.length) {
return false;
}
}
targetTouches = uniqueArray(targetTouches.concat(changedTargetTouches), 'identifier', true);
var touchesLength = targetTouches.length;
var changedTouchesLength = changedTargetTouches.length;
if(type === $.EVENT_START && touchesLength - changedTouchesLength === 0) { //first
touch.isFirst = true;
$.gestures.touch = $.gestures.session = {
target: event.target
};
}
touch.isFinal = ((type === $.EVENT_END || type === $.EVENT_CANCEL) && (touchesLength - changedTouchesLength === 0));
touch.touches = targetTouches;
touch.changedTouches = changedTargetTouches;
return true;
};
var handleTouchEvent = function(event) {
var touch = {
gesture: event
};
var touches = getTouches(event, touch);
if(!touches) {
return;
}
calTouchData(touch);
detect(event, touch);
$.gestures.session.prevTouch = touch;
if(event.type === $.EVENT_END && !$.isTouchable) {
$.gestures.touch = $.gestures.session = {};
}
};
var supportsPassive = (function checkPassiveListener() {
var supportsPassive = false;
try {
var opts = Object.defineProperty({}, 'passive', {
get: function get() {
supportsPassive = true;
},
});
window.addEventListener('testPassiveListener', null, opts);
} catch(e) {
// No support
}
return supportsPassive;
}())
window.addEventListener($.EVENT_START, handleTouchEvent);
window.addEventListener($.EVENT_MOVE, handleTouchEvent, supportsPassive ? {
passive: false,
capture: false
} : false);
window.addEventListener($.EVENT_END, handleTouchEvent);
window.addEventListener($.EVENT_CANCEL, handleTouchEvent);
//fixed hashchange(android)
window.addEventListener($.EVENT_CLICK, function(e) {
//TODO 应该判断当前target是不是在targets.popover内部，而不是非要相等
if(($.os.android || $.os.ios) && (($.targets.popover && e.target === $.targets.popover) || ($.targets.tab) || $.targets.offcanvas || $.targets.modal)) {
e.preventDefault();
}
}, true);
//增加原生滚动识别
$.isScrolling = false;
var scrollingTimeout = null;
window.addEventListener('scroll', function() {
$.isScrolling = true;
scrollingTimeout && clearTimeout(scrollingTimeout);
scrollingTimeout = setTimeout(function() {
$.isScrolling = false;
}, 250);
});
})(mui, window);
================================================
FILE: js/mui.gestures.longtap.js
================================================
/**
* mui gesture longtap
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var timer;
var handle = function(event, touch) {
var session = $.gestures.session;
var options = this.options;
switch (event.type) {
case $.EVENT_START:
clearTimeout(timer);
timer = setTimeout(function() {
$.trigger(session.target, name, touch);
}, options.holdTimeout);
break;
case $.EVENT_MOVE:
if (touch.distance > options.holdThreshold) {
clearTimeout(timer);
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
clearTimeout(timer);
break;
}
};
/**
* mui gesture longtap
*/
$.addGesture({
name: name,
index: 10,
handle: handle,
options: {
fingers: 1,
holdTimeout: 500,
holdThreshold: 2
}
});
})(mui, 'longtap');
================================================
FILE: js/mui.gestures.pinch.js
================================================
/**
* mui gesture pinch
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var handle = function(event, touch) {
var options = this.options;
var session = $.gestures.session;
switch (event.type) {
case $.EVENT_START:
break;
case $.EVENT_MOVE:
if ($.options.gestureConfig.pinch) {
if (touch.touches.length < 2) {
return;
}
if (!session.pinch) { //start
session.pinch = true;
$.trigger(session.target, name + 'start', touch);
}
$.trigger(session.target, name, touch);
var scale = touch.scale;
var rotation = touch.rotation;
var lastScale = typeof touch.lastScale === 'undefined' ? 1 : touch.lastScale;
var scaleDiff = 0.000000000001; //防止scale与lastScale相等，不触发事件的情况。
if (scale > lastScale) { //out
lastScale = scale - scaleDiff;
$.trigger(session.target, name + 'out', touch);
} //in
else if (scale < lastScale) {
lastScale = scale + scaleDiff;
$.trigger(session.target, name + 'in', touch);
}
if (Math.abs(rotation) > options.minRotationAngle) {
$.trigger(session.target, 'rotate', touch);
}
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
session.pinch = false;
$.trigger(session.target, name + 'end', touch);
}
break;
}
};
/**
* mui gesture pinch
*/
$.addGesture({
name: name,
index: 10,
handle: handle,
options: {
minRotationAngle: 0
}
});
})(mui, 'pinch');
================================================
FILE: js/mui.gestures.swipe.js
================================================
/**
* mui gesture swipe[left|right|up|down]
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var handle = function(event, touch) {
var session = $.gestures.session;
if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
var options = this.options;
touch.swipe = false;
//TODO 后续根据velocity计算
if (touch.direction && options.swipeMaxTime > touch.deltaTime && touch.distance > options.swipeMinDistince) {
touch.swipe = true;
$.trigger(session.target, name, touch);
$.trigger(session.target, name + touch.direction, touch);
}
}
};
/**
* mui gesture swipe
*/
$.addGesture({
name: name,
index: 10,
handle: handle,
options: {
swipeMaxTime: 300,
swipeMinDistince: 18
}
});
})(mui, 'swipe');
================================================
FILE: js/mui.gestures.tap.js
================================================
/**
* mui gesture tap and doubleTap
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var lastTarget;
var lastTapTime;
var handle = function(event, touch) {
var session = $.gestures.session;
var options = this.options;
switch (event.type) {
case $.EVENT_END:
if (!touch.isFinal) {
return;
}
var target = session.target;
if (!target || (target.disabled || (target.classList && target.classList.contains($.className('disabled'))))) {
return;
}
if (touch.distance < options.tapMaxDistance && touch.deltaTime < options.tapMaxTime) {
if ($.options.gestureConfig.doubletap && lastTarget && (lastTarget === target)) { //same target
if (lastTapTime && (touch.timestamp - lastTapTime) < options.tapMaxInterval) {
$.trigger(target, 'doubletap', touch);
lastTapTime = $.now();
lastTarget = target;
return;
}
}
$.trigger(target, name, touch);
lastTapTime = $.now();
lastTarget = target;
}
break;
}
};
/**
* mui gesture tap
*/
$.addGesture({
name: name,
index: 30,
handle: handle,
options: {
fingers: 1,
tapMaxInterval: 300,
tapMaxDistance: 5,
tapMaxTime: 250
}
});
})(mui, 'tap');
================================================
FILE: js/mui.init.5+.js
================================================
/**
* mui.init 5+
* @param {type} $
* @returns {undefined}
*/
(function($) {
var defaultOptions = {
swipeBack: false,
preloadPages: [], //5+ lazyLoad webview
preloadLimit: 10, //预加载窗口的数量限制(一旦超出，先进先出)
keyEventBind: {
backbutton: true,
menubutton: true
},
titleConfig: {
height: "44px",
backgroundColor: "#f7f7f7", //导航栏背景色
bottomBorderColor: "#cccccc", //底部边线颜色
title: { //标题配置
text: "", //标题文字
position: {
top: 0,
left: 0,
width: "100%",
height: "100%"
},
styles: {
color: "#000000",
align: "center",
family: "'Helvetica Neue',Helvetica,sans-serif",
size: "17px",
style: "normal",
weight: "normal",
fontSrc: ""
}
},
back: {
image: {
base64Data: '',
imgSrc: '',
sprite: {
top: '0px',
left: '0px',
width: '100%',
height: '100%'
},
position: {
top: "10px",
left: "10px",
width: "24px",
height: "24px"
}
}
}
}
};
//默认页面动画
var defaultShow = {
event:"titleUpdate",
autoShow: true,
duration: 300,
aniShow: 'slide-in-right',
extras:{}
};
//若执行了显示动画初始化操作，则要覆盖默认配置
if($.options.show) {
defaultShow = $.extend(true, defaultShow, $.options.show);
}
$.currentWebview = null;
$.extend(true, $.global, defaultOptions);
$.extend(true, $.options, defaultOptions);
/**
* 等待动画配置
* @param {type} options
* @returns {Object}
*/
$.waitingOptions = function(options) {
return $.extend(true, {}, {
autoShow: true,
title: '',
modal: false
}, options);
};
/**
* 窗口显示配置
* @param {type} options
* @returns {Object}
*/
$.showOptions = function(options) {
return $.extend(true, {}, defaultShow, options);
};
/**
* 窗口默认配置
* @param {type} options
* @returns {Object}
*/
$.windowOptions = function(options) {
return $.extend({
scalable: false,
bounce: "" //vertical
}, options);
};
/**
* plusReady
* @param {type} callback
* @returns {_L6.$}
*/
$.plusReady = function(callback) {
if(window.plus) {
setTimeout(function() { //解决callback与plusready事件的执行时机问题(典型案例:showWaiting,closeWaiting)
callback();
}, 0);
} else {
document.addEventListener("plusready", function() {
callback();
}, false);
}
return this;
};
/**
* 5+ event(5+没提供之前我自己实现)
* @param {type} webview
* @param {type} eventType
* @param {type} data
* @returns {undefined}
*/
$.fire = function(webview, eventType, data) {
if(webview) {
if(typeof data === 'undefined') {
data = '';
} else if(typeof data === 'boolean' || typeof data === 'number') {
webview.evalJS("typeof mui!=='undefined'&&mui.receive('" + eventType + "'," + data + ")");
return;
} else if($.isPlainObject(data) || $.isArray(data)) {
data = JSON.stringify(data || {}).replace(/\'/g, "\\u0027").replace(/\\/g, "\\u005c");
}
webview.evalJS("typeof mui!=='undefined'&&mui.receive('" + eventType + "','" + data + "')");
}
};
/**
* 5+ event(5+没提供之前我自己实现)
* @param {type} eventType
* @param {type} data
* @returns {undefined}
*/
$.receive = function(eventType, data) {
if(eventType) {
try {
if(data && typeof data === 'string') {
data = JSON.parse(data);
}
} catch(e) {}
$.trigger(document, eventType, data);
}
};
var triggerPreload = function(webview) {
if(!webview.preloaded) { //保证仅触发一次
$.fire(webview, 'preload');
var list = webview.children();
for(var i = 0; i < list.length; i++) {
$.fire(list[i], 'preload');
}
webview.preloaded = true;
}
};
var trigger = function(webview, eventType, timeChecked) {
if(timeChecked) {
if(!webview[eventType + 'ed']) {
$.fire(webview, eventType);
var list = webview.children();
for(var i = 0; i < list.length; i++) {
$.fire(list[i], eventType);
}
webview[eventType + 'ed'] = true;
}
} else {
$.fire(webview, eventType);
var list = webview.children();
for(var i = 0; i < list.length; i++) {
$.fire(list[i], eventType);
}
}
};
/**
* 打开新窗口
* @param {string} url 要打开的页面地址
* @param {string} id 指定页面ID
* @param {object} options 可选:参数,等待,窗口,显示配置{params:{},waiting:{},styles:{},show:{}}
*/
$.openWindow = function(url, id, options) {
if(typeof url === 'object') {
options = url;
url = options.url;
id = options.id || url;
} else {
if(typeof id === 'object') {
options = id;
id = options.id || url;
} else {
id = id || url;
}
}
if(!$.os.plus) {
//TODO 先临时这么处理：手机上顶层跳，PC上parent跳
if($.os.ios || $.os.android) {
window.top.location.href = url;
} else {
window.parent.location.href = url;
}
return;
}
if(!window.plus) {
return;
}
options = options || {};
var params = options.params || {};
var webview = null,
webviewCache = null,
nShow, nWaiting;
if($.webviews[id]) {
webviewCache = $.webviews[id];
//webview真实存在，才能获取
if(plus.webview.getWebviewById(id)) {
webview = webviewCache.webview;
}
} else if(options.createNew !== true) {
webview = plus.webview.getWebviewById(id);
}
if(webview) { //已缓存
//每次show都需要传递动画参数；
//预加载的动画参数优先级：openWindow配置>preloadPages配置>mui默认配置；
nShow = webviewCache ? webviewCache.show : defaultShow;
nShow = options.show ? $.extend(nShow, options.show) : nShow;
nShow.autoShow && webview.show(nShow.aniShow, nShow.duration, function() {
triggerPreload(webview);
trigger(webview, 'pagebeforeshow', false);
});
if(webviewCache) {
webviewCache.afterShowMethodName && webview.evalJS(webviewCache.afterShowMethodName + '(\'' + JSON.stringify(params) + '\')');
}
return webview;
} else { //新窗口
if(!url) {
throw new Error('webview[' + id + '] does not exist');
}
//显示waiting
var waitingConfig = $.waitingOptions(options.waiting);
if(waitingConfig.autoShow) {
nWaiting = plus.nativeUI.showWaiting(waitingConfig.title, waitingConfig.options);
}
//创建页面
options = $.extend(options, {
id: id,
url: url
});
webview = $.createWindow(options);
//显示
nShow = $.showOptions(options.show);
if(nShow.autoShow) {
var showWebview = function() {
//关闭等待框
if(nWaiting) {
nWaiting.close();
}
//显示页面
webview.show(nShow.aniShow, nShow.duration, function() {},nShow.extras);
options.afterShowMethodName && webview.evalJS(options.afterShowMethodName + '(\'' + JSON.stringify(params) + '\')');
};
//titleUpdate触发时机早于loaded，更换为titleUpdate后，可以更早的显示webview
webview.addEventListener(nShow.event, showWebview, false);
//loaded事件发生后，触发预加载和pagebeforeshow事件
webview.addEventListener("loaded", function() {
triggerPreload(webview);
trigger(webview, 'pagebeforeshow', false);
}, false);
}
}
return webview;
};
$.openWindowWithTitle = function(options, titleConfig) {
options = options || {};
var url = options.url;
var id = options.id || url;
if(!$.os.plus) {
//TODO 先临时这么处理：手机上顶层跳，PC上parent跳
if($.os.ios || $.os.android) {
window.top.location.href = url;
} else {
window.parent.location.href = url;
}
return;
}
if(!window.plus) {
return;
}
var params = options.params || {};
var webview = null,
webviewCache = null,
nShow, nWaiting;
if($.webviews[id]) {
webviewCache = $.webviews[id];
//webview真实存在，才能获取
if(plus.webview.getWebviewById(id)) {
webview = webviewCache.webview;
}
} else if(options.createNew !== true) {
webview = plus.webview.getWebviewById(id);
}
if(webview) { //已缓存
//每次show都需要传递动画参数；
//预加载的动画参数优先级：openWindow配置>preloadPages配置>mui默认配置；
nShow = webviewCache ? webviewCache.show : defaultShow;
nShow = options.show ? $.extend(nShow, options.show) : nShow;
nShow.autoShow && webview.show(nShow.aniShow, nShow.duration, function() {
triggerPreload(webview);
trigger(webview, 'pagebeforeshow', false);
});
if(webviewCache) {
webviewCache.afterShowMethodName && webview.evalJS(webviewCache.afterShowMethodName + '(\'' + JSON.stringify(params) + '\')');
}
return webview;
} else { //新窗口
if(!url) {
throw new Error('webview[' + id + '] does not exist');
}
//显示waiting
var waitingConfig = $.waitingOptions(options.waiting);
if(waitingConfig.autoShow) {
nWaiting = plus.nativeUI.showWaiting(waitingConfig.title, waitingConfig.options);
}
//创建页面
options = $.extend(options, {
id: id,
url: url
});
webview = $.createWindow(options);
if(titleConfig) { //处理原生头
$.extend(true, $.options.titleConfig, titleConfig);
var tid = $.options.titleConfig.id ? $.options.titleConfig.id : id + "_title";
var view = new plus.nativeObj.View(tid, {
top: 0,
height: $.options.titleConfig.height,
width: "100%",
dock: "top",
position: "dock"
});
view.drawRect($.options.titleConfig.backgroundColor); //绘制背景色
var _b = parseInt($.options.titleConfig.height) - 1;
view.drawRect($.options.titleConfig.bottomBorderColor, {
top: _b + "px",
left: "0px"
}); //绘制底部边线
//绘制文字
if($.options.titleConfig.title.text){
var _title = $.options.titleConfig.title;
view.drawText(_title.text,_title.position , _title.styles);
}
//返回图标绘制
var _back = $.options.titleConfig.back;
var backClick = null;
//优先字体
//其次是图片
var _backImage = _back.image;
if(_backImage.base64Data || _backImage.imgSrc) {
//TODO 此处需要处理百分比的情况
backClick = {
left:parseInt(_backImage.position.left),
right:parseInt(_backImage.position.left) + parseInt(_backImage.position.width)
};
var bitmap = new plus.nativeObj.Bitmap(id + "_back");
if(_backImage.base64Data) { //优先base64编码字符串
bitmap.loadBase64Data(_backImage.base64Data);
} else { //其次加载图片文件
bitmap.load(_backImage.imgSrc);
}
view.drawBitmap(bitmap,_backImage.sprite , _backImage.position);
}
//处理点击事件
view.setTouchEventRect({
top: "0px",
left: "0px",
width: "100%",
height: "100%"
});
view.interceptTouchEvent(true);
view.addEventListener("click", function(e) {
var x = e.clientX;
//返回按钮点击
if(backClick&& x > backClick.left && x < backClick.right){
if( _back.click && $.isFunction(_back.click)){
_back.click();
}else{
webview.evalJS("window.mui&&mui.back();");
}
}
}, false);
webview.append(view);
}
//显示
nShow = $.showOptions(options.show);
if(nShow.autoShow) {
//titleUpdate触发时机早于loaded，更换为titleUpdate后，可以更早的显示webview
webview.addEventListener(nShow.event, function () {
//关闭等待框
if(nWaiting) {
nWaiting.close();
}
//显示页面
webview.show(nShow.aniShow, nShow.duration, function() {},nShow.extras);
}, false);
}
}
return webview;
};
/**
* 根据配置信息创建一个webview
* @param {type} options
* @param {type} isCreate
* @returns {webview}
*/
$.createWindow = function(options, isCreate) {
if(!window.plus) {
return;
}
var id = options.id || options.url;
var webview;
if(options.preload) {
if($.webviews[id] && $.webviews[id].webview.getURL()) { //已经cache
webview = $.webviews[id].webview;
} else { //新增预加载窗口
//判断是否携带createNew参数，默认为false
if(options.createNew !== true) {
webview = plus.webview.getWebviewById(id);
}
//之前没有，那就新创建
if(!webview) {
webview = plus.webview.create(options.url, id, $.windowOptions(options.styles), $.extend({
preload: true
}, options.extras));
if(options.subpages) {
$.each(options.subpages, function(index, subpage) {
var subpageId = subpage.id || subpage.url;
if(subpageId) { //过滤空对象
var subWebview = plus.webview.getWebviewById(subpageId);
if(!subWebview) { //如果该webview不存在，则创建
subWebview = plus.webview.create(subpage.url, subpageId, $.windowOptions(subpage.styles), $.extend({
preload: true
}, subpage.extras));
}
webview.append(subWebview);
}
});
}
}
}
//TODO 理论上，子webview也应该计算到预加载队列中，但这样就麻烦了，要退必须退整体，否则可能出现问题；
$.webviews[id] = {
webview: webview, //目前仅preload的缓存webview
preload: true,
show: $.showOptions(options.show),
afterShowMethodName: options.afterShowMethodName //就不应该用evalJS。应该是通过事件消息通讯
};
//索引该预加载窗口
var preloads = $.data.preloads;
var index = preloads.indexOf(id);
if(~index) { //删除已存在的(变相调整插入位置)
preloads.splice(index, 1);
}
preloads.push(id);
if(preloads.length > $.options.preloadLimit) {
//先进先出
var first = $.data.preloads.shift();
var webviewCache = $.webviews[first];
if(webviewCache && webviewCache.webview) {
//需要将自己打开的所有页面，全部close；
//关闭该预加载webview
$.closeAll(webviewCache.webview);
}
//删除缓存
delete $.webviews[first];
}
} else {
if(isCreate !== false) { //直接创建非预加载窗口
webview = plus.webview.create(options.url, id, $.windowOptions(options.styles), options.extras);
if(options.subpages) {
$.each(options.subpages, function(index, subpage) {
var subpageId = subpage.id || subpage.url;
var subWebview = plus.webview.getWebviewById(subpageId);
if(!subWebview) {
subWebview = plus.webview.create(subpage.url, subpageId, $.windowOptions(subpage.styles), subpage.extras);
}
webview.append(subWebview);
});
}
}
}
return webview;
};
/**
* 预加载
*/
$.preload = function(options) {
//调用预加载函数，不管是否传递preload参数，强制变为true
if(!options.preload) {
options.preload = true;
}
return $.createWindow(options);
};
/**
*关闭当前webview打开的所有webview；
*/
$.closeOpened = function(webview) {
var opened = webview.opened();
if(opened) {
for(var i = 0, len = opened.length; i < len; i++) {
var openedWebview = opened[i];
var open_open = openedWebview.opened();
if(open_open && open_open.length > 0) {
//关闭打开的webview
$.closeOpened(openedWebview);
//关闭自己
openedWebview.close("none");
} else {
//如果直接孩子节点，就不用关闭了，因为父关闭的时候，会自动关闭子；
if(openedWebview.parent() !== webview) {
openedWebview.close('none');
}
}
}
}
};
$.closeAll = function(webview, aniShow) {
$.closeOpened(webview);
if(aniShow) {
webview.close(aniShow);
} else {
webview.close();
}
};
/**
* 批量创建webview
* @param {type} options
* @returns {undefined}
*/
$.createWindows = function(options) {
$.each(options, function(index, option) {
//初始化预加载窗口(创建)和非预加载窗口(仅配置，不创建)
$.createWindow(option, false);
});
};
/**
* 创建当前页面的子webview
* @param {type} options
* @returns {webview}
*/
$.appendWebview = function(options) {
if(!window.plus) {
return;
}
var id = options.id || options.url;
var webview;
if(!$.webviews[id]) { //保证执行一遍
//TODO 这里也有隐患，比如某个webview不是作为subpage创建的，而是作为target webview的话；
if(!plus.webview.getWebviewById(id)) {
webview = plus.webview.create(options.url, id, options.styles, options.extras);
}
//之前的实现方案：子窗口loaded之后再append到父窗口中；
//问题：部分子窗口loaded事件发生较晚，此时执行父窗口的children方法会返回空，导致父子通讯失败；
// 比如父页面执行完preload事件后，需触发子页面的preload事件，此时未append的话，就无法触发；
//修改方式：不再监控loaded事件，直接append
//by chb@20150521
// webview.addEventListener('loaded', function() {
plus.webview.currentWebview().append(webview);
// });
$.webviews[id] = options;
}
return webview;
};
//全局webviews
$.webviews = {};
//预加载窗口索引
$.data.preloads = [];
//$.currentWebview
$.plusReady(function() {
$.currentWebview = plus.webview.currentWebview();
});
$.addInit({
name: '5+',
index: 100,
handle: function() {
var options = $.options;
var subpages = options.subpages || [];
if($.os.plus) {
$.plusReady(function() {
//TODO 这里需要判断一下，最好等子窗口加载完毕后，再调用主窗口的show方法；
//或者：在openwindow方法中，监听实现；
$.each(subpages, function(index, subpage) {
$.appendWebview(subpage);
});
//判断是否首页
if(plus.webview.currentWebview() === plus.webview.getWebviewById(plus.runtime.appid)) {
//首页需要自己激活预加载；
//timeout因为子页面loaded之后才append的，防止子页面尚未append、从而导致其preload未触发的问题；
setTimeout(function() {
triggerPreload(plus.webview.currentWebview());
}, 300);
}
//设置ios顶部状态栏颜色；
if($.os.ios && $.options.statusBarBackground) {
plus.navigator.setStatusBarBackground($.options.statusBarBackground);
}
if($.os.android && parseFloat($.os.version) < 4.4) {
//解决Android平台4.4版本以下，resume后，父窗体标题延迟渲染的问题；
if(plus.webview.currentWebview().parent() == null) {
document.addEventListener("resume", function() {
var body = document.body;
body.style.display = 'none';
setTimeout(function() {
body.style.display = '';
}, 10);
});
}
}
});
} else {
//已支持iframe嵌入
// if (subpages.length > 0) {
// var err = document.createElement('div');
// err.className = 'mui-error';
// //文字描述
// var span = document.createElement('span');
// span.innerHTML = '在该浏览器下，不支持创建子页面，具体参考';
// err.appendChild(span);
// var a = document.createElement('a');
// a.innerHTML = '"mui框架适用场景"';
// a.href = 'http://ask.dcloud.net.cn/article/113';
// err.appendChild(a);
// document.body.appendChild(err);
// console.log('在该浏览器下，不支持创建子页面');
// }
}
}
});
window.addEventListener('preload', function() {
//处理预加载部分
var webviews = $.options.preloadPages || [];
$.plusReady(function() {
$.each(webviews, function(index, webview) {
$.createWindow($.extend(webview, {
preload: true
}));
});
});
});
$.supportStatusbarOffset = function() {
return $.os.plus && $.os.ios && parseFloat($.os.version) >= 7;
};
$.ready(function() {
//标识当前环境支持statusbar
if($.supportStatusbarOffset()) {
document.body.classList.add($.className('statusbar'));
}
});
})(mui);
================================================
FILE: js/mui.init.js
================================================
/**
* mui.init
* @param {type} $
* @returns {undefined}
*/
(function($) {
$.global = $.options = {
gestureConfig: {
tap: true,
doubletap: false,
longtap: false,
hold: false,
flick: true,
swipe: true,
drag: true,
pinch: false
}
};
/**
*
* @param {type} options
* @returns {undefined}
*/
$.initGlobal = function(options) {
$.options = $.extend(true, $.global, options);
return this;
};
var inits = {};
/**
* 单页配置 初始化
* @param {object} options
*/
$.init = function(options) {
$.options = $.extend(true, $.global, options || {});
$.ready(function() {
$.doAction('inits', function(index, init) {
var isInit = !!(!inits[init.name] || init.repeat);
if (isInit) {
init.handle.call($);
inits[init.name] = true;
}
});
});
return this;
};
/**
* 增加初始化执行流程
* @param {function} init
*/
$.addInit = function(init) {
return $.addAction('inits', init);
};
/**
* 处理html5版本subpages
*/
$.addInit({
name: 'iframe',
index: 100,
handle: function() {
var options = $.options;
var subpages = options.subpages || [];
if (!$.os.plus && subpages.length) {
//暂时只处理单个subpage。后续可以考虑支持多个subpage
createIframe(subpages[0]);
}
}
});
var createIframe = function(options) {
var wrapper = document.createElement('div');
wrapper.className = $.className('iframe-wrapper');
var styles = options.styles || {};
if (typeof styles.top !== 'string') {
styles.top = '0px';
}
if (typeof styles.bottom !== 'string') {
styles.bottom = '0px';
}
wrapper.style.top = styles.top;
wrapper.style.bottom = styles.bottom;
var iframe = document.createElement('iframe');
iframe.src = options.url;
iframe.id = options.id || options.url;
iframe.name = iframe.id;
wrapper.appendChild(iframe);
document.body.appendChild(wrapper);
//目前仅处理微信
$.os.wechat && handleScroll(wrapper, iframe);
};
function handleScroll(wrapper, iframe) {
var key = 'MUI_SCROLL_POSITION_' + document.location.href + '_' + iframe.src;
var scrollTop = (parseFloat(localStorage.getItem(key)) || 0);
if (scrollTop) {
(function(y) {
iframe.onload = function() {
window.scrollTo(0, y);
};
})(scrollTop);
}
setInterval(function() {
var _scrollTop = window.scrollY;
if (scrollTop !== _scrollTop) {
localStorage.setItem(key, _scrollTop + '');
scrollTop = _scrollTop;
}
}, 100);
};
$(function() {
var classList = document.body.classList;
var os = [];
if ($.os.ios) {
os.push({
os: 'ios',
version: $.os.version
});
classList.add($.className('ios'));
} else if ($.os.android) {
os.push({
os: 'android',
version: $.os.version
});
classList.add($.className('android'));
}
if ($.os.wechat) {
os.push({
os: 'wechat',
version: $.os.wechat.version
});
classList.add($.className('wechat'));
}
if (os.length) {
$.each(os, function(index, osObj) {
var version = '';
var classArray = [];
if (osObj.version) {
$.each(osObj.version.split('.'), function(i, v) {
version = version + (version ? '-' : '') + v;
classList.add($.className(osObj.os + '-' + version));
});
}
});
}
});
})(mui);
================================================
FILE: js/mui.init.pullrefresh.js
================================================
/**
* mui.init pulldownRefresh
* @param {type} $
* @returns {undefined}
*/
(function($) {
$.addInit({
name: 'pullrefresh',
index: 1000,
handle: function() {
var options = $.options;
var pullRefreshOptions = options.pullRefresh || {};
var hasPulldown = pullRefreshOptions.down && pullRefreshOptions.down.hasOwnProperty('callback');
var hasPullup = pullRefreshOptions.up && pullRefreshOptions.up.hasOwnProperty('callback');
if(hasPulldown || hasPullup) {
var container = pullRefreshOptions.container;
if(container) {
var $container = $(container);
if($container.length === 1) {
if($.os.plus) { //5+环境
if(hasPulldown && pullRefreshOptions.down.style == "circle") { //原生转圈
$.plusReady(function() {
//这里改写$.fn.pullRefresh
$.fn.pullRefresh = $.fn.pullRefresh_native;
$container.pullRefresh(pullRefreshOptions);
});
} else if($.os.android) { //非原生转圈，但是Android环境
$.plusReady(function() {
//这里改写$.fn.pullRefresh
$.fn.pullRefresh = $.fn.pullRefresh_native
var webview = plus.webview.currentWebview();
if(window.__NWin_Enable__ === false) { //不支持多webview
$container.pullRefresh(pullRefreshOptions);
} else {
if(hasPullup) {
//当前页面初始化pullup
var upOptions = {};
upOptions.up = pullRefreshOptions.up;
upOptions.webviewId = webview.id || webview.getURL();
$container.pullRefresh(upOptions);
}
if(hasPulldown) {
var parent = webview.parent();
var id = webview.id || webview.getURL();
if(parent) {
if(!hasPullup) { //如果没有上拉加载，需要手动初始化一个默认的pullRefresh，以便当前页面容器可以调用endPulldownToRefresh等方法
$container.pullRefresh({
webviewId: id
});
}
var downOptions = {
webviewId: id//子页面id
};
downOptions.down = $.extend({}, pullRefreshOptions.down);
downOptions.down.callback = '_CALLBACK';
//改写父页面的$.fn.pullRefresh
parent.evalJS("mui.fn.pullRefresh=mui.fn.pullRefresh_native");
//父页面初始化pulldown
parent.evalJS("mui&&mui(document.querySelector('.mui-content')).pullRefresh('" + JSON.stringify(downOptions) + "')");
}
}
}
});
} else { //非原生转圈，iOS环境
$container.pullRefresh(pullRefreshOptions);
}
} else {
$container.pullRefresh(pullRefreshOptions);
}
}
}
}
}
});
})(mui);
================================================
FILE: js/mui.js
================================================
/**
* MUI核心JS
* @type _L4.$|Function
*/
var mui = (function(document, undefined) {
var readyRE = /complete|loaded|interactive/;
var idSelectorRE = /^#([\w-]+)$/;
var classSelectorRE = /^\.([\w-]+)$/;
var tagSelectorRE = /^[\w-]+$/;
var translateRE = /translate(?:3d)?\((.+?)\)/;
var translateMatrixRE = /matrix(3d)?\((.+?)\)/;
var $ = function(selector, context) {
context = context || document;
if (!selector)
return wrap();
if (typeof selector === 'object')
if ($.isArrayLike(selector)) {
return wrap($.slice.call(selector), null);
} else {
return wrap([selector], null);
}
if (typeof selector === 'function')
return $.ready(selector);
if (typeof selector === 'string') {
try {
selector = selector.trim();
if (idSelectorRE.test(selector)) {
var found = document.getElementById(RegExp.$1);
return wrap(found ? [found] : []);
}
return wrap($.qsa(selector, context), selector);
} catch (e) {}
}
return wrap();
};
var wrap = function(dom, selector) {
dom = dom || [];
Object.setPrototypeOf(dom, $.fn);
dom.selector = selector || '';
return dom;
};
$.uuid = 0;
$.data = {};
/**
* extend(simple)
* @param {type} target
* @param {type} source
* @param {type} deep
* @returns {unresolved}
*/
$.extend = function() { //from jquery2
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;
if (typeof target === "boolean") {
deep = target;
target = arguments[i] || {};
i++;
}
if (typeof target !== "object" && !$.isFunction(target)) {
target = {};
}
if (i === length) {
target = this;
i--;
}
for (; i < length; i++) {
if ((options = arguments[i]) != null) {
for (name in options) {
src = target[name];
copy = options[name];
if (target === copy) {
continue;
}
if (deep && copy && ($.isPlainObject(copy) || (copyIsArray = $.isArray(copy)))) {
if (copyIsArray) {
copyIsArray = false;
clone = src && $.isArray(src) ? src : [];
} else {
clone = src && $.isPlainObject(src) ? src : {};
}
target[name] = $.extend(deep, clone, copy);
} else if (copy !== undefined) {
target[name] = copy;
}
}
}
}
return target;
};
/**
* mui noop(function)
*/
$.noop = function() {};
/**
* mui slice(array)
*/
$.slice = [].slice;
/**
* mui filter(array)
*/
$.filter = [].filter;
$.type = function(obj) {
return obj == null ? String(obj) : class2type[{}.toString.call(obj)] || "object";
};
/**
* mui isArray
*/
$.isArray = Array.isArray ||
function(object) {
return object instanceof Array;
};
/**
* mui isArrayLike
* @param {Object} obj
*/
$.isArrayLike = function(obj) {
var length = !!obj && "length" in obj && obj.length;
var type = $.type(obj);
if (type === "function" || $.isWindow(obj)) {
return false;
}
return type === "array" || length === 0 ||
typeof length === "number" && length > 0 && (length - 1) in obj;
};
/**
* mui isWindow(需考虑obj为undefined的情况)
*/
$.isWindow = function(obj) {
return obj != null && obj === obj.window;
};
/**
* mui isObject
*/
$.isObject = function(obj) {
return $.type(obj) === "object";
};
/**
* mui isPlainObject
*/
$.isPlainObject = function(obj) {
return $.isObject(obj) && !$.isWindow(obj) && Object.getPrototypeOf(obj) === Object.prototype;
};
/**
* mui isEmptyObject
* @param {Object} o
*/
$.isEmptyObject = function(o) {
for (var p in o) {
if (p !== undefined) {
return false;
}
}
return true;
};
/**
* mui isFunction
*/
$.isFunction = function(value) {
return $.type(value) === "function";
};
/**
* mui querySelectorAll
* @param {type} selector
* @param {type} context
* @returns {Array}
*/
$.qsa = function(selector, context) {
context = context || document;
return $.slice.call(classSelectorRE.test(selector) ? context.getElementsByClassName(RegExp.$1) : tagSelectorRE.test(selector) ? context.getElementsByTagName(selector) : context.querySelectorAll(selector));
};
/**
* ready(DOMContentLoaded)
* @param {type} callback
* @returns {_L6.$}
*/
$.ready = function(callback) {
if (readyRE.test(document.readyState)) {
callback($);
} else {
document.addEventListener('DOMContentLoaded', function() {
callback($);
}, false);
}
return this;
};
/**
* 将 fn 缓存一段时间后, 再被调用执行
* 此方法为了避免在 ms 段时间内, 执行 fn 多次. 常用于 resize , scroll , mousemove 等连续性事件中;
* 当 ms 设置为 -1, 表示立即执行 fn, 即和直接调用 fn 一样;
* 调用返回函数的 stop 停止最后一次的 buffer 效果
* @param {Object} fn
* @param {Object} ms
* @param {Object} context
*/
$.buffer = function(fn, ms, context) {
var timer;
var lastStart = 0;
var lastEnd = 0;
var ms = ms || 150;
function run() {
if (timer) {
timer.cancel();
timer = 0;
}
lastStart = $.now();
fn.apply(context || this, arguments);
lastEnd = $.now();
}
return $.extend(function() {
if (
(!lastStart) || // 从未运行过
(lastEnd >= lastStart && $.now() - lastEnd > ms) || // 上次运行成功后已经超过ms毫秒
(lastEnd < lastStart && $.now() - lastStart > ms * 8) // 上次运行或未完成，后8*ms毫秒
) {
run.apply(this, arguments);
} else {
if (timer) {
timer.cancel();
}
timer = $.later(run, ms, null, $.slice.call(arguments));
}
}, {
stop: function() {
if (timer) {
timer.cancel();
timer = 0;
}
}
});
};
/**
* each
* @param {type} elements
* @param {type} callback
* @returns {_L8.$}
*/
$.each = function(elements, callback, hasOwnProperty) {
if (!elements) {
return this;
}
if (typeof elements.length === 'number') {
[].every.call(elements, function(el, idx) {
return callback.call(el, idx, el) !== false;
});
} else {
for (var key in elements) {
if (hasOwnProperty) {
if (elements.hasOwnProperty(key)) {
if (callback.call(elements[key], key, elements[key]) === false) return elements;
}
} else {
if (callback.call(elements[key], key, elements[key]) === false) return elements;
}
}
}
return this;
};
$.focus = function(element) {
if ($.os.ios) {
setTimeout(function() {
element.focus();
}, 10);
} else {
element.focus();
}
};
/**
* trigger event
* @param {type} element
* @param {type} eventType
* @param {type} eventData
* @returns {_L8.$}
*/
$.trigger = function(element, eventType, eventData) {
element.dispatchEvent(new CustomEvent(eventType, {
detail: eventData,
bubbles: true,
cancelable: true
}));
return this;
};
/**
* getStyles
* @param {type} element
* @param {type} property
* @returns {styles}
*/
$.getStyles = function(element, property) {
var styles = element.ownerDocument.defaultView.getComputedStyle(element, null);
if (property) {
return styles.getPropertyValue(property) || styles[property];
}
return styles;
};
/**
* parseTranslate
* @param {type} translateString
* @param {type} position
* @returns {Object}
*/
$.parseTranslate = function(translateString, position) {
var result = translateString.match(translateRE || '');
if (!result || !result[1]) {
result = ['', '0,0,0'];
}
result = result[1].split(",");
result = {
x: parseFloat(result[0]),
y: parseFloat(result[1]),
z: parseFloat(result[2])
};
if (position && result.hasOwnProperty(position)) {
return result[position];
}
return result;
};
/**
* parseTranslateMatrix
* @param {type} translateString
* @param {type} position
* @returns {Object}
*/
$.parseTranslateMatrix = function(translateString, position) {
var matrix = translateString.match(translateMatrixRE);
var is3D = matrix && matrix[1];
if (matrix) {
matrix = matrix[2].split(",");
if (is3D === "3d")
matrix = matrix.slice(12, 15);
else {
matrix.push(0);
matrix = matrix.slice(4, 7);
}
} else {
matrix = [0, 0, 0];
}
var result = {
x: parseFloat(matrix[0]),
y: parseFloat(matrix[1]),
z: parseFloat(matrix[2])
};
if (position && result.hasOwnProperty(position)) {
return result[position];
}
return result;
};
$.hooks = {};
$.addAction = function(type, hook) {
var hooks = $.hooks[type];
if (!hooks) {
hooks = [];
}
hook.index = hook.index || 1000;
hooks.push(hook);
hooks.sort(function(a, b) {
return a.index - b.index;
});
$.hooks[type] = hooks;
return $.hooks[type];
};
$.doAction = function(type, callback) {
if ($.isFunction(callback)) { //指定了callback
$.each($.hooks[type], callback);
} else { //未指定callback，直接执行
$.each($.hooks[type], function(index, hook) {
return !hook.handle();
});
}
};
/**
* setTimeout封装
* @param {Object} fn
* @param {Object} when
* @param {Object} context
* @param {Object} data
*/
$.later = function(fn, when, context, data) {
when = when || 0;
var m = fn;
var d = data;
var f;
var r;
if (typeof fn === 'string') {
m = context[fn];
}
f = function() {
m.apply(context, $.isArray(d) ? d : [d]);
};
r = setTimeout(f, when);
return {
id: r,
cancel: function() {
clearTimeout(r);
}
};
};
$.now = Date.now || function() {
return +new Date();
};
var class2type = {};
$.each(['Boolean', 'Number', 'String', 'Function', 'Array', 'Date', 'RegExp', 'Object', 'Error'], function(i, name) {
class2type["[object " + name + "]"] = name.toLowerCase();
});
if (window.JSON) {
$.parseJSON = JSON.parse;
}
/**
* $.fn
*/
$.fn = {
each: function(callback) {
[].every.call(this, function(el, idx) {
return callback.call(el, idx, el) !== false;
});
return this;
}
};
/**
* 兼容 AMD 模块
**/
if (typeof define === 'function' && define.amd) {
define('mui', [], function() {
return $;
});
}
return $;
})(document);
//window.mui = mui;
//'$' in window || (window.$ = mui);
================================================
FILE: js/mui.jsonp.js
================================================
/**
* MUI JSONP
* varstion 1.0.0
* by Houfeng
* Houfeng@DCloud.io
*/
(function($, win, doc) {
var callbackIndex = 0;
//生成回调函数名
var createCallbackName = function() {
return 'mui_jsonp_callback_' + (callbackIndex++);
};
var container = doc.body;
//导入 script 元素
var importScript = function(url) {
var element = doc.createElement('script');
element.src = url;
element.async = true;
element.defer = true;
container.appendChild(element);
return element;
};
//转换 URL，JSONP 只支持 get 方式的 queryString ,需将 data 拼入 url
var convertUrl = function(url, data, jsonpParam, callbacnName) {
if (jsonpParam) {
url = url.replace(jsonpParam + '=?', jsonpParam + '=' + callbacnName);
} else {
data['callback'] = callbacnName;
}
var buffer = [];
for (var key in data) {
buffer.push(key + '=' + encodeURIComponent(data[key]));
}
return url + (url.indexOf('?') > -1 ? '&' : '?') + buffer.join('&');
};
//获取 QueryString
var getQueryString = function(url) {
url = url || location.search;
var splitIndex = url.indexOf('?');
var queryString = url.substr(splitIndex + 1);
var paramArray = queryString.split('&');
var result = {};
for (var i in paramArray) {
var params = paramArray[i].split('=');
result[params[0]] = params[1];
}
return result;
}
//获取将传递给服务器的回调函数的请求参数名
var getJSONPParam = function(url) {
var query = getQueryString(url);
for (var name in query) {
if (query[name] === '?') {
return name;
}
}
return null;
};
/**
* @description JSONP 方法
* @param {String} url 将请求的地址
* @param {Object} data 请求参数数据
* @param {Function} callback 请求完成时回调函数
* @return {mui} mui 对象自身
**/
$.getJSONP = function(url, data, callback) {
if (!url) {
throw "mui.getJSONP URL error!";
}
var jsonpParam = getJSONPParam(url);
var callbackName = createCallbackName();
data = data || {};
callback = callback || $.noop;
url = convertUrl(url, data, jsonpParam, callbackName);
var scriptElement = null;
win[callbackName] = function(result) {
callback(result);
if (scriptElement) {
container.removeChild(scriptElement);
}
win[callbackName] = null;
delete win[callbackName];
};
scriptElement = importScript(url);
return $;
};
//为原 mui.getJSON 方法添加同 jQuery.getJSON 一样的 JSONP 支持
$.__getJSON = $.getJSON;
$.getJSON = function(url, data, callback) {
var isJSONP = getJSONPParam(url) != null;
if (isJSONP) {
return $.getJSONP(url, data, callback);
} else {
return $.__getJSON(url, data, callback);
}
};
}(mui, window, document));
================================================
FILE: js/mui.layout.js
================================================
/**
* mui layout(offset[,position,width,height...])
* @param {type} $
* @param {type} window
* @param {type} undefined
* @returns {undefined}
*/
(function($, window, undefined) {
$.offset = function(element) {
var box = {
top : 0,
left : 0
};
if ( typeof element.getBoundingClientRect !== undefined) {
box = element.getBoundingClientRect();
}
return {
top : box.top + window.pageYOffset - element.clientTop,
left : box.left + window.pageXOffset - element.clientLeft
};
};
})(mui, window);
================================================
FILE: js/mui.namespace.js
================================================
/**
* mui namespace(optimization)
* @param {type} $
* @returns {undefined}
*/
(function($) {
$.namespace = 'mui';
$.classNamePrefix = $.namespace + '-';
$.classSelectorPrefix = '.' + $.classNamePrefix;
/**
* 返回正确的className
* @param {type} className
* @returns {String}
*/
$.className = function(className) {
return $.classNamePrefix + className;
};
/**
* 返回正确的classSelector
* @param {type} classSelector
* @returns {String}
*/
$.classSelector = function(classSelector) {
return classSelector.replace(/\./g, $.classSelectorPrefix);
};
/**
* 返回正确的eventName
* @param {type} event
* @param {type} module
* @returns {String}
*/
$.eventName = function(event, module) {
return event + ($.namespace ? ('.' + $.namespace) : '') + ( module ? ('.' + module) : '');
};
})(mui);
================================================
FILE: js/mui.number.js
================================================
/**
* 数字输入框
* varstion 1.0.1
* by Houfeng
* Houfeng@DCloud.io
*/
(function($) {
var touchSupport = ('ontouchstart' in document);
var tapEventName = touchSupport ? 'tap' : 'click';
var changeEventName = 'change';
var holderClassName = $.className('numbox');
var plusClassSelector = $.classSelector('.btn-numbox-plus,.numbox-btn-plus');
var minusClassSelector = $.classSelector('.btn-numbox-minus,.numbox-btn-minus');
var inputClassSelector = $.classSelector('.input-numbox,.numbox-input');
var Numbox = $.Numbox = $.Class.extend({
/**
* 构造函数
**/
init: function(holder, options) {
var self = this;
if (!holder) {
throw "构造 numbox 时缺少容器元素";
}
self.holder = holder;
options = options || {};
options.step = parseInt(options.step || 1);
self.options = options;
self.input = $.qsa(inputClassSelector, self.holder)[0];
self.plus = $.qsa(plusClassSelector, self.holder)[0];
self.minus = $.qsa(minusClassSelector, self.holder)[0];
self.checkValue();
self.initEvent();
},
/**
* 初始化事件绑定
**/
initEvent: function() {
var self = this;
self.plus.addEventListener(tapEventName, function(event) {
var val = parseInt(self.input.value) + self.options.step;
self.input.value = val.toString();
$.trigger(self.input, changeEventName, null);
});
self.minus.addEventListener(tapEventName, function(event) {
var val = parseInt(self.input.value) - self.options.step;
self.input.value = val.toString();
$.trigger(self.input, changeEventName, null);
});
self.input.addEventListener(changeEventName, function(event) {
self.checkValue();
var val = parseInt(self.input.value);
//触发顶层容器
$.trigger(self.holder, changeEventName, {
value: val
});
});
},
/**
* 获取当前值
**/
getValue: function() {
var self = this;
return parseInt(self.input.value);
},
/**
* 验证当前值是法合法
**/
checkValue: function() {
var self = this;
var val = self.input.value;
if (val == null || val == '' || isNaN(val)) {
self.input.value = self.options.min || 0;
self.minus.disabled = self.options.min != null;
} else {
var val = parseInt(val);
if (self.options.max != null && !isNaN(self.options.max) && val >= parseInt(self.options.max)) {
val = self.options.max;
self.plus.disabled = true;
} else {
self.plus.disabled = false;
}
if (self.options.min != null && !isNaN(self.options.min) && val <= parseInt(self.options.min)) {
val = self.options.min;
self.minus.disabled = true;
} else {
self.minus.disabled = false;
}
self.input.value = val;
}
},
/**
* 更新选项
**/
setOption: function(name, value) {
var self = this;
self.options[name] = value;
},
/**
* 动态设置新值
**/
setValue: function(value) {
this.input.value = value;
this.checkValue();
}
});
$.fn.numbox = function(options) {
var instanceArray = [];
//遍历选择的元素
this.each(function(i, element) {
if (element.numbox) {
return;
}
if (options) {
element.numbox = new Numbox(element, options);
} else {
var optionsText = element.getAttribute('data-numbox-options');
var options = optionsText ? JSON.parse(optionsText) : {};
options.step = element.getAttribute('data-numbox-step') || options.step;
options.min = element.getAttribute('data-numbox-min') || options.min;
options.max = element.getAttribute('data-numbox-max') || options.max;
element.numbox = new Numbox(element, options);
}
});
return this[0] ? this[0].numbox : null;
}
//自动处理 class='mui-locker' 的 dom
$.ready(function() {
$('.' + holderClassName).numbox();
});
}(mui));
================================================
FILE: js/mui.offcanvas.js
================================================
/**
* off-canvas
* @param {type} $
* @param {type} window
* @param {type} document
* @param {type} action
* @returns {undefined}
*/
(function($, window, document, name) {
var CLASS_OFF_CANVAS_LEFT = $.className('off-canvas-left');
var CLASS_OFF_CANVAS_RIGHT = $.className('off-canvas-right');
var CLASS_ACTION_BACKDROP = $.className('off-canvas-backdrop');
var CLASS_OFF_CANVAS_WRAP = $.className('off-canvas-wrap');
var CLASS_SLIDE_IN = $.className('slide-in');
var CLASS_ACTIVE = $.className('active');
var CLASS_TRANSITIONING = $.className('transitioning');
var SELECTOR_INNER_WRAP = $.classSelector('.inner-wrap');
var OffCanvas = $.Class.extend({
init: function(element, options) {
this.wrapper = this.element = element;
this.scroller = this.wrapper.querySelector(SELECTOR_INNER_WRAP);
this.classList = this.wrapper.classList;
if (this.scroller) {
this.options = $.extend(true, {
dragThresholdX: 10,
scale: 0.8,
opacity: 0.1,
preventDefaultException: {
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/
},
}, options);
document.body.classList.add($.className('fullscreen')); //fullscreen
this.refresh();
this.initEvent();
}
},
_preventDefaultException: function(el, exceptions) {
for (var i in exceptions) {
if (exceptions[i].test(el[i])) {
return true;
}
}
return false;
},
refresh: function(offCanvas) {
// offCanvas && !offCanvas.classList.contains(CLASS_ACTIVE) && this.classList.remove(CLASS_ACTIVE);
this.slideIn = this.classList.contains(CLASS_SLIDE_IN);
this.scalable = this.classList.contains($.className('scalable')) && !this.slideIn;
this.scroller = this.wrapper.querySelector(SELECTOR_INNER_WRAP);
// !offCanvas && this.scroller.classList.remove(CLASS_TRANSITIONING);
// !offCanvas && this.scroller.setAttribute('style', '');
this.offCanvasLefts = this.wrapper.querySelectorAll('.' + CLASS_OFF_CANVAS_LEFT);
this.offCanvasRights = this.wrapper.querySelectorAll('.' + CLASS_OFF_CANVAS_RIGHT);
if (offCanvas) {
if (offCanvas.classList.contains(CLASS_OFF_CANVAS_LEFT)) {
this.offCanvasLeft = offCanvas;
} else if (offCanvas.classList.contains(CLASS_OFF_CANVAS_RIGHT)) {
this.offCanvasRight = offCanvas;
}
} else {
this.offCanvasRight = this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_RIGHT);
this.offCanvasLeft = this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_LEFT);
}
this.offCanvasRightWidth = this.offCanvasLeftWidth = 0;
this.offCanvasLeftSlideIn = this.offCanvasRightSlideIn = false;
if (this.offCanvasRight) {
this.offCanvasRightWidth = this.offCanvasRight.offsetWidth;
this.offCanvasRightSlideIn = this.slideIn && (this.offCanvasRight.parentNode === this.wrapper);
// this.offCanvasRight.classList.remove(CLASS_TRANSITIONING);
// this.offCanvasRight.classList.remove(CLASS_ACTIVE);
// this.offCanvasRight.setAttribute('style', '');
}
if (this.offCanvasLeft) {
this.offCanvasLeftWidth = this.offCanvasLeft.offsetWidth;
this.offCanvasLeftSlideIn = this.slideIn && (this.offCanvasLeft.parentNode === this.wrapper);
// this.offCanvasLeft.classList.remove(CLASS_TRANSITIONING);
// this.offCanvasLeft.classList.remove(CLASS_ACTIVE);
// this.offCanvasLeft.setAttribute('style', '');
}
this.backdrop = this.scroller.querySelector('.' + CLASS_ACTION_BACKDROP);
this.options.dragThresholdX = this.options.dragThresholdX || 10;
this.visible = false;
this.startX = null;
this.lastX = null;
this.offsetX = null;
this.lastTranslateX = null;
},
handleEvent: function(e) {
switch (e.type) {
case $.EVENT_START:
e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
break;
case 'webkitTransitionEnd': //有个bug需要处理，需要考虑假设没有触发webkitTransitionEnd的情况
if (e.target === this.scroller) {
this._dispatchEvent();
}
break;
case 'drag':
var detail = e.detail;
if (!this.startX) {
this.startX = detail.center.x;
this.lastX = this.startX;
} else {
this.lastX = detail.center.x;
}
if (!this.isDragging && Math.abs(this.lastX - this.startX) > this.options.dragThresholdX && (detail.direction === 'left' || (detail.direction === 'right'))) {
if (this.slideIn) {
this.scroller = this.wrapper.querySelector(SELECTOR_INNER_WRAP);
if (this.classList.contains(CLASS_ACTIVE)) {
if (this.offCanvasRight && this.offCanvasRight.classList.contains(CLASS_ACTIVE)) {
this.offCanvas = this.offCanvasRight;
this.offCanvasWidth = this.offCanvasRightWidth;
} else {
this.offCanvas = this.offCanvasLeft;
this.offCanvasWidth = this.offCanvasLeftWidth;
}
} else {
if (detail.direction === 'left' && this.offCanvasRight) {
this.offCanvas = this.offCanvasRight;
this.offCanvasWidth = this.offCanvasRightWidth;
} else if (detail.direction === 'right' && this.offCanvasLeft) {
this.offCanvas = this.offCanvasLeft;
this.offCanvasWidth = this.offCanvasLeftWidth;
} else {
this.scroller = null;
}
}
} else {
if (this.classList.contains(CLASS_ACTIVE)) {
if (detail.direction === 'left') {
this.offCanvas = this.offCanvasLeft;
this.offCanvasWidth = this.offCanvasLeftWidth;
} else {
this.offCanvas = this.offCanvasRight;
this.offCanvasWidth = this.offCanvasRightWidth;
}
} else {
if (detail.direction === 'right') {
this.offCanvas = this.offCanvasLeft;
this.offCanvasWidth = this.offCanvasLeftWidth;
} else {
this.offCanvas = this.offCanvasRight;
this.offCanvasWidth = this.offCanvasRightWidth;
}
}
}
if (this.offCanvas && this.scroller) {
this.startX = this.lastX;
this.isDragging = true;
$.gestures.session.lockDirection = true; //锁定方向
$.gestures.session.startDirection = detail.direction;
this.offCanvas.classList.remove(CLASS_TRANSITIONING);
this.scroller.classList.remove(CLASS_TRANSITIONING);
this.offsetX = this.getTranslateX();
this._initOffCanvasVisible();
}
}
if (this.isDragging) {
this.updateTranslate(this.offsetX + (this.lastX - this.startX));
detail.gesture.preventDefault();
e.stopPropagation();
}
break;
case 'dragend':
if (this.isDragging) {
var detail = e.detail;
var direction = detail.direction;
this.isDragging = false;
this.offCanvas.classList.add(CLASS_TRANSITIONING);
this.scroller.classList.add(CLASS_TRANSITIONING);
var ratio = 0;
var x = this.getTranslateX();
if (!this.slideIn) {
if (x >= 0) {
ratio = (this.offCanvasLeftWidth && (x / this.offCanvasLeftWidth)) || 0;
} else {
ratio = (this.offCanvasRightWidth && (x / this.offCanvasRightWidth)) || 0;
}
if (ratio === 0) {
this.openPercentage(0);
this._dispatchEvent(); //此处不触发webkitTransitionEnd,所以手动dispatch
return;
}
if (direction === 'right' && ratio >= 0 && (ratio >= 0.5 || detail.swipe)) { //右滑打开
this.openPercentage(100);
} else if (direction === 'right' && ratio < 0 && (ratio > -0.5 || detail.swipe)) { //右滑关闭
this.openPercentage(0);
} else if (direction === 'right' && ratio > 0 && ratio < 0.5) { //右滑还原关闭
this.openPercentage(0);
} else if (direction === 'right' && ratio < 0.5) { //右滑还原打开
this.openPercentage(-100);
} else if (direction === 'left' && ratio <= 0 && (ratio <= -0.5 || detail.swipe)) { //左滑打开
this.openPercentage(-100);
} else if (direction === 'left' && ratio > 0 && (ratio <= 0.5 || detail.swipe)) { //左滑关闭
this.openPercentage(0);
} else if (direction === 'left' && ratio < 0 && ratio >= -0.5) { //左滑还原关闭
this.openPercentage(0);
} else if (direction === 'left' && ratio > 0.5) { //左滑还原打开
this.openPercentage(100);
} else { //默认关闭
this.openPercentage(0);
}
if (ratio === 1 || ratio === -1) { //此处不触发webkitTransitionEnd,所以手动dispatch
this._dispatchEvent();
}
} else {
if (x >= 0) {
ratio = (this.offCanvasRightWidth && (x / this.offCanvasRightWidth)) || 0;
} else {
ratio = (this.offCanvasLeftWidth && (x / this.offCanvasLeftWidth)) || 0;
}
if (direction === 'right' && ratio <= 0 && (ratio >= -0.5 || detail.swipe)) { //右滑打开
this.openPercentage(100);
} else if (direction === 'right' && ratio > 0 && (ratio >= 0.5 || detail.swipe)) { //右滑关闭
this.openPercentage(0);
} else if (direction === 'right' && ratio <= -0.5) { //右滑还原关闭
this.openPercentage(0);
} else if (direction === 'right' && ratio > 0 && ratio <= 0.5) { //右滑还原打开
this.openPercentage(-100);
} else if (direction === 'left' && ratio >= 0 && (ratio <= 0.5 || detail.swipe)) { //左滑打开
this.openPercentage(-100);
} else if (direction === 'left' && ratio < 0 && (ratio <= -0.5 || detail.swipe)) { //左滑关闭
this.openPercentage(0);
} else if (direction === 'left' && ratio >= 0.5) { //左滑还原关闭
this.openPercentage(0);
} else if (direction === 'left' && ratio >= -0.5 && ratio < 0) { //左滑还原打开
this.openPercentage(100);
} else {
this.openPercentage(0);
}
if (ratio === 1 || ratio === -1 || ratio === 0) {
this._dispatchEvent();
return;
}
}
}
break;
}
},
_dispatchEvent: function() {
if (this.classList.contains(CLASS_ACTIVE)) {
$.trigger(this.wrapper, 'shown', this);
} else {
$.trigger(this.wrapper, 'hidden', this);
}
},
_initOffCanvasVisible: function() {
if (!this.visible) {
this.visible = true;
if (this.offCanvasLeft) {
this.offCanvasLeft.style.visibility = 'visible';
}
if (this.offCanvasRight) {
this.offCanvasRight.style.visibility = 'visible';
}
}
},
initEvent: function() {
var self = this;
if (self.backdrop) {
self.backdrop.addEventListener('tap', function(e) {
self.close();
e.detail.gesture.preventDefault();
});
}
if (this.classList.contains($.className('draggable'))) {
this.wrapper.addEventListener($.EVENT_START, this); //临时处理
this.wrapper.addEventListener('drag', this);
this.wrapper.addEventListener('dragend', this);
}
this.wrapper.addEventListener('webkitTransitionEnd', this);
},
openPercentage: function(percentage) {
var p = percentage / 100;
if (!this.slideIn) {
if (this.offCanvasLeft && percentage >= 0) {
this.updateTranslate(this.offCanvasLeftWidth * p);
this.offCanvasLeft.classList[p !== 0 ? 'add' : 'remove'](CLASS_ACTIVE);
} else if (this.offCanvasRight && percentage <= 0) {
this.updateTranslate(this.offCanvasRightWidth * p);
this.offCanvasRight.classList[p !== 0 ? 'add' : 'remove'](CLASS_ACTIVE);
}
this.classList[p !== 0 ? 'add' : 'remove'](CLASS_ACTIVE);
} else {
if (this.offCanvasLeft && percentage >= 0) {
p = p === 0 ? -1 : 0;
this.updateTranslate(this.offCanvasLeftWidth * p);
this.offCanvasLeft.classList[percentage !== 0 ? 'add' : 'remove'](CLASS_ACTIVE);
} else if (this.offCanvasRight && percentage <= 0) {
p = p === 0 ? 1 : 0;
this.updateTranslate(this.offCanvasRightWidth * p);
this.offCanvasRight.classList[percentage !== 0 ? 'add' : 'remove'](CLASS_ACTIVE);
}
this.classList[percentage !== 0 ? 'add' : 'remove'](CLASS_ACTIVE);
}
},
updateTranslate: function(x) {
if (x !== this.lastTranslateX) {
if (!this.slideIn) {
if ((!this.offCanvasLeft && x > 0) || (!this.offCanvasRight && x < 0)) {
this.setTranslateX(0);
return;
}
if (this.leftShowing && x > this.offCanvasLeftWidth) {
this.setTranslateX(this.offCanvasLeftWidth);
return;
}
if (this.rightShowing && x < -this.offCanvasRightWidth) {
this.setTranslateX(-this.offCanvasRightWidth);
return;
}
this.setTranslateX(x);
if (x >= 0) {
this.leftShowing = true;
this.rightShowing = false;
if (x > 0) {
if (this.offCanvasLeft) {
$.each(this.offCanvasLefts, function(index, offCanvas) {
if (offCanvas === this.offCanvasLeft) {
this.offCanvasLeft.style.zIndex = 0;
} else {
offCanvas.style.zIndex = -1;
}
}.bind(this));
}
if (this.offCanvasRight) {
this.offCanvasRight.style.zIndex = -1;
}
}
} else {
this.rightShowing = true;
this.leftShowing = false;
if (this.offCanvasRight) {
$.each(this.offCanvasRights, function(index, offCanvas) {
if (offCanvas === this.offCanvasRight) {
offCanvas.style.zIndex = 0;
} else {
offCanvas.style.zIndex = -1;
}
}.bind(this));
}
if (this.offCanvasLeft) {
this.offCanvasLeft.style.zIndex = -1;
}
}
} else {
if (this.offCanvas.classList.contains(CLASS_OFF_CANVAS_RIGHT)) {
if (x < 0) {
this.setTranslateX(0);
return;
}
if (x > this.offCanvasRightWidth) {
this.setTranslateX(this.offCanvasRightWidth);
return;
}
} else {
if (x > 0) {
this.setTranslateX(0);
return;
}
if (x < -this.offCanvasLeftWidth) {
this.setTranslateX(-this.offCanvasLeftWidth);
return;
}
}
this.setTranslateX(x);
}
this.lastTranslateX = x;
}
},
setTranslateX: $.animationFrame(function(x) {
if (this.scroller) {
if (this.scalable && this.offCanvas.parentNode === this.wrapper) {
var percent = Math.abs(x) / this.offCanvasWidth;
var zoomOutScale = 1 - (1 - this.options.scale) * percent;
var zoomInScale = this.options.scale + (1 - this.options.scale) * percent;
var zoomOutOpacity = 1 - (1 - this.options.opacity) * percent;
var zoomInOpacity = this.options.opacity + (1 - this.options.opacity) * percent;
if (this.offCanvas.classList.contains(CLASS_OFF_CANVAS_LEFT)) {
this.offCanvas.style.webkitTransformOrigin = '-100%';
this.scroller.style.webkitTransformOrigin = 'left';
} else {
this.offCanvas.style.webkitTransformOrigin = '200%';
this.scroller.style.webkitTransformOrigin = 'right';
}
this.offCanvas.style.opacity = zoomInOpacity;
this.offCanvas.style.webkitTransform = 'translate3d(0,0,0) scale(' + zoomInScale + ')';
this.scroller.style.webkitTransform = 'translate3d(' + x + 'px,0,0) scale(' + zoomOutScale + ')';
} else {
if (this.slideIn) {
this.offCanvas.style.webkitTransform = 'translate3d(' + x + 'px,0,0)';
} else {
this.scroller.style.webkitTransform = 'translate3d(' + x + 'px,0,0)';
}
}
}
}),
getTranslateX: function() {
if (this.offCanvas) {
var scroller = this.slideIn ? this.offCanvas : this.scroller;
var result = $.parseTranslateMatrix($.getStyles(scroller, 'webkitTransform'));
return (result && result.x) || 0;
}
return 0;
},
isShown: function(direction) {
var shown = false;
if (!this.slideIn) {
var x = this.getTranslateX();
if (direction === 'right') {
shown = this.classList.contains(CLASS_ACTIVE) && x < 0;
} else if (direction === 'left') {
shown = this.classList.contains(CLASS_ACTIVE) && x > 0;
} else {
shown = this.classList.contains(CLASS_ACTIVE) && x !== 0;
}
} else {
if (direction === 'left') {
shown = this.classList.contains(CLASS_ACTIVE) && this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_LEFT + '.' + CLASS_ACTIVE);
} else if (direction === 'right') {
shown = this.classList.contains(CLASS_ACTIVE) && this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_RIGHT + '.' + CLASS_ACTIVE);
} else {
shown = this.classList.contains(CLASS_ACTIVE) && (this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_LEFT + '.' + CLASS_ACTIVE) || this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_RIGHT + '.' + CLASS_ACTIVE));
}
}
return shown;
},
close: function() {
this._initOffCanvasVisible();
this.offCanvas = this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_RIGHT + '.' + CLASS_ACTIVE) || this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_LEFT + '.' + CLASS_ACTIVE);
this.offCanvasWidth = this.offCanvas.offsetWidth;
if (this.scroller) {
this.offCanvas.offsetHeight;
this.offCanvas.classList.add(CLASS_TRANSITIONING);
this.scroller.classList.add(CLASS_TRANSITIONING);
this.openPercentage(0);
}
},
show: function(direction) {
this._initOffCanvasVisible();
if (this.isShown(direction)) {
return false;
}
if (!direction) {
direction = this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_RIGHT) ? 'right' : 'left';
}
if (direction === 'right') {
this.offCanvas = this.offCanvasRight;
this.offCanvasWidth = this.offCanvasRightWidth;
} else {
this.offCanvas = this.offCanvasLeft;
this.offCanvasWidth = this.offCanvasLeftWidth;
}
if (this.scroller) {
this.offCanvas.offsetHeight;
this.offCanvas.classList.add(CLASS_TRANSITIONING);
this.scroller.classList.add(CLASS_TRANSITIONING);
this.openPercentage(direction === 'left' ? 100 : -100);
}
return true;
},
toggle: function(directionOrOffCanvas) {
var direction = directionOrOffCanvas;
if (directionOrOffCanvas && directionOrOffCanvas.classList) {
direction = directionOrOffCanvas.classList.contains(CLASS_OFF_CANVAS_LEFT) ? 'left' : 'right';
this.refresh(directionOrOffCanvas);
}
if (!this.show(direction)) {
this.close();
}
}
});
//hash to offcanvas
var findOffCanvasContainer = function(target) {
parentNode = target.parentNode;
if (parentNode) {
if (parentNode.classList.contains(CLASS_OFF_CANVAS_WRAP)) {
return parentNode;
} else {
parentNode = parentNode.parentNode;
if (parentNode.classList.contains(CLASS_OFF_CANVAS_WRAP)) {
return parentNode;
}
}
}
};
var handle = function(event, target) {
if (target.tagName === 'A' && target.hash) {
var offcanvas = document.getElementById(target.hash.replace('#', ''));
if (offcanvas) {
var container = findOffCanvasContainer(offcanvas);
if (container) {
$.targets._container = container;
return offcanvas;
}
}
}
return false;
};
$.registerTarget({
name: name,
index: 60,
handle: handle,
target: false,
isReset: false,
isContinue: true
});
window.addEventListener('tap', function(e) {
if (!$.targets.offcanvas) {
return;
}
//TODO 此处类型的代码后续考虑统一优化(target机制)，现在的实现费力不讨好
var target = e.target;
for (; target && target !== document; target = target.parentNode) {
if (target.tagName === 'A' && target.hash && target.hash === ('#' + $.targets.offcanvas.id)) {
e.detail && e.detail.gesture && e.detail.gesture.preventDefault(); //fixed hashchange
$($.targets._container).offCanvas().toggle($.targets.offcanvas);
$.targets.offcanvas = $.targets._container = null;
break;
}
}
});
$.fn.offCanvas = function(options) {
var offCanvasApis = [];
this.each(function() {
var offCanvasApi = null;
var self = this;
//hack old version
if (!self.classList.contains(CLASS_OFF_CANVAS_WRAP)) {
self = findOffCanvasContainer(self);
}
var id = self.getAttribute('data-offCanvas');
if (!id) {
id = ++$.uuid;
$.data[id] = offCanvasApi = new OffCanvas(self, options);
self.setAttribute('data-offCanvas', id);
} else {
offCanvasApi = $.data[id];
}
if (options === 'show' || options === 'close' || options === 'toggle') {
offCanvasApi.toggle();
}
offCanvasApis.push(offCanvasApi);
});
return offCanvasApis.length === 1 ? offCanvasApis[0] : offCanvasApis;
};
$.ready(function() {
$($.classSelector('.off-canvas-wrap')).offCanvas();
});
})(mui, window, document, 'offcanvas');
================================================
FILE: js/mui.popup.js
================================================
/**
* Popup(alert,confirm,prompt)
* @param {Object} $
* @param {Object} window
* @param {Object} document
*/
(function($, window, document) {
var CLASS_POPUP = $.className('popup');
var CLASS_POPUP_BACKDROP = $.className('popup-backdrop');
var CLASS_POPUP_IN = $.className('popup-in');
var CLASS_POPUP_OUT = $.className('popup-out');
var CLASS_POPUP_INNER = $.className('popup-inner');
var CLASS_POPUP_TITLE = $.className('popup-title');
var CLASS_POPUP_TEXT = $.className('popup-text');
var CLASS_POPUP_INPUT = $.className('popup-input');
var CLASS_POPUP_BUTTONS = $.className('popup-buttons');
var CLASS_POPUP_BUTTON = $.className('popup-button');
var CLASS_POPUP_BUTTON_BOLD = $.className('popup-button-bold');
var CLASS_POPUP_BACKDROP = $.className('popup-backdrop');
var CLASS_ACTIVE = $.className('active');
var popupStack = [];
var backdrop = (function() {
var element = document.createElement('div');
element.classList.add(CLASS_POPUP_BACKDROP);
element.addEventListener($.EVENT_MOVE, $.preventDefault);
element.addEventListener('webkitTransitionEnd', function() {
if (!this.classList.contains(CLASS_ACTIVE)) {
element.parentNode && element.parentNode.removeChild(element);
}
});
return element;
}());
var createInput = function(placeholder) {
return '';
};
var createInner = function(message, title, extra) {
return '';
};
var createButtons = function(btnArray) {
var length = btnArray.length;
var btns = [];
for (var i = 0; i < length; i++) {
btns.push('');
}
return '';
};
var createPopup = function(html, callback) {
var popupElement = document.createElement('div');
popupElement.className = CLASS_POPUP;
popupElement.innerHTML = html;
var removePopupElement = function() {
popupElement.parentNode && popupElement.parentNode.removeChild(popupElement);
popupElement = null;
};
popupElement.addEventListener($.EVENT_MOVE, $.preventDefault);
popupElement.addEventListener('webkitTransitionEnd', function(e) {
if (popupElement && e.target === popupElement && popupElement.classList.contains(CLASS_POPUP_OUT)) {
removePopupElement();
}
});
popupElement.style.display = 'block';
document.body.appendChild(popupElement);
popupElement.offsetHeight;
popupElement.classList.add(CLASS_POPUP_IN);
if (!backdrop.classList.contains(CLASS_ACTIVE)) {
backdrop.style.display = 'block';
document.body.appendChild(backdrop);
backdrop.offsetHeight;
backdrop.classList.add(CLASS_ACTIVE);
}
var btns = $.qsa('.' + CLASS_POPUP_BUTTON, popupElement);
var input = popupElement.querySelector('.' + CLASS_POPUP_INPUT + ' input');
var popup = {
element: popupElement,
close: function(index, animate) {
if (popupElement) {
var result = callback && callback({
index: index || 0,
value: input && input.value || ''
});
if (result === false) { //返回false则不关闭当前popup
return;
}
if (animate !== false) {
popupElement.classList.remove(CLASS_POPUP_IN);
popupElement.classList.add(CLASS_POPUP_OUT);
} else {
removePopupElement();
}
popupStack.pop();
//如果还有其他popup，则不remove backdrop
if (popupStack.length) {
popupStack[popupStack.length - 1]['show'](animate);
} else {
backdrop.classList.remove(CLASS_ACTIVE);
}
}
}
};
var handleEvent = function(e) {
popup.close(btns.indexOf(e.target));
};
$(popupElement).on('tap', '.' + CLASS_POPUP_BUTTON, handleEvent);
if (popupStack.length) {
popupStack[popupStack.length - 1]['hide']();
}
popupStack.push({
close: popup.close,
show: function(animate) {
popupElement.style.display = 'block';
popupElement.offsetHeight;
popupElement.classList.add(CLASS_POPUP_IN);
},
hide: function() {
popupElement.style.display = 'none';
popupElement.classList.remove(CLASS_POPUP_IN);
}
});
return popup;
};
var createAlert = function(message, title, btnValue, callback, type) {
if (typeof message === 'undefined') {
return;
} else {
if (typeof title === 'function') {
callback = title;
type = btnValue;
title = null;
btnValue = null;
} else if (typeof btnValue === 'function') {
type = callback;
callback = btnValue;
btnValue = null;
}
}
if (!$.os.plus || type === 'div') {
return createPopup(createInner(message, title || '提示') + createButtons([btnValue || '确定']), callback);
}
return plus.nativeUI.alert(message, callback, title || '提示', btnValue || '确定');
};
var createConfirm = function(message, title, btnArray, callback, type) {
if (typeof message === 'undefined') {
return;
} else {
if (typeof title === 'function') {
callback = title;
type = btnArray;
title = null;
btnArray = null;
} else if (typeof btnArray === 'function') {
type = callback;
callback = btnArray;
btnArray = null;
}
}
if (!$.os.plus || type === 'div') {
return createPopup(createInner(message, title || '提示') + createButtons(btnArray || ['取消', '确认']), callback);
}
return plus.nativeUI.confirm(message, callback, title, btnArray || ['取消', '确认']);
};
var createPrompt = function(message, placeholder, title, btnArray, callback, type) {
if (typeof message === 'undefined') {
return;
} else {
if (typeof placeholder === 'function') {
callback = placeholder;
type = title;
placeholder = null;
title = null;
btnArray = null;
} else if (typeof title === 'function') {
callback = title;
type = btnArray;
title = null;
btnArray = null;
} else if (typeof btnArray === 'function') {
type = callback;
callback = btnArray;
btnArray = null;
}
}
if (!$.os.plus || type === 'div') {
return createPopup(createInner(message, title || '提示', createInput(placeholder)) + createButtons(btnArray || ['取消', '确认']), callback);
}
return plus.nativeUI.prompt(message, callback, title || '提示', placeholder, btnArray || ['取消', '确认']);
};
var closePopup = function() {
if (popupStack.length) {
popupStack[popupStack.length - 1]['close']();
return true;
} else {
return false;
}
};
var closePopups = function() {
while (popupStack.length) {
popupStack[popupStack.length - 1]['close']();
}
};
$.closePopup = closePopup;
$.closePopups = closePopups;
$.alert = createAlert;
$.confirm = createConfirm;
$.prompt = createPrompt;
})(mui, window, document);
================================================
FILE: js/mui.progressbar.js
================================================
(function($, document) {
var CLASS_PROGRESSBAR = $.className('progressbar');
var CLASS_PROGRESSBAR_IN = $.className('progressbar-in');
var CLASS_PROGRESSBAR_OUT = $.className('progressbar-out');
var CLASS_PROGRESSBAR_INFINITE = $.className('progressbar-infinite');
var SELECTOR_PROGRESSBAR = $.classSelector('.progressbar');
var _findProgressbar = function(container) {
container = $(container || 'body');
if (container.length === 0) return;
container = container[0];
if (container.classList.contains(CLASS_PROGRESSBAR)) {
return container;
}
var progressbars = container.querySelectorAll(SELECTOR_PROGRESSBAR);
if (progressbars) {
for (var i = 0, len = progressbars.length; i < len; i++) {
var progressbar = progressbars[i];
if (progressbar.parentNode === container) {
return progressbar;
}
}
}
};
/**
* 创建并显示进度条
* @param {Object} container 可选，默认body，支持selector,DOM Node,mui wrapper
* @param {Object} progress 可选，undefined表示循环，数字表示具体进度
* @param {Object} color 可选，指定颜色样式(目前暂未提供实际样式，可暂时不暴露此参数)
*/
var showProgressbar = function(container, progress, color) {
if (typeof container === 'number') {
color = progress;
progress = container;
container = 'body';
}
container = $(container || 'body');
if (container.length === 0) return;
container = container[0];
var progressbar;
if (container.classList.contains(CLASS_PROGRESSBAR)) {
progressbar = container;
} else {
var progressbars = container.querySelectorAll(SELECTOR_PROGRESSBAR + ':not(.' + CLASS_PROGRESSBAR_OUT + ')');
if (progressbars) {
for (var i = 0, len = progressbars.length; i < len; i++) {
var _progressbar = progressbars[i];
if (_progressbar.parentNode === container) {
progressbar = _progressbar;
break;
}
}
}
if (!progressbar) {
progressbar = document.createElement('span');
progressbar.className = CLASS_PROGRESSBAR + ' ' + CLASS_PROGRESSBAR_IN + (typeof progress !== 'undefined' ? '' : (' ' + CLASS_PROGRESSBAR_INFINITE)) + (color ? (' ' + CLASS_PROGRESSBAR + '-' + color) : '');
if (typeof progress !== 'undefined') {
progressbar.innerHTML = '', '
', '
{contentrefresh}
', '
$0
" #expansion是代码块的输出内容，其中$0、$1是光标的停留和切换位置。$1是第一个停留光标，$0是最后回车时停留的光标。
#如果输出涉及到换行和tab，也需严格在这里使用换行和tab。
#输出双引号在前面加\来转义，输出$使用\$(单引号中)或\\$(双引号中)转义
cmd.needApplyReContentAssist = true #这句话的意思是输出后同时激活代码助手，即在$1的位置直接拉出样式列表
end #div_class代码块结束
snippet 'ng-pluralize' do |cmd|
cmd.trigger = 'ngp'
cmd.expansion = "$1 "
end
end
with_defaults :scope => 'text.html entity.other.attribute-name.html' do |bundle| #=====HTML属性代码块====================================================
#如下是一个示例代码块，可以复制后再添加新代码块
snippet 'ng-' do |s| #ng-是显示名称，代码助手提示列表显示时可见
s.trigger = 'ng-' #ng-是激活字符，即按下ng-后会触发该代码块
s.expansion='ng-${1:app/bind/bind-html/bind-template/blur/change/checked/class/class-even/class-odd/click/cloak/controller/copy/csp/cut/dblclick/disabled/focus/hide/href/if/include/init/keydown/keypress/keyup/list/model/mousedown/mouseenter/mouseleave/mousemove/mouseover/mouseup/ng-non-bindable/open/options/paste/readonly/repeat-start/repeat-end/selected/show/src/srcset/style/submit/swipe-left/swipe-right/switch/switch-default/switch-when/view}="$2"'
#expansion是代码块的输出内容，其中$0、$1是光标的停留和切换位置。
#$1是第一个停留光标，$0是最后回车时停留的光标。
#使用{}包围的内容，是提示值域。
#如果输出涉及到换行和tab，也需严格在这里使用换行和tab。
#输出双引号在前面加\来转义，输出$使用\$(单引号中)或\\$(双引号中)转义
s.locationType='HTML_ATTRIBUTE'
end #ng代码块结束
end
with_defaults :scope => 'text.html - source', :input => :none, :output => :insert_as_snippet do |bundle| #=====无显示名称的快捷命令=======================
=begin
如下示例均为系统已经预置的命令，无需重复制作
示例1 Ctrl+Enter输出
$0
'
end
snippet 'mCheckbox(复选框)' do |cmd|
cmd.trigger = 'mcheckbox'
cmd.expansion = "
${1:Checkbox}
$0"
end
snippet 'mCheckbox(复选框居左)' do |cmd|
cmd.trigger = 'mcheckbox'
cmd.expansion = "
${1:checkbox左侧显示示例}
$0"
end
snippet 'mCheckbox(复选框禁用选项)' do |cmd|
cmd.trigger = 'mcheckbox'
cmd.expansion = "
${1:disabled checkbox}
$0"
end
snippet 'mHeader(标题栏)' do |cmd|
cmd.trigger = 'mheader'
cmd.expansion = '
$0'
end
snippet 'mHeader(带返回箭头的标题栏)' do |cmd|
cmd.trigger = 'mheaderwithBack'
cmd.expansion = '
$0'
end
snippet 'mText(文本框)' do |cmd|
cmd.trigger = 'minputtext'
cmd.needApplyReContentAssist = true
cmd.expansion = "
${3:Input}
$0"
end
snippet 'mText_Search(搜索框)' do |cmd|
cmd.trigger = 'minputsearch'
cmd.expansion = "
$0"
end
snippet 'mText_Clear(带清除按钮的文本框)' do |cmd|
cmd.trigger = 'minputclear'
cmd.expansion = "
Input
$0"
end
snippet 'mText_Speech(语音输入)' do |cmd|
cmd.trigger = 'minputspeech'
cmd.expansion = "
${2:Input}
$0"
end
snippet 'mForm(表单)' do |cmd|
cmd.trigger = 'mform'
cmd.needApplyReContentAssist = true
cmd.expansion = "$0"
end
snippet 'mRadio(单选框)' do |cmd|
cmd.trigger = 'mradio'
cmd.expansion = "
${1:Radio}
$0"
end
snippet 'mPopover(弹出菜单)' do |cmd|
cmd.trigger = 'mpopover'
cmd.expansion = '$0'
end
snippet 'mPopover(H5模式弹出菜单)' do |cmd|
cmd.trigger = 'mactionsheet'
cmd.expansion = '$0'
end
snippet 'mRange(label+输入框+滑块)' do |cmd|
cmd.trigger = 'mrangeinput'
cmd.expansion = "label+输入框+滑块：
$0"
end
snippet 'mRange(Label+滑块)' do |cmd|
cmd.trigger = 'mrangelabel'
cmd.expansion = "label+滑块：${1:20}
${4:滑块：}
$0"
end
snippet 'mRange(整行滑块)' do |cmd|
cmd.trigger = 'mrangeline'
cmd.expansion = "${4:整行滑块：}${1:50}
$0"
end
snippet 'mSwitch(开关)' do |cmd|
cmd.trigger = 'mswitch'
cmd.expansion = "$0"
end
snippet 'mSwitch(开关Mini)' do |cmd|
cmd.trigger = 'mswitchmini'
cmd.expansion = ""
end
snippet 'mbadge（数字角标）' do |cmd|
cmd.trigger = 'mbadge'
cmd.expansion = "${2:1} $0"
end
snippet 'mbadge（数字角标无底色）' do |cmd|
cmd.trigger = 'mbadge_inverted'
cmd.expansion = "${2:1} $0"
end
snippet 'mTab(底部选项卡)' do |cmd|
cmd.trigger = 'mtab'
cmd.expansion = "
${1:首页}
${2:电话}
${3:邮件}
${4:设置}
$0"
end
snippet 'mTabSegmented(div选项卡)' do |cmd|
cmd.trigger = 'mtabsegmented'
cmd.expansion = "$0"
end
snippet 'mTabSegmented(可左右拖动的选项卡)' do |cmd|
cmd.trigger = 'mtabviewpage'
cmd.expansion = '
${3:第1个选项卡子项}
${4:第1个选项卡子项}
${5:第2个选项卡子项}
${6:第2个选项卡子项}
$0'
end
snippet 'mPagination(分页)' do |cmd|
cmd.trigger = 'mpagination'
cmd.expansion = "$0"
end
snippet 'mList(列表)' do |cmd|
cmd.trigger = 'mlist'
cmd.expansion = "$0"
end
snippet 'mListMedia(图文列表图片居左)' do |cmd|
cmd.trigger = 'mlist_Media_left'
cmd.needApplyReContentAssist = true
cmd.expansion = "$0"
end
snippet 'mListMedia(图文列表图片居右)' do |cmd|
cmd.trigger = 'mlist_Media_right'
cmd.needApplyReContentAssist = true
cmd.expansion = "$0"
end
snippet 'mGrid(九宫格)' do |cmd|
cmd.trigger = 'mgrid'
cmd.expansion = "$0"
end
snippet 'mGallery-Table(图文表格)' do |cmd|
cmd.needApplyReContentAssist = true
cmd.trigger = 'mgallerytable'
cmd.expansion = "$0"
end
snippet 'mGallery图片轮播' do |cmd|
cmd.needApplyReContentAssist = true
cmd.trigger = 'mgallery'
cmd.expansion = "$0"
end
snippet 'mactionsheet（操作表）' do |cmd|
cmd.trigger = 'actionsheet'
cmd.expansion = "$0"
end
snippet 'maccordion（折叠面板）' do |cmd|
cmd.trigger = 'maccordion'
cmd.expansion = '$0'
end
snippet 'mnumbox(数字输入框)' do |cmd|
cmd.trigger = 'mnumbox'
cmd.expansion = "
-
+
$0"
end
snippet 'mrefreshContainer(刷新容器)' do |cmd|
cmd.trigger = 'mrefresh'
cmd.expansion = "
"
end
snippet 'mButton(按钮)' do |cmd|
cmd.trigger = 'mbutton'
cmd.expansion = "${2:按钮} $0"
end
snippet 'mButton(按钮无底色,有边框)' do |cmd|
cmd.trigger = 'mbutton_outline'
cmd.expansion = "${2:按钮} $0"
end
end
================================================
FILE: package.json
================================================
{
"name": "mui",
"description": "最接近原生体验的高性能前端框架.",
"version": "3.7.3",
"keywords": [
"css",
"fonts",
"ios",
"android",
"mobile",
"prototype"
],
"homepage": "http://dev.dcloud.net.cn/mui",
"author": "DCloud",
"style": "dist/css/mui.css",
"sass": "sass/mui.scss",
"repository": {
"type": "git",
"url": "https://github.com/dcloudio/mui.git"
},
"bugs": {
"url": "https://github.com/dcloudio/mui/issues"
},
"license": "MIT",
"scripts": {
"test": "grunt test"
},
"devDependencies": {
"body-parser": "~1.9.1",
"grunt": "~0.4.5",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-concat": "~0.4.0",
"grunt-contrib-connect": "^0.8.0",
"grunt-contrib-copy": "~0.5.0",
"grunt-contrib-csslint": "~0.2.0",
"grunt-contrib-cssmin": "~0.9.0",
"grunt-contrib-handlebars": "~0.8.0",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-sass": "~0.7.3",
"grunt-contrib-uglify": "~0.4.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-csscomb": "~2.0.1",
"grunt-html-validation": "~0.1.17",
"grunt-jekyll": "~0.4.2",
"grunt-jscs": "~1.7.0",
"grunt-jsdoc": "~0.5.4",
"grunt-open": "^0.2.3",
"grunt-sed": "~0.1.1",
"gulp": "^3.9.1",
"load-grunt-tasks": "~0.4.0",
"time-grunt": "~0.3.1"
},
"engines": {
"node": "~0.10.1"
}
}
================================================
FILE: plugin/picker/css/mui.dtpicker.css
================================================
.mui-dtpicker {
position: fixed;
left: 0px;
width: 100%;
z-index: 999999;
background-color: #eee;
border-top: solid 1px #ccc;
box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
-webkit-transition: .3s;
bottom: 0px;
-webkit-transform: translateY(300px);
}
.mui-dtpicker.mui-active {
-webkit-transform: translateY(0px);
}
/*用于将 html body 禁止滚动条*/
.mui-dtpicker-active-for-page {
overflow: hidden !important;
}
.mui-android-5-1 .mui-dtpicker {
bottom: -300px;
-webkit-transition-property: bottom;
-webkit-transform: none;
}
.mui-android-5-1 .mui-dtpicker.mui-active {
bottom: 0px;
-webkit-transition-property: bottom;
-webkit-transform: none;
}
.mui-dtpicker-header {
padding: 6px;
font-size: 14px;
color: #888;
}
.mui-dtpicker-header button {
font-size: 12px;
padding: 5px 10px;
}
.mui-dtpicker-header button:last-child {
float: right;
}
.mui-dtpicker-body {
position: relative;
width: 100%;
height: 200px;
/*border-top: solid 1px #eee;
background-color: #fff;*/
}
.mui-ios .mui-dtpicker-body {
-webkit-perspective: 1200px;
perspective: 1200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.mui-dtpicker-title h5 {
display: inline-block;
width: 20%;
margin: 0px;
padding: 8px;
text-align: center;
border-top: solid 1px #ddd;
background-color: #f0f0f0;
border-bottom: solid 1px #ccc;
}
.mui-dtpicker .mui-picker {
width: 20%;
height: 100%;
margin: 0px;
float: left;
border: none;
}
/*年月日时分*/
[data-type="datetime"] .mui-picker,
[data-type="time"] .mui-dtpicker-title h5 {
width: 20%;
}
[data-type="datetime"] [data-id="picker-h"],
[data-type="datetime"] [data-id="title-h"] {
border-left: dotted 1px #ccc;
}
/*年月日*/
[data-type="date"] .mui-picker,
[data-type="date"] .mui-dtpicker-title h5 {
width: 33.3%;
}
[data-type="date"] [data-id="picker-h"],
[data-type="date"] [data-id="picker-i"],
[data-type="date"] [data-id="title-h"],
[data-type="date"] [data-id="title-i"] {
display: none;
}
/*年月日时*/
[data-type="hour"] .mui-picker,
[data-type="hour"] .mui-dtpicker-title h5 {
width: 25%;
}
[data-type="hour"] [data-id="picker-i"],
[data-type="hour"] [data-id="title-i"] {
display: none;
}
[data-type="hour"] [data-id="picker-h"],
[data-type="hour"] [data-id="title-h"] {
border-left: dotted 1px #ccc;
}
/*时分*/
[data-type="time"] .mui-picker,
[data-type="time"] .mui-dtpicker-title h5 {
width: 50%;
}
[data-type="time"] [data-id="picker-y"],
[data-type="time"] [data-id="picker-m"],
[data-type="time"] [data-id="picker-d"],
[data-type="time"] [data-id="title-y"],
[data-type="time"] [data-id="title-m"],
[data-type="time"] [data-id="title-d"] {
display: none;
}
/*年月*/
[data-type="month"] .mui-picker,
[data-type="month"] .mui-dtpicker-title h5 {
width: 50%;
}
[data-type="month"] [data-id="picker-d"],
[data-type="month"] [data-id="picker-h"],
[data-type="month"] [data-id="picker-i"],
[data-type="month"] [data-id="title-d"],
[data-type="month"] [data-id="title-h"],
[data-type="month"] [data-id="title-i"] {
display: none;
}
================================================
FILE: plugin/picker/css/mui.picker.css
================================================
/**
* 选择列表插件
* varstion 2.0.0
* by Houfeng
* Houfeng@DCloud.io
*/
.mui-picker {
background-color: #ddd;
position: relative;
height: 200px;
overflow: hidden;
border: solid 1px rgba(0, 0, 0, 0.1);
-webkit-user-select: none;
user-select: none;
box-sizing: border-box;
list-style: none;
}
.mui-picker-inner {
box-sizing: border-box;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
-webkit-mask-box-image: linear-gradient(top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
}
.mui-pciker-list,
.mui-pciker-rule {
box-sizing: border-box;
padding: 0px;
margin: 0px;
width: 100%;
height: 36px;
line-height: 36px;
position: absolute;
left: 0px;
top: 50%;
margin-top: -18px;
}
.mui-pciker-rule-bg {
z-index: 0;
/*background-color: #cfd5da;*/
}
.mui-pciker-rule-ft {
z-index: 2;
border-top: solid 1px rgba(0, 0, 0, 0.1);
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
/*-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
/*box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
}
.mui-pciker-list {
z-index: 1;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}
.mui-pciker-list li {
width: 100%;
height: 100%;
position: absolute;
text-align: center;
vertical-align: middle;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
box-sizing: border-box;
font-size: 16px;
font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
color: #888;
padding: 0px 8px;
white-space: nowrap;
-webkit-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
cursor: default;
visibility: hidden;
list-style: none;
}
.mui-pciker-list li.highlight,
.mui-pciker-list li.visible {
visibility: visible;
}
.mui-pciker-list li.highlight {
color: #222;
}
================================================
FILE: plugin/picker/css/mui.poppicker.css
================================================
.mui-poppicker {
position: fixed;
left: 0px;
width: 100%;
z-index: 999;
background-color: #eee;
border-top: solid 1px #ccc;
box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
-webkit-transition: .3s;
transition: .3s;
bottom: 0px;
-webkit-transform: translateY(300px);
transform: translateY(300px);
}
.mui-poppicker.mui-active {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.mui-android-5-1 .mui-poppicker {
bottom: -300px;
-webkit-transition-property: bottom;
transition-property: bottom;
-webkit-transform: none;
transform: none;
}
.mui-android-5-1 .mui-poppicker.mui-active {
bottom: 0px;
-webkit-transition-property: bottom;
transition-property: bottom;
-webkit-transform: none;
transform: none;
}
.mui-poppicker-header {
padding: 6px;
font-size: 14px;
color: #888;
}
.mui-poppicker-header .mui-btn {
font-size: 12px;
padding: 5px 10px;
}
.mui-poppicker-btn-cancel {
float: left;
}
.mui-poppicker-btn-ok {
float: right;
}
.mui-poppicker-clear {
clear: both;
height: 0px;
line-height: 0px;
font-size: 0px;
overflow: hidden;
}
.mui-poppicker-body {
position: relative;
width: 100%;
height: 200px;
border-top: solid 1px #ddd;
/*-webkit-perspective: 1200px;
perspective: 1200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;*/
}
.mui-poppicker-body .mui-picker {
width: 100%;
height: 100%;
margin: 0px;
border: none;
float: left;
}
================================================
FILE: plugin/picker/dist/css/mui.picker.all.css
================================================
/**
* 选择列表插件
* varstion 2.0.0
* by Houfeng
* Houfeng@DCloud.io
*/
.mui-picker {
background-color: #ddd;
position: relative;
height: 200px;
overflow: hidden;
border: solid 1px rgba(0, 0, 0, 0.1);
-webkit-user-select: none;
user-select: none;
box-sizing: border-box;
list-style: none;
}
.mui-picker-inner {
box-sizing: border-box;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
-webkit-mask-box-image: linear-gradient(top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
}
.mui-pciker-list,
.mui-pciker-rule {
box-sizing: border-box;
padding: 0px;
margin: 0px;
width: 100%;
height: 36px;
line-height: 36px;
position: absolute;
left: 0px;
top: 50%;
margin-top: -18px;
}
.mui-pciker-rule-bg {
z-index: 0;
/*background-color: #cfd5da;*/
}
.mui-pciker-rule-ft {
z-index: 2;
border-top: solid 1px rgba(0, 0, 0, 0.1);
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
/*-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
/*box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
}
.mui-pciker-list {
z-index: 1;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}
.mui-pciker-list li {
width: 100%;
height: 100%;
position: absolute;
text-align: center;
vertical-align: middle;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
box-sizing: border-box;
font-size: 16px;
font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
color: #888;
padding: 0px 8px;
white-space: nowrap;
-webkit-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
cursor: default;
visibility: hidden;
list-style: none;
}
.mui-pciker-list li.highlight,
.mui-pciker-list li.visible {
visibility: visible;
}
.mui-pciker-list li.highlight {
color: #222;
}
.mui-poppicker {
position: fixed;
left: 0px;
width: 100%;
z-index: 999;
background-color: #eee;
border-top: solid 1px #ccc;
box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
-webkit-transition: .3s;
transition: .3s;
bottom: 0px;
-webkit-transform: translateY(300px);
transform: translateY(300px);
}
.mui-poppicker.mui-active {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.mui-android-5-1 .mui-poppicker {
bottom: -300px;
-webkit-transition-property: bottom;
transition-property: bottom;
-webkit-transform: none;
transform: none;
}
.mui-android-5-1 .mui-poppicker.mui-active {
bottom: 0px;
-webkit-transition-property: bottom;
transition-property: bottom;
-webkit-transform: none;
transform: none;
}
.mui-poppicker-header {
padding: 6px;
font-size: 14px;
color: #888;
}
.mui-poppicker-header .mui-btn {
font-size: 12px;
padding: 5px 10px;
}
.mui-poppicker-btn-cancel {
float: left;
}
.mui-poppicker-btn-ok {
float: right;
}
.mui-poppicker-clear {
clear: both;
height: 0px;
line-height: 0px;
font-size: 0px;
overflow: hidden;
}
.mui-poppicker-body {
position: relative;
width: 100%;
height: 200px;
border-top: solid 1px #ddd;
/*-webkit-perspective: 1200px;
perspective: 1200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;*/
}
.mui-poppicker-body .mui-picker {
width: 100%;
height: 100%;
margin: 0px;
border: none;
float: left;
}
.mui-dtpicker {
position: fixed;
left: 0px;
width: 100%;
z-index: 999999;
background-color: #eee;
border-top: solid 1px #ccc;
box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
-webkit-transition: .3s;
bottom: 0px;
-webkit-transform: translateY(300px);
}
.mui-dtpicker.mui-active {
-webkit-transform: translateY(0px);
}
/*用于将 html body 禁止滚动条*/
.mui-dtpicker-active-for-page {
overflow: hidden !important;
}
.mui-android-5-1 .mui-dtpicker {
bottom: -300px;
-webkit-transition-property: bottom;
-webkit-transform: none;
}
.mui-android-5-1 .mui-dtpicker.mui-active {
bottom: 0px;
-webkit-transition-property: bottom;
-webkit-transform: none;
}
.mui-dtpicker-header {
padding: 6px;
font-size: 14px;
color: #888;
}
.mui-dtpicker-header button {
font-size: 12px;
padding: 5px 10px;
}
.mui-dtpicker-header button:last-child {
float: right;
}
.mui-dtpicker-body {
position: relative;
width: 100%;
height: 200px;
/*border-top: solid 1px #eee;
background-color: #fff;*/
}
.mui-ios .mui-dtpicker-body {
-webkit-perspective: 1200px;
perspective: 1200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.mui-dtpicker-title h5 {
display: inline-block;
width: 20%;
margin: 0px;
padding: 8px;
text-align: center;
border-top: solid 1px #ddd;
background-color: #f0f0f0;
border-bottom: solid 1px #ccc;
}
.mui-dtpicker .mui-picker {
width: 20%;
height: 100%;
margin: 0px;
float: left;
border: none;
}
/*年月日时分*/
[data-type="datetime"] .mui-picker,
[data-type="time"] .mui-dtpicker-title h5 {
width: 20%;
}
[data-type="datetime"] [data-id="picker-h"],
[data-type="datetime"] [data-id="title-h"] {
border-left: dotted 1px #ccc;
}
/*年月日*/
[data-type="date"] .mui-picker,
[data-type="date"] .mui-dtpicker-title h5 {
width: 33.3%;
}
[data-type="date"] [data-id="picker-h"],
[data-type="date"] [data-id="picker-i"],
[data-type="date"] [data-id="title-h"],
[data-type="date"] [data-id="title-i"] {
display: none;
}
/*年月日时*/
[data-type="hour"] .mui-picker,
[data-type="hour"] .mui-dtpicker-title h5 {
width: 25%;
}
[data-type="hour"] [data-id="picker-i"],
[data-type="hour"] [data-id="title-i"] {
display: none;
}
[data-type="hour"] [data-id="picker-h"],
[data-type="hour"] [data-id="title-h"] {
border-left: dotted 1px #ccc;
}
/*时分*/
[data-type="time"] .mui-picker,
[data-type="time"] .mui-dtpicker-title h5 {
width: 50%;
}
[data-type="time"] [data-id="picker-y"],
[data-type="time"] [data-id="picker-m"],
[data-type="time"] [data-id="picker-d"],
[data-type="time"] [data-id="title-y"],
[data-type="time"] [data-id="title-m"],
[data-type="time"] [data-id="title-d"] {
display: none;
}
/*年月*/
[data-type="month"] .mui-picker,
[data-type="month"] .mui-dtpicker-title h5 {
width: 50%;
}
[data-type="month"] [data-id="picker-d"],
[data-type="month"] [data-id="picker-h"],
[data-type="month"] [data-id="picker-i"],
[data-type="month"] [data-id="title-d"],
[data-type="month"] [data-id="title-h"],
[data-type="month"] [data-id="title-i"] {
display: none;
}
================================================
FILE: plugin/picker/dist/js/mui.picker.all.js
================================================
/**
* 选择列表插件
* varstion 2.0.0
* by Houfeng
* Houfeng@DCloud.io
*/
(function($, window, document, undefined) {
var MAX_EXCEED = 30;
var VISIBLE_RANGE = 90;
var DEFAULT_ITEM_HEIGHT = 40;
var BLUR_WIDTH = 10;
var rad2deg = $.rad2deg = function(rad) {
return rad / (Math.PI / 180);
};
var deg2rad = $.deg2rad = function(deg) {
return deg * (Math.PI / 180);
};
var platform = navigator.platform.toLowerCase();
var userAgent = navigator.userAgent.toLowerCase();
var isIos = (userAgent.indexOf('iphone') > -1 ||
userAgent.indexOf('ipad') > -1 ||
userAgent.indexOf('ipod') > -1) &&
(platform.indexOf('iphone') > -1 ||
platform.indexOf('ipad') > -1 ||
platform.indexOf('ipod') > -1);
//alert(isIos);
var Picker = $.Picker = function(holder, options) {
var self = this;
self.holder = holder;
self.options = options || {};
self.init();
self.initInertiaParams();
self.calcElementItemPostion(true);
self.bindEvent();
};
Picker.prototype.findElementItems = function() {
var self = this;
self.elementItems = [].slice.call(self.holder.querySelectorAll('li'));
return self.elementItems;
};
Picker.prototype.init = function() {
var self = this;
self.list = self.holder.querySelector('ul');
self.findElementItems();
self.height = self.holder.offsetHeight;
self.r = self.height / 2 - BLUR_WIDTH;
self.d = self.r * 2;
self.itemHeight = self.elementItems.length > 0 ? self.elementItems[0].offsetHeight : DEFAULT_ITEM_HEIGHT;
self.itemAngle = parseInt(self.calcAngle(self.itemHeight * 0.8));
self.hightlightRange = self.itemAngle / 2;
self.visibleRange = VISIBLE_RANGE;
self.beginAngle = 0;
self.beginExceed = self.beginAngle - MAX_EXCEED;
self.list.angle = self.beginAngle;
if (isIos) {
self.list.style.webkitTransformOrigin = "center center " + self.r + "px";
}
};
Picker.prototype.calcElementItemPostion = function(andGenerateItms) {
var self = this;
if (andGenerateItms) {
self.items = [];
}
self.elementItems.forEach(function(item) {
var index = self.elementItems.indexOf(item);
self.endAngle = self.itemAngle * index;
item.angle = self.endAngle;
item.style.webkitTransformOrigin = "center center -" + self.r + "px";
item.style.webkitTransform = "translateZ(" + self.r + "px) rotateX(" + (-self.endAngle) + "deg)";
if (andGenerateItms) {
var dataItem = {};
dataItem.text = item.innerHTML || '';
dataItem.value = item.getAttribute('data-value') || dataItem.text;
self.items.push(dataItem);
}
});
self.endExceed = self.endAngle + MAX_EXCEED;
self.calcElementItemVisibility(self.beginAngle);
};
Picker.prototype.calcAngle = function(c) {
var self = this;
var a = b = parseFloat(self.r);
//直径的整倍数部分直接乘以 180
c = Math.abs(c); //只算角度不关心正否值
var intDeg = parseInt(c / self.d) * 180;
c = c % self.d;
//余弦
var cosC = (a * a + b * b - c * c) / (2 * a * b);
var angleC = intDeg + rad2deg(Math.acos(cosC));
return angleC;
};
Picker.prototype.calcElementItemVisibility = function(angle) {
var self = this;
self.elementItems.forEach(function(item) {
var difference = Math.abs(item.angle - angle);
if (difference < self.hightlightRange) {
item.classList.add('highlight');
} else if (difference < self.visibleRange) {
item.classList.add('visible');
item.classList.remove('highlight');
} else {
item.classList.remove('highlight');
item.classList.remove('visible');
}
});
};
Picker.prototype.setAngle = function(angle) {
var self = this;
self.list.angle = angle;
self.list.style.webkitTransform = "perspective(1000px) rotateY(0deg) rotateX(" + angle + "deg)";
self.calcElementItemVisibility(angle);
};
Picker.prototype.bindEvent = function() {
var self = this;
var lastAngle = 0;
var startY = null;
var isPicking = false;
self.holder.addEventListener($.EVENT_START, function(event) {
isPicking = true;
event.preventDefault();
self.list.style.webkitTransition = '';
startY = (event.changedTouches ? event.changedTouches[0] : event).pageY;
lastAngle = self.list.angle;
self.updateInertiaParams(event, true);
}, false);
self.holder.addEventListener($.EVENT_END, function(event) {
isPicking = false;
event.preventDefault();
self.startInertiaScroll(event);
}, false);
self.holder.addEventListener($.EVENT_CANCEL, function(event) {
isPicking = false;
event.preventDefault();
self.startInertiaScroll(event);
}, false);
self.holder.addEventListener($.EVENT_MOVE, function(event) {
if (!isPicking) {
return;
}
event.preventDefault();
var endY = (event.changedTouches ? event.changedTouches[0] : event).pageY;
var dragRange = endY - startY;
var dragAngle = self.calcAngle(dragRange);
var newAngle = dragRange > 0 ? lastAngle - dragAngle : lastAngle + dragAngle;
if (newAngle > self.endExceed) {
newAngle = self.endExceed
}
if (newAngle < self.beginExceed) {
newAngle = self.beginExceed
}
self.setAngle(newAngle);
self.updateInertiaParams(event);
}, false);
//--
self.list.addEventListener('tap', function(event) {
elementItem = event.target;
if (elementItem.tagName == 'LI') {
self.setSelectedIndex(self.elementItems.indexOf(elementItem), 200);
}
}, false);
};
Picker.prototype.initInertiaParams = function() {
var self = this;
self.lastMoveTime = 0;
self.lastMoveStart = 0;
self.stopInertiaMove = false;
};
Picker.prototype.updateInertiaParams = function(event, isStart) {
var self = this;
var point = event.changedTouches ? event.changedTouches[0] : event;
if (isStart) {
self.lastMoveStart = point.pageY;
self.lastMoveTime = event.timeStamp || Date.now();
self.startAngle = self.list.angle;
} else {
var nowTime = event.timeStamp || Date.now();
if (nowTime - self.lastMoveTime > 300) {
self.lastMoveTime = nowTime;
self.lastMoveStart = point.pageY;
}
}
self.stopInertiaMove = true;
};
Picker.prototype.startInertiaScroll = function(event) {
var self = this;
var point = event.changedTouches ? event.changedTouches[0] : event;
/**
* 缓动代码
*/
var nowTime = event.timeStamp || Date.now();
var v = (point.pageY - self.lastMoveStart) / (nowTime - self.lastMoveTime); //最后一段时间手指划动速度
var dir = v > 0 ? -1 : 1; //加速度方向
var deceleration = dir * 0.0006 * -1;
var duration = Math.abs(v / deceleration); // 速度消减至0所需时间
var dist = v * duration / 2; //最终移动多少
var startAngle = self.list.angle;
var distAngle = self.calcAngle(dist) * dir;
//----
var srcDistAngle = distAngle;
if (startAngle + distAngle < self.beginExceed) {
distAngle = self.beginExceed - startAngle;
duration = duration * (distAngle / srcDistAngle) * 0.6;
}
if (startAngle + distAngle > self.endExceed) {
distAngle = self.endExceed - startAngle;
duration = duration * (distAngle / srcDistAngle) * 0.6;
}
//----
if (distAngle == 0) {
self.endScroll();
return;
}
self.scrollDistAngle(nowTime, startAngle, distAngle, duration);
};
Picker.prototype.scrollDistAngle = function(nowTime, startAngle, distAngle, duration) {
var self = this;
self.stopInertiaMove = false;
(function(nowTime, startAngle, distAngle, duration) {
var frameInterval = 13;
var stepCount = duration / frameInterval;
var stepIndex = 0;
(function inertiaMove() {
if (self.stopInertiaMove) return;
var newAngle = self.quartEaseOut(stepIndex, startAngle, distAngle, stepCount);
self.setAngle(newAngle);
stepIndex++;
if (stepIndex > stepCount - 1 || newAngle < self.beginExceed || newAngle > self.endExceed) {
self.endScroll();
return;
}
setTimeout(inertiaMove, frameInterval);
})();
})(nowTime, startAngle, distAngle, duration);
};
Picker.prototype.quartEaseOut = function(t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
};
Picker.prototype.endScroll = function() {
var self = this;
if (self.list.angle < self.beginAngle) {
self.list.style.webkitTransition = "150ms ease-out";
self.setAngle(self.beginAngle);
} else if (self.list.angle > self.endAngle) {
self.list.style.webkitTransition = "150ms ease-out";
self.setAngle(self.endAngle);
} else {
var index = parseInt((self.list.angle / self.itemAngle).toFixed(0));
self.list.style.webkitTransition = "100ms ease-out";
self.setAngle(self.itemAngle * index);
}
self.triggerChange();
};
Picker.prototype.triggerChange = function(force) {
var self = this;
setTimeout(function() {
var index = self.getSelectedIndex();
var item = self.items[index];
if ($.trigger && (index != self.lastIndex || force === true)) {
$.trigger(self.holder, 'change', {
"index": index,
"item": item
});
//console.log('change:' + index);
}
self.lastIndex = index;
typeof force === 'function' && force();
}, 0);
};
Picker.prototype.correctAngle = function(angle) {
var self = this;
if (angle < self.beginAngle) {
return self.beginAngle;
} else if (angle > self.endAngle) {
return self.endAngle;
} else {
return angle;
}
};
Picker.prototype.setItems = function(items) {
var self = this;
self.items = items || [];
var buffer = [];
self.items.forEach(function(item) {
if (item !== null && item !== undefined) {
buffer.push('' + (item.text || item) + ' ');
}
});
self.list.innerHTML = buffer.join('');
self.findElementItems();
self.calcElementItemPostion();
self.setAngle(self.correctAngle(self.list.angle));
self.triggerChange(true);
};
Picker.prototype.getItems = function() {
var self = this;
return self.items;
};
Picker.prototype.getSelectedIndex = function() {
var self = this;
return parseInt((self.list.angle / self.itemAngle).toFixed(0));
};
Picker.prototype.setSelectedIndex = function(index, duration, callback) {
var self = this;
self.list.style.webkitTransition = '';
var angle = self.correctAngle(self.itemAngle * index);
if (duration && duration > 0) {
var distAngle = angle - self.list.angle;
self.scrollDistAngle(Date.now(), self.list.angle, distAngle, duration);
} else {
self.setAngle(angle);
}
self.triggerChange(callback);
};
Picker.prototype.getSelectedItem = function() {
var self = this;
return self.items[self.getSelectedIndex()];
};
Picker.prototype.getSelectedValue = function() {
var self = this;
return (self.items[self.getSelectedIndex()] || {}).value;
};
Picker.prototype.getSelectedText = function() {
var self = this;
return (self.items[self.getSelectedIndex()] || {}).text;
};
Picker.prototype.setSelectedValue = function(value, duration, callback) {
var self = this;
for (var index in self.items) {
var item = self.items[index];
if (item.value == value) {
self.setSelectedIndex(index, duration, callback);
return;
}
}
};
if ($.fn) {
$.fn.picker = function(options) {
//遍历选择的元素
this.each(function(i, element) {
if (element.picker) return;
if (options) {
element.picker = new Picker(element, options);
} else {
var optionsText = element.getAttribute('data-picker-options');
var _options = optionsText ? JSON.parse(optionsText) : {};
element.picker = new Picker(element, _options);
}
});
return this[0] ? this[0].picker : null;
};
//自动初始化
$.ready(function() {
$('.mui-picker').picker();
});
}
})(window.mui || window, window, document, undefined);
//end
/**
* 弹出选择列表插件
* 此组件依赖 listpcker ，请在页面中先引入 mui.picker.css + mui.picker.js
* varstion 1.0.1
* by Houfeng
* Houfeng@DCloud.io
*/
(function($, document) {
//创建 DOM
$.dom = function(str) {
if (typeof(str) !== 'string') {
if ((str instanceof Array) || (str[0] && str.length)) {
return [].slice.call(str);
} else {
return [str];
}
}
if (!$.__create_dom_div__) {
$.__create_dom_div__ = document.createElement('div');
}
$.__create_dom_div__.innerHTML = str;
return [].slice.call($.__create_dom_div__.childNodes);
};
var panelBuffer = '';
var pickerBuffer = '';
//定义弹出选择器类
var PopPicker = $.PopPicker = $.Class.extend({
//构造函数
init: function(options) {
var self = this;
self.options = options || {};
self.options.buttons = self.options.buttons || ['取消', '确定'];
self.panel = $.dom(panelBuffer)[0];
document.body.appendChild(self.panel);
self.ok = self.panel.querySelector('.mui-poppicker-btn-ok');
self.cancel = self.panel.querySelector('.mui-poppicker-btn-cancel');
self.body = self.panel.querySelector('.mui-poppicker-body');
self.mask = $.createMask();
self.cancel.innerText = self.options.buttons[0];
self.ok.innerText = self.options.buttons[1];
self.cancel.addEventListener('tap', function(event) {
self.hide();
}, false);
self.ok.addEventListener('tap', function(event) {
if (self.callback) {
var rs = self.callback(self.getSelectedItems());
if (rs !== false) {
self.hide();
}
}
}, false);
self.mask[0].addEventListener('tap', function() {
self.hide();
}, false);
self._createPicker();
//防止滚动穿透
self.panel.addEventListener($.EVENT_START, function(event) {
event.preventDefault();
}, false);
self.panel.addEventListener($.EVENT_MOVE, function(event) {
event.preventDefault();
}, false);
},
_createPicker: function() {
var self = this;
var layer = self.options.layer || 1;
var width = (100 / layer) + '%';
self.pickers = [];
for (var i = 1; i <= layer; i++) {
var pickerElement = $.dom(pickerBuffer)[0];
pickerElement.style.width = width;
self.body.appendChild(pickerElement);
var picker = $(pickerElement).picker();
self.pickers.push(picker);
pickerElement.addEventListener('change', function(event) {
var nextPickerElement = this.nextSibling;
if (nextPickerElement && nextPickerElement.picker) {
var eventData = event.detail || {};
var preItem = eventData.item || {};
nextPickerElement.picker.setItems(preItem.children);
}
}, false);
}
},
//填充数据
setData: function(data) {
var self = this;
data = data || [];
self.pickers[0].setItems(data);
},
//获取选中的项（数组）
getSelectedItems: function() {
var self = this;
var items = [];
for (var i in self.pickers) {
var picker = self.pickers[i];
items.push(picker.getSelectedItem() || {});
}
return items;
},
//显示
show: function(callback) {
var self = this;
self.callback = callback;
self.mask.show();
document.body.classList.add($.className('poppicker-active-for-page'));
self.panel.classList.add($.className('active'));
//处理物理返回键
self.__back = $.back;
$.back = function() {
self.hide();
};
},
//隐藏
hide: function() {
var self = this;
if (self.disposed) return;
self.panel.classList.remove($.className('active'));
self.mask.close();
document.body.classList.remove($.className('poppicker-active-for-page'));
//处理物理返回键
$.back=self.__back;
},
dispose: function() {
var self = this;
self.hide();
setTimeout(function() {
self.panel.parentNode.removeChild(self.panel);
for (var name in self) {
self[name] = null;
delete self[name];
};
self.disposed = true;
}, 300);
}
});
})(mui, document);
/**
* 日期时间插件
* varstion 1.0.5
* by Houfeng
* Houfeng@DCloud.io
*/
(function($, document) {
//创建 DOM
$.dom = function(str) {
if (typeof(str) !== 'string') {
if ((str instanceof Array) || (str[0] && str.length)) {
return [].slice.call(str);
} else {
return [str];
}
}
if (!$.__create_dom_div__) {
$.__create_dom_div__ = document.createElement('div');
}
$.__create_dom_div__.innerHTML = str;
return [].slice.call($.__create_dom_div__.childNodes);
};
var domBuffer = '';
//plugin
var DtPicker = $.DtPicker = $.Class.extend({
init: function(options) {
var self = this;
var _picker = $.dom(domBuffer)[0];
document.body.appendChild(_picker);
$('[data-id*="picker"]', _picker).picker();
var ui = self.ui = {
picker: _picker,
mask: $.createMask(),
ok: $('[data-id="btn-ok"]', _picker)[0],
cancel: $('[data-id="btn-cancel"]', _picker)[0],
y: $('[data-id="picker-y"]', _picker)[0],
m: $('[data-id="picker-m"]', _picker)[0],
d: $('[data-id="picker-d"]', _picker)[0],
h: $('[data-id="picker-h"]', _picker)[0],
i: $('[data-id="picker-i"]', _picker)[0],
labels: $('[data-id*="title-"]', _picker),
};
ui.cancel.addEventListener('tap', function() {
self.hide();
}, false);
ui.ok.addEventListener('tap', function() {
var rs = self.callback(self.getSelected());
if (rs !== false) {
self.hide();
}
}, false);
ui.y.addEventListener('change', function(e) { //目前的change事件容易导致级联触发
if (self.options.beginMonth || self.options.endMonth) {
self._createMonth();
} else {
self._createDay();
}
}, false);
ui.m.addEventListener('change', function(e) {
self._createDay();
}, false);
ui.d.addEventListener('change', function(e) {
if (self.options.beginMonth || self.options.endMonth) { //仅提供了beginDate时，触发day,hours,minutes的change
self._createHours();
}
}, false);
ui.h.addEventListener('change', function(e) {
if (self.options.beginMonth || self.options.endMonth) {
self._createMinutes();
}
}, false);
ui.mask[0].addEventListener('tap', function() {
self.hide();
}, false);
self._create(options);
//防止滚动穿透
self.ui.picker.addEventListener($.EVENT_START, function(event) {
event.preventDefault();
}, false);
self.ui.picker.addEventListener($.EVENT_MOVE, function(event) {
event.preventDefault();
}, false);
},
getSelected: function() {
var self = this;
var ui = self.ui;
var type = self.options.type;
var selected = {
type: type,
y: ui.y.picker.getSelectedItem(),
m: ui.m.picker.getSelectedItem(),
d: ui.d.picker.getSelectedItem(),
h: ui.h.picker.getSelectedItem(),
i: ui.i.picker.getSelectedItem(),
toString: function() {
return this.value;
}
};
switch (type) {
case 'datetime':
selected.value = selected.y.value + '-' + selected.m.value + '-' + selected.d.value + ' ' + selected.h.value + ':' + selected.i.value;
selected.text = selected.y.text + '-' + selected.m.text + '-' + selected.d.text + ' ' + selected.h.text + ':' + selected.i.text;
break;
case 'date':
selected.value = selected.y.value + '-' + selected.m.value + '-' + selected.d.value;
selected.text = selected.y.text + '-' + selected.m.text + '-' + selected.d.text;
break;
case 'time':
selected.value = selected.h.value + ':' + selected.i.value;
selected.text = selected.h.text + ':' + selected.i.text;
break;
case 'month':
selected.value = selected.y.value + '-' + selected.m.value;
selected.text = selected.y.text + '-' + selected.m.text;
break;
case 'hour':
selected.value = selected.y.value + '-' + selected.m.value + '-' + selected.d.value + ' ' + selected.h.value;
selected.text = selected.y.text + '-' + selected.m.text + '-' + selected.d.text + ' ' + selected.h.text;
break;
}
return selected;
},
setSelectedValue: function(value) {
var self = this;
var ui = self.ui;
var parsedValue = self._parseValue(value);
//TODO 嵌套过多，因为picker的change时间是异步(考虑到性能)的，所以为了保证change之后再setSelected，目前使用回调处理
ui.y.picker.setSelectedValue(parsedValue.y, 0, function() {
ui.m.picker.setSelectedValue(parsedValue.m, 0, function() {
ui.d.picker.setSelectedValue(parsedValue.d, 0, function() {
ui.h.picker.setSelectedValue(parsedValue.h, 0, function() {
ui.i.picker.setSelectedValue(parsedValue.i, 0);
});
});
});
});
},
isLeapYear: function(year) {
return (year % 4 == 0 && year % 100 != 0) || (year % 400 == 0);
},
_inArray: function(array, item) {
for (var index in array) {
var _item = array[index];
if (_item === item) return true;
}
return false;
},
getDayNum: function(year, month) {
var self = this;
if (self._inArray([1, 3, 5, 7, 8, 10, 12], month)) {
return 31;
} else if (self._inArray([4, 6, 9, 11], month)) {
return 30;
} else if (self.isLeapYear(year)) {
return 29;
} else {
return 28;
}
},
_fill: function(num) {
num = num.toString();
if (num.length < 2) {
num = 0 + num;
}
return num;
},
_isBeginYear: function() {
return this.options.beginYear === parseInt(this.ui.y.picker.getSelectedValue());
},
_isBeginMonth: function() {
return this.options.beginMonth && this._isBeginYear() && this.options.beginMonth === parseInt(this.ui.m.picker.getSelectedValue());
},
_isBeginDay: function() {
return this._isBeginMonth() && this.options.beginDay === parseInt(this.ui.d.picker.getSelectedValue());
},
_isBeginHours: function() {
return this._isBeginDay() && this.options.beginHours === parseInt(this.ui.h.picker.getSelectedValue());
},
_isEndYear: function() {
return this.options.endYear === parseInt(this.ui.y.picker.getSelectedValue());
},
_isEndMonth: function() {
return this.options.endMonth && this._isEndYear() && this.options.endMonth === parseInt(this.ui.m.picker.getSelectedValue());
},
_isEndDay: function() {
return this._isEndMonth() && this.options.endDay === parseInt(this.ui.d.picker.getSelectedValue());
},
_isEndHours: function() {
return this._isEndDay() && this.options.endHours === parseInt(this.ui.h.picker.getSelectedValue());
},
_createYear: function(current) {
var self = this;
var options = self.options;
var ui = self.ui;
//生成年列表
var yArray = [];
if (options.customData.y) {
yArray = options.customData.y;
} else {
var yBegin = options.beginYear;
var yEnd = options.endYear;
for (var y = yBegin; y <= yEnd; y++) {
yArray.push({
text: y + '',
value: y
});
}
}
ui.y.picker.setItems(yArray);
//ui.y.picker.setSelectedValue(current);
},
_createMonth: function(current) {
var self = this;
var options = self.options;
var ui = self.ui;
//生成月列表
var mArray = [];
if (options.customData.m) {
mArray = options.customData.m;
} else {
var m = options.beginMonth && self._isBeginYear() ? options.beginMonth : 1;
var maxMonth = options.endMonth && self._isEndYear() ? options.endMonth : 12;
for (; m <= maxMonth; m++) {
var val = self._fill(m);
mArray.push({
text: val,
value: val
});
}
}
ui.m.picker.setItems(mArray);
//ui.m.picker.setSelectedValue(current);
},
_createDay: function(current) {
var self = this;
var options = self.options;
var ui = self.ui;
//生成日列表
var dArray = [];
if (options.customData.d) {
dArray = options.customData.d;
} else {
var d = self._isBeginMonth() ? options.beginDay : 1;
var maxDay = self._isEndMonth() ? options.endDay : self.getDayNum(parseInt(this.ui.y.picker.getSelectedValue()), parseInt(this.ui.m.picker.getSelectedValue()));
for (; d <= maxDay; d++) {
var val = self._fill(d);
dArray.push({
text: val,
value: val
});
}
}
ui.d.picker.setItems(dArray);
current = current || ui.d.picker.getSelectedValue();
//ui.d.picker.setSelectedValue(current);
},
_createHours: function(current) {
var self = this;
var options = self.options;
var ui = self.ui;
//生成时列表
var hArray = [];
if (options.customData.h) {
hArray = options.customData.h;
} else {
var h = self._isBeginDay() ? options.beginHours : 0;
var maxHours = self._isEndDay() ? options.endHours : 23;
for (; h <= maxHours; h++) {
var val = self._fill(h);
hArray.push({
text: val,
value: val
});
}
}
ui.h.picker.setItems(hArray);
//ui.h.picker.setSelectedValue(current);
},
_createMinutes: function(current) {
var self = this;
var options = self.options;
var ui = self.ui;
//生成分列表
var iArray = [];
if (options.customData.i) {
iArray = options.customData.i;
} else {
var i = self._isBeginHours() ? options.beginMinutes : 0;
var maxMinutes = self._isEndHours() ? options.endMinutes : 59;
for (; i <= maxMinutes; i++) {
var val = self._fill(i);
iArray.push({
text: val,
value: val
});
}
}
ui.i.picker.setItems(iArray);
//ui.i.picker.setSelectedValue(current);
},
_setLabels: function() {
var self = this;
var options = self.options;
var ui = self.ui;
ui.labels.each(function(i, label) {
label.innerText = options.labels[i];
});
},
_setButtons: function() {
var self = this;
var options = self.options;
var ui = self.ui;
ui.cancel.innerText = options.buttons[0];
ui.ok.innerText = options.buttons[1];
},
_parseValue: function(value) {
var self = this;
var rs = {};
if (value) {
var parts = value.replace(":", "-").replace(" ", "-").split("-");
rs.y = parts[0];
rs.m = parts[1];
rs.d = parts[2];
rs.h = parts[3];
rs.i = parts[4];
} else {
var now = new Date();
rs.y = now.getFullYear();
rs.m = now.getMonth() + 1;
rs.d = now.getDate();
rs.h = now.getHours();
rs.i = now.getMinutes();
}
return rs;
},
_create: function(options) {
var self = this;
options = options || {};
options.labels = options.labels || ['年', '月', '日', '时', '分'];
options.buttons = options.buttons || ['取消', '确定'];
options.type = options.type || 'datetime';
options.customData = options.customData || {};
self.options = options;
var now = new Date();
var beginDate = options.beginDate;
if (beginDate instanceof Date && !isNaN(beginDate.valueOf())) { //设定了开始日期
options.beginYear = beginDate.getFullYear();
options.beginMonth = beginDate.getMonth() + 1;
options.beginDay = beginDate.getDate();
options.beginHours = beginDate.getHours();
options.beginMinutes = beginDate.getMinutes();
}
var endDate = options.endDate;
if (endDate instanceof Date && !isNaN(endDate.valueOf())) { //设定了结束日期
options.endYear = endDate.getFullYear();
options.endMonth = endDate.getMonth() + 1;
options.endDay = endDate.getDate();
options.endHours = endDate.getHours();
options.endMinutes = endDate.getMinutes();
}
options.beginYear = options.beginYear || (now.getFullYear() - 5);
options.endYear = options.endYear || (now.getFullYear() + 5);
var ui = self.ui;
//设定label
self._setLabels();
self._setButtons();
//设定类型
ui.picker.setAttribute('data-type', options.type);
//生成
self._createYear();
self._createMonth();
self._createDay();
self._createHours();
self._createMinutes();
//设定默认值
self.setSelectedValue(options.value);
},
//显示
show: function(callback) {
var self = this;
var ui = self.ui;
self.callback = callback || $.noop;
ui.mask.show();
document.body.classList.add($.className('dtpicker-active-for-page'));
ui.picker.classList.add($.className('active'));
//处理物理返回键
self.__back = $.back;
$.back = function() {
self.hide();
};
},
hide: function() {
var self = this;
if (self.disposed) return;
var ui = self.ui;
ui.picker.classList.remove($.className('active'));
ui.mask.close();
document.body.classList.remove($.className('dtpicker-active-for-page'));
//处理物理返回键
$.back = self.__back;
},
dispose: function() {
var self = this;
self.hide();
setTimeout(function() {
self.ui.picker.parentNode.removeChild(self.ui.picker);
for (var name in self) {
self[name] = null;
delete self[name];
};
self.disposed = true;
}, 300);
}
});
})(mui, document);
================================================
FILE: plugin/picker/gulpfile.js
================================================
var gulp = require("gulp");
var pkg = require("./package.json");
var uglify = require("gulp-uglify");
var minifycss = require('gulp-minify-css');
var del = require('del');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var header = require('gulp-header');
//var banner = ['/**',
// ' * <%= pkg.name %> - <%= pkg.description %>',
// ' * @version v<%= pkg.version %>',
// ' * @link <%= pkg.homepage %>',
// ' * @license <%= pkg.license %>',
// ' */',
// ''
//].join('\r\n');
var picker_banner = ['/**',
'* 选择列表插件',
'* varstion 2.0.0',
'* by Houfeng',
'* Houfeng@DCloud.io',
'**/',
''
].join('\r\n');
gulp.task('clear_picker', function(cb) {
del(['dist/js/*.js', 'dist/css/*.css'], cb);
// del(['dist/js/*.js', 'dist/css/*.css']).then(paths => {
// console.log('Deleted files and folders:\n', paths.join('\n'));
// });
});
gulp.task('build', ["clear_picker"], function() {
//css
gulp.src(["./css/mui.picker.css",
"./css/mui.poppicker.css",
"./css/mui.dtpicker.css"
])
.pipe(concat("mui.picker.all.css"))
//.pipe(header(picker_banner))
.pipe(gulp.dest("./dist/css/"))
.pipe(minifycss())
.pipe(rename("mui.picker.min.css"))
.pipe(header(picker_banner))
.pipe(gulp.dest("./dist/css/"));
//js
gulp.src(["./js/mui.picker.js",
"./js/mui.poppicker.js",
"./js/mui.dtpicker.js"
])
.pipe(concat("mui.picker.all.js"))
//.pipe(header(picker_banner))
.pipe(gulp.dest("./dist/js/"))
.pipe(uglify())
.pipe(rename("mui.picker.min.js"))
.pipe(header(picker_banner))
.pipe(gulp.dest("./dist/js/"));
});
gulp.task('default', ["build"]);
================================================
FILE: plugin/picker/js/mui.dtpicker.js
================================================
/**
* 日期时间插件
* varstion 1.0.5
* by Houfeng
* Houfeng@DCloud.io
*/
(function($, document) {
//创建 DOM
$.dom = function(str) {
if (typeof(str) !== 'string') {
if ((str instanceof Array) || (str[0] && str.length)) {
return [].slice.call(str);
} else {
return [str];
}
}
if (!$.__create_dom_div__) {
$.__create_dom_div__ = document.createElement('div');
}
$.__create_dom_div__.innerHTML = str;
return [].slice.call($.__create_dom_div__.childNodes);
};
var domBuffer = '';
//plugin
var DtPicker = $.DtPicker = $.Class.extend({
init: function(options) {
var self = this;
var _picker = $.dom(domBuffer)[0];
document.body.appendChild(_picker);
$('[data-id*="picker"]', _picker).picker();
var ui = self.ui = {
picker: _picker,
mask: $.createMask(),
ok: $('[data-id="btn-ok"]', _picker)[0],
cancel: $('[data-id="btn-cancel"]', _picker)[0],
y: $('[data-id="picker-y"]', _picker)[0],
m: $('[data-id="picker-m"]', _picker)[0],
d: $('[data-id="picker-d"]', _picker)[0],
h: $('[data-id="picker-h"]', _picker)[0],
i: $('[data-id="picker-i"]', _picker)[0],
labels: $('[data-id*="title-"]', _picker),
};
ui.cancel.addEventListener('tap', function() {
self.hide();
}, false);
ui.ok.addEventListener('tap', function() {
var rs = self.callback(self.getSelected());
if (rs !== false) {
self.hide();
}
}, false);
ui.y.addEventListener('change', function(e) { //目前的change事件容易导致级联触发
if (self.options.beginMonth || self.options.endMonth) {
self._createMonth();
} else {
self._createDay();
}
}, false);
ui.m.addEventListener('change', function(e) {
self._createDay();
}, false);
ui.d.addEventListener('change', function(e) {
if (self.options.beginMonth || self.options.endMonth) { //仅提供了beginDate时，触发day,hours,minutes的change
self._createHours();
}
}, false);
ui.h.addEventListener('change', function(e) {
if (self.options.beginMonth || self.options.endMonth) {
self._createMinutes();
}
}, false);
ui.mask[0].addEventListener('tap', function() {
self.hide();
}, false);
self._create(options);
//防止滚动穿透
self.ui.picker.addEventListener($.EVENT_START, function(event) {
event.preventDefault();
}, false);
self.ui.picker.addEventListener($.EVENT_MOVE, function(event) {
event.preventDefault();
}, false);
},
getSelected: function() {
var self = this;
var ui = self.ui;
var type = self.options.type;
var selected = {
type: type,
y: ui.y.picker.getSelectedItem(),
m: ui.m.picker.getSelectedItem(),
d: ui.d.picker.getSelectedItem(),
h: ui.h.picker.getSelectedItem(),
i: ui.i.picker.getSelectedItem(),
toString: function() {
return this.value;
}
};
switch (type) {
case 'datetime':
selected.value = selected.y.value + '-' + selected.m.value + '-' + selected.d.value + ' ' + selected.h.value + ':' + selected.i.value;
selected.text = selected.y.text + '-' + selected.m.text + '-' + selected.d.text + ' ' + selected.h.text + ':' + selected.i.text;
break;
case 'date':
selected.value = selected.y.value + '-' + selected.m.value + '-' + selected.d.value;
selected.text = selected.y.text + '-' + selected.m.text + '-' + selected.d.text;
break;
case 'time':
selected.value = selected.h.value + ':' + selected.i.value;
selected.text = selected.h.text + ':' + selected.i.text;
break;
case 'month':
selected.value = selected.y.value + '-' + selected.m.value;
selected.text = selected.y.text + '-' + selected.m.text;
break;
case 'hour':
selected.value = selected.y.value + '-' + selected.m.value + '-' + selected.d.value + ' ' + selected.h.value;
selected.text = selected.y.text + '-' + selected.m.text + '-' + selected.d.text + ' ' + selected.h.text;
break;
}
return selected;
},
setSelectedValue: function(value) {
var self = this;
var ui = self.ui;
var parsedValue = self._parseValue(value);
//TODO 嵌套过多，因为picker的change时间是异步(考虑到性能)的，所以为了保证change之后再setSelected，目前使用回调处理
ui.y.picker.setSelectedValue(parsedValue.y, 0, function() {
ui.m.picker.setSelectedValue(parsedValue.m, 0, function() {
ui.d.picker.setSelectedValue(parsedValue.d, 0, function() {
ui.h.picker.setSelectedValue(parsedValue.h, 0, function() {
ui.i.picker.setSelectedValue(parsedValue.i, 0);
});
});
});
});
},
isLeapYear: function(year) {
return (year % 4 == 0 && year % 100 != 0) || (year % 400 == 0);
},
_inArray: function(array, item) {
for (var index in array) {
var _item = array[index];
if (_item === item) return true;
}
return false;
},
getDayNum: function(year, month) {
var self = this;
if (self._inArray([1, 3, 5, 7, 8, 10, 12], month)) {
return 31;
} else if (self._inArray([4, 6, 9, 11], month)) {
return 30;
} else if (self.isLeapYear(year)) {
return 29;
} else {
return 28;
}
},
_fill: function(num) {
num = num.toString();
if (num.length < 2) {
num = 0 + num;
}
return num;
},
_isBeginYear: function() {
return this.options.beginYear === parseInt(this.ui.y.picker.getSelectedValue());
},
_isBeginMonth: function() {
return this.options.beginMonth && this._isBeginYear() && this.options.beginMonth === parseInt(this.ui.m.picker.getSelectedValue());
},
_isBeginDay: function() {
return this._isBeginMonth() && this.options.beginDay === parseInt(this.ui.d.picker.getSelectedValue());
},
_isBeginHours: function() {
return this._isBeginDay() && this.options.beginHours === parseInt(this.ui.h.picker.getSelectedValue());
},
_isEndYear: function() {
return this.options.endYear === parseInt(this.ui.y.picker.getSelectedValue());
},
_isEndMonth: function() {
return this.options.endMonth && this._isEndYear() && this.options.endMonth === parseInt(this.ui.m.picker.getSelectedValue());
},
_isEndDay: function() {
return this._isEndMonth() && this.options.endDay === parseInt(this.ui.d.picker.getSelectedValue());
},
_isEndHours: function() {
return this._isEndDay() && this.options.endHours === parseInt(this.ui.h.picker.getSelectedValue());
},
_createYear: function(current) {
var self = this;
var options = self.options;
var ui = self.ui;
//生成年列表
var yArray = [];
if (options.customData.y) {
yArray = options.customData.y;
} else {
var yBegin = options.beginYear;
var yEnd = options.endYear;
for (var y = yBegin; y <= yEnd; y++) {
yArray.push({
text: y + '',
value: y
});
}
}
ui.y.picker.setItems(yArray);
//ui.y.picker.setSelectedValue(current);
},
_createMonth: function(current) {
var self = this;
var options = self.options;
var ui = self.ui;
//生成月列表
var mArray = [];
if (options.customData.m) {
mArray = options.customData.m;
} else {
var m = options.beginMonth && self._isBeginYear() ? options.beginMonth : 1;
var maxMonth = options.endMonth && self._isEndYear() ? options.endMonth : 12;
for (; m <= maxMonth; m++) {
var val = self._fill(m);
mArray.push({
text: val,
value: val
});
}
}
ui.m.picker.setItems(mArray);
//ui.m.picker.setSelectedValue(current);
},
_createDay: function(current) {
var self = this;
var options = self.options;
var ui = self.ui;
//生成日列表
var dArray = [];
if (options.customData.d) {
dArray = options.customData.d;
} else {
var d = self._isBeginMonth() ? options.beginDay : 1;
var maxDay = self._isEndMonth() ? options.endDay : self.getDayNum(parseInt(this.ui.y.picker.getSelectedValue()), parseInt(this.ui.m.picker.getSelectedValue()));
for (; d <= maxDay; d++) {
var val = self._fill(d);
dArray.push({
text: val,
value: val
});
}
}
ui.d.picker.setItems(dArray);
current = current || ui.d.picker.getSelectedValue();
//ui.d.picker.setSelectedValue(current);
},
_createHours: function(current) {
var self = this;
var options = self.options;
var ui = self.ui;
//生成时列表
var hArray = [];
if (options.customData.h) {
hArray = options.customData.h;
} else {
var h = self._isBeginDay() ? options.beginHours : 0;
var maxHours = self._isEndDay() ? options.endHours : 23;
for (; h <= maxHours; h++) {
var val = self._fill(h);
hArray.push({
text: val,
value: val
});
}
}
ui.h.picker.setItems(hArray);
//ui.h.picker.setSelectedValue(current);
},
_createMinutes: function(current) {
var self = this;
var options = self.options;
var ui = self.ui;
//生成分列表
var iArray = [];
if (options.customData.i) {
iArray = options.customData.i;
} else {
var i = self._isBeginHours() ? options.beginMinutes : 0;
var maxMinutes = self._isEndHours() ? options.endMinutes : 59;
for (; i <= maxMinutes; i++) {
var val = self._fill(i);
iArray.push({
text: val,
value: val
});
}
}
ui.i.picker.setItems(iArray);
//ui.i.picker.setSelectedValue(current);
},
_setLabels: function() {
var self = this;
var options = self.options;
var ui = self.ui;
ui.labels.each(function(i, label) {
label.innerText = options.labels[i];
});
},
_setButtons: function() {
var self = this;
var options = self.options;
var ui = self.ui;
ui.cancel.innerText = options.buttons[0];
ui.ok.innerText = options.buttons[1];
},
_parseValue: function(value) {
var self = this;
var rs = {};
if (value) {
var parts = value.replace(":", "-").replace(" ", "-").split("-");
rs.y = parts[0];
rs.m = parts[1];
rs.d = parts[2];
rs.h = parts[3];
rs.i = parts[4];
} else {
var now = new Date();
rs.y = now.getFullYear();
rs.m = now.getMonth() + 1;
rs.d = now.getDate();
rs.h = now.getHours();
rs.i = now.getMinutes();
}
return rs;
},
_create: function(options) {
var self = this;
options = options || {};
options.labels = options.labels || ['年', '月', '日', '时', '分'];
options.buttons = options.buttons || ['取消', '确定'];
options.type = options.type || 'datetime';
options.customData = options.customData || {};
self.options = options;
var now = new Date();
var beginDate = options.beginDate;
if (beginDate instanceof Date && !isNaN(beginDate.valueOf())) { //设定了开始日期
options.beginYear = beginDate.getFullYear();
options.beginMonth = beginDate.getMonth() + 1;
options.beginDay = beginDate.getDate();
options.beginHours = beginDate.getHours();
options.beginMinutes = beginDate.getMinutes();
}
var endDate = options.endDate;
if (endDate instanceof Date && !isNaN(endDate.valueOf())) { //设定了结束日期
options.endYear = endDate.getFullYear();
options.endMonth = endDate.getMonth() + 1;
options.endDay = endDate.getDate();
options.endHours = endDate.getHours();
options.endMinutes = endDate.getMinutes();
}
options.beginYear = options.beginYear || (now.getFullYear() - 5);
options.endYear = options.endYear || (now.getFullYear() + 5);
var ui = self.ui;
//设定label
self._setLabels();
self._setButtons();
//设定类型
ui.picker.setAttribute('data-type', options.type);
//生成
self._createYear();
self._createMonth();
self._createDay();
self._createHours();
self._createMinutes();
//设定默认值
self.setSelectedValue(options.value);
},
//显示
show: function(callback) {
var self = this;
var ui = self.ui;
self.callback = callback || $.noop;
ui.mask.show();
document.body.classList.add($.className('dtpicker-active-for-page'));
ui.picker.classList.add($.className('active'));
//处理物理返回键
self.__back = $.back;
$.back = function() {
self.hide();
};
},
hide: function() {
var self = this;
if (self.disposed) return;
var ui = self.ui;
ui.picker.classList.remove($.className('active'));
ui.mask.close();
document.body.classList.remove($.className('dtpicker-active-for-page'));
//处理物理返回键
$.back = self.__back;
},
dispose: function() {
var self = this;
self.hide();
setTimeout(function() {
self.ui.picker.parentNode.removeChild(self.ui.picker);
for (var name in self) {
self[name] = null;
delete self[name];
};
self.disposed = true;
}, 300);
}
});
})(mui, document);
================================================
FILE: plugin/picker/js/mui.picker.js
================================================
/**
* 选择列表插件
* varstion 2.0.0
* by Houfeng
* Houfeng@DCloud.io
*/
(function($, window, document, undefined) {
var MAX_EXCEED = 30;
var VISIBLE_RANGE = 90;
var DEFAULT_ITEM_HEIGHT = 40;
var BLUR_WIDTH = 10;
var rad2deg = $.rad2deg = function(rad) {
return rad / (Math.PI / 180);
};
var deg2rad = $.deg2rad = function(deg) {
return deg * (Math.PI / 180);
};
var platform = navigator.platform.toLowerCase();
var userAgent = navigator.userAgent.toLowerCase();
var isIos = (userAgent.indexOf('iphone') > -1 ||
userAgent.indexOf('ipad') > -1 ||
userAgent.indexOf('ipod') > -1) &&
(platform.indexOf('iphone') > -1 ||
platform.indexOf('ipad') > -1 ||
platform.indexOf('ipod') > -1);
//alert(isIos);
var Picker = $.Picker = function(holder, options) {
var self = this;
self.holder = holder;
self.options = options || {};
self.init();
self.initInertiaParams();
self.calcElementItemPostion(true);
self.bindEvent();
};
Picker.prototype.findElementItems = function() {
var self = this;
self.elementItems = [].slice.call(self.holder.querySelectorAll('li'));
return self.elementItems;
};
Picker.prototype.init = function() {
var self = this;
self.list = self.holder.querySelector('ul');
self.findElementItems();
self.height = self.holder.offsetHeight;
self.r = self.height / 2 - BLUR_WIDTH;
self.d = self.r * 2;
self.itemHeight = self.elementItems.length > 0 ? self.elementItems[0].offsetHeight : DEFAULT_ITEM_HEIGHT;
self.itemAngle = parseInt(self.calcAngle(self.itemHeight * 0.8));
self.hightlightRange = self.itemAngle / 2;
self.visibleRange = VISIBLE_RANGE;
self.beginAngle = 0;
self.beginExceed = self.beginAngle - MAX_EXCEED;
self.list.angle = self.beginAngle;
if (isIos) {
self.list.style.webkitTransformOrigin = "center center " + self.r + "px";
}
};
Picker.prototype.calcElementItemPostion = function(andGenerateItms) {
var self = this;
if (andGenerateItms) {
self.items = [];
}
self.elementItems.forEach(function(item) {
var index = self.elementItems.indexOf(item);
self.endAngle = self.itemAngle * index;
item.angle = self.endAngle;
item.style.webkitTransformOrigin = "center center -" + self.r + "px";
item.style.webkitTransform = "translateZ(" + self.r + "px) rotateX(" + (-self.endAngle) + "deg)";
if (andGenerateItms) {
var dataItem = {};
dataItem.text = item.innerHTML || '';
dataItem.value = item.getAttribute('data-value') || dataItem.text;
self.items.push(dataItem);
}
});
self.endExceed = self.endAngle + MAX_EXCEED;
self.calcElementItemVisibility(self.beginAngle);
};
Picker.prototype.calcAngle = function(c) {
var self = this;
var a = b = parseFloat(self.r);
//直径的整倍数部分直接乘以 180
c = Math.abs(c); //只算角度不关心正否值
var intDeg = parseInt(c / self.d) * 180;
c = c % self.d;
//余弦
var cosC = (a * a + b * b - c * c) / (2 * a * b);
var angleC = intDeg + rad2deg(Math.acos(cosC));
return angleC;
};
Picker.prototype.calcElementItemVisibility = function(angle) {
var self = this;
self.elementItems.forEach(function(item) {
var difference = Math.abs(item.angle - angle);
if (difference < self.hightlightRange) {
item.classList.add('highlight');
} else if (difference < self.visibleRange) {
item.classList.add('visible');
item.classList.remove('highlight');
} else {
item.classList.remove('highlight');
item.classList.remove('visible');
}
});
};
Picker.prototype.setAngle = function(angle) {
var self = this;
self.list.angle = angle;
self.list.style.webkitTransform = "perspective(1000px) rotateY(0deg) rotateX(" + angle + "deg)";
self.calcElementItemVisibility(angle);
};
Picker.prototype.bindEvent = function() {
var self = this;
var lastAngle = 0;
var startY = null;
var isPicking = false;
self.holder.addEventListener($.EVENT_START, function(event) {
isPicking = true;
event.preventDefault();
self.list.style.webkitTransition = '';
startY = (event.changedTouches ? event.changedTouches[0] : event).pageY;
lastAngle = self.list.angle;
self.updateInertiaParams(event, true);
}, false);
self.holder.addEventListener($.EVENT_END, function(event) {
isPicking = false;
event.preventDefault();
self.startInertiaScroll(event);
}, false);
self.holder.addEventListener($.EVENT_CANCEL, function(event) {
isPicking = false;
event.preventDefault();
self.startInertiaScroll(event);
}, false);
self.holder.addEventListener($.EVENT_MOVE, function(event) {
if (!isPicking) {
return;
}
event.preventDefault();
var endY = (event.changedTouches ? event.changedTouches[0] : event).pageY;
var dragRange = endY - startY;
var dragAngle = self.calcAngle(dragRange);
var newAngle = dragRange > 0 ? lastAngle - dragAngle : lastAngle + dragAngle;
if (newAngle > self.endExceed) {
newAngle = self.endExceed
}
if (newAngle < self.beginExceed) {
newAngle = self.beginExceed
}
self.setAngle(newAngle);
self.updateInertiaParams(event);
}, false);
//--
self.list.addEventListener('tap', function(event) {
elementItem = event.target;
if (elementItem.tagName == 'LI') {
self.setSelectedIndex(self.elementItems.indexOf(elementItem), 200);
}
}, false);
};
Picker.prototype.initInertiaParams = function() {
var self = this;
self.lastMoveTime = 0;
self.lastMoveStart = 0;
self.stopInertiaMove = false;
};
Picker.prototype.updateInertiaParams = function(event, isStart) {
var self = this;
var point = event.changedTouches ? event.changedTouches[0] : event;
if (isStart) {
self.lastMoveStart = point.pageY;
self.lastMoveTime = event.timeStamp || Date.now();
self.startAngle = self.list.angle;
} else {
var nowTime = event.timeStamp || Date.now();
if (nowTime - self.lastMoveTime > 300) {
self.lastMoveTime = nowTime;
self.lastMoveStart = point.pageY;
}
}
self.stopInertiaMove = true;
};
Picker.prototype.startInertiaScroll = function(event) {
var self = this;
var point = event.changedTouches ? event.changedTouches[0] : event;
/**
* 缓动代码
*/
var nowTime = event.timeStamp || Date.now();
var v = (point.pageY - self.lastMoveStart) / (nowTime - self.lastMoveTime); //最后一段时间手指划动速度
var dir = v > 0 ? -1 : 1; //加速度方向
var deceleration = dir * 0.0006 * -1;
var duration = Math.abs(v / deceleration); // 速度消减至0所需时间
var dist = v * duration / 2; //最终移动多少
var startAngle = self.list.angle;
var distAngle = self.calcAngle(dist) * dir;
//----
var srcDistAngle = distAngle;
if (startAngle + distAngle < self.beginExceed) {
distAngle = self.beginExceed - startAngle;
duration = duration * (distAngle / srcDistAngle) * 0.6;
}
if (startAngle + distAngle > self.endExceed) {
distAngle = self.endExceed - startAngle;
duration = duration * (distAngle / srcDistAngle) * 0.6;
}
//----
if (distAngle == 0) {
self.endScroll();
return;
}
self.scrollDistAngle(nowTime, startAngle, distAngle, duration);
};
Picker.prototype.scrollDistAngle = function(nowTime, startAngle, distAngle, duration) {
var self = this;
self.stopInertiaMove = false;
(function(nowTime, startAngle, distAngle, duration) {
var frameInterval = 13;
var stepCount = duration / frameInterval;
var stepIndex = 0;
(function inertiaMove() {
if (self.stopInertiaMove) return;
var newAngle = self.quartEaseOut(stepIndex, startAngle, distAngle, stepCount);
self.setAngle(newAngle);
stepIndex++;
if (stepIndex > stepCount - 1 || newAngle < self.beginExceed || newAngle > self.endExceed) {
self.endScroll();
return;
}
setTimeout(inertiaMove, frameInterval);
})();
})(nowTime, startAngle, distAngle, duration);
};
Picker.prototype.quartEaseOut = function(t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
};
Picker.prototype.endScroll = function() {
var self = this;
if (self.list.angle < self.beginAngle) {
self.list.style.webkitTransition = "150ms ease-out";
self.setAngle(self.beginAngle);
} else if (self.list.angle > self.endAngle) {
self.list.style.webkitTransition = "150ms ease-out";
self.setAngle(self.endAngle);
} else {
var index = parseInt((self.list.angle / self.itemAngle).toFixed(0));
self.list.style.webkitTransition = "100ms ease-out";
self.setAngle(self.itemAngle * index);
}
self.triggerChange();
};
Picker.prototype.triggerChange = function(force) {
var self = this;
setTimeout(function() {
var index = self.getSelectedIndex();
var item = self.items[index];
if ($.trigger && (index != self.lastIndex || force === true)) {
$.trigger(self.holder, 'change', {
"index": index,
"item": item
});
//console.log('change:' + index);
}
self.lastIndex = index;
typeof force === 'function' && force();
}, 0);
};
Picker.prototype.correctAngle = function(angle) {
var self = this;
if (angle < self.beginAngle) {
return self.beginAngle;
} else if (angle > self.endAngle) {
return self.endAngle;
} else {
return angle;
}
};
Picker.prototype.setItems = function(items) {
var self = this;
self.items = items || [];
var buffer = [];
self.items.forEach(function(item) {
if (item !== null && item !== undefined) {
buffer.push('' + (item.text || item) + ' ');
}
});
self.list.innerHTML = buffer.join('');
self.findElementItems();
self.calcElementItemPostion();
self.setAngle(self.correctAngle(self.list.angle));
self.triggerChange(true);
};
Picker.prototype.getItems = function() {
var self = this;
return self.items;
};
Picker.prototype.getSelectedIndex = function() {
var self = this;
return parseInt((self.list.angle / self.itemAngle).toFixed(0));
};
Picker.prototype.setSelectedIndex = function(index, duration, callback) {
var self = this;
self.list.style.webkitTransition = '';
var angle = self.correctAngle(self.itemAngle * index);
if (duration && duration > 0) {
var distAngle = angle - self.list.angle;
self.scrollDistAngle(Date.now(), self.list.angle, distAngle, duration);
} else {
self.setAngle(angle);
}
self.triggerChange(callback);
};
Picker.prototype.getSelectedItem = function() {
var self = this;
return self.items[self.getSelectedIndex()];
};
Picker.prototype.getSelectedValue = function() {
var self = this;
return (self.items[self.getSelectedIndex()] || {}).value;
};
Picker.prototype.getSelectedText = function() {
var self = this;
return (self.items[self.getSelectedIndex()] || {}).text;
};
Picker.prototype.setSelectedValue = function(value, duration, callback) {
var self = this;
for (var index in self.items) {
var item = self.items[index];
if (item.value == value) {
self.setSelectedIndex(index, duration, callback);
return;
}
}
};
if ($.fn) {
$.fn.picker = function(options) {
//遍历选择的元素
this.each(function(i, element) {
if (element.picker) return;
if (options) {
element.picker = new Picker(element, options);
} else {
var optionsText = element.getAttribute('data-picker-options');
var _options = optionsText ? JSON.parse(optionsText) : {};
element.picker = new Picker(element, _options);
}
});
return this[0] ? this[0].picker : null;
};
//自动初始化
$.ready(function() {
$('.mui-picker').picker();
});
}
})(window.mui || window, window, document, undefined);
//end
================================================
FILE: plugin/picker/js/mui.poppicker.js
================================================
/**
* 弹出选择列表插件
* 此组件依赖 listpcker ，请在页面中先引入 mui.picker.css + mui.picker.js
* varstion 1.0.1
* by Houfeng
* Houfeng@DCloud.io
*/
(function($, document) {
//创建 DOM
$.dom = function(str) {
if (typeof(str) !== 'string') {
if ((str instanceof Array) || (str[0] && str.length)) {
return [].slice.call(str);
} else {
return [str];
}
}
if (!$.__create_dom_div__) {
$.__create_dom_div__ = document.createElement('div');
}
$.__create_dom_div__.innerHTML = str;
return [].slice.call($.__create_dom_div__.childNodes);
};
var panelBuffer = '';
var pickerBuffer = '';
//定义弹出选择器类
var PopPicker = $.PopPicker = $.Class.extend({
//构造函数
init: function(options) {
var self = this;
self.options = options || {};
self.options.buttons = self.options.buttons || ['取消', '确定'];
self.panel = $.dom(panelBuffer)[0];
document.body.appendChild(self.panel);
self.ok = self.panel.querySelector('.mui-poppicker-btn-ok');
self.cancel = self.panel.querySelector('.mui-poppicker-btn-cancel');
self.body = self.panel.querySelector('.mui-poppicker-body');
self.mask = $.createMask();
self.cancel.innerText = self.options.buttons[0];
self.ok.innerText = self.options.buttons[1];
self.cancel.addEventListener('tap', function(event) {
self.hide();
}, false);
self.ok.addEventListener('tap', function(event) {
if (self.callback) {
var rs = self.callback(self.getSelectedItems());
if (rs !== false) {
self.hide();
}
}
}, false);
self.mask[0].addEventListener('tap', function() {
self.hide();
}, false);
self._createPicker();
//防止滚动穿透
self.panel.addEventListener($.EVENT_START, function(event) {
event.preventDefault();
}, false);
self.panel.addEventListener($.EVENT_MOVE, function(event) {
event.preventDefault();
}, false);
},
_createPicker: function() {
var self = this;
var layer = self.options.layer || 1;
var width = (100 / layer) + '%';
self.pickers = [];
for (var i = 1; i <= layer; i++) {
var pickerElement = $.dom(pickerBuffer)[0];
pickerElement.style.width = width;
self.body.appendChild(pickerElement);
var picker = $(pickerElement).picker();
self.pickers.push(picker);
pickerElement.addEventListener('change', function(event) {
var nextPickerElement = this.nextSibling;
if (nextPickerElement && nextPickerElement.picker) {
var eventData = event.detail || {};
var preItem = eventData.item || {};
nextPickerElement.picker.setItems(preItem.children);
}
}, false);
}
},
//填充数据
setData: function(data) {
var self = this;
data = data || [];
self.pickers[0].setItems(data);
},
//获取选中的项（数组）
getSelectedItems: function() {
var self = this;
var items = [];
for (var i in self.pickers) {
var picker = self.pickers[i];
items.push(picker.getSelectedItem() || {});
}
return items;
},
//显示
show: function(callback) {
var self = this;
self.callback = callback;
self.mask.show();
document.body.classList.add($.className('poppicker-active-for-page'));
self.panel.classList.add($.className('active'));
//处理物理返回键
self.__back = $.back;
$.back = function() {
self.hide();
};
},
//隐藏
hide: function() {
var self = this;
if (self.disposed) return;
self.panel.classList.remove($.className('active'));
self.mask.close();
document.body.classList.remove($.className('poppicker-active-for-page'));
//处理物理返回键
$.back=self.__back;
},
dispose: function() {
var self = this;
self.hide();
setTimeout(function() {
self.panel.parentNode.removeChild(self.panel);
for (var name in self) {
self[name] = null;
delete self[name];
};
self.disposed = true;
}, 300);
}
});
})(mui, document);
================================================
FILE: plugin/picker/package.json
================================================
{
"name": "Hello-MUI",
"version": "1.0.1",
"description": "Hello-MUI!",
"main": "index.js",
"dependencies": {},
"devDependencies": {
"del": "^1.2.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^2.3.1",
"gulp-concat": "^2.6.0",
"gulp-header": "^1.2.2",
"gulp-htmlmin": "^1.1.3",
"gulp-minify-css": "^1.2.1",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.5.3",
"gulp-util": "^3.0.6"
},
"scripts": {
"test": "test"
},
"keywords": [
"Hello-MUI"
],
"author": "MUI Team",
"license": "MIT"
}
================================================
FILE: plugin/share/plusShare.js
================================================
(function() {
var plusReady = function(callback) {
if (window.plus) {
callback();
} else {
document.addEventListener('plusready', callback);
}
}
var shareServices = {};
var init = function() {
plus.share.getServices(function(services) {
for (var i = 0, len = services.length; i < len; i++) {
shareServices[services[i].id] = services[i];
}
});
};
var isWechatInstalled = function() {
return plus.runtime.isApplicationExist && plus.runtime.isApplicationExist({
pname: 'com.tencent.mm',
action: 'weixin://'
});
};
function share(id, msg, callback) {
var service = shareServices[id];
if (!service) {
plus.nativeUI.alert('无效的分享服务[' + id + ']');
callback && callback(false);
return;
}
var _share = function() {
service.send(msg, function() {
plus.nativeUI.toast("分享到\"" + service.description + "\"成功！");
callback && callback(true);
}, function(e) {
plus.nativeUI.toast("分享到\"" + service.description + "\"失败！");
callback && callback(false);
})
};
if (service.authenticated) {
_share(service, msg, callback);
} else {
service.authorize(function() {
_share(service, msg, callback);
}, function(e) {
plus.nativeUI.alert("认证授权失败");
callback && callback(false);
})
}
};
function openSystem(msg, callback) {
if (plus.share.sendWithSystem) {
plus.share.sendWithSystem(msg, function() {
//TODO 系统分享暂不支持回调
//callback && callback(true);
}, function() {
//TODO 系统分享暂不支持回调
//callback && callback(false);
});
} else {
callback && callback(false);
}
}
var open = function(msg, callback) {
if (shareServices.weixin && isWechatInstalled()) {
plus.nativeUI.actionSheet({
title: '分享到',
cancel: "取消",
buttons: [{
title: "微信消息"
}, {
title: "微信朋友圈"
}, {
title: "更多分享"
}]
}, function(e) {
var index = e.index;
switch (index) {
case 1: //分享到微信好友
msg.extra = {
scene: 'WXSceneSession'
};
share('weixin', msg, callback);
break;
case 2: //分享到微信朋友圈
msg.title = msg.content;
msg.extra = {
scene: 'WXSceneTimeline'
};
share('weixin', msg, callback);
break;
case 3: //更多分享
var url = msg.href ? ('( ' + msg.href + ' )') : '';
msg.title = msg.title + url;
msg.content = msg.content + url;
openSystem(msg, callback);
break;
}
})
} else {
//系统分享
var url = msg.href ? ('( ' + msg.href + ' )') : '';
msg.title = msg.title + url;
msg.content = msg.content + url;
openSystem(msg, callback);
}
};
plusReady(init);
window.plusShare = open;
})();
================================================
FILE: sass/badges.scss
================================================
//
// Badges
// --------------------------------------------------
.#{$namespace}badge {
display: inline-block;
padding: 3px 6px;
font-size: 12px;
line-height: 1;
color: #333;
background-color: rgba(0,0,0,.15);
border-radius: 100px;
// Inverted badges have no background.
&.#{$namespace}badge-inverted {
padding: 0 5px 0 0;
color: $default-color;
background-color: transparent;
}
}
// Badge modifiers
// --------------------------------------------------
// Main badge
.#{$namespace}badge-primary,.#{$namespace}badge-blue {
color: #fff;
background-color: $primary-color;
&.#{$namespace}badge-inverted {
color: $primary-color;
background-color: transparent;
}
}
// success badge
.#{$namespace}badge-success,.#{$namespace}badge-green {
color: #fff;
background-color: $positive-color;
&.#{$namespace}badge-inverted {
color: $positive-color;
background-color: transparent;
}
}
//waring
.#{$namespace}badge-warning,.#{$namespace}badge-yellow {
color: #fff;
background-color: $warning-color;
&.#{$namespace}badge-inverted {
color: $warning-color;
background-color: transparent;
}
}
// Negative badge
.#{$namespace}badge-danger,.#{$namespace}badge-red {
color: #fff;
background-color: $negative-color;
&.#{$namespace}badge-inverted {
color: $negative-color;
background-color: transparent;
}
}
.#{$namespace}badge-royal,.#{$namespace}badge-purple {
color: #fff;
background-color: $royal-color;
&.#{$namespace}badge-inverted {
color: $royal-color;
background-color: transparent;
}
}
.#{$namespace}icon .#{$namespace}badge{
position: absolute;
left: 100%;
margin-left: -10px;
top: -2px;
font-size: 10px;
line-height: 1.4;
padding: 1px 5px;
background: red;
color: white;
}
================================================
FILE: sass/bars.scss
================================================
//
// Bars
// --------------------------------------------------
.#{$namespace}bar {
position: fixed;
right: 0;
left: 0;
z-index: z("bar","bar");
height: $bar-base-height;
padding-right: $bar-side-spacing;
padding-left: $bar-side-spacing;
background-color: $chrome-color;
border-bottom: 0;
@include box-shadow(0 0 1px rgba(0,0,0,.85));
-webkit-backface-visibility: hidden; // Make sure the bar is visible when a modal animates in.
backface-visibility: hidden;
}
//fixed by fxy
.#{$namespace}bar {
.#{$namespace}title {
width: auto;
left: 40px;
right: 40px;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.#{$namespace}backdrop {
background: none;
}
}
// Modifier class to dock any bar below .#{$namespace}bar-nav
.#{$namespace}bar-header-secondary {
top: $bar-base-height;
}
// Modifier class for footer bars
.#{$namespace}bar-footer {
bottom: 0;
}
// Modifier class to dock any bar above a standard bar
.#{$namespace}bar-footer-secondary {
bottom: $bar-base-height;
}
// Modifier class to dock any bar above a .#{$namespace}bar-tab
.#{$namespace}bar-footer-secondary-tab {
bottom: $bar-tab-height;
}
// Give the footers the correct border
.#{$namespace}bar-footer,
.#{$namespace}bar-footer-secondary,
.#{$namespace}bar-footer-secondary-tab {
border-top: 0;
}
// Nav bar
// --------------------------------------------------
// Bar docked to top of viewport for showing page title and actions
.#{$namespace}bar-transparent {
top: 0;
background-color: rgba(247,247,247,0); //应该设置成变量
-webkit-box-shadow: none;
box-shadow: none;
}
.#{$namespace}bar-nav {
top: 0;
-webkit-box-shadow: 0 1px 6px #CCC;
box-shadow: 0 1px 6px #CCC;
~ .#{$namespace}content .#{$namespace}anchor {
display: block;
height: 45px;
margin-top: -45px;
visibility: hidden;
}
&.#{$namespace}bar .#{$namespace}icon {
margin-left: -10px;
margin-right: -10px;
padding-left: 10px;
padding-right: 10px;
}
}
// Centered text in the .#{$namespace}bar-nav
//
// We position the absolutely to make sure the title is always centered
.#{$namespace}title {
position: absolute;
display: block;
width: 100%;
padding: 0;
margin: 0 (-$bar-side-spacing);
font-size: $font-size-default;
font-weight: $font-weight;
line-height: $bar-base-height;
color: #000;
text-align: center;
white-space: nowrap;
}
// Retain specified title color
.#{$namespace}title a {
color: inherit;
}
// Tab bar
// --------------------------------------------------
// Bar docked to bottom and used for primary app navigation
.#{$namespace}bar-tab {
display: table;
bottom: 0;
width: 100%;
height: $bar-tab-height;
padding: 0;
table-layout: fixed;
border-top: 0;
border-bottom: 0;
-webkit-touch-callout: none; //选项卡上禁止长按弹出菜单；
// Navigational tab (Nested to be more specific for the icons in tab-items)
.#{$namespace}tab-item {
display: table-cell;
width: 1%;
height: $bar-tab-height;
color: #929292;
text-align: center;
vertical-align: middle;
//自动处理超出部分的文字；
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// Active states for the tab bar
&.#{$namespace}active {
color: $primary-color;
}
// Tab icon
.#{$namespace}icon {
top: 3px;
width: 24px;
height: 24px;
padding-top: 0;
padding-bottom: 0;
// Make the text smaller if it's used with an icon
~ .#{$namespace}tab-label {
display: block;
font-size: 11px;
//处理超出部分文字；
overflow: hidden;
text-overflow: ellipsis;
}
&:active {
background: none;
}
}
}
}
.#{$namespace}focusin>.#{$namespace}bar-nav,
.#{$namespace}focusin>.#{$namespace}bar-header-secondary {
position: absolute;
}
.#{$namespace}focusin>.#{$namespace}bar~.#{$namespace}content {
padding-bottom: 0;
}
// Bars with buttons
// --------------------------------------------------
.#{$namespace}bar .#{$namespace}btn {
position: relative;
top: 7px;
z-index: z("bar","btn"); // Position the buttons on top of .#{$namespace}title
padding: 6px 12px 7px;
margin-top: 0;
font-weight: $font-weight-light;
// Give buttons that are floated left and right side margin
&.#{$namespace}pull-right {
margin-left: $bar-side-spacing;
}
&.#{$namespace}pull-left {
margin-right: $bar-side-spacing;
}
}
// Bars with link buttons (Line the text up with content)
.#{$namespace}bar .#{$namespace}btn-link {
top: 0;
padding: 0;
font-size: 16px;
line-height: $bar-base-height;
color: $primary-color;
border: 0;
&:active,
&.#{$namespace}active {
color: darken($primary-color, 10%);
}
}
// Bars with block buttons
//
// Add proper padding
.#{$namespace}bar .#{$namespace}btn-block {
top: 6px;
padding: 5px 0;
margin-bottom: 0;
font-size: 16px; // Scale down font size to fit in bar.
}
// Nav buttons (Only applicable within bars)
//
// Buttons inside bars that sit closer against the viewport.
.#{$namespace}bar .#{$namespace}btn-nav {
&.#{$namespace}pull-left {
margin-left: -5px;
.#{$namespace}icon-left-nav {
margin-right: -3px;
}
}
&.#{$namespace}pull-right {
margin-right: -5px;
.#{$namespace}icon-right-nav {
margin-left: -3px;
}
}
&:active {
opacity: 0.3;
//background-color: rgba(0,0,0,.07);
}
}
// Bars with Muiicons
// --------------------------------------------------
.#{$namespace}bar {
.#{$namespace}icon {
position: relative;
z-index: z("bar","icon"); // Position the buttons on top of .#{$namespace}title
padding-top: 10px;
padding-bottom: 10px;
font-size: 24px;
&:active {
opacity: 0.3;
//background-color: rgba(0,0,0,.07);
}
}
// Vertical center the larger icons in btns.
.#{$namespace}btn .#{$namespace}icon {
top: 1px;
padding: 0;
margin: 0;
}
// Handle carets in the titles
.#{$namespace}title .#{$namespace}icon {
padding: 0;
margin: 0;
// Specific postioning of the caret icon within a title. Used with popover.js.
&.#{$namespace}icon-caret {
top: 4px;
margin-left: -5px;
}
}
}
// Bars for search forms
// --------------------------------------------------
// Position/size search bar within the bar
.#{$namespace}bar input[type="search"] {
height: 29px;
margin: 6px 0;
}
.#{$namespace}bar .#{$namespace}input-row .#{$namespace}btn {
padding: 12px 10px;
}
.#{$namespace}bar .#{$namespace}search:before {
margin-top: -10px;
}
.#{$namespace}bar .#{$namespace}input-row .#{$namespace}input-clear~.#{$namespace}icon-clear,
.#{$namespace}bar .#{$namespace}input-row .#{$namespace}input-speech~.#{$namespace}icon-speech {
top: 0;
right: 12px;
}
.#{$namespace}bar.#{$namespace}bar-header-secondary .#{$namespace}input-row .#{$namespace}input-clear~.#{$namespace}icon-clear,
.#{$namespace}bar.#{$namespace}bar-header-secondary .#{$namespace}input-row .#{$namespace}input-speech~.#{$namespace}icon-speech {
top: 0;
right: 0;
}
// Bars with segmented controls
// --------------------------------------------------
// Position the control correctly inside a bar.
.#{$namespace}bar .#{$namespace}segmented-control {
top: 7px;
margin: 0 auto;
width: auto;
}
.#{$namespace}bar.#{$namespace}bar-header-secondary .#{$namespace}segmented-control {
top: 0;
}
================================================
FILE: sass/base.scss
================================================
//
// Base styles
// --------------------------------------------------
// Use box sizing on all the things!
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;//禁止选择文字
outline: none;
}
// We fix position the body and scroll `.#{$namespace}content`.
body {
font-family: $font-family-default;
font-size: $font-size-default;
line-height: $line-height-default;
color: #000;
background-color: #efeff4;
-webkit-overflow-scrolling: touch;
}
// Universal link styling
a {
color: $primary-color;
text-decoration: none;
&:active {
color: darken($primary-color, 10%);
}
}
// Wrapper to be used around all content not in .#{$namespace}bar-title and .#{$namespace}bar-tab
.#{$namespace}content {
background-color: #efeff4;
-webkit-overflow-scrolling: touch;
}
// Hack to force all relatively and absolutely positioned elements still render while scrolling
// Note: This is a bug for "-webkit-overflow-scrolling: touch"
// .#{$namespace}content > * {
// @include transform(translateZ(0));
// }
// Pad top/bottom of content so it doesn't hide behind bars.
// Note: For these to work, content must come after both bars in the markup
.#{$namespace}bar-nav ~ .#{$namespace}content {
padding-top: $bar-base-height;
&.#{$namespace}scroll-wrapper{
.#{$namespace}scrollbar-vertical{
top:$bar-base-height;
}
}
}
.#{$namespace}bar-header-secondary ~ .#{$namespace}content {
padding-top: ($bar-base-height*2);
&.#{$namespace}scroll-wrapper{
.#{$namespace}scrollbar-vertical{
top:($bar-base-height*2);
}
}
}
// Footer bar padding
.#{$namespace}bar-footer ~ .#{$namespace}content {
padding-bottom: $bar-base-height;
&.#{$namespace}scroll-wrapper{
.#{$namespace}scrollbar-vertical{
bottom:$bar-base-height;
}
}
}
.#{$namespace}bar-footer-secondary ~ .#{$namespace}content {
padding-bottom: ($bar-base-height*2);
&.#{$namespace}scroll-wrapper{
.#{$namespace}scrollbar-vertical{
bottom:($bar-base-height*2);
}
}
}
// Tab bar padding
.#{$namespace}bar-tab ~ .#{$namespace}content {
padding-bottom: $bar-tab-height;
&.#{$namespace}scroll-wrapper{
.#{$namespace}scrollbar-vertical{
bottom:$bar-tab-height;
}
}
}
.#{$namespace}bar-footer-secondary-tab ~ .#{$namespace}content {
padding-bottom: ($bar-tab-height+$bar-base-height);
&.#{$namespace}scroll-wrapper{
.#{$namespace}scrollbar-vertical{
bottom:($bar-tab-height+$bar-base-height);
}
}
}
// Utility classes
.#{$namespace}content-padded {
//暂时放弃content-padded
margin: $bar-side-spacing;
}
.#{$namespace}inline {
display: inline-block;
vertical-align: top;
}
.#{$namespace}block {
display: block!important;
}
.#{$namespace}visibility {
visibility: visible!important;
}
.#{$namespace}hidden {
display: none!important;
}
.#{$namespace}ellipsis{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.#{$namespace}ellipsis-2{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal!important;
word-wrap: break-word;
}
.#{$namespace}table{
display: table;
table-layout: fixed;
width: 100%;
}
.#{$namespace}table-cell{
display: table-cell;
position: relative;
}
.#{$namespace}text-left{
text-align: left!important;
}
.#{$namespace}text-center{
text-align: center!important;
}
.#{$namespace}text-justify{
text-align: justify!important;
}
.#{$namespace}text-right{
text-align: right!important;
}
.#{$namespace}pull-left {
float: left;
}
.#{$namespace}pull-right {
float: right;
}
.#{$namespace}list-unstyled {
padding-left: 0;
list-style: none;
}
.#{$namespace}list-inline {
padding-left: 0;
list-style: none;
margin-left: -5px;
}
.#{$namespace}list-inline > li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
.#{$namespace}clearfix {
@include clearfix();
}
.#{$namespace}bg-primary {
background-color:$primary-color;
}
.#{$namespace}bg-positive{
background-color:$positive-color;
}
.#{$namespace}bg-negative{
background-color:$negative-color;
}
.#{$namespace}error{
margin: 88px 35px;
padding:10px;
border-radius:6px;
background-color:#bbb;
}
.#{$namespace}subtitle{
font-size: 15px;
}
================================================
FILE: sass/buttons.scss
================================================
//
// Buttons
// --------------------------------------------------
input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.#{$namespace}btn {
position: relative;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0; // For input.#{$namespace}btn
font-size: $button-font-size;
font-weight: $font-weight-light;
line-height: 1.42; //增大，和bootstrap保持一致；
color: #333;
text-align: center;
white-space: nowrap;
vertical-align: top;
cursor: pointer;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ccc;
border-top-left-radius: 3px; //fixed android 4.2
border-top-right-radius: 3px; //fixed android 4.2
border-bottom-right-radius: 3px; //fixed android 4.2
border-bottom-left-radius: 3px; //fixed android 4.2
border-radius: 3px;
@include transition(all);
@include transition-duration(.2s);
@include transition-timing-function(linear);
// Active & filled button styles
&:enabled:active,
&.#{$namespace}active:enabled {
color: #fff;
background-color: $default-color;
}
// Disabled styles & filled button active styles
&:disabled,
&.#{$namespace}disabled {
opacity: 0.6;
}
}
// Other button types
// --------------------------------------------------
// Primary button (Default color is blue)
input[type="submit"],
.#{$namespace}btn-primary,
.#{$namespace}btn-blue {
@include btn($primary-color);
}
// Positive button (Default color is green)
.#{$namespace}btn-positive,
.#{$namespace}btn-success,
.#{$namespace}btn-green {
@include btn($positive-color);
}
.#{$namespace}btn-warning,
.#{$namespace}btn-yellow {
@include btn($warning-color);
}
// Negative button (Default color is red)
.#{$namespace}btn-negative,
.#{$namespace}btn-danger,
.#{$namespace}btn-red {
@include btn($negative-color);
}
//紫色
.#{$namespace}btn-royal,
.#{$namespace}btn-purple {
@include btn($royal-color);
}
// grey button
.#{$namespace}btn-grey {
@include btn($grey-color);
}
// Outlined buttons
.#{$namespace}btn-outlined {
background-color: transparent;
&.#{$namespace}btn-primary,
&.#{$namespace}btn-blue {
color: $primary-color;
}
&.#{$namespace}btn-positive,
&.#{$namespace}btn-success,
&.#{$namespace}btn-green {
color: $positive-color;
}
&.#{$namespace}btn-warning,
&.#{$namespace}btn-yellow {
color: $warning-color;
}
&.#{$namespace}btn-negative,
&.#{$namespace}btn-danger,
&.#{$namespace}btn-red {
color: $negative-color;
}
&.#{$namespace}btn-royal,
&.#{$namespace}btn-purple {
color: $royal-color;
}
// Active states
&.#{$namespace}btn-primary,
&.#{$namespace}btn-blue,
&.#{$namespace}btn-positive,
&.#{$namespace}btn-success,
&.#{$namespace}btn-green,
&.#{$namespace}btn-warning,
&.#{$namespace}btn-yellow,
&.#{$namespace}btn-negative,
&.#{$namespace}btn-danger,
&.#{$namespace}btn-red,
&.#{$namespace}btn-royal,
&.#{$namespace}btn-purple,
{
&:enabled:active {
color: #fff;
}
}
}
// Link button (Buttons that look like links)
.#{$namespace}btn-link {
padding-top: 6px;
padding-bottom: 6px;
color: $primary-color;
background-color: transparent;
border: 0;
&:enabled:active,
&.#{$namespace}active:enabled {
color: darken($primary-color, 10%);
background-color: transparent;
}
}
// Block level buttons (full width buttons)
.#{$namespace}btn-block {
display: block;
width: 100%;
padding: 15px 0;
margin-bottom: 10px;
font-size: 18px;
}
// Button overrides
// --------------------------------------------------
//input[type="submit"],
//input[type="reset"],
//input[type="button"] {
// width: 100%;
//}
// Buttons with badges
// --------------------------------------------------
// Generic styles for all badges within default buttons
.#{$namespace}btn .#{$namespace}badge {
margin: -2px -4px -2px 4px;
font-size: $button-font-size;
background-color: rgba(0,0,0,.15);
}
// Buttons with inverted badges
.#{$namespace}btn .#{$namespace}badge-inverted,
.#{$namespace}btn:enabled:active .#{$namespace}badge-inverted {
background-color: transparent;
}
.#{$namespace}btn-primary:enabled:active .#{$namespace}badge-inverted,
.#{$namespace}btn-positive:enabled:active .#{$namespace}badge-inverted,
.#{$namespace}btn-negative:enabled:active .#{$namespace}badge-inverted {
color: #fff;
}
// Position badges within block level buttons
// Note: These are absolutely positioned so that text of button isn't "pushed" by badge and always
// stays at the center of button
.#{$namespace}btn-block .#{$namespace}badge {
position: absolute;
right: 0;
margin-right: 10px;
}
// Buttons with Muiicons
// --------------------------------------------------
.#{$namespace}btn .#{$namespace}icon {
font-size: inherit;
}
.#{$namespace}btn.#{$namespace}icon {
font-size: $button-font-size;
line-height: 1.42;
}
.#{$namespace}btn.#{$namespace}fab {
border-radius: 50%;
width: 56px;
height: 56px;
padding: 16px;
outline: none;
&.#{$namespace}btn-mini {
width: 40px;
height: 40px;
padding: 8px;
}
.#{$namespace}icon {
font-size: 24px;
line-height: 24px;
width: 24px;
height: 24px;
}
}
.#{$namespace}btn .#{$namespace}spinner {
width: 14px;
height: 14px;
vertical-align: text-bottom;
}
.#{$namespace}btn-block .#{$namespace}spinner {
width: 22px;
height: 22px;
}
================================================
FILE: sass/cards.scss
================================================
//
// Cards
// --------------------------------------------------
.#{$namespace}card {
// margin: 0 15px;
margin:$card-margin;
overflow: hidden;
background-color: $card-bg;
// border: $border-default;
background-clip:padding-box;
border-radius: $card-border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
position: relative;
font-size: $card-font-size;
}
.#{$namespace}content > .#{$namespace}card:first-child{
margin-top: 15px;
}
//Cards with input-group
.#{$namespace}card .#{$namespace}input-group{
&:before,&:after{
height:0;
}
.#{$namespace}input-row:last-child{
&:before,&:after{
height:0;
}
}
}
// Cards with table-views
// --------------------------------------------------
.#{$namespace}card .#{$namespace}table-view {
margin-bottom: 0;
border-top: 0;
border-bottom: 0;
border-radius: $border-radius;
// Rounding first divider on carded lists and remove border on the top
//fix Android 4.1.x/4.2.x 圆角列表四角不圆的bug
.#{$namespace}table-view-divider:first-child,.#{$namespace}table-view-cell:first-child {
top: 0;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
}
// Rounding last divider on carded table views
.#{$namespace}table-view-divider:last-child,.#{$namespace}table-view-cell:last-child {
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
&:before,&:after{
height:0;
}
}
// Remove the bottom border from last table cell
.#{$namespace}card > .#{$namespace}table-view {
>.#{$namespace}table-view-cell:last-child{
&:before,&:after{
height:0;
}
}
}
.#{$namespace}card-header,
.#{$namespace}card-footer {
min-height: $bar-base-height;
position: relative;
padding: 10px 15px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
.#{$namespace}card-link {
line-height: $bar-base-height;
height: $bar-base-height;
text-decoration: none;
position: relative;
margin-top: -10px;
margin-bottom: -10px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
}
.#{$namespace}card-header:after,
.#{$namespace}card-footer:before {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background-color: #c8c7cc;
content: '';
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.#{$namespace}card-header {
border-radius: 2px 2px 0 0;
font-size: $font-size-default;
&:after {
top: auto;
bottom: 0;
}
>img:first-child{
font-size: 0;
line-height: 0;
width: 34px;
height: 34px;
float: left;
}
}
.#{$namespace}card-footer {
border-radius: 0 0 2px 2px;
color: $card-footer-color;
}
.#{$namespace}card-content {
position: relative;
font-size: $card-font-size;
}
.#{$namespace}card-content-inner {
padding: 15px;
position: relative;
}
.#{$namespace}card-media {
color: #fff;
background-size: cover;
background-position: center;
vertical-align: bottom;
}
.#{$namespace}card-header.#{$namespace}card-media {
display: block;
padding: 10px;
.#{$namespace}media-body{
margin-bottom: 0;
margin-left: $card-media-body-margin-left;
font-size: $card-font-size;
font-weight: $font-weight;
color: #333;
line-height: $font-size-default;
p {
font-size: 13px;
margin-bottom: 0;
}
}
}
================================================
FILE: sass/forms.scss
================================================
//
// Forms
// --------------------------------------------------
// Force form elements to inherit font styles
input,
textarea,
select {
font-family: $font-family-default;
font-size: $font-size-default;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
&:focus{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
-webkit-user-modify: read-write-plaintext-only;
}
}
// Stretch inputs/textareas to full width and add height to maintain a consistent baseline
select,
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"] {
width: 100%;
height: 40px;
-webkit-appearance: none;
padding: 10px 15px;
margin-bottom: 15px;
line-height: $line-height-default;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 3px;
outline: none;
-webkit-user-select: text;
}
//input[type=number]::-webkit-outer-spin-button { margin: 0; }
//turn off spin button
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
// Rounded search input
input[type="search"] {
font-size: 16px;
height: 34px;
text-align: center;
background-color: rgba(0,0,0,.1);
border: 0;
border-radius: 6px;
// Override content-box in normalize
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input[type="search"]:focus {
text-align: left;
}
// Allow text area's height to grow larger than a normal input
textarea {
height: auto;
resize: none;
}
// Style select button to look like part of the Ratchet's style
select {
margin-top:1px;
height: auto;
font-size: 14px;
background-color: #fff;
border: 0!important;
&:focus{
-webkit-user-modify: read-only;
}
}
// Input groups (cluster multiple inputs together into a single group)
// -------------------------------------------------------------------
// Remove spacing, borders, shadows and rounding since it all belongs on the .#{$namespace}input-group not the input
.#{$namespace}input-group {
position: relative;
padding: 0;
border: 0;
background-color: #fff;
@include hairline(double, #c8c7cc, 0); // Double grey border.
}
.#{$namespace}input-group input,
.#{$namespace}input-group textarea {
margin-bottom: 0;
background-color: transparent;
border-radius: 0;
@include box-shadow(none);
border: 0;
// @include hairline(single, #c8c7cc, 15px);//为啥之前给input，textarea加了边线？都放入input-row的话，是不需要的
}
.#{$namespace}input-group input[type="search"]{
background:none;
}
.#{$namespace}input-group input:last-child {
background-image: none;
}
// Input groups with labels
// --------------------------------------------------
.#{$namespace}input-row {
clear:left;
overflow: hidden;
select{
padding: 0;
height: 37px;
font-size:17px;
}
}
.#{$namespace}input-row:last-child,
.#{$namespace}input-row label + input,.#{$namespace}input-row .mui-btn + input {
background: none;
}
// To use labels with input groups, wrap a label and an input in an .#{$namespace}input-row
.#{$namespace}input-group .#{$namespace}input-row {
height: 40px; // Matches the height of inputs.
@include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px .
}
// Labels get floated left with a set percentage width
.#{$namespace}input-row label {
float: left;
width: 35%;
padding: 11px 15px;
font-family: $font-family-default;
line-height: 1.1; // Put the text on the baseline.
}
.#{$namespace}input-row label ~
{
input,select,textarea{
float: right;
width: 65%;
padding-left: 0;
margin-bottom: 0;
border: 0;
}
}
.#{$namespace}input-row .mui-btn {
float: right;
width: 15%;
padding: 10px 15px;
line-height: 1.1; // Put the text on the baseline.
}
.#{$namespace}input-row .mui-btn ~
{
input,select,textarea{
float: left;
width: 85%;
padding-left: 0;
margin-bottom: 0;
border: 0;
}
}
.#{$namespace}button-row {
position: relative;
padding-top: 5px;
text-align: center;
}
.#{$namespace}input-group .#{$namespace}button-row {
height: 45px;
}
// Actual inputs float to right of labels and also have a set percentage
.#{$namespace}input-row {
position:relative;
&.#{$namespace}input-range{
padding-right: 20px;
overflow: visible;
}
.#{$namespace}inline{
padding: 8px 0;
}
.#{$namespace}input-clear ~ .#{$namespace}icon-clear,.#{$namespace}input-speech ~ .#{$namespace}icon-speech,.#{$namespace}input-password ~ .#{$namespace}icon-eye{
position:absolute;
right: 0px;
top: 10px;
font-size: 20px;
height: 38px;
width: 38px;
text-align: center;
color:#999;
z-index: z("default");
&.#{$namespace}active{
color:$primary-color;
}
}
.#{$namespace}input-speech ~ .#{$namespace}icon-speech{
top:8px;
font-size:24px;
}
.#{$namespace}input-clear ~ .#{$namespace}icon-clear {
~ .#{$namespace}icon-speech{
display:none;
}
&.#{$namespace}hidden{
~ .#{$namespace}icon-speech{
display:inline-block;
}
}
}
.#{$namespace}icon-speech ~ .#{$namespace}placeholder{
right:38px;
}
&.#{$namespace}search{
.#{$namespace}icon-clear{
top:7px;
}
.#{$namespace}icon-speech{
top:5px;
}
}
}
//radio,checkbox
.#{$namespace}radio,.#{$namespace}checkbox{
position:relative;
label{
float: none;
display: inline-block;
width: 100%;
padding-right: 58px;
}
}
.#{$namespace}radio.#{$namespace}left input[type="radio"],.#{$namespace}checkbox.#{$namespace}left input[type="checkbox"]{
left:20px;
}
.#{$namespace}radio.#{$namespace}left label,.#{$namespace}checkbox.#{$namespace}left label{
padding-left: 58px;
padding-right: 15px;
}
.#{$namespace}radio input[type="radio"],.#{$namespace}checkbox input[type="checkbox"]{
-webkit-appearance:none;
outline: 0!important;
width: 28px;
border: 0;
height: 26px;
display: inline-block;
position: absolute;
right: 20px;
top: 4px;
//设置背景色，否则在Ios上会有黑色边框；
background-color:transparent;
&[disabled]:before{
opacity: .3;
}
&:before{
font-family: Muiicons;
font-weight: normal;
border-radius: 0;
font-size: 28px;
line-height: 1;
text-decoration: none;
-webkit-font-smoothing: antialiased;
color: rgb(170, 170, 170);
background: none;
}
&:checked:before{
color:$primary-color;
}
}
.#{$namespace}radio.#{$namespace}disabled label,.#{$namespace}radio label.#{$namespace}disabled,.#{$namespace}checkbox.#{$namespace}disabled label,.#{$namespace}checkbox label.#{$namespace}disabled{
opacity: .4;
}
.#{$namespace}radio input[type="radio"]:before{
content: "\e411";
}
.#{$namespace}radio input[type="radio"]:checked:before{
content: "\e441";
}
.#{$namespace}checkbox input[type="checkbox"]:before{
content: "\e411";
}
.#{$namespace}checkbox input[type="checkbox"]:checked:before{
content: "\e442";
}
.#{$namespace}select{
position: relative;
}
.#{$namespace}select:before{
position: absolute;
top: 8px;
color:rgba(170, 170, 170, 0.6);
font-family: Muiicons;
right: 21px;
content: '\e581';
}
.#{$namespace}input-row .#{$namespace}switch{
float: right;
margin-top: 5px;
margin-right: 20px;
}
//show the min and max
.#{$namespace}input-range{
input[type="range"] {
-webkit-appearance: none!important;
cursor: pointer;
border: 0;
outline: none;
padding: 0;
margin: 17px 0;
background-color: #999;
height: 2px;
border-radius: 3px;
position: relative;
width:100%;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none!important;
background-color:$primary-color;
background-clip: padding-box;
height:28px;
width:28px;
border-radius: 50%;
border-color: darken($primary-color, 10%);
}
/*input[type="range"] {
-webkit-appearance: none;
background: #999;
height: 36px;
border-radius: 1px;
overflow: hidden;
margin-top: 2px;
margin-bottom: 2px;
outline:none;
position:relative;
width:100%;
}*/
label ~ input[type="range"]{
width:65%;
}
/*input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none!important;
opacity: 0.5;
height:28px;
width:28px;
border-radius: 50%;
background:#00b7fb;
position: relative;
pointer-events: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
&:before{
position: absolute;
top: 13px;
left: -2000px;
width: 2000px;
height: 2px;
background: #00b7fb;
content:' ';
}
}*/
.#{$namespace}tooltip{
width: 64px;
height: 64px;
font-size: 36px;
line-height:64px;
opacity: .8;
background-color: #fff;
border:1px solid #ddd;
border-radius:6px;
color: #333;
text-shadow: 0 1px 0 #f3f3f3;
position:absolute;
top:-70px;
text-align:center;
z-index:z("default");
}
}
//.#{$namespace}bar .#{$namespace}input-row.#{$namespace}search .#{$namespace}icon-speech{
// top: -2px;
// right: 10px;
//}
.#{$namespace}search{
position: relative;
input[type="search"]{
padding-left:30px;
}
.#{$namespace}placeholder{
height: 34px;
font-size: 16px;
line-height:34px;
text-align: center;
background:none;
border: 0;
color:#999;
border-radius: 6px;
display:inline-block;
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index:z("default");
.#{$namespace}icon{
color:#333;
font-size:20px;
}
}
&:before{
position: absolute;
font-family: Muiicons;
font-weight: normal;
font-size: 20px;
right: 50%;
margin-right:31px;
top: 50%;
margin-top: -18px;
content: '\e466';
display:none;
}
&.#{$namespace}active{
&:before{
left:5px;
right:auto;
margin-right:0;
font-size:20px;
display:block;
}
input[type="search"]{
text-align:left;
}
.#{$namespace}placeholder{
display:none;
}
}
}
================================================
FILE: sass/fullscreen.scss
================================================
.#{$namespace}fullscreen {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
&.#{$namespace}slider .#{$namespace}slider-group {
height: 100%;
}
.#{$namespace}segmented-control ~ .#{$namespace}slider-group {
width: 100%;
height: auto;
top: 40px;
bottom: 0;
position: absolute;
}
&.#{$namespace}slider .#{$namespace}slider-item>a {
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.#{$namespace}off-canvas-wrap .#{$namespace}slider-item>a {
top: auto;
transform: none;
-webkit-transform: none;
}
}
.#{$namespace}bar-nav ~ .#{$namespace}content .#{$namespace}slider.#{$namespace}fullscreen {
top: 44px;
}
.#{$namespace}bar-tab ~ .#{$namespace}content .#{$namespace}slider.#{$namespace}fullscreen {
.#{$namespace}segmented-control ~ .#{$namespace}slider-group {
bottom: 50px;
}
}
================================================
FILE: sass/grid.scss
================================================
.#{$namespace}row {
@include clearfix();
}
.#{$namespace}col-xs-1, .#{$namespace}col-sm-1, .#{$namespace}col-xs-2, .#{$namespace}col-sm-2, .#{$namespace}col-xs-3, .#{$namespace}col-sm-3, .#{$namespace}col-xs-4, .#{$namespace}col-sm-4, .#{$namespace}col-xs-5, .#{$namespace}col-sm-5, .#{$namespace}col-xs-6, .#{$namespace}col-sm-6, .#{$namespace}col-xs-7, .#{$namespace}col-sm-7, .#{$namespace}col-xs-8, .#{$namespace}col-sm-8, .#{$namespace}col-xs-9, .#{$namespace}col-sm-9, .#{$namespace}col-xs-10, .#{$namespace}col-sm-10, .#{$namespace}col-xs-11, .#{$namespace}col-sm-11, .#{$namespace}col-xs-12, .#{$namespace}col-sm-12 {
position: relative;
min-height: 1px;
}
.#{$namespace}row>[class*="#{$namespace}col-"]{
float: left;
}
.#{$namespace}col-xs-12 {
width: 100%;
}
.#{$namespace}col-xs-11 {
width: 91.66666667%;
}
.#{$namespace}col-xs-10 {
width: 83.33333333%;
}
.#{$namespace}col-xs-9 {
width: 75%;
}
.#{$namespace}col-xs-8 {
width: 66.66666667%;
}
.#{$namespace}col-xs-7 {
width: 58.33333333%;
}
.#{$namespace}col-xs-6 {
width: 50%;
}
.#{$namespace}col-xs-5 {
width: 41.66666667%;
}
.#{$namespace}col-xs-4 {
width: 33.33333333%;
}
.#{$namespace}col-xs-3 {
width: 25%;
}
.#{$namespace}col-xs-2 {
width: 16.66666667%;
}
.#{$namespace}col-xs-1 {
width: 8.33333333%;
}
@media (min-width: 400px) {
.#{$namespace}col-sm-12 {
width: 100%;
}
.#{$namespace}col-sm-11 {
width: 91.66666667%;
}
.#{$namespace}col-sm-10 {
width: 83.33333333%;
}
.#{$namespace}col-sm-9 {
width: 75%;
}
.#{$namespace}col-sm-8 {
width: 66.66666667%;
}
.#{$namespace}col-sm-7 {
width: 58.33333333%;
}
.#{$namespace}col-sm-6 {
width: 50%;
}
.#{$namespace}col-sm-5 {
width: 41.66666667%;
}
.#{$namespace}col-sm-4 {
width: 33.33333333%;
}
.#{$namespace}col-sm-3 {
width: 25%;
}
.#{$namespace}col-sm-2 {
width: 16.66666667%;
}
.#{$namespace}col-sm-1 {
width: 8.33333333%;
}
}
================================================
FILE: sass/hack.scss
================================================
.#{$namespace}android.#{$namespace}android-4-0 {
input,
textarea{
&:focus{
//修复4.0.x系统的输入框无法正常输入文字
-webkit-user-modify: inherit;
}
}
}
.#{$namespace}android.#{$namespace}android-4-2,.#{$namespace}android.#{$namespace}android-4-3 {
input,
textarea{
-webkit-user-select: text;
}
}
//解决ios list 过多(height>20000px) crash的bug
.#{$namespace}ios .#{$namespace}table-view-cell {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
================================================
FILE: sass/icon.scss
================================================
//
// Muiicons
// --------------------------------------------------
@font-face {
font-family: Muiicons;
font-weight: normal;
font-style: normal;
src: url('../fonts/mui.ttf') format('truetype');
}
.#{$namespace}icon {
display: inline-block;
font-family: Muiicons;
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
text-decoration: none;
-webkit-font-smoothing: antialiased;
&.#{$namespace}active{
color:$primary-color;
}
&.#{$namespace}right{
&:before{
float:right;
padding-left: 0.2em;
}
}
}
// 通讯录
// 空心部分
.#{$namespace}icon-contact:before { content: "\e100"; }
.#{$namespace}icon-person:before { content: "\e101"; }
.#{$namespace}icon-personadd:before { content: "\e102"; }
// 实心部分
.#{$namespace}icon-contact-filled:before { content: "\e130"; }
.#{$namespace}icon-person-filled:before { content: "\e131"; }
.#{$namespace}icon-personadd-filled:before { content: "\e132"; }
// 通讯功能
// 空心部分
.#{$namespace}icon-phone:before { content: "\e200"; }
.#{$namespace}icon-email:before { content: "\e201"; }
.#{$namespace}icon-chatbubble:before { content: "\e202"; }
.#{$namespace}icon-chatboxes:before { content: "\e203"; }
// 实心部分
.#{$namespace}icon-phone-filled:before { content: "\e230"; }
.#{$namespace}icon-email-filled:before { content: "\e231"; }
.#{$namespace}icon-chatbubble-filled:before { content: "\e232"; }
.#{$namespace}icon-chatboxes-filled:before { content: "\e233"; }
// 通讯功能补充类
.#{$namespace}icon-weibo:before { content: "\e260"; }
.#{$namespace}icon-weixin:before { content: "\e261"; }
.#{$namespace}icon-pengyouquan:before { content: "\e262"; }
.#{$namespace}icon-chat:before { content: "\e263"; }
.#{$namespace}icon-qq:before { content: "\e264"; }
// 设备类
// 空心部分
.#{$namespace}icon-videocam:before { content: "\e300"; }
.#{$namespace}icon-camera:before { content: "\e301"; }
.#{$namespace}icon-mic:before { content: "\e302"; }
.#{$namespace}icon-location:before { content: "\e303"; }
// 实心部分
.#{$namespace}icon-mic-filled:before,.#{$namespace}icon-speech:before { content: "\e332"; }
.#{$namespace}icon-location-filled:before { content: "\e333"; }
// 设备补充类
.#{$namespace}icon-micoff:before { content: "\e360"; }
// .#{$namespace}icon-volumehigh:before { content: "\e361"; }
// .#{$namespace}icon-volumelow:before { content: "\e362"; }
.#{$namespace}icon-image:before { content: "\e363"; }
.#{$namespace}icon-map:before { content: "\e364"; }
// 操作标志类
// 空心部分
.#{$namespace}icon-compose:before { content: "\e400"; }
.#{$namespace}icon-trash:before { content: "\e401"; }
.#{$namespace}icon-upload:before { content: "\e402"; }
.#{$namespace}icon-download:before { content: "\e403"; }
.#{$namespace}icon-close:before { content: "\e404"; }
.#{$namespace}icon-redo:before { content: "\e405"; }
.#{$namespace}icon-undo:before { content: "\e406"; }
.#{$namespace}icon-refresh:before { content: "\e407"; }
.#{$namespace}icon-star:before { content: "\e408"; }
.#{$namespace}icon-plus:before { content: "\e409"; }
.#{$namespace}icon-minus:before { content: "\e410"; }
.#{$namespace}icon-circle:before,.#{$namespace}icon-checkbox:before { content: "\e411"; }
// 实心部分
.#{$namespace}icon-close-filled:before,.#{$namespace}icon-clear:before { content: "\e434"; }
.#{$namespace}icon-refresh-filled:before { content: "\e437"; }
.#{$namespace}icon-star-filled:before { content: "\e438"; }
.#{$namespace}icon-plus-filled:before { content: "\e439"; }
.#{$namespace}icon-minus-filled:before { content: "\e440"; }
.#{$namespace}icon-circle-filled:before { content: "\e441"; }
.#{$namespace}icon-checkbox-filled:before { content: "\e442"; }
// 操作标志补充类
.#{$namespace}icon-closeempty:before { content: "\e460"; }
.#{$namespace}icon-refreshempty:before { content: "\e461"; }
.#{$namespace}icon-reload:before { content: "\e462"; }
.#{$namespace}icon-starhalf:before { content: "\e463"; }
.#{$namespace}icon-spinner:before { content: "\e464"; }
.#{$namespace}icon-spinner-cycle:before { content: "\e465"; }
.#{$namespace}icon-search:before { content: "\e466"; }
// .#{$namespace}icon-searchstrong:before { content: "\e467"; }
.#{$namespace}icon-plusempty:before { content: "\e468"; }
.#{$namespace}icon-forward:before { content: "\e470"; }
.#{$namespace}icon-back:before,.#{$namespace}icon-left-nav:before { content: "\e471"; }
.#{$namespace}icon-checkmarkempty:before { content: "\e472"; }
// .#{$namespace}icon-share:before { content: "\e473"; }
// 拟物标志类
// 空心部分
.#{$namespace}icon-home:before { content: "\e500"; }
.#{$namespace}icon-navigate:before { content: "\e501"; }
.#{$namespace}icon-gear:before { content: "\e502"; }
.#{$namespace}icon-paperplane:before { content: "\e503"; }
.#{$namespace}icon-info:before { content: "\e504"; }
.#{$namespace}icon-help:before { content: "\e505"; }
.#{$namespace}icon-locked:before { content: "\e506"; }
.#{$namespace}icon-more:before { content: "\e507"; }
.#{$namespace}icon-flag:before { content: "\e508"; }
// 实心部分
.#{$namespace}icon-home-filled:before { content: "\e530"; }
.#{$namespace}icon-gear-filled:before { content: "\e532"; }
.#{$namespace}icon-info-filled:before { content: "\e534"; }
.#{$namespace}icon-help-filled:before { content: "\e535"; }
.#{$namespace}icon-more-filled:before { content: "\e537"; }
// 拟物标志补充类
.#{$namespace}icon-settings:before { content: "\e560"; }
// .#{$namespace}icon-settingsstrong:before { content: "\e561"; }
.#{$namespace}icon-list:before { content: "\e562"; }
.#{$namespace}icon-bars:before { content: "\e563"; }
// .#{$namespace}icon-more-vertical:before { content: "\e564"; }
.#{$namespace}icon-loop:before { content: "\e565"; }
// .#{$namespace}icon-loopstrong:before { content: "\e566"; }
.#{$namespace}icon-paperclip:before { content: "\e567"; }
.#{$namespace}icon-eye:before { content: "\e568"; }
// 箭头
.#{$namespace}icon-arrowup:before { content: "\e580"; }
.#{$namespace}icon-arrowdown:before { content: "\e581"; }
.#{$namespace}icon-arrowleft:before { content: "\e582"; }
.#{$namespace}icon-arrowright:before { content: "\e583"; }
.#{$namespace}icon-arrowthinup:before { content: "\e584"; }
.#{$namespace}icon-arrowthindown:before { content: "\e585"; }
.#{$namespace}icon-arrowthinleft:before { content: "\e586"; }
.#{$namespace}icon-arrowthinright:before { content: "\e587"; }
.#{$namespace}icon-pulldown:before { content: "\e588"; }
================================================
FILE: sass/iframe.scss
================================================
.#{$namespace}iframe-wrapper{
-webkit-overflow-scrolling:touch;
position: absolute;
left: 0;
right: 0;
iframe{
border: 0;
width: 100%;
height: 100%;
}
}
================================================
FILE: sass/iscroll.scss
================================================
.#{$namespace}iscroll-wrapper{
position: absolute;
z-index: z("default");
top: 0;
left: 0;
bottom: 0;
width: 100%;
overflow: hidden;
}
.#{$namespace}bar-nav ~ .#{$namespace}iscroll-wrapper {
top: $bar-base-height;
padding:0;
}
.#{$namespace}bar-header-secondary ~ .#{$namespace}iscroll-wrapper {
top: ($bar-base-height*2);
}
.#{$namespace}bar-footer ~ .#{$namespace}iscroll-wrapper {
bottom: $bar-base-height;
padding:0;
}
.#{$namespace}bar-footer-secondary ~ .#{$namespace}iscroll-wrapper {
bottom: ($bar-base-height*2);
}
.#{$namespace}bar-tab ~ .#{$namespace}iscroll-wrapper{
bottom: $bar-tab-height;
padding:0;
}
.#{$namespace}bar-footer-secondary-tab ~ .#{$namespace}iscroll-wrapper{
bottom: ($bar-tab-height+$bar-base-height);
}
.#{$namespace}iscroll{
position: absolute;
z-index: z("default");
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
================================================
FILE: sass/loadings.scss
================================================
.#{$namespace}loading{
.#{$namespace}spinner{
margin: 0 auto;
display: block;
}
}
.#{$namespace}spinner {
display: inline-block;
width: 24px;
height: 24px;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: spinner-spin 1s step-end infinite;
animation: spinner-spin 1s step-end infinite;
}
.#{$namespace}spinner:after {
display: block;
content: "";
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8, takes up full table view item tap area (want to avoid selecting child buttons though)
> a:not(.#{$namespace}btn) {
position: relative;
display: block;
padding: inherit;
margin: -11px -15px; // Make the entire list item tappable.
overflow: hidden;
color: inherit;
white-space: nowrap;
text-overflow: ellipsis;
/*&:active {
background-color: #eee;
}*/
&.#{$namespace}active {
background-color: #eee;
}
}
p {
margin-bottom: 0;
}
// >.#{$namespace}slider-cell{
// margin-top:1px;
// margin-bottom:1px;
// >.#{$namespace}slider-handle{
// position:absolute;
// left:0;
// right:0;
// top:0;
// bottom:0;
// @include transform(translate3d(100%, 0px, 0px));
// }
// >.#{$namespace}slider-left ~ .#{$namespace}slider-handle,>.#{$namespace}slider-right ~ .#{$namespace}slider-handle{
// position:relative;
// z-index:z("default");
// background-color:#fff;
// padding-left:15px;
// left:auto;
// right:auto;
// top:auto;
// bottom:auto;
// @include transform(translate3d(0px, 0px, 0px));
// }
// >.#{$namespace}slider-left,>.#{$namespace}slider-right{
// top:1px;
// bottom:1px;
// }
// }
}
.#{$namespace}table-view-cell {
&.#{$namespace}transitioning{
>.#{$namespace}slider-handle,>.#{$namespace}slider-left .#{$namespace}btn,>.#{$namespace}slider-right .#{$namespace}btn{
-webkit-transition: -webkit-transform 300ms ease;
transition: transform 300ms ease;
}
}
&.#{$namespace}active>.#{$namespace}slider-handle{
background-color: #eee;
}
>.#{$namespace}slider-handle{
background-color: #fff;
position: relative;
&.#{$namespace}navigate-right:after,.#{$namespace}navigate-right:after{
right: 0;
}
}
>.#{$namespace}slider-handle,>.#{$namespace}slider-left .#{$namespace}btn,>.#{$namespace}slider-right .#{$namespace}btn{
-webkit-transition: -webkit-transform 0ms ease;
transition: transform 0ms ease;
// -webkit-backface-visibility: hidden;
// backface-visibility: hidden;
}
>.#{$namespace}slider-left,>.#{$namespace}slider-right{
// -webkit-backface-visibility: hidden;
// backface-visibility: hidden;
position: absolute;
top: 0;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
>.#{$namespace}btn{
padding: 0 30px;
color: #fff;
border-radius:0;
border:0;
// background: #c7c7cc;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
position: relative;
left: 0;
&:after{
content: '';
position: absolute;
top: 0;
width: 600%;
height: 100%;
background: inherit;
z-index: -1;
}
&.#{$namespace}icon{
font-size: 30px;
}
}
}
>.#{$namespace}slider-right{
right: 0%;
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: -webkit-transform 0ms ease;
transition: transform 0ms ease;
}
>.#{$namespace}slider-left{
left: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform 0ms ease;
transition: transform 0ms ease;
> .#{$namespace}btn:after{
right: 100%;
margin-right: -1px;
}
}
}
// Table view dividers
// --------------------------------------------------
.#{$namespace}table-view-divider {
position: relative;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
margin-top: -1px; // Hides the border of the previous list item
margin-left: 0;
font-weight: $font-weight;
color: #999;
background-color: #fafafa;
@include hairline(double, #c8c7cc, 0); // Double (top and bottom) grey border with no offset.
}
// Table-views with media (images,avatars, icons)
// --------------------------------------------------
.#{$namespace}table-view .#{$namespace}media,
.#{$namespace}table-view .#{$namespace}media-body {
overflow: hidden;
}
.#{$namespace}table-view {
.#{$namespace}media-large .#{$namespace}media-object {
max-width: 80px;
height: 80px;
line-height: 80px;
}
.#{$namespace}media .#{$namespace}subtitle{
color: #000;
}
.#{$namespace}media-object {
max-width: 42px;
height: 42px;
line-height: 42px;
&.#{$namespace}pull-left {
margin-right: 10px;
}
&.#{$namespace}pull-right {
margin-left: 10px;
}
}
.#{$namespace}table-view-cell.#{$namespace}media-icon{
.#{$namespace}media-object {
max-width: 29px;
height: 29px;
line-height: 29px;
margin:-4px 0;
img{
max-width: 29px;
height: 29px;
line-height: 29px;
}
&.#{$namespace}pull-left {
margin-right: 10px;
}
.#{$namespace}icon{
font-size: 29px;
}
}
.#{$namespace}media-body{
@include hairline(single, #c8c7cc, 55px); // single grey border.
}
&:after{
height:0!important;
}
}
}
.#{$namespace}table-view.#{$namespace}unfold{
.#{$namespace}table-view-cell.#{$namespace}collapse .#{$namespace}table-view{
display: block;
&:before,&:after{
height:0!important;
}
}
.#{$namespace}table-view-cell.#{$namespace}media-icon.#{$namespace}collapse{
.#{$namespace}media-body{
@include hairline(single, #c8c7cc, 70px); // single grey border.
}
}
}
// Table-views with buttons, badges and switchs
// --------------------------------------------------
.#{$namespace}table-view-cell,
.#{$namespace}table-view-cell > a {
> .#{$namespace}btn,
> .#{$namespace}badge,
> .#{$namespace}switch {
position: absolute;
top: 50%;
right: 15px;
@include transform(translateY(-50%));
}
// If the cell has a chevron, give some more room.
.#{$namespace}navigate-right,
.#{$namespace}push-left,
.#{$namespace}push-right {
> .#{$namespace}btn,
> .#{$namespace}badge,
> .#{$namespace}switch {
right: 35px;
}
}
}
// If the table view is the first component, give it extra margin on top.
.#{$namespace}content > .#{$namespace}table-view:first-child {
margin-top: 15px;
}
//collapse
.#{$namespace}table-view-cell.#{$namespace}collapse{
.#{$namespace}table-view{
&:before,&:after{
height:0;
}
.#{$namespace}table-view-cell:last-child:after{
height:0;
}
}
//二级列表默认为向下箭头；
>.#{$namespace}navigate-right:after, >.#{$namespace}push-right:after {
content: '\e581';
}
&.#{$namespace}active{
margin-top: -1px;
.#{$namespace}table-view,.#{$namespace}collapse-content{
display: block;
}
//二级列表展开后，变为向上箭头；
>.#{$namespace}navigate-right:after, >.#{$namespace}push-right:after {
content: '\e580';
}
//二级列表展开后，高亮时宽度100%
.#{$namespace}table-view-cell>a:not(.#{$namespace}btn).#{$namespace}active{
margin-left: -31px;
padding-left: 47px;
}
}
.#{$namespace}collapse-content{
display:none;
padding: 8px 15px;
margin: 11px -15px -11px;
background: white;
// border: 1px solid #ddd;
position: relative;
overflow: hidden;
-webkit-transition: height .35s ease;
-o-transition: height .35s ease;
transition: height .35s ease;
>.#{$namespace}input-group,>.#{$namespace}slider{
margin:-8px -15px;
width:auto;
height:auto;
}
>.#{$namespace}slider{
margin:-8px -16px;
}
}
.#{$namespace}table-view{
display: none;
margin-bottom: -11px;
margin-top: 11px;
margin-right: -15px;
margin-left:-15px;
border: 0;
&.#{$namespace}table-view-chevron{
margin-right:-65px;
}
.#{$namespace}table-view-cell{
padding-left: 31px;
background-position: 31px 100%;
@include hairline(single, #c8c7cc, 30px);
}
}
}
//grid
.#{$namespace}table-view.#{$namespace}grid-view{
display:block;
padding:0 10px 10px 0;
width:100%;
white-space:normal;
font-size:0;
.#{$namespace}table-view-cell{
font-size: $font-size-default;
display: inline-block;
padding:10px 0 0 14px;
background:none;
text-align:center;
vertical-align: middle;
margin-right:-4px;
.#{$namespace}media-object{
width:100%;
max-width:100%;
height: auto;
}
> a:not(.#{$namespace}btn){
margin:-10px 0 0 -14px;
&:active,&.#{$namespace}active{
background: none;
}
}
.#{$namespace}media-body{
display: block;
height: 15px;
line-height: 15px;
color:#333;
font-size: 15px;
margin-top:8px;
width:100%;
text-overflow: ellipsis;
}
&:before,&:after{
height:0;
}
}
}
//grid-9
.#{$namespace}grid-view.#{$namespace}grid-9{
background-color: #f2f2f2;
padding: 0;
margin:0;
border-left:1px solid #EEE;
border-top:1px solid #EEE;
@include clearfix();
&:after{
position:static;
}
.#{$namespace}table-view-cell {
vertical-align: top;
padding:11px 15px;
margin:0;
border-right: 1px solid #EEE;
border-bottom: 1px solid #EEE;
&.#{$namespace}active{
background-color:#eee;
}
> a:not(.#{$namespace}btn){
padding: 10px 0;
margin: 0;
}
}
&:before{
height: 0;
}
.#{$namespace}media {
color: #797979;
.#{$namespace}icon{
font-size: 2.4em;
position: relative;
}
}
}
================================================
FILE: sass/toast.scss
================================================
.#{$namespace}toast-container {
line-height:17px;
position: fixed;
bottom: 50px;
z-index: z("toast");
opacity: 0;
left:50%;
-webkit-transform:translate(-50%,0);
transform:translate(-50%,0);
-webkit-transition: opacity .3s;
transition: opacity .3s;
&.#{$namespace}active{
opacity: .9;
}
}
.#{$namespace}toast-message {
padding: 10px 25px;
background-color: #323232;
text-align: center;
color: #fff;
border-radius: 6px;
font-size: 14px;
}
================================================
FILE: sass/type.scss
================================================
//
// Typography
// --------------------------------------------------
h1, h2, h3, h4, h5, h6 {
margin-top: 5px;
margin-bottom: 5px;
line-height: 1;
}
h1, .#{$namespace}h1 { font-size: 36px; }
h2, .#{$namespace}h2 { font-size: 30px; }
h3, .#{$namespace}h3 { font-size: 24px; }
h4, .#{$namespace}h4 { font-size: 18px; }
h5, .#{$namespace}h5 { font-size: 14px; color: #8f8f94;font-weight: normal; }
h6, .#{$namespace}h6 { font-size: 12px; color: #8f8f94;font-weight: normal; }
// Paragraphs
p {
margin-top: 0;
margin-bottom: 10px;
font-size: 14px;
color: #8f8f94;
}
================================================
FILE: sass/variables.scss
================================================
//
// Variables
// --------------------------------------------------
$namespace: "mui-" !default;
// Type
// --------------------------------------------------
$font-family-default: "Helvetica Neue", Helvetica, sans-serif !default;
$font-size-default: 17px !default;
$font-weight: 500 !default;
$font-weight-light: 400 !default;
$line-height-default: 21px !default;
// Colors
// --------------------------------------------------
// Main theme colors
//blue theme
$primary-color: #007aff !default;
//green theme
//$primary-color: #4cd964 !default;
//$chrome-color: rgba(247,247,247,.98) !default;
$chrome-color: rgb(247,247,247) !default;
// Action colors
$default-color: #929292 !default;
$positive-color: #4cd964 !default;
$negative-color: #dd524d !default;
$warning-color: #f0ad4e !default;
$royal-color: #8a6de9 !default;
$grey-color:#c7c7cc !default;
// Bars
// --------------------------------------------------
$bar-base-height: 44px !default;
$bar-tab-height: 50px !default;
$bar-side-spacing: 10px !default;
// Cards
// --------------------------------------------------
$card-bg: #fff !default;
$card-margin:10px !default;
$card-border-radius:2px !default;
$card-font-size:14px !default;
$card-media-body-margin-left:44px !default;
$card-footer-color:#6d6d72 !default;
// Buttons
// --------------------------------------------------
$button-font-size: 14px !default;
// Transitions
// --------------------------------------------------
$timing-fuction: cubic-bezier(.1,.5,.1,1) !default; // Inspired by @c2prods
// Borders
// --------------------------------------------------
$border-default: 1px solid #ddd !default;
$border-radius: 6px !default;
================================================
FILE: template/feedback/css/feedback.css
================================================
/*!
* ======================================================
* FeedBack Template For MUI (http://dev.dcloud.net.cn/mui)
* =======================================================
* @version:1.0.0
* @author:cuihongbao@dcloud.io
*/
.feedback body {
background-color: #EFEFF4;
}
.feedback input,
.feedback textarea {
border: none !important;
}
.feedback textarea {
height: 100px;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.feedback .row {
width: 100%;
background-color: #fff;
}
.feedback p {
padding: 10px 15px 0;
}
/*.feedback button#submit {
width: 90%;
height: 46px;
left: 50%;
-webkit-transform: translate(-50%);
}*/
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
font-size: 14px;
}
.feedback .hidden {
display: none;
}
.feedback .image-list {
width: 100%;
height: 85px;
background-size: cover;
padding: 10px 10px;
overflow: hidden;
}
.feedback .image-item {
width: 65px;
height: 65px;
/*background-image: url(../images/iconfont-tianjia.png);*/
background-size: 100% 100%;
display: inline-block;
position: relative;
border-radius: 5px;
margin-right: 10px;
margin-bottom: 10px;
border: solid 1px #e8e8e8;
vertical-align: top;
}
.feedback .image-item .file {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 0;
}
.feedback .image-item.space {
border: none;
}
.feedback .image-item .image-close {
position: absolute;
display: inline-block;
right: -6px;
top: -6px;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 12px;
background-color: #FF5053;
color: #f3f3f3;
border: solid 1px #FF5053;
font-size: 9px;
font-weight: 200;
z-index: 1;
}
.feedback .image-item .image-up{
height: 65px;
width: 65px;
border-radius: 10px;
line-height: 65px;
border: 1px solid #ccc;
color: #ccc;
display: inline-block;
text-align: center;
}
.feedback .image-item .image-up:after{
font-family: "微软雅黑";
content: '+';
font-size: 60px;
}
.feedback .image-item.space .image-close {
display: none;
}
.feedback .mui-inline{
vertical-align: bottom;
font-size: 14px;
color: #8f8f94;
}
.mui-icon-star{
color: #B5B5B5;
font-size: 22px;
}
.mui-icon-star-filled{
color: #FFB400;
font-size: 22px;
}
.mui-popover {
height: 180px;
}
.stream{
display: none;
}
.mui-plus-stream .stream{
display: block;
}
================================================
FILE: template/feedback/feedback.html
================================================
问题反馈
图片(选填,提供问题截图,总大小10M以下)
QQ/邮箱
================================================
FILE: template/feedback/js/feedback.js
================================================
/*!
* ======================================================
* FeedBack Template For MUI (http://dev.dcloud.net.cn/mui)
* =======================================================
* @version:1.0.0
* @author:cuihongbao@dcloud.io
*/
(function() {
var index = 1;
var size = null;
var imageIndexIdNum = 0;
var starIndex = 0;
var feedback = {
question: document.getElementById('question'),
contact: document.getElementById('contact'),
imageList: document.getElementById('image-list'),
submitBtn: document.getElementById('submit')
};
var url = 'https://service.dcloud.net.cn/feedback';
feedback.files = [];
feedback.uploader = null;
feedback.deviceInfo = null;
mui.plusReady(function() {
//设备信息，无需修改
feedback.deviceInfo = {
appid: plus.runtime.appid,
imei: plus.device.imei, //设备标识
images: feedback.files, //图片文件
p: mui.os.android ? 'a' : 'i', //平台类型，i表示iOS平台，a表示Android平台。
md: plus.device.model, //设备型号
app_version: plus.runtime.version,
plus_version: plus.runtime.innerVersion, //基座版本号
os: mui.os.version,
net: ''+plus.networkinfo.getCurrentType()
}
});
/**
*提交成功之后，恢复表单项
*/
feedback.clearForm = function() {
feedback.question.value = '';
feedback.contact.value = '';
feedback.imageList.innerHTML = '';
feedback.newPlaceholder();
feedback.files = [];
index = 0;
size = 0;
imageIndexIdNum = 0;
starIndex = 0;
//清除所有星标
mui('.icons i').each(function (index,element) {
if (element.classList.contains('mui-icon-star-filled')) {
element.classList.add('mui-icon-star')
element.classList.remove('mui-icon-star-filled')
}
})
};
feedback.getFileInputArray = function() {
return [].slice.call(feedback.imageList.querySelectorAll('.file'));
};
feedback.addFile = function(path) {
feedback.files.push({name:"images"+index,path:path});
index++;
};
/**
* 初始化图片域占位
*/
feedback.newPlaceholder = function() {
var fileInputArray = feedback.getFileInputArray();
if (fileInputArray &&
fileInputArray.length > 0 &&
fileInputArray[fileInputArray.length - 1].parentNode.classList.contains('space')) {
return;
};
imageIndexIdNum++;
var placeholder = document.createElement('div');
placeholder.setAttribute('class', 'image-item space');
var up = document.createElement("div");
up.setAttribute('class','image-up')
//删除图片
var closeButton = document.createElement('div');
closeButton.setAttribute('class', 'image-close');
closeButton.innerHTML = 'X';
//小X的点击事件
closeButton.addEventListener('tap', function(event) {
setTimeout(function() {
feedback.imageList.removeChild(placeholder);
}, 0);
return false;
}, false);
//
var fileInput = document.createElement('div');
fileInput.setAttribute('class', 'file');
fileInput.setAttribute('id', 'image-' + imageIndexIdNum);
fileInput.addEventListener('tap', function(event) {
var self = this;
var index = (this.id).substr(-1);
plus.gallery.pick(function(e) {
// console.log("event:"+e);
var name = e.substr(e.lastIndexOf('/') + 1);
console.log("name:"+name);
plus.zip.compressImage({
src: e,
dst: '_doc/' + name,
overwrite: true,
quality: 50
}, function(zip) {
size += zip.size
console.log("filesize:"+zip.size+",totalsize:"+size);
if (size > (10*1024*1024)) {
return mui.toast('文件超大,请重新选择~');
}
if (!self.parentNode.classList.contains('space')) { //已有图片
feedback.files.splice(index-1,1,{name:"images"+index,path:e});
} else { //加号
placeholder.classList.remove('space');
feedback.addFile(zip.target);
feedback.newPlaceholder();
}
up.classList.remove('image-up');
placeholder.style.backgroundImage = 'url(' + zip.target + ')';
}, function(zipe) {
mui.toast('压缩失败！')
});
}, function(e) {
mui.toast(e.message);
},{});
}, false);
placeholder.appendChild(closeButton);
placeholder.appendChild(up);
placeholder.appendChild(fileInput);
feedback.imageList.appendChild(placeholder);
};
feedback.newPlaceholder();
feedback.submitBtn.addEventListener('tap', function(event) {
if (feedback.question.value == '' ||
(feedback.contact.value != '' &&
feedback.contact.value.search(/^(\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+)|([1-9]\d{4,9})$/) != 0)) {
return mui.toast('信息填写不符合规范');
}
if (feedback.question.value.length > 200 || feedback.contact.value.length > 200) {
return mui.toast('信息超长,请重新填写~')
}
//判断网络连接
if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){
return mui.toast("连接网络失败，请稍后再试");
}
feedback.send(mui.extend({}, feedback.deviceInfo, {
content: feedback.question.value,
contact: feedback.contact.value,
images: feedback.files,
score:''+starIndex
}))
}, false)
feedback.send = function(content) {
feedback.uploader = plus.uploader.createUpload(url, {
method: 'POST'
}, function(upload, status) {
// plus.nativeUI.closeWaiting()
console.log("upload cb:"+upload.responseText);
if(status==200){
var data = JSON.parse(upload.responseText);
//上传成功，重置表单
if (data.ret === 0 && data.desc === 'Success') {
// mui.toast('反馈成功~')
console.log("upload success");
// feedback.clearForm();
}
}else{
console.log("upload fail");
}
});
//添加上传数据
mui.each(content, function(index, element) {
if (index !== 'images') {
console.log("addData:"+index+","+element);
// console.log(index);
feedback.uploader.addData(index, element)
}
});
//添加上传文件
mui.each(feedback.files, function(index, element) {
var f = feedback.files[index];
console.log("addFile:"+JSON.stringify(f));
feedback.uploader.addFile(f.path, {
key: f.name
});
});
//开始上传任务
feedback.uploader.start();
mui.alert("感谢反馈，点击确定关闭","问题反馈","确定",function () {
feedback.clearForm();
mui.back();
});
// plus.nativeUI.showWaiting();
};
//应用评分
mui('.icons').on('tap','i',function(){
var index = parseInt(this.getAttribute("data-index"));
var parent = this.parentNode;
var children = parent.children;
if(this.classList.contains("mui-icon-star")){
for(var i=0;i 
================================================
FILE: dist/css/mui.css
================================================
/*!
* =====================================================
* Mui v3.7.3 (http://dev.dcloud.net.cn/mui)
* =====================================================
*/
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html
{
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
}
body
{
margin: 0;
}
body::after
{
position: fixed;
top: -1000px;
left: -1000px;
content: '';
-webkit-animation: shadow-preload .1s;
animation: shadow-preload .1s;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
@-webkit-keyframes shadow-preload
{
0%
{
background-image: url(https://cdn.dcloud.net.cn/img/mui-shadow-grey.png);
}
100%
{
background-image: url(https://cdn.dcloud.net.cn/img/mui-shadow-grey.png);
}
}
@keyframes shadow-preload
{
0%
{
background-image: url(https://cdn.dcloud.net.cn/img/mui-shadow-grey.png);
}
100%
{
background-image: url(https://cdn.dcloud.net.cn/img/mui-shadow-grey.png);
}
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary
{
display: block;
}
audio,
canvas,
progress,
video
{
display: inline-block;
vertical-align: baseline;
}
audio:not([controls])
{
display: none;
height: 0;
}
[hidden],
template
{
display: none;
}
a
{
background: transparent;
}
a:active,
a:hover
{
outline: 0;
}
abbr[title]
{
border-bottom: 1px dotted;
}
b,
strong
{
font-weight: bold;
}
dfn
{
font-style: italic;
}
h1
{
font-size: 2em;
margin: .67em 0;
}
mark
{
color: #000;
background: #ff0;
}
small
{
font-size: 80%;
}
sub,
sup
{
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup
{
top: -.5em;
}
sub
{
bottom: -.25em;
}
img
{
border: 0;
}
svg:not(:root)
{
overflow: hidden;
}
figure
{
margin: 1em 40px;
}
hr
{
box-sizing: content-box;
height: 0;
}
pre
{
overflow: auto;
}
code,
kbd,
pre,
samp
{
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea
{
font: inherit;
margin: 0;
color: inherit;
}
button
{
overflow: visible;
}
button,
select
{
text-transform: none;
}
button,
html input[type='button'],
input[type='reset'],
input[type='submit']
{
cursor: pointer;
-webkit-appearance: button;
}
button[disabled],
html input[disabled]
{
cursor: default;
}
input
{
line-height: normal;
}
input[type='checkbox'],
input[type='radio']
{
box-sizing: border-box;
padding: 0;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button
{
height: auto;
}
input[type='search']
{
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
}
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration
{
-webkit-appearance: none;
}
fieldset
{
margin: 0 2px;
padding: .35em .625em .75em;
border: 1px solid #c0c0c0;
}
legend
{
padding: 0;
border: 0;
}
textarea
{
overflow: auto;
}
optgroup
{
font-weight: bold;
}
table
{
border-spacing: 0;
border-collapse: collapse;
}
td,
th
{
padding: 0;
}
*
{
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
outline: none;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
}
body
{
font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-size: 17px;
line-height: 21px;
color: #000;
background-color: #efeff4;
-webkit-overflow-scrolling: touch;
}
a
{
text-decoration: none;
color: #007aff;
}
a:active
{
color: #0062cc;
}
.mui-content
{
background-color: #efeff4;
-webkit-overflow-scrolling: touch;
}
.mui-bar-nav ~ .mui-content
{
padding-top: 44px;
}
.mui-bar-nav ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical
{
top: 44px;
}
.mui-bar-header-secondary ~ .mui-content
{
padding-top: 88px;
}
.mui-bar-header-secondary ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical
{
top: 88px;
}
.mui-bar-footer ~ .mui-content
{
padding-bottom: 44px;
}
.mui-bar-footer ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical
{
bottom: 44px;
}
.mui-bar-footer-secondary ~ .mui-content
{
padding-bottom: 88px;
}
.mui-bar-footer-secondary ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical
{
bottom: 88px;
}
.mui-bar-tab ~ .mui-content
{
padding-bottom: 50px;
}
.mui-bar-tab ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical
{
bottom: 50px;
}
.mui-bar-footer-secondary-tab ~ .mui-content
{
padding-bottom: 94px;
}
.mui-bar-footer-secondary-tab ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical
{
bottom: 94px;
}
.mui-content-padded
{
margin: 10px;
}
.mui-inline
{
display: inline-block;
vertical-align: top;
}
.mui-block
{
display: block !important;
}
.mui-visibility
{
visibility: visible !important;
}
.mui-hidden
{
display: none !important;
}
.mui-ellipsis
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mui-ellipsis-2
{
display: -webkit-box;
overflow: hidden;
white-space: normal !important;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.mui-table
{
display: table;
width: 100%;
table-layout: fixed;
}
.mui-table-cell
{
position: relative;
display: table-cell;
}
.mui-text-left
{
text-align: left !important;
}
.mui-text-center
{
text-align: center !important;
}
.mui-text-justify
{
text-align: justify !important;
}
.mui-text-right
{
text-align: right !important;
}
.mui-pull-left
{
float: left;
}
.mui-pull-right
{
float: right;
}
.mui-list-unstyled
{
padding-left: 0;
list-style: none;
}
.mui-list-inline
{
margin-left: -5px;
padding-left: 0;
list-style: none;
}
.mui-list-inline > li
{
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
.mui-clearfix:before, .mui-clearfix:after
{
display: table;
content: ' ';
}
.mui-clearfix:after
{
clear: both;
}
.mui-bg-primary
{
background-color: #007aff;
}
.mui-bg-positive
{
background-color: #4cd964;
}
.mui-bg-negative
{
background-color: #dd524d;
}
.mui-error
{
margin: 88px 35px;
padding: 10px;
border-radius: 6px;
background-color: #bbb;
}
.mui-subtitle
{
font-size: 15px;
}
h1, h2, h3, h4, h5, h6
{
line-height: 1;
margin-top: 5px;
margin-bottom: 5px;
}
h1, .mui-h1
{
font-size: 36px;
}
h2, .mui-h2
{
font-size: 30px;
}
h3, .mui-h3
{
font-size: 24px;
}
h4, .mui-h4
{
font-size: 18px;
}
h5, .mui-h5
{
font-size: 14px;
font-weight: normal;
color: #8f8f94;
}
h6, .mui-h6
{
font-size: 12px;
font-weight: normal;
color: #8f8f94;
}
p
{
font-size: 14px;
margin-top: 0;
margin-bottom: 10px;
color: #8f8f94;
}
.mui-row:before, .mui-row:after
{
display: table;
content: ' ';
}
.mui-row:after
{
clear: both;
}
.mui-col-xs-1, .mui-col-sm-1, .mui-col-xs-2, .mui-col-sm-2, .mui-col-xs-3, .mui-col-sm-3, .mui-col-xs-4, .mui-col-sm-4, .mui-col-xs-5, .mui-col-sm-5, .mui-col-xs-6, .mui-col-sm-6, .mui-col-xs-7, .mui-col-sm-7, .mui-col-xs-8, .mui-col-sm-8, .mui-col-xs-9, .mui-col-sm-9, .mui-col-xs-10, .mui-col-sm-10, .mui-col-xs-11, .mui-col-sm-11, .mui-col-xs-12, .mui-col-sm-12
{
position: relative;
min-height: 1px;
}
.mui-row > [class*='mui-col-']
{
float: left;
}
.mui-col-xs-12
{
width: 100%;
}
.mui-col-xs-11
{
width: 91.66666667%;
}
.mui-col-xs-10
{
width: 83.33333333%;
}
.mui-col-xs-9
{
width: 75%;
}
.mui-col-xs-8
{
width: 66.66666667%;
}
.mui-col-xs-7
{
width: 58.33333333%;
}
.mui-col-xs-6
{
width: 50%;
}
.mui-col-xs-5
{
width: 41.66666667%;
}
.mui-col-xs-4
{
width: 33.33333333%;
}
.mui-col-xs-3
{
width: 25%;
}
.mui-col-xs-2
{
width: 16.66666667%;
}
.mui-col-xs-1
{
width: 8.33333333%;
}
@media (min-width: 400px)
{
.mui-col-sm-12
{
width: 100%;
}
.mui-col-sm-11
{
width: 91.66666667%;
}
.mui-col-sm-10
{
width: 83.33333333%;
}
.mui-col-sm-9
{
width: 75%;
}
.mui-col-sm-8
{
width: 66.66666667%;
}
.mui-col-sm-7
{
width: 58.33333333%;
}
.mui-col-sm-6
{
width: 50%;
}
.mui-col-sm-5
{
width: 41.66666667%;
}
.mui-col-sm-4
{
width: 33.33333333%;
}
.mui-col-sm-3
{
width: 25%;
}
.mui-col-sm-2
{
width: 16.66666667%;
}
.mui-col-sm-1
{
width: 8.33333333%;
}
}
.mui-scroll-wrapper
{
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
overflow: hidden;
width: 100%;
}
.mui-scroll
{
position: absolute;
z-index: 1;
width: 100%;
}
.mui-scrollbar
{
position: absolute;
z-index: 9998;
overflow: hidden;
-webkit-transition: 500ms;
transition: 500ms;
transform: translateZ(0px);
pointer-events: none;
opacity: 0;
}
.mui-scrollbar-vertical
{
top: 0;
right: 1px;
bottom: 2px;
width: 4px;
}
.mui-scrollbar-vertical .mui-scrollbar-indicator
{
width: 100%;
}
.mui-scrollbar-horizontal
{
right: 2px;
bottom: 0;
left: 2px;
height: 4px;
}
.mui-scrollbar-horizontal .mui-scrollbar-indicator
{
height: 100%;
}
.mui-scrollbar-indicator
{
position: absolute;
display: block;
box-sizing: border-box;
-webkit-transition: .01s cubic-bezier(.1, .57, .1, 1);
transition: .01s cubic-bezier(.1, .57, .1, 1);
transform: translate(0px, 0px) translateZ(0px);
border: 1px solid rgba(255, 255, 255, .80196);
border-radius: 2px;
background: rgba(0, 0, 0, .39804);
}
.mui-plus-pullrefresh .mui-fullscreen .mui-scroll-wrapper .mui-scroll-wrapper, .mui-plus-pullrefresh .mui-fullscreen .mui-slider-group .mui-scroll-wrapper
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
overflow: hidden;
width: 100%;
}
.mui-plus-pullrefresh .mui-fullscreen .mui-scroll-wrapper .mui-scroll, .mui-plus-pullrefresh .mui-fullscreen .mui-slider-group .mui-scroll
{
position: absolute;
width: 100%;
}
.mui-plus-pullrefresh .mui-scroll-wrapper, .mui-plus-pullrefresh .mui-slider-group
{
position: static;
top: auto;
bottom: auto;
left: auto;
overflow: auto;
width: auto;
}
.mui-plus-pullrefresh .mui-slider-group
{
overflow: visible;
}
.mui-plus-pullrefresh .mui-scroll
{
position: static;
width: auto;
}
.mui-off-canvas-wrap .mui-bar
{
position: absolute !important;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-box-shadow: none;
box-shadow: none;
}
.mui-off-canvas-wrap
{
position: relative;
z-index: 1;
overflow: hidden;
width: 100%;
height: 100%;
}
.mui-off-canvas-wrap .mui-inner-wrap
{
position: relative;
z-index: 1;
width: 100%;
height: 100%;
}
.mui-off-canvas-wrap .mui-inner-wrap.mui-transitioning
{
-webkit-transition: -webkit-transform 350ms;
transition: transform 350ms cubic-bezier(.165, .84, .44, 1);
}
.mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-left
{
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-right
{
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.mui-off-canvas-wrap.mui-active
{
overflow: hidden;
height: 100%;
}
.mui-off-canvas-wrap.mui-active .mui-off-canvas-backdrop
{
position: absolute;
z-index: 998;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
transition: background 350ms cubic-bezier(.165, .84, .44, 1);
background: rgba(0, 0, 0, .4);
box-shadow: -4px 0 4px rgba(0, 0, 0, .5), 4px 0 4px rgba(0, 0, 0, .5);
-webkit-tap-highlight-color: transparent;
}
.mui-off-canvas-wrap.mui-slide-in .mui-off-canvas-right
{
z-index: 10000 !important;
-webkit-transform: translate3d(100%, 0px, 0px);
}
.mui-off-canvas-wrap.mui-slide-in .mui-off-canvas-left
{
z-index: 10000 !important;
-webkit-transform: translate3d(-100%, 0px, 0px);
}
.mui-off-canvas-left, .mui-off-canvas-right
{
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
visibility: hidden;
box-sizing: content-box;
width: 70%;
min-height: 100%;
background: #333;
-webkit-overflow-scrolling: touch;
}
.mui-off-canvas-left.mui-transitioning, .mui-off-canvas-right.mui-transitioning
{
-webkit-transition: -webkit-transform 350ms cubic-bezier(.165, .84, .44, 1);
transition: transform 350ms cubic-bezier(.165, .84, .44, 1);
}
.mui-off-canvas-left
{
left: 0;
}
.mui-off-canvas-right
{
right: 0;
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable
{
background-color: #333;
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right
{
width: 80%;
-webkit-transform: scale(.8);
transform: scale(.8);
opacity: .1;
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left.mui-transitioning, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right.mui-transitioning
{
-webkit-transition: -webkit-transform 350ms cubic-bezier(.165, .84, .44, 1), opacity 350ms cubic-bezier(.165, .84, .44, 1);
transition: transform 350ms cubic-bezier(.165, .84, .44, 1), opacity 350ms cubic-bezier(.165, .84, .44, 1);
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left
{
-webkit-transform-origin: -100%;
transform-origin: -100%;
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right
{
-webkit-transform-origin: 200%;
transform-origin: 200%;
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active > .mui-inner-wrap
{
-webkit-transform: scale(.8);
transform: scale(.8);
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active > .mui-off-canvas-left, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active > .mui-off-canvas-right
{
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.mui-loading .mui-spinner
{
display: block;
margin: 0 auto;
}
.mui-spinner
{
display: inline-block;
width: 24px;
height: 24px;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: spinner-spin 1s step-end infinite;
animation: spinner-spin 1s step-end infinite;
}
.mui-spinner:after
{
display: block;
width: 100%;
height: 100%;
content: '';
background-image: url('data:image/svg+xml;charset=utf-8,');
background-repeat: no-repeat;
background-position: 50%;
background-size: 100%;
}
.mui-spinner-white:after
{
background-image: url('data:image/svg+xml;charset=utf-8,');
}
@-webkit-keyframes spinner-spin
{
0%
{
-webkit-transform: rotate(0deg);
}
8.33333333%
{
-webkit-transform: rotate(30deg);
}
16.66666667%
{
-webkit-transform: rotate(60deg);
}
25%
{
-webkit-transform: rotate(90deg);
}
33.33333333%
{
-webkit-transform: rotate(120deg);
}
41.66666667%
{
-webkit-transform: rotate(150deg);
}
50%
{
-webkit-transform: rotate(180deg);
}
58.33333333%
{
-webkit-transform: rotate(210deg);
}
66.66666667%
{
-webkit-transform: rotate(240deg);
}
75%
{
-webkit-transform: rotate(270deg);
}
83.33333333%
{
-webkit-transform: rotate(300deg);
}
91.66666667%
{
-webkit-transform: rotate(330deg);
}
100%
{
-webkit-transform: rotate(360deg);
}
}
@keyframes spinner-spin
{
0%
{
transform: rotate(0deg);
}
8.33333333%
{
transform: rotate(30deg);
}
16.66666667%
{
transform: rotate(60deg);
}
25%
{
transform: rotate(90deg);
}
33.33333333%
{
transform: rotate(120deg);
}
41.66666667%
{
transform: rotate(150deg);
}
50%
{
transform: rotate(180deg);
}
58.33333333%
{
transform: rotate(210deg);
}
66.66666667%
{
transform: rotate(240deg);
}
75%
{
transform: rotate(270deg);
}
83.33333333%
{
transform: rotate(300deg);
}
91.66666667%
{
transform: rotate(330deg);
}
100%
{
transform: rotate(360deg);
}
}
input[type='button'],
input[type='submit'],
input[type='reset'],
button,
.mui-btn
{
font-size: 14px;
font-weight: 400;
line-height: 1.42;
position: relative;
display: inline-block;
margin-bottom: 0;
padding: 6px 12px;
cursor: pointer;
-webkit-transition: all;
transition: all;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: .2s;
transition-duration: .2s;
text-align: center;
vertical-align: top;
white-space: nowrap;
color: #333;
border: 1px solid #ccc;
border-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background-color: #fff;
background-clip: padding-box;
}
input[type='button']:enabled:active, input[type='button'].mui-active:enabled,
input[type='submit']:enabled:active,
input[type='submit'].mui-active:enabled,
input[type='reset']:enabled:active,
input[type='reset'].mui-active:enabled,
button:enabled:active,
button.mui-active:enabled,
.mui-btn:enabled:active,
.mui-btn.mui-active:enabled
{
color: #fff;
background-color: #929292;
}
input[type='button']:disabled, input[type='button'].mui-disabled,
input[type='submit']:disabled,
input[type='submit'].mui-disabled,
input[type='reset']:disabled,
input[type='reset'].mui-disabled,
button:disabled,
button.mui-disabled,
.mui-btn:disabled,
.mui-btn.mui-disabled
{
opacity: .6;
}
input[type='submit'],
.mui-btn-primary,
.mui-btn-blue
{
color: #fff;
border: 1px solid #007aff;
background-color: #007aff;
}
input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
.mui-btn-primary:enabled:active,
.mui-btn-primary.mui-active:enabled,
.mui-btn-blue:enabled:active,
.mui-btn-blue.mui-active:enabled
{
color: #fff;
border: 1px solid #0062cc;
background-color: #0062cc;
}
.mui-btn-positive,
.mui-btn-success,
.mui-btn-green
{
color: #fff;
border: 1px solid #4cd964;
background-color: #4cd964;
}
.mui-btn-positive:enabled:active, .mui-btn-positive.mui-active:enabled,
.mui-btn-success:enabled:active,
.mui-btn-success.mui-active:enabled,
.mui-btn-green:enabled:active,
.mui-btn-green.mui-active:enabled
{
color: #fff;
border: 1px solid #2ac845;
background-color: #2ac845;
}
.mui-btn-warning,
.mui-btn-yellow
{
color: #fff;
border: 1px solid #f0ad4e;
background-color: #f0ad4e;
}
.mui-btn-warning:enabled:active, .mui-btn-warning.mui-active:enabled,
.mui-btn-yellow:enabled:active,
.mui-btn-yellow.mui-active:enabled
{
color: #fff;
border: 1px solid #ec971f;
background-color: #ec971f;
}
.mui-btn-negative,
.mui-btn-danger,
.mui-btn-red
{
color: #fff;
border: 1px solid #dd524d;
background-color: #dd524d;
}
.mui-btn-negative:enabled:active, .mui-btn-negative.mui-active:enabled,
.mui-btn-danger:enabled:active,
.mui-btn-danger.mui-active:enabled,
.mui-btn-red:enabled:active,
.mui-btn-red.mui-active:enabled
{
color: #fff;
border: 1px solid #cf2d28;
background-color: #cf2d28;
}
.mui-btn-royal,
.mui-btn-purple
{
color: #fff;
border: 1px solid #8a6de9;
background-color: #8a6de9;
}
.mui-btn-royal:enabled:active, .mui-btn-royal.mui-active:enabled,
.mui-btn-purple:enabled:active,
.mui-btn-purple.mui-active:enabled
{
color: #fff;
border: 1px solid #6641e2;
background-color: #6641e2;
}
.mui-btn-grey
{
color: #fff;
border: 1px solid #c7c7cc;
background-color: #c7c7cc;
}
.mui-btn-grey:enabled:active, .mui-btn-grey.mui-active:enabled
{
color: #fff;
border: 1px solid #acacb4;
background-color: #acacb4;
}
.mui-btn-outlined
{
background-color: transparent;
}
.mui-btn-outlined.mui-btn-primary, .mui-btn-outlined.mui-btn-blue
{
color: #007aff;
}
.mui-btn-outlined.mui-btn-positive, .mui-btn-outlined.mui-btn-success, .mui-btn-outlined.mui-btn-green
{
color: #4cd964;
}
.mui-btn-outlined.mui-btn-warning, .mui-btn-outlined.mui-btn-yellow
{
color: #f0ad4e;
}
.mui-btn-outlined.mui-btn-negative, .mui-btn-outlined.mui-btn-danger, .mui-btn-outlined.mui-btn-red
{
color: #dd524d;
}
.mui-btn-outlined.mui-btn-royal, .mui-btn-outlined.mui-btn-purple
{
color: #8a6de9;
}
.mui-btn-outlined.mui-btn-primary:enabled:active, .mui-btn-outlined.mui-btn-blue:enabled:active, .mui-btn-outlined.mui-btn-positive:enabled:active, .mui-btn-outlined.mui-btn-success:enabled:active, .mui-btn-outlined.mui-btn-green:enabled:active, .mui-btn-outlined.mui-btn-warning:enabled:active, .mui-btn-outlined.mui-btn-yellow:enabled:active, .mui-btn-outlined.mui-btn-negative:enabled:active, .mui-btn-outlined.mui-btn-danger:enabled:active, .mui-btn-outlined.mui-btn-red:enabled:active, .mui-btn-outlined.mui-btn-royal:enabled:active, .mui-btn-outlined.mui-btn-purple:enabled:active
{
color: #fff;
}
.mui-btn-link
{
padding-top: 6px;
padding-bottom: 6px;
color: #007aff;
border: 0;
background-color: transparent;
}
.mui-btn-link:enabled:active, .mui-btn-link.mui-active:enabled
{
color: #0062cc;
background-color: transparent;
}
.mui-btn-block
{
font-size: 18px;
display: block;
width: 100%;
margin-bottom: 10px;
padding: 15px 0;
}
.mui-btn .mui-badge
{
font-size: 14px;
margin: -2px -4px -2px 4px;
background-color: rgba(0, 0, 0, .15);
}
.mui-btn .mui-badge-inverted,
.mui-btn:enabled:active .mui-badge-inverted
{
background-color: transparent;
}
.mui-btn-primary:enabled:active .mui-badge-inverted,
.mui-btn-positive:enabled:active .mui-badge-inverted,
.mui-btn-negative:enabled:active .mui-badge-inverted
{
color: #fff;
}
.mui-btn-block .mui-badge
{
position: absolute;
right: 0;
margin-right: 10px;
}
.mui-btn .mui-icon
{
font-size: inherit;
}
.mui-btn.mui-icon
{
font-size: 14px;
line-height: 1.42;
}
.mui-btn.mui-fab
{
width: 56px;
height: 56px;
padding: 16px;
border-radius: 50%;
outline: none;
}
.mui-btn.mui-fab.mui-btn-mini
{
width: 40px;
height: 40px;
padding: 8px;
}
.mui-btn.mui-fab .mui-icon
{
font-size: 24px;
line-height: 24px;
width: 24px;
height: 24px;
}
.mui-btn .mui-spinner
{
width: 14px;
height: 14px;
vertical-align: text-bottom;
}
.mui-btn-block .mui-spinner
{
width: 22px;
height: 22px;
}
.mui-bar
{
position: fixed;
z-index: 10;
right: 0;
left: 0;
height: 44px;
padding-right: 10px;
padding-left: 10px;
border-bottom: 0;
background-color: #f7f7f7;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85);
box-shadow: 0 0 1px rgba(0, 0, 0, .85);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.mui-bar .mui-title
{
right: 40px;
left: 40px;
display: inline-block;
overflow: hidden;
width: auto;
margin: 0;
text-overflow: ellipsis;
}
.mui-bar .mui-backdrop
{
background: none;
}
.mui-bar-header-secondary
{
top: 44px;
}
.mui-bar-footer
{
bottom: 0;
}
.mui-bar-footer-secondary
{
bottom: 44px;
}
.mui-bar-footer-secondary-tab
{
bottom: 50px;
}
.mui-bar-footer,
.mui-bar-footer-secondary,
.mui-bar-footer-secondary-tab
{
border-top: 0;
}
.mui-bar-transparent
{
top: 0;
background-color: rgba(247, 247, 247, 0);
-webkit-box-shadow: none;
box-shadow: none;
}
.mui-bar-nav
{
top: 0;
-webkit-box-shadow: 0 1px 6px #ccc;
box-shadow: 0 1px 6px #ccc;
}
.mui-bar-nav ~ .mui-content .mui-anchor
{
display: block;
visibility: hidden;
height: 45px;
margin-top: -45px;
}
.mui-bar-nav.mui-bar .mui-icon
{
margin-right: -10px;
margin-left: -10px;
padding-right: 10px;
padding-left: 10px;
}
.mui-title
{
font-size: 17px;
font-weight: 500;
line-height: 44px;
position: absolute;
display: block;
width: 100%;
margin: 0 -10px;
padding: 0;
text-align: center;
white-space: nowrap;
color: #000;
}
.mui-title a
{
color: inherit;
}
.mui-bar-tab
{
bottom: 0;
display: table;
width: 100%;
height: 50px;
padding: 0;
table-layout: fixed;
border-top: 0;
border-bottom: 0;
-webkit-touch-callout: none;
}
.mui-bar-tab .mui-tab-item
{
display: table-cell;
overflow: hidden;
width: 1%;
height: 50px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
color: #929292;
}
.mui-bar-tab .mui-tab-item.mui-active
{
color: #007aff;
}
.mui-bar-tab .mui-tab-item .mui-icon
{
top: 3px;
width: 24px;
height: 24px;
padding-top: 0;
padding-bottom: 0;
}
.mui-bar-tab .mui-tab-item .mui-icon ~ .mui-tab-label
{
font-size: 11px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.mui-bar-tab .mui-tab-item .mui-icon:active
{
background: none;
}
.mui-focusin > .mui-bar-nav,
.mui-focusin > .mui-bar-header-secondary
{
position: absolute;
}
.mui-focusin > .mui-bar ~ .mui-content
{
padding-bottom: 0;
}
.mui-bar .mui-btn
{
font-weight: 400;
position: relative;
z-index: 20;
top: 7px;
margin-top: 0;
padding: 6px 12px 7px;
}
.mui-bar .mui-btn.mui-pull-right
{
margin-left: 10px;
}
.mui-bar .mui-btn.mui-pull-left
{
margin-right: 10px;
}
.mui-bar .mui-btn-link
{
font-size: 16px;
line-height: 44px;
top: 0;
padding: 0;
color: #007aff;
border: 0;
}
.mui-bar .mui-btn-link:active, .mui-bar .mui-btn-link.mui-active
{
color: #0062cc;
}
.mui-bar .mui-btn-block
{
font-size: 16px;
top: 6px;
margin-bottom: 0;
padding: 5px 0;
}
.mui-bar .mui-btn-nav.mui-pull-left
{
margin-left: -5px;
}
.mui-bar .mui-btn-nav.mui-pull-left .mui-icon-left-nav
{
margin-right: -3px;
}
.mui-bar .mui-btn-nav.mui-pull-right
{
margin-right: -5px;
}
.mui-bar .mui-btn-nav.mui-pull-right .mui-icon-right-nav
{
margin-left: -3px;
}
.mui-bar .mui-btn-nav:active
{
opacity: .3;
}
.mui-bar .mui-icon
{
font-size: 24px;
position: relative;
z-index: 20;
padding-top: 10px;
padding-bottom: 10px;
}
.mui-bar .mui-icon:active
{
opacity: .3;
}
.mui-bar .mui-btn .mui-icon
{
top: 1px;
margin: 0;
padding: 0;
}
.mui-bar .mui-title .mui-icon
{
margin: 0;
padding: 0;
}
.mui-bar .mui-title .mui-icon.mui-icon-caret
{
top: 4px;
margin-left: -5px;
}
.mui-bar input[type='search']
{
height: 29px;
margin: 6px 0;
}
.mui-bar .mui-input-row .mui-btn
{
padding: 12px 10px;
}
.mui-bar .mui-search:before
{
margin-top: -10px;
}
.mui-bar .mui-input-row .mui-input-clear ~ .mui-icon-clear,
.mui-bar .mui-input-row .mui-input-speech ~ .mui-icon-speech
{
top: 0;
right: 12px;
}
.mui-bar.mui-bar-header-secondary .mui-input-row .mui-input-clear ~ .mui-icon-clear,
.mui-bar.mui-bar-header-secondary .mui-input-row .mui-input-speech ~ .mui-icon-speech
{
top: 0;
right: 0;
}
.mui-bar .mui-segmented-control
{
top: 7px;
width: auto;
margin: 0 auto;
}
.mui-bar.mui-bar-header-secondary .mui-segmented-control
{
top: 0;
}
.mui-badge
{
font-size: 12px;
line-height: 1;
display: inline-block;
padding: 3px 6px;
color: #333;
border-radius: 100px;
background-color: rgba(0, 0, 0, .15);
}
.mui-badge.mui-badge-inverted
{
padding: 0 5px 0 0;
color: #929292;
background-color: transparent;
}
.mui-badge-primary, .mui-badge-blue
{
color: #fff;
background-color: #007aff;
}
.mui-badge-primary.mui-badge-inverted, .mui-badge-blue.mui-badge-inverted
{
color: #007aff;
background-color: transparent;
}
.mui-badge-success, .mui-badge-green
{
color: #fff;
background-color: #4cd964;
}
.mui-badge-success.mui-badge-inverted, .mui-badge-green.mui-badge-inverted
{
color: #4cd964;
background-color: transparent;
}
.mui-badge-warning, .mui-badge-yellow
{
color: #fff;
background-color: #f0ad4e;
}
.mui-badge-warning.mui-badge-inverted, .mui-badge-yellow.mui-badge-inverted
{
color: #f0ad4e;
background-color: transparent;
}
.mui-badge-danger, .mui-badge-red
{
color: #fff;
background-color: #dd524d;
}
.mui-badge-danger.mui-badge-inverted, .mui-badge-red.mui-badge-inverted
{
color: #dd524d;
background-color: transparent;
}
.mui-badge-royal, .mui-badge-purple
{
color: #fff;
background-color: #8a6de9;
}
.mui-badge-royal.mui-badge-inverted, .mui-badge-purple.mui-badge-inverted
{
color: #8a6de9;
background-color: transparent;
}
.mui-icon .mui-badge
{
font-size: 10px;
line-height: 1.4;
position: absolute;
top: -2px;
left: 100%;
margin-left: -10px;
padding: 1px 5px;
color: white;
background: red;
}
.mui-card
{
font-size: 14px;
position: relative;
overflow: hidden;
margin: 10px;
border-radius: 2px;
background-color: white;
background-clip: padding-box;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.mui-content > .mui-card:first-child
{
margin-top: 15px;
}
.mui-card .mui-input-group:before, .mui-card .mui-input-group:after
{
height: 0;
}
.mui-card .mui-input-group .mui-input-row:last-child:before, .mui-card .mui-input-group .mui-input-row:last-child:after
{
height: 0;
}
.mui-card .mui-table-view
{
margin-bottom: 0;
border-top: 0;
border-bottom: 0;
border-radius: 6px;
}
.mui-card .mui-table-view .mui-table-view-divider:first-child, .mui-card .mui-table-view .mui-table-view-cell:first-child
{
top: 0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.mui-card .mui-table-view .mui-table-view-divider:last-child, .mui-card .mui-table-view .mui-table-view-cell:last-child
{
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
.mui-card .mui-table-view:before, .mui-card .mui-table-view:after
{
height: 0;
}
.mui-card > .mui-table-view > .mui-table-view-cell:last-child:before, .mui-card > .mui-table-view > .mui-table-view-cell:last-child:after
{
height: 0;
}
.mui-card-header,
.mui-card-footer
{
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: flex;
min-height: 44px;
padding: 10px 15px;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.mui-card-header .mui-card-link,
.mui-card-footer .mui-card-link
{
line-height: 44px;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: flex;
height: 44px;
margin-top: -10px;
margin-bottom: -10px;
-webkit-transition-duration: .3s;
transition-duration: .3s;
text-decoration: none;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.mui-card-header:after,
.mui-card-footer:before
{
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.mui-card-header
{
font-size: 17px;
border-radius: 2px 2px 0 0;
}
.mui-card-header:after
{
top: auto;
bottom: 0;
}
.mui-card-header > img:first-child
{
font-size: 0;
line-height: 0;
float: left;
width: 34px;
height: 34px;
}
.mui-card-footer
{
color: #6d6d72;
border-radius: 0 0 2px 2px;
}
.mui-card-content
{
font-size: 14px;
position: relative;
}
.mui-card-content-inner
{
position: relative;
padding: 15px;
}
.mui-card-media
{
vertical-align: bottom;
color: #fff;
background-position: center;
background-size: cover;
}
.mui-card-header.mui-card-media
{
display: block;
padding: 10px;
}
.mui-card-header.mui-card-media .mui-media-body
{
font-size: 14px;
font-weight: 500;
line-height: 17px;
margin-bottom: 0;
margin-left: 44px;
color: #333;
}
.mui-card-header.mui-card-media .mui-media-body p
{
font-size: 13px;
margin-bottom: 0;
}
.mui-table-view
{
position: relative;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
list-style: none;
background-color: #fff;
}
.mui-table-view:after
{
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.mui-table-view:before
{
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.mui-table-view:before
{
top: -1px;
}
.mui-table-view-icon .mui-table-view-cell .mui-navigate-right .mui-icon
{
font-size: 20px;
margin-top: -1px;
margin-right: 5px;
margin-left: -5px;
}
.mui-table-view-icon .mui-table-view-cell:after
{
left: 40px;
}
.mui-table-view-chevron .mui-table-view-cell
{
padding-right: 65px;
}
.mui-table-view-chevron .mui-table-view-cell > a:not(.mui-btn)
{
margin-right: -65px;
}
.mui-table-view-radio .mui-table-view-cell
{
padding-right: 65px;
}
.mui-table-view-radio .mui-table-view-cell > a:not(.mui-btn)
{
margin-right: -65px;
}
.mui-table-view-radio .mui-table-view-cell .mui-navigate-right:after
{
font-size: 30px;
font-weight: 600;
right: 9px;
content: '';
color: #007aff;
}
.mui-table-view-radio .mui-table-view-cell.mui-selected .mui-navigate-right:after
{
content: '\e472';
}
.mui-table-view-inverted
{
color: #fff;
background: #333;
}
.mui-table-view-inverted:after
{
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #222;
}
.mui-table-view-inverted:before
{
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #222;
}
.mui-table-view-inverted .mui-table-view-cell:after
{
position: absolute;
right: 0;
bottom: 0;
left: 15px;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #222;
}
.mui-table-view-inverted .mui-table-view-cell.mui-active
{
background-color: #242424;
}
.mui-table-view-inverted .mui-table-view-cell > a:not(.mui-btn).mui-active
{
background-color: #242424;
}
.mui-table-view-cell
{
position: relative;
overflow: hidden;
padding: 11px 15px;
-webkit-touch-callout: none;
}
.mui-table-view-cell:after
{
position: absolute;
right: 0;
bottom: 0;
left: 15px;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.mui-table-view-cell.mui-radio input[type=radio], .mui-table-view-cell.mui-checkbox input[type=checkbox]
{
top: 8px;
}
.mui-table-view-cell.mui-radio.mui-left, .mui-table-view-cell.mui-checkbox.mui-left
{
padding-left: 58px;
}
.mui-table-view-cell.mui-active
{
background-color: #eee;
}
.mui-table-view-cell:last-child:before, .mui-table-view-cell:last-child:after
{
height: 0;
}
.mui-table-view-cell > a:not(.mui-btn)
{
position: relative;
display: block;
overflow: hidden;
margin: -11px -15px;
padding: inherit;
white-space: nowrap;
text-overflow: ellipsis;
color: inherit;
/*&:active {
background-color: #eee;
}*/
}
.mui-table-view-cell > a:not(.mui-btn).mui-active
{
background-color: #eee;
}
.mui-table-view-cell p
{
margin-bottom: 0;
}
.mui-table-view-cell.mui-transitioning > .mui-slider-handle, .mui-table-view-cell.mui-transitioning > .mui-slider-left .mui-btn, .mui-table-view-cell.mui-transitioning > .mui-slider-right .mui-btn
{
-webkit-transition: -webkit-transform 300ms ease;
transition: transform 300ms ease;
}
.mui-table-view-cell.mui-active > .mui-slider-handle
{
background-color: #eee;
}
.mui-table-view-cell > .mui-slider-handle
{
position: relative;
background-color: #fff;
}
.mui-table-view-cell > .mui-slider-handle.mui-navigate-right:after, .mui-table-view-cell > .mui-slider-handle .mui-navigate-right:after
{
right: 0;
}
.mui-table-view-cell > .mui-slider-handle, .mui-table-view-cell > .mui-slider-left .mui-btn, .mui-table-view-cell > .mui-slider-right .mui-btn
{
-webkit-transition: -webkit-transform 0ms ease;
transition: transform 0ms ease;
}
.mui-table-view-cell > .mui-slider-left, .mui-table-view-cell > .mui-slider-right
{
position: absolute;
top: 0;
display: -webkit-box;
display: -webkit-flex;
display: flex;
height: 100%;
}
.mui-table-view-cell > .mui-slider-left > .mui-btn, .mui-table-view-cell > .mui-slider-right > .mui-btn
{
position: relative;
left: 0;
display: -webkit-box;
display: -webkit-flex;
display: flex;
padding: 0 30px;
color: #fff;
border: 0;
border-radius: 0;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.mui-table-view-cell > .mui-slider-left > .mui-btn:after, .mui-table-view-cell > .mui-slider-right > .mui-btn:after
{
position: absolute;
z-index: -1;
top: 0;
width: 600%;
height: 100%;
content: '';
background: inherit;
}
.mui-table-view-cell > .mui-slider-left > .mui-btn.mui-icon, .mui-table-view-cell > .mui-slider-right > .mui-btn.mui-icon
{
font-size: 30px;
}
.mui-table-view-cell > .mui-slider-right
{
right: 0;
-webkit-transition: -webkit-transform 0ms ease;
transition: transform 0ms ease;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.mui-table-view-cell > .mui-slider-left
{
left: 0;
-webkit-transition: -webkit-transform 0ms ease;
transition: transform 0ms ease;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.mui-table-view-cell > .mui-slider-left > .mui-btn:after
{
right: 100%;
margin-right: -1px;
}
.mui-table-view-divider
{
font-weight: 500;
position: relative;
margin-top: -1px;
margin-left: 0;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
color: #999;
background-color: #fafafa;
}
.mui-table-view-divider:after
{
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.mui-table-view-divider:before
{
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.mui-table-view .mui-media,
.mui-table-view .mui-media-body
{
overflow: hidden;
}
.mui-table-view .mui-media-large .mui-media-object
{
line-height: 80px;
max-width: 80px;
height: 80px;
}
.mui-table-view .mui-media .mui-subtitle
{
color: #000;
}
.mui-table-view .mui-media-object
{
line-height: 42px;
max-width: 42px;
height: 42px;
}
.mui-table-view .mui-media-object.mui-pull-left
{
margin-right: 10px;
}
.mui-table-view .mui-media-object.mui-pull-right
{
margin-left: 10px;
}
.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object
{
line-height: 29px;
max-width: 29px;
height: 29px;
margin: -4px 0;
}
.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object img
{
line-height: 29px;
max-width: 29px;
height: 29px;
}
.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object.mui-pull-left
{
margin-right: 10px;
}
.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object .mui-icon
{
font-size: 29px;
}
.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-body:after
{
position: absolute;
right: 0;
bottom: 0;
left: 55px;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.mui-table-view .mui-table-view-cell.mui-media-icon:after
{
height: 0 !important;
}
.mui-table-view.mui-unfold .mui-table-view-cell.mui-collapse .mui-table-view
{
display: block;
}
.mui-table-view.mui-unfold .mui-table-view-cell.mui-collapse .mui-table-view:before, .mui-table-view.mui-unfold .mui-table-view-cell.mui-collapse .mui-table-view:after
{
height: 0 !important;
}
.mui-table-view.mui-unfold .mui-table-view-cell.mui-media-icon.mui-collapse .mui-media-body:after
{
position: absolute;
right: 0;
bottom: 0;
left: 70px;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.mui-table-view-cell > .mui-btn,
.mui-table-view-cell > .mui-badge,
.mui-table-view-cell > .mui-switch,
.mui-table-view-cell > a > .mui-btn,
.mui-table-view-cell > a > .mui-badge,
.mui-table-view-cell > a > .mui-switch
{
position: absolute;
top: 50%;
right: 15px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.mui-table-view-cell .mui-navigate-right > .mui-btn,
.mui-table-view-cell .mui-navigate-right > .mui-badge,
.mui-table-view-cell .mui-navigate-right > .mui-switch,
.mui-table-view-cell .mui-push-left > .mui-btn,
.mui-table-view-cell .mui-push-left > .mui-badge,
.mui-table-view-cell .mui-push-left > .mui-switch,
.mui-table-view-cell .mui-push-right > .mui-btn,
.mui-table-view-cell .mui-push-right > .mui-badge,
.mui-table-view-cell .mui-push-right > .mui-switch,
.mui-table-view-cell > a .mui-navigate-right > .mui-btn,
.mui-table-view-cell > a .mui-navigate-right > .mui-badge,
.mui-table-view-cell > a .mui-navigate-right > .mui-switch,
.mui-table-view-cell > a .mui-push-left > .mui-btn,
.mui-table-view-cell > a .mui-push-left > .mui-badge,
.mui-table-view-cell > a .mui-push-left > .mui-switch,
.mui-table-view-cell > a .mui-push-right > .mui-btn,
.mui-table-view-cell > a .mui-push-right > .mui-badge,
.mui-table-view-cell > a .mui-push-right > .mui-switch
{
right: 35px;
}
.mui-content > .mui-table-view:first-child
{
margin-top: 15px;
}
.mui-table-view-cell.mui-collapse .mui-table-view:before, .mui-table-view-cell.mui-collapse .mui-table-view:after
{
height: 0;
}
.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell:last-child:after
{
height: 0;
}
.mui-table-view-cell.mui-collapse > .mui-navigate-right:after, .mui-table-view-cell.mui-collapse > .mui-push-right:after
{
content: '\e581';
}
.mui-table-view-cell.mui-collapse.mui-active
{
margin-top: -1px;
}
.mui-table-view-cell.mui-collapse.mui-active .mui-table-view, .mui-table-view-cell.mui-collapse.mui-active .mui-collapse-content
{
display: block;
}
.mui-table-view-cell.mui-collapse.mui-active > .mui-navigate-right:after, .mui-table-view-cell.mui-collapse.mui-active > .mui-push-right:after
{
content: '\e580';
}
.mui-table-view-cell.mui-collapse.mui-active .mui-table-view-cell > a:not(.mui-btn).mui-active
{
margin-left: -31px;
padding-left: 47px;
}
.mui-table-view-cell.mui-collapse .mui-collapse-content
{
position: relative;
display: none;
overflow: hidden;
margin: 11px -15px -11px;
padding: 8px 15px;
-webkit-transition: height .35s ease;
-o-transition: height .35s ease;
transition: height .35s ease;
background: white;
}
.mui-table-view-cell.mui-collapse .mui-collapse-content > .mui-input-group, .mui-table-view-cell.mui-collapse .mui-collapse-content > .mui-slider
{
width: auto;
height: auto;
margin: -8px -15px;
}
.mui-table-view-cell.mui-collapse .mui-collapse-content > .mui-slider
{
margin: -8px -16px;
}
.mui-table-view-cell.mui-collapse .mui-table-view
{
display: none;
margin-top: 11px;
margin-right: -15px;
margin-bottom: -11px;
margin-left: -15px;
border: 0;
}
.mui-table-view-cell.mui-collapse .mui-table-view.mui-table-view-chevron
{
margin-right: -65px;
}
.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell
{
padding-left: 31px;
background-position: 31px 100%;
}
.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell:after
{
position: absolute;
right: 0;
bottom: 0;
left: 30px;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.mui-table-view.mui-grid-view
{
font-size: 0;
display: block;
width: 100%;
padding: 0 10px 10px 0;
white-space: normal;
}
.mui-table-view.mui-grid-view .mui-table-view-cell
{
font-size: 17px;
display: inline-block;
margin-right: -4px;
padding: 10px 0 0 14px;
text-align: center;
vertical-align: middle;
background: none;
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object
{
width: 100%;
max-width: 100%;
height: auto;
}
.mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn)
{
margin: -10px 0 0 -14px;
}
.mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn):active, .mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn).mui-active
{
background: none;
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body
{
font-size: 15px;
line-height: 15px;
display: block;
width: 100%;
height: 15px;
margin-top: 8px;
text-overflow: ellipsis;
color: #333;
}
.mui-table-view.mui-grid-view .mui-table-view-cell:before, .mui-table-view.mui-grid-view .mui-table-view-cell:after
{
height: 0;
}
.mui-grid-view.mui-grid-9
{
margin: 0;
padding: 0;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
background-color: #f2f2f2;
}
.mui-grid-view.mui-grid-9:before, .mui-grid-view.mui-grid-9:after
{
display: table;
content: ' ';
}
.mui-grid-view.mui-grid-9:after
{
clear: both;
}
.mui-grid-view.mui-grid-9:after
{
position: static;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell
{
margin: 0;
padding: 11px 15px;
vertical-align: top;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell.mui-active
{
background-color: #eee;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell > a:not(.mui-btn)
{
margin: 0;
padding: 10px 0;
}
.mui-grid-view.mui-grid-9:before
{
height: 0;
}
.mui-grid-view.mui-grid-9 .mui-media
{
color: #797979;
}
.mui-grid-view.mui-grid-9 .mui-media .mui-icon
{
font-size: 2.4em;
position: relative;
}
.mui-slider-cell
{
position: relative;
}
.mui-slider-cell > .mui-slider-handle
{
z-index: 1;
}
.mui-slider-cell > .mui-slider-left, .mui-slider-cell > .mui-slider-right
{
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
}
.mui-slider-cell > .mui-slider-left
{
left: 0;
}
.mui-slider-cell > .mui-slider-right
{
right: 0;
}
input,
textarea,
select
{
font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-size: 17px;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
}
input:focus,
textarea:focus,
select:focus
{
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
-webkit-user-modify: read-write-plaintext-only;
}
select,
textarea,
input[type='text'],
input[type='search'],
input[type='password'],
input[type='datetime'],
input[type='datetime-local'],
input[type='date'],
input[type='month'],
input[type='time'],
input[type='week'],
input[type='number'],
input[type='email'],
input[type='url'],
input[type='tel'],
input[type='color']
{
line-height: 21px;
width: 100%;
height: 40px;
margin-bottom: 15px;
padding: 10px 15px;
-webkit-user-select: text;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 3px;
outline: none;
background-color: #fff;
-webkit-appearance: none;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{
margin: 0;
-webkit-appearance: none;
}
input[type='search']
{
font-size: 16px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 34px;
text-align: center;
border: 0;
border-radius: 6px;
background-color: rgba(0, 0, 0, .1);
}
input[type='search']:focus
{
text-align: left;
}
textarea
{
height: auto;
resize: none;
}
select
{
font-size: 14px;
height: auto;
margin-top: 1px;
border: 0 !important;
background-color: #fff;
}
select:focus
{
-webkit-user-modify: read-only;
}
.mui-input-group
{
position: relative;
padding: 0;
border: 0;
background-color: #fff;
}
.mui-input-group:after
{
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.mui-input-group:before
{
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.mui-input-group input,
.mui-input-group textarea
{
margin-bottom: 0;
border: 0;
border-radius: 0;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.mui-input-group input[type='search']
{
background: none;
}
.mui-input-group input:last-child
{
background-image: none;
}
.mui-input-row
{
clear: left;
overflow: hidden;
}
.mui-input-row select
{
font-size: 17px;
height: 37px;
padding: 0;
}
.mui-input-row:last-child,
.mui-input-row label + input, .mui-input-row .mui-btn + input
{
background: none;
}
.mui-input-group .mui-input-row
{
height: 40px;
}
.mui-input-group .mui-input-row:after
{
position: absolute;
right: 0;
bottom: 0;
left: 15px;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.mui-input-row label
{
font-family: 'Helvetica Neue', Helvetica, sans-serif;
line-height: 1.1;
float: left;
width: 35%;
padding: 11px 15px;
}
.mui-input-row label ~ input, .mui-input-row label ~ select, .mui-input-row label ~ textarea
{
float: right;
width: 65%;
margin-bottom: 0;
padding-left: 0;
border: 0;
}
.mui-input-row .mui-btn
{
line-height: 1.1;
float: right;
width: 15%;
padding: 10px 15px;
}
.mui-input-row .mui-btn ~ input, .mui-input-row .mui-btn ~ select, .mui-input-row .mui-btn ~ textarea
{
float: left;
width: 85%;
margin-bottom: 0;
padding-left: 0;
border: 0;
}
.mui-button-row
{
position: relative;
padding-top: 5px;
text-align: center;
}
.mui-input-group .mui-button-row
{
height: 45px;
}
.mui-input-row
{
position: relative;
}
.mui-input-row.mui-input-range
{
overflow: visible;
padding-right: 20px;
}
.mui-input-row .mui-inline
{
padding: 8px 0;
}
.mui-input-row .mui-input-clear ~ .mui-icon-clear, .mui-input-row .mui-input-speech ~ .mui-icon-speech, .mui-input-row .mui-input-password ~ .mui-icon-eye
{
font-size: 20px;
position: absolute;
z-index: 1;
top: 10px;
right: 0;
width: 38px;
height: 38px;
text-align: center;
color: #999;
}
.mui-input-row .mui-input-clear ~ .mui-icon-clear.mui-active, .mui-input-row .mui-input-speech ~ .mui-icon-speech.mui-active, .mui-input-row .mui-input-password ~ .mui-icon-eye.mui-active
{
color: #007aff;
}
.mui-input-row .mui-input-speech ~ .mui-icon-speech
{
font-size: 24px;
top: 8px;
}
.mui-input-row .mui-input-clear ~ .mui-icon-clear ~ .mui-icon-speech
{
display: none;
}
.mui-input-row .mui-input-clear ~ .mui-icon-clear.mui-hidden ~ .mui-icon-speech
{
display: inline-block;
}
.mui-input-row .mui-icon-speech ~ .mui-placeholder
{
right: 38px;
}
.mui-input-row.mui-search .mui-icon-clear
{
top: 7px;
}
.mui-input-row.mui-search .mui-icon-speech
{
top: 5px;
}
.mui-radio, .mui-checkbox
{
position: relative;
}
.mui-radio label, .mui-checkbox label
{
display: inline-block;
float: none;
width: 100%;
padding-right: 58px;
}
.mui-radio.mui-left input[type='radio'], .mui-checkbox.mui-left input[type='checkbox']
{
left: 20px;
}
.mui-radio.mui-left label, .mui-checkbox.mui-left label
{
padding-right: 15px;
padding-left: 58px;
}
.mui-radio input[type='radio'], .mui-checkbox input[type='checkbox']
{
position: absolute;
top: 4px;
right: 20px;
display: inline-block;
width: 28px;
height: 26px;
border: 0;
outline: 0 !important;
background-color: transparent;
-webkit-appearance: none;
}
.mui-radio input[type='radio'][disabled]:before, .mui-checkbox input[type='checkbox'][disabled]:before
{
opacity: .3;
}
.mui-radio input[type='radio']:before, .mui-checkbox input[type='checkbox']:before
{
font-family: Muiicons;
font-size: 28px;
font-weight: normal;
line-height: 1;
text-decoration: none;
color: #aaa;
border-radius: 0;
background: none;
-webkit-font-smoothing: antialiased;
}
.mui-radio input[type='radio']:checked:before, .mui-checkbox input[type='checkbox']:checked:before
{
color: #007aff;
}
.mui-radio.mui-disabled label, .mui-radio label.mui-disabled, .mui-checkbox.mui-disabled label, .mui-checkbox label.mui-disabled
{
opacity: .4;
}
.mui-radio input[type='radio']:before
{
content: '\e411';
}
.mui-radio input[type='radio']:checked:before
{
content: '\e441';
}
.mui-checkbox input[type='checkbox']:before
{
content: '\e411';
}
.mui-checkbox input[type='checkbox']:checked:before
{
content: '\e442';
}
.mui-select
{
position: relative;
}
.mui-select:before
{
font-family: Muiicons;
position: absolute;
top: 8px;
right: 21px;
content: '\e581';
color: rgba(170, 170, 170, .6);
}
.mui-input-row .mui-switch
{
float: right;
margin-top: 5px;
margin-right: 20px;
}
.mui-input-range
{
/*input[type="range"] {
-webkit-appearance: none;
background: #999;
height: 36px;
border-radius: 1px;
overflow: hidden;
margin-top: 2px;
margin-bottom: 2px;
outline:none;
position:relative;
width:100%;
}*/
/*input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none!important;
opacity: 0.5;
height:28px;
width:28px;
border-radius: 50%;
background:#00b7fb;
position: relative;
pointer-events: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
&:before{
position: absolute;
top: 13px;
left: -2000px;
width: 2000px;
height: 2px;
background: #00b7fb;
content:' ';
}
}*/
}
.mui-input-range input[type='range']
{
position: relative;
width: 100%;
height: 2px;
margin: 17px 0;
padding: 0;
cursor: pointer;
border: 0;
border-radius: 3px;
outline: none;
background-color: #999;
-webkit-appearance: none !important;
}
.mui-input-range input[type='range']::-webkit-slider-thumb
{
width: 28px;
height: 28px;
border-color: #0062cc;
border-radius: 50%;
background-color: #007aff;
background-clip: padding-box;
-webkit-appearance: none !important;
}
.mui-input-range label ~ input[type='range']
{
width: 65%;
}
.mui-input-range .mui-tooltip
{
font-size: 36px;
line-height: 64px;
position: absolute;
z-index: 1;
top: -70px;
width: 64px;
height: 64px;
text-align: center;
opacity: .8;
color: #333;
border: 1px solid #ddd;
border-radius: 6px;
background-color: #fff;
text-shadow: 0 1px 0 #f3f3f3;
}
.mui-search
{
position: relative;
}
.mui-search input[type='search']
{
padding-left: 30px;
}
.mui-search .mui-placeholder
{
font-size: 16px;
line-height: 34px;
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: inline-block;
height: 34px;
text-align: center;
color: #999;
border: 0;
border-radius: 6px;
background: none;
}
.mui-search .mui-placeholder .mui-icon
{
font-size: 20px;
color: #333;
}
.mui-search:before
{
font-family: Muiicons;
font-size: 20px;
font-weight: normal;
position: absolute;
top: 50%;
right: 50%;
display: none;
margin-top: -18px;
margin-right: 31px;
content: '\e466';
}
.mui-search.mui-active:before
{
font-size: 20px;
right: auto;
left: 5px;
display: block;
margin-right: 0;
}
.mui-search.mui-active input[type='search']
{
text-align: left;
}
.mui-search.mui-active .mui-placeholder
{
display: none;
}
.mui-segmented-control
{
font-size: 15px;
font-weight: 400;
position: relative;
display: table;
overflow: hidden;
width: 100%;
table-layout: fixed;
border: 1px solid #007aff;
border-radius: 3px;
background-color: transparent;
-webkit-touch-callout: none;
}
.mui-segmented-control.mui-segmented-control-vertical
{
border-collapse: collapse;
border-width: 0;
border-radius: 0;
}
.mui-segmented-control.mui-segmented-control-vertical .mui-control-item
{
display: block;
border-bottom: 1px solid #c8c7cc;
border-left-width: 0;
}
.mui-segmented-control.mui-scroll-wrapper
{
height: 38px;
}
.mui-segmented-control.mui-scroll-wrapper .mui-scroll
{
width: auto;
height: 40px;
white-space: nowrap;
}
.mui-segmented-control.mui-scroll-wrapper .mui-control-item
{
display: inline-block;
width: auto;
padding: 0 20px;
border: 0;
}
.mui-segmented-control .mui-control-item
{
line-height: 38px;
display: table-cell;
overflow: hidden;
width: 1%;
-webkit-transition: background-color .1s linear;
transition: background-color .1s linear;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
color: #007aff;
border-color: #007aff;
border-left: 1px solid #007aff;
}
.mui-segmented-control .mui-control-item:first-child
{
border-left-width: 0;
}
.mui-segmented-control .mui-control-item.mui-active
{
color: #fff;
background-color: #007aff;
}
.mui-segmented-control.mui-segmented-control-inverted
{
width: 100%;
border: 0;
border-radius: 0;
}
.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item
{
border-bottom: 1px solid #c8c7cc;
}
.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active
{
border-bottom: 1px solid #c8c7cc;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item
{
color: inherit;
border: 0;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active
{
color: #007aff;
border-bottom: 2px solid #007aff;
background: none;
}
.mui-segmented-control.mui-segmented-control-inverted ~ .mui-slider-progress-bar
{
background-color: #007aff;
}
.mui-segmented-control-positive
{
border: 1px solid #4cd964;
}
.mui-segmented-control-positive .mui-control-item
{
color: #4cd964;
border-color: inherit;
}
.mui-segmented-control-positive .mui-control-item.mui-active
{
color: #fff;
background-color: #4cd964;
}
.mui-segmented-control-positive.mui-segmented-control-inverted .mui-control-item.mui-active
{
color: #4cd964;
border-bottom: 2px solid #4cd964;
background: none;
}
.mui-segmented-control-positive.mui-segmented-control-inverted ~ .mui-slider-progress-bar
{
background-color: #4cd964;
}
.mui-segmented-control-negative
{
border: 1px solid #dd524d;
}
.mui-segmented-control-negative .mui-control-item
{
color: #dd524d;
border-color: inherit;
}
.mui-segmented-control-negative .mui-control-item.mui-active
{
color: #fff;
background-color: #dd524d;
}
.mui-segmented-control-negative.mui-segmented-control-inverted .mui-control-item.mui-active
{
color: #dd524d;
border-bottom: 2px solid #dd524d;
background: none;
}
.mui-segmented-control-negative.mui-segmented-control-inverted ~ .mui-slider-progress-bar
{
background-color: #dd524d;
}
.mui-control-content
{
position: relative;
display: none;
}
.mui-control-content.mui-active
{
display: block;
}
.mui-popover
{
position: absolute;
z-index: 999;
display: none;
width: 280px;
-webkit-transition: opacity .3s;
transition: opacity .3s;
-webkit-transition-property: opacity;
transition-property: opacity;
-webkit-transform: none;
transform: none;
opacity: 0;
border-radius: 7px;
background-color: #f7f7f7;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .1);
box-shadow: 0 0 15px rgba(0, 0, 0, .1);
}
.mui-popover .mui-popover-arrow
{
position: absolute;
z-index: 1000;
top: -25px;
left: 0;
overflow: hidden;
width: 26px;
height: 26px;
}
.mui-popover .mui-popover-arrow:after
{
position: absolute;
top: 19px;
left: 0;
width: 26px;
height: 26px;
content: ' ';
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-radius: 3px;
background: #f7f7f7;
}
.mui-popover .mui-popover-arrow.mui-bottom
{
top: 100%;
left: -26px;
margin-top: -1px;
}
.mui-popover .mui-popover-arrow.mui-bottom:after
{
top: -19px;
left: 0;
}
.mui-popover.mui-popover-action
{
bottom: 0;
width: 100%;
-webkit-transition: -webkit-transform .3s, opacity .3s;
transition: transform .3s, opacity .3s;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
border-radius: 0;
background: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.mui-popover.mui-popover-action .mui-popover-arrow
{
display: none;
}
.mui-popover.mui-popover-action.mui-popover-bottom
{
position: fixed;
}
.mui-popover.mui-popover-action.mui-active
{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.mui-popover.mui-popover-action .mui-table-view
{
margin: 8px;
text-align: center;
color: #007aff;
border-radius: 4px;
}
.mui-popover.mui-popover-action .mui-table-view .mui-table-view-cell:after
{
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.mui-popover.mui-popover-action .mui-table-view small
{
font-weight: 400;
line-height: 1.3;
display: block;
}
.mui-popover.mui-active
{
display: block;
opacity: 1;
}
.mui-popover .mui-bar ~ .mui-table-view
{
padding-top: 44px;
}
.mui-backdrop
{
position: fixed;
z-index: 998;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, .3);
}
.mui-bar-backdrop.mui-backdrop
{
bottom: 50px;
background: none;
}
.mui-backdrop-action.mui-backdrop
{
background-color: rgba(0, 0, 0, .3);
}
.mui-bar-backdrop.mui-backdrop, .mui-backdrop-action.mui-backdrop
{
opacity: 0;
}
.mui-bar-backdrop.mui-backdrop.mui-active, .mui-backdrop-action.mui-backdrop.mui-active
{
-webkit-transition: all .4s ease;
transition: all .4s ease;
opacity: 1;
}
.mui-popover .mui-btn-block
{
margin-bottom: 5px;
}
.mui-popover .mui-btn-block:last-child
{
margin-bottom: 0;
}
.mui-popover .mui-bar
{
-webkit-box-shadow: none;
box-shadow: none;
}
.mui-popover .mui-bar-nav
{
border-bottom: 1px solid rgba(0, 0, 0, .15);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
-webkit-box-shadow: none;
box-shadow: none;
}
.mui-popover .mui-scroll-wrapper
{
margin: 7px 0;
border-radius: 7px;
background-clip: padding-box;
}
.mui-popover .mui-scroll .mui-table-view
{
max-height: none;
}
.mui-popover .mui-table-view
{
overflow: auto;
max-height: 300px;
margin-bottom: 0;
border-radius: 7px;
background-color: #f7f7f7;
background-image: none;
-webkit-overflow-scrolling: touch;
}
.mui-popover .mui-table-view:before, .mui-popover .mui-table-view:after
{
height: 0;
}
.mui-popover .mui-table-view .mui-table-view-cell:first-child,
.mui-popover .mui-table-view .mui-table-view-cell:first-child > a:not(.mui-btn)
{
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.mui-popover .mui-table-view .mui-table-view-cell:last-child,
.mui-popover .mui-table-view .mui-table-view-cell:last-child > a:not(.mui-btn)
{
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
}
.mui-popover.mui-bar-popover .mui-table-view
{
width: 106px;
}
.mui-popover.mui-bar-popover .mui-table-view .mui-table-view-cell
{
padding: 11px 15px 11px 15px;
background-position: 0 100%;
}
.mui-popover.mui-bar-popover .mui-table-view .mui-table-view-cell > a:not(.mui-btn)
{
margin: -11px -15px -11px -15px;
}
.mui-popup-backdrop
{
position: fixed;
z-index: 998;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
opacity: 0;
background: rgba(0, 0, 0, .4);
}
.mui-popup-backdrop.mui-active
{
opacity: 1;
}
.mui-popup
{
position: fixed;
z-index: 10000;
top: 50%;
left: 50%;
display: none;
overflow: hidden;
width: 270px;
-webkit-transition-property: -webkit-transform,opacity;
transition-property: transform,opacity;
-webkit-transform: translate3d(-50%, -50%, 0) scale(1.185);
transform: translate3d(-50%, -50%, 0) scale(1.185);
text-align: center;
opacity: 0;
color: #000;
border-radius: 13px;
}
.mui-popup.mui-popup-in
{
display: block;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: translate3d(-50%, -50%, 0) scale(1);
transform: translate3d(-50%, -50%, 0) scale(1);
opacity: 1;
}
.mui-popup.mui-popup-out
{
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: translate3d(-50%, -50%, 0) scale(1);
transform: translate3d(-50%, -50%, 0) scale(1);
opacity: 0;
}
.mui-popup-inner
{
position: relative;
padding: 15px;
border-radius: 13px 13px 0 0;
background: rgba(255, 255, 255, .95);
}
.mui-popup-inner:after
{
position: absolute;
z-index: 15;
top: auto;
right: auto;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
background-color: rgba(0, 0, 0, .2);
}
.mui-popup-title
{
font-size: 18px;
font-weight: 500;
text-align: center;
}
.mui-popup-title + .mui-popup-text
{
font-family: inherit;
font-size: 14px;
margin: 5px 0 0;
}
.mui-popup-buttons
{
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: flex;
height: 44px;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.mui-popup-button
{
font-size: 17px;
line-height: 44px;
position: relative;
display: block;
overflow: hidden;
box-sizing: border-box;
width: 100%;
height: 44px;
padding: 0 5px;
cursor: pointer;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
color: #007aff;
background: rgba(255, 255, 255, .95);
-webkit-box-flex: 1;
}
.mui-popup-button:after
{
position: absolute;
z-index: 15;
top: 0;
right: 0;
bottom: auto;
left: auto;
display: block;
width: 1px;
height: 100%;
content: '';
-webkit-transform: scaleX(.5);
transform: scaleX(.5);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
background-color: rgba(0, 0, 0, .2);
}
.mui-popup-button:first-child
{
border-radius: 0 0 0 13px;
}
.mui-popup-button:first-child:last-child
{
border-radius: 0 0 13px 13px;
}
.mui-popup-button:last-child
{
border-radius: 0 0 13px 0;
}
.mui-popup-button:last-child:after
{
display: none;
}
.mui-popup-button.mui-popup-button-bold
{
font-weight: 600;
}
.mui-popup-input input
{
font-size: 14px;
width: 100%;
height: 26px;
margin: 15px 0 0;
padding: 0 5px;
border: 1px solid rgba(0, 0, 0, .3);
border-radius: 0;
background: #fff;
}
.mui-plus.mui-android .mui-popup-backdrop
{
-webkit-transition-duration: 1ms;
transition-duration: 1ms;
}
.mui-plus.mui-android .mui-popup
{
-webkit-transition-duration: 1ms;
transition-duration: 1ms;
-webkit-transform: translate3d(-50%, -50%, 0) scale(1);
transform: translate3d(-50%, -50%, 0) scale(1);
}
/* === Progress Bar === */
.mui-progressbar
{
position: relative;
display: block;
overflow: hidden;
width: 100%;
height: 2px;
-webkit-transform-origin: center top;
transform-origin: center top;
vertical-align: middle;
border-radius: 2px;
background: #b6b6b6;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.mui-progressbar span
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: 150ms;
transition: 150ms;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
background: #007aff;
}
.mui-progressbar.mui-progressbar-infinite:before
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-animation: mui-progressbar-infinite 1s linear infinite;
animation: mui-progressbar-infinite 1s linear infinite;
background: #007aff;
}
body > .mui-progressbar
{
position: absolute;
z-index: 10000;
top: 44px;
left: 0;
border-radius: 0;
}
.mui-progressbar-in
{
-webkit-animation: mui-progressbar-in 300ms forwards;
animation: mui-progressbar-in 300ms forwards;
}
.mui-progressbar-out
{
-webkit-animation: mui-progressbar-out 300ms forwards;
animation: mui-progressbar-out 300ms forwards;
}
@-webkit-keyframes mui-progressbar-in
{
from
{
-webkit-transform: scaleY(0);
opacity: 0;
}
to
{
-webkit-transform: scaleY(1);
opacity: 1;
}
}
@keyframes mui-progressbar-in
{
from
{
transform: scaleY(0);
opacity: 0;
}
to
{
transform: scaleY(1);
opacity: 1;
}
}
@-webkit-keyframes mui-progressbar-out
{
from
{
-webkit-transform: scaleY(1);
opacity: 1;
}
to
{
-webkit-transform: scaleY(0);
opacity: 0;
}
}
@keyframes mui-progressbar-out
{
from
{
transform: scaleY(1);
opacity: 1;
}
to
{
transform: scaleY(0);
opacity: 0;
}
}
@-webkit-keyframes mui-progressbar-infinite
{
0%
{
-webkit-transform: translate3d(-50%, 0, 0) scaleX(.5);
}
100%
{
-webkit-transform: translate3d(100%, 0, 0) scaleX(.5);
}
}
@keyframes mui-progressbar-infinite
{
0%
{
transform: translate3d(-50%, 0, 0) scaleX(.5);
}
100%
{
transform: translate3d(100%, 0, 0) scaleX(.5);
}
}
.mui-pagination
{
display: inline-block;
margin: 0 auto;
padding-left: 0;
border-radius: 6px;
}
.mui-pagination > li
{
display: inline;
}
.mui-pagination > li > a,
.mui-pagination > li > span
{
line-height: 1.428571429;
position: relative;
float: left;
margin-left: -1px;
padding: 6px 12px;
text-decoration: none;
color: #007aff;
border: 1px solid #ddd;
background-color: #fff;
}
.mui-pagination > li:first-child > a,
.mui-pagination > li:first-child > span
{
margin-left: 0;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
background-clip: padding-box;
}
.mui-pagination > li:last-child > a,
.mui-pagination > li:last-child > span
{
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
background-clip: padding-box;
}
.mui-pagination > li:active > a, .mui-pagination > li:active > a:active,
.mui-pagination > li:active > span,
.mui-pagination > li:active > span:active,
.mui-pagination > li.mui-active > a,
.mui-pagination > li.mui-active > a:active,
.mui-pagination > li.mui-active > span,
.mui-pagination > li.mui-active > span:active
{
z-index: 2;
cursor: default;
color: #fff;
border-color: #007aff;
background-color: #007aff;
}
.mui-pagination > li.mui-disabled > span,
.mui-pagination > li.mui-disabled > span:active,
.mui-pagination > li.mui-disabled > a,
.mui-pagination > li.mui-disabled > a:active
{
opacity: .6;
color: #777;
border: 1px solid #ddd;
background-color: #fff;
}
.mui-pagination-lg > li > a,
.mui-pagination-lg > li > span
{
font-size: 18px;
padding: 10px 16px;
}
.mui-pagination-sm > li > a,
.mui-pagination-sm > li > span
{
font-size: 12px;
padding: 5px 10px;
}
.mui-pager
{
padding-left: 0;
list-style: none;
text-align: center;
}
.mui-pager:before, .mui-pager:after
{
display: table;
content: ' ';
}
.mui-pager:after
{
clear: both;
}
.mui-pager li
{
display: inline;
}
.mui-pager li > a,
.mui-pager li > span
{
display: inline-block;
padding: 5px 14px;
border: 1px solid #ddd;
border-radius: 6px;
background-color: #fff;
background-clip: padding-box;
}
.mui-pager li:active > a, .mui-pager li:active > span, .mui-pager li.mui-active > a, .mui-pager li.mui-active > span
{
cursor: default;
text-decoration: none;
color: #fff;
border-color: #007aff;
background-color: #007aff;
}
.mui-pager .mui-next > a,
.mui-pager .mui-next > span
{
float: right;
}
.mui-pager .mui-previous > a,
.mui-pager .mui-previous > span
{
float: left;
}
.mui-pager .mui-disabled > a,
.mui-pager .mui-disabled > a:active,
.mui-pager .mui-disabled > span,
.mui-pager .mui-disabled > span:active
{
opacity: .6;
color: #777;
border: 1px solid #ddd;
background-color: #fff;
}
.mui-modal
{
position: fixed;
z-index: 999;
top: 0;
overflow: hidden;
width: 100%;
min-height: 100%;
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
transition: transform .25s, opacity 1ms .25s;
-webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
opacity: 0;
background-color: #fff;
}
.mui-modal.mui-active
{
height: 100%;
-webkit-transition: -webkit-transform .25s;
transition: transform .25s;
-webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
.mui-android .mui-modal .mui-bar
{
position: static;
}
.mui-android .mui-modal .mui-bar-nav ~ .mui-content
{
padding-top: 0;
}
.mui-slider
{
position: relative;
z-index: 1;
overflow: hidden;
width: 100%;
}
.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active
{
border-bottom: 0;
}
.mui-slider .mui-segmented-control.mui-segmented-control-inverted ~ .mui-slider-group .mui-slider-item
{
border-top: 1px solid #c8c7cc;
border-bottom: 1px solid #c8c7cc;
}
.mui-slider .mui-slider-group
{
font-size: 0;
position: relative;
-webkit-transition: all 0s linear;
transition: all 0s linear;
white-space: nowrap;
}
.mui-slider .mui-slider-group .mui-slider-item
{
font-size: 14px;
position: relative;
display: inline-block;
width: 100%;
height: 100%;
vertical-align: top;
white-space: normal;
}
.mui-slider .mui-slider-group .mui-slider-item > a:not(.mui-control-item)
{
line-height: 0;
position: relative;
display: block;
}
.mui-slider .mui-slider-group .mui-slider-item img
{
width: 100%;
}
.mui-slider .mui-slider-group .mui-slider-item .mui-table-view:before, .mui-slider .mui-slider-group .mui-slider-item .mui-table-view:after
{
height: 0;
}
.mui-slider .mui-slider-group.mui-slider-loop
{
-webkit-transform: translate(-100%, 0px);
transform: translate(-100%, 0px);
}
.mui-slider-title
{
line-height: 30px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
margin: 0;
text-align: left;
text-indent: 12px;
opacity: .8;
background-color: #000;
}
.mui-slider-indicator
{
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
background: none;
}
.mui-slider-indicator.mui-segmented-control
{
position: relative;
bottom: auto;
}
.mui-slider-indicator .mui-indicator
{
display: inline-block;
width: 6px;
height: 6px;
margin: 1px 6px;
cursor: pointer;
border-radius: 50%;
background: #aaa;
-webkit-box-shadow: 0 0 1px 1px rgba(130, 130, 130, .7);
box-shadow: 0 0 1px 1px rgba(130, 130, 130, .7);
}
.mui-slider-indicator .mui-active.mui-indicator
{
background: #fff;
}
.mui-slider-indicator .mui-icon
{
font-size: 20px;
line-height: 30px;
width: 40px;
height: 30px;
margin: 3px;
text-align: center;
border: 1px solid #ddd;
}
.mui-slider-indicator .mui-number
{
line-height: 32px;
display: inline-block;
width: 58px;
}
.mui-slider-indicator .mui-number span
{
color: #ff5053;
}
.mui-slider-progress-bar
{
z-index: 1;
height: 2px;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.mui-switch
{
position: relative;
display: block;
width: 74px;
height: 30px;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: background-color, border;
transition-property: background-color, border;
border: 2px solid #ddd;
border-radius: 20px;
background-color: #fff;
background-clip: padding-box;
}
.mui-switch.mui-disabled
{
opacity: .3;
}
.mui-switch .mui-switch-handle
{
position: absolute;
z-index: 1;
top: -1px;
left: -1px;
width: 28px;
height: 28px;
-webkit-transition: .2s ease-in-out;
transition: .2s ease-in-out;
-webkit-transition-property: -webkit-transform, width,left;
transition-property: transform, width,left;
border-radius: 16px;
background-color: #fff;
background-clip: padding-box;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
}
.mui-switch:before
{
font-size: 13px;
position: absolute;
top: 3px;
right: 11px;
content: 'Off';
text-transform: uppercase;
color: #999;
}
.mui-switch.mui-dragging
{
border-color: #f7f7f7;
background-color: #f7f7f7;
}
.mui-switch.mui-dragging .mui-switch-handle
{
width: 38px;
}
.mui-switch.mui-dragging.mui-active .mui-switch-handle
{
left: -11px;
width: 38px;
}
.mui-switch.mui-active
{
border-color: #4cd964;
background-color: #4cd964;
}
.mui-switch.mui-active .mui-switch-handle
{
-webkit-transform: translate(43px, 0);
transform: translate(43px, 0);
}
.mui-switch.mui-active:before
{
right: auto;
left: 15px;
content: 'On';
color: #fff;
}
.mui-switch input[type='checkbox']
{
display: none;
}
.mui-switch-mini
{
width: 47px;
}
.mui-switch-mini:before
{
display: none;
}
.mui-switch-mini.mui-active .mui-switch-handle
{
-webkit-transform: translate(16px, 0);
transform: translate(16px, 0);
}
.mui-switch-blue.mui-active
{
border: 2px solid #007aff;
background-color: #007aff;
}
.mui-content.mui-fade
{
left: 0;
opacity: 0;
}
.mui-content.mui-fade.mui-in
{
opacity: 1;
}
.mui-content.mui-sliding
{
z-index: 2;
-webkit-transition: -webkit-transform .4s;
transition: transform .4s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.mui-content.mui-sliding.mui-left
{
z-index: 1;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.mui-content.mui-sliding.mui-right
{
z-index: 3;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.mui-navigate-right:after,
.mui-push-left:after,
.mui-push-right:after
{
font-family: Muiicons;
font-size: inherit;
line-height: 1;
position: absolute;
top: 50%;
display: inline-block;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-decoration: none;
color: #bbb;
-webkit-font-smoothing: antialiased;
}
.mui-push-left:after
{
left: 15px;
content: '\e582';
}
.mui-navigate-right:after,
.mui-push-right:after
{
right: 15px;
content: '\e583';
}
.mui-pull-top-pocket, .mui-pull-bottom-pocket
{
position: absolute;
left: 0;
display: block;
visibility: hidden;
overflow: hidden;
width: 100%;
height: 50px;
}
.mui-plus-pullrefresh .mui-pull-top-pocket, .mui-plus-pullrefresh .mui-pull-bottom-pocket
{
display: none;
visibility: visible;
}
.mui-pull-top-pocket
{
top: 0;
}
.mui-bar-nav ~ .mui-content .mui-pull-top-pocket
{
top: 44px;
}
.mui-bar-nav ~ .mui-bar-header-secondary ~ .mui-content .mui-pull-top-pocket
{
top: 88px;
}
.mui-pull-bottom-pocket
{
position: relative;
bottom: 0;
height: 40px;
}
.mui-pull-bottom-pocket .mui-pull-loading
{
visibility: hidden;
}
.mui-pull-bottom-pocket .mui-pull-loading.mui-in
{
display: inline-block;
}
.mui-pull
{
font-weight: bold;
position: absolute;
right: 0;
bottom: 10px;
left: 0;
text-align: center;
color: #777;
}
.mui-pull-loading
{
margin-right: 10px;
-webkit-transition: -webkit-transform .4s;
transition: transform .4s;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
vertical-align: middle;
}
.mui-pull-loading.mui-reverse
{
-webkit-transform: rotate(180deg) translateZ(0);
transform: rotate(180deg) translateZ(0);
}
.mui-pull-caption
{
font-size: 15px;
line-height: 24px;
position: relative;
display: inline-block;
overflow: visible;
margin-top: 0;
vertical-align: middle;
}
.mui-pull-caption span
{
display: none;
}
.mui-pull-caption span.mui-in
{
display: inline;
}
.mui-toast-container
{
line-height: 17px;
position: fixed;
z-index: 9999;
bottom: 50px;
left: 50%;
-webkit-transition: opacity .3s;
transition: opacity .3s;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
opacity: 0;
}
.mui-toast-container.mui-active
{
opacity: .9;
}
.mui-toast-message
{
font-size: 14px;
padding: 10px 25px;
text-align: center;
color: #fff;
border-radius: 6px;
background-color: #323232;
}
.mui-numbox
{
position: relative;
display: inline-block;
overflow: hidden;
width: 120px;
height: 35px;
padding: 0 40px 0 40px;
vertical-align: top;
vertical-align: middle;
border: solid 1px #bbb;
border-radius: 3px;
background-color: #efeff4;
}
.mui-numbox [class*=numbox-btn], .mui-numbox [class*=btn-numbox]
{
font-size: 18px;
font-weight: normal;
line-height: 100%;
position: absolute;
top: 0;
overflow: hidden;
width: 40px;
height: 100%;
padding: 0;
color: #555;
border: none;
border-radius: 0;
background-color: #f9f9f9;
}
.mui-numbox [class*=numbox-btn]:active, .mui-numbox [class*=btn-numbox]:active
{
background-color: #ccc;
}
.mui-numbox [class*=numbox-btn][disabled], .mui-numbox [class*=btn-numbox][disabled]
{
color: #c0c0c0;
}
.mui-numbox .mui-numbox-btn-plus, .mui-numbox .mui-btn-numbox-plus
{
right: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.mui-numbox .mui-numbox-btn-minus, .mui-numbox .mui-btn-numbox-minus
{
left: 0;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.mui-numbox .mui-numbox-input, .mui-numbox .mui-input-numbox
{
display: inline-block;
overflow: hidden;
width: 100% !important;
height: 100%;
margin: 0;
padding: 0 3px !important;
text-align: center;
text-overflow: ellipsis;
word-break: normal;
border: none !important;
border-right: solid 1px #ccc !important;
border-left: solid 1px #ccc !important;
border-radius: 0 !important;
}
.mui-input-row .mui-numbox
{
float: right;
margin: 2px 8px;
}
@font-face {
font-family: Muiicons;
font-weight: normal;
font-style: normal;
src: url('../fonts/mui.ttf') format('truetype');
}
.mui-icon
{
font-family: Muiicons;
font-size: 24px;
font-weight: normal;
font-style: normal;
line-height: 1;
display: inline-block;
text-decoration: none;
-webkit-font-smoothing: antialiased;
}
.mui-icon.mui-active
{
color: #007aff;
}
.mui-icon.mui-right:before
{
float: right;
padding-left: .2em;
}
.mui-icon-contact:before
{
content: '\e100';
}
.mui-icon-person:before
{
content: '\e101';
}
.mui-icon-personadd:before
{
content: '\e102';
}
.mui-icon-contact-filled:before
{
content: '\e130';
}
.mui-icon-person-filled:before
{
content: '\e131';
}
.mui-icon-personadd-filled:before
{
content: '\e132';
}
.mui-icon-phone:before
{
content: '\e200';
}
.mui-icon-email:before
{
content: '\e201';
}
.mui-icon-chatbubble:before
{
content: '\e202';
}
.mui-icon-chatboxes:before
{
content: '\e203';
}
.mui-icon-phone-filled:before
{
content: '\e230';
}
.mui-icon-email-filled:before
{
content: '\e231';
}
.mui-icon-chatbubble-filled:before
{
content: '\e232';
}
.mui-icon-chatboxes-filled:before
{
content: '\e233';
}
.mui-icon-weibo:before
{
content: '\e260';
}
.mui-icon-weixin:before
{
content: '\e261';
}
.mui-icon-pengyouquan:before
{
content: '\e262';
}
.mui-icon-chat:before
{
content: '\e263';
}
.mui-icon-qq:before
{
content: '\e264';
}
.mui-icon-videocam:before
{
content: '\e300';
}
.mui-icon-camera:before
{
content: '\e301';
}
.mui-icon-mic:before
{
content: '\e302';
}
.mui-icon-location:before
{
content: '\e303';
}
.mui-icon-mic-filled:before, .mui-icon-speech:before
{
content: '\e332';
}
.mui-icon-location-filled:before
{
content: '\e333';
}
.mui-icon-micoff:before
{
content: '\e360';
}
.mui-icon-image:before
{
content: '\e363';
}
.mui-icon-map:before
{
content: '\e364';
}
.mui-icon-compose:before
{
content: '\e400';
}
.mui-icon-trash:before
{
content: '\e401';
}
.mui-icon-upload:before
{
content: '\e402';
}
.mui-icon-download:before
{
content: '\e403';
}
.mui-icon-close:before
{
content: '\e404';
}
.mui-icon-redo:before
{
content: '\e405';
}
.mui-icon-undo:before
{
content: '\e406';
}
.mui-icon-refresh:before
{
content: '\e407';
}
.mui-icon-star:before
{
content: '\e408';
}
.mui-icon-plus:before
{
content: '\e409';
}
.mui-icon-minus:before
{
content: '\e410';
}
.mui-icon-circle:before, .mui-icon-checkbox:before
{
content: '\e411';
}
.mui-icon-close-filled:before, .mui-icon-clear:before
{
content: '\e434';
}
.mui-icon-refresh-filled:before
{
content: '\e437';
}
.mui-icon-star-filled:before
{
content: '\e438';
}
.mui-icon-plus-filled:before
{
content: '\e439';
}
.mui-icon-minus-filled:before
{
content: '\e440';
}
.mui-icon-circle-filled:before
{
content: '\e441';
}
.mui-icon-checkbox-filled:before
{
content: '\e442';
}
.mui-icon-closeempty:before
{
content: '\e460';
}
.mui-icon-refreshempty:before
{
content: '\e461';
}
.mui-icon-reload:before
{
content: '\e462';
}
.mui-icon-starhalf:before
{
content: '\e463';
}
.mui-icon-spinner:before
{
content: '\e464';
}
.mui-icon-spinner-cycle:before
{
content: '\e465';
}
.mui-icon-search:before
{
content: '\e466';
}
.mui-icon-plusempty:before
{
content: '\e468';
}
.mui-icon-forward:before
{
content: '\e470';
}
.mui-icon-back:before, .mui-icon-left-nav:before
{
content: '\e471';
}
.mui-icon-checkmarkempty:before
{
content: '\e472';
}
.mui-icon-home:before
{
content: '\e500';
}
.mui-icon-navigate:before
{
content: '\e501';
}
.mui-icon-gear:before
{
content: '\e502';
}
.mui-icon-paperplane:before
{
content: '\e503';
}
.mui-icon-info:before
{
content: '\e504';
}
.mui-icon-help:before
{
content: '\e505';
}
.mui-icon-locked:before
{
content: '\e506';
}
.mui-icon-more:before
{
content: '\e507';
}
.mui-icon-flag:before
{
content: '\e508';
}
.mui-icon-home-filled:before
{
content: '\e530';
}
.mui-icon-gear-filled:before
{
content: '\e532';
}
.mui-icon-info-filled:before
{
content: '\e534';
}
.mui-icon-help-filled:before
{
content: '\e535';
}
.mui-icon-more-filled:before
{
content: '\e537';
}
.mui-icon-settings:before
{
content: '\e560';
}
.mui-icon-list:before
{
content: '\e562';
}
.mui-icon-bars:before
{
content: '\e563';
}
.mui-icon-loop:before
{
content: '\e565';
}
.mui-icon-paperclip:before
{
content: '\e567';
}
.mui-icon-eye:before
{
content: '\e568';
}
.mui-icon-arrowup:before
{
content: '\e580';
}
.mui-icon-arrowdown:before
{
content: '\e581';
}
.mui-icon-arrowleft:before
{
content: '\e582';
}
.mui-icon-arrowright:before
{
content: '\e583';
}
.mui-icon-arrowthinup:before
{
content: '\e584';
}
.mui-icon-arrowthindown:before
{
content: '\e585';
}
.mui-icon-arrowthinleft:before
{
content: '\e586';
}
.mui-icon-arrowthinright:before
{
content: '\e587';
}
.mui-icon-pulldown:before
{
content: '\e588';
}
.mui-fullscreen
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.mui-fullscreen.mui-slider .mui-slider-group
{
height: 100%;
}
.mui-fullscreen .mui-segmented-control ~ .mui-slider-group
{
position: absolute;
top: 40px;
bottom: 0;
width: 100%;
height: auto;
}
.mui-fullscreen.mui-slider .mui-slider-item > a
{
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.mui-fullscreen .mui-off-canvas-wrap .mui-slider-item > a
{
top: auto;
-webkit-transform: none;
transform: none;
}
.mui-bar-nav ~ .mui-content .mui-slider.mui-fullscreen
{
top: 44px;
}
.mui-bar-tab ~ .mui-content .mui-slider.mui-fullscreen .mui-segmented-control ~ .mui-slider-group
{
bottom: 50px;
}
.mui-android.mui-android-4-0 input:focus,
.mui-android.mui-android-4-0 textarea:focus
{
-webkit-user-modify: inherit;
}
.mui-android.mui-android-4-2 input,
.mui-android.mui-android-4-2 textarea, .mui-android.mui-android-4-3 input,
.mui-android.mui-android-4-3 textarea
{
-webkit-user-select: text;
}
.mui-ios .mui-table-view-cell
{
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.mui-plus-visible, .mui-wechat-visible
{
display: none !important;
}
.mui-plus-hidden, .mui-wechat-hidden
{
display: block !important;
}
.mui-tab-item.mui-plus-hidden, .mui-tab-item.mui-wechat-hidden
{
display: table-cell !important;
}
.mui-plus .mui-plus-visible, .mui-wechat .mui-wechat-visible
{
display: block !important;
}
.mui-plus .mui-tab-item.mui-plus-visible, .mui-wechat .mui-tab-item.mui-wechat-visible
{
display: table-cell !important;
}
.mui-plus .mui-plus-hidden, .mui-wechat .mui-wechat-hidden
{
display: none !important;
}
.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-nav
{
height: 64px;
padding-top: 20px;
}
.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-nav ~ .mui-content
{
padding-top: 64px;
}
.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-nav ~ .mui-content .mui-pull-top-pocket
{
top: 64px;
}
.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-header-secondary
{
top: 64px;
}
.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-header-secondary ~ .mui-content
{
padding-top: 94px;
}
.mui-iframe-wrapper
{
position: absolute;
right: 0;
left: 0;
-webkit-overflow-scrolling: touch;
}
.mui-iframe-wrapper iframe
{
width: 100%;
height: 100%;
border: 0;
}
================================================
FILE: dist/js/mui.js
================================================
/*!
* =====================================================
* Mui v3.7.3 (http://dev.dcloud.net.cn/mui)
* =====================================================
*/
/**
* MUI核心JS
* @type _L4.$|Function
*/
var mui = (function(document, undefined) {
var readyRE = /complete|loaded|interactive/;
var idSelectorRE = /^#([\w-]+)$/;
var classSelectorRE = /^\.([\w-]+)$/;
var tagSelectorRE = /^[\w-]+$/;
var translateRE = /translate(?:3d)?\((.+?)\)/;
var translateMatrixRE = /matrix(3d)?\((.+?)\)/;
var $ = function(selector, context) {
context = context || document;
if (!selector)
return wrap();
if (typeof selector === 'object')
if ($.isArrayLike(selector)) {
return wrap($.slice.call(selector), null);
} else {
return wrap([selector], null);
}
if (typeof selector === 'function')
return $.ready(selector);
if (typeof selector === 'string') {
try {
selector = selector.trim();
if (idSelectorRE.test(selector)) {
var found = document.getElementById(RegExp.$1);
return wrap(found ? [found] : []);
}
return wrap($.qsa(selector, context), selector);
} catch (e) {}
}
return wrap();
};
var wrap = function(dom, selector) {
dom = dom || [];
Object.setPrototypeOf(dom, $.fn);
dom.selector = selector || '';
return dom;
};
$.uuid = 0;
$.data = {};
/**
* extend(simple)
* @param {type} target
* @param {type} source
* @param {type} deep
* @returns {unresolved}
*/
$.extend = function() { //from jquery2
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;
if (typeof target === "boolean") {
deep = target;
target = arguments[i] || {};
i++;
}
if (typeof target !== "object" && !$.isFunction(target)) {
target = {};
}
if (i === length) {
target = this;
i--;
}
for (; i < length; i++) {
if ((options = arguments[i]) != null) {
for (name in options) {
src = target[name];
copy = options[name];
if (target === copy) {
continue;
}
if (deep && copy && ($.isPlainObject(copy) || (copyIsArray = $.isArray(copy)))) {
if (copyIsArray) {
copyIsArray = false;
clone = src && $.isArray(src) ? src : [];
} else {
clone = src && $.isPlainObject(src) ? src : {};
}
target[name] = $.extend(deep, clone, copy);
} else if (copy !== undefined) {
target[name] = copy;
}
}
}
}
return target;
};
/**
* mui noop(function)
*/
$.noop = function() {};
/**
* mui slice(array)
*/
$.slice = [].slice;
/**
* mui filter(array)
*/
$.filter = [].filter;
$.type = function(obj) {
return obj == null ? String(obj) : class2type[{}.toString.call(obj)] || "object";
};
/**
* mui isArray
*/
$.isArray = Array.isArray ||
function(object) {
return object instanceof Array;
};
/**
* mui isArrayLike
* @param {Object} obj
*/
$.isArrayLike = function(obj) {
var length = !!obj && "length" in obj && obj.length;
var type = $.type(obj);
if (type === "function" || $.isWindow(obj)) {
return false;
}
return type === "array" || length === 0 ||
typeof length === "number" && length > 0 && (length - 1) in obj;
};
/**
* mui isWindow(需考虑obj为undefined的情况)
*/
$.isWindow = function(obj) {
return obj != null && obj === obj.window;
};
/**
* mui isObject
*/
$.isObject = function(obj) {
return $.type(obj) === "object";
};
/**
* mui isPlainObject
*/
$.isPlainObject = function(obj) {
return $.isObject(obj) && !$.isWindow(obj) && Object.getPrototypeOf(obj) === Object.prototype;
};
/**
* mui isEmptyObject
* @param {Object} o
*/
$.isEmptyObject = function(o) {
for (var p in o) {
if (p !== undefined) {
return false;
}
}
return true;
};
/**
* mui isFunction
*/
$.isFunction = function(value) {
return $.type(value) === "function";
};
/**
* mui querySelectorAll
* @param {type} selector
* @param {type} context
* @returns {Array}
*/
$.qsa = function(selector, context) {
context = context || document;
return $.slice.call(classSelectorRE.test(selector) ? context.getElementsByClassName(RegExp.$1) : tagSelectorRE.test(selector) ? context.getElementsByTagName(selector) : context.querySelectorAll(selector));
};
/**
* ready(DOMContentLoaded)
* @param {type} callback
* @returns {_L6.$}
*/
$.ready = function(callback) {
if (readyRE.test(document.readyState)) {
callback($);
} else {
document.addEventListener('DOMContentLoaded', function() {
callback($);
}, false);
}
return this;
};
/**
* 将 fn 缓存一段时间后, 再被调用执行
* 此方法为了避免在 ms 段时间内, 执行 fn 多次. 常用于 resize , scroll , mousemove 等连续性事件中;
* 当 ms 设置为 -1, 表示立即执行 fn, 即和直接调用 fn 一样;
* 调用返回函数的 stop 停止最后一次的 buffer 效果
* @param {Object} fn
* @param {Object} ms
* @param {Object} context
*/
$.buffer = function(fn, ms, context) {
var timer;
var lastStart = 0;
var lastEnd = 0;
var ms = ms || 150;
function run() {
if (timer) {
timer.cancel();
timer = 0;
}
lastStart = $.now();
fn.apply(context || this, arguments);
lastEnd = $.now();
}
return $.extend(function() {
if (
(!lastStart) || // 从未运行过
(lastEnd >= lastStart && $.now() - lastEnd > ms) || // 上次运行成功后已经超过ms毫秒
(lastEnd < lastStart && $.now() - lastStart > ms * 8) // 上次运行或未完成，后8*ms毫秒
) {
run.apply(this, arguments);
} else {
if (timer) {
timer.cancel();
}
timer = $.later(run, ms, null, $.slice.call(arguments));
}
}, {
stop: function() {
if (timer) {
timer.cancel();
timer = 0;
}
}
});
};
/**
* each
* @param {type} elements
* @param {type} callback
* @returns {_L8.$}
*/
$.each = function(elements, callback, hasOwnProperty) {
if (!elements) {
return this;
}
if (typeof elements.length === 'number') {
[].every.call(elements, function(el, idx) {
return callback.call(el, idx, el) !== false;
});
} else {
for (var key in elements) {
if (hasOwnProperty) {
if (elements.hasOwnProperty(key)) {
if (callback.call(elements[key], key, elements[key]) === false) return elements;
}
} else {
if (callback.call(elements[key], key, elements[key]) === false) return elements;
}
}
}
return this;
};
$.focus = function(element) {
if ($.os.ios) {
setTimeout(function() {
element.focus();
}, 10);
} else {
element.focus();
}
};
/**
* trigger event
* @param {type} element
* @param {type} eventType
* @param {type} eventData
* @returns {_L8.$}
*/
$.trigger = function(element, eventType, eventData) {
element.dispatchEvent(new CustomEvent(eventType, {
detail: eventData,
bubbles: true,
cancelable: true
}));
return this;
};
/**
* getStyles
* @param {type} element
* @param {type} property
* @returns {styles}
*/
$.getStyles = function(element, property) {
var styles = element.ownerDocument.defaultView.getComputedStyle(element, null);
if (property) {
return styles.getPropertyValue(property) || styles[property];
}
return styles;
};
/**
* parseTranslate
* @param {type} translateString
* @param {type} position
* @returns {Object}
*/
$.parseTranslate = function(translateString, position) {
var result = translateString.match(translateRE || '');
if (!result || !result[1]) {
result = ['', '0,0,0'];
}
result = result[1].split(",");
result = {
x: parseFloat(result[0]),
y: parseFloat(result[1]),
z: parseFloat(result[2])
};
if (position && result.hasOwnProperty(position)) {
return result[position];
}
return result;
};
/**
* parseTranslateMatrix
* @param {type} translateString
* @param {type} position
* @returns {Object}
*/
$.parseTranslateMatrix = function(translateString, position) {
var matrix = translateString.match(translateMatrixRE);
var is3D = matrix && matrix[1];
if (matrix) {
matrix = matrix[2].split(",");
if (is3D === "3d")
matrix = matrix.slice(12, 15);
else {
matrix.push(0);
matrix = matrix.slice(4, 7);
}
} else {
matrix = [0, 0, 0];
}
var result = {
x: parseFloat(matrix[0]),
y: parseFloat(matrix[1]),
z: parseFloat(matrix[2])
};
if (position && result.hasOwnProperty(position)) {
return result[position];
}
return result;
};
$.hooks = {};
$.addAction = function(type, hook) {
var hooks = $.hooks[type];
if (!hooks) {
hooks = [];
}
hook.index = hook.index || 1000;
hooks.push(hook);
hooks.sort(function(a, b) {
return a.index - b.index;
});
$.hooks[type] = hooks;
return $.hooks[type];
};
$.doAction = function(type, callback) {
if ($.isFunction(callback)) { //指定了callback
$.each($.hooks[type], callback);
} else { //未指定callback，直接执行
$.each($.hooks[type], function(index, hook) {
return !hook.handle();
});
}
};
/**
* setTimeout封装
* @param {Object} fn
* @param {Object} when
* @param {Object} context
* @param {Object} data
*/
$.later = function(fn, when, context, data) {
when = when || 0;
var m = fn;
var d = data;
var f;
var r;
if (typeof fn === 'string') {
m = context[fn];
}
f = function() {
m.apply(context, $.isArray(d) ? d : [d]);
};
r = setTimeout(f, when);
return {
id: r,
cancel: function() {
clearTimeout(r);
}
};
};
$.now = Date.now || function() {
return +new Date();
};
var class2type = {};
$.each(['Boolean', 'Number', 'String', 'Function', 'Array', 'Date', 'RegExp', 'Object', 'Error'], function(i, name) {
class2type["[object " + name + "]"] = name.toLowerCase();
});
if (window.JSON) {
$.parseJSON = JSON.parse;
}
/**
* $.fn
*/
$.fn = {
each: function(callback) {
[].every.call(this, function(el, idx) {
return callback.call(el, idx, el) !== false;
});
return this;
}
};
/**
* 兼容 AMD 模块
**/
if (typeof define === 'function' && define.amd) {
define('mui', [], function() {
return $;
});
}
return $;
})(document);
//window.mui = mui;
//'$' in window || (window.$ = mui);
/**
* $.os
* @param {type} $
* @returns {undefined}
*/
(function($, window) {
function detect(ua) {
this.os = {};
var funcs = [
function() { //wechat
var wechat = ua.match(/(MicroMessenger)\/([\d\.]+)/i);
if (wechat) { //wechat
this.os.wechat = {
version: wechat[2].replace(/_/g, '.')
};
}
return false;
},
function() { //android
var android = ua.match(/(Android);?[\s\/]+([\d.]+)?/);
if (android) {
this.os.android = true;
this.os.version = android[2];
this.os.isBadAndroid = !(/Chrome\/\d/.test(window.navigator.appVersion));
}
return this.os.android === true;
},
function() { //ios
var iphone = ua.match(/(iPhone\sOS)\s([\d_]+)/);
if (iphone) { //iphone
this.os.ios = this.os.iphone = true;
this.os.version = iphone[2].replace(/_/g, '.');
} else {
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
if (ipad) { //ipad
this.os.ios = this.os.ipad = true;
this.os.version = ipad[2].replace(/_/g, '.');
}
}
return this.os.ios === true;
}
];
[].every.call(funcs, function(func) {
return !func.call($);
});
}
detect.call($, navigator.userAgent);
})(mui, window);
/**
* $.os.plus
* @param {type} $
* @returns {undefined}
*/
(function($, document) {
function detect(ua) {
this.os = this.os || {};
var plus = ua.match(/Html5Plus/i); //TODO 5\+Browser?
if (plus) {
this.os.plus = true;
$(function() {
document.body.classList.add('mui-plus');
});
if (ua.match(/StreamApp/i)) { //TODO 最好有流应用自己的标识
this.os.stream = true;
$(function() {
document.body.classList.add('mui-plus-stream');
});
}
}
}
detect.call($, navigator.userAgent);
})(mui, document);
/**
* 仅提供简单的on，off(仅支持事件委托，不支持当前元素绑定，当前元素绑定请直接使用addEventListener,removeEventListener)
* @param {Object} $
*/
(function($) {
if ('ontouchstart' in window) {
$.isTouchable = true;
$.EVENT_START = 'touchstart';
$.EVENT_MOVE = 'touchmove';
$.EVENT_END = 'touchend';
} else {
$.isTouchable = false;
$.EVENT_START = 'mousedown';
$.EVENT_MOVE = 'mousemove';
$.EVENT_END = 'mouseup';
}
$.EVENT_CANCEL = 'touchcancel';
$.EVENT_CLICK = 'click';
var _mid = 1;
var delegates = {};
//需要wrap的函数
var eventMethods = {
preventDefault: 'isDefaultPrevented',
stopImmediatePropagation: 'isImmediatePropagationStopped',
stopPropagation: 'isPropagationStopped'
};
//默认true返回函数
var returnTrue = function() {
return true
};
//默认false返回函数
var returnFalse = function() {
return false
};
//wrap浏览器事件
var compatible = function(event, target) {
if (!event.detail) {
event.detail = {
currentTarget: target
};
} else {
event.detail.currentTarget = target;
}
$.each(eventMethods, function(name, predicate) {
var sourceMethod = event[name];
event[name] = function() {
this[predicate] = returnTrue;
return sourceMethod && sourceMethod.apply(event, arguments)
}
event[predicate] = returnFalse;
}, true);
return event;
};
//简单的wrap对象_mid
var mid = function(obj) {
return obj && (obj._mid || (obj._mid = _mid++));
};
//事件委托对象绑定的事件回调列表
var delegateFns = {};
//返回事件委托的wrap事件回调
var delegateFn = function(element, event, selector, callback) {
return function(e) {
//same event
var callbackObjs = delegates[element._mid][event];
var handlerQueue = [];
var target = e.target;
var selectorAlls = {};
for (; target && target !== document; target = target.parentNode) {
if (target === element) {
break;
}
if (~['click', 'tap', 'doubletap', 'longtap', 'hold'].indexOf(event) && (target.disabled || target.classList.contains('mui-disabled'))) {
break;
}
var matches = {};
$.each(callbackObjs, function(selector, callbacks) { //same selector
selectorAlls[selector] || (selectorAlls[selector] = $.qsa(selector, element));
if (selectorAlls[selector] && ~(selectorAlls[selector]).indexOf(target)) {
if (!matches[selector]) {
matches[selector] = callbacks;
}
}
}, true);
if (!$.isEmptyObject(matches)) {
handlerQueue.push({
element: target,
handlers: matches
});
}
}
selectorAlls = null;
e = compatible(e); //compatible event
$.each(handlerQueue, function(index, handler) {
target = handler.element;
var tagName = target.tagName;
if (event === 'tap' && (tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'SELECT')) {
e.preventDefault();
e.detail && e.detail.gesture && e.detail.gesture.preventDefault();
}
$.each(handler.handlers, function(index, handler) {
$.each(handler, function(index, callback) {
if (callback.call(target, e) === false) {
e.preventDefault();
e.stopPropagation();
}
}, true);
}, true)
if (e.isPropagationStopped()) {
return false;
}
}, true);
};
};
var findDelegateFn = function(element, event) {
var delegateCallbacks = delegateFns[mid(element)];
var result = [];
if (delegateCallbacks) {
result = [];
if (event) {
var filterFn = function(fn) {
return fn.type === event;
}
return delegateCallbacks.filter(filterFn);
} else {
result = delegateCallbacks;
}
}
return result;
};
var preventDefaultException = /^(INPUT|TEXTAREA|BUTTON|SELECT)$/;
/**
* mui delegate events
* @param {type} event
* @param {type} selector
* @param {type} callback
* @returns {undefined}
*/
$.fn.on = function(event, selector, callback) { //仅支持简单的事件委托,主要是tap事件使用，类似mouse,focus之类暂不封装支持
return this.each(function() {
var element = this;
mid(element);
mid(callback);
var isAddEventListener = false;
var delegateEvents = delegates[element._mid] || (delegates[element._mid] = {});
var delegateCallbackObjs = delegateEvents[event] || ((delegateEvents[event] = {}));
if ($.isEmptyObject(delegateCallbackObjs)) {
isAddEventListener = true;
}
var delegateCallbacks = delegateCallbackObjs[selector] || (delegateCallbackObjs[selector] = []);
delegateCallbacks.push(callback);
if (isAddEventListener) {
var delegateFnArray = delegateFns[mid(element)];
if (!delegateFnArray) {
delegateFnArray = [];
}
var delegateCallback = delegateFn(element, event, selector, callback);
delegateFnArray.push(delegateCallback);
delegateCallback.i = delegateFnArray.length - 1;
delegateCallback.type = event;
delegateFns[mid(element)] = delegateFnArray;
element.addEventListener(event, delegateCallback);
if (event === 'tap') { //TODO 需要找个更好的解决方案
element.addEventListener('click', function(e) {
if (e.target) {
var tagName = e.target.tagName;
if (!preventDefaultException.test(tagName)) {
if (tagName === 'A') {
var href = e.target.href;
if (!(href && ~href.indexOf('tel:'))) {
e.preventDefault();
}
} else {
e.preventDefault();
}
}
}
});
}
}
});
};
$.fn.off = function(event, selector, callback) {
return this.each(function() {
var _mid = mid(this);
if (!event) { //mui(selector).off();
delegates[_mid] && delete delegates[_mid];
} else if (!selector) { //mui(selector).off(event);
delegates[_mid] && delete delegates[_mid][event];
} else if (!callback) { //mui(selector).off(event,selector);
delegates[_mid] && delegates[_mid][event] && delete delegates[_mid][event][selector];
} else { //mui(selector).off(event,selector,callback);
var delegateCallbacks = delegates[_mid] && delegates[_mid][event] && delegates[_mid][event][selector];
$.each(delegateCallbacks, function(index, delegateCallback) {
if (mid(delegateCallback) === mid(callback)) {
delegateCallbacks.splice(index, 1);
return false;
}
}, true);
}
if (delegates[_mid]) {
//如果off掉了所有当前element的指定的event事件，则remove掉当前element的delegate回调
if ((!delegates[_mid][event] || $.isEmptyObject(delegates[_mid][event]))) {
findDelegateFn(this, event).forEach(function(fn) {
this.removeEventListener(fn.type, fn);
delete delegateFns[_mid][fn.i];
}.bind(this));
}
} else {
//如果delegates[_mid]已不存在，删除所有
findDelegateFn(this).forEach(function(fn) {
this.removeEventListener(fn.type, fn);
delete delegateFns[_mid][fn.i];
}.bind(this));
}
});
};
})(mui);
/**
* mui target(action>popover>modal>tab>toggle)
*/
(function($, window, document) {
/**
* targets
*/
$.targets = {};
/**
* target handles
*/
$.targetHandles = [];
/**
* register target
* @param {type} target
* @returns {$.targets}
*/
$.registerTarget = function(target) {
target.index = target.index || 1000;
$.targetHandles.push(target);
$.targetHandles.sort(function(a, b) {
return a.index - b.index;
});
return $.targetHandles;
};
window.addEventListener($.EVENT_START, function(event) {
var target = event.target;
var founds = {};
for (; target && target !== document; target = target.parentNode) {
var isFound = false;
$.each($.targetHandles, function(index, targetHandle) {
var name = targetHandle.name;
if (!isFound && !founds[name] && targetHandle.hasOwnProperty('handle')) {
$.targets[name] = targetHandle.handle(event, target);
if ($.targets[name]) {
founds[name] = true;
if (targetHandle.isContinue !== true) {
isFound = true;
}
}
} else {
if (!founds[name]) {
if (targetHandle.isReset !== false)
$.targets[name] = false;
}
}
});
if (isFound) {
break;
}
}
});
window.addEventListener('click', function(event) { //解决touch与click的target不一致的问题(比如链接边缘点击时，touch的target为html，而click的target为A)
var target = event.target;
var isFound = false;
for (; target && target !== document; target = target.parentNode) {
if (target.tagName === 'A') {
$.each($.targetHandles, function(index, targetHandle) {
var name = targetHandle.name;
if (targetHandle.hasOwnProperty('handle')) {
if (targetHandle.handle(event, target)) {
isFound = true;
event.preventDefault();
return false;
}
}
});
if (isFound) {
break;
}
}
}
});
})(mui, window, document);
/**
* fixed trim
* @param {type} undefined
* @returns {undefined}
*/
(function(undefined) {
if (String.prototype.trim === undefined) { // fix for iOS 3.2
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
};
}
Object.setPrototypeOf = Object.setPrototypeOf || function(obj, proto) {
obj['__proto__'] = proto;
return obj;
};
})();
/**
* fixed CustomEvent
*/
(function() {
if (typeof window.CustomEvent === 'undefined') {
function CustomEvent(event, params) {
params = params || {
bubbles: false,
cancelable: false,
detail: undefined
};
var evt = document.createEvent('Events');
var bubbles = true;
for (var name in params) {
(name === 'bubbles') ? (bubbles = !!params[name]) : (evt[name] = params[name]);
}
evt.initEvent(event, bubbles, true);
return evt;
};
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
}
})();
/*
A shim for non ES5 supporting browsers.
Adds function bind to Function prototype, so that you can do partial application.
Works even with the nasty thing, where the first word is the opposite of extranet, the second one is the profession of Columbus, and the version number is 9, flipped 180 degrees.
*/
Function.prototype.bind = Function.prototype.bind || function(to) {
// Make an array of our arguments, starting from second argument
var partial = Array.prototype.splice.call(arguments, 1),
// We'll need the original function.
fn = this;
var bound = function() {
// Join the already applied arguments to the now called ones (after converting to an array again).
var args = partial.concat(Array.prototype.splice.call(arguments, 0));
// If not being called as a constructor
if (!(this instanceof bound)) {
// return the result of the function called bound to target and partially applied.
return fn.apply(to, args);
}
// If being called as a constructor, apply the function bound to self.
fn.apply(this, args);
}
// Attach the prototype of the function to our newly created function.
bound.prototype = fn.prototype;
return bound;
};
/**
* mui fixed classList
* @param {type} document
* @returns {undefined}
*/
(function(document) {
if (!("classList" in document.documentElement) && Object.defineProperty && typeof HTMLElement !== 'undefined') {
Object.defineProperty(HTMLElement.prototype, 'classList', {
get: function() {
var self = this;
function update(fn) {
return function(value) {
var classes = self.className.split(/\s+/),
index = classes.indexOf(value);
fn(classes, index, value);
self.className = classes.join(" ");
};
}
var ret = {
add: update(function(classes, index, value) {
~index || classes.push(value);
}),
remove: update(function(classes, index) {
~index && classes.splice(index, 1);
}),
toggle: update(function(classes, index, value) {
~index ? classes.splice(index, 1) : classes.push(value);
}),
contains: function(value) {
return !!~self.className.split(/\s+/).indexOf(value);
},
item: function(i) {
return self.className.split(/\s+/)[i] || null;
}
};
Object.defineProperty(ret, 'length', {
get: function() {
return self.className.split(/\s+/).length;
}
});
return ret;
}
});
}
})(document);
/**
* mui fixed requestAnimationFrame
* @param {type} window
* @returns {undefined}
*/
(function(window) {
if (!window.requestAnimationFrame) {
var lastTime = 0;
window.requestAnimationFrame = window.webkitRequestAnimationFrame || function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
window.cancelAnimationFrame = window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame || function(id) {
clearTimeout(id);
};
};
}(window));
/**
* fastclick(only for radio,checkbox)
*/
(function($, window, name) {
if (!$.os.android && !$.os.ios) { //目前仅识别android和ios
return;
}
if (window.FastClick) {
return;
}
var handle = function(event, target) {
if (target.tagName === 'LABEL') {
if (target.parentNode) {
target = target.parentNode.querySelector('input');
}
}
if (target && (target.type === 'radio' || target.type === 'checkbox')) {
if (!target.disabled) { //disabled
return target;
}
}
return false;
};
$.registerTarget({
name: name,
index: 40,
handle: handle,
target: false
});
var dispatchEvent = function(event) {
var targetElement = $.targets.click;
if (targetElement) {
var clickEvent, touch;
// On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect
if (document.activeElement && document.activeElement !== targetElement) {
document.activeElement.blur();
}
touch = event.detail.gesture.changedTouches[0];
// Synthesise a click event, with an extra attribute so it can be tracked
clickEvent = document.createEvent('MouseEvents');
clickEvent.initMouseEvent('click', true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
clickEvent.forwardedTouchEvent = true;
targetElement.dispatchEvent(clickEvent);
event.detail && event.detail.gesture.preventDefault();
}
};
window.addEventListener('tap', dispatchEvent);
window.addEventListener('doubletap', dispatchEvent);
//捕获
window.addEventListener('click', function(event) {
if ($.targets.click) {
if (!event.forwardedTouchEvent) { //stop click
if (event.stopImmediatePropagation) {
event.stopImmediatePropagation();
} else {
// Part of the hack for browsers that don't support Event#stopImmediatePropagation
event.propagationStopped = true;
}
event.stopPropagation();
event.preventDefault();
return false;
}
}
}, true);
})(mui, window, 'click');
(function($, document) {
$(function() {
if (!$.os.ios) {
return;
}
var CLASS_FOCUSIN = 'mui-focusin';
var CLASS_BAR_TAB = 'mui-bar-tab';
var CLASS_BAR_FOOTER = 'mui-bar-footer';
var CLASS_BAR_FOOTER_SECONDARY = 'mui-bar-footer-secondary';
var CLASS_BAR_FOOTER_SECONDARY_TAB = 'mui-bar-footer-secondary-tab';
// var content = document.querySelector('.' + CLASS_CONTENT);
// if (content) {
// document.body.insertBefore(content, document.body.firstElementChild);
// }
document.addEventListener('focusin', function(e) {
if ($.os.plus) { //在父webview里边不fix
if (window.plus) {
if (plus.webview.currentWebview().children().length > 0) {
return;
}
}
}
var target = e.target;
//TODO 需考虑所有键盘弹起的情况
if (target.tagName && (target.tagName === 'TEXTAREA' || (target.tagName === 'INPUT' && (target.type === 'text' || target.type === 'search' || target.type === 'number')))) {
if (target.disabled || target.readOnly) {
return;
}
document.body.classList.add(CLASS_FOCUSIN);
var isFooter = false;
for (; target && target !== document; target = target.parentNode) {
var classList = target.classList;
if (classList && classList.contains(CLASS_BAR_TAB) || classList.contains(CLASS_BAR_FOOTER) || classList.contains(CLASS_BAR_FOOTER_SECONDARY) || classList.contains(CLASS_BAR_FOOTER_SECONDARY_TAB)) {
isFooter = true;
break;
}
}
if (isFooter) {
var scrollTop = document.body.scrollHeight;
var scrollLeft = document.body.scrollLeft;
setTimeout(function() {
window.scrollTo(scrollLeft, scrollTop);
}, 20);
}
}
});
document.addEventListener('focusout', function(e) {
var classList = document.body.classList;
if (classList.contains(CLASS_FOCUSIN)) {
classList.remove(CLASS_FOCUSIN);
setTimeout(function() {
window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
}, 20);
}
});
});
})(mui, document);
/**
* mui namespace(optimization)
* @param {type} $
* @returns {undefined}
*/
(function($) {
$.namespace = 'mui';
$.classNamePrefix = $.namespace + '-';
$.classSelectorPrefix = '.' + $.classNamePrefix;
/**
* 返回正确的className
* @param {type} className
* @returns {String}
*/
$.className = function(className) {
return $.classNamePrefix + className;
};
/**
* 返回正确的classSelector
* @param {type} classSelector
* @returns {String}
*/
$.classSelector = function(classSelector) {
return classSelector.replace(/\./g, $.classSelectorPrefix);
};
/**
* 返回正确的eventName
* @param {type} event
* @param {type} module
* @returns {String}
*/
$.eventName = function(event, module) {
return event + ($.namespace ? ('.' + $.namespace) : '') + ( module ? ('.' + module) : '');
};
})(mui);
/**
* mui gestures
* @param {type} $
* @param {type} window
* @returns {undefined}
*/
(function($, window) {
$.gestures = {
session: {}
};
/**
* Gesture preventDefault
* @param {type} e
* @returns {undefined}
*/
$.preventDefault = function(e) {
e.preventDefault();
};
/**
* Gesture stopPropagation
* @param {type} e
* @returns {undefined}
*/
$.stopPropagation = function(e) {
e.stopPropagation();
};
/**
* register gesture
* @param {type} gesture
* @returns {$.gestures}
*/
$.addGesture = function(gesture) {
return $.addAction('gestures', gesture);
};
var round = Math.round;
var abs = Math.abs;
var sqrt = Math.sqrt;
var atan = Math.atan;
var atan2 = Math.atan2;
/**
* distance
* @param {type} p1
* @param {type} p2
* @returns {Number}
*/
var getDistance = function(p1, p2, props) {
if(!props) {
props = ['x', 'y'];
}
var x = p2[props[0]] - p1[props[0]];
var y = p2[props[1]] - p1[props[1]];
return sqrt((x * x) + (y * y));
};
/**
* scale
* @param {Object} starts
* @param {Object} moves
*/
var getScale = function(starts, moves) {
if(starts.length >= 2 && moves.length >= 2) {
var props = ['pageX', 'pageY'];
return getDistance(moves[1], moves[0], props) / getDistance(starts[1], starts[0], props);
}
return 1;
};
/**
* angle
* @param {type} p1
* @param {type} p2
* @returns {Number}
*/
var getAngle = function(p1, p2, props) {
if(!props) {
props = ['x', 'y'];
}
var x = p2[props[0]] - p1[props[0]];
var y = p2[props[1]] - p1[props[1]];
return atan2(y, x) * 180 / Math.PI;
};
/**
* direction
* @param {Object} x
* @param {Object} y
*/
var getDirection = function(x, y) {
if(x === y) {
return '';
}
if(abs(x) >= abs(y)) {
return x > 0 ? 'left' : 'right';
}
return y > 0 ? 'up' : 'down';
};
/**
* rotation
* @param {Object} start
* @param {Object} end
*/
var getRotation = function(start, end) {
var props = ['pageX', 'pageY'];
return getAngle(end[1], end[0], props) - getAngle(start[1], start[0], props);
};
/**
* px per ms
* @param {Object} deltaTime
* @param {Object} x
* @param {Object} y
*/
var getVelocity = function(deltaTime, x, y) {
return {
x: x / deltaTime || 0,
y: y / deltaTime || 0
};
};
/**
* detect gestures
* @param {type} event
* @param {type} touch
* @returns {undefined}
*/
var detect = function(event, touch) {
if($.gestures.stoped) {
return;
}
$.doAction('gestures', function(index, gesture) {
if(!$.gestures.stoped) {
if($.options.gestureConfig[gesture.name] !== false) {
gesture.handle(event, touch);
}
}
});
};
/**
* 暂时无用
* @param {Object} node
* @param {Object} parent
*/
var hasParent = function(node, parent) {
while(node) {
if(node == parent) {
return true;
}
node = node.parentNode;
}
return false;
};
var uniqueArray = function(src, key, sort) {
var results = [];
var values = [];
var i = 0;
while(i < src.length) {
var val = key ? src[i][key] : src[i];
if(values.indexOf(val) < 0) {
results.push(src[i]);
}
values[i] = val;
i++;
}
if(sort) {
if(!key) {
results = results.sort();
} else {
results = results.sort(function sortUniqueArray(a, b) {
return a[key] > b[key];
});
}
}
return results;
};
var getMultiCenter = function(touches) {
var touchesLength = touches.length;
if(touchesLength === 1) {
return {
x: round(touches[0].pageX),
y: round(touches[0].pageY)
};
}
var x = 0;
var y = 0;
var i = 0;
while(i < touchesLength) {
x += touches[i].pageX;
y += touches[i].pageY;
i++;
}
return {
x: round(x / touchesLength),
y: round(y / touchesLength)
};
};
var multiTouch = function() {
return $.options.gestureConfig.pinch;
};
var copySimpleTouchData = function(touch) {
var touches = [];
var i = 0;
while(i < touch.touches.length) {
touches[i] = {
pageX: round(touch.touches[i].pageX),
pageY: round(touch.touches[i].pageY)
};
i++;
}
return {
timestamp: $.now(),
gesture: touch.gesture,
touches: touches,
center: getMultiCenter(touch.touches),
deltaX: touch.deltaX,
deltaY: touch.deltaY
};
};
var calDelta = function(touch) {
var session = $.gestures.session;
var center = touch.center;
var offset = session.offsetDelta || {};
var prevDelta = session.prevDelta || {};
var prevTouch = session.prevTouch || {};
if(touch.gesture.type === $.EVENT_START || touch.gesture.type === $.EVENT_END) {
prevDelta = session.prevDelta = {
x: prevTouch.deltaX || 0,
y: prevTouch.deltaY || 0
};
offset = session.offsetDelta = {
x: center.x,
y: center.y
};
}
touch.deltaX = prevDelta.x + (center.x - offset.x);
touch.deltaY = prevDelta.y + (center.y - offset.y);
};
var calTouchData = function(touch) {
var session = $.gestures.session;
var touches = touch.touches;
var touchesLength = touches.length;
if(!session.firstTouch) {
session.firstTouch = copySimpleTouchData(touch);
}
if(multiTouch() && touchesLength > 1 && !session.firstMultiTouch) {
session.firstMultiTouch = copySimpleTouchData(touch);
} else if(touchesLength === 1) {
session.firstMultiTouch = false;
}
var firstTouch = session.firstTouch;
var firstMultiTouch = session.firstMultiTouch;
var offsetCenter = firstMultiTouch ? firstMultiTouch.center : firstTouch.center;
var center = touch.center = getMultiCenter(touches);
touch.timestamp = $.now();
touch.deltaTime = touch.timestamp - firstTouch.timestamp;
touch.angle = getAngle(offsetCenter, center);
touch.distance = getDistance(offsetCenter, center);
calDelta(touch);
touch.offsetDirection = getDirection(touch.deltaX, touch.deltaY);
touch.scale = firstMultiTouch ? getScale(firstMultiTouch.touches, touches) : 1;
touch.rotation = firstMultiTouch ? getRotation(firstMultiTouch.touches, touches) : 0;
calIntervalTouchData(touch);
};
var CAL_INTERVAL = 25;
var calIntervalTouchData = function(touch) {
var session = $.gestures.session;
var last = session.lastInterval || touch;
var deltaTime = touch.timestamp - last.timestamp;
var velocity;
var velocityX;
var velocityY;
var direction;
if(touch.gesture.type != $.EVENT_CANCEL && (deltaTime > CAL_INTERVAL || last.velocity === undefined)) {
var deltaX = last.deltaX - touch.deltaX;
var deltaY = last.deltaY - touch.deltaY;
var v = getVelocity(deltaTime, deltaX, deltaY);
velocityX = v.x;
velocityY = v.y;
velocity = (abs(v.x) > abs(v.y)) ? v.x : v.y;
direction = getDirection(deltaX, deltaY) || last.direction;
session.lastInterval = touch;
} else {
velocity = last.velocity;
velocityX = last.velocityX;
velocityY = last.velocityY;
direction = last.direction;
}
touch.velocity = velocity;
touch.velocityX = velocityX;
touch.velocityY = velocityY;
touch.direction = direction;
};
var targetIds = {};
var convertTouches = function(touches) {
for(var i = 0; i < touches.length; i++) {
!touches['identifier'] && (touches['identifier'] = 0);
}
return touches;
};
var getTouches = function(event, touch) {
var allTouches = convertTouches($.slice.call(event.touches || [event]));
var type = event.type;
var targetTouches = [];
var changedTargetTouches = [];
//当touchstart或touchmove且touches长度为1，直接获得all和changed
if((type === $.EVENT_START || type === $.EVENT_MOVE) && allTouches.length === 1) {
targetIds[allTouches[0].identifier] = true;
targetTouches = allTouches;
changedTargetTouches = allTouches;
touch.target = event.target;
} else {
var i = 0;
var targetTouches = [];
var changedTargetTouches = [];
var changedTouches = convertTouches($.slice.call(event.changedTouches || [event]));
touch.target = event.target;
var sessionTarget = $.gestures.session.target || event.target;
targetTouches = allTouches.filter(function(touch) {
return hasParent(touch.target, sessionTarget);
});
if(type === $.EVENT_START) {
i = 0;
while(i < targetTouches.length) {
targetIds[targetTouches[i].identifier] = true;
i++;
}
}
i = 0;
while(i < changedTouches.length) {
if(targetIds[changedTouches[i].identifier]) {
changedTargetTouches.push(changedTouches[i]);
}
if(type === $.EVENT_END || type === $.EVENT_CANCEL) {
delete targetIds[changedTouches[i].identifier];
}
i++;
}
if(!changedTargetTouches.length) {
return false;
}
}
targetTouches = uniqueArray(targetTouches.concat(changedTargetTouches), 'identifier', true);
var touchesLength = targetTouches.length;
var changedTouchesLength = changedTargetTouches.length;
if(type === $.EVENT_START && touchesLength - changedTouchesLength === 0) { //first
touch.isFirst = true;
$.gestures.touch = $.gestures.session = {
target: event.target
};
}
touch.isFinal = ((type === $.EVENT_END || type === $.EVENT_CANCEL) && (touchesLength - changedTouchesLength === 0));
touch.touches = targetTouches;
touch.changedTouches = changedTargetTouches;
return true;
};
var handleTouchEvent = function(event) {
var touch = {
gesture: event
};
var touches = getTouches(event, touch);
if(!touches) {
return;
}
calTouchData(touch);
detect(event, touch);
$.gestures.session.prevTouch = touch;
if(event.type === $.EVENT_END && !$.isTouchable) {
$.gestures.touch = $.gestures.session = {};
}
};
var supportsPassive = (function checkPassiveListener() {
var supportsPassive = false;
try {
var opts = Object.defineProperty({}, 'passive', {
get: function get() {
supportsPassive = true;
},
});
window.addEventListener('testPassiveListener', null, opts);
} catch(e) {
// No support
}
return supportsPassive;
}())
window.addEventListener($.EVENT_START, handleTouchEvent);
window.addEventListener($.EVENT_MOVE, handleTouchEvent, supportsPassive ? {
passive: false,
capture: false
} : false);
window.addEventListener($.EVENT_END, handleTouchEvent);
window.addEventListener($.EVENT_CANCEL, handleTouchEvent);
//fixed hashchange(android)
window.addEventListener($.EVENT_CLICK, function(e) {
//TODO 应该判断当前target是不是在targets.popover内部，而不是非要相等
if(($.os.android || $.os.ios) && (($.targets.popover && e.target === $.targets.popover) || ($.targets.tab) || $.targets.offcanvas || $.targets.modal)) {
e.preventDefault();
}
}, true);
//增加原生滚动识别
$.isScrolling = false;
var scrollingTimeout = null;
window.addEventListener('scroll', function() {
$.isScrolling = true;
scrollingTimeout && clearTimeout(scrollingTimeout);
scrollingTimeout = setTimeout(function() {
$.isScrolling = false;
}, 250);
});
})(mui, window);
/**
* mui gesture flick[left|right|up|down]
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var flickStartTime = 0;
var handle = function(event, touch) {
var session = $.gestures.session;
var options = this.options;
var now = $.now();
switch (event.type) {
case $.EVENT_MOVE:
if (now - flickStartTime > 300) {
flickStartTime = now;
session.flickStart = touch.center;
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
touch.flick = false;
if (session.flickStart && options.flickMaxTime > (now - flickStartTime) && touch.distance > options.flickMinDistince) {
touch.flick = true;
touch.flickTime = now - flickStartTime;
touch.flickDistanceX = touch.center.x - session.flickStart.x;
touch.flickDistanceY = touch.center.y - session.flickStart.y;
$.trigger(session.target, name, touch);
$.trigger(session.target, name + touch.direction, touch);
}
break;
}
};
/**
* mui gesture flick
*/
$.addGesture({
name: name,
index: 5,
handle: handle,
options: {
flickMaxTime: 200,
flickMinDistince: 10
}
});
})(mui, 'flick');
/**
* mui gesture swipe[left|right|up|down]
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var handle = function(event, touch) {
var session = $.gestures.session;
if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
var options = this.options;
touch.swipe = false;
//TODO 后续根据velocity计算
if (touch.direction && options.swipeMaxTime > touch.deltaTime && touch.distance > options.swipeMinDistince) {
touch.swipe = true;
$.trigger(session.target, name, touch);
$.trigger(session.target, name + touch.direction, touch);
}
}
};
/**
* mui gesture swipe
*/
$.addGesture({
name: name,
index: 10,
handle: handle,
options: {
swipeMaxTime: 300,
swipeMinDistince: 18
}
});
})(mui, 'swipe');
/**
* mui gesture drag[start|left|right|up|down|end]
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var handle = function(event, touch) {
var session = $.gestures.session;
switch (event.type) {
case $.EVENT_START:
break;
case $.EVENT_MOVE:
if (!touch.direction || !session.target) {
return;
}
//修正direction,可在session期间自行锁定拖拽方向，方便开发scroll类不同方向拖拽插件嵌套
if (session.lockDirection && session.startDirection) {
if (session.startDirection && session.startDirection !== touch.direction) {
if (session.startDirection === 'up' || session.startDirection === 'down') {
touch.direction = touch.deltaY < 0 ? 'up' : 'down';
} else {
touch.direction = touch.deltaX < 0 ? 'left' : 'right';
}
}
}
if (!session.drag) {
session.drag = true;
$.trigger(session.target, name + 'start', touch);
}
$.trigger(session.target, name, touch);
$.trigger(session.target, name + touch.direction, touch);
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if (session.drag && touch.isFinal) {
$.trigger(session.target, name + 'end', touch);
}
break;
}
};
/**
* mui gesture drag
*/
$.addGesture({
name: name,
index: 20,
handle: handle,
options: {
fingers: 1
}
});
})(mui, 'drag');
/**
* mui gesture tap and doubleTap
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var lastTarget;
var lastTapTime;
var handle = function(event, touch) {
var session = $.gestures.session;
var options = this.options;
switch (event.type) {
case $.EVENT_END:
if (!touch.isFinal) {
return;
}
var target = session.target;
if (!target || (target.disabled || (target.classList && target.classList.contains('mui-disabled')))) {
return;
}
if (touch.distance < options.tapMaxDistance && touch.deltaTime < options.tapMaxTime) {
if ($.options.gestureConfig.doubletap && lastTarget && (lastTarget === target)) { //same target
if (lastTapTime && (touch.timestamp - lastTapTime) < options.tapMaxInterval) {
$.trigger(target, 'doubletap', touch);
lastTapTime = $.now();
lastTarget = target;
return;
}
}
$.trigger(target, name, touch);
lastTapTime = $.now();
lastTarget = target;
}
break;
}
};
/**
* mui gesture tap
*/
$.addGesture({
name: name,
index: 30,
handle: handle,
options: {
fingers: 1,
tapMaxInterval: 300,
tapMaxDistance: 5,
tapMaxTime: 250
}
});
})(mui, 'tap');
/**
* mui gesture longtap
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var timer;
var handle = function(event, touch) {
var session = $.gestures.session;
var options = this.options;
switch (event.type) {
case $.EVENT_START:
clearTimeout(timer);
timer = setTimeout(function() {
$.trigger(session.target, name, touch);
}, options.holdTimeout);
break;
case $.EVENT_MOVE:
if (touch.distance > options.holdThreshold) {
clearTimeout(timer);
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
clearTimeout(timer);
break;
}
};
/**
* mui gesture longtap
*/
$.addGesture({
name: name,
index: 10,
handle: handle,
options: {
fingers: 1,
holdTimeout: 500,
holdThreshold: 2
}
});
})(mui, 'longtap');
/**
* mui gesture hold
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var timer;
var handle = function(event, touch) {
var session = $.gestures.session;
var options = this.options;
switch (event.type) {
case $.EVENT_START:
if ($.options.gestureConfig.hold) {
timer && clearTimeout(timer);
timer = setTimeout(function() {
touch.hold = true;
$.trigger(session.target, name, touch);
}, options.holdTimeout);
}
break;
case $.EVENT_MOVE:
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if (timer) {
clearTimeout(timer) && (timer = null);
$.trigger(session.target, 'release', touch);
}
break;
}
};
/**
* mui gesture hold
*/
$.addGesture({
name: name,
index: 10,
handle: handle,
options: {
fingers: 1,
holdTimeout: 0
}
});
})(mui, 'hold');
/**
* mui gesture pinch
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var handle = function(event, touch) {
var options = this.options;
var session = $.gestures.session;
switch (event.type) {
case $.EVENT_START:
break;
case $.EVENT_MOVE:
if ($.options.gestureConfig.pinch) {
if (touch.touches.length < 2) {
return;
}
if (!session.pinch) { //start
session.pinch = true;
$.trigger(session.target, name + 'start', touch);
}
$.trigger(session.target, name, touch);
var scale = touch.scale;
var rotation = touch.rotation;
var lastScale = typeof touch.lastScale === 'undefined' ? 1 : touch.lastScale;
var scaleDiff = 0.000000000001; //防止scale与lastScale相等，不触发事件的情况。
if (scale > lastScale) { //out
lastScale = scale - scaleDiff;
$.trigger(session.target, name + 'out', touch);
} //in
else if (scale < lastScale) {
lastScale = scale + scaleDiff;
$.trigger(session.target, name + 'in', touch);
}
if (Math.abs(rotation) > options.minRotationAngle) {
$.trigger(session.target, 'rotate', touch);
}
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
session.pinch = false;
$.trigger(session.target, name + 'end', touch);
}
break;
}
};
/**
* mui gesture pinch
*/
$.addGesture({
name: name,
index: 10,
handle: handle,
options: {
minRotationAngle: 0
}
});
})(mui, 'pinch');
/**
* mui.init
* @param {type} $
* @returns {undefined}
*/
(function($) {
$.global = $.options = {
gestureConfig: {
tap: true,
doubletap: false,
longtap: false,
hold: false,
flick: true,
swipe: true,
drag: true,
pinch: false
}
};
/**
*
* @param {type} options
* @returns {undefined}
*/
$.initGlobal = function(options) {
$.options = $.extend(true, $.global, options);
return this;
};
var inits = {};
/**
* 单页配置 初始化
* @param {object} options
*/
$.init = function(options) {
$.options = $.extend(true, $.global, options || {});
$.ready(function() {
$.doAction('inits', function(index, init) {
var isInit = !!(!inits[init.name] || init.repeat);
if (isInit) {
init.handle.call($);
inits[init.name] = true;
}
});
});
return this;
};
/**
* 增加初始化执行流程
* @param {function} init
*/
$.addInit = function(init) {
return $.addAction('inits', init);
};
/**
* 处理html5版本subpages
*/
$.addInit({
name: 'iframe',
index: 100,
handle: function() {
var options = $.options;
var subpages = options.subpages || [];
if (!$.os.plus && subpages.length) {
//暂时只处理单个subpage。后续可以考虑支持多个subpage
createIframe(subpages[0]);
}
}
});
var createIframe = function(options) {
var wrapper = document.createElement('div');
wrapper.className = 'mui-iframe-wrapper';
var styles = options.styles || {};
if (typeof styles.top !== 'string') {
styles.top = '0px';
}
if (typeof styles.bottom !== 'string') {
styles.bottom = '0px';
}
wrapper.style.top = styles.top;
wrapper.style.bottom = styles.bottom;
var iframe = document.createElement('iframe');
iframe.src = options.url;
iframe.id = options.id || options.url;
iframe.name = iframe.id;
wrapper.appendChild(iframe);
document.body.appendChild(wrapper);
//目前仅处理微信
$.os.wechat && handleScroll(wrapper, iframe);
};
function handleScroll(wrapper, iframe) {
var key = 'MUI_SCROLL_POSITION_' + document.location.href + '_' + iframe.src;
var scrollTop = (parseFloat(localStorage.getItem(key)) || 0);
if (scrollTop) {
(function(y) {
iframe.onload = function() {
window.scrollTo(0, y);
};
})(scrollTop);
}
setInterval(function() {
var _scrollTop = window.scrollY;
if (scrollTop !== _scrollTop) {
localStorage.setItem(key, _scrollTop + '');
scrollTop = _scrollTop;
}
}, 100);
};
$(function() {
var classList = document.body.classList;
var os = [];
if ($.os.ios) {
os.push({
os: 'ios',
version: $.os.version
});
classList.add('mui-ios');
} else if ($.os.android) {
os.push({
os: 'android',
version: $.os.version
});
classList.add('mui-android');
}
if ($.os.wechat) {
os.push({
os: 'wechat',
version: $.os.wechat.version
});
classList.add('mui-wechat');
}
if (os.length) {
$.each(os, function(index, osObj) {
var version = '';
var classArray = [];
if (osObj.version) {
$.each(osObj.version.split('.'), function(i, v) {
version = version + (version ? '-' : '') + v;
classList.add($.className(osObj.os + '-' + version));
});
}
});
}
});
})(mui);
/**
* mui.init 5+
* @param {type} $
* @returns {undefined}
*/
(function($) {
var defaultOptions = {
swipeBack: false,
preloadPages: [], //5+ lazyLoad webview
preloadLimit: 10, //预加载窗口的数量限制(一旦超出，先进先出)
keyEventBind: {
backbutton: true,
menubutton: true
},
titleConfig: {
height: "44px",
backgroundColor: "#f7f7f7", //导航栏背景色
bottomBorderColor: "#cccccc", //底部边线颜色
title: { //标题配置
text: "", //标题文字
position: {
top: 0,
left: 0,
width: "100%",
height: "100%"
},
styles: {
color: "#000000",
align: "center",
family: "'Helvetica Neue',Helvetica,sans-serif",
size: "17px",
style: "normal",
weight: "normal",
fontSrc: ""
}
},
back: {
image: {
base64Data: '',
imgSrc: '',
sprite: {
top: '0px',
left: '0px',
width: '100%',
height: '100%'
},
position: {
top: "10px",
left: "10px",
width: "24px",
height: "24px"
}
}
}
}
};
//默认页面动画
var defaultShow = {
event:"titleUpdate",
autoShow: true,
duration: 300,
aniShow: 'slide-in-right',
extras:{}
};
//若执行了显示动画初始化操作，则要覆盖默认配置
if($.options.show) {
defaultShow = $.extend(true, defaultShow, $.options.show);
}
$.currentWebview = null;
$.extend(true, $.global, defaultOptions);
$.extend(true, $.options, defaultOptions);
/**
* 等待动画配置
* @param {type} options
* @returns {Object}
*/
$.waitingOptions = function(options) {
return $.extend(true, {}, {
autoShow: true,
title: '',
modal: false
}, options);
};
/**
* 窗口显示配置
* @param {type} options
* @returns {Object}
*/
$.showOptions = function(options) {
return $.extend(true, {}, defaultShow, options);
};
/**
* 窗口默认配置
* @param {type} options
* @returns {Object}
*/
$.windowOptions = function(options) {
return $.extend({
scalable: false,
bounce: "" //vertical
}, options);
};
/**
* plusReady
* @param {type} callback
* @returns {_L6.$}
*/
$.plusReady = function(callback) {
if(window.plus) {
setTimeout(function() { //解决callback与plusready事件的执行时机问题(典型案例:showWaiting,closeWaiting)
callback();
}, 0);
} else {
document.addEventListener("plusready", function() {
callback();
}, false);
}
return this;
};
/**
* 5+ event(5+没提供之前我自己实现)
* @param {type} webview
* @param {type} eventType
* @param {type} data
* @returns {undefined}
*/
$.fire = function(webview, eventType, data) {
if(webview) {
if(typeof data === 'undefined') {
data = '';
} else if(typeof data === 'boolean' || typeof data === 'number') {
webview.evalJS("typeof mui!=='undefined'&&mui.receive('" + eventType + "'," + data + ")");
return;
} else if($.isPlainObject(data) || $.isArray(data)) {
data = JSON.stringify(data || {}).replace(/\'/g, "\\u0027").replace(/\\/g, "\\u005c");
}
webview.evalJS("typeof mui!=='undefined'&&mui.receive('" + eventType + "','" + data + "')");
}
};
/**
* 5+ event(5+没提供之前我自己实现)
* @param {type} eventType
* @param {type} data
* @returns {undefined}
*/
$.receive = function(eventType, data) {
if(eventType) {
try {
if(data && typeof data === 'string') {
data = JSON.parse(data);
}
} catch(e) {}
$.trigger(document, eventType, data);
}
};
var triggerPreload = function(webview) {
if(!webview.preloaded) { //保证仅触发一次
$.fire(webview, 'preload');
var list = webview.children();
for(var i = 0; i < list.length; i++) {
$.fire(list[i], 'preload');
}
webview.preloaded = true;
}
};
var trigger = function(webview, eventType, timeChecked) {
if(timeChecked) {
if(!webview[eventType + 'ed']) {
$.fire(webview, eventType);
var list = webview.children();
for(var i = 0; i < list.length; i++) {
$.fire(list[i], eventType);
}
webview[eventType + 'ed'] = true;
}
} else {
$.fire(webview, eventType);
var list = webview.children();
for(var i = 0; i < list.length; i++) {
$.fire(list[i], eventType);
}
}
};
/**
* 打开新窗口
* @param {string} url 要打开的页面地址
* @param {string} id 指定页面ID
* @param {object} options 可选:参数,等待,窗口,显示配置{params:{},waiting:{},styles:{},show:{}}
*/
$.openWindow = function(url, id, options) {
if(typeof url === 'object') {
options = url;
url = options.url;
id = options.id || url;
} else {
if(typeof id === 'object') {
options = id;
id = options.id || url;
} else {
id = id || url;
}
}
if(!$.os.plus) {
//TODO 先临时这么处理：手机上顶层跳，PC上parent跳
if($.os.ios || $.os.android) {
window.top.location.href = url;
} else {
window.parent.location.href = url;
}
return;
}
if(!window.plus) {
return;
}
options = options || {};
var params = options.params || {};
var webview = null,
webviewCache = null,
nShow, nWaiting;
if($.webviews[id]) {
webviewCache = $.webviews[id];
//webview真实存在，才能获取
if(plus.webview.getWebviewById(id)) {
webview = webviewCache.webview;
}
} else if(options.createNew !== true) {
webview = plus.webview.getWebviewById(id);
}
if(webview) { //已缓存
//每次show都需要传递动画参数；
//预加载的动画参数优先级：openWindow配置>preloadPages配置>mui默认配置；
nShow = webviewCache ? webviewCache.show : defaultShow;
nShow = options.show ? $.extend(nShow, options.show) : nShow;
nShow.autoShow && webview.show(nShow.aniShow, nShow.duration, function() {
triggerPreload(webview);
trigger(webview, 'pagebeforeshow', false);
});
if(webviewCache) {
webviewCache.afterShowMethodName && webview.evalJS(webviewCache.afterShowMethodName + '(\'' + JSON.stringify(params) + '\')');
}
return webview;
} else { //新窗口
if(!url) {
throw new Error('webview[' + id + '] does not exist');
}
//显示waiting
var waitingConfig = $.waitingOptions(options.waiting);
if(waitingConfig.autoShow) {
nWaiting = plus.nativeUI.showWaiting(waitingConfig.title, waitingConfig.options);
}
//创建页面
options = $.extend(options, {
id: id,
url: url
});
webview = $.createWindow(options);
//显示
nShow = $.showOptions(options.show);
if(nShow.autoShow) {
var showWebview = function() {
//关闭等待框
if(nWaiting) {
nWaiting.close();
}
//显示页面
webview.show(nShow.aniShow, nShow.duration, function() {},nShow.extras);
options.afterShowMethodName && webview.evalJS(options.afterShowMethodName + '(\'' + JSON.stringify(params) + '\')');
};
//titleUpdate触发时机早于loaded，更换为titleUpdate后，可以更早的显示webview
webview.addEventListener(nShow.event, showWebview, false);
//loaded事件发生后，触发预加载和pagebeforeshow事件
webview.addEventListener("loaded", function() {
triggerPreload(webview);
trigger(webview, 'pagebeforeshow', false);
}, false);
}
}
return webview;
};
$.openWindowWithTitle = function(options, titleConfig) {
options = options || {};
var url = options.url;
var id = options.id || url;
if(!$.os.plus) {
//TODO 先临时这么处理：手机上顶层跳，PC上parent跳
if($.os.ios || $.os.android) {
window.top.location.href = url;
} else {
window.parent.location.href = url;
}
return;
}
if(!window.plus) {
return;
}
var params = options.params || {};
var webview = null,
webviewCache = null,
nShow, nWaiting;
if($.webviews[id]) {
webviewCache = $.webviews[id];
//webview真实存在，才能获取
if(plus.webview.getWebviewById(id)) {
webview = webviewCache.webview;
}
} else if(options.createNew !== true) {
webview = plus.webview.getWebviewById(id);
}
if(webview) { //已缓存
//每次show都需要传递动画参数；
//预加载的动画参数优先级：openWindow配置>preloadPages配置>mui默认配置；
nShow = webviewCache ? webviewCache.show : defaultShow;
nShow = options.show ? $.extend(nShow, options.show) : nShow;
nShow.autoShow && webview.show(nShow.aniShow, nShow.duration, function() {
triggerPreload(webview);
trigger(webview, 'pagebeforeshow', false);
});
if(webviewCache) {
webviewCache.afterShowMethodName && webview.evalJS(webviewCache.afterShowMethodName + '(\'' + JSON.stringify(params) + '\')');
}
return webview;
} else { //新窗口
if(!url) {
throw new Error('webview[' + id + '] does not exist');
}
//显示waiting
var waitingConfig = $.waitingOptions(options.waiting);
if(waitingConfig.autoShow) {
nWaiting = plus.nativeUI.showWaiting(waitingConfig.title, waitingConfig.options);
}
//创建页面
options = $.extend(options, {
id: id,
url: url
});
webview = $.createWindow(options);
if(titleConfig) { //处理原生头
$.extend(true, $.options.titleConfig, titleConfig);
var tid = $.options.titleConfig.id ? $.options.titleConfig.id : id + "_title";
var view = new plus.nativeObj.View(tid, {
top: 0,
height: $.options.titleConfig.height,
width: "100%",
dock: "top",
position: "dock"
});
view.drawRect($.options.titleConfig.backgroundColor); //绘制背景色
var _b = parseInt($.options.titleConfig.height) - 1;
view.drawRect($.options.titleConfig.bottomBorderColor, {
top: _b + "px",
left: "0px"
}); //绘制底部边线
//绘制文字
if($.options.titleConfig.title.text){
var _title = $.options.titleConfig.title;
view.drawText(_title.text,_title.position , _title.styles);
}
//返回图标绘制
var _back = $.options.titleConfig.back;
var backClick = null;
//优先字体
//其次是图片
var _backImage = _back.image;
if(_backImage.base64Data || _backImage.imgSrc) {
//TODO 此处需要处理百分比的情况
backClick = {
left:parseInt(_backImage.position.left),
right:parseInt(_backImage.position.left) + parseInt(_backImage.position.width)
};
var bitmap = new plus.nativeObj.Bitmap(id + "_back");
if(_backImage.base64Data) { //优先base64编码字符串
bitmap.loadBase64Data(_backImage.base64Data);
} else { //其次加载图片文件
bitmap.load(_backImage.imgSrc);
}
view.drawBitmap(bitmap,_backImage.sprite , _backImage.position);
}
//处理点击事件
view.setTouchEventRect({
top: "0px",
left: "0px",
width: "100%",
height: "100%"
});
view.interceptTouchEvent(true);
view.addEventListener("click", function(e) {
var x = e.clientX;
//返回按钮点击
if(backClick&& x > backClick.left && x < backClick.right){
if( _back.click && $.isFunction(_back.click)){
_back.click();
}else{
webview.evalJS("window.mui&&mui.back();");
}
}
}, false);
webview.append(view);
}
//显示
nShow = $.showOptions(options.show);
if(nShow.autoShow) {
//titleUpdate触发时机早于loaded，更换为titleUpdate后，可以更早的显示webview
webview.addEventListener(nShow.event, function () {
//关闭等待框
if(nWaiting) {
nWaiting.close();
}
//显示页面
webview.show(nShow.aniShow, nShow.duration, function() {},nShow.extras);
}, false);
}
}
return webview;
};
/**
* 根据配置信息创建一个webview
* @param {type} options
* @param {type} isCreate
* @returns {webview}
*/
$.createWindow = function(options, isCreate) {
if(!window.plus) {
return;
}
var id = options.id || options.url;
var webview;
if(options.preload) {
if($.webviews[id] && $.webviews[id].webview.getURL()) { //已经cache
webview = $.webviews[id].webview;
} else { //新增预加载窗口
//判断是否携带createNew参数，默认为false
if(options.createNew !== true) {
webview = plus.webview.getWebviewById(id);
}
//之前没有，那就新创建
if(!webview) {
webview = plus.webview.create(options.url, id, $.windowOptions(options.styles), $.extend({
preload: true
}, options.extras));
if(options.subpages) {
$.each(options.subpages, function(index, subpage) {
var subpageId = subpage.id || subpage.url;
if(subpageId) { //过滤空对象
var subWebview = plus.webview.getWebviewById(subpageId);
if(!subWebview) { //如果该webview不存在，则创建
subWebview = plus.webview.create(subpage.url, subpageId, $.windowOptions(subpage.styles), $.extend({
preload: true
}, subpage.extras));
}
webview.append(subWebview);
}
});
}
}
}
//TODO 理论上，子webview也应该计算到预加载队列中，但这样就麻烦了，要退必须退整体，否则可能出现问题；
$.webviews[id] = {
webview: webview, //目前仅preload的缓存webview
preload: true,
show: $.showOptions(options.show),
afterShowMethodName: options.afterShowMethodName //就不应该用evalJS。应该是通过事件消息通讯
};
//索引该预加载窗口
var preloads = $.data.preloads;
var index = preloads.indexOf(id);
if(~index) { //删除已存在的(变相调整插入位置)
preloads.splice(index, 1);
}
preloads.push(id);
if(preloads.length > $.options.preloadLimit) {
//先进先出
var first = $.data.preloads.shift();
var webviewCache = $.webviews[first];
if(webviewCache && webviewCache.webview) {
//需要将自己打开的所有页面，全部close；
//关闭该预加载webview
$.closeAll(webviewCache.webview);
}
//删除缓存
delete $.webviews[first];
}
} else {
if(isCreate !== false) { //直接创建非预加载窗口
webview = plus.webview.create(options.url, id, $.windowOptions(options.styles), options.extras);
if(options.subpages) {
$.each(options.subpages, function(index, subpage) {
var subpageId = subpage.id || subpage.url;
var subWebview = plus.webview.getWebviewById(subpageId);
if(!subWebview) {
subWebview = plus.webview.create(subpage.url, subpageId, $.windowOptions(subpage.styles), subpage.extras);
}
webview.append(subWebview);
});
}
}
}
return webview;
};
/**
* 预加载
*/
$.preload = function(options) {
//调用预加载函数，不管是否传递preload参数，强制变为true
if(!options.preload) {
options.preload = true;
}
return $.createWindow(options);
};
/**
*关闭当前webview打开的所有webview；
*/
$.closeOpened = function(webview) {
var opened = webview.opened();
if(opened) {
for(var i = 0, len = opened.length; i < len; i++) {
var openedWebview = opened[i];
var open_open = openedWebview.opened();
if(open_open && open_open.length > 0) {
//关闭打开的webview
$.closeOpened(openedWebview);
//关闭自己
openedWebview.close("none");
} else {
//如果直接孩子节点，就不用关闭了，因为父关闭的时候，会自动关闭子；
if(openedWebview.parent() !== webview) {
openedWebview.close('none');
}
}
}
}
};
$.closeAll = function(webview, aniShow) {
$.closeOpened(webview);
if(aniShow) {
webview.close(aniShow);
} else {
webview.close();
}
};
/**
* 批量创建webview
* @param {type} options
* @returns {undefined}
*/
$.createWindows = function(options) {
$.each(options, function(index, option) {
//初始化预加载窗口(创建)和非预加载窗口(仅配置，不创建)
$.createWindow(option, false);
});
};
/**
* 创建当前页面的子webview
* @param {type} options
* @returns {webview}
*/
$.appendWebview = function(options) {
if(!window.plus) {
return;
}
var id = options.id || options.url;
var webview;
if(!$.webviews[id]) { //保证执行一遍
//TODO 这里也有隐患，比如某个webview不是作为subpage创建的，而是作为target webview的话；
if(!plus.webview.getWebviewById(id)) {
webview = plus.webview.create(options.url, id, options.styles, options.extras);
}
//之前的实现方案：子窗口loaded之后再append到父窗口中；
//问题：部分子窗口loaded事件发生较晚，此时执行父窗口的children方法会返回空，导致父子通讯失败；
// 比如父页面执行完preload事件后，需触发子页面的preload事件，此时未append的话，就无法触发；
//修改方式：不再监控loaded事件，直接append
//by chb@20150521
// webview.addEventListener('loaded', function() {
plus.webview.currentWebview().append(webview);
// });
$.webviews[id] = options;
}
return webview;
};
//全局webviews
$.webviews = {};
//预加载窗口索引
$.data.preloads = [];
//$.currentWebview
$.plusReady(function() {
$.currentWebview = plus.webview.currentWebview();
});
$.addInit({
name: '5+',
index: 100,
handle: function() {
var options = $.options;
var subpages = options.subpages || [];
if($.os.plus) {
$.plusReady(function() {
//TODO 这里需要判断一下，最好等子窗口加载完毕后，再调用主窗口的show方法；
//或者：在openwindow方法中，监听实现；
$.each(subpages, function(index, subpage) {
$.appendWebview(subpage);
});
//判断是否首页
if(plus.webview.currentWebview() === plus.webview.getWebviewById(plus.runtime.appid)) {
//首页需要自己激活预加载；
//timeout因为子页面loaded之后才append的，防止子页面尚未append、从而导致其preload未触发的问题；
setTimeout(function() {
triggerPreload(plus.webview.currentWebview());
}, 300);
}
//设置ios顶部状态栏颜色；
if($.os.ios && $.options.statusBarBackground) {
plus.navigator.setStatusBarBackground($.options.statusBarBackground);
}
if($.os.android && parseFloat($.os.version) < 4.4) {
//解决Android平台4.4版本以下，resume后，父窗体标题延迟渲染的问题；
if(plus.webview.currentWebview().parent() == null) {
document.addEventListener("resume", function() {
var body = document.body;
body.style.display = 'none';
setTimeout(function() {
body.style.display = '';
}, 10);
});
}
}
});
} else {
//已支持iframe嵌入
// if (subpages.length > 0) {
// var err = document.createElement('div');
// err.className = 'mui-error';
// //文字描述
// var span = document.createElement('span');
// span.innerHTML = '在该浏览器下，不支持创建子页面，具体参考';
// err.appendChild(span);
// var a = document.createElement('a');
// a.innerHTML = '"mui框架适用场景"';
// a.href = 'http://ask.dcloud.net.cn/article/113';
// err.appendChild(a);
// document.body.appendChild(err);
// console.log('在该浏览器下，不支持创建子页面');
// }
}
}
});
window.addEventListener('preload', function() {
//处理预加载部分
var webviews = $.options.preloadPages || [];
$.plusReady(function() {
$.each(webviews, function(index, webview) {
$.createWindow($.extend(webview, {
preload: true
}));
});
});
});
$.supportStatusbarOffset = function() {
return $.os.plus && $.os.ios && parseFloat($.os.version) >= 7;
};
$.ready(function() {
//标识当前环境支持statusbar
if($.supportStatusbarOffset()) {
document.body.classList.add('mui-statusbar');
}
});
})(mui);
/**
* mui back
* @param {type} $
* @param {type} window
* @returns {undefined}
*/
(function($, window) {
/**
* register back
* @param {type} back
* @returns {$.gestures}
*/
$.addBack = function(back) {
return $.addAction('backs', back);
};
/**
* default
*/
$.addBack({
name: 'browser',
index: 100,
handle: function() {
if (window.history.length > 1) {
window.history.back();
return true;
}
return false;
}
});
/**
* 后退
*/
$.back = function() {
if (typeof $.options.beforeback === 'function') {
if ($.options.beforeback() === false) {
return;
}
}
$.doAction('backs');
};
window.addEventListener('tap', function(e) {
var action = $.targets.action;
if (action && action.classList.contains('mui-action-back')) {
$.back();
$.targets.action = false;
}
});
window.addEventListener('swiperight', function(e) {
var detail = e.detail;
if ($.options.swipeBack === true && Math.abs(detail.angle) < 3) {
$.back();
}
});
})(mui, window);
/**
* mui back 5+
* @param {type} $
* @param {type} window
* @returns {undefined}
*/
(function($, window) {
if ($.os.plus && $.os.android) {
$.addBack({
name: 'mui',
index: 5,
handle: function() {
//后续重新设计此处，将back放到各个空间内部实现
//popover
if ($.targets._popover && $.targets._popover.classList.contains('mui-active')) {
$($.targets._popover).popover('hide');
return true;
}
//offcanvas
var offCanvas = document.querySelector('.mui-off-canvas-wrap.mui-active');
if (offCanvas) {
$(offCanvas).offCanvas('close');
return true;
}
var previewImage = $.isFunction($.getPreviewImage) && $.getPreviewImage();
if (previewImage && previewImage.isShown()) {
previewImage.close();
return true;
}
//popup
return $.closePopup();
}
});
}
//首次按下back按键的时间
$.__back__first = null;
/**
* 5+ back
*/
$.addBack({
name: '5+',
index: 10,
handle: function() {
if (!window.plus) {
return false;
}
var wobj = plus.webview.currentWebview();
var parent = wobj.parent();
if (parent) {
parent.evalJS('mui&&mui.back();');
} else {
wobj.canBack(function(e) {
//by chb 暂时注释，在碰到类似popover之类的锚点的时候，需多次点击才能返回；
if (e.canBack) { //webview history back
window.history.back();
} else { //webview close or hide
//fixed by fxy 此处不应该用opener判断，因为用户有可能自己close掉当前窗口的opener。这样的话。opener就为空了，导致不能执行close
if (wobj.id === plus.runtime.appid) { //首页
//首页不存在opener的情况下，后退实际上应该是退出应用；
//首次按键，提示‘再按一次退出应用’
if (!$.__back__first) {
$.__back__first = new Date().getTime();
mui.toast('再按一次退出应用');
setTimeout(function() {
$.__back__first = null;
}, 2000);
} else {
if (new Date().getTime() - $.__back__first < 2000) {
plus.runtime.quit();
}
}
} else { //其他页面，
if (wobj.preload) {
wobj.hide("auto");
} else {
//关闭页面时，需要将其打开的所有子页面全部关闭；
$.closeAll(wobj);
}
}
}
});
}
return true;
}
});
$.menu = function() {
var menu = document.querySelector('.mui-action-menu');
if (menu) {
$.trigger(menu, $.EVENT_START); //临时处理menu无touchstart的话，找不到当前targets的问题
$.trigger(menu, 'tap');
} else { //执行父窗口的menu
if (window.plus) {
var wobj = $.currentWebview;
var parent = wobj.parent();
if (parent) { //又得evalJS
parent.evalJS('mui&&mui.menu();');
}
}
}
};
var __back = function() {
$.back();
};
var __menu = function() {
$.menu();
};
//默认监听
$.plusReady(function() {
if ($.options.keyEventBind.backbutton) {
plus.key.addEventListener('backbutton', __back, false);
}
if ($.options.keyEventBind.menubutton) {
plus.key.addEventListener('menubutton', __menu, false);
}
});
//处理按键监听事件
$.addInit({
name: 'keyEventBind',
index: 1000,
handle: function() {
$.plusReady(function() {
//如果不为true，则移除默认监听
if (!$.options.keyEventBind.backbutton) {
plus.key.removeEventListener('backbutton', __back);
}
if (!$.options.keyEventBind.menubutton) {
plus.key.removeEventListener('menubutton', __menu);
}
});
}
});
})(mui, window);
/**
* mui.init pulldownRefresh
* @param {type} $
* @returns {undefined}
*/
(function($) {
$.addInit({
name: 'pullrefresh',
index: 1000,
handle: function() {
var options = $.options;
var pullRefreshOptions = options.pullRefresh || {};
var hasPulldown = pullRefreshOptions.down && pullRefreshOptions.down.hasOwnProperty('callback');
var hasPullup = pullRefreshOptions.up && pullRefreshOptions.up.hasOwnProperty('callback');
if(hasPulldown || hasPullup) {
var container = pullRefreshOptions.container;
if(container) {
var $container = $(container);
if($container.length === 1) {
if($.os.plus) { //5+环境
if(hasPulldown && pullRefreshOptions.down.style == "circle") { //原生转圈
$.plusReady(function() {
//这里改写$.fn.pullRefresh
$.fn.pullRefresh = $.fn.pullRefresh_native;
$container.pullRefresh(pullRefreshOptions);
});
} else if($.os.android) { //非原生转圈，但是Android环境
$.plusReady(function() {
//这里改写$.fn.pullRefresh
$.fn.pullRefresh = $.fn.pullRefresh_native
var webview = plus.webview.currentWebview();
if(window.__NWin_Enable__ === false) { //不支持多webview
$container.pullRefresh(pullRefreshOptions);
} else {
if(hasPullup) {
//当前页面初始化pullup
var upOptions = {};
upOptions.up = pullRefreshOptions.up;
upOptions.webviewId = webview.id || webview.getURL();
$container.pullRefresh(upOptions);
}
if(hasPulldown) {
var parent = webview.parent();
var id = webview.id || webview.getURL();
if(parent) {
if(!hasPullup) { //如果没有上拉加载，需要手动初始化一个默认的pullRefresh，以便当前页面容器可以调用endPulldownToRefresh等方法
$container.pullRefresh({
webviewId: id
});
}
var downOptions = {
webviewId: id//子页面id
};
downOptions.down = $.extend({}, pullRefreshOptions.down);
downOptions.down.callback = '_CALLBACK';
//改写父页面的$.fn.pullRefresh
parent.evalJS("mui.fn.pullRefresh=mui.fn.pullRefresh_native");
//父页面初始化pulldown
parent.evalJS("mui&&mui(document.querySelector('.mui-content')).pullRefresh('" + JSON.stringify(downOptions) + "')");
}
}
}
});
} else { //非原生转圈，iOS环境
$container.pullRefresh(pullRefreshOptions);
}
} else {
$container.pullRefresh(pullRefreshOptions);
}
}
}
}
}
});
})(mui);
/**
* mui ajax
* @param {type} $
* @returns {undefined}
*/
(function($, window, undefined) {
var jsonType = 'application/json';
var htmlType = 'text/html';
var rscript = /
