/*! * @wcjiang/notify v2.0.11 * JS achieve the browser title flashing , scrolling, voice prompts , chrome notice. * * Copyright (c) 2018 kenny wang * http://jaywcjlove.github.io/iNotify * * Licensed under the MIT license. */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.Notify = factory()); }(this, (function () { 'use strict'; // 提醒是否添加chrome通知 if (window.Notification && window.Notification.permission !== 'granted') { window.Notification.requestPermission(); } var iconURL = ''; var repeatableEffects = ['flash', 'scroll']; var defaultNotification = { title: 'iNotify !', body: 'You have a new message.', openurl: '' }; function jsonArguments(news, olds) { for (var a in olds) { if (news[a]) { olds[a] = news[a]; } } return olds; } function isArray(value) { return Object.prototype.toString.call(value) === '[object Array]'; } function createAudio(url) { var audioElm = document.createElement('audio'); var source = void 0; if (isArray(url) && url.length > 0) { for (var i = 0; i < url.length; i++) { source = document.createElement('source'); source.src = url[i]; source.type = 'audio/' + getExtension(url[i]); audioElm.appendChild(source); } } else { audioElm.src = url; } return audioElm; } function getFavicon(setting) { var ic = document.querySelectorAll('link[rel~=shortcut]')[0]; if (!ic) { ic = changeFavicon('O', setting); } return ic; } function getExtension(fileName) { return fileName.match(/\.([^\\.]+)$/)[1]; } function changeFavicon(num, settings) { var canvas = document.createElement('canvas'); var head = document.getElementsByTagName('head')[0]; var linkTag = document.createElement('link'); var ctx = null; canvas.height = 32; canvas.width = 32; ctx = canvas.getContext('2d'); ctx.fillStyle = settings.backgroundColor; ctx.fillRect(0, 0, 32, 32); ctx.textAlign = 'center'; ctx.font = '22px "helvetica", sans-serif'; ctx.fillStyle = settings.textColor; num && ctx.fillText(num, 16, 24); // 生成到 linkTag.setAttribute('rel', 'shortcut icon'); linkTag.setAttribute('type', 'image/x-icon'); linkTag.setAttribute('id', 'new' + settings.id); linkTag.setAttribute('href', canvas.toDataURL('image/png')); iconURL = canvas.toDataURL('image/png'); return head.appendChild(linkTag); } function Notify(config) { if (config) { this.init(config); } } Notify.prototype = { init: function init(config) { if (!config) { config = {}; } this.interval = config.interval || 100; // 响应时长 this.effect = config.effect || 'flash'; // 效果 this.title = config.title || document.title; // 标题 this.message = config.message || this.title; // 原来的标题 this.onclick = config.onclick || this.onclick; // 点击事件 this.openurl = config.openurl || this.openurl; // 点击事件 this.updateFavicon = config.updateFavicon || { id: 'favicon', textColor: '#fff', backgroundColor: '#2F9A00' }; this.audio = config.audio || ''; this.favicon = getFavicon(this.updateFavicon); this.cloneFavicon = this.favicon.cloneNode(true); iconURL = config.notification && config.notification.icon ? config.notification.icon : config.icon ? config.icon : this.favicon.href; defaultNotification.icon = iconURL; this.notification = config.notification || defaultNotification; // 初始化生成声音文件节点 if (this.audio && this.audio.file) { this.setURL(this.audio.file); } return this; }, render: function render() { if (this.effect === 'flash') { document.title = this.title === document.title ? this.message : this.title; } else if (this.effect === 'scroll') { var title = this.message || document.title; if (!this.scrollTitle || !this.scrollTitle.slice(1)) { document.title = title; this.scrollTitle = title; } else { this.scrollTitle = this.scrollTitle.slice(1); document.title = this.scrollTitle; } } return this; }, // 设置标题 setTitle: function setTitle(str) { if (str === true) { if (repeatableEffects.indexOf(this.effect) >= 0) { return this.addTimer(); } } else if (str) { this.message = str; this.scrollTitle = ''; this.addTimer(); } else { this.clearTimer(); } return this; }, setURL: function setURL(url) { if (url) { if (this.audioElm) { this.audioElm.remove(); } this.audioElm = createAudio(url); document.body.appendChild(this.audioElm); } return this; }, loopPlay: function loopPlay() { this.setURL(); this.audioElm.loop = true; this.player(); return this; }, stopPlay: function stopPlay() { this.audioElm && (this.audioElm.loop = false, this.audioElm.pause()); return this; }, // 播放声音 player: function player() { if (!this.audio || !this.audio.file) { return; } if (!this.audioElm) { this.audioElm = createAudio(this.audio.file); document.body.appendChild(this.audioElm); } this.audioElm.play(); return this; }, notify: function notify(json) { var nt = this.notification; var url = json.openurl ? json.openurl : this.openurl; var onclick = json.onclick ? json.onclick : this.onclick; if (window.Notification) { if (json) { nt = jsonArguments(json, nt); } else { nt = defaultNotification; } var option = {}; option.icon = json.icon ? json.icon : iconURL; option.body = nt.body; if (json.dir) option.dir = json.dir; var n = new Notification(nt.title, option); n.onclick = function () { onclick && typeof onclick === 'function' && onclick(n); url && window.open(url); }; n.onshow = function () { json.onshow && typeof json.onshow === 'function' && json.onshow(n); }; n.onclose = function () { json.onclose && typeof json.onclose === 'function' && json.onclose(n); }; n.onerror = function () { json.onerror && typeof json.onerror === 'function' && json.onerror(n); }; this.Notifiy = n; } return this; }, // 是否许可弹框通知 isPermission: function isPermission() { return window.Notification && Notification.permission === 'granted'; }, // 设置时间间隔 setInterval: function setInterval(num) { if (num) { this.interval = num; this.addTimer(); } return this; }, // 设置网页Icon setFavicon: function setFavicon(num) { if (!num && num !== 0) { return this.faviconClear(); } var oldicon = document.getElementById('new' + this.updateFavicon.id); if (this.favicon) { this.favicon.remove(); } if (oldicon) { oldicon.remove(); } this.updateFavicon.num = num; changeFavicon(num, this.updateFavicon); return this; }, // 设置 Favicon 文字颜色 setFaviconColor: function setFaviconColor(color) { if (color) { this.faviconRemove(); this.updateFavicon.textColor = color; changeFavicon(this.updateFavicon.num, this.updateFavicon); } return this; }, // 设置 Favicon 背景颜色 setFaviconBackgroundColor: function setFaviconBackgroundColor(color) { if (color) { this.faviconRemove(); this.updateFavicon.backgroundColor = color; changeFavicon(this.updateFavicon.num, this.updateFavicon); } return this; }, faviconRemove: function faviconRemove() { this.faviconClear(); var oldicon = document.getElementById('new' + this.updateFavicon.id); if (this.favicon) { this.favicon.remove(); } if (oldicon) { oldicon.remove(); } }, // 添加计数器 addTimer: function addTimer() { this.clearTimer(); if (repeatableEffects.indexOf(this.effect) >= 0) { this.timer = setInterval(this.render.bind(this), this.interval); } return this; }, close: function close() { if (this.Notifiy) this.Notifiy.close(); }, // 清除Icon faviconClear: function faviconClear() { var newicon = document.getElementById('new' + this.updateFavicon.id); var head = document.getElementsByTagName('head')[0]; var ficon = document.querySelectorAll('link[rel~=shortcut]'); newicon && newicon.remove(); if (ficon.length > 0) { for (var i = 0; i < ficon.length; i++) { ficon[i].remove(); } } head.appendChild(this.cloneFavicon); iconURL = this.cloneFavicon.href; this.favicon = this.cloneFavicon; return this; }, // 清除计数器 clearTimer: function clearTimer() { this.timer && clearInterval(this.timer); document.title = this.title; return this; } }; return Notify; })));