actionsheet
Version:
actionsheet component for touch device
1,396 lines (1,169 loc) • 34.3 kB
JavaScript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var notice = __webpack_require__(1)
var tap = __webpack_require__(8)
var event = __webpack_require__(4)
__webpack_require__(9)
var as = __webpack_require__(13)
event.bind(document.getElementById('demo'), 'touchstart', tap(function () {
as({
save: {
text: 'save',
callback: function () {
notice('Save tapped', {duration: 2000})
}
},
edit: {
text: 'edit',
redirect: '/'
},
complain: {
text: 'complain',
callback: function () {
notice('Complain tapped', {duration: 2000})
}
},
cancel: {
text: 'cancel'
}
}).then(function () {
console.log('action sheet shown')
})
}))
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
/**
* Notice
*
* A notice message at the top of a webpage.
*
*/
var classes = __webpack_require__(2)
var events = __webpack_require__(4)
var query = __webpack_require__(5)
var tap = __webpack_require__(6)
var hasTouch = 'ontouchend' in window
var zIndex = 999
function create(o) {
var el = document.createElement(o.tag || 'div')
el.className = o.className
el.innerHTML = o.html || ''
if (o.parent) o.parent.appendChild(el)
return el
}
var container
function Notice(msg, options) {
if (! (this instanceof Notice)) return new Notice(msg, options)
options = options || {}
if (!container) {
container = create({
className: 'notice-container',
parent: options.parent || document.body
})
}
if (options.type == 'success') options.duration = options.duration || 2000
var closable = options.hasOwnProperty('closable')? options.closable : true
var duration = options.duration
if (!closable && duration == null) duration = 2000
options.message = msg
var el = createElement(options, closable)
el.style.zIndex = -- zIndex
this.el = el
container.appendChild(this.el)
this.closeEl = query('.notice-close', el)
this._hideFn = this.hide.bind(this)
if (hasTouch) {
this._tap = tap(this.closeEl, this._hideFn)
} else {
events.bind(this.closeEl, 'click', this._hideFn)
}
if (duration) {
setTimeout(this.hide.bind(this), duration)
}
}
Notice.prototype.hide = function(e) {
if (e) {
e.preventDefault()
e.stopPropagation()
}
if (this._hide) return
this._hide = true
var self = this
if (this._tap) {
this._tap.unbind()
} else {
events.bind(this.closeEl, 'click', this._hideFn)
}
dismiss(this.el)
}
Notice.prototype.clear = function () {
var el = this.el
if (el && el.parentNode) {
el.parentNode.removeChild(el)
}
}
function createElement(options, closable) {
var className = 'notice-item' + (options.type
? ' notice-' + options.type
: '')
var item = create({className: className})
create({
className: 'notice-content',
html: options.message,
parent: item
})
if (closable) {
var close = create({
className : 'notice-close',
html: '×',
parent: item
})
}
return item
}
function dismiss(el) {
classes(el).add('notice-dismiss')
setTimeout(function() {
if (el && el.parentNode) {
el.parentNode.removeChild(el)
}
}, 200)
}
module.exports = Notice
/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {
/**
* Module dependencies.
*/
try {
var index = __webpack_require__(3);
} catch (err) {
var index = __webpack_require__(3);
}
/**
* Whitespace regexp.
*/
var re = /\s+/;
/**
* toString reference.
*/
var toString = Object.prototype.toString;
/**
* Wrap `el` in a `ClassList`.
*
* @param {Element} el
* @return {ClassList}
* @api public
*/
module.exports = function(el){
return new ClassList(el);
};
/**
* Initialize a new ClassList for `el`.
*
* @param {Element} el
* @api private
*/
function ClassList(el) {
if (!el || !el.nodeType) {
throw new Error('A DOM element reference is required');
}
this.el = el;
this.list = el.classList;
}
/**
* Add class `name` if not already present.
*
* @param {String} name
* @return {ClassList}
* @api public
*/
ClassList.prototype.add = function(name){
// classList
if (this.list) {
this.list.add(name);
return this;
}
// fallback
var arr = this.array();
var i = index(arr, name);
if (!~i) arr.push(name);
this.el.className = arr.join(' ');
return this;
};
/**
* Remove class `name` when present, or
* pass a regular expression to remove
* any which match.
*
* @param {String|RegExp} name
* @return {ClassList}
* @api public
*/
ClassList.prototype.remove = function(name){
if ('[object RegExp]' == toString.call(name)) {
return this.removeMatching(name);
}
// classList
if (this.list) {
this.list.remove(name);
return this;
}
// fallback
var arr = this.array();
var i = index(arr, name);
if (~i) arr.splice(i, 1);
this.el.className = arr.join(' ');
return this;
};
/**
* Remove all classes matching `re`.
*
* @param {RegExp} re
* @return {ClassList}
* @api private
*/
ClassList.prototype.removeMatching = function(re){
var arr = this.array();
for (var i = 0; i < arr.length; i++) {
if (re.test(arr[i])) {
this.remove(arr[i]);
}
}
return this;
};
/**
* Toggle class `name`, can force state via `force`.
*
* For browsers that support classList, but do not support `force` yet,
* the mistake will be detected and corrected.
*
* @param {String} name
* @param {Boolean} force
* @return {ClassList}
* @api public
*/
ClassList.prototype.toggle = function(name, force){
// classList
if (this.list) {
if ("undefined" !== typeof force) {
if (force !== this.list.toggle(name, force)) {
this.list.toggle(name); // toggle again to correct
}
} else {
this.list.toggle(name);
}
return this;
}
// fallback
if ("undefined" !== typeof force) {
if (!force) {
this.remove(name);
} else {
this.add(name);
}
} else {
if (this.has(name)) {
this.remove(name);
} else {
this.add(name);
}
}
return this;
};
/**
* Return an array of classes.
*
* @return {Array}
* @api public
*/
ClassList.prototype.array = function(){
var className = this.el.getAttribute('class') || '';
var str = className.replace(/^\s+|\s+$/g, '');
var arr = str.split(re);
if ('' === arr[0]) arr.shift();
return arr;
};
/**
* Check if class `name` is present.
*
* @param {String} name
* @return {ClassList}
* @api public
*/
ClassList.prototype.has =
ClassList.prototype.contains = function(name){
return this.list
? this.list.contains(name)
: !! ~index(this.array(), name);
};
/***/ },
/* 3 */
/***/ function(module, exports) {
module.exports = function(arr, obj){
if (arr.indexOf) return arr.indexOf(obj);
for (var i = 0; i < arr.length; ++i) {
if (arr[i] === obj) return i;
}
return -1;
};
/***/ },
/* 4 */
/***/ function(module, exports) {
var bind = window.addEventListener ? 'addEventListener' : 'attachEvent',
unbind = window.removeEventListener ? 'removeEventListener' : 'detachEvent',
prefix = bind !== 'addEventListener' ? 'on' : '';
/**
* Bind `el` event `type` to `fn`.
*
* @param {Element} el
* @param {String} type
* @param {Function} fn
* @param {Boolean} capture
* @return {Function}
* @api public
*/
exports.bind = function(el, type, fn, capture){
el[bind](prefix + type, fn, capture || false);
return fn;
};
/**
* Unbind `el` event `type`'s callback `fn`.
*
* @param {Element} el
* @param {String} type
* @param {Function} fn
* @param {Boolean} capture
* @return {Function}
* @api public
*/
exports.unbind = function(el, type, fn, capture){
el[unbind](prefix + type, fn, capture || false);
return fn;
};
/***/ },
/* 5 */
/***/ function(module, exports) {
function one(selector, el) {
return el.querySelector(selector);
}
exports = module.exports = function(selector, el){
el = el || document;
return one(selector, el);
};
exports.all = function(selector, el){
el = el || document;
return el.querySelectorAll(selector);
};
exports.engine = function(obj){
if (!obj.one) throw new Error('.one callback required');
if (!obj.all) throw new Error('.all callback required');
one = obj.one;
exports.all = obj.all;
return exports;
};
/***/ },
/* 6 */
/***/ function(module, exports, __webpack_require__) {
/**
* Module Dependencies
*/
var event = __webpack_require__(4),
bind = __webpack_require__(7);
/**
* Expose `Tap`
*/
module.exports = Tap;
/**
* Touch support
*/
var support = 'ontouchstart' in window;
/**
* Tap on `el` to trigger a `fn`
*
* Tap will not fire if you move your finger
* to scroll
*
* @param {Element} el
* @param {Function} fn
*/
function Tap(el, fn) {
if(!(this instanceof Tap)) return new Tap(el, fn);
this.el = el;
this.fn = fn || function() {};
this.tap = true;
if (support) {
this.ontouchmove = bind(this, this.touchmove);
this.ontouchend = bind(this, this.touchend);
event.bind(el, 'touchmove', this.ontouchmove);
event.bind(el, 'touchend', this.ontouchend);
} else {
event.bind(el, 'click', this.fn);
}
}
/**
* Touch end
*
* @param {Event} e
* @return {Tap}
* @api private
*/
Tap.prototype.touchend = function(e) {
if (this.tap) this.fn(e);
this.tap = true;
event.bind(this.el, 'touchmove', this.ontouchmove);
return this;
};
/**
* Touch move
*
* @return {Tap}
* @api private
*/
Tap.prototype.touchmove = function() {
this.tap = false;
event.unbind(this.el, 'touchmove', this.ontouchmove);
return this;
};
/**
* Unbind the tap
*
* @return {Tap}
* @api public
*/
Tap.prototype.unbind = function() {
event.unbind(this.el, 'touchend', this.ontouchend);
event.unbind(this.el, 'click', this.fn);
return this;
};
/***/ },
/* 7 */
/***/ function(module, exports) {
/**
* Slice reference.
*/
var slice = [].slice;
/**
* Bind `obj` to `fn`.
*
* @param {Object} obj
* @param {Function|String} fn or string
* @return {Function}
* @api public
*/
module.exports = function(obj, fn){
if ('string' == typeof fn) fn = obj[fn];
if ('function' != typeof fn) throw new Error('bind() requires a function');
var args = slice.call(arguments, 2);
return function(){
return fn.apply(obj, args.concat(slice.call(arguments)));
}
};
/***/ },
/* 8 */
/***/ function(module, exports) {
var endEvents = [
'touchend'
]
module.exports = Tap
// default tap timeout in ms
Tap.timeout = 200
function Tap(callback, options) {
options = options || {}
// if the user holds his/her finger down for more than 200ms,
// then it's not really considered a tap.
// however, you can make this configurable.
var timeout = options.timeout || Tap.timeout
// to keep track of the original listener
listener.handler = callback
return listener
// el.addEventListener('touchstart', listener)
function listener(e1) {
// tap should only happen with a single finger
if (!e1.touches || e1.touches.length > 1) return
var el = e1.target
var context = this
var args = arguments;
var timeout_id = setTimeout(cleanup, timeout)
el.addEventListener('touchmove', cleanup)
endEvents.forEach(function (event) {
el.addEventListener(event, done)
})
function done(e2) {
// since touchstart is added on the same tick
// and because of bubbling,
// it'll execute this on the same touchstart.
// this filters out the same touchstart event.
if (e1 === e2) return
cleanup()
// already handled
if (e2.defaultPrevented) return
// overwrite these functions so that they all to both start and events.
var preventDefault = e1.preventDefault
var stopPropagation = e1.stopPropagation
e1.stopPropagation = function () {
stopPropagation.call(e1)
stopPropagation.call(e2)
}
e1.preventDefault = function () {
preventDefault.call(e1)
preventDefault.call(e2)
}
// calls the handler with the `end` event,
// but i don't think it matters.
callback.apply(context, args)
}
// cleanup end events
// to cancel the tap, just run this early
function cleanup(e2) {
// if it's the same event as the origin,
// then don't actually cleanup.
// hit issues with this - don't remember
if (e1 === e2) return
clearTimeout(timeout_id)
el.removeEventListener('touchmove', cleanup)
endEvents.forEach(function (event) {
el.removeEventListener(event, done)
})
}
}
}
/***/ },
/* 9 */
/***/ function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(10);
if(typeof content === 'string') content = [[module.id, content, '']];
// add the styles to the DOM
var update = __webpack_require__(12)(content, {});
if(content.locals) module.exports = content.locals;
// Hot Module Replacement
if(false) {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!./node_modules/css-loader/index.js!./style.css", function() {
var newContent = require("!!./node_modules/css-loader/index.js!./style.css");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
}
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}
/***/ },
/* 10 */
/***/ function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(11)();
// imports
// module
exports.push([module.id, ".actionsheet-overlay {\n background-color: rgba(0,0,0,0);\n position: fixed;\n z-index: 998;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n transition: all 300ms ease-out;\n}\n.actionsheet-overlay.active{\n background-color: rgba(0,0,0,0.2);\n}\n.actionsheet {\n position: absolute;\n font-family:\"Helvetica Neue\", Helvetica,sans-serif;\n left: 2px;\n right: 2px;\n bottom: 0px;\n z-index: 999;\n transform: translateY(110%);\n transition: all 300ms ease-out;\n}\n.actionsheet-overlay.active .actionsheet{\n transform: translateY(0);\n}\n.actionsheet-item {\n color: #000;\n line-height: 2.5;\n font-size: 18px;\n background-color: rgba(255,255,255,0.8);\n text-align: center;\n user-select: none;\n -webkit-user-select: none;\n}\n.actionsheet-item:active,\n.actionsheet-item:hover {\n background-color: rgba(255,255,255,0.3);\n}\n.actionsheet-foot {\n margin-top: 4px;\n}\n.actionsheet-item + .actionsheet-item {\n border-top: 1px solid rgba(0,0,0,0.2);\n}\n", ""]);
// exports
/***/ },
/* 11 */
/***/ function(module, exports) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
module.exports = function() {
var list = [];
// return the list of modules as css string
list.toString = function toString() {
var result = [];
for(var i = 0; i < this.length; i++) {
var item = this[i];
if(item[2]) {
result.push("@media " + item[2] + "{" + item[1] + "}");
} else {
result.push(item[1]);
}
}
return result.join("");
};
// import a list of modules into the list
list.i = function(modules, mediaQuery) {
if(typeof modules === "string")
modules = [[null, modules, ""]];
var alreadyImportedModules = {};
for(var i = 0; i < this.length; i++) {
var id = this[i][0];
if(typeof id === "number")
alreadyImportedModules[id] = true;
}
for(i = 0; i < modules.length; i++) {
var item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
if(mediaQuery && !item[2]) {
item[2] = mediaQuery;
} else if(mediaQuery) {
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
}
list.push(item);
}
}
};
return list;
};
/***/ },
/* 12 */
/***/ function(module, exports, __webpack_require__) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
var stylesInDom = {},
memoize = function(fn) {
var memo;
return function () {
if (typeof memo === "undefined") memo = fn.apply(this, arguments);
return memo;
};
},
isOldIE = memoize(function() {
return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
}),
getHeadElement = memoize(function () {
return document.head || document.getElementsByTagName("head")[0];
}),
singletonElement = null,
singletonCounter = 0,
styleElementsInsertedAtTop = [];
module.exports = function(list, options) {
if(true) {
if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
}
options = options || {};
// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
// tags it will allow on a page
if (typeof options.singleton === "undefined") options.singleton = isOldIE();
// By default, add <style> tags to the bottom of <head>.
if (typeof options.insertAt === "undefined") options.insertAt = "bottom";
var styles = listToStyles(list);
addStylesToDom(styles, options);
return function update(newList) {
var mayRemove = [];
for(var i = 0; i < styles.length; i++) {
var item = styles[i];
var domStyle = stylesInDom[item.id];
domStyle.refs--;
mayRemove.push(domStyle);
}
if(newList) {
var newStyles = listToStyles(newList);
addStylesToDom(newStyles, options);
}
for(var i = 0; i < mayRemove.length; i++) {
var domStyle = mayRemove[i];
if(domStyle.refs === 0) {
for(var j = 0; j < domStyle.parts.length; j++)
domStyle.parts[j]();
delete stylesInDom[domStyle.id];
}
}
};
}
function addStylesToDom(styles, options) {
for(var i = 0; i < styles.length; i++) {
var item = styles[i];
var domStyle = stylesInDom[item.id];
if(domStyle) {
domStyle.refs++;
for(var j = 0; j < domStyle.parts.length; j++) {
domStyle.parts[j](item.parts[j]);
}
for(; j < item.parts.length; j++) {
domStyle.parts.push(addStyle(item.parts[j], options));
}
} else {
var parts = [];
for(var j = 0; j < item.parts.length; j++) {
parts.push(addStyle(item.parts[j], options));
}
stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
}
}
}
function listToStyles(list) {
var styles = [];
var newStyles = {};
for(var i = 0; i < list.length; i++) {
var item = list[i];
var id = item[0];
var css = item[1];
var media = item[2];
var sourceMap = item[3];
var part = {css: css, media: media, sourceMap: sourceMap};
if(!newStyles[id])
styles.push(newStyles[id] = {id: id, parts: [part]});
else
newStyles[id].parts.push(part);
}
return styles;
}
function insertStyleElement(options, styleElement) {
var head = getHeadElement();
var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
if (options.insertAt === "top") {
if(!lastStyleElementInsertedAtTop) {
head.insertBefore(styleElement, head.firstChild);
} else if(lastStyleElementInsertedAtTop.nextSibling) {
head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);
} else {
head.appendChild(styleElement);
}
styleElementsInsertedAtTop.push(styleElement);
} else if (options.insertAt === "bottom") {
head.appendChild(styleElement);
} else {
throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
}
}
function removeStyleElement(styleElement) {
styleElement.parentNode.removeChild(styleElement);
var idx = styleElementsInsertedAtTop.indexOf(styleElement);
if(idx >= 0) {
styleElementsInsertedAtTop.splice(idx, 1);
}
}
function createStyleElement(options) {
var styleElement = document.createElement("style");
styleElement.type = "text/css";
insertStyleElement(options, styleElement);
return styleElement;
}
function createLinkElement(options) {
var linkElement = document.createElement("link");
linkElement.rel = "stylesheet";
insertStyleElement(options, linkElement);
return linkElement;
}
function addStyle(obj, options) {
var styleElement, update, remove;
if (options.singleton) {
var styleIndex = singletonCounter++;
styleElement = singletonElement || (singletonElement = createStyleElement(options));
update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
} else if(obj.sourceMap &&
typeof URL === "function" &&
typeof URL.createObjectURL === "function" &&
typeof URL.revokeObjectURL === "function" &&
typeof Blob === "function" &&
typeof btoa === "function") {
styleElement = createLinkElement(options);
update = updateLink.bind(null, styleElement);
remove = function() {
removeStyleElement(styleElement);
if(styleElement.href)
URL.revokeObjectURL(styleElement.href);
};
} else {
styleElement = createStyleElement(options);
update = applyToTag.bind(null, styleElement);
remove = function() {
removeStyleElement(styleElement);
};
}
update(obj);
return function updateStyle(newObj) {
if(newObj) {
if(newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap)
return;
update(obj = newObj);
} else {
remove();
}
};
}
var replaceText = (function () {
var textStore = [];
return function (index, replacement) {
textStore[index] = replacement;
return textStore.filter(Boolean).join('\n');
};
})();
function applyToSingletonTag(styleElement, index, remove, obj) {
var css = remove ? "" : obj.css;
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = replaceText(index, css);
} else {
var cssNode = document.createTextNode(css);
var childNodes = styleElement.childNodes;
if (childNodes[index]) styleElement.removeChild(childNodes[index]);
if (childNodes.length) {
styleElement.insertBefore(cssNode, childNodes[index]);
} else {
styleElement.appendChild(cssNode);
}
}
}
function applyToTag(styleElement, obj) {
var css = obj.css;
var media = obj.media;
if(media) {
styleElement.setAttribute("media", media)
}
if(styleElement.styleSheet) {
styleElement.styleSheet.cssText = css;
} else {
while(styleElement.firstChild) {
styleElement.removeChild(styleElement.firstChild);
}
styleElement.appendChild(document.createTextNode(css));
}
}
function updateLink(linkElement, obj) {
var css = obj.css;
var sourceMap = obj.sourceMap;
if(sourceMap) {
// http://stackoverflow.com/a/26603875
css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
}
var blob = new Blob([css], { type: "text/css" });
var oldSrc = linkElement.href;
linkElement.href = URL.createObjectURL(blob);
if(oldSrc)
URL.revokeObjectURL(oldSrc);
}
/***/ },
/* 13 */
/***/ function(module, exports, __webpack_require__) {
var tap = __webpack_require__(8)
var domify = __webpack_require__(14)
var template = __webpack_require__(15)
var classes = __webpack_require__(2)
var event = __webpack_require__(4)
var detect = __webpack_require__(16)
var transitionEnd = detect.transitionend
document.addEventListener('touchstart', function(){}, true)
var shown
/**
* create action sheet
* option contains key for actions.
* action should contain text and callback
*
* @public
* @param {Object} option
* @returns {Promise}
*/
module.exports = function (option) {
if (shown) return
var el = domify(template)
var body = el.querySelector('.actionsheet-body')
Object.keys(option).forEach(function (key) {
if (key == 'cancel') return
var o = option[key]
body.appendChild(domify('<div class="actionsheet-item" data-action="' + key + '">' + o.text + '</div>'))
})
if (option.cancel) {
var text = option.cancel.text || 'cancel'
body.parentNode.appendChild(domify('<div class="actionsheet-foot"><div class="actionsheet-item cancel">' + text + '</div></div>'))
}
document.body.appendChild(el)
shown = true
var ontap = tap(function (e) {
var target = e.target
if (target.hasAttribute('data-action')){
var action = target.dataset.action
var opt = option[action]
var cb = opt.callback
if (opt.redirect) cb = function () {
window.location.href = opt.redirect
}
var nowait = opt.nowait
if (!cb) return
if (nowait) {
cleanUp()
cb()
} else {
if (cb) cleanUp().then(cb)
}
} else {
cleanUp()
}
})
event.bind(el, 'touchstart', ontap)
function cleanUp() {
return new Promise(function (resolve) {
event.unbind(el, 'touchstart', ontap)
event.bind(el, transitionEnd, end)
classes(el).remove('active')
function end() {
shown = false
event.unbind(el, transitionEnd, end)
if (el.parentNode) el.parentNode.removeChild(el)
resolve()
}
})
}
return new Promise(function (resolve) {
setTimeout(function () {
classes(el).add('active')
resolve()
}, 20)
})
}
/***/ },
/* 14 */
/***/ function(module, exports) {
/**
* Expose `parse`.
*/
module.exports = parse;
/**
* Tests for browser support.
*/
var innerHTMLBug = false;
var bugTestDiv;
if (typeof document !== 'undefined') {
bugTestDiv = document.createElement('div');
// Setup
bugTestDiv.innerHTML = ' <link/><table></table><a href="/a">a</a><input type="checkbox"/>';
// Make sure that link elements get serialized correctly by innerHTML
// This requires a wrapper element in IE
innerHTMLBug = !bugTestDiv.getElementsByTagName('link').length;
bugTestDiv = undefined;
}
/**
* Wrap map from jquery.
*/
var map = {
legend: [1, '<fieldset>', '</fieldset>'],
tr: [2, '<table><tbody>', '</tbody></table>'],
col: [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
// for script/link/style tags to work in IE6-8, you have to wrap
// in a div with a non-whitespace character in front, ha!
_default: innerHTMLBug ? [1, 'X<div>', '</div>'] : [0, '', '']
};
map.td =
map.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
map.option =
map.optgroup = [1, '<select multiple="multiple">', '</select>'];
map.thead =
map.tbody =
map.colgroup =
map.caption =
map.tfoot = [1, '<table>', '</table>'];
map.polyline =
map.ellipse =
map.polygon =
map.circle =
map.text =
map.line =
map.path =
map.rect =
map.g = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">','</svg>'];
/**
* Parse `html` and return a DOM Node instance, which could be a TextNode,
* HTML DOM Node of some kind (<div> for example), or a DocumentFragment
* instance, depending on the contents of the `html` string.
*
* @param {String} html - HTML string to "domify"
* @param {Document} doc - The `document` instance to create the Node for
* @return {DOMNode} the TextNode, DOM Node, or DocumentFragment instance
* @api private
*/
function parse(html, doc) {
if ('string' != typeof html) throw new TypeError('String expected');
// default to the global `document` object
if (!doc) doc = document;
// tag name
var m = /<([\w:]+)/.exec(html);
if (!m) return doc.createTextNode(html);
html = html.replace(/^\s+|\s+$/g, ''); // Remove leading/trailing whitespace
var tag = m[1];
// body support
if (tag == 'body') {
var el = doc.createElement('html');
el.innerHTML = html;
return el.removeChild(el.lastChild);
}
// wrap map
var wrap = map[tag] || map._default;
var depth = wrap[0];
var prefix = wrap[1];
var suffix = wrap[2];
var el = doc.createElement('div');
el.innerHTML = prefix + html + suffix;
while (depth--) el = el.lastChild;
// one element
if (el.firstChild == el.lastChild) {
return el.removeChild(el.firstChild);
}
// several elements
var fragment = doc.createDocumentFragment();
while (el.firstChild) {
fragment.appendChild(el.removeChild(el.firstChild));
}
return fragment;
}
/***/ },
/* 15 */
/***/ function(module, exports) {
module.exports = "<div class=\"actionsheet-overlay\">\n <div class=\"actionsheet\">\n <div class=\"actionsheet-body\">\n </div>\n </div>\n</div>\n";
/***/ },
/* 16 */
/***/ function(module, exports, __webpack_require__) {
exports.transition = __webpack_require__(17)
exports.transform = __webpack_require__(18)
exports.touchAction = __webpack_require__(19)
exports.transitionend = __webpack_require__(20)
exports.has3d = __webpack_require__(21)
/***/ },
/* 17 */
/***/ function(module, exports) {
var styles = [
'webkitTransition',
'MozTransition',
'OTransition',
'msTransition',
'transition'
]
var el = document.createElement('p')
var style
for (var i = 0; i < styles.length; i++) {
if (null != el.style[styles[i]]) {
style = styles[i]
break
}
}
el = null
module.exports = style
/***/ },
/* 18 */
/***/ function(module, exports) {
var styles = [
'webkitTransform',
'MozTransform',
'msTransform',
'OTransform',
'transform'
];
var el = document.createElement('p');
var style;
for (var i = 0; i < styles.length; i++) {
style = styles[i];
if (null != el.style[style]) {
module.exports = style;
break;
}
}
/***/ },
/* 19 */
/***/ function(module, exports) {
/**
* Module exports.
*/
module.exports = touchActionProperty();
/**
* Returns "touchAction", "msTouchAction", or null.
*/
function touchActionProperty(doc) {
if (!doc) doc = document;
var div = doc.createElement('div');
var prop = null;
if ('touchAction' in div.style) prop = 'touchAction';
else if ('msTouchAction' in div.style) prop = 'msTouchAction';
div = null;
return prop;
}
/***/ },
/* 20 */
/***/ function(module, exports) {
/**
* Transition-end mapping
*/
var map = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd',
'msTransition' : 'MSTransitionEnd',
'transition' : 'transitionend'
};
/**
* Expose `transitionend`
*/
var el = document.createElement('p');
for (var transition in map) {
if (null != el.style[transition]) {
module.exports = map[transition];
break;
}
}
/***/ },
/* 21 */
/***/ function(module, exports, __webpack_require__) {
var prop = __webpack_require__(18);
// IE <=8 doesn't have `getComputedStyle`
if (!prop || !window.getComputedStyle) {
module.exports = false;
} else {
var map = {
webkitTransform: '-webkit-transform',
OTransform: '-o-transform',
msTransform: '-ms-transform',
MozTransform: '-moz-transform',
transform: 'transform'
};
// from: https://gist.github.com/lorenzopolidori/3794226
var el = document.createElement('div');
el.style[prop] = 'translate3d(1px,1px,1px)';
document.body.insertBefore(el, null);
var val = getComputedStyle(el).getPropertyValue(map[prop]);
document.body.removeChild(el);
module.exports = null != val && val.length && 'none' != val;
}
/***/ }
/******/ ]);
//# sourceMappingURL=bundle.js.map