Burak Gursoy - Widget.Timer-0.40
NAME
Widget.Timer - A digital timer counting backwards.
SYNOPSIS
<span id = "admin_timeout"
title = "Admin Session Timeout"
></span>
<script type="text/javascript">
// you can use this as timer(options) with JSAN export mechanism
Widget.Timer.timer({ hour: 0, minute: 1, second: 3});
</script>
DESCRIPTION
This widget can be used for administrator (or regular user) timeout display. It will be illogical to use this in static pages, since you'll need a dynamic data source to get the hour, minute & second values. You can use unlimited number of timers in a page.
Widget.Timer is object oriented, but hides the interface behind a single function. The underlying magic is not documented, but some parts of it can be useful if you want to implement a "callback" function.
RECOMMENDED STYLE
You can use your own CSS code, but here is a default:
#admin_timeout {
color : #66FF66;
font-weight : bold;
background-color : #000000;
border-style : outset;
border-color : #f7f7f7 #ffffff #ffffff #f7f7f7;
}
FUNCTIONS
timer
This is the only usable part of this widget. Importable via JSAN:
JSAN.use('Widget.Timer', 'timer');
timer( options );
You can alter the interface with setting several parameters.
hour
The initial hour value of the timer. Default is zero.
minute
The initial minute value of the timer. Default is zero.
second
The initial second value of the timer. Default is zero.
target
If the target element' s id is different from admin_timeout set this to that value.
blink
If you want a timer with an animated colon, set this parameter. It must be passed as an array consisting of CSS ids:
Widget.Timer.timer({
hour : 1,
minute : 0,
second : 3,
target : 'x',
blink : ['xblink', 'xblink2']
});
See the example code bundled with the distribution.
callback
You can set a callback function (or code). It will be called after the timer is finished.
It is possible to use a function:
Widget.Timer.timer({ second: 3, callback: cbfunc });
function cbfunc () {
alert(
"Hi, I am the call-back function.\n\n"
+"The page will be refreshed after you press OK"
);
history.go(0); // or you can call detonate()
}
or a string including commands:
Widget.Timer.timer({ second: 3, callback: 'history.go(0)' });
If you want to access the underlying object and call it's methods, you must use a function and explicitly define the parameter in the function body:
Widget.Timer.timer({ second: 3, callback: cbfunc });
function cbfunc (self) {
self.display(''); // erase widget display
}
If you are using a string of commands, you can use the regular this keyword:
Widget.Timer.timer({ second: 3, callback: 'this.display();' });
But note that, the OO interface of Widget.Timer is not documented and may change.
CAVEATS
None so far.
BUGS
Contact the author if you find any.
This library is tested with: Opera 9.01, MSIE 6.0 and Mozilla FireFox 2.0.0.1 under Windows XP Professional SP2.
AUTHOR
Burak Gürsoy, <burak@cpan.org>
COPYRIGHT
Copyright 2007 Burak Gürsoy. All rights reserved.
LICENSE
This library is free software; you can redistribute it and/or modify it under the terms of the "Artistic License": http://dev.perl.org/licenses/artistic.html.
if(!Widget) var Widget = {};
Widget.Timer = function (o) {this._init(o)}
Widget.Timer.VERSION = '0.40';
Widget.Timer.EXPORT_OK = ['timer'];
Widget.Timer.COUNTER = 0;
Widget.Timer.FINISHED = '--:--';
Widget.Timer.timer = function (o) {
var id = 'WidgetTimer' + Widget.Timer.COUNTER++;
var CODE = id + "= new Widget.Timer (o);"
+ id + ".setid('" + id + "');"
+ id + ".tick();";
eval(CODE);
}
Widget.Timer.prototype.setid = function (id) {
if(id) this.ID = id;
}
Widget.Timer.prototype._init = function (o) {
if(!o || typeof o != 'object') o = {};
this.MINUTE = o['minute' ] || o['minutes'] || o['min'] || 0;
this.SECOND = o['second' ] || o['seconds'] || o['sec'] || 0;
this.HOUR = o['hour' ] || o['hours' ] || o['hr' ] || 0;
this.TARGET = o['target' ] || 'admin_timeout'; // span id
this.BLINK = o['blink' ] || '';
this.CALLBACK = o['callback'] || '';
if(this.MINUTE > 60) {
var hr_tmp = new Number(this.MINUTE/60).toFixed(6);
var ar = hr_tmp.split('.');
if(ar.length <= 1) {
this.HOUR = ar[0];
this.MINUTE = 0;
}
else {
this.HOUR = ar[0];
this.MINUTE = new Number(('0.' + ar[1] || 0) *60).toFixed(0);
}
}
this.SECOND = (this.SECOND <= 0) ? 1 : this.SECOND+1;
this.ID = '';
}
Widget.Timer.prototype.callback = function () {
if(this.CALLBACK) {
if(typeof this.CALLBACK == 'function') {
this.CALLBACK(this);
}
else {
eval(this.CALLBACK);
}
}
}
Widget.Timer.prototype.tick = function () {
var timeout;
this.SECOND--;
if (this.MINUTE == -1) { this.MINUTE = 60; }
if (this.MINUTE == 60) { this.HOUR--; this.MINUTE = 60; }
if (this.SECOND == 0) { this.MINUTE--; this.SECOND = 60; }
var blink = ':';
if(this.BLINK) {
blink = this.SECOND % 2
? '<span id="' + this.BLINK[0] + '">:</span>'
: '<span id="' + this.BLINK[1] + '">:</span>'
;
}
var finished = 0;
if(this.MINUTE < 0 && this.HOUR <= 0) {
timeout = Widget.Timer.FINISHED;
finished++;
}
else {
if(this.MINUTE == 60) this.MINUTE--;
var xhr = this.HOUR;
var xmin = this.SECOND == 60 ? this.MINUTE+1 : this.MINUTE;
var xsec = this.SECOND == 60 ? '00' : this.SECOND;
if(xmin < 10 ) xmin = '0' + xmin;
if(xsec < 10 && xsec != '00') xsec = '0' + xsec;
timeout = xmin + blink + xsec;
if (xhr > 0) {
timeout = (xhr < 10 ? '0' : '') + xhr + blink + timeout;
}
}
this.display(timeout);
if(this.MINUTE >= 0 || this.HOUR > 0) {
window.setTimeout(this.ID+".tick()", 1000);
}
if(finished) this.callback();
}
Widget.Timer.prototype.display = function (data) {
if (!data) data = '';
// rewrite !!!
if (document.getElementById) {
document.getElementById(this.TARGET).innerHTML = data;
}
else if (document.layers) {
var layer = document.layers[this.TARGET];
layer.document.write(data);
layer.document.close();
//}
//else if (document.all) {
// admin_timeout.innerHTML = data;
}
else {
alert("I can not locate the timer container");
return;
}
}
/*
*/