Thursday, January 17, 2008

Enabling the Home/End/Delete Keys on a *nix Machine

Make the Home/End/Delete key function like you would assume that they would!

In your .profile file (create it if necessary in your home directory), if you add the following to the bottom (or top), you can enable the Home/End/Delete keys:

case $TERM in
xterm*)
bind '"\e[1~": beginning-of-line'
bind '"\e[3~": delete-char'
bind '"\e[4~": end-of-line'
bind '"\177": backward-delete-char'
;;
esac
This would enable the hot keys for your profile.

If you want to set them up system wide, then (as root) add the following to the end of your /etc/inputrc file:

"\e[1~": beginning-of-line
"\e[4~": end-of-line
"\e[3~": delete-char
"\177": backward-delete-char

Friday, August 24, 2007

Greasemonkey & Auto Updating Userscripts With Subversion

Some time ago, I wanted to create a way of auto updating my Greasemonkey userscripts so that I wouldn't have to somehow manually notify everyone when an update occured.


My scripts are kept in a subversion repository with WebDav support. So one of the first things that I did was examine the HTTP headers of my web server when I made a subversion request from my browser:



Date Fri, 24 Aug 2007 16:00:53 GMT
Server Apache/2.0.54 (Unix) DAV/2 SVN/1.2.0 mod_perl/1.999.22 Perl/v5.8.5
Etag "1390//some_script.user.js"
Accept-Ranges bytes
Content-Length 638
Keep-Alive timeout=15, max=99
Connection Keep-Alive
Content-Type text/html; charset=UTF-8

The one thing to notice is the line with the Etag text. It pretty much displays the subversion version of my script, 'some_script.user.js'. So if I could get this information when my script loads and compare it to any value that I have stored previously, then I can cause my script to update itself quite easily!


So I created a function called check4Update(options) that did just that. In addition to my function, I also used cookie management code that I slighltly modified from webreference.com (included below).


The function that I created has a json object called options with the following parameters:




    • url - the subversion URL for your userscript

    • scriptname - the name of your script [defaults to the domain that the script acts upon; this may not be desirable, so please set it!]

    • delay - the number of page refreshes to wait before nagging the user again [ defaults to 7]


    Items in bold are required and items in italics are optional



 
window.check4Update = function(options) {
var options = options || {};
if (!url) {
// we need this at least ...
return;
}
var url = options.url;
var scriptname = options.scriptname || location.host + "_script";
var delay = options.delay || 7;

// cookie_name is the name of the cookie that we will set with the
// value of version
var cookie_name = scriptname

// the version of the script. Initially, this will be null.
var version = getCookie(cookie_name);

// the name of the cookie that indicates when we should nag
// about upgrading in case the user didnt want to upgrade their script
var upgrade_cookie = scriptname+ '_DELAY_UPGRADE'

try {
GM_xmlhttpRequest({
// head command because we are only interested
// in the Headers and not the script!
method: 'HEAD',
url: url,
headers: {
'User-agent': 'Mozilla/4.0 (compatible) Greasemonkey '+scriptname+'/1.0'
},
onload: function(responseDetails) {
if (responseDetails.status == 200 || responseDetails.status == 202) {
var headers = (responseDetails.responseHeaders).split('\n');
for (var i in headers) {

// go through and look for 'Etag'
if (headers[i].indexOf('Etag') != -1) {
var s = headers[i];

// create a regular expression to parse the version
var regx = /^.*Etag: \"(\d+)\/\/.*\"$/;
regx = regx.exec(s);

// here s will be our version obtained from the svn repository
s = regx[1]

// here version would be a previously set version or null
// if this is the first time running the script
if (version) {
// here we get the nag count
var count = getCookie(upgrade_cookie)

// if the nag count exists and is greater than 0, then decrement it
// and dont prompt to upgrade
if (count && count-- > 0) {
// user doesnt want to be notified
var now = new Date();
window.fixDate(now);
now.setTime(now.getTime() + 31*24*60*60*1000); // expire in a month
deleteCookie(upgrade_cookie);
setCookie(upgrade_cookie, count, now,"/", scriptname + ".com");
GM_log("Wont nag for " + count +" more reloads ....");
return;
}

// so we have found a newer version of the script prompt to upgrade
if (s > version) {
// ask the user if they wish to upgrade
// if they choose not to, then set a cookie to wait 'delay' page
// refreshes and then notify them to upgrade again
if (confirm("A newer version of this script exists!\n\tRemote Version: " +s+"\n\tYour Version: "+version+"\nWould you like to upgrade now?")) {
setCookie(upgrade_cookie, -1, null, "/", scriptname + ".com");
var now = new Date();
window.fixDate(now);
now.setTime(now.getTime() + 31*24*60*60*1000); // expire in a month
deleteCookie(cookie_name,"/", scriptname + ".com");
setCookie(cookie_name, s, now,"/", scriptname + ".com");
alert("Please reload the page once the script has been updated!")
// here we cause the page to refresh with the location of our script
// this will cause greasemonkey to prompt the user to install the script
location.replace(url)
} else {
// set a cookie to upgrade later
var now = new Date();
window.fixDate(now);
now.setTime(now.getTime() + 31*24*60*60*1000); // expire in a month
deleteCookie(upgrade_cookie,"/", scriptname + ".com");
setCookie(upgrade_cookie, delay, now,"/", scriptname + ".com");
GM_log("Won't notify of upgrades for a "+delay+" page refreshes!");
}
}
} else {
// version wasnt previously set so we set the version in the cookie to
// be the current version of the script in svn repository
var now = new Date();
window.fixDate(now);
now.setTime(now.getTime() + 31*24*60*60*1000); // expire in a month
deleteCookie(cookie_name,"/", scriptname + ".com");
setCookie(cookie_name, s, now,"/", scriptname + ".com");
}
}
}
}
},
onerror: function(responseDetails) {
console.log('GM_xmlhttpRequest error: %s', responseDetails.responseText)
},
onreadystatechange: function(responseDetails) {

}
});
} catch (exception){
console.log('Error occurred while updating the script %s . The error was: %s', scriptname, exception);
}

}

