Customized alert box at the top right corner, auto close in a few seconds. Click on the alert box will close it immediately and copy the alert message to clipboard.
目前为
// ==UserScript==
// @name elegant alert()
// @namespace http://tampermonkey.net/
// @version 1.01
// @description Customized alert box at the top right corner, auto close in a few seconds. Click on the alert box will close it immediately and copy the alert message to clipboard.
// @author Evan Tseng
// @include http://*
// @include https://*
// @grant none
// ==/UserScript==
(function() {
'use strict';
const boxFont = '400 13pt sans-serif',
boxFontColor = '#024',
boxColor = 'rgba(240,240,210,.8)',
boxHoverColor = 'rgba(250,250,220,.9)',
popColor = '#F44',
countdownColor1 = '#48c',
countdownColor2 = '#d60',
duration = 6000;
var alertWrap=null;
var ElegantAlertBoxWrapper=function(msg){
this.exist=true;
this.createBox = function(text){
var box=this,
alBox=document.createElement('div');
alBox.innerHTML=text + '<div class="bar"></div>';
alBox.onclick=function(){
window.Clipboard.copy(text);
box.close();
};
return alBox;
};
this.show=function(){
var box=this;
setTimeout(function(){
box.elm.setAttribute("class","normal");
setTimeout(function(){
if(box.exist) box.close();
}, duration);
},30);
};
this.close=function(){
var box=this;
box.elm.setAttribute("class","close");
setTimeout(function(){
if(box.exist) {
alertWrap.removeChild(box.elm);
box.exist=false;
}
}, 800);
};
this.elm=this.createBox(msg);
alertWrap.appendChild(this.elm);
this.show();
return this.elm;
};
window.Clipboard = (function(window, document, navigator) {
var textArea,
copy;
function isOS() {
return navigator.userAgent.match(/ipad|iphone/i);
}
function createTextArea(text) {
textArea = document.createElement('textArea');
textArea.value = text;
document.body.appendChild(textArea);
}
function selectText() {
var range,
selection;
if (isOS()) {
range = document.createRange();
range.selectNodeContents(textArea);
selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
textArea.setSelectionRange(0, 999999);
} else {
textArea.select();
}
}
function copyToClipboard() {
document.execCommand('copy');
document.body.removeChild(textArea);
}
copy = function(text) {
createTextArea(text);
selectText();
copyToClipboard();
};
return {
copy: copy
};
})(window, document, navigator);
window.alert=function(message){
if(!alertWrap) {
const css='.elegantAlertBoxWrapper { position:fixed; top:8mm; right:10mm; max-width:40vw; text-align:right; z-index:2147483647; -webkit-user-select:none; user-select:none }'+
'.elegantAlertBoxWrapper>div { position:relative; font:'+ boxFont +'; color:'+ boxFontColor +'; background:'+ popColor +'; max-height:0; overflow:hidden; padding:.15em .5em; margin-bottom: 1.5mm; border-radius:2mm; opacity:0; cursor:pointer; box-shadow: 0 0 0 1px #aa8, 0 1px 2px #aaa; }'+
'.elegantAlertBoxWrapper>div>.bar { position: absolute; left:0; bottom:1px; width:100%; height:2px; background:'+countdownColor1+' }'+
'.elegantAlertBoxWrapper>div.normal { background:'+ boxColor +'; opacity: 1; max-height: 5em; transition:max-height .1s, opacity .1s, background .1s 60ms }'+
'.elegantAlertBoxWrapper>div.normal>.bar, .elegantAlertBoxWrapper>div.close>.bar { background: '+countdownColor2+'; width:0; transition:'+(duration-30)+'ms linear}'+
'.elegantAlertBoxWrapper>div.close { background:'+ boxColor +'; opacity: 0; max-height: 0; padding:0 .5em; margin-bottom: 0; transition: all .8s }'+
'.elegantAlertBoxWrapper>div:hover { background:'+ boxHoverColor +'; box-shadow:0 0 0 1px #aa8, 0 1px 2px #777 }'+
'.elegantAlertBoxWrapper>div:active { box-shadow:0 0 0 1px #aa8, inset 0 1px 2px #777 }',
cssStyle=document.createElement('style');
if(cssStyle.styleSheet) cssStyle.styleSheet.cssText=css;
else cssStyle.appendChild(document.createTextNode(css));
document.querySelector('head').appendChild(cssStyle);
alertWrap=document.createElement('div');
document.body.appendChild(alertWrap);
alertWrap.setAttribute("class","elegantAlertBoxWrapper");
}
var alertBox = new ElegantAlertBoxWrapper(message);
};
})();