There are 8 previous versions of this script.
// ==UserScript==
// @name Script Dialog (userscripts.org)
// @description Simple user script to display a basic dialog to the user.
// @namespace holyschmidt
// @require http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js
// @version 1.03
//
// @credits Idea adapted from "Script Updater" by PhasmaExMachina: http://userscripts.org/scripts/show/57756
//
// @todolist Rounded corners of Dialog in IE
// @todolist Images not shown correctly in <=IE7
//
// @history 1.03 Fixed opacity issue in IE.
// @history 1.02 Fixed majority of CSS issues in IE
// @history 1.01 Added "tabbing" support
// @history 1.00 Initial release
//
// ==/UserScript==
ScriptDialog = {
version:"1.03",
isOpen:false,
isTabbed:false,
tabs:null,
title:"New Dialog",
width:"500px",
init:function(title, width, tabs) {
ScriptDialog.title = title;
ScriptDialog.width = width;
ScriptDialog.tabs = tabs;
ScriptDialog.isTabbed = tabs != null && tabs.length > 1;
},
addStyle:function(css) {
var style = document.createElement('style');
style.type = 'text/css';
style.id = 'ScriptDialogCSS';
document.getElementsByTagName('head')[0].appendChild(style);
if (style.styleSheet) { // IE
style.styleSheet.cssText = css;
} else { // the world
style.appendChild(document.createTextNode(css));
}
},
show:function(SettingsCallback) {
ScriptDialog.addStyle(
"#ScriptDialogMask { position:absolute; width:100%; top:0; left:0; height:100%; background-color:#000; opacity:.7; filter: alpha(opacity = 70); z-index:9997; } \
#ScriptDialogWindow * { font-size:12px; color:#333; font-weight:normal; margin:0; padding:0; background:none; text-decoration:none; font-family:Helvetica Neue,Arial,Helvetica,sans-serif; } \
#ScriptDialogWindow { width:"+ScriptDialog.width+"; margin:auto; top:125px; position:fixed; left:25%; text-align:left; background:#f9f9f9; border:1px outset #333; padding:0; font-family:Arial; font-size:14px; -moz-border-radius:5px; cursor:default; z-index:9998; color:#333; padding-bottom:1em ; } \
#ScriptDialogWindow input { border:1px outset #666; padding:1px 3px 1px 2px; -moz-border-radius:3px; font-size:10px; } \
#ScriptDialogHeader { padding:.5em; border-bottom:1px solid #333; background-color:#999; margin-bottom:.75em; } \
#ScriptDialogHeader img { margin-right:.5em; margin-left:.5em; } \
#ScriptDialogHeader h1 { display:inline; font-size:13px; font-weight:bold; color:#fff; } \
#ScriptDialogHeader input.ScriptTabActive { background:no-repeat 4px center #eee; float:right; margin-right:.5em; } \
#ScriptDialogHeader input.ScriptTabInactive { background:no-repeat 4px center #bbb; float:right; margin-right:.5em; } \
#ScriptDialogHeader input.ScriptTabInactive:hover { background:no-repeat 4px center #FF0000; cursor:pointer; } \
#ScriptDialogBody input.button:hover { background:no-repeat 4px center #FF0000; cursor:pointer; } \
#ScriptDialogBody a { text-decoration:underline; color:#000099; font-weight:bold; } \
#ScriptDialogBody strong { font-weight:bold; } \
#ScriptDialogBody ul { margin-left:2em; } \
#ScriptDialogBody li { list-style-type:circle; } \
#ScriptDialogBody p { font-size:12px; font-weight:normal; margin:1em; } \
#ScriptDialogBody .ScriptDialogTagBodyActive, #ScriptDialogBody .ScriptDialogTagBodyInactive { width:100%; height:100%; } \
#ScriptDialogBody .ScriptDialogTagBodyInactive { display:none; } \
#ScriptDialogClose { float:right; cursor:pointer; height:14px; opacity:.5; filter: alpha(opacity = 50); } \
#ScriptDialogClose:hover { opacity:.9; filter: alpha(opacity = 90); } \
#ScriptDialogFooter { margin:.75em 1em; } \
#ScriptDialogFooter input { border:1px outset #666; padding:3px 5px 5px 20px; background:no-repeat 4px center #eee; -moz-border-radius:3px; cursor:pointer; width:70px; float:right; margin-left:.5em; } \
#ScriptDialogFooter input:hover { background-color:#f9f9f9; } \
#ScriptDialogFooter select { border:1px inset #666; }"
);
var dialogBg = document.createElement('div');
dialogBg.id = "ScriptDialogMask";
document.body.appendChild(dialogBg);
var dialogWrapper = document.createElement('div');
dialogWrapper.setAttribute('style', 'position:absolute; width:100%; top:0; left:0; z-index:9999; max-width:auto; min-width:auto; max-height:auto; min-height:auto;');
dialogWrapper.id = "ScriptDialogWindowWrapper";
var html = new Array();
var dialogBody = document.createElement('div');
dialogBody.id = "ScriptDialogWindow";
html.push('<div id="ScriptDialogHeader">');
html.push('<img id="ScriptDialogClose" src="' + ScriptDialog.icons.close + '" title="Close" alt="close"/>');
if (ScriptDialog.isTabbed) {
for (t = ScriptDialog.tabs.length - 1; t >= 0; t--) {
html.push('<input type="button" class="');
html.push((t==0 ? 'ScriptTabActive' : 'ScriptTabInactive'));
html.push('" value="' + ScriptDialog.tabs[t] + '" />');
}
}
html.push('<img src="' + ScriptDialog.icons.uso + '" align="absmiddle" style="margin-top:-2px;" alt="uso"/>');
html.push('<h1 id="ScriptDialogHeaderTitle">')
html.push(ScriptDialog.title);
html.push('</h1>');
html.push('</div>');
html.push('<div id="ScriptDialogBody">');
if (ScriptDialog.isTabbed) {
for (t = ScriptDialog.tabs.length - 1; t >= 0; t--) {
html.push('<div class="' + (t==0 ? 'ScriptDialogTagBodyActive' : 'ScriptDialogTagBodyInactive') + '" ');
html.push('id="ScriptDialogTab' + ScriptDialog.tabs[t] + '">');
html.push('<p>This is an example paragraph, and <a href="#">link</a> in the ' + ScriptDialog.tabs[t] + ' tab.</p>');
html.push('</div>');
}
}
html.push('</div>');
html.push('<div id="ScriptDialogFooter">');
html.push('<input type="button" id="ScriptDialogCloseButton" value="Close" style="background-image:url(');
html.push(ScriptDialog.icons.close);
html.push(')"/>');
html.push('</div>');
dialogBody.innerHTML = html.join('');
dialogWrapper.appendChild(dialogBody);
document.body.appendChild(dialogWrapper);
ScriptDialog.isOpen = true;
$('#ScriptDialogHeader img').error(function() { ScriptDialog.imageError(this); });
$('#ScriptDialogHeader input.ScriptTabInactive').live('click', ScriptDialog.changeTab);
$('#ScriptDialogClose').click(ScriptDialog.closeNotice);
$('#ScriptDialogCloseButton').click(ScriptDialog.closeNotice);
if (window.addEventListener) {
window.addEventListener('keypress', ScriptDialog.keyPressHandler, true);
} else if (document.addeventlistener) {
document.addeventlistener('keypress', ScriptDialog.keyPressHandler, true);
} else if (document.attachEvent){
document.attachEvent('onkeypress', ScriptDialog.keyPressHandler);
}
if(SettingsCallback != null && typeof(SettingsCallback.onshown) == 'function') {
SettingsCallback.onshown();
}
},
changeTab:function() {
this.blur();
$('#ScriptDialogHeader input.ScriptTabActive').each(function() { $(this).attr('class', 'ScriptTabInactive') });
$('#ScriptDialogBody .ScriptDialogTagBodyActive').each(function() { $(this).attr('class', 'ScriptDialogTagBodyInactive') });
$(this).attr('class', 'ScriptTabActive');
$('#ScriptDialogTab'+this.value).attr('class', 'ScriptDialogTagBodyActive');
},
closeNotice:function() {
ScriptDialog.open = false;
document.body.removeChild(document.getElementById('ScriptDialogWindowWrapper'));
document.body.removeChild(document.getElementById('ScriptDialogMask'));
document.getElementsByTagName('head')[0].removeChild(document.getElementById('ScriptDialogCSS'));
if (window.removeEventListener) {
window.removeEventListener('keypress', ScriptDialog.keyPressHandler, true);
} else if (document.removeEventListener) {
document.removeEventListener('keypress', ScriptDialog.keyPressHandler, true);
} else if (document.attachEvent){
document.detachEvent('onkeypress', ScriptDialog.keyPressHandler);
}
},
getBody:function() {
if (!ScriptDialog.isOpen) {
alert('script dialog not open!');
}
else if (!ScriptDialog.isTabbed) {
var body = document.getElementById('ScriptDialogBody');
if (body != null)
return body;
alert('script dialog body not found!');
}
else {
alert('body not accessible due to tag setting!');
}
return null;
},
getTab:function(name) {
if (!ScriptDialog.isOpen) {
alert('script dialog not open!');
}
else if (ScriptDialog.isTabbed) {
var tag = document.getElementById('ScriptDialogTab' + name);
if (tag != null)
return tag;
alert('tag not found!');
}
else {
alert('tag setting not enabled!');
}
return null;
},
keyPressHandler:function (e) {
if(e.keyCode == 27) { ScriptDialog.closeNotice(); }
},
icons:{
close:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAIhSURBVDjLlZPrThNRFIWJicmJz6BWiYbIkYDEG0JbBiitDQgm0PuFXqSAtKXtpE2hNuoPTXwSnwtExd6w0pl2OtPlrphKLSXhx07OZM769qy19wwAGLhM1ddC184+d18QMzoq3lfsD3LZ7Y3XbE5DL6Atzuyilc5Ciyd7IHVfgNcDYTQ2tvDr5crn6uLSvX+Av2Lk36FFpSVENDe3OxDZu8apO5rROJDLo30+Nlvj5RnTlVNAKs1aCVFr7b4BPn6Cls21AWgEQlz2+Dl1h7IdA+i97A/geP65WhbmrnZZ0GIJpr6OqZqYAd5/gJpKox4Mg7pD2YoC2b0/54rJQuJZdm6Izcgma4TW1WZ0h+y8BfbyJMwBmSxkjw+VObNanp5h/adwGhaTXF4NWbLj9gEONyCmUZmd10pGgf1/vwcgOT3tUQE0DdicwIod2EmSbwsKE1P8QoDkcHPJ5YESjgBJkYQpIEZ2KEB51Y6y3ojvY+P8XEDN7uKS0w0ltA7QGCWHCxSWWpwyaCeLy0BkA7UXyyg8fIzDoWHeBaDN4tQdSvAVdU1Aok+nsNTipIEVnkywo/FHatVkBoIhnFisOBoZxcGtQd4B0GYJNZsDSiAEadUBCkstPtN3Avs2Msa+Dt9XfxoFSNYF/Bh9gP0bOqHLAm2WUF1YQskwrVFYPWkf3h1iXwbvqGfFPSGW9Eah8HSS9fuZDnS32f71m8KFY7xs/QZyu6TH2+2+FAAAAABJRU5ErkJggg%3D%3D",
uso:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAYAAAAiYZ4HAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAh9JREFUeNp0krmLWnEQxyf7zLoajyIWXojIxkK0EiIGCRamCKQwEdIIgYQoQSR/wLY2goVVJGCa1BaL2liKBESFiOJFiMRb1xMVRbx+mfdA0RwDA4/3m+Mz3xmAf9hDNJ/P9zWXy935/f7A5eXlFfzPRCKROBgMfqvX62S5XBLabDbbh8M76zRYKpUqvF5vyGw2P+bz+cBisWCz2cB2u33wV2WFQvEoFArlW60WmUwmZLVakdFoRNxu9xd8Fp51UKlUWmS91ev11zweD5AZMAFmsxkgWhpDpsfKarVaE4lEqpVKhUynU4a73++TcrlMarUa6Xa7G7vd/u4QT93c3HzmcrlPSqUSiMVihrvX68F6vYZsNkvPcOFyuV5Uq9VuoVD4ztrv91wOhwMCgQAGgwEsFguYz+eMSyQSkMvlwGazqUAg8KnRaHSo4XA4Q9leYRdmHrpyJpMBehaDwQBCoRB2ux2gapRSqbymsP2PTqezsFqtz+6hpVIpprLRaGTw8BcgBVOo2WyOj8NbLJaP+Xx+k0gkCL00xGNEoJ2WOZlMznQ6nfVsFyaT6X273d4eAmkfj8ckHo+PNRrNSzrm4jRBq9XysDWF18Cg0OzpdPrO6XS+QRVvz6oj0nOch25NYrEYgxEOhxsymezpadyxA8p5HxUDXBTgSUA0Gv3pcDheI2LiNIE6fOAN/cKkK9RdUSwWkx6P5y0mZv+8ud8CDABidDMA4Sb2JAAAAABJRU5ErkJggg%3D%3D"
},
imageError:function(img) {
// In browsers <= IE7, the data:image/png;base64 is not supported. In this case, you will need to save the two
// images above (close and uso) as close.png and uso.png and drop them in the same folder as this .js script.
img.src = img.alt + '.png';
if (img.alt == 'close') {
$('#ScriptDialogCloseButton').attr('style', 'background-image:url(close.png)');
}
}
};
