You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
240 lines
8.1 KiB
240 lines
8.1 KiB
/**
|
|
* humane.js
|
|
* Humanized Messages for Notifications
|
|
* @author Marc Harter (@wavded)
|
|
* @example
|
|
* humane.log('hello world');
|
|
* @license MIT
|
|
* See more usage examples at: http://wavded.github.com/humane-js/
|
|
*/
|
|
|
|
;!function (name, context, definition) {
|
|
// HACK: Force loading with define to avoid loading issue in Electron
|
|
//if (typeof module !== 'undefined') module.exports = definition(name, context)
|
|
//else if (typeof define === 'function' && typeof define.amd === 'object') define(definition)
|
|
//else context[name] = definition(name, context)
|
|
define(definition);
|
|
}('humane', this, function (name, context) {
|
|
var win = window
|
|
var doc = document
|
|
|
|
var ENV = {
|
|
on: function (el, type, cb) {
|
|
'addEventListener' in win ? el.addEventListener(type,cb,false) : el.attachEvent('on'+type,cb)
|
|
},
|
|
off: function (el, type, cb) {
|
|
'removeEventListener' in win ? el.removeEventListener(type,cb,false) : el.detachEvent('on'+type,cb)
|
|
},
|
|
bind: function (fn, ctx) {
|
|
return function () { fn.apply(ctx,arguments) }
|
|
},
|
|
isArray: Array.isArray || function (obj) { return Object.prototype.toString.call(obj) === '[object Array]' },
|
|
config: function (preferred, fallback) {
|
|
return preferred != null ? preferred : fallback
|
|
},
|
|
transSupport: false,
|
|
useFilter: /msie [678]/i.test(navigator.userAgent), // sniff, sniff
|
|
_checkTransition: function () {
|
|
var el = doc.createElement('div')
|
|
var vendors = { webkit: 'webkit', Moz: '', O: 'o', ms: 'MS' }
|
|
|
|
for (var vendor in vendors)
|
|
if (vendor + 'Transition' in el.style) {
|
|
this.vendorPrefix = vendors[vendor]
|
|
this.transSupport = true
|
|
}
|
|
}
|
|
}
|
|
ENV._checkTransition()
|
|
|
|
var Humane = function (o) {
|
|
o || (o = {})
|
|
this.queue = []
|
|
this.baseCls = o.baseCls || 'humane'
|
|
this.addnCls = o.addnCls || ''
|
|
this.timeout = 'timeout' in o ? o.timeout : 2500
|
|
this.waitForMove = o.waitForMove || false
|
|
this.clickToClose = o.clickToClose || false
|
|
this.timeoutAfterMove = o.timeoutAfterMove || false
|
|
this.container = o.container
|
|
|
|
try { this._setupEl() } // attempt to setup elements
|
|
catch (e) {
|
|
ENV.on(win,'load',ENV.bind(this._setupEl, this)) // dom wasn't ready, wait till ready
|
|
}
|
|
}
|
|
|
|
Humane.prototype = {
|
|
constructor: Humane,
|
|
_setupEl: function () {
|
|
var el = doc.createElement('div')
|
|
el.style.display = 'none'
|
|
if (!this.container){
|
|
if(doc.body) this.container = doc.body;
|
|
else throw 'document.body is null'
|
|
}
|
|
this.container.appendChild(el)
|
|
this.el = el
|
|
this.removeEvent = ENV.bind(function(){
|
|
var timeoutAfterMove = ENV.config(this.currentMsg.timeoutAfterMove,this.timeoutAfterMove)
|
|
if (!timeoutAfterMove){
|
|
this.remove()
|
|
} else {
|
|
setTimeout(ENV.bind(this.remove,this),timeoutAfterMove)
|
|
}
|
|
},this)
|
|
|
|
this.transEvent = ENV.bind(this._afterAnimation,this)
|
|
this._run()
|
|
},
|
|
_afterTimeout: function () {
|
|
if (!ENV.config(this.currentMsg.waitForMove,this.waitForMove)) this.remove()
|
|
|
|
else if (!this.removeEventsSet) {
|
|
ENV.on(doc.body,'mousemove',this.removeEvent)
|
|
ENV.on(doc.body,'click',this.removeEvent)
|
|
ENV.on(doc.body,'keypress',this.removeEvent)
|
|
ENV.on(doc.body,'touchstart',this.removeEvent)
|
|
this.removeEventsSet = true
|
|
}
|
|
},
|
|
_run: function () {
|
|
if (this._animating || !this.queue.length || !this.el) return
|
|
|
|
this._animating = true
|
|
if (this.currentTimer) {
|
|
clearTimeout(this.currentTimer)
|
|
this.currentTimer = null
|
|
}
|
|
|
|
var msg = this.queue.shift()
|
|
var clickToClose = ENV.config(msg.clickToClose,this.clickToClose)
|
|
|
|
if (clickToClose) {
|
|
ENV.on(this.el,'click',this.removeEvent)
|
|
ENV.on(this.el,'touchstart',this.removeEvent)
|
|
}
|
|
|
|
var timeout = ENV.config(msg.timeout,this.timeout)
|
|
|
|
if (timeout > 0)
|
|
this.currentTimer = setTimeout(ENV.bind(this._afterTimeout,this), timeout)
|
|
|
|
if (ENV.isArray(msg.html)) msg.html = '<ul><li>'+msg.html.join('<li>')+'</ul>'
|
|
|
|
this.el.innerHTML = msg.html
|
|
this.currentMsg = msg
|
|
this.el.className = this.baseCls
|
|
if (ENV.transSupport) {
|
|
this.el.style.display = 'block'
|
|
setTimeout(ENV.bind(this._showMsg,this),50)
|
|
} else {
|
|
this._showMsg()
|
|
}
|
|
|
|
},
|
|
_setOpacity: function (opacity) {
|
|
if (ENV.useFilter){
|
|
try{
|
|
this.el.filters.item('DXImageTransform.Microsoft.Alpha').Opacity = opacity*100
|
|
} catch(err){}
|
|
} else {
|
|
this.el.style.opacity = String(opacity)
|
|
}
|
|
},
|
|
_showMsg: function () {
|
|
var addnCls = ENV.config(this.currentMsg.addnCls,this.addnCls)
|
|
if (ENV.transSupport) {
|
|
this.el.className = this.baseCls+' '+addnCls+' '+this.baseCls+'-animate'
|
|
}
|
|
else {
|
|
var opacity = 0
|
|
this.el.className = this.baseCls+' '+addnCls+' '+this.baseCls+'-js-animate'
|
|
this._setOpacity(0) // reset value so hover states work
|
|
this.el.style.display = 'block'
|
|
|
|
var self = this
|
|
var interval = setInterval(function(){
|
|
if (opacity < 1) {
|
|
opacity += 0.1
|
|
if (opacity > 1) opacity = 1
|
|
self._setOpacity(opacity)
|
|
}
|
|
else clearInterval(interval)
|
|
}, 30)
|
|
}
|
|
},
|
|
_hideMsg: function () {
|
|
var addnCls = ENV.config(this.currentMsg.addnCls,this.addnCls)
|
|
if (ENV.transSupport) {
|
|
this.el.className = this.baseCls+' '+addnCls
|
|
ENV.on(this.el,ENV.vendorPrefix ? ENV.vendorPrefix+'TransitionEnd' : 'transitionend',this.transEvent)
|
|
}
|
|
else {
|
|
var opacity = 1
|
|
var self = this
|
|
var interval = setInterval(function(){
|
|
if(opacity > 0) {
|
|
opacity -= 0.1
|
|
if (opacity < 0) opacity = 0
|
|
self._setOpacity(opacity);
|
|
}
|
|
else {
|
|
self.el.className = self.baseCls+' '+addnCls
|
|
clearInterval(interval)
|
|
self._afterAnimation()
|
|
}
|
|
}, 30)
|
|
}
|
|
},
|
|
_afterAnimation: function () {
|
|
if (ENV.transSupport) ENV.off(this.el,ENV.vendorPrefix ? ENV.vendorPrefix+'TransitionEnd' : 'transitionend',this.transEvent)
|
|
|
|
if (this.currentMsg.cb) this.currentMsg.cb()
|
|
this.el.style.display = 'none'
|
|
|
|
this._animating = false
|
|
this._run()
|
|
},
|
|
remove: function (e) {
|
|
var cb = typeof e == 'function' ? e : null
|
|
|
|
ENV.off(doc.body,'mousemove',this.removeEvent)
|
|
ENV.off(doc.body,'click',this.removeEvent)
|
|
ENV.off(doc.body,'keypress',this.removeEvent)
|
|
ENV.off(doc.body,'touchstart',this.removeEvent)
|
|
ENV.off(this.el,'click',this.removeEvent)
|
|
ENV.off(this.el,'touchstart',this.removeEvent)
|
|
this.removeEventsSet = false
|
|
|
|
if (cb && this.currentMsg) this.currentMsg.cb = cb
|
|
if (this._animating) this._hideMsg()
|
|
else if (cb) cb()
|
|
},
|
|
log: function (html, o, cb, defaults) {
|
|
var msg = {}
|
|
if (defaults)
|
|
for (var opt in defaults)
|
|
msg[opt] = defaults[opt]
|
|
|
|
if (typeof o == 'function') cb = o
|
|
else if (o)
|
|
for (var opt in o) msg[opt] = o[opt]
|
|
|
|
msg.html = html
|
|
if (cb) msg.cb = cb
|
|
this.queue.push(msg)
|
|
this._run()
|
|
return this
|
|
},
|
|
spawn: function (defaults) {
|
|
var self = this
|
|
return function (html, o, cb) {
|
|
self.log.call(self,html,o,cb,defaults)
|
|
return self
|
|
}
|
|
},
|
|
create: function (o) { return new Humane(o) }
|
|
}
|
|
return new Humane()
|
|
});
|