The code above is commented to indicate the logic behind it. If you need more information, please add a comment and I will explain any discrepancies. Also, if you can think of a better way of doing things, please let me know!


Below are the cookie management functions:



window.setCookie = function (name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");

document.cookie = curCookie;
}


window.getCookie = function (name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else
begin += 2;
var end = document.cookie.indexOf(";", begin);
if (end == -1)
end = dc.length;

return unescape(dc.substring(begin + prefix.length, end));
}


window.deleteCookie = function (name, path, domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}


window.fixDate = function (date) {
var base = new Date(0);
var skew = base.getTime();
if (skew > 0)
date.setTime(date.getTime() - skew);
}


This is how one could call the this function from within their userscript.



window.check4Update({'url':'http://someurl.com/my_script.user.js', 'scriptname':'my_script_name', 'delay':7});

Finally, all of the code mentioned above was placed in my Greasemonkey userscript at the end of the onload event handler:



window.addEventListener('load',
function () {
//... your user script code here ... //

// ... the auto update code here ... //
}
,true);


Good luck!

Wednesday, August 01, 2007

Creating a Modular 'Waiting' dialog in javascript

Have you ever needed to create a modular pop up that displayed a message to the user while you did some processing in the background? I have and I got fed up of constantly creating a new modular pop up each time.

The following javascript code is easy to use and is based upon the grayOut javascript function.

This snippet of code creates a modal dialog box. This is useful for times when you want to make the user wait while you do something in the background or if you would like to make the user aware of something on the page. While the dialog box is active, most interactive elements on the page (links, etc) are inactive.

The dialog box is dynamically created and can be customized to a certain height and width. The dialog box has a high z-index and should be placed above most other elements. Items which have a higher z-index than the dialog box will appear on top of the dialog box.

By default the dialog box has a z-index of 100.

Other default parameters are:

  • height - 25% of the page height
  • width - 35% of the page width
  • opacity - 90% (i.e. semi-transparent)
  • border style - solid
  • border color - black
  • border width - 3px
  • text alignment - center
  • many others ...
All of the above can be configured to your liking. Look at the comments in the script for more customization features.

Example. This snippet has been tested in Firefox 2, Safari 3, and Internet Explorer 7.


