/** * jQuery WeUI V1.2.1 * By 言川 * http://lihongxun945.github.io/jquery-weui/ */ /* global $:true */ /* global WebKitCSSMatrix:true */ (function($) { "use strict"; $.fn.transitionEnd = function(callback) { var events = ['webkitTransitionEnd', 'transitionend', 'oTransitionEnd', 'MSTransitionEnd', 'msTransitionEnd'], i, dom = this; function fireCallBack(e) { /*jshint validthis:true */ if (e.target !== this) return; callback.call(this, e); for (i = 0; i < events.length; i++) { dom.off(events[i], fireCallBack); } } if (callback) { for (i = 0; i < events.length; i++) { dom.on(events[i], fireCallBack); } } return this; }; $.support = (function() { var support = { touch: !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch) }; return support; })(); $.touchEvents = { start: $.support.touch ? 'touchstart' : 'mousedown', move: $.support.touch ? 'touchmove' : 'mousemove', end: $.support.touch ? 'touchend' : 'mouseup' }; $.getTouchPosition = function(e) { e = e.originalEvent || e; //jquery wrap the originevent if(e.type === 'touchstart' || e.type === 'touchmove' || e.type === 'touchend') { return { x: e.targetTouches[0].pageX, y: e.targetTouches[0].pageY }; } else { return { x: e.pageX, y: e.pageY }; } }; $.fn.scrollHeight = function() { return this[0].scrollHeight; }; $.fn.transform = function(transform) { for (var i = 0; i < this.length; i++) { var elStyle = this[i].style; elStyle.webkitTransform = elStyle.MsTransform = elStyle.msTransform = elStyle.MozTransform = elStyle.OTransform = elStyle.transform = transform; } return this; }; $.fn.transition = function(duration) { if (typeof duration !== 'string') { duration = duration + 'ms'; } for (var i = 0; i < this.length; i++) { var elStyle = this[i].style; elStyle.webkitTransitionDuration = elStyle.MsTransitionDuration = elStyle.msTransitionDuration = elStyle.MozTransitionDuration = elStyle.OTransitionDuration = elStyle.transitionDuration = duration; } return this; }; $.getTranslate = function (el, axis) { var matrix, curTransform, curStyle, transformMatrix; // automatic axis detection if (typeof axis === 'undefined') { axis = 'x'; } curStyle = window.getComputedStyle(el, null); if (window.WebKitCSSMatrix) { // Some old versions of Webkit choke when 'none' is passed; pass // empty string instead in this case transformMatrix = new WebKitCSSMatrix(curStyle.webkitTransform === 'none' ? '' : curStyle.webkitTransform); } else { transformMatrix = curStyle.MozTransform || curStyle.OTransform || curStyle.MsTransform || curStyle.msTransform || curStyle.transform || curStyle.getPropertyValue('transform').replace('translate(', 'matrix(1, 0, 0, 1,'); matrix = transformMatrix.toString().split(','); } if (axis === 'x') { //Latest Chrome and webkits Fix if (window.WebKitCSSMatrix) curTransform = transformMatrix.m41; //Crazy IE10 Matrix else if (matrix.length === 16) curTransform = parseFloat(matrix[12]); //Normal Browsers else curTransform = parseFloat(matrix[4]); } if (axis === 'y') { //Latest Chrome and webkits Fix if (window.WebKitCSSMatrix) curTransform = transformMatrix.m42; //Crazy IE10 Matrix else if (matrix.length === 16) curTransform = parseFloat(matrix[13]); //Normal Browsers else curTransform = parseFloat(matrix[5]); } return curTransform || 0; }; $.requestAnimationFrame = function (callback) { if (window.requestAnimationFrame) return window.requestAnimationFrame(callback); else if (window.webkitRequestAnimationFrame) return window.webkitRequestAnimationFrame(callback); else if (window.mozRequestAnimationFrame) return window.mozRequestAnimationFrame(callback); else { return window.setTimeout(callback, 1000 / 60); } }; $.cancelAnimationFrame = function (id) { if (window.cancelAnimationFrame) return window.cancelAnimationFrame(id); else if (window.webkitCancelAnimationFrame) return window.webkitCancelAnimationFrame(id); else if (window.mozCancelAnimationFrame) return window.mozCancelAnimationFrame(id); else { return window.clearTimeout(id); } }; $.fn.join = function(arg) { return this.toArray().join(arg); } })($); /*=========================== Template7 Template engine ===========================*/ /* global $:true */ /* jshint unused:false */ /* jshint forin:false */ +function ($) { "use strict"; $.Template7 = $.t7 = (function () { function isArray(arr) { return Object.prototype.toString.apply(arr) === '[object Array]'; } function isObject(obj) { return obj instanceof Object; } function isFunction(func) { return typeof func === 'function'; } var cache = {}; function helperToSlices(string) { var helperParts = string.replace(/[{}#}]/g, '').split(' '); var slices = []; var shiftIndex, i, j; for (i = 0; i < helperParts.length; i++) { var part = helperParts[i]; if (i === 0) slices.push(part); else { if (part.indexOf('"') === 0) { // Plain String if (part.match(/"/g).length === 2) { // One word string slices.push(part); } else { // Find closed Index shiftIndex = 0; for (j = i + 1; j < helperParts.length; j++) { part += ' ' + helperParts[j]; if (helperParts[j].indexOf('"') >= 0) { shiftIndex = j; slices.push(part); break; } } if (shiftIndex) i = shiftIndex; } } else { if (part.indexOf('=') > 0) { // Hash var hashParts = part.split('='); var hashName = hashParts[0]; var hashContent = hashParts[1]; if (hashContent.match(/"/g).length !== 2) { shiftIndex = 0; for (j = i + 1; j < helperParts.length; j++) { hashContent += ' ' + helperParts[j]; if (helperParts[j].indexOf('"') >= 0) { shiftIndex = j; break; } } if (shiftIndex) i = shiftIndex; } var hash = [hashName, hashContent.replace(/"/g,'')]; slices.push(hash); } else { // Plain variable slices.push(part); } } } } return slices; } function stringToBlocks(string) { var blocks = [], i, j, k; if (!string) return []; var _blocks = string.split(/({{[^{^}]*}})/); for (i = 0; i < _blocks.length; i++) { var block = _blocks[i]; if (block === '') continue; if (block.indexOf('{{') < 0) { blocks.push({ type: 'plain', content: block }); } else { if (block.indexOf('{/') >= 0) { continue; } if (block.indexOf('{#') < 0 && block.indexOf(' ') < 0 && block.indexOf('else') < 0) { // Simple variable blocks.push({ type: 'variable', contextName: block.replace(/[{}]/g, '') }); continue; } // Helpers var helperSlices = helperToSlices(block); var helperName = helperSlices[0]; var helperContext = []; var helperHash = {}; for (j = 1; j < helperSlices.length; j++) { var slice = helperSlices[j]; if (isArray(slice)) { // Hash helperHash[slice[0]] = slice[1] === 'false' ? false : slice[1]; } else { helperContext.push(slice); } } if (block.indexOf('{#') >= 0) { // Condition/Helper var helperStartIndex = i; var helperContent = ''; var elseContent = ''; var toSkip = 0; var shiftIndex; var foundClosed = false, foundElse = false, foundClosedElse = false, depth = 0; for (j = i + 1; j < _blocks.length; j++) { if (_blocks[j].indexOf('{{#') >= 0) { depth ++; } if (_blocks[j].indexOf('{{/') >= 0) { depth --; } if (_blocks[j].indexOf('{{#' + helperName) >= 0) { helperContent += _blocks[j]; if (foundElse) elseContent += _blocks[j]; toSkip ++; } else if (_blocks[j].indexOf('{{/' + helperName) >= 0) { if (toSkip > 0) { toSkip--; helperContent += _blocks[j]; if (foundElse) elseContent += _blocks[j]; } else { shiftIndex = j; foundClosed = true; break; } } else if (_blocks[j].indexOf('else') >= 0 && depth === 0) { foundElse = true; } else { if (!foundElse) helperContent += _blocks[j]; if (foundElse) elseContent += _blocks[j]; } } if (foundClosed) { if (shiftIndex) i = shiftIndex; blocks.push({ type: 'helper', helperName: helperName, contextName: helperContext, content: helperContent, inverseContent: elseContent, hash: helperHash }); } } else if (block.indexOf(' ') > 0) { blocks.push({ type: 'helper', helperName: helperName, contextName: helperContext, hash: helperHash }); } } } return blocks; } var Template7 = function (template) { var t = this; t.template = template; function getCompileFn(block, depth) { if (block.content) return compile(block.content, depth); else return function () {return ''; }; } function getCompileInverse(block, depth) { if (block.inverseContent) return compile(block.inverseContent, depth); else return function () {return ''; }; } function getCompileVar(name, ctx) { var variable, parts, levelsUp = 0, initialCtx = ctx; if (name.indexOf('../') === 0) { levelsUp = name.split('../').length - 1; var newDepth = ctx.split('_')[1] - levelsUp; ctx = 'ctx_' + (newDepth >= 1 ? newDepth : 1); parts = name.split('../')[levelsUp].split('.'); } else if (name.indexOf('@global') === 0) { ctx = '$.Template7.global'; parts = name.split('@global.')[1].split('.'); } else if (name.indexOf('@root') === 0) { ctx = 'ctx_1'; parts = name.split('@root.')[1].split('.'); } else { parts = name.split('.'); } variable = ctx; for (var i = 0; i < parts.length; i++) { var part = parts[i]; if (part.indexOf('@') === 0) { if (i > 0) { variable += '[(data && data.' + part.replace('@', '') + ')]'; } else { variable = '(data && data.' + name.replace('@', '') + ')'; } } else { if (isFinite(part)) { variable += '[' + part + ']'; } else { if (part.indexOf('this') === 0) { variable = part.replace('this', ctx); } else { variable += '.' + part; } } } } return variable; } function getCompiledArguments(contextArray, ctx) { var arr = []; for (var i = 0; i < contextArray.length; i++) { if (contextArray[i].indexOf('"') === 0) arr.push(contextArray[i]); else { arr.push(getCompileVar(contextArray[i], ctx)); } } return arr.join(', '); } function compile(template, depth) { depth = depth || 1; template = template || t.template; if (typeof template !== 'string') { throw new Error('Template7: Template must be a string'); } var blocks = stringToBlocks(template); if (blocks.length === 0) { return function () { return ''; }; } var ctx = 'ctx_' + depth; var resultString = '(function (' + ctx + ', data) {\n'; if (depth === 1) { resultString += 'function isArray(arr){return Object.prototype.toString.apply(arr) === \'[object Array]\';}\n'; resultString += 'function isFunction(func){return (typeof func === \'function\');}\n'; resultString += 'function c(val, ctx) {if (typeof val !== "undefined") {if (isFunction(val)) {return val.call(ctx);} else return val;} else return "";}\n'; } resultString += 'var r = \'\';\n'; var i, j, context; for (i = 0; i < blocks.length; i++) { var block = blocks[i]; // Plain block if (block.type === 'plain') { resultString += 'r +=\'' + (block.content).replace(/\r/g, '\\r').replace(/\n/g, '\\n').replace(/'/g, '\\' + '\'') + '\';'; continue; } var variable, compiledArguments; // Variable block if (block.type === 'variable') { variable = getCompileVar(block.contextName, ctx); resultString += 'r += c(' + variable + ', ' + ctx + ');'; } // Helpers block if (block.type === 'helper') { if (block.helperName in t.helpers) { compiledArguments = getCompiledArguments(block.contextName, ctx); resultString += 'r += ($.Template7.helpers.' + block.helperName + ').call(' + ctx + ', ' + (compiledArguments && (compiledArguments + ', ')) +'{hash:' + JSON.stringify(block.hash) + ', data: data || {}, fn: ' + getCompileFn(block, depth+1) + ', inverse: ' + getCompileInverse(block, depth+1) + ', root: ctx_1});'; } else { if (block.contextName.length > 0) { throw new Error('Template7: Missing helper: "' + block.helperName + '"'); } else { variable = getCompileVar(block.helperName, ctx); resultString += 'if (' + variable + ') {'; resultString += 'if (isArray(' + variable + ')) {'; resultString += 'r += ($.Template7.helpers.each).call(' + ctx + ', ' + variable + ', {hash:' + JSON.stringify(block.hash) + ', data: data || {}, fn: ' + getCompileFn(block, depth+1) + ', inverse: ' + getCompileInverse(block, depth+1) + ', root: ctx_1});'; resultString += '}else {'; resultString += 'r += ($.Template7.helpers.with).call(' + ctx + ', ' + variable + ', {hash:' + JSON.stringify(block.hash) + ', data: data || {}, fn: ' + getCompileFn(block, depth+1) + ', inverse: ' + getCompileInverse(block, depth+1) + ', root: ctx_1});'; resultString += '}}'; } } } } resultString += '\nreturn r;})'; return eval.call(window, resultString); } t.compile = function (template) { if (!t.compiled) { t.compiled = compile(template); } return t.compiled; }; }; Template7.prototype = { options: {}, helpers: { 'if': function (context, options) { if (isFunction(context)) { context = context.call(this); } if (context) { return options.fn(this, options.data); } else { return options.inverse(this, options.data); } }, 'unless': function (context, options) { if (isFunction(context)) { context = context.call(this); } if (!context) { return options.fn(this, options.data); } else { return options.inverse(this, options.data); } }, 'each': function (context, options) { var ret = '', i = 0; if (isFunction(context)) { context = context.call(this); } if (isArray(context)) { if (options.hash.reverse) { context = context.reverse(); } for (i = 0; i < context.length; i++) { ret += options.fn(context[i], {first: i === 0, last: i === context.length - 1, index: i}); } if (options.hash.reverse) { context = context.reverse(); } } else { for (var key in context) { i++; ret += options.fn(context[key], {key: key}); } } if (i > 0) return ret; else return options.inverse(this); }, 'with': function (context, options) { if (isFunction(context)) { context = context.call(this); } return options.fn(context); }, 'join': function (context, options) { if (isFunction(context)) { context = context.call(this); } return context.join(options.hash.delimiter || options.hash.delimeter); }, 'js': function (expression, options) { var func; if (expression.indexOf('return')>=0) { func = '(function(){'+expression+'})'; } else { func = '(function(){return ('+expression+')})'; } return eval.call(this, func).call(this); }, 'js_compare': function (expression, options) { var func; if (expression.indexOf('return')>=0) { func = '(function(){'+expression+'})'; } else { func = '(function(){return ('+expression+')})'; } var condition = eval.call(this, func).call(this); if (condition) { return options.fn(this, options.data); } else { return options.inverse(this, options.data); } } } }; var t7 = function (template, data) { if (arguments.length === 2) { var instance = new Template7(template); var rendered = instance.compile()(data); instance = null; return (rendered); } else return new Template7(template); }; t7.registerHelper = function (name, fn) { Template7.prototype.helpers[name] = fn; }; t7.unregisterHelper = function (name) { Template7.prototype.helpers[name] = undefined; delete Template7.prototype.helpers[name]; }; t7.compile = function (template, options) { var instance = new Template7(template, options); return instance.compile(); }; t7.options = Template7.prototype.options; t7.helpers = Template7.prototype.helpers; return t7; })(); }($); /*! Hammer.JS - v2.0.8 - 2016-04-23 * http://hammerjs.github.io/ * * Copyright (c) 2016 Jorik Tangelder; * Licensed under the MIT license */ (function(window, document, exportName, undefined) { 'use strict'; var VENDOR_PREFIXES = ['', 'webkit', 'Moz', 'MS', 'ms', 'o']; var TEST_ELEMENT = document.createElement('div'); var TYPE_FUNCTION = 'function'; var round = Math.round; var abs = Math.abs; var now = Date.now; /** * set a timeout with a given scope * @param {Function} fn * @param {Number} timeout * @param {Object} context * @returns {number} */ function setTimeoutContext(fn, timeout, context) { return setTimeout(bindFn(fn, context), timeout); } /** * if the argument is an array, we want to execute the fn on each entry * if it aint an array we don't want to do a thing. * this is used by all the methods that accept a single and array argument. * @param {*|Array} arg * @param {String} fn * @param {Object} [context] * @returns {Boolean} */ function invokeArrayArg(arg, fn, context) { if (Array.isArray(arg)) { each(arg, context[fn], context); return true; } return false; } /** * walk objects and arrays * @param {Object} obj * @param {Function} iterator * @param {Object} context */ function each(obj, iterator, context) { var i; if (!obj) { return; } if (obj.forEach) { obj.forEach(iterator, context); } else if (obj.length !== undefined) { i = 0; while (i < obj.length) { iterator.call(context, obj[i], i, obj); i++; } } else { for (i in obj) { obj.hasOwnProperty(i) && iterator.call(context, obj[i], i, obj); } } } /** * wrap a method with a deprecation warning and stack trace * @param {Function} method * @param {String} name * @param {String} message * @returns {Function} A new function wrapping the supplied method. */ function deprecate(method, name, message) { var deprecationMessage = 'DEPRECATED METHOD: ' + name + '\n' + message + ' AT \n'; return function() { var e = new Error('get-stack-trace'); var stack = e && e.stack ? e.stack.replace(/^[^\(]+?[\n$]/gm, '') .replace(/^\s+at\s+/gm, '') .replace(/^Object.\s*\(/gm, '{anonymous}()@') : 'Unknown Stack Trace'; var log = window.console && (window.console.warn || window.console.log); if (log) { log.call(window.console, deprecationMessage, stack); } return method.apply(this, arguments); }; } /** * extend object. * means that properties in dest will be overwritten by the ones in src. * @param {Object} target * @param {...Object} objects_to_assign * @returns {Object} target */ var assign; if (typeof Object.assign !== 'function') { assign = function assign(target) { if (target === undefined || target === null) { throw new TypeError('Cannot convert undefined or null to object'); } var output = Object(target); for (var index = 1; index < arguments.length; index++) { var source = arguments[index]; if (source !== undefined && source !== null) { for (var nextKey in source) { if (source.hasOwnProperty(nextKey)) { output[nextKey] = source[nextKey]; } } } } return output; }; } else { assign = Object.assign; } /** * extend object. * means that properties in dest will be overwritten by the ones in src. * @param {Object} dest * @param {Object} src * @param {Boolean} [merge=false] * @returns {Object} dest */ var extend = deprecate(function extend(dest, src, merge) { var keys = Object.keys(src); var i = 0; while (i < keys.length) { if (!merge || (merge && dest[keys[i]] === undefined)) { dest[keys[i]] = src[keys[i]]; } i++; } return dest; }, 'extend', 'Use `assign`.'); /** * merge the values from src in the dest. * means that properties that exist in dest will not be overwritten by src * @param {Object} dest * @param {Object} src * @returns {Object} dest */ var merge = deprecate(function merge(dest, src) { return extend(dest, src, true); }, 'merge', 'Use `assign`.'); /** * simple class inheritance * @param {Function} child * @param {Function} base * @param {Object} [properties] */ function inherit(child, base, properties) { var baseP = base.prototype, childP; childP = child.prototype = Object.create(baseP); childP.constructor = child; childP._super = baseP; if (properties) { assign(childP, properties); } } /** * simple function bind * @param {Function} fn * @param {Object} context * @returns {Function} */ function bindFn(fn, context) { return function boundFn() { return fn.apply(context, arguments); }; } /** * let a boolean value also be a function that must return a boolean * this first item in args will be used as the context * @param {Boolean|Function} val * @param {Array} [args] * @returns {Boolean} */ function boolOrFn(val, args) { if (typeof val == TYPE_FUNCTION) { return val.apply(args ? args[0] || undefined : undefined, args); } return val; } /** * use the val2 when val1 is undefined * @param {*} val1 * @param {*} val2 * @returns {*} */ function ifUndefined(val1, val2) { return (val1 === undefined) ? val2 : val1; } /** * addEventListener with multiple events at once * @param {EventTarget} target * @param {String} types * @param {Function} handler */ function addEventListeners(target, types, handler) { each(splitStr(types), function(type) { target.addEventListener(type, handler, false); }); } /** * removeEventListener with multiple events at once * @param {EventTarget} target * @param {String} types * @param {Function} handler */ function removeEventListeners(target, types, handler) { each(splitStr(types), function(type) { target.removeEventListener(type, handler, false); }); } /** * find if a node is in the given parent * @method hasParent * @param {HTMLElement} node * @param {HTMLElement} parent * @return {Boolean} found */ function hasParent(node, parent) { while (node) { if (node == parent) { return true; } node = node.parentNode; } return false; } /** * small indexOf wrapper * @param {String} str * @param {String} find * @returns {Boolean} found */ function inStr(str, find) { return str.indexOf(find) > -1; } /** * split string on whitespace * @param {String} str * @returns {Array} words */ function splitStr(str) { return str.trim().split(/\s+/g); } /** * find if a array contains the object using indexOf or a simple polyFill * @param {Array} src * @param {String} find * @param {String} [findByKey] * @return {Boolean|Number} false when not found, or the index */ function inArray(src, find, findByKey) { if (src.indexOf && !findByKey) { return src.indexOf(find); } else { var i = 0; while (i < src.length) { if ((findByKey && src[i][findByKey] == find) || (!findByKey && src[i] === find)) { return i; } i++; } return -1; } } /** * convert array-like objects to real arrays * @param {Object} obj * @returns {Array} */ function toArray(obj) { return Array.prototype.slice.call(obj, 0); } /** * unique array with objects based on a key (like 'id') or just by the array's value * @param {Array} src [{id:1},{id:2},{id:1}] * @param {String} [key] * @param {Boolean} [sort=False] * @returns {Array} [{id:1},{id:2}] */ function uniqueArray(src, key, sort) { var results = []; var values = []; var i = 0; while (i < src.length) { var val = key ? src[i][key] : src[i]; if (inArray(values, 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; } /** * get the prefixed property * @param {Object} obj * @param {String} property * @returns {String|Undefined} prefixed */ function prefixed(obj, property) { var prefix, prop; var camelProp = property[0].toUpperCase() + property.slice(1); var i = 0; while (i < VENDOR_PREFIXES.length) { prefix = VENDOR_PREFIXES[i]; prop = (prefix) ? prefix + camelProp : property; if (prop in obj) { return prop; } i++; } return undefined; } /** * get a unique id * @returns {number} uniqueId */ var _uniqueId = 1; function uniqueId() { return _uniqueId++; } /** * get the window object of an element * @param {HTMLElement} element * @returns {DocumentView|Window} */ function getWindowForElement(element) { var doc = element.ownerDocument || element; return (doc.defaultView || doc.parentWindow || window); } var MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i; var SUPPORT_TOUCH = ('ontouchstart' in window); var SUPPORT_POINTER_EVENTS = prefixed(window, 'PointerEvent') !== undefined; var SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent); var INPUT_TYPE_TOUCH = 'touch'; var INPUT_TYPE_PEN = 'pen'; var INPUT_TYPE_MOUSE = 'mouse'; var INPUT_TYPE_KINECT = 'kinect'; var COMPUTE_INTERVAL = 25; var INPUT_START = 1; var INPUT_MOVE = 2; var INPUT_END = 4; var INPUT_CANCEL = 8; var DIRECTION_NONE = 1; var DIRECTION_LEFT = 2; var DIRECTION_RIGHT = 4; var DIRECTION_UP = 8; var DIRECTION_DOWN = 16; var DIRECTION_HORIZONTAL = DIRECTION_LEFT | DIRECTION_RIGHT; var DIRECTION_VERTICAL = DIRECTION_UP | DIRECTION_DOWN; var DIRECTION_ALL = DIRECTION_HORIZONTAL | DIRECTION_VERTICAL; var PROPS_XY = ['x', 'y']; var PROPS_CLIENT_XY = ['clientX', 'clientY']; /** * create new input type manager * @param {Manager} manager * @param {Function} callback * @returns {Input} * @constructor */ function Input(manager, callback) { var self = this; this.manager = manager; this.callback = callback; this.element = manager.element; this.target = manager.options.inputTarget; // smaller wrapper around the handler, for the scope and the enabled state of the manager, // so when disabled the input events are completely bypassed. this.domHandler = function(ev) { if (boolOrFn(manager.options.enable, [manager])) { self.handler(ev); } }; this.init(); } Input.prototype = { /** * should handle the inputEvent data and trigger the callback * @virtual */ handler: function() { }, /** * bind the events */ init: function() { this.evEl && addEventListeners(this.element, this.evEl, this.domHandler); this.evTarget && addEventListeners(this.target, this.evTarget, this.domHandler); this.evWin && addEventListeners(getWindowForElement(this.element), this.evWin, this.domHandler); }, /** * unbind the events */ destroy: function() { this.evEl && removeEventListeners(this.element, this.evEl, this.domHandler); this.evTarget && removeEventListeners(this.target, this.evTarget, this.domHandler); this.evWin && removeEventListeners(getWindowForElement(this.element), this.evWin, this.domHandler); } }; /** * create new input type manager * called by the Manager constructor * @param {Hammer} manager * @returns {Input} */ function createInputInstance(manager) { var Type; var inputClass = manager.options.inputClass; if (inputClass) { Type = inputClass; } else if (SUPPORT_POINTER_EVENTS) { Type = PointerEventInput; } else if (SUPPORT_ONLY_TOUCH) { Type = TouchInput; } else if (!SUPPORT_TOUCH) { Type = MouseInput; } else { Type = TouchMouseInput; } return new (Type)(manager, inputHandler); } /** * handle input events * @param {Manager} manager * @param {String} eventType * @param {Object} input */ function inputHandler(manager, eventType, input) { var pointersLen = input.pointers.length; var changedPointersLen = input.changedPointers.length; var isFirst = (eventType & INPUT_START && (pointersLen - changedPointersLen === 0)); var isFinal = (eventType & (INPUT_END | INPUT_CANCEL) && (pointersLen - changedPointersLen === 0)); input.isFirst = !!isFirst; input.isFinal = !!isFinal; if (isFirst) { manager.session = {}; } // source event is the normalized value of the domEvents // like 'touchstart, mouseup, pointerdown' input.eventType = eventType; // compute scale, rotation etc computeInputData(manager, input); // emit secret event manager.emit('hammer.input', input); manager.recognize(input); manager.session.prevInput = input; } /** * extend the data with some usable properties like scale, rotate, velocity etc * @param {Object} manager * @param {Object} input */ function computeInputData(manager, input) { var session = manager.session; var pointers = input.pointers; var pointersLength = pointers.length; // store the first input to calculate the distance and direction if (!session.firstInput) { session.firstInput = simpleCloneInputData(input); } // to compute scale and rotation we need to store the multiple touches if (pointersLength > 1 && !session.firstMultiple) { session.firstMultiple = simpleCloneInputData(input); } else if (pointersLength === 1) { session.firstMultiple = false; } var firstInput = session.firstInput; var firstMultiple = session.firstMultiple; var offsetCenter = firstMultiple ? firstMultiple.center : firstInput.center; var center = input.center = getCenter(pointers); input.timeStamp = now(); input.deltaTime = input.timeStamp - firstInput.timeStamp; input.angle = getAngle(offsetCenter, center); input.distance = getDistance(offsetCenter, center); computeDeltaXY(session, input); input.offsetDirection = getDirection(input.deltaX, input.deltaY); var overallVelocity = getVelocity(input.deltaTime, input.deltaX, input.deltaY); input.overallVelocityX = overallVelocity.x; input.overallVelocityY = overallVelocity.y; input.overallVelocity = (abs(overallVelocity.x) > abs(overallVelocity.y)) ? overallVelocity.x : overallVelocity.y; input.scale = firstMultiple ? getScale(firstMultiple.pointers, pointers) : 1; input.rotation = firstMultiple ? getRotation(firstMultiple.pointers, pointers) : 0; input.maxPointers = !session.prevInput ? input.pointers.length : ((input.pointers.length > session.prevInput.maxPointers) ? input.pointers.length : session.prevInput.maxPointers); computeIntervalInputData(session, input); // find the correct target var target = manager.element; if (hasParent(input.srcEvent.target, target)) { target = input.srcEvent.target; } input.target = target; } function computeDeltaXY(session, input) { var center = input.center; var offset = session.offsetDelta || {}; var prevDelta = session.prevDelta || {}; var prevInput = session.prevInput || {}; if (input.eventType === INPUT_START || prevInput.eventType === INPUT_END) { prevDelta = session.prevDelta = { x: prevInput.deltaX || 0, y: prevInput.deltaY || 0 }; offset = session.offsetDelta = { x: center.x, y: center.y }; } input.deltaX = prevDelta.x + (center.x - offset.x); input.deltaY = prevDelta.y + (center.y - offset.y); } /** * velocity is calculated every x ms * @param {Object} session * @param {Object} input */ function computeIntervalInputData(session, input) { var last = session.lastInterval || input, deltaTime = input.timeStamp - last.timeStamp, velocity, velocityX, velocityY, direction; if (input.eventType != INPUT_CANCEL && (deltaTime > COMPUTE_INTERVAL || last.velocity === undefined)) { var deltaX = input.deltaX - last.deltaX; var deltaY = input.deltaY - last.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); session.lastInterval = input; } else { // use latest velocity info if it doesn't overtake a minimum period velocity = last.velocity; velocityX = last.velocityX; velocityY = last.velocityY; direction = last.direction; } input.velocity = velocity; input.velocityX = velocityX; input.velocityY = velocityY; input.direction = direction; } /** * create a simple clone from the input used for storage of firstInput and firstMultiple * @param {Object} input * @returns {Object} clonedInputData */ function simpleCloneInputData(input) { // make a simple copy of the pointers because we will get a reference if we don't // we only need clientXY for the calculations var pointers = []; var i = 0; while (i < input.pointers.length) { pointers[i] = { clientX: round(input.pointers[i].clientX), clientY: round(input.pointers[i].clientY) }; i++; } return { timeStamp: now(), pointers: pointers, center: getCenter(pointers), deltaX: input.deltaX, deltaY: input.deltaY }; } /** * get the center of all the pointers * @param {Array} pointers * @return {Object} center contains `x` and `y` properties */ function getCenter(pointers) { var pointersLength = pointers.length; // no need to loop when only one touch if (pointersLength === 1) { return { x: round(pointers[0].clientX), y: round(pointers[0].clientY) }; } var x = 0, y = 0, i = 0; while (i < pointersLength) { x += pointers[i].clientX; y += pointers[i].clientY; i++; } return { x: round(x / pointersLength), y: round(y / pointersLength) }; } /** * calculate the velocity between two points. unit is in px per ms. * @param {Number} deltaTime * @param {Number} x * @param {Number} y * @return {Object} velocity `x` and `y` */ function getVelocity(deltaTime, x, y) { return { x: x / deltaTime || 0, y: y / deltaTime || 0 }; } /** * get the direction between two points * @param {Number} x * @param {Number} y * @return {Number} direction */ function getDirection(x, y) { if (x === y) { return DIRECTION_NONE; } if (abs(x) >= abs(y)) { return x < 0 ? DIRECTION_LEFT : DIRECTION_RIGHT; } return y < 0 ? DIRECTION_UP : DIRECTION_DOWN; } /** * calculate the absolute distance between two points * @param {Object} p1 {x, y} * @param {Object} p2 {x, y} * @param {Array} [props] containing x and y keys * @return {Number} distance */ function getDistance(p1, p2, props) { if (!props) { props = PROPS_XY; } var x = p2[props[0]] - p1[props[0]], y = p2[props[1]] - p1[props[1]]; return Math.sqrt((x * x) + (y * y)); } /** * calculate the angle between two coordinates * @param {Object} p1 * @param {Object} p2 * @param {Array} [props] containing x and y keys * @return {Number} angle */ function getAngle(p1, p2, props) { if (!props) { props = PROPS_XY; } var x = p2[props[0]] - p1[props[0]], y = p2[props[1]] - p1[props[1]]; return Math.atan2(y, x) * 180 / Math.PI; } /** * calculate the rotation degrees between two pointersets * @param {Array} start array of pointers * @param {Array} end array of pointers * @return {Number} rotation */ function getRotation(start, end) { return getAngle(end[1], end[0], PROPS_CLIENT_XY) + getAngle(start[1], start[0], PROPS_CLIENT_XY); } /** * calculate the scale factor between two pointersets * no scale is 1, and goes down to 0 when pinched together, and bigger when pinched out * @param {Array} start array of pointers * @param {Array} end array of pointers * @return {Number} scale */ function getScale(start, end) { return getDistance(end[0], end[1], PROPS_CLIENT_XY) / getDistance(start[0], start[1], PROPS_CLIENT_XY); } var MOUSE_INPUT_MAP = { mousedown: INPUT_START, mousemove: INPUT_MOVE, mouseup: INPUT_END }; var MOUSE_ELEMENT_EVENTS = 'mousedown'; var MOUSE_WINDOW_EVENTS = 'mousemove mouseup'; /** * Mouse events input * @constructor * @extends Input */ function MouseInput() { this.evEl = MOUSE_ELEMENT_EVENTS; this.evWin = MOUSE_WINDOW_EVENTS; this.pressed = false; // mousedown state Input.apply(this, arguments); } inherit(MouseInput, Input, { /** * handle mouse events * @param {Object} ev */ handler: function MEhandler(ev) { var eventType = MOUSE_INPUT_MAP[ev.type]; // on start we want to have the left mouse button down if (eventType & INPUT_START && ev.button === 0) { this.pressed = true; } if (eventType & INPUT_MOVE && ev.which !== 1) { eventType = INPUT_END; } // mouse must be down if (!this.pressed) { return; } if (eventType & INPUT_END) { this.pressed = false; } this.callback(this.manager, eventType, { pointers: [ev], changedPointers: [ev], pointerType: INPUT_TYPE_MOUSE, srcEvent: ev }); } }); var POINTER_INPUT_MAP = { pointerdown: INPUT_START, pointermove: INPUT_MOVE, pointerup: INPUT_END, pointercancel: INPUT_CANCEL, pointerout: INPUT_CANCEL }; // in IE10 the pointer types is defined as an enum var IE10_POINTER_TYPE_ENUM = { 2: INPUT_TYPE_TOUCH, 3: INPUT_TYPE_PEN, 4: INPUT_TYPE_MOUSE, 5: INPUT_TYPE_KINECT // see https://twitter.com/jacobrossi/status/480596438489890816 }; var POINTER_ELEMENT_EVENTS = 'pointerdown'; var POINTER_WINDOW_EVENTS = 'pointermove pointerup pointercancel'; // IE10 has prefixed support, and case-sensitive if (window.MSPointerEvent && !window.PointerEvent) { POINTER_ELEMENT_EVENTS = 'MSPointerDown'; POINTER_WINDOW_EVENTS = 'MSPointerMove MSPointerUp MSPointerCancel'; } /** * Pointer events input * @constructor * @extends Input */ function PointerEventInput() { this.evEl = POINTER_ELEMENT_EVENTS; this.evWin = POINTER_WINDOW_EVENTS; Input.apply(this, arguments); this.store = (this.manager.session.pointerEvents = []); } inherit(PointerEventInput, Input, { /** * handle mouse events * @param {Object} ev */ handler: function PEhandler(ev) { var store = this.store; var removePointer = false; var eventTypeNormalized = ev.type.toLowerCase().replace('ms', ''); var eventType = POINTER_INPUT_MAP[eventTypeNormalized]; var pointerType = IE10_POINTER_TYPE_ENUM[ev.pointerType] || ev.pointerType; var isTouch = (pointerType == INPUT_TYPE_TOUCH); // get index of the event in the store var storeIndex = inArray(store, ev.pointerId, 'pointerId'); // start and mouse must be down if (eventType & INPUT_START && (ev.button === 0 || isTouch)) { if (storeIndex < 0) { store.push(ev); storeIndex = store.length - 1; } } else if (eventType & (INPUT_END | INPUT_CANCEL)) { removePointer = true; } // it not found, so the pointer hasn't been down (so it's probably a hover) if (storeIndex < 0) { return; } // update the event in the store store[storeIndex] = ev; this.callback(this.manager, eventType, { pointers: store, changedPointers: [ev], pointerType: pointerType, srcEvent: ev }); if (removePointer) { // remove from the store store.splice(storeIndex, 1); } } }); var SINGLE_TOUCH_INPUT_MAP = { touchstart: INPUT_START, touchmove: INPUT_MOVE, touchend: INPUT_END, touchcancel: INPUT_CANCEL }; var SINGLE_TOUCH_TARGET_EVENTS = 'touchstart'; var SINGLE_TOUCH_WINDOW_EVENTS = 'touchstart touchmove touchend touchcancel'; /** * Touch events input * @constructor * @extends Input */ function SingleTouchInput() { this.evTarget = SINGLE_TOUCH_TARGET_EVENTS; this.evWin = SINGLE_TOUCH_WINDOW_EVENTS; this.started = false; Input.apply(this, arguments); } inherit(SingleTouchInput, Input, { handler: function TEhandler(ev) { var type = SINGLE_TOUCH_INPUT_MAP[ev.type]; // should we handle the touch events? if (type === INPUT_START) { this.started = true; } if (!this.started) { return; } var touches = normalizeSingleTouches.call(this, ev, type); // when done, reset the started state if (type & (INPUT_END | INPUT_CANCEL) && touches[0].length - touches[1].length === 0) { this.started = false; } this.callback(this.manager, type, { pointers: touches[0], changedPointers: touches[1], pointerType: INPUT_TYPE_TOUCH, srcEvent: ev }); } }); /** * @this {TouchInput} * @param {Object} ev * @param {Number} type flag * @returns {undefined|Array} [all, changed] */ function normalizeSingleTouches(ev, type) { var all = toArray(ev.touches); var changed = toArray(ev.changedTouches); if (type & (INPUT_END | INPUT_CANCEL)) { all = uniqueArray(all.concat(changed), 'identifier', true); } return [all, changed]; } var TOUCH_INPUT_MAP = { touchstart: INPUT_START, touchmove: INPUT_MOVE, touchend: INPUT_END, touchcancel: INPUT_CANCEL }; var TOUCH_TARGET_EVENTS = 'touchstart touchmove touchend touchcancel'; /** * Multi-user touch events input * @constructor * @extends Input */ function TouchInput() { this.evTarget = TOUCH_TARGET_EVENTS; this.targetIds = {}; Input.apply(this, arguments); } inherit(TouchInput, Input, { handler: function MTEhandler(ev) { var type = TOUCH_INPUT_MAP[ev.type]; var touches = getTouches.call(this, ev, type); if (!touches) { return; } this.callback(this.manager, type, { pointers: touches[0], changedPointers: touches[1], pointerType: INPUT_TYPE_TOUCH, srcEvent: ev }); } }); /** * @this {TouchInput} * @param {Object} ev * @param {Number} type flag * @returns {undefined|Array} [all, changed] */ function getTouches(ev, type) { var allTouches = toArray(ev.touches); var targetIds = this.targetIds; // when there is only one touch, the process can be simplified if (type & (INPUT_START | INPUT_MOVE) && allTouches.length === 1) { targetIds[allTouches[0].identifier] = true; return [allTouches, allTouches]; } var i, targetTouches, changedTouches = toArray(ev.changedTouches), changedTargetTouches = [], target = this.target; // get target touches from touches targetTouches = allTouches.filter(function(touch) { return hasParent(touch.target, target); }); // collect touches if (type === INPUT_START) { i = 0; while (i < targetTouches.length) { targetIds[targetTouches[i].identifier] = true; i++; } } // filter changed touches to only contain touches that exist in the collected target ids i = 0; while (i < changedTouches.length) { if (targetIds[changedTouches[i].identifier]) { changedTargetTouches.push(changedTouches[i]); } // cleanup removed touches if (type & (INPUT_END | INPUT_CANCEL)) { delete targetIds[changedTouches[i].identifier]; } i++; } if (!changedTargetTouches.length) { return; } return [ // merge targetTouches with changedTargetTouches so it contains ALL touches, including 'end' and 'cancel' uniqueArray(targetTouches.concat(changedTargetTouches), 'identifier', true), changedTargetTouches ]; } /** * Combined touch and mouse input * * Touch has a higher priority then mouse, and while touching no mouse events are allowed. * This because touch devices also emit mouse events while doing a touch. * * @constructor * @extends Input */ var DEDUP_TIMEOUT = 2500; var DEDUP_DISTANCE = 25; function TouchMouseInput() { Input.apply(this, arguments); var handler = bindFn(this.handler, this); this.touch = new TouchInput(this.manager, handler); this.mouse = new MouseInput(this.manager, handler); this.primaryTouch = null; this.lastTouches = []; } inherit(TouchMouseInput, Input, { /** * handle mouse and touch events * @param {Hammer} manager * @param {String} inputEvent * @param {Object} inputData */ handler: function TMEhandler(manager, inputEvent, inputData) { var isTouch = (inputData.pointerType == INPUT_TYPE_TOUCH), isMouse = (inputData.pointerType == INPUT_TYPE_MOUSE); if (isMouse && inputData.sourceCapabilities && inputData.sourceCapabilities.firesTouchEvents) { return; } // when we're in a touch event, record touches to de-dupe synthetic mouse event if (isTouch) { recordTouches.call(this, inputEvent, inputData); } else if (isMouse && isSyntheticEvent.call(this, inputData)) { return; } this.callback(manager, inputEvent, inputData); }, /** * remove the event listeners */ destroy: function destroy() { this.touch.destroy(); this.mouse.destroy(); } }); function recordTouches(eventType, eventData) { if (eventType & INPUT_START) { this.primaryTouch = eventData.changedPointers[0].identifier; setLastTouch.call(this, eventData); } else if (eventType & (INPUT_END | INPUT_CANCEL)) { setLastTouch.call(this, eventData); } } function setLastTouch(eventData) { var touch = eventData.changedPointers[0]; if (touch.identifier === this.primaryTouch) { var lastTouch = {x: touch.clientX, y: touch.clientY}; this.lastTouches.push(lastTouch); var lts = this.lastTouches; var removeLastTouch = function() { var i = lts.indexOf(lastTouch); if (i > -1) { lts.splice(i, 1); } }; setTimeout(removeLastTouch, DEDUP_TIMEOUT); } } function isSyntheticEvent(eventData) { var x = eventData.srcEvent.clientX, y = eventData.srcEvent.clientY; for (var i = 0; i < this.lastTouches.length; i++) { var t = this.lastTouches[i]; var dx = Math.abs(x - t.x), dy = Math.abs(y - t.y); if (dx <= DEDUP_DISTANCE && dy <= DEDUP_DISTANCE) { return true; } } return false; } var PREFIXED_TOUCH_ACTION = prefixed(TEST_ELEMENT.style, 'touchAction'); var NATIVE_TOUCH_ACTION = PREFIXED_TOUCH_ACTION !== undefined; // magical touchAction value var TOUCH_ACTION_COMPUTE = 'compute'; var TOUCH_ACTION_AUTO = 'auto'; var TOUCH_ACTION_MANIPULATION = 'manipulation'; // not implemented var TOUCH_ACTION_NONE = 'none'; var TOUCH_ACTION_PAN_X = 'pan-x'; var TOUCH_ACTION_PAN_Y = 'pan-y'; var TOUCH_ACTION_MAP = getTouchActionProps(); /** * Touch Action * sets the touchAction property or uses the js alternative * @param {Manager} manager * @param {String} value * @constructor */ function TouchAction(manager, value) { this.manager = manager; this.set(value); } TouchAction.prototype = { /** * set the touchAction value on the element or enable the polyfill * @param {String} value */ set: function(value) { // find out the touch-action by the event handlers if (value == TOUCH_ACTION_COMPUTE) { value = this.compute(); } if (NATIVE_TOUCH_ACTION && this.manager.element.style && TOUCH_ACTION_MAP[value]) { this.manager.element.style[PREFIXED_TOUCH_ACTION] = value; } this.actions = value.toLowerCase().trim(); }, /** * just re-set the touchAction value */ update: function() { this.set(this.manager.options.touchAction); }, /** * compute the value for the touchAction property based on the recognizer's settings * @returns {String} value */ compute: function() { var actions = []; each(this.manager.recognizers, function(recognizer) { if (boolOrFn(recognizer.options.enable, [recognizer])) { actions = actions.concat(recognizer.getTouchAction()); } }); return cleanTouchActions(actions.join(' ')); }, /** * this method is called on each input cycle and provides the preventing of the browser behavior * @param {Object} input */ preventDefaults: function(input) { var srcEvent = input.srcEvent; var direction = input.offsetDirection; // if the touch action did prevented once this session if (this.manager.session.prevented) { srcEvent.preventDefault(); return; } var actions = this.actions; var hasNone = inStr(actions, TOUCH_ACTION_NONE) && !TOUCH_ACTION_MAP[TOUCH_ACTION_NONE]; var hasPanY = inStr(actions, TOUCH_ACTION_PAN_Y) && !TOUCH_ACTION_MAP[TOUCH_ACTION_PAN_Y]; var hasPanX = inStr(actions, TOUCH_ACTION_PAN_X) && !TOUCH_ACTION_MAP[TOUCH_ACTION_PAN_X]; if (hasNone) { //do not prevent defaults if this is a tap gesture var isTapPointer = input.pointers.length === 1; var isTapMovement = input.distance < 2; var isTapTouchTime = input.deltaTime < 250; if (isTapPointer && isTapMovement && isTapTouchTime) { return; } } if (hasPanX && hasPanY) { // `pan-x pan-y` means browser handles all scrolling/panning, do not prevent return; } if (hasNone || (hasPanY && direction & DIRECTION_HORIZONTAL) || (hasPanX && direction & DIRECTION_VERTICAL)) { return this.preventSrc(srcEvent); } }, /** * call preventDefault to prevent the browser's default behavior (scrolling in most cases) * @param {Object} srcEvent */ preventSrc: function(srcEvent) { this.manager.session.prevented = true; srcEvent.preventDefault(); } }; /** * when the touchActions are collected they are not a valid value, so we need to clean things up. * * @param {String} actions * @returns {*} */ function cleanTouchActions(actions) { // none if (inStr(actions, TOUCH_ACTION_NONE)) { return TOUCH_ACTION_NONE; } var hasPanX = inStr(actions, TOUCH_ACTION_PAN_X); var hasPanY = inStr(actions, TOUCH_ACTION_PAN_Y); // if both pan-x and pan-y are set (different recognizers // for different directions, e.g. horizontal pan but vertical swipe?) // we need none (as otherwise with pan-x pan-y combined none of these // recognizers will work, since the browser would handle all panning if (hasPanX && hasPanY) { return TOUCH_ACTION_NONE; } // pan-x OR pan-y if (hasPanX || hasPanY) { return hasPanX ? TOUCH_ACTION_PAN_X : TOUCH_ACTION_PAN_Y; } // manipulation if (inStr(actions, TOUCH_ACTION_MANIPULATION)) { return TOUCH_ACTION_MANIPULATION; } return TOUCH_ACTION_AUTO; } function getTouchActionProps() { if (!NATIVE_TOUCH_ACTION) { return false; } var touchMap = {}; var cssSupports = window.CSS && window.CSS.supports; ['auto', 'manipulation', 'pan-y', 'pan-x', 'pan-x pan-y', 'none'].forEach(function(val) { // If css.supports is not supported but there is native touch-action assume it supports // all values. This is the case for IE 10 and 11. touchMap[val] = cssSupports ? window.CSS.supports('touch-action', val) : true; }); return touchMap; } /** * Recognizer flow explained; * * All recognizers have the initial state of POSSIBLE when a input session starts. * The definition of a input session is from the first input until the last input, with all it's movement in it. * * Example session for mouse-input: mousedown -> mousemove -> mouseup * * On each recognizing cycle (see Manager.recognize) the .recognize() method is executed * which determines with state it should be. * * If the recognizer has the state FAILED, CANCELLED or RECOGNIZED (equals ENDED), it is reset to * POSSIBLE to give it another change on the next cycle. * * Possible * | * +-----+---------------+ * | | * +-----+-----+ | * | | | * Failed Cancelled | * +-------+------+ * | | * Recognized Began * | * Changed * | * Ended/Recognized */ var STATE_POSSIBLE = 1; var STATE_BEGAN = 2; var STATE_CHANGED = 4; var STATE_ENDED = 8; var STATE_RECOGNIZED = STATE_ENDED; var STATE_CANCELLED = 16; var STATE_FAILED = 32; /** * Recognizer * Every recognizer needs to extend from this class. * @constructor * @param {Object} options */ function Recognizer(options) { this.options = assign({}, this.defaults, options || {}); this.id = uniqueId(); this.manager = null; // default is enable true this.options.enable = ifUndefined(this.options.enable, true); this.state = STATE_POSSIBLE; this.simultaneous = {}; this.requireFail = []; } Recognizer.prototype = { /** * @virtual * @type {Object} */ defaults: {}, /** * set options * @param {Object} options * @return {Recognizer} */ set: function(options) { assign(this.options, options); // also update the touchAction, in case something changed about the directions/enabled state this.manager && this.manager.touchAction.update(); return this; }, /** * recognize simultaneous with an other recognizer. * @param {Recognizer} otherRecognizer * @returns {Recognizer} this */ recognizeWith: function(otherRecognizer) { if (invokeArrayArg(otherRecognizer, 'recognizeWith', this)) { return this; } var simultaneous = this.simultaneous; otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this); if (!simultaneous[otherRecognizer.id]) { simultaneous[otherRecognizer.id] = otherRecognizer; otherRecognizer.recognizeWith(this); } return this; }, /** * drop the simultaneous link. it doesnt remove the link on the other recognizer. * @param {Recognizer} otherRecognizer * @returns {Recognizer} this */ dropRecognizeWith: function(otherRecognizer) { if (invokeArrayArg(otherRecognizer, 'dropRecognizeWith', this)) { return this; } otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this); delete this.simultaneous[otherRecognizer.id]; return this; }, /** * recognizer can only run when an other is failing * @param {Recognizer} otherRecognizer * @returns {Recognizer} this */ requireFailure: function(otherRecognizer) { if (invokeArrayArg(otherRecognizer, 'requireFailure', this)) { return this; } var requireFail = this.requireFail; otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this); if (inArray(requireFail, otherRecognizer) === -1) { requireFail.push(otherRecognizer); otherRecognizer.requireFailure(this); } return this; }, /** * drop the requireFailure link. it does not remove the link on the other recognizer. * @param {Recognizer} otherRecognizer * @returns {Recognizer} this */ dropRequireFailure: function(otherRecognizer) { if (invokeArrayArg(otherRecognizer, 'dropRequireFailure', this)) { return this; } otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this); var index = inArray(this.requireFail, otherRecognizer); if (index > -1) { this.requireFail.splice(index, 1); } return this; }, /** * has require failures boolean * @returns {boolean} */ hasRequireFailures: function() { return this.requireFail.length > 0; }, /** * if the recognizer can recognize simultaneous with an other recognizer * @param {Recognizer} otherRecognizer * @returns {Boolean} */ canRecognizeWith: function(otherRecognizer) { return !!this.simultaneous[otherRecognizer.id]; }, /** * You should use `tryEmit` instead of `emit` directly to check * that all the needed recognizers has failed before emitting. * @param {Object} input */ emit: function(input) { var self = this; var state = this.state; function emit(event) { self.manager.emit(event, input); } // 'panstart' and 'panmove' if (state < STATE_ENDED) { emit(self.options.event + stateStr(state)); } emit(self.options.event); // simple 'eventName' events if (input.additionalEvent) { // additional event(panleft, panright, pinchin, pinchout...) emit(input.additionalEvent); } // panend and pancancel if (state >= STATE_ENDED) { emit(self.options.event + stateStr(state)); } }, /** * Check that all the require failure recognizers has failed, * if true, it emits a gesture event, * otherwise, setup the state to FAILED. * @param {Object} input */ tryEmit: function(input) { if (this.canEmit()) { return this.emit(input); } // it's failing anyway this.state = STATE_FAILED; }, /** * can we emit? * @returns {boolean} */ canEmit: function() { var i = 0; while (i < this.requireFail.length) { if (!(this.requireFail[i].state & (STATE_FAILED | STATE_POSSIBLE))) { return false; } i++; } return true; }, /** * update the recognizer * @param {Object} inputData */ recognize: function(inputData) { // make a new copy of the inputData // so we can change the inputData without messing up the other recognizers var inputDataClone = assign({}, inputData); // is is enabled and allow recognizing? if (!boolOrFn(this.options.enable, [this, inputDataClone])) { this.reset(); this.state = STATE_FAILED; return; } // reset when we've reached the end if (this.state & (STATE_RECOGNIZED | STATE_CANCELLED | STATE_FAILED)) { this.state = STATE_POSSIBLE; } this.state = this.process(inputDataClone); // the recognizer has recognized a gesture // so trigger an event if (this.state & (STATE_BEGAN | STATE_CHANGED | STATE_ENDED | STATE_CANCELLED)) { this.tryEmit(inputDataClone); } }, /** * return the state of the recognizer * the actual recognizing happens in this method * @virtual * @param {Object} inputData * @returns {Const} STATE */ process: function(inputData) { }, // jshint ignore:line /** * return the preferred touch-action * @virtual * @returns {Array} */ getTouchAction: function() { }, /** * called when the gesture isn't allowed to recognize * like when another is being recognized or it is disabled * @virtual */ reset: function() { } }; /** * get a usable string, used as event postfix * @param {Const} state * @returns {String} state */ function stateStr(state) { if (state & STATE_CANCELLED) { return 'cancel'; } else if (state & STATE_ENDED) { return 'end'; } else if (state & STATE_CHANGED) { return 'move'; } else if (state & STATE_BEGAN) { return 'start'; } return ''; } /** * direction cons to string * @param {Const} direction * @returns {String} */ function directionStr(direction) { if (direction == DIRECTION_DOWN) { return 'down'; } else if (direction == DIRECTION_UP) { return 'up'; } else if (direction == DIRECTION_LEFT) { return 'left'; } else if (direction == DIRECTION_RIGHT) { return 'right'; } return ''; } /** * get a recognizer by name if it is bound to a manager * @param {Recognizer|String} otherRecognizer * @param {Recognizer} recognizer * @returns {Recognizer} */ function getRecognizerByNameIfManager(otherRecognizer, recognizer) { var manager = recognizer.manager; if (manager) { return manager.get(otherRecognizer); } return otherRecognizer; } /** * This recognizer is just used as a base for the simple attribute recognizers. * @constructor * @extends Recognizer */ function AttrRecognizer() { Recognizer.apply(this, arguments); } inherit(AttrRecognizer, Recognizer, { /** * @namespace * @memberof AttrRecognizer */ defaults: { /** * @type {Number} * @default 1 */ pointers: 1 }, /** * Used to check if it the recognizer receives valid input, like input.distance > 10. * @memberof AttrRecognizer * @param {Object} input * @returns {Boolean} recognized */ attrTest: function(input) { var optionPointers = this.options.pointers; return optionPointers === 0 || input.pointers.length === optionPointers; }, /** * Process the input and return the state for the recognizer * @memberof AttrRecognizer * @param {Object} input * @returns {*} State */ process: function(input) { var state = this.state; var eventType = input.eventType; var isRecognized = state & (STATE_BEGAN | STATE_CHANGED); var isValid = this.attrTest(input); // on cancel input and we've recognized before, return STATE_CANCELLED if (isRecognized && (eventType & INPUT_CANCEL || !isValid)) { return state | STATE_CANCELLED; } else if (isRecognized || isValid) { if (eventType & INPUT_END) { return state | STATE_ENDED; } else if (!(state & STATE_BEGAN)) { return STATE_BEGAN; } return state | STATE_CHANGED; } return STATE_FAILED; } }); /** * Pan * Recognized when the pointer is down and moved in the allowed direction. * @constructor * @extends AttrRecognizer */ function PanRecognizer() { AttrRecognizer.apply(this, arguments); this.pX = null; this.pY = null; } inherit(PanRecognizer, AttrRecognizer, { /** * @namespace * @memberof PanRecognizer */ defaults: { event: 'pan', threshold: 10, pointers: 1, direction: DIRECTION_ALL }, getTouchAction: function() { var direction = this.options.direction; var actions = []; if (direction & DIRECTION_HORIZONTAL) { actions.push(TOUCH_ACTION_PAN_Y); } if (direction & DIRECTION_VERTICAL) { actions.push(TOUCH_ACTION_PAN_X); } return actions; }, directionTest: function(input) { var options = this.options; var hasMoved = true; var distance = input.distance; var direction = input.direction; var x = input.deltaX; var y = input.deltaY; // lock to axis? if (!(direction & options.direction)) { if (options.direction & DIRECTION_HORIZONTAL) { direction = (x === 0) ? DIRECTION_NONE : (x < 0) ? DIRECTION_LEFT : DIRECTION_RIGHT; hasMoved = x != this.pX; distance = Math.abs(input.deltaX); } else { direction = (y === 0) ? DIRECTION_NONE : (y < 0) ? DIRECTION_UP : DIRECTION_DOWN; hasMoved = y != this.pY; distance = Math.abs(input.deltaY); } } input.direction = direction; return hasMoved && distance > options.threshold && direction & options.direction; }, attrTest: function(input) { return AttrRecognizer.prototype.attrTest.call(this, input) && (this.state & STATE_BEGAN || (!(this.state & STATE_BEGAN) && this.directionTest(input))); }, emit: function(input) { this.pX = input.deltaX; this.pY = input.deltaY; var direction = directionStr(input.direction); if (direction) { input.additionalEvent = this.options.event + direction; } this._super.emit.call(this, input); } }); /** * Pinch * Recognized when two or more pointers are moving toward (zoom-in) or away from each other (zoom-out). * @constructor * @extends AttrRecognizer */ function PinchRecognizer() { AttrRecognizer.apply(this, arguments); } inherit(PinchRecognizer, AttrRecognizer, { /** * @namespace * @memberof PinchRecognizer */ defaults: { event: 'pinch', threshold: 0, pointers: 2 }, getTouchAction: function() { return [TOUCH_ACTION_NONE]; }, attrTest: function(input) { return this._super.attrTest.call(this, input) && (Math.abs(input.scale - 1) > this.options.threshold || this.state & STATE_BEGAN); }, emit: function(input) { if (input.scale !== 1) { var inOut = input.scale < 1 ? 'in' : 'out'; input.additionalEvent = this.options.event + inOut; } this._super.emit.call(this, input); } }); /** * Press * Recognized when the pointer is down for x ms without any movement. * @constructor * @extends Recognizer */ function PressRecognizer() { Recognizer.apply(this, arguments); this._timer = null; this._input = null; } inherit(PressRecognizer, Recognizer, { /** * @namespace * @memberof PressRecognizer */ defaults: { event: 'press', pointers: 1, time: 251, // minimal time of the pointer to be pressed threshold: 9 // a minimal movement is ok, but keep it low }, getTouchAction: function() { return [TOUCH_ACTION_AUTO]; }, process: function(input) { var options = this.options; var validPointers = input.pointers.length === options.pointers; var validMovement = input.distance < options.threshold; var validTime = input.deltaTime > options.time; this._input = input; // we only allow little movement // and we've reached an end event, so a tap is possible if (!validMovement || !validPointers || (input.eventType & (INPUT_END | INPUT_CANCEL) && !validTime)) { this.reset(); } else if (input.eventType & INPUT_START) { this.reset(); this._timer = setTimeoutContext(function() { this.state = STATE_RECOGNIZED; this.tryEmit(); }, options.time, this); } else if (input.eventType & INPUT_END) { return STATE_RECOGNIZED; } return STATE_FAILED; }, reset: function() { clearTimeout(this._timer); }, emit: function(input) { if (this.state !== STATE_RECOGNIZED) { return; } if (input && (input.eventType & INPUT_END)) { this.manager.emit(this.options.event + 'up', input); } else { this._input.timeStamp = now(); this.manager.emit(this.options.event, this._input); } } }); /** * Rotate * Recognized when two or more pointer are moving in a circular motion. * @constructor * @extends AttrRecognizer */ function RotateRecognizer() { AttrRecognizer.apply(this, arguments); } inherit(RotateRecognizer, AttrRecognizer, { /** * @namespace * @memberof RotateRecognizer */ defaults: { event: 'rotate', threshold: 0, pointers: 2 }, getTouchAction: function() { return [TOUCH_ACTION_NONE]; }, attrTest: function(input) { return this._super.attrTest.call(this, input) && (Math.abs(input.rotation) > this.options.threshold || this.state & STATE_BEGAN); } }); /** * Swipe * Recognized when the pointer is moving fast (velocity), with enough distance in the allowed direction. * @constructor * @extends AttrRecognizer */ function SwipeRecognizer() { AttrRecognizer.apply(this, arguments); } inherit(SwipeRecognizer, AttrRecognizer, { /** * @namespace * @memberof SwipeRecognizer */ defaults: { event: 'swipe', threshold: 10, velocity: 0.3, direction: DIRECTION_HORIZONTAL | DIRECTION_VERTICAL, pointers: 1 }, getTouchAction: function() { return PanRecognizer.prototype.getTouchAction.call(this); }, attrTest: function(input) { var direction = this.options.direction; var velocity; if (direction & (DIRECTION_HORIZONTAL | DIRECTION_VERTICAL)) { velocity = input.overallVelocity; } else if (direction & DIRECTION_HORIZONTAL) { velocity = input.overallVelocityX; } else if (direction & DIRECTION_VERTICAL) { velocity = input.overallVelocityY; } return this._super.attrTest.call(this, input) && direction & input.offsetDirection && input.distance > this.options.threshold && input.maxPointers == this.options.pointers && abs(velocity) > this.options.velocity && input.eventType & INPUT_END; }, emit: function(input) { var direction = directionStr(input.offsetDirection); if (direction) { this.manager.emit(this.options.event + direction, input); } this.manager.emit(this.options.event, input); } }); /** * A tap is ecognized when the pointer is doing a small tap/click. Multiple taps are recognized if they occur * between the given interval and position. The delay option can be used to recognize multi-taps without firing * a single tap. * * The eventData from the emitted event contains the property `tapCount`, which contains the amount of * multi-taps being recognized. * @constructor * @extends Recognizer */ function TapRecognizer() { Recognizer.apply(this, arguments); // previous time and center, // used for tap counting this.pTime = false; this.pCenter = false; this._timer = null; this._input = null; this.count = 0; } inherit(TapRecognizer, Recognizer, { /** * @namespace * @memberof PinchRecognizer */ defaults: { event: 'tap', pointers: 1, taps: 1, interval: 300, // max time between the multi-tap taps time: 250, // max time of the pointer to be down (like finger on the screen) threshold: 9, // a minimal movement is ok, but keep it low posThreshold: 10 // a multi-tap can be a bit off the initial position }, getTouchAction: function() { return [TOUCH_ACTION_MANIPULATION]; }, process: function(input) { var options = this.options; var validPointers = input.pointers.length === options.pointers; var validMovement = input.distance < options.threshold; var validTouchTime = input.deltaTime < options.time; this.reset(); if ((input.eventType & INPUT_START) && (this.count === 0)) { return this.failTimeout(); } // we only allow little movement // and we've reached an end event, so a tap is possible if (validMovement && validTouchTime && validPointers) { if (input.eventType != INPUT_END) { return this.failTimeout(); } var validInterval = this.pTime ? (input.timeStamp - this.pTime < options.interval) : true; var validMultiTap = !this.pCenter || getDistance(this.pCenter, input.center) < options.posThreshold; this.pTime = input.timeStamp; this.pCenter = input.center; if (!validMultiTap || !validInterval) { this.count = 1; } else { this.count += 1; } this._input = input; // if tap count matches we have recognized it, // else it has began recognizing... var tapCount = this.count % options.taps; if (tapCount === 0) { // no failing requirements, immediately trigger the tap event // or wait as long as the multitap interval to trigger if (!this.hasRequireFailures()) { return STATE_RECOGNIZED; } else { this._timer = setTimeoutContext(function() { this.state = STATE_RECOGNIZED; this.tryEmit(); }, options.interval, this); return STATE_BEGAN; } } } return STATE_FAILED; }, failTimeout: function() { this._timer = setTimeoutContext(function() { this.state = STATE_FAILED; }, this.options.interval, this); return STATE_FAILED; }, reset: function() { clearTimeout(this._timer); }, emit: function() { if (this.state == STATE_RECOGNIZED) { this._input.tapCount = this.count; this.manager.emit(this.options.event, this._input); } } }); /** * Simple way to create a manager with a default set of recognizers. * @param {HTMLElement} element * @param {Object} [options] * @constructor */ function Hammer(element, options) { options = options || {}; options.recognizers = ifUndefined(options.recognizers, Hammer.defaults.preset); return new Manager(element, options); } /** * @const {string} */ Hammer.VERSION = '2.0.8'; /** * default settings * @namespace */ Hammer.defaults = { /** * set if DOM events are being triggered. * But this is slower and unused by simple implementations, so disabled by default. * @type {Boolean} * @default false */ domEvents: false, /** * The value for the touchAction property/fallback. * When set to `compute` it will magically set the correct value based on the added recognizers. * @type {String} * @default compute */ touchAction: TOUCH_ACTION_COMPUTE, /** * @type {Boolean} * @default true */ enable: true, /** * EXPERIMENTAL FEATURE -- can be removed/changed * Change the parent input target element. * If Null, then it is being set the to main element. * @type {Null|EventTarget} * @default null */ inputTarget: null, /** * force an input class * @type {Null|Function} * @default null */ inputClass: null, /** * Default recognizer setup when calling `Hammer()` * When creating a new Manager these will be skipped. * @type {Array} */ preset: [ // RecognizerClass, options, [recognizeWith, ...], [requireFailure, ...] [RotateRecognizer, {enable: false}], [PinchRecognizer, {enable: false}, ['rotate']], [SwipeRecognizer, {direction: DIRECTION_HORIZONTAL}], [PanRecognizer, {direction: DIRECTION_HORIZONTAL}, ['swipe']], [TapRecognizer], [TapRecognizer, {event: 'doubletap', taps: 2}, ['tap']], [PressRecognizer] ], /** * Some CSS properties can be used to improve the working of Hammer. * Add them to this method and they will be set when creating a new Manager. * @namespace */ cssProps: { /** * Disables text selection to improve the dragging gesture. Mainly for desktop browsers. * @type {String} * @default 'none' */ userSelect: 'none', /** * Disable the Windows Phone grippers when pressing an element. * @type {String} * @default 'none' */ touchSelect: 'none', /** * Disables the default callout shown when you touch and hold a touch target. * On iOS, when you touch and hold a touch target such as a link, Safari displays * a callout containing information about the link. This property allows you to disable that callout. * @type {String} * @default 'none' */ touchCallout: 'none', /** * Specifies whether zooming is enabled. Used by IE10> * @type {String} * @default 'none' */ contentZooming: 'none', /** * Specifies that an entire element should be draggable instead of its contents. Mainly for desktop browsers. * @type {String} * @default 'none' */ userDrag: 'none', /** * Overrides the highlight color shown when the user taps a link or a JavaScript * clickable element in iOS. This property obeys the alpha value, if specified. * @type {String} * @default 'rgba(0,0,0,0)' */ tapHighlightColor: 'rgba(0,0,0,0)' } }; var STOP = 1; var FORCED_STOP = 2; /** * Manager * @param {HTMLElement} element * @param {Object} [options] * @constructor */ function Manager(element, options) { this.options = assign({}, Hammer.defaults, options || {}); this.options.inputTarget = this.options.inputTarget || element; this.handlers = {}; this.session = {}; this.recognizers = []; this.oldCssProps = {}; this.element = element; this.input = createInputInstance(this); this.touchAction = new TouchAction(this, this.options.touchAction); toggleCssProps(this, true); each(this.options.recognizers, function(item) { var recognizer = this.add(new (item[0])(item[1])); item[2] && recognizer.recognizeWith(item[2]); item[3] && recognizer.requireFailure(item[3]); }, this); } Manager.prototype = { /** * set options * @param {Object} options * @returns {Manager} */ set: function(options) { assign(this.options, options); // Options that need a little more setup if (options.touchAction) { this.touchAction.update(); } if (options.inputTarget) { // Clean up existing event listeners and reinitialize this.input.destroy(); this.input.target = options.inputTarget; this.input.init(); } return this; }, /** * stop recognizing for this session. * This session will be discarded, when a new [input]start event is fired. * When forced, the recognizer cycle is stopped immediately. * @param {Boolean} [force] */ stop: function(force) { this.session.stopped = force ? FORCED_STOP : STOP; }, /** * run the recognizers! * called by the inputHandler function on every movement of the pointers (touches) * it walks through all the recognizers and tries to detect the gesture that is being made * @param {Object} inputData */ recognize: function(inputData) { var session = this.session; if (session.stopped) { return; } // run the touch-action polyfill this.touchAction.preventDefaults(inputData); var recognizer; var recognizers = this.recognizers; // this holds the recognizer that is being recognized. // so the recognizer's state needs to be BEGAN, CHANGED, ENDED or RECOGNIZED // if no recognizer is detecting a thing, it is set to `null` var curRecognizer = session.curRecognizer; // reset when the last recognizer is recognized // or when we're in a new session if (!curRecognizer || (curRecognizer && curRecognizer.state & STATE_RECOGNIZED)) { curRecognizer = session.curRecognizer = null; } var i = 0; while (i < recognizers.length) { recognizer = recognizers[i]; // find out if we are allowed try to recognize the input for this one. // 1. allow if the session is NOT forced stopped (see the .stop() method) // 2. allow if we still haven't recognized a gesture in this session, or the this recognizer is the one // that is being recognized. // 3. allow if the recognizer is allowed to run simultaneous with the current recognized recognizer. // this can be setup with the `recognizeWith()` method on the recognizer. if (session.stopped !== FORCED_STOP && ( // 1 !curRecognizer || recognizer == curRecognizer || // 2 recognizer.canRecognizeWith(curRecognizer))) { // 3 recognizer.recognize(inputData); } else { recognizer.reset(); } // if the recognizer has been recognizing the input as a valid gesture, we want to store this one as the // current active recognizer. but only if we don't already have an active recognizer if (!curRecognizer && recognizer.state & (STATE_BEGAN | STATE_CHANGED | STATE_ENDED)) { curRecognizer = session.curRecognizer = recognizer; } i++; } }, /** * get a recognizer by its event name. * @param {Recognizer|String} recognizer * @returns {Recognizer|Null} */ get: function(recognizer) { if (recognizer instanceof Recognizer) { return recognizer; } var recognizers = this.recognizers; for (var i = 0; i < recognizers.length; i++) { if (recognizers[i].options.event == recognizer) { return recognizers[i]; } } return null; }, /** * add a recognizer to the manager * existing recognizers with the same event name will be removed * @param {Recognizer} recognizer * @returns {Recognizer|Manager} */ add: function(recognizer) { if (invokeArrayArg(recognizer, 'add', this)) { return this; } // remove existing var existing = this.get(recognizer.options.event); if (existing) { this.remove(existing); } this.recognizers.push(recognizer); recognizer.manager = this; this.touchAction.update(); return recognizer; }, /** * remove a recognizer by name or instance * @param {Recognizer|String} recognizer * @returns {Manager} */ remove: function(recognizer) { if (invokeArrayArg(recognizer, 'remove', this)) { return this; } recognizer = this.get(recognizer); // let's make sure this recognizer exists if (recognizer) { var recognizers = this.recognizers; var index = inArray(recognizers, recognizer); if (index !== -1) { recognizers.splice(index, 1); this.touchAction.update(); } } return this; }, /** * bind event * @param {String} events * @param {Function} handler * @returns {EventEmitter} this */ on: function(events, handler) { if (events === undefined) { return; } if (handler === undefined) { return; } var handlers = this.handlers; each(splitStr(events), function(event) { handlers[event] = handlers[event] || []; handlers[event].push(handler); }); return this; }, /** * unbind event, leave emit blank to remove all handlers * @param {String} events * @param {Function} [handler] * @returns {EventEmitter} this */ off: function(events, handler) { if (events === undefined) { return; } var handlers = this.handlers; each(splitStr(events), function(event) { if (!handler) { delete handlers[event]; } else { handlers[event] && handlers[event].splice(inArray(handlers[event], handler), 1); } }); return this; }, /** * emit event to the listeners * @param {String} event * @param {Object} data */ emit: function(event, data) { // we also want to trigger dom events if (this.options.domEvents) { triggerDomEvent(event, data); } // no handlers, so skip it all var handlers = this.handlers[event] && this.handlers[event].slice(); if (!handlers || !handlers.length) { return; } data.type = event; data.preventDefault = function() { data.srcEvent.preventDefault(); }; var i = 0; while (i < handlers.length) { handlers[i](data); i++; } }, /** * destroy the manager and unbinds all events * it doesn't unbind dom events, that is the user own responsibility */ destroy: function() { this.element && toggleCssProps(this, false); this.handlers = {}; this.session = {}; this.input.destroy(); this.element = null; } }; /** * add/remove the css properties as defined in manager.options.cssProps * @param {Manager} manager * @param {Boolean} add */ function toggleCssProps(manager, add) { var element = manager.element; if (!element.style) { return; } var prop; each(manager.options.cssProps, function(value, name) { prop = prefixed(element.style, name); if (add) { manager.oldCssProps[prop] = element.style[prop]; element.style[prop] = value; } else { element.style[prop] = manager.oldCssProps[prop] || ''; } }); if (!add) { manager.oldCssProps = {}; } } /** * trigger dom event * @param {String} event * @param {Object} data */ function triggerDomEvent(event, data) { var gestureEvent = document.createEvent('Event'); gestureEvent.initEvent(event, true, true); gestureEvent.gesture = data; data.target.dispatchEvent(gestureEvent); } assign(Hammer, { INPUT_START: INPUT_START, INPUT_MOVE: INPUT_MOVE, INPUT_END: INPUT_END, INPUT_CANCEL: INPUT_CANCEL, STATE_POSSIBLE: STATE_POSSIBLE, STATE_BEGAN: STATE_BEGAN, STATE_CHANGED: STATE_CHANGED, STATE_ENDED: STATE_ENDED, STATE_RECOGNIZED: STATE_RECOGNIZED, STATE_CANCELLED: STATE_CANCELLED, STATE_FAILED: STATE_FAILED, DIRECTION_NONE: DIRECTION_NONE, DIRECTION_LEFT: DIRECTION_LEFT, DIRECTION_RIGHT: DIRECTION_RIGHT, DIRECTION_UP: DIRECTION_UP, DIRECTION_DOWN: DIRECTION_DOWN, DIRECTION_HORIZONTAL: DIRECTION_HORIZONTAL, DIRECTION_VERTICAL: DIRECTION_VERTICAL, DIRECTION_ALL: DIRECTION_ALL, Manager: Manager, Input: Input, TouchAction: TouchAction, TouchInput: TouchInput, MouseInput: MouseInput, PointerEventInput: PointerEventInput, TouchMouseInput: TouchMouseInput, SingleTouchInput: SingleTouchInput, Recognizer: Recognizer, AttrRecognizer: AttrRecognizer, Tap: TapRecognizer, Pan: PanRecognizer, Swipe: SwipeRecognizer, Pinch: PinchRecognizer, Rotate: RotateRecognizer, Press: PressRecognizer, on: addEventListeners, off: removeEventListeners, each: each, merge: merge, extend: extend, assign: assign, inherit: inherit, bindFn: bindFn, prefixed: prefixed }); // this prevents errors when Hammer is loaded in the presence of an AMD // style loader but by script tag, not by the loader. var freeGlobal = (typeof window !== 'undefined' ? window : (typeof self !== 'undefined' ? self : {})); // jshint ignore:line freeGlobal.Hammer = Hammer; if (typeof define === 'function' && define.amd) { define(function() { return Hammer; }); } else if (typeof module != 'undefined' && module.exports) { module.exports = Hammer; } else { window[exportName] = Hammer; } })(window, document, 'Hammer'); + function($) { "use strict"; var defaults; $.modal = function(params, onOpen) { params = $.extend({}, defaults, params); var buttons = params.buttons; var buttonsHtml = buttons.map(function(d, i) { return '' + d.text + ''; }).join(""); var tpl = '
' + '
' + params.title + '
' + ( params.text ? '
'+params.text+'
' : '')+ '
' + buttonsHtml + '
' + '
'; var dialog = $.openModal(tpl, onOpen); dialog.find(".weui-dialog__btn").each(function(i, e) { var el = $(e); el.click(function() { //先关闭对话框,再调用回调函数 if(params.autoClose) $.closeModal(); if(buttons[i].onClick) { buttons[i].onClick.call(dialog); } }); }); return dialog; }; $.openModal = function(tpl, onOpen) { var mask = $("
").appendTo(document.body); mask.show(); var dialog = $(tpl).appendTo(document.body); if (onOpen) { dialog.transitionEnd(function () { onOpen.call(dialog); }); } dialog.show(); mask.addClass("weui-mask--visible"); dialog.addClass("weui-dialog--visible"); return dialog; } $.closeModal = function() { $(".weui-mask--visible").removeClass("weui-mask--visible").transitionEnd(function() { $(this).remove(); }); $(".weui-dialog--visible").removeClass("weui-dialog--visible").transitionEnd(function() { $(this).remove(); }); }; $.alert = function(text, title, onOK) { var config; if (typeof text === 'object') { config = text; } else { if (typeof title === 'function') { onOK = arguments[1]; title = undefined; } config = { text: text, title: title, onOK: onOK } } return $.modal({ text: config.text, title: config.title, buttons: [{ text: defaults.buttonOK, className: "primary", onClick: config.onOK }] }); } $.confirm = function(text, title, onOK, onCancel) { var config; if (typeof text === 'object') { config = text } else { if (typeof title === 'function') { onCancel = arguments[2]; onOK = arguments[1]; title = undefined; } config = { text: text, title: title, onOK: onOK, onCancel: onCancel } } return $.modal({ text: config.text, title: config.title, buttons: [ { text: defaults.buttonCancel, className: "default", onClick: config.onCancel }, { text: defaults.buttonOK, className: "primary", onClick: config.onOK }] }); }; //如果参数过多,建议通过 config 对象进行配置,而不是传入多个参数。 $.prompt = function(text, title, onOK, onCancel, input) { var config; if (typeof text === 'object') { config = text; } else { if (typeof title === 'function') { input = arguments[3]; onCancel = arguments[2]; onOK = arguments[1]; title = undefined; } config = { text: text, title: title, input: input, onOK: onOK, onCancel: onCancel, empty: false //allow empty } } var modal = $.modal({ text: '

'+(config.text || '')+'

', title: config.title, autoClose: false, buttons: [ { text: defaults.buttonCancel, className: "default", onClick: function () { $.closeModal(); config.onCancel && config.onCancel.call(modal); } }, { text: defaults.buttonOK, className: "primary", onClick: function() { var input = $("#weui-prompt-input").val(); if (!config.empty && (input === "" || input === null)) { modal.find('.weui-prompt-input').focus()[0].select(); return false; } $.closeModal(); config.onOK && config.onOK.call(modal, input); } }] }, function () { this.find('.weui-prompt-input').focus()[0].select(); }); return modal; }; //如果参数过多,建议通过 config 对象进行配置,而不是传入多个参数。 $.login = function(text, title, onOK, onCancel, username, password) { var config; if (typeof text === 'object') { config = text; } else { if (typeof title === 'function') { password = arguments[4]; username = arguments[3]; onCancel = arguments[2]; onOK = arguments[1]; title = undefined; } config = { text: text, title: title, username: username, password: password, onOK: onOK, onCancel: onCancel } } var modal = $.modal({ text: '

'+(config.text || '')+'

' + '' + '', title: config.title, autoClose: false, buttons: [ { text: defaults.buttonCancel, className: "default", onClick: function () { $.closeModal(); config.onCancel && config.onCancel.call(modal); } }, { text: defaults.buttonOK, className: "primary", onClick: function() { var username = $("#weui-prompt-username").val(); var password = $("#weui-prompt-password").val(); if (!config.empty && (username === "" || username === null)) { modal.find('#weui-prompt-username').focus()[0].select(); return false; } if (!config.empty && (password === "" || password === null)) { modal.find('#weui-prompt-password').focus()[0].select(); return false; } $.closeModal(); config.onOK && config.onOK.call(modal, username, password); } }] }, function () { this.find('#weui-prompt-username').focus()[0].select(); }); return modal; }; defaults = $.modal.prototype.defaults = { title: "提示", text: undefined, buttonOK: "确定", buttonCancel: "取消", buttons: [{ text: "确定", className: "primary" }], autoClose: true //点击按钮自动关闭对话框,如果你不希望点击按钮就关闭对话框,可以把这个设置为false }; }($); + function($) { "use strict"; var defaults; var show = function(html, className) { className = className || ""; var mask = $("
").appendTo(document.body); var tpl = '
' + html + '
'; var dialog = $(tpl).appendTo(document.body); dialog.addClass("weui-toast--visible"); dialog.show(); }; var hide = function(callback) { $(".weui-mask_transparent").remove(); var done = false; var $el = $(".weui-toast--visible").removeClass("weui-toast--visible").transitionEnd(function() { var $this = $(this); $this.remove(); callback && callback(); done = true }); setTimeout(function () { if (!done) { $el.remove() callback && callback(); } }, 1000) } $.toast = function(text, style, callback) { if(typeof style === "function") { callback = style; } var className, iconClassName = 'weui-icon-success-no-circle'; var duration = toastDefaults.duration; if(style == "cancel") { className = "weui-toast_cancel"; iconClassName = 'weui-icon-cancel' } else if(style == "forbidden") { className = "weui-toast--forbidden"; iconClassName = 'weui-icon-warn' } else if(style == "text") { className = "weui-toast--text"; } else if(typeof style === typeof 1) { duration = style } show('

' + (text || "已经完成") + '

', className); setTimeout(function() { hide(callback); }, duration); } $.showLoading = function(text) { var html = '
'; html += ''; html += '
'; html += '

' + (text || "数据加载中") + '

'; show(html, 'weui_loading_toast'); } $.hideLoading = function() { hide(); } var toastDefaults = $.toast.prototype.defaults = { duration: 2500 } }($); + function($) { "use strict"; var defaults; var show = function(params) { var mask = $("
").appendTo(document.body); var actions = params.actions || []; var actionsHtml = actions.map(function(d, i) { return '
' + d.text + '
'; }).join(""); var titleHtml = ""; if (params.title) { titleHtml = '

' + params.title + '

'; } var tpl = '
'+ titleHtml + '
'+ actionsHtml + '
'+ '
'+ '
取消
'+ '
'+ '
'; var dialog = $(tpl).appendTo(document.body); dialog.find(".weui-actionsheet__menu .weui-actionsheet__cell, .weui-actionsheet__action .weui-actionsheet__cell").each(function(i, e) { $(e).click(function() { $.closeActions(); params.onClose && params.onClose(); if(actions[i] && actions[i].onClick) { actions[i].onClick(); } }) }); mask.show(); dialog.show(); mask.addClass("weui-mask--visible"); dialog.addClass("weui-actionsheet_toggle"); }; var hide = function() { $(".weui-mask").removeClass("weui-mask--visible").transitionEnd(function() { $(this).remove(); }); $(".weui-actionsheet").removeClass("weui-actionsheet_toggle").transitionEnd(function() { $(this).remove(); }); } $.actions = function(params) { params = $.extend({}, defaults, params); show(params); } $.closeActions = function() { hide(); } $(document).on("click", ".weui-actions_mask", function() { $.closeActions(); }); var defaults = $.actions.prototype.defaults = { title: undefined, onClose: undefined, /*actions: [{ text: "菜单", className: "color-danger", onClick: function() { console.log(1); } },{ text: "菜单2", className: "color-success", onClick: function() { console.log(2); } }]*/ } }($); /* =============================================================================== ************ Pull to refreh ************ =============================================================================== */ /* global $:true */ +function ($) { "use strict"; var PTR = function(el, opt) { if (typeof opt === typeof function () {}) { opt = { onRefresh: opt } } if (typeof opt === typeof 'a') { opt = undefined } this.opt = $.extend(PTR.defaults, opt || {}); this.container = $(el); this.attachEvents(); } PTR.defaults = { distance: 50, onRefresh: undefined, onPull: undefined } PTR.prototype.touchStart = function(e) { if(this.container.hasClass("refreshing")) return; var p = $.getTouchPosition(e); this.start = p; this.diffX = this.diffY = 0; }; PTR.prototype.touchMove= function(e) { if(this.container.hasClass("refreshing")) return; if(!this.start) return false; if(this.container.scrollTop() > 0) return; var p = $.getTouchPosition(e); this.diffX = p.x - this.start.x; this.diffY = p.y - this.start.y; if (Math.abs(this.diffX) > Math.abs(this.diffY)) return true; // 说明是左右方向的拖动 if(this.diffY < 0) return; this.container.addClass("touching"); e.preventDefault(); e.stopPropagation(); this.diffY = Math.pow(this.diffY, 0.75); this.container.css("transform", "translate3d(0, "+this.diffY+"px, 0)"); this.triggerPull(this.diffY) }; PTR.prototype.touchEnd = function() { this.start = false; if(this.diffY <= 0 || this.container.hasClass("refreshing")) return; this.container.removeClass("touching"); this.container.removeClass("pull-down pull-up"); this.container.css("transform", ""); if(Math.abs(this.diffY) <= this.opt.distance) { } else { this.triggerPullToRefresh(); } }; PTR.prototype.triggerPullToRefresh = function() { this.triggerPull(this.opt.distance) this.container.removeClass('pull-up').addClass("refreshing"); if (this.opt.onRefresh) { this.opt.onRefresh.call(this) } this.container.trigger("pull-to-refresh"); } PTR.prototype.triggerPull = function(diffY) { if(diffY < this.opt.distance) { this.container.removeClass("pull-up").addClass("pull-down"); } else { this.container.removeClass("pull-down").addClass("pull-up"); } if (this.opt.onPull) { this.opt.onPull.call(this, Math.floor(diffY / this.opt.distance * 100)) } this.container.trigger("pull"); } PTR.prototype.pullToRefreshDone = function() { this.container.removeClass("refreshing"); } PTR.prototype.attachEvents = function() { var el = this.container; el.addClass("weui-pull-to-refresh"); el.on($.touchEvents.start, $.proxy(this.touchStart, this)); el.on($.touchEvents.move, $.proxy(this.touchMove, this)); el.on($.touchEvents.end, $.proxy(this.touchEnd, this)); }; var pullToRefreshDone = function(el) { $(el).removeClass("refreshing"); } $.fn.pullToRefresh = function(opt) { return this.each(function() { var $this = $(this) var ptr = $this.data('ptr') if (!ptr) $this.data('ptr', ptr = new PTR(this, opt)) if (typeof opt === typeof 'a') { ptr[opt].call(ptr) } }); } $.fn.pullToRefreshDone = function() { return this.each(function() { pullToRefreshDone(this); }); } }($); /* =============================================================================== ************ Infinite ************ =============================================================================== */ /* global $:true */ +function ($) { "use strict"; // fix https://github.com/lihongxun945/jquery-weui/issues/442 // chrome will always return 0, when use document.body.scrollTop // https://stackoverflow.com/questions/43717316/google-chrome-document-body-scrolltop-always-returns-0 var getOffset = function (container) { var tagName = container[0].tagName.toUpperCase() var scrollTop if (tagName === 'BODY' || tagName === 'HTML') { scrollTop = container.scrollTop() || $(window).scrollTop() } else { scrollTop = container.scrollTop() } var offset = container.scrollHeight() - ($(window).height() + scrollTop) console.log(offset) return offset } var Infinite = function(el, distance) { this.container = $(el); this.container.data("infinite", this); this.distance = distance || 50; this.attachEvents(); } Infinite.prototype.scroll = function() { var container = this.container; this._check(); } Infinite.prototype.attachEvents = function(off) { var el = this.container; var scrollContainer = (el[0].tagName.toUpperCase() === "BODY" ? $(document) : el); scrollContainer[off ? "off" : "on"]("scroll", $.proxy(this.scroll, this)); }; Infinite.prototype.detachEvents = function(off) { this.attachEvents(true); } Infinite.prototype._check = function() { var offset = getOffset(this.container); if(Math.abs(offset) <= this.distance) { this.container.trigger("infinite"); } } var infinite = function(el) { attachEvents(el); } $.fn.infinite = function(distance) { return this.each(function() { new Infinite(this, distance); }); } $.fn.destroyInfinite = function() { return this.each(function() { var infinite = $(this).data("infinite"); if(infinite && infinite.detachEvents) infinite.detachEvents(); }); } }($); /* global $:true */ +function ($) { "use strict"; var ITEM_ON = "weui-bar__item--on"; var showTab = function(a) { var $a = $(a); if($a.hasClass(ITEM_ON)) return; var href = $a.attr("href"); if(!/^#/.test(href)) return ; $a.parent().find("."+ITEM_ON).removeClass(ITEM_ON); $a.addClass(ITEM_ON); var bd = $a.parents(".weui-tab").find(".weui-tab__bd"); bd.find(".weui-tab__bd-item--active").removeClass("weui-tab__bd-item--active"); $(href).addClass("weui-tab__bd-item--active"); } $.showTab = showTab; $(document).on("click", ".weui-navbar__item, .weui-tabbar__item", function(e) { var $a = $(e.currentTarget); var href = $a.attr("href"); if($a.hasClass(ITEM_ON)) return; if(!/^#/.test(href)) return; e.preventDefault(); showTab($a); }); }($); /* global $:true */ + function($) { "use strict"; $(document).on("click touchstart", ".weui-search-bar__label", function(e) { $(e.target).parents(".weui-search-bar").addClass("weui-search-bar_focusing").find('input').focus(); }) /* .on("blur", ".weui-search-bar__input", function(e) { var $input = $(e.target); if(!$input.val()) $input.parents(".weui-search-bar").removeClass("weui-search-bar_focusing"); }) */ .on("click", ".weui-search-bar__cancel-btn", function(e) { var $input = $(e.target).parents(".weui-search-bar").removeClass("weui-search-bar_focusing").find(".weui-search-bar__input").val("").blur(); }) .on("click", ".weui-icon-clear", function(e) { var $input = $(e.target).parents(".weui-search-bar").find(".weui-search-bar__input").val("").focus(); }); }($); /*=========================== Device/OS Detection ===========================*/ /* global $:true */ ;(function ($) { "use strict"; var device = {}; var ua = navigator.userAgent; var android = ua.match(/(Android);?[\s\/]+([\d.]+)?/); var ipad = ua.match(/(iPad).*OS\s([\d_]+)/); var ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/); var iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/); device.ios = device.android = device.iphone = device.ipad = device.androidChrome = false; // Android if (android) { device.os = 'android'; device.osVersion = android[2]; device.android = true; device.androidChrome = ua.toLowerCase().indexOf('chrome') >= 0; } if (ipad || iphone || ipod) { device.os = 'ios'; device.ios = true; } // iOS if (iphone && !ipod) { device.osVersion = iphone[2].replace(/_/g, '.'); device.iphone = true; } if (ipad) { device.osVersion = ipad[2].replace(/_/g, '.'); device.ipad = true; } if (ipod) { device.osVersion = ipod[3] ? ipod[3].replace(/_/g, '.') : null; device.iphone = true; } // iOS 8+ changed UA if (device.ios && device.osVersion && ua.indexOf('Version/') >= 0) { if (device.osVersion.split('.')[0] === '10') { device.osVersion = ua.toLowerCase().split('version/')[1].split(' ')[0]; } } // Webview device.webView = (iphone || ipad || ipod) && ua.match(/.*AppleWebKit(?!.*Safari)/i); // Minimal UI if (device.os && device.os === 'ios') { var osVersionArr = device.osVersion.split('.'); device.minimalUi = !device.webView && (ipod || iphone) && (osVersionArr[0] * 1 === 7 ? osVersionArr[1] * 1 >= 1 : osVersionArr[0] * 1 > 7) && $('meta[name="viewport"]').length > 0 && $('meta[name="viewport"]').attr('content').indexOf('minimal-ui') >= 0; } // Check for status bar and fullscreen app mode var windowWidth = $(window).width(); var windowHeight = $(window).height(); device.statusBar = false; if (device.webView && (windowWidth * windowHeight === screen.width * screen.height)) { device.statusBar = true; } else { device.statusBar = false; } // Classes var classNames = []; // Pixel Ratio device.pixelRatio = window.devicePixelRatio || 1; classNames.push('pixel-ratio-' + Math.floor(device.pixelRatio)); if (device.pixelRatio >= 2) { classNames.push('retina'); } // OS classes if (device.os) { classNames.push(device.os, device.os + '-' + device.osVersion.split('.')[0], device.os + '-' + device.osVersion.replace(/\./g, '-')); if (device.os === 'ios') { var major = parseInt(device.osVersion.split('.')[0], 10); for (var i = major - 1; i >= 6; i--) { classNames.push('ios-gt-' + i); } } } // Status bar classes if (device.statusBar) { classNames.push('with-statusbar-overlay'); } else { $('html').removeClass('with-statusbar-overlay'); } // Add html classes if (classNames.length > 0) $('html').addClass(classNames.join(' ')); $.device = device; })($); /*====================================================== ************ Picker ************ ======================================================*/ /* global $:true */ /* jshint unused:false */ /* jshint multistr:true */ + function($) { "use strict"; var Picker = function (params) { var p = this; var defaults = { updateValuesOnMomentum: false, updateValuesOnTouchmove: true, rotateEffect: false, momentumRatio: 7, freeMode: false, // Common settings scrollToInput: true, inputReadOnly: true, toolbar: true, toolbarCloseText: '完成', title: '请选择', toolbarTemplate: '
\
\ {{closeText}}\

{{title}}

\
\
', }; params = params || {}; for (var def in defaults) { if (typeof params[def] === 'undefined') { params[def] = defaults[def]; } } p.params = params; p.cols = []; p.initialized = false; // Inline flag p.inline = p.params.container ? true : false; // 3D Transforms origin bug, only on safari var originBug = $.device.ios || (navigator.userAgent.toLowerCase().indexOf('safari') >= 0 && navigator.userAgent.toLowerCase().indexOf('chrome') < 0) && !$.device.android; // Should be converted to popover function isPopover() { var toPopover = false; if (!p.params.convertToPopover && !p.params.onlyInPopover) return toPopover; if (!p.inline && p.params.input) { if (p.params.onlyInPopover) toPopover = true; else { if ($.device.ios) { toPopover = $.device.ipad ? true : false; } else { if ($(window).width() >= 768) toPopover = true; } } } return toPopover; } function inPopover() { if (p.opened && p.container && p.container.length > 0 && p.container.parents('.popover').length > 0) return true; else return false; } // Value p.setValue = function (arrValues, transition) { var valueIndex = 0; for (var i = 0; i < p.cols.length; i++) { if (p.cols[i] && !p.cols[i].divider) { p.cols[i].setValue(arrValues[valueIndex], transition); valueIndex++; } } }; p.updateValue = function () { var newValue = []; var newDisplayValue = []; for (var i = 0; i < p.cols.length; i++) { if (!p.cols[i].divider) { newValue.push(p.cols[i].value); newDisplayValue.push(p.cols[i].displayValue); } } if (newValue.indexOf(undefined) >= 0) { return; } p.value = newValue; p.displayValue = newDisplayValue; if (p.params.onChange) { p.params.onChange(p, p.value, p.displayValue); } if (p.input && p.input.length > 0) { $(p.input).val(p.params.formatValue ? p.params.formatValue(p, p.value, p.displayValue) : p.value.join(' ')); $(p.input).trigger('change'); } }; // Columns Handlers p.initPickerCol = function (colElement, updateItems) { var colContainer = $(colElement); var colIndex = colContainer.index(); var col = p.cols[colIndex]; if (col.divider) return; col.container = colContainer; col.wrapper = col.container.find('.picker-items-col-wrapper'); col.items = col.wrapper.find('.picker-item'); var i, j; var wrapperHeight, itemHeight, itemsHeight, minTranslate, maxTranslate; col.replaceValues = function (values, displayValues) { col.destroyEvents(); col.values = values; col.displayValues = displayValues; var newItemsHTML = p.columnHTML(col, true); col.wrapper.html(newItemsHTML); col.items = col.wrapper.find('.picker-item'); col.calcSize(); col.setValue(col.values[0] || '', 0, true); col.initEvents(); }; col.calcSize = function () { if (!col.values.length) return; if (p.params.rotateEffect) { col.container.removeClass('picker-items-col-absolute'); if (!col.width) col.container.css({width:''}); } var colWidth, colHeight; colWidth = 0; colHeight = col.container[0].offsetHeight; wrapperHeight = col.wrapper[0].offsetHeight; itemHeight = col.items[0].offsetHeight; itemsHeight = itemHeight * col.items.length; minTranslate = colHeight / 2 - itemsHeight + itemHeight / 2; maxTranslate = colHeight / 2 - itemHeight / 2; if (col.width) { colWidth = col.width; if (parseInt(colWidth, 10) === colWidth) colWidth = colWidth + 'px'; col.container.css({width: colWidth}); } if (p.params.rotateEffect) { if (!col.width) { col.items.each(function () { var item = $(this); item.css({width:'auto'}); colWidth = Math.max(colWidth, item[0].offsetWidth); item.css({width:''}); }); col.container.css({width: (colWidth + 2) + 'px'}); } col.container.addClass('picker-items-col-absolute'); } }; col.calcSize(); col.wrapper.transform('translate3d(0,' + maxTranslate + 'px,0)').transition(0); var activeIndex = 0; var animationFrameId; // Set Value Function col.setValue = function (newValue, transition, valueCallbacks) { if (typeof transition === 'undefined') transition = ''; var newActiveIndex = col.wrapper.find('.picker-item[data-picker-value="' + newValue + '"]').index(); if(typeof newActiveIndex === 'undefined' || newActiveIndex === -1) { col.value = col.displayValue = newValue; return; } var newTranslate = -newActiveIndex * itemHeight + maxTranslate; // Update wrapper col.wrapper.transition(transition); col.wrapper.transform('translate3d(0,' + (newTranslate) + 'px,0)'); // Watch items if (p.params.updateValuesOnMomentum && col.activeIndex && col.activeIndex !== newActiveIndex ) { $.cancelAnimationFrame(animationFrameId); col.wrapper.transitionEnd(function(){ $.cancelAnimationFrame(animationFrameId); }); updateDuringScroll(); } // Update items col.updateItems(newActiveIndex, newTranslate, transition, valueCallbacks); }; col.updateItems = function (activeIndex, translate, transition, valueCallbacks) { if (typeof translate === 'undefined') { translate = $.getTranslate(col.wrapper[0], 'y'); } if(typeof activeIndex === 'undefined') activeIndex = -Math.round((translate - maxTranslate)/itemHeight); if (activeIndex < 0) activeIndex = 0; if (activeIndex >= col.items.length) activeIndex = col.items.length - 1; var previousActiveIndex = col.activeIndex; col.activeIndex = activeIndex; /* col.wrapper.find('.picker-selected, .picker-after-selected, .picker-before-selected').removeClass('picker-selected picker-after-selected picker-before-selected'); col.items.transition(transition); var selectedItem = col.items.eq(activeIndex).addClass('picker-selected').transform(''); var prevItems = selectedItem.prevAll().addClass('picker-before-selected'); var nextItems = selectedItem.nextAll().addClass('picker-after-selected'); */ //去掉 .picker-after-selected, .picker-before-selected 以提高性能 col.wrapper.find('.picker-selected').removeClass('picker-selected'); if (p.params.rotateEffect) { col.items.transition(transition); } var selectedItem = col.items.eq(activeIndex).addClass('picker-selected').transform(''); if (valueCallbacks || typeof valueCallbacks === 'undefined') { // Update values col.value = selectedItem.attr('data-picker-value'); col.displayValue = col.displayValues ? col.displayValues[activeIndex] : col.value; // On change callback if (previousActiveIndex !== activeIndex) { if (col.onChange) { col.onChange(p, col.value, col.displayValue); } p.updateValue(); } } // Set 3D rotate effect if (!p.params.rotateEffect) { return; } var percentage = (translate - (Math.floor((translate - maxTranslate)/itemHeight) * itemHeight + maxTranslate)) / itemHeight; col.items.each(function () { var item = $(this); var itemOffsetTop = item.index() * itemHeight; var translateOffset = maxTranslate - translate; var itemOffset = itemOffsetTop - translateOffset; var percentage = itemOffset / itemHeight; var itemsFit = Math.ceil(col.height / itemHeight / 2) + 1; var angle = (-18*percentage); if (angle > 180) angle = 180; if (angle < -180) angle = -180; // Far class if (Math.abs(percentage) > itemsFit) item.addClass('picker-item-far'); else item.removeClass('picker-item-far'); // Set transform item.transform('translate3d(0, ' + (-translate + maxTranslate) + 'px, ' + (originBug ? -110 : 0) + 'px) rotateX(' + angle + 'deg)'); }); }; function updateDuringScroll() { animationFrameId = $.requestAnimationFrame(function () { col.updateItems(undefined, undefined, 0); updateDuringScroll(); }); } // Update items on init if (updateItems) col.updateItems(0, maxTranslate, 0); var allowItemClick = true; var isTouched, isMoved, touchStartY, touchCurrentY, touchStartTime, touchEndTime, startTranslate, returnTo, currentTranslate, prevTranslate, velocityTranslate, velocityTime; function handleTouchStart (e) { if (isMoved || isTouched) return; e.preventDefault(); isTouched = true; var position = $.getTouchPosition(e); touchStartY = touchCurrentY = position.y; touchStartTime = (new Date()).getTime(); allowItemClick = true; startTranslate = currentTranslate = $.getTranslate(col.wrapper[0], 'y'); } function handleTouchMove (e) { if (!isTouched) return; e.preventDefault(); allowItemClick = false; var position = $.getTouchPosition(e); touchCurrentY = position.y; if (!isMoved) { // First move $.cancelAnimationFrame(animationFrameId); isMoved = true; startTranslate = currentTranslate = $.getTranslate(col.wrapper[0], 'y'); col.wrapper.transition(0); } e.preventDefault(); var diff = touchCurrentY - touchStartY; currentTranslate = startTranslate + diff; returnTo = undefined; // Normalize translate if (currentTranslate < minTranslate) { currentTranslate = minTranslate - Math.pow(minTranslate - currentTranslate, 0.8); returnTo = 'min'; } if (currentTranslate > maxTranslate) { currentTranslate = maxTranslate + Math.pow(currentTranslate - maxTranslate, 0.8); returnTo = 'max'; } // Transform wrapper col.wrapper.transform('translate3d(0,' + currentTranslate + 'px,0)'); // Update items col.updateItems(undefined, currentTranslate, 0, p.params.updateValuesOnTouchmove); // Calc velocity velocityTranslate = currentTranslate - prevTranslate || currentTranslate; velocityTime = (new Date()).getTime(); prevTranslate = currentTranslate; } function handleTouchEnd (e) { if (!isTouched || !isMoved) { isTouched = isMoved = false; return; } isTouched = isMoved = false; col.wrapper.transition(''); if (returnTo) { if (returnTo === 'min') { col.wrapper.transform('translate3d(0,' + minTranslate + 'px,0)'); } else col.wrapper.transform('translate3d(0,' + maxTranslate + 'px,0)'); } touchEndTime = new Date().getTime(); var velocity, newTranslate; if (touchEndTime - touchStartTime > 300) { newTranslate = currentTranslate; } else { velocity = Math.abs(velocityTranslate / (touchEndTime - velocityTime)); newTranslate = currentTranslate + velocityTranslate * p.params.momentumRatio; } newTranslate = Math.max(Math.min(newTranslate, maxTranslate), minTranslate); // Active Index var activeIndex = -Math.floor((newTranslate - maxTranslate)/itemHeight); // Normalize translate if (!p.params.freeMode) newTranslate = -activeIndex * itemHeight + maxTranslate; // Transform wrapper col.wrapper.transform('translate3d(0,' + (parseInt(newTranslate,10)) + 'px,0)'); // Update items col.updateItems(activeIndex, newTranslate, '', true); // Watch items if (p.params.updateValuesOnMomentum) { updateDuringScroll(); col.wrapper.transitionEnd(function(){ $.cancelAnimationFrame(animationFrameId); }); } // Allow click setTimeout(function () { allowItemClick = true; }, 100); } function handleClick(e) { if (!allowItemClick) return; $.cancelAnimationFrame(animationFrameId); /*jshint validthis:true */ var value = $(this).attr('data-picker-value'); col.setValue(value); } col.initEvents = function (detach) { var method = detach ? 'off' : 'on'; col.container[method]($.touchEvents.start, handleTouchStart); col.container[method]($.touchEvents.move, handleTouchMove); col.container[method]($.touchEvents.end, handleTouchEnd); col.items[method]('click', handleClick); }; col.destroyEvents = function () { col.initEvents(true); }; col.container[0].f7DestroyPickerCol = function () { col.destroyEvents(); }; col.initEvents(); }; p.destroyPickerCol = function (colContainer) { colContainer = $(colContainer); if ('f7DestroyPickerCol' in colContainer[0]) colContainer[0].f7DestroyPickerCol(); }; // Resize cols function resizeCols() { if (!p.opened) return; for (var i = 0; i < p.cols.length; i++) { if (!p.cols[i].divider) { p.cols[i].calcSize(); p.cols[i].setValue(p.cols[i].value, 0, false); } } } $(window).on('resize', resizeCols); // HTML Layout p.columnHTML = function (col, onlyItems) { var columnItemsHTML = ''; var columnHTML = ''; if (col.divider) { columnHTML += '
' + col.content + '
'; } else { for (var j = 0; j < col.values.length; j++) { columnItemsHTML += '
' + (col.displayValues ? col.displayValues[j] : col.values[j]) + '
'; } columnHTML += '
' + columnItemsHTML + '
'; } return onlyItems ? columnItemsHTML : columnHTML; }; p.layout = function () { var pickerHTML = ''; var pickerClass = ''; var i; p.cols = []; var colsHTML = ''; for (i = 0; i < p.params.cols.length; i++) { var col = p.params.cols[i]; colsHTML += p.columnHTML(p.params.cols[i]); p.cols.push(col); } pickerClass = 'weui-picker-modal picker-columns ' + (p.params.cssClass || '') + (p.params.rotateEffect ? ' picker-3d' : '') + (p.params.cols.length === 1 ? ' picker-columns-single' : ''); pickerHTML = '
' + (p.params.toolbar ? p.params.toolbarTemplate.replace(/{{closeText}}/g, p.params.toolbarCloseText).replace(/{{title}}/g, p.params.title) : '') + '
' + colsHTML + '
' + '
' + '
'; p.pickerHTML = pickerHTML; }; // Input Events function openOnInput(e) { e.preventDefault(); if (p.opened) return; p.open(); if (p.params.scrollToInput && !isPopover()) { var pageContent = p.input.parents('.content'); if (pageContent.length === 0) return; var paddingTop = parseInt(pageContent.css('padding-top'), 10), paddingBottom = parseInt(pageContent.css('padding-bottom'), 10), pageHeight = pageContent[0].offsetHeight - paddingTop - p.container.height(), pageScrollHeight = pageContent[0].scrollHeight - paddingTop - p.container.height(), newPaddingBottom; var inputTop = p.input.offset().top - paddingTop + p.input[0].offsetHeight; if (inputTop > pageHeight) { var scrollTop = pageContent.scrollTop() + inputTop - pageHeight; if (scrollTop + pageHeight > pageScrollHeight) { newPaddingBottom = scrollTop + pageHeight - pageScrollHeight + paddingBottom; if (pageHeight === pageScrollHeight) { newPaddingBottom = p.container.height(); } pageContent.css({'padding-bottom': (newPaddingBottom) + 'px'}); } pageContent.scrollTop(scrollTop, 300); } } } function closeOnHTMLClick(e) { if (inPopover()) return; if (p.input && p.input.length > 0) { if (e.target !== p.input[0] && $(e.target).parents('.weui-picker-modal').length === 0) p.close(); } else { if ($(e.target).parents('.weui-picker-modal').length === 0) p.close(); } } if (p.params.input) { p.input = $(p.params.input); if (p.input.length > 0) { if (p.params.inputReadOnly) p.input.prop('readOnly', true); if (!p.inline) { p.input.on('click', openOnInput); } if (p.params.inputReadOnly) { p.input.on('focus mousedown', function (e) { e.preventDefault(); }); } } } if (!p.inline) $('html').on('click', closeOnHTMLClick); // Open function onPickerClose() { p.opened = false; if (p.input && p.input.length > 0) p.input.parents('.page-content').css({'padding-bottom': ''}); if (p.params.onClose) p.params.onClose(p); // Destroy events p.container.find('.picker-items-col').each(function () { p.destroyPickerCol(this); }); } p.opened = false; p.open = function () { var toPopover = isPopover(); if (!p.opened) { // Layout p.layout(); // Append if (toPopover) { p.pickerHTML = '
' + p.pickerHTML + '
'; p.popover = $.popover(p.pickerHTML, p.params.input, true); p.container = $(p.popover).find('.weui-picker-modal'); $(p.popover).on('close', function () { onPickerClose(); }); } else if (p.inline) { p.container = $(p.pickerHTML); p.container.addClass('picker-modal-inline'); $(p.params.container).append(p.container); } else { p.container = $($.openPicker(p.pickerHTML)); $(p.container) .on('close', function () { onPickerClose(); }); } // Store picker instance p.container[0].f7Picker = p; // Init Events p.container.find('.picker-items-col').each(function () { var updateItems = true; if ((!p.initialized && p.params.value) || (p.initialized && p.value)) updateItems = false; p.initPickerCol(this, updateItems); }); // Set value if (!p.initialized) { if (p.params.value) { p.setValue(p.params.value, 0); } } else { if (p.value) p.setValue(p.value, 0); } } // Set flag p.opened = true; p.initialized = true; if (p.params.onOpen) p.params.onOpen(p); }; // Close p.close = function (force) { if (!p.opened || p.inline) return; if (inPopover()) { $.closePicker(p.popover); return; } else { $.closePicker(p.container); return; } }; // Destroy p.destroy = function () { p.close(); if (p.params.input && p.input.length > 0) { p.input.off('click focus', openOnInput); $(p.input).data('picker', null); } $('html').off('click', closeOnHTMLClick); $(window).off('resize', resizeCols); }; if (p.inline) { p.open(); } return p; }; $(document).on("click", ".close-picker", function() { var pickerToClose = $('.weui-picker-modal.weui-picker-modal-visible'); if (pickerToClose.length > 0) { $.closePicker(pickerToClose); } }); //修复picker会滚动页面的bug $(document).on($.touchEvents.move, ".picker-modal-inner", function(e) { e.preventDefault(); }); $.openPicker = function(tpl, className, callback) { if(typeof className === "function") { callback = className; className = undefined; } $.closePicker(); var container = $("
").appendTo(document.body); container.show(); container.addClass("weui-picker-container-visible"); //关于布局的问题,如果直接放在body上,则做动画的时候会撑开body高度而导致滚动条变化。 var dialog = $(tpl).appendTo(container); dialog.width(); //通过取一次CSS值,强制浏览器不能把上下两行代码合并执行,因为合并之后会导致无法出现动画。 dialog.addClass("weui-picker-modal-visible"); callback && container.on("close", callback); return dialog; } $.updatePicker = function(tpl) { var container = $(".weui-picker-container-visible"); if(!container[0]) return false; container.html(""); var dialog = $(tpl).appendTo(container); dialog.addClass("weui-picker-modal-visible"); return dialog; } $.closePicker = function(container, callback) { if(typeof container === "function") callback = container; $(".weui-picker-modal-visible").removeClass("weui-picker-modal-visible").transitionEnd(function() { $(this).parent().remove(); callback && callback(); }).trigger("close"); }; $.fn.picker = function(params) { var args = arguments; return this.each(function() { if(!this) return; var $this = $(this); var picker = $this.data("picker"); if(!picker) { params = $.extend({ input: this }, params || {}) // https://github.com/lihongxun945/jquery-weui/issues/432 var inputValue = $this.val(); if(params.value === undefined && inputValue !== "") { params.value = (params.cols && params.cols.length > 1) ? inputValue.split(" ") : [inputValue]; } var p = $.extend({input: this}, params); picker = new Picker(p); $this.data("picker", picker); } if(typeof params === typeof "a") { picker[params].apply(picker, Array.prototype.slice.call(args, 1)); } }); }; }($); /* global $:true */ + function($) { "use strict"; var defaults; var selects = []; var Select = function(input, config) { var self = this; this.config = config; //init empty data this.data = { values: '', titles: '', origins: [], length: 0 }; this.$input = $(input); this.$input.prop("readOnly", true); this.initConfig(); config = this.config; this.$input.click($.proxy(this.open, this)); selects.push(this) } Select.prototype.initConfig = function() { this.config = $.extend({}, defaults, this.config); var config = this.config; if(!config.items || !config.items.length) return; config.items = config.items.map(function(d, i) { if(typeof d == typeof "a") { return { title: d, value: d }; } return d; }); this.tpl = $.t7.compile("
" + config.toolbarTemplate + (config.multi ? config.checkboxTemplate : config.radioTemplate) + "
"); if(config.input !== undefined) this.$input.val(config.input); this.parseInitValue(); this._init = true; } Select.prototype.updateInputValue = function(values, titles) { var v, t; if(this.config.multi) { v = values.join(this.config.split); t = titles.join(this.config.split); } else { v = values[0]; t = titles[0]; } //caculate origin data var origins = []; this.config.items.forEach(function(d) { values.each(function(i, dd) { if(d.value == dd) origins.push(d); }); }); this.$input.val(t).data("values", v); this.$input.attr("value", t).attr("data-values", v); var data = { values: v, titles: t, valuesArray: values, titlesArray: titles, origins: origins, length: origins.length }; this.data = data; this.$input.trigger("change", data); this.config.onChange && this.config.onChange.call(this, data); } Select.prototype.parseInitValue = function() { var value = this.$input.val(); var items = this.config.items; //如果input为空,只有在第一次初始化的时候才保留默认选择。因为后来就是用户自己取消了全部选择,不能再为他选中默认值。 if( !this._init && (value === undefined || value == null || value === "")) return; var titles = this.config.multi ? value.split(this.config.split) : [value]; for(var i=0;i this.config.max) { $.toast("最多只能选择"+this.config.max+"个", "text"); return false } } } $.closePicker(function() { self.onClose(); callback && callback(); }); return true } Select.prototype.onClose = function() { this._open = false; if(this.config.onClose) this.config.onClose(this); } Select.prototype.getHTML = function(callback) { var config = this.config; return this.tpl({ items: config.items, title: config.title, closeText: config.closeText }) } $.fn.select = function(params, args) { return this.each(function() { var $this = $(this); if(!$this.data("weui-select")) $this.data("weui-select", new Select(this, params)); var select = $this.data("weui-select"); if(typeof params === typeof "a") select[params].call(select, args); return select; }); } defaults = $.fn.select.prototype.defaults = { items: [], input: undefined, //输入框的初始值 title: "请选择", multi: false, closeText: "确定", autoClose: true, //是否选择完成后自动关闭,只有单选模式下才有效 onChange: undefined, //function beforeClose: undefined, // function 关闭之前,如果返回false则阻止关闭 onClose: undefined, //function onOpen: undefined, //function split: ",", //多选模式下的分隔符 min: undefined, //多选模式下可用,最少选择数 max: undefined, //单选模式下可用,最多选择数 toolbarTemplate: '
\
\ {{closeText}}\

{{title}}

\
\
', radioTemplate: '
\ {{#items}}\ \ {{/items}}\
', checkboxTemplate: '
\ {{#items}}\ \ {{/items}}\
', } }($); /*====================================================== ************ Calendar ************ ======================================================*/ /* global $:true */ /*jshint unused: false*/ +function ($) { "use strict"; var rtl = false; var defaults; var isSameDate = function (a, b) { var a = new Date(a), b = new Date(b); return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate() } var Calendar = function (params) { var p = this; params = params || {}; for (var def in defaults) { if (typeof params[def] === 'undefined') { params[def] = defaults[def]; } } p.params = params; p.initialized = false; // Inline flag p.inline = p.params.container ? true : false; // Is horizontal p.isH = p.params.direction === 'horizontal'; // RTL inverter var inverter = p.isH ? (rtl ? -1 : 1) : 1; // Animating flag p.animating = false; // Should be converted to popover function isPopover() { var toPopover = false; if (!p.params.convertToPopover && !p.params.onlyInPopover) return toPopover; if (!p.inline && p.params.input) { if (p.params.onlyInPopover) toPopover = true; else { if ($.device.ios) { toPopover = $.device.ipad ? true : false; } else { if ($(window).width() >= 768) toPopover = true; } } } return toPopover; } function inPopover() { if (p.opened && p.container && p.container.length > 0 && p.container.parents('.popover').length > 0) return true; else return false; } // Format date function formatDate(date) { date = new Date(date); var year = date.getFullYear(); var month = date.getMonth(); var month1 = month + 1; var day = date.getDate(); var weekDay = date.getDay(); return p.params.dateFormat .replace(/yyyy/g, year) .replace(/yy/g, (year + '').substring(2)) .replace(/mm/g, month1 < 10 ? '0' + month1 : month1) .replace(/m/g, month1) .replace(/MM/g, p.params.monthNames[month]) .replace(/M/g, p.params.monthNamesShort[month]) .replace(/dd/g, day < 10 ? '0' + day : day) .replace(/d/g, day) .replace(/DD/g, p.params.dayNames[weekDay]) .replace(/D/g, p.params.dayNamesShort[weekDay]); } // Value p.addValue = function (value) { if (p.params.multiple) { if (!p.value) p.value = []; var inValuesIndex; for (var i = 0; i < p.value.length; i++) { if (isSameDate(value, p.value[i])) { inValuesIndex = i; } } if (typeof inValuesIndex === 'undefined') { p.value.push(value); } else { p.value.splice(inValuesIndex, 1); } p.updateValue(); } else { p.value = [value]; p.updateValue(); } }; p.setValue = function (arrValues) { var date = new Date(arrValues[0]); p.setYearMonth(date.getFullYear(), date.getMonth()); p.addValue(+ date); }; p.updateValue = function () { p.wrapper.find('.picker-calendar-day-selected').removeClass('picker-calendar-day-selected'); var i, inputValue; for (i = 0; i < p.value.length; i++) { var valueDate = new Date(p.value[i]); p.wrapper.find('.picker-calendar-day[data-date="' + valueDate.getFullYear() + '-' + valueDate.getMonth() + '-' + valueDate.getDate() + '"]').addClass('picker-calendar-day-selected'); } if (p.params.onChange) { p.params.onChange(p, p.value.map(formatDate), p.value.map(function (d) { return + new Date(typeof d === typeof 'a' ? d.split(/\D/).filter(function (a) { return !!a; }).join("-") : d); })); } if (p.input && p.input.length > 0) { if (p.params.formatValue) inputValue = p.params.formatValue(p, p.value); else { inputValue = []; for (i = 0; i < p.value.length; i++) { inputValue.push(formatDate(p.value[i])); } inputValue = inputValue.join(', '); } $(p.input).val(inputValue); $(p.input).trigger('change'); } }; // Columns Handlers p.initCalendarEvents = function () { var col; var allowItemClick = true; var isTouched, isMoved, touchStartX, touchStartY, touchCurrentX, touchCurrentY, touchStartTime, touchEndTime, startTranslate, currentTranslate, wrapperWidth, wrapperHeight, percentage, touchesDiff, isScrolling; function handleTouchStart (e) { if (isMoved || isTouched) return; // e.preventDefault(); isTouched = true; var position = $.getTouchPosition(e); touchStartX = touchCurrentY = position.x; touchStartY = touchCurrentY = position.y; touchStartTime = (new Date()).getTime(); percentage = 0; allowItemClick = true; isScrolling = undefined; startTranslate = currentTranslate = p.monthsTranslate; } function handleTouchMove (e) { if (!isTouched) return; var position = $.getTouchPosition(e); touchCurrentX = position.x; touchCurrentY = position.y; if (typeof isScrolling === 'undefined') { isScrolling = !!(isScrolling || Math.abs(touchCurrentY - touchStartY) > Math.abs(touchCurrentX - touchStartX)); } if (p.isH && isScrolling) { isTouched = false; return; } e.preventDefault(); if (p.animating) { isTouched = false; return; } allowItemClick = false; if (!isMoved) { // First move isMoved = true; wrapperWidth = p.wrapper[0].offsetWidth; wrapperHeight = p.wrapper[0].offsetHeight; p.wrapper.transition(0); } e.preventDefault(); touchesDiff = p.isH ? touchCurrentX - touchStartX : touchCurrentY - touchStartY; percentage = touchesDiff/(p.isH ? wrapperWidth : wrapperHeight); currentTranslate = (p.monthsTranslate * inverter + percentage) * 100; // Transform wrapper p.wrapper.transform('translate3d(' + (p.isH ? currentTranslate : 0) + '%, ' + (p.isH ? 0 : currentTranslate) + '%, 0)'); } function handleTouchEnd (e) { if (!isTouched || !isMoved) { isTouched = isMoved = false; return; } isTouched = isMoved = false; touchEndTime = new Date().getTime(); if (touchEndTime - touchStartTime < 300) { if (Math.abs(touchesDiff) < 10) { p.resetMonth(); } else if (touchesDiff >= 10) { if (rtl) p.nextMonth(); else p.prevMonth(); } else { if (rtl) p.prevMonth(); else p.nextMonth(); } } else { if (percentage <= -0.5) { if (rtl) p.prevMonth(); else p.nextMonth(); } else if (percentage >= 0.5) { if (rtl) p.nextMonth(); else p.prevMonth(); } else { p.resetMonth(); } } // Allow click setTimeout(function () { allowItemClick = true; }, 100); } function handleDayClick(e) { if (!allowItemClick) return; var day = $(e.target).parents('.picker-calendar-day'); if (day.length === 0 && $(e.target).hasClass('picker-calendar-day')) { day = $(e.target); } if (day.length === 0) return; // if (day.hasClass('picker-calendar-day-selected') && !p.params.multiple) return; if (day.hasClass('picker-calendar-day-disabled')) return; if (day.hasClass('picker-calendar-day-next')) p.nextMonth(); if (day.hasClass('picker-calendar-day-prev')) p.prevMonth(); var dateYear = day.attr('data-year'); var dateMonth = day.attr('data-month'); var dateDay = day.attr('data-day'); if (p.params.onDayClick) { p.params.onDayClick(p, day[0], dateYear, dateMonth, dateDay); } p.addValue(new Date(dateYear, dateMonth, dateDay).getTime()); if (p.params.closeOnSelect && !p.params.multiple) p.close(); } p.container.find('.picker-calendar-prev-month').on('click', p.prevMonth); p.container.find('.picker-calendar-next-month').on('click', p.nextMonth); p.container.find('.picker-calendar-prev-year').on('click', p.prevYear); p.container.find('.picker-calendar-next-year').on('click', p.nextYear); p.wrapper.on('click', handleDayClick); if (p.params.touchMove) { p.wrapper.on($.touchEvents.start, handleTouchStart); p.wrapper.on($.touchEvents.move, handleTouchMove); p.wrapper.on($.touchEvents.end, handleTouchEnd); } p.container[0].f7DestroyCalendarEvents = function () { p.container.find('.picker-calendar-prev-month').off('click', p.prevMonth); p.container.find('.picker-calendar-next-month').off('click', p.nextMonth); p.container.find('.picker-calendar-prev-year').off('click', p.prevYear); p.container.find('.picker-calendar-next-year').off('click', p.nextYear); p.wrapper.off('click', handleDayClick); if (p.params.touchMove) { p.wrapper.off($.touchEvents.start, handleTouchStart); p.wrapper.off($.touchEvents.move, handleTouchMove); p.wrapper.off($.touchEvents.end, handleTouchEnd); } }; }; p.destroyCalendarEvents = function (colContainer) { if ('f7DestroyCalendarEvents' in p.container[0]) p.container[0].f7DestroyCalendarEvents(); }; // Calendar Methods p.daysInMonth = function (date) { var d = new Date(date); return new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate(); }; p.monthHTML = function (date, offset) { date = new Date(date); var year = date.getFullYear(), month = date.getMonth(), day = date.getDate(); if (offset === 'next') { if (month === 11) date = new Date(year + 1, 0); else date = new Date(year, month + 1, 1); } if (offset === 'prev') { if (month === 0) date = new Date(year - 1, 11); else date = new Date(year, month - 1, 1); } if (offset === 'next' || offset === 'prev') { month = date.getMonth(); year = date.getFullYear(); } var daysInPrevMonth = p.daysInMonth(new Date(date.getFullYear(), date.getMonth()).getTime() - 10 * 24 * 60 * 60 * 1000), daysInMonth = p.daysInMonth(date), firstDayOfMonthIndex = new Date(date.getFullYear(), date.getMonth()).getDay(); if (firstDayOfMonthIndex === 0) firstDayOfMonthIndex = 7; var dayDate, currentValues = [], i, j, rows = 6, cols = 7, monthHTML = '', dayIndex = 0 + (p.params.firstDay - 1), today = new Date().setHours(0,0,0,0), minDate = p.params.minDate ? new Date(p.params.minDate).getTime() : null, maxDate = p.params.maxDate ? new Date(p.params.maxDate).getTime() : null; if (p.value && p.value.length) { for (i = 0; i < p.value.length; i++) { currentValues.push(new Date(p.value[i]).setHours(0,0,0,0)); } } for (i = 1; i <= rows; i++) { var rowHTML = ''; var row = i; for (j = 1; j <= cols; j++) { var col = j; dayIndex ++; var dayNumber = dayIndex - firstDayOfMonthIndex; var addClass = ''; if (dayNumber < 0) { dayNumber = daysInPrevMonth + dayNumber + 1; addClass += ' picker-calendar-day-prev'; dayDate = new Date(month - 1 < 0 ? year - 1 : year, month - 1 < 0 ? 11 : month - 1, dayNumber).getTime(); } else { dayNumber = dayNumber + 1; if (dayNumber > daysInMonth) { dayNumber = dayNumber - daysInMonth; addClass += ' picker-calendar-day-next'; dayDate = new Date(month + 1 > 11 ? year + 1 : year, month + 1 > 11 ? 0 : month + 1, dayNumber).getTime(); } else { dayDate = new Date(year, month, dayNumber).getTime(); } } // Today if (dayDate === today) addClass += ' picker-calendar-day-today'; // Selected if (currentValues.indexOf(dayDate) >= 0) addClass += ' picker-calendar-day-selected'; // Weekend if (p.params.weekendDays.indexOf(col - 1) >= 0) { addClass += ' picker-calendar-day-weekend'; } // Disabled if ((minDate && dayDate < minDate) || (maxDate && dayDate > maxDate)) { addClass += ' picker-calendar-day-disabled'; } dayDate = new Date(dayDate); var dayYear = dayDate.getFullYear(); var dayMonth = dayDate.getMonth(); rowHTML += '
'+dayNumber+'
'; } monthHTML += '
' + rowHTML + '
'; } monthHTML = '
' + monthHTML + '
'; return monthHTML; }; p.animating = false; p.updateCurrentMonthYear = function (dir) { if (typeof dir === 'undefined') { p.currentMonth = parseInt(p.months.eq(1).attr('data-month'), 10); p.currentYear = parseInt(p.months.eq(1).attr('data-year'), 10); } else { p.currentMonth = parseInt(p.months.eq(dir === 'next' ? (p.months.length - 1) : 0).attr('data-month'), 10); p.currentYear = parseInt(p.months.eq(dir === 'next' ? (p.months.length - 1) : 0).attr('data-year'), 10); } p.container.find('.current-month-value').text(p.params.monthNames[p.currentMonth]); p.container.find('.current-year-value').text(p.currentYear); }; p.onMonthChangeStart = function (dir) { p.updateCurrentMonthYear(dir); p.months.removeClass('picker-calendar-month-current picker-calendar-month-prev picker-calendar-month-next'); var currentIndex = dir === 'next' ? p.months.length - 1 : 0; p.months.eq(currentIndex).addClass('picker-calendar-month-current'); p.months.eq(dir === 'next' ? currentIndex - 1 : currentIndex + 1).addClass(dir === 'next' ? 'picker-calendar-month-prev' : 'picker-calendar-month-next'); if (p.params.onMonthYearChangeStart) { p.params.onMonthYearChangeStart(p, p.currentYear, p.currentMonth); } }; p.onMonthChangeEnd = function (dir, rebuildBoth) { p.animating = false; var nextMonthHTML, prevMonthHTML, newMonthHTML; p.wrapper.find('.picker-calendar-month:not(.picker-calendar-month-prev):not(.picker-calendar-month-current):not(.picker-calendar-month-next)').remove(); if (typeof dir === 'undefined') { dir = 'next'; rebuildBoth = true; } if (!rebuildBoth) { newMonthHTML = p.monthHTML(new Date(p.currentYear, p.currentMonth), dir); } else { p.wrapper.find('.picker-calendar-month-next, .picker-calendar-month-prev').remove(); prevMonthHTML = p.monthHTML(new Date(p.currentYear, p.currentMonth), 'prev'); nextMonthHTML = p.monthHTML(new Date(p.currentYear, p.currentMonth), 'next'); } if (dir === 'next' || rebuildBoth) { p.wrapper.append(newMonthHTML || nextMonthHTML); } if (dir === 'prev' || rebuildBoth) { p.wrapper.prepend(newMonthHTML || prevMonthHTML); } p.months = p.wrapper.find('.picker-calendar-month'); p.setMonthsTranslate(p.monthsTranslate); if (p.params.onMonthAdd) { p.params.onMonthAdd(p, dir === 'next' ? p.months.eq(p.months.length - 1)[0] : p.months.eq(0)[0]); } if (p.params.onMonthYearChangeEnd) { p.params.onMonthYearChangeEnd(p, p.currentYear, p.currentMonth); } }; p.setMonthsTranslate = function (translate) { translate = translate || p.monthsTranslate || 0; if (typeof p.monthsTranslate === 'undefined') p.monthsTranslate = translate; p.months.removeClass('picker-calendar-month-current picker-calendar-month-prev picker-calendar-month-next'); var prevMonthTranslate = -(translate + 1) * 100 * inverter; var currentMonthTranslate = -translate * 100 * inverter; var nextMonthTranslate = -(translate - 1) * 100 * inverter; p.months.eq(0).transform('translate3d(' + (p.isH ? prevMonthTranslate : 0) + '%, ' + (p.isH ? 0 : prevMonthTranslate) + '%, 0)').addClass('picker-calendar-month-prev'); p.months.eq(1).transform('translate3d(' + (p.isH ? currentMonthTranslate : 0) + '%, ' + (p.isH ? 0 : currentMonthTranslate) + '%, 0)').addClass('picker-calendar-month-current'); p.months.eq(2).transform('translate3d(' + (p.isH ? nextMonthTranslate : 0) + '%, ' + (p.isH ? 0 : nextMonthTranslate) + '%, 0)').addClass('picker-calendar-month-next'); }; p.nextMonth = function (transition) { if (typeof transition === 'undefined' || typeof transition === 'object') { transition = ''; if (!p.params.animate) transition = 0; } var nextMonth = parseInt(p.months.eq(p.months.length - 1).attr('data-month'), 10); var nextYear = parseInt(p.months.eq(p.months.length - 1).attr('data-year'), 10); var nextDate = new Date(nextYear, nextMonth); var nextDateTime = nextDate.getTime(); var transitionEndCallback = p.animating ? false : true; if (p.params.maxDate) { if (nextDateTime > new Date(p.params.maxDate).getTime()) { return p.resetMonth(); } } p.monthsTranslate --; if (nextMonth === p.currentMonth) { var nextMonthTranslate = -(p.monthsTranslate) * 100 * inverter; var nextMonthHTML = $(p.monthHTML(nextDateTime, 'next')).transform('translate3d(' + (p.isH ? nextMonthTranslate : 0) + '%, ' + (p.isH ? 0 : nextMonthTranslate) + '%, 0)').addClass('picker-calendar-month-next'); p.wrapper.append(nextMonthHTML[0]); p.months = p.wrapper.find('.picker-calendar-month'); if (p.params.onMonthAdd) { p.params.onMonthAdd(p, p.months.eq(p.months.length - 1)[0]); } } p.animating = true; p.onMonthChangeStart('next'); var translate = (p.monthsTranslate * 100) * inverter; p.wrapper.transition(transition).transform('translate3d(' + (p.isH ? translate : 0) + '%, ' + (p.isH ? 0 : translate) + '%, 0)'); if (transitionEndCallback) { p.wrapper.transitionEnd(function () { p.onMonthChangeEnd('next'); }); } if (!p.params.animate) { p.onMonthChangeEnd('next'); } }; p.prevMonth = function (transition) { if (typeof transition === 'undefined' || typeof transition === 'object') { transition = ''; if (!p.params.animate) transition = 0; } var prevMonth = parseInt(p.months.eq(0).attr('data-month'), 10); var prevYear = parseInt(p.months.eq(0).attr('data-year'), 10); var prevDate = new Date(prevYear, prevMonth + 1, -1); var prevDateTime = prevDate.getTime(); var transitionEndCallback = p.animating ? false : true; if (p.params.minDate) { if (prevDateTime < new Date(p.params.minDate).getTime()) { return p.resetMonth(); } } p.monthsTranslate ++; if (prevMonth === p.currentMonth) { var prevMonthTranslate = -(p.monthsTranslate) * 100 * inverter; var prevMonthHTML = $(p.monthHTML(prevDateTime, 'prev')).transform('translate3d(' + (p.isH ? prevMonthTranslate : 0) + '%, ' + (p.isH ? 0 : prevMonthTranslate) + '%, 0)').addClass('picker-calendar-month-prev'); p.wrapper.prepend(prevMonthHTML[0]); p.months = p.wrapper.find('.picker-calendar-month'); if (p.params.onMonthAdd) { p.params.onMonthAdd(p, p.months.eq(0)[0]); } } p.animating = true; p.onMonthChangeStart('prev'); var translate = (p.monthsTranslate * 100) * inverter; p.wrapper.transition(transition).transform('translate3d(' + (p.isH ? translate : 0) + '%, ' + (p.isH ? 0 : translate) + '%, 0)'); if (transitionEndCallback) { p.wrapper.transitionEnd(function () { p.onMonthChangeEnd('prev'); }); } if (!p.params.animate) { p.onMonthChangeEnd('prev'); } }; p.resetMonth = function (transition) { if (typeof transition === 'undefined') transition = ''; var translate = (p.monthsTranslate * 100) * inverter; p.wrapper.transition(transition).transform('translate3d(' + (p.isH ? translate : 0) + '%, ' + (p.isH ? 0 : translate) + '%, 0)'); }; p.setYearMonth = function (year, month, transition) { if (typeof year === 'undefined') year = p.currentYear; if (typeof month === 'undefined') month = p.currentMonth; if (typeof transition === 'undefined' || typeof transition === 'object') { transition = ''; if (!p.params.animate) transition = 0; } var targetDate; if (year < p.currentYear) { targetDate = new Date(year, month + 1, -1).getTime(); } else { targetDate = new Date(year, month).getTime(); } if (p.params.maxDate && targetDate > new Date(p.params.maxDate).getTime()) { return false; } if (p.params.minDate && targetDate < new Date(p.params.minDate).getTime()) { return false; } var currentDate = new Date(p.currentYear, p.currentMonth).getTime(); var dir = targetDate > currentDate ? 'next' : 'prev'; var newMonthHTML = p.monthHTML(new Date(year, month)); p.monthsTranslate = p.monthsTranslate || 0; var prevTranslate = p.monthsTranslate; var monthTranslate, wrapperTranslate; var transitionEndCallback = p.animating ? false : true; if (targetDate > currentDate) { // To next p.monthsTranslate --; if (!p.animating) p.months.eq(p.months.length - 1).remove(); p.wrapper.append(newMonthHTML); p.months = p.wrapper.find('.picker-calendar-month'); monthTranslate = -(prevTranslate - 1) * 100 * inverter; p.months.eq(p.months.length - 1).transform('translate3d(' + (p.isH ? monthTranslate : 0) + '%, ' + (p.isH ? 0 : monthTranslate) + '%, 0)').addClass('picker-calendar-month-next'); } else { // To prev p.monthsTranslate ++; if (!p.animating) p.months.eq(0).remove(); p.wrapper.prepend(newMonthHTML); p.months = p.wrapper.find('.picker-calendar-month'); monthTranslate = -(prevTranslate + 1) * 100 * inverter; p.months.eq(0).transform('translate3d(' + (p.isH ? monthTranslate : 0) + '%, ' + (p.isH ? 0 : monthTranslate) + '%, 0)').addClass('picker-calendar-month-prev'); } if (p.params.onMonthAdd) { p.params.onMonthAdd(p, dir === 'next' ? p.months.eq(p.months.length - 1)[0] : p.months.eq(0)[0]); } p.animating = true; p.onMonthChangeStart(dir); wrapperTranslate = (p.monthsTranslate * 100) * inverter; p.wrapper.transition(transition).transform('translate3d(' + (p.isH ? wrapperTranslate : 0) + '%, ' + (p.isH ? 0 : wrapperTranslate) + '%, 0)'); if (transitionEndCallback) { p.wrapper.transitionEnd(function () { p.onMonthChangeEnd(dir, true); }); } if (!p.params.animate) { p.onMonthChangeEnd(dir); } }; p.nextYear = function () { p.setYearMonth(p.currentYear + 1); }; p.prevYear = function () { p.setYearMonth(p.currentYear - 1); }; // HTML Layout p.layout = function () { var pickerHTML = ''; var pickerClass = ''; var i; var layoutDate = p.value && p.value.length ? p.value[0] : new Date().setHours(0,0,0,0); var prevMonthHTML = p.monthHTML(layoutDate, 'prev'); var currentMonthHTML = p.monthHTML(layoutDate); var nextMonthHTML = p.monthHTML(layoutDate, 'next'); var monthsHTML = '
' + (prevMonthHTML + currentMonthHTML + nextMonthHTML) + '
'; // Week days header var weekHeaderHTML = ''; if (p.params.weekHeader) { for (i = 0; i < 7; i++) { var weekDayIndex = (i + p.params.firstDay > 6) ? (i - 7 + p.params.firstDay) : (i + p.params.firstDay); var dayName = p.params.dayNamesShort[weekDayIndex]; weekHeaderHTML += '
' + dayName + '
'; } weekHeaderHTML = '
' + weekHeaderHTML + '
'; } pickerClass = 'weui-picker-calendar ' + (p.params.cssClass || ''); if(!p.inline) pickerClass = 'weui-picker-modal ' + pickerClass; var toolbarHTML = p.params.toolbar ? p.params.toolbarTemplate.replace(/{{closeText}}/g, p.params.toolbarCloseText) : ''; if (p.params.toolbar) { toolbarHTML = p.params.toolbarTemplate .replace(/{{closeText}}/g, p.params.toolbarCloseText) .replace(/{{monthPicker}}/g, (p.params.monthPicker ? p.params.monthPickerTemplate : '')) .replace(/{{yearPicker}}/g, (p.params.yearPicker ? p.params.yearPickerTemplate : '')); } pickerHTML = '
' + toolbarHTML + '
' + weekHeaderHTML + monthsHTML + '
' + '
'; p.pickerHTML = pickerHTML; }; // Input Events function openOnInput(e) { e.preventDefault(); if (p.opened) return; p.open(); if (p.params.scrollToInput && !isPopover()) { var pageContent = p.input.parents('.page-content'); if (pageContent.length === 0) return; var paddingTop = parseInt(pageContent.css('padding-top'), 10), paddingBottom = parseInt(pageContent.css('padding-bottom'), 10), pageHeight = pageContent[0].offsetHeight - paddingTop - p.container.height(), pageScrollHeight = pageContent[0].scrollHeight - paddingTop - p.container.height(), newPaddingBottom; var inputTop = p.input.offset().top - paddingTop + p.input[0].offsetHeight; if (inputTop > pageHeight) { var scrollTop = pageContent.scrollTop() + inputTop - pageHeight; if (scrollTop + pageHeight > pageScrollHeight) { newPaddingBottom = scrollTop + pageHeight - pageScrollHeight + paddingBottom; if (pageHeight === pageScrollHeight) { newPaddingBottom = p.container.height(); } pageContent.css({'padding-bottom': (newPaddingBottom) + 'px'}); } pageContent.scrollTop(scrollTop, 300); } } } function closeOnHTMLClick(e) { if (inPopover()) return; if (p.input && p.input.length > 0) { if (e.target !== p.input[0] && $(e.target).parents('.weui-picker-modal').length === 0) p.close(); } else { if ($(e.target).parents('.weui-picker-modal').length === 0) p.close(); } } if (p.params.input) { p.input = $(p.params.input); if (p.input.length > 0) { if (p.params.inputReadOnly) p.input.prop('readOnly', true); if (!p.inline) { p.input.on('click', openOnInput); } if (p.params.inputReadOnly) { p.input.on('focus mousedown', function (e) { e.preventDefault(); }); } } } //iphone 上无法正确触发 click,会导致点击外面无法关闭 if (!p.inline) $(document).on('click touchend', closeOnHTMLClick); // Open function onPickerClose() { p.opened = false; if (p.input && p.input.length > 0) p.input.parents('.page-content').css({'padding-bottom': ''}); if (p.params.onClose) p.params.onClose(p); // Destroy events p.destroyCalendarEvents(); } p.opened = false; p.open = function () { var toPopover = isPopover() && false; var updateValue = false; if (!p.opened) { // Set date value if (!p.value) { if (p.params.value) { p.value = p.params.value; updateValue = true; } } // Layout p.layout(); // Append if (toPopover) { p.pickerHTML = '
' + p.pickerHTML + '
'; p.popover = $.popover(p.pickerHTML, p.params.input, true); p.container = $(p.popover).find('.weui-picker-modal'); $(p.popover).on('close', function () { onPickerClose(); }); } else if (p.inline) { p.container = $(p.pickerHTML); p.container.addClass('picker-modal-inline'); $(p.params.container).append(p.container); } else { p.container = $($.openPicker(p.pickerHTML)); $(p.container) .on('close', function () { onPickerClose(); }); } // Store calendar instance p.container[0].f7Calendar = p; p.wrapper = p.container.find('.picker-calendar-months-wrapper'); // Months p.months = p.wrapper.find('.picker-calendar-month'); // Update current month and year p.updateCurrentMonthYear(); // Set initial translate p.monthsTranslate = 0; p.setMonthsTranslate(); // Init events p.initCalendarEvents(); // Update input value if (updateValue) p.updateValue(); } // Set flag p.opened = true; p.initialized = true; if (p.params.onMonthAdd) { p.months.each(function () { p.params.onMonthAdd(p, this); }); } if (p.params.onOpen) p.params.onOpen(p); }; // Close p.close = function () { if (!p.opened || p.inline) return; p.animating = false; //有可能还有动画没做完,因此animating设置还没改。 if (inPopover()) { $.closePicker(p.popover); return; } else { $.closePicker(p.container); return; } }; // Destroy p.destroy = function () { p.close(); if (p.params.input && p.input.length > 0) { p.input.off('click focus', openOnInput); p.input.data("calendar", null); } $('html').off('click', closeOnHTMLClick); }; if (p.inline) { p.open(); } return p; }; var format = function(d) { return d < 10 ? "0"+d : d; } $.fn.calendar = function (params, args) { params = params || {}; return this.each(function() { var $this = $(this); if(!$this[0]) return; var p = {}; if($this[0].tagName.toUpperCase() === "INPUT") { p.input = $this; } else { p.container = $this; } var calendar = $this.data("calendar"); if(!calendar) { if(typeof params === typeof "a") { } else { if(!params.value && $this.val()) params.value = [$this.val()]; //默认显示今天 if(!params.value) { var today = new Date(); params.value = [today.getFullYear() + "/" + format(today.getMonth() + 1) + "/" + format(today.getDate())]; } calendar = $this.data("calendar", new Calendar($.extend(p, params))); } } if(typeof params === typeof "a") { calendar[params].call(calendar, args); } }); }; defaults = $.fn.calendar.prototype.defaults = { value: undefined, // 通过JS赋值,注意是数组 monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], dayNames: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], firstDay: 1, // First day of the week, Monday weekendDays: [0, 6], // Sunday and Saturday multiple: false, dateFormat: 'yyyy/mm/dd', direction: 'horizontal', // or 'vertical' minDate: null, maxDate: null, touchMove: true, animate: true, closeOnSelect: true, monthPicker: true, monthPickerTemplate: '
' + '' + '
' + '' + '
', yearPicker: true, yearPickerTemplate: '
' + '' + '' + '' + '
', weekHeader: true, // Common settings scrollToInput: true, inputReadOnly: true, convertToPopover: true, onlyInPopover: false, toolbar: true, toolbarCloseText: 'Done', toolbarTemplate: '
' + '
' + '{{yearPicker}}' + '{{monthPicker}}' + // '{{closeText}}' + '
' + '
', /* Callbacks onMonthAdd onChange onOpen onClose onDayClick onMonthYearChangeStart onMonthYearChangeEnd */ }; }($); /* global $:true */ /* jshint unused:false*/ + function($) { "use strict"; var defaults; var formatNumber = function (n) { return n < 10 ? "0" + n : n; } var Datetime = function(input, params) { this.input = $(input); this.params = params || {}; this.initMonthes = params.monthes this.initYears = params.years var p = $.extend({}, params, this.getConfig()); $(this.input).picker(p); } Datetime.prototype = { getDays : function(max) { var days = []; for(var i=1; i<= (max||31);i++) { days.push(i < 10 ? "0"+i : i); } return days; }, getDaysByMonthAndYear : function(month, year) { var int_d = new Date(year, parseInt(month)+1-1, 1); var d = new Date(int_d - 1); return this.getDays(d.getDate()); }, getConfig: function() { var today = new Date(), params = this.params, self = this, lastValidValues; var config = { rotateEffect: false, //为了性能 cssClass: 'datetime-picker', value: [today.getFullYear(), formatNumber(today.getMonth()+1), formatNumber(today.getDate()), formatNumber(today.getHours()), (formatNumber(today.getMinutes()))], onChange: function (picker, values, displayValues) { var cols = picker.cols; var days = self.getDaysByMonthAndYear(values[1], values[0]); var currentValue = values[2]; if(currentValue > days.length) currentValue = days.length; picker.cols[4].setValue(currentValue); //check min and max var current = new Date(values[0]+'-'+values[1]+'-'+values[2]); var valid = true; if(params.min) { var min = new Date(typeof params.min === "function" ? params.min() : params.min); if(current < +min) { picker.setValue(lastValidValues); valid = false; } } if(params.max) { var max = new Date(typeof params.max === "function" ? params.max() : params.max); if(current > +max) { picker.setValue(lastValidValues); valid = false; } } valid && (lastValidValues = values); if (self.params.onChange) { self.params.onChange.apply(this, arguments); } }, formatValue: function (p, values, displayValues) { return self.params.format(p, values, displayValues); }, cols: [ { values: this.initYears }, { divider: true, // 这是一个分隔符 content: params.yearSplit }, { values: this.initMonthes }, { divider: true, // 这是一个分隔符 content: params.monthSplit }, { values: (function () { var dates = []; for (var i=1; i<=31; i++) dates.push(formatNumber(i)); return dates; })() }, ] } if (params.dateSplit) { config.cols.push({ divider: true, content: params.dateSplit }) } config.cols.push({ divider: true, content: params.datetimeSplit }) var times = self.params.times(); if (times && times.length) { config.cols = config.cols.concat(times); } var inputValue = this.input.val(); if(inputValue) config.value = params.parse(inputValue); if(this.params.value) { this.input.val(this.params.value); config.value = params.parse(this.params.value); } return config; } } $.fn.datetimePicker = function(params) { params = $.extend({}, defaults, params); return this.each(function() { if(!this) return; var $this = $(this); var datetime = $this.data("datetime"); if(!datetime) $this.data("datetime", new Datetime(this, params)); return datetime; }); }; defaults = $.fn.datetimePicker.prototype.defaults = { input: undefined, // 默认值 min: undefined, // YYYY-MM-DD 最大最小值只比较年月日,不比较时分秒 max: undefined, // YYYY-MM-DD yearSplit: '-', monthSplit: '-', dateSplit: '', // 默认为空 datetimeSplit: ' ', // 日期和时间之间的分隔符,不可为空 monthes: ('01 02 03 04 05 06 07 08 09 10 11 12').split(' '), years: (function () { var arr = []; for (var i = 1950; i <= 2030; i++) { arr.push(i); } return arr; })(), times: function () { return [ // 自定义的时间 { values: (function () { var hours = []; for (var i=0; i<24; i++) hours.push(formatNumber(i)); return hours; })() }, { divider: true, // 这是一个分隔符 content: ':' }, { values: (function () { var minutes = []; for (var i=0; i<60; i++) minutes.push(formatNumber(i)); return minutes; })() } ]; }, format: function (p, values) { // 数组转换成字符串 return p.cols.map(function (col) { return col.value || col.content; }).join(''); }, parse: function (str) { // 把字符串转换成数组,用来解析初始值 // 如果你的定制的初始值格式无法被这个默认函数解析,请自定义这个函数。比如你的时间是 '子时' 那么默认情况这个'时'会被当做分隔符而导致错误,所以你需要自己定义parse函数 // 默认兼容的分隔符 var t = str.split(this.datetimeSplit); return t[0].split(/\D/).concat(t[1].split(/:|时|分|秒/)).filter(function (d) { return !!d; }) } } }($); /*====================================================== ************ Picker ************ ======================================================*/ /* global $:true */ + function($) { "use strict"; //Popup 和 picker 之类的不要共用一个弹出方法,因为这样会导致 在 popup 中再弹出 picker 的时候会有问题。 $.openPopup = function(popup, className) { $.closePopup(); popup = $(popup); popup.show(); popup.width(); popup.addClass("weui-popup__container--visible"); var modal = popup.find(".weui-popup__modal"); modal.width(); modal.transitionEnd(function() { modal.trigger("open"); }); } $.closePopup = function(container, remove) { container = $(container || ".weui-popup__container--visible"); container.find('.weui-popup__modal').transitionEnd(function() { var $this = $(this); $this.trigger("close"); container.hide(); remove && container.remove(); }) container.removeClass("weui-popup__container--visible") }; $(document).on("click", ".close-popup, .weui-popup__overlay", function() { $.closePopup(); }) .on("click", ".open-popup", function() { $($(this).data("target")).popup(); }) .on("click", ".weui-popup__container", function(e) { if($(e.target).hasClass("weui-popup__container")) $.closePopup(); }) $.fn.popup = function() { return this.each(function() { $.openPopup(this); }); }; }($); /* =============================================================================== ************ Notification ************ =============================================================================== */ /* global $:true */ +function ($) { "use strict"; var noti, defaults, timeout, start, diffX, diffY; var touchStart = function(e) { var p = $.getTouchPosition(e); start = p; diffX = diffY = 0; noti.addClass("touching"); }; var touchMove = function(e) { if(!start) return false; e.preventDefault(); e.stopPropagation(); var p = $.getTouchPosition(e); diffX = p.x - start.x; diffY = p.y - start.y; if(diffY > 0) { diffY = Math.sqrt(diffY); } noti.css("transform", "translate3d(0, "+diffY+"px, 0)"); }; var touchEnd = function() { noti.removeClass("touching"); noti.attr("style", ""); if(diffY < 0 && (Math.abs(diffY) > noti.height()*0.38)) { $.closeNotification(); } if(Math.abs(diffX) <= 1 && Math.abs(diffY) <= 1) { noti.trigger("noti-click"); } start = false; }; var attachEvents = function(el) { el.on($.touchEvents.start, touchStart); el.on($.touchEvents.move, touchMove); el.on($.touchEvents.end, touchEnd); }; $.notification = $.noti = function(params) { params = $.extend({}, defaults, params); noti = $(".weui-notification"); if(!noti[0]) { // create a new notification noti = $('
').appendTo(document.body); attachEvents(noti); } noti.off("noti-click"); //the click event is not correct sometime: it will trigger when user is draging. if(params.onClick) noti.on("noti-click", function() { params.onClick(params.data); }); noti.html($.t7.compile(params.tpl)(params)); noti.show(); noti.addClass("weui-notification--in"); noti.data("params", params); var startTimeout = function() { if(timeout) { clearTimeout(timeout); timeout = null; } timeout = setTimeout(function() { if(noti.hasClass("weui-notification--touching")) { startTimeout(); } else { $.closeNotification(); } }, params.time); }; startTimeout(); }; $.closeNotification = function() { timeout && clearTimeout(timeout); timeout = null; var noti = $(".weui-notification").removeClass("weui-notification--in").transitionEnd(function() { $(this).remove(); }); if(noti[0]) { var params = $(".weui-notification").data("params"); if(params && params.onClose) { params.onClose(params.data); } } }; defaults = $.noti.prototype.defaults = { title: undefined, text: undefined, media: undefined, time: 4000, onClick: undefined, onClose: undefined, data: undefined, tpl: '
' + '{{#if media}}
{{media}}
{{/if}}' + '
' + '{{#if title}}
{{title}}
{{/if}}' + '{{#if text}}
{{text}}
{{/if}}' + '
' + '
' + '
' }; }($); + function($) { "use strict"; var timeout; $.toptip = function(text, duration, type) { if(!text) return; if(typeof duration === typeof "a") { type = duration; duration = undefined; } duration = duration || 3000; var className = type ? 'bg-' + type : 'bg-danger'; var $t = $('.weui-toptips').remove(); $t = $('
').appendTo(document.body); $t.html(text); $t[0].className = 'weui-toptips ' + className clearTimeout(timeout); if(!$t.hasClass('weui-toptips_visible')) { $t.show().width(); $t.addClass('weui-toptips_visible'); } timeout = setTimeout(function() { $t.removeClass('weui-toptips_visible').transitionEnd(function() { $t.remove(); }); }, duration); } }($); /* global $:true */ + function($) { "use strict"; var Slider = function (container, arg) { this.container = $(container); this.handler = this.container.find('.weui-slider__handler') this.track = this.container.find('.weui-slider__track') this.value = this.container.find('.weui-slider-box__value') this.bind() if (typeof arg === 'function') { this.callback = arg } } Slider.prototype.bind = function () { this.container .on($.touchEvents.start, $.proxy(this.touchStart, this)) .on($.touchEvents.end, $.proxy(this.touchEnd, this)); $(document.body).on($.touchEvents.move, $.proxy(this.touchMove, this)) // move even outside container } Slider.prototype.touchStart = function (e) { e.preventDefault() this.start = $.getTouchPosition(e) this.width = this.container.find('.weui-slider__inner').width() this.left = parseInt(this.container.find('.weui-slider__handler').css('left')) this.touching = true } Slider.prototype.touchMove = function (e) { if (!this.touching) return true var p = $.getTouchPosition(e) var distance = p.x - this.start.x var left = distance + this.left var per = parseInt(left / this.width * 100) if (per < 0) per = 0 if (per > 100) per = 100 this.handler.css('left', per + '%') this.track.css('width', per + '%') this.value.text(per) this.callback && this.callback.call(this, per) this.container.trigger('change', per) } Slider.prototype.touchEnd = function (e) { this.touching = false } $.fn.slider = function (arg) { this.each(function () { var $this = $(this) var slider = $this.data('slider') if (slider) return slider; else $this.data('slider', new Slider(this, arg)) }) } }($); /* =============================================================================== ************ Swipeout ************ =============================================================================== */ /* global $:true */ +function ($) { "use strict"; var cache = []; var TOUCHING = 'swipeout-touching' var Swipeout = function(el) { this.container = $(el); this.mover = this.container.find('>.weui-cell__bd') this.attachEvents(); cache.push(this) } Swipeout.prototype.touchStart = function(e) { var p = $.getTouchPosition(e); this.container.addClass(TOUCHING); this.start = p; this.startX = 0; this.startTime = + new Date; var transform = this.mover.css('transform').match(/-?[\d\.]+/g) if (transform && transform.length) this.startX = parseInt(transform[4]) this.diffX = this.diffY = 0; this._closeOthers() this.limit = this.container.find('>.weui-cell__ft').width() || 68; // 因为有的时候初始化的时候元素是隐藏的(比如在对话框内),所以在touchstart的时候计算宽度而不是初始化的时候 }; Swipeout.prototype.touchMove= function(e) { if(!this.start) return true; var p = $.getTouchPosition(e); this.diffX = p.x - this.start.x; this.diffY = p.y - this.start.y; if (Math.abs(this.diffX) < Math.abs(this.diffY)) { // 说明是上下方向在拖动 this.close() this.start = false return true; } e.preventDefault(); e.stopPropagation(); var x = this.diffX + this.startX if (x > 0) x = 0; if (Math.abs(x) > this.limit) x = - (Math.pow(-(x+this.limit), .7) + this.limit) this.mover.css("transform", "translate3d("+x+"px, 0, 0)"); }; Swipeout.prototype.touchEnd = function() { if (!this.start) return true; this.start = false; var x = this.diffX + this.startX var t = new Date - this.startTime; if (this.diffX < -5 && t < 200) { // 向左快速滑动,则打开 this.open() } else if (this.diffX >= 0 && t < 200) { // 向右快速滑动,或者单击,则关闭 this.close() } else if (x > 0 || -x <= this.limit / 2) { this.close() } else { this.open() } }; Swipeout.prototype.close = function() { this.container.removeClass(TOUCHING); this.mover.css("transform", "translate3d(0, 0, 0)"); this.container.trigger('swipeout-close'); } Swipeout.prototype.open = function() { this.container.removeClass(TOUCHING); this._closeOthers() this.mover.css("transform", "translate3d(" + (-this.limit) + "px, 0, 0)"); this.container.trigger('swipeout-open'); } Swipeout.prototype.attachEvents = function() { var el = this.mover; el.on($.touchEvents.start, $.proxy(this.touchStart, this)); el.on($.touchEvents.move, $.proxy(this.touchMove, this)); el.on($.touchEvents.end, $.proxy(this.touchEnd, this)); } Swipeout.prototype._closeOthers = function() { //close others var self = this cache.forEach(function (s) { if (s !== self) s.close() }) } var swipeout = function(el) { return new Swipeout(el); }; $.fn.swipeout = function (arg) { return this.each(function() { var $this = $(this) var s = $this.data('swipeout') || swipeout(this); $this.data('swipeout', s); if (typeof arg === typeof 'a') { s[arg]() } }); } $('.weui-cell_swiped').swipeout() // auto init }($);