function modular_waiting(vis, msg, options) {
// Pass true to show the dialogue screen, false to hide
// options are optional. This is a JSON object with the following (optional) properties
// opacity:0-100 // Lower number implies a more transparent dialog box
// zindex: # // HTML elements with a higher zindex appear on top of others with a lower number
// height: 0-100 // The height in percentage terms relative to the browser screen
// width: 0-100 // The width in percentage terms relative to the browser screen
// name: text // A name for your dialog box - this is what you will refer to when showing and hiding the dialog
// align: text // Should the text be placed in the: center, justify, left or right
// fontcolor: (#xxxxxx) // Standard RGB Hex color code
// fontweight: 100-900 // The boldness of the text in increments of 100. 900 implies maximum boldness
// bgcolor: (#xxxxxx) // Standard RGB Hex color code
// borderwidth: # // The thickness of the border
// bordercolor: (#xxxxxx)// The color of the border in HEX
// borderstyle: text // The style of the border. One of dashed, dotted, double, groove, inset, none, outset, ridge, solid
// modular_waiting(false); // hide the dialog
// modular_waiting(true, 'my message to show here', {'name':'myName', 'zindex':'50', 'bgcolor':'#0000FF', 'opacity':'70'}); // show the dialog
// Because options is JSON opacity/zindex/bgcolor are all optional and can appear
// in any order. Pass only the properties you need to set.
var options = options || {};
var zindex = options.zindex || 100;
var height = options.height || 25;
var width = options.width || 35;
var opacity = options.opacity || 90;
var opaque = (opacity / 100);
var bgcolor = options.bgcolor || '#FFDC75';
var fColor = options.fontcolor || '#0000FF';
var fWeight = options.fontweight || 600;
var bcolor = options.bordercolor || 'black';
var bstyle = options.borderstyle || 'solid'
var bwidth = options.borderweight || '3px'
var align = options.align || 'center';
var __div_id__ = options.name || '__modular__popup__';

var dark=document.getElementById(__div_id__ );

if (!dark) {
var tbody = document.getElementsByTagName("body")[0];
var tnode = document.createElement('div'); // Create the layer.
tnode.style.position='fixed'; // Position absolutely
tnode.style.overflow='auto';
tnode.style.display='none'; // Start out Hidden
tnode.id=__div_id__ ; // Name it so we can find it later
tbody.appendChild(tnode); // Add it to the web page
dark=document.getElementById(__div_id__ ); // Get the object.
}

if (vis) {
var txt = document.createElement('font')
txt.setAttribute('color',fColor);
txt.style.fontWeight = fWeight;
txt.innerHTML = msg.replace(/\"/g,""").replace(/\'/g,"'").replace(/\/g,">").replace(/\n/g,"<br/>")

dark.style.border = bwidth + " " + bstyle + " " + bcolor;
dark.setAttribute('align',align);
dark.style.opacity=opaque;
dark.style.MozOpacity=opaque;
dark.style.filter='alpha(opacity='+opacity+')';
dark.style.zIndex=zindex;
dark.style.backgroundColor=bgcolor;
dark.style.width= width+'%';
dark.style.height= height+ '%';
dark.style.display='block';
dark.style.cursor = 'wait';
dark.appendChild(txt);
dark.style.left = '40%'
dark.style.top = '50%'
} else {
// TODO - should i remove the element?
dark.style.display='none';
dark.innerHTML = "";
}
}

Activate/Deactivate with a function call to modular_waiting(vis, msg, options).

vis is a true/false variable. If you pass true, the dialog will appear. If you pass false, the dialog will be removed.

"msg" is the message that you would like to display.

options is an optional JSON object this allows you to send only the properties you want modified. You don't have to pass options if you don't want. modular_waiting(true,"Hello world") and modular_waiting(false) will work quite nicely.

To set all of the options, do the following {'opacity':'70', 'bgcolor':'#0000FF', 'zindex':'25', 'height':'50','height':'50', 'name':'myPopUpDialog', 'align':'left', 'fontcolor':'red', 'fontweight':'900', 'bgcolor':'yellow', 'borderwidth':'5', 'bordercolor':'blue', 'borderstyle':'dotted' }. This will create a somewhat transparent dialog box that covers approximately 50% of the window, with text aligned left, colored red and bold on a yellow background and a dotted, blue border!

Feel free to change the values yourself!

Order doesn't matter, mix and match however you wish.