Javascripts

In addition to a set of classes for writing CGI's and apache modules, groundwork provides the following useful Javascripts. To use these javascripts in an application, copy them from /usr/local/firstworks/js to some place under your web server's document root and add a script tag in the head of your page to load the script.

newwindow.js

newwindow.js provides the function newWindow(name,url,replace) which pops up a window named "name" and aims it at "url", optionally replacing an old window of the same name. The window that it pops up is the same size as the window running the javascript, but offset 30 pixels down and to the right of that window. If the window running the javascript is maximized, the window it pops up is 30% narrower and 20% shorter than that window. This is useful because people like to maximize their browsers and popping up a new window that is also maximized is often confusing.

Here's an example illustrating how to use newwindow.js.

<html>
<head>
<script language="javascript" src="newwindow.js"></script>
</head>
<body>
<a href="javascript: newWindow('popup','http://www.firstworks.com',true);">firstworks</a>
</body>
</html>


norightclick.js

norightclick.js attempts to catch right clicks. This is useful if you want to deter people from viewing the source of your web page or downloading images from it. It is not foolproof, there are still methods that people can employ to get the source of your page or download an image, but this script deters the average user.

To disable right clicking, simply include the following html in the head of your page.

<script language="javascript" src="norightclick.js"></script>


textfilter.js

textfilter.js provides the function textFilter(whichelement,filter,nulls) which can be called from the onblur attribute of a text input tag. textFilter attempts to convert text input into a particular format, specified by the filter parameter. The filter parameter can be one of: integer, float, ssn, phone, upper or lower. The nulls parameter has an effect when called with the integer or float filter. If set false, it converts blank inputs to 0's, if set true, it leaves them blank. A usage example follows:

<html>
<head>
<script language="javascript" src="textfilter.js"></script>
</head>
<body>
<form name="personalinfo" action="info.cgi">
<input type="text" name="name" size="40" onblur="textFilter(this,'upper',true);">
<input type="text" name="phone" size="12" onblur="textFilter(this,'phone',true);">
<input type="text" name="ssn" size="11" onblur="textFilter(this,'ssn',true);">
<input type="text" name="zip" size="5" onblur="textFilter(this,'integer',true);">
<input type="submit">
</form>
</body>
<html>


navigate.js

navigate.js provides a set of functions for modifying form data and submitting a form. These functions are useful in the following situations:

Here's an example illustrating how to use navigate.js. Each link calls setValues() to set one or two form entry values, then calls navigate() to set which cgi to post to.

<html>

<head>
        <script language="javascript" src="navigate.js"></script>
</head>

<body>

<form method="post" name="navigate">
        <input type="hidden" name="login" value="mylogin">
        <input type="hidden" name="password" value="mypassword">
        <input type="hidden" name="system" value="">
        <input type="hidden" name="subsystem" value="">
</form>

<p>Welcome to the web-based system administration page.  Please log in and
select an area of the system to administer.</p>

<ul>
<li><a href="javascript: setValues(document.information,'system','auth'); navigate(document.navigate,'auth.cgi','_top');">Authentication System</a></li>
<ul>
<li><a href="javascript: setValues(document.information,'system','auth','subsystem','users'); navigate(document.navigate,'auth.cgi','_top');">Users</a></li>
<li><a href="javascript: setValues(document.information,'system','auth','subsystem','groups'); navigate(document.navigate,'auth.cgi','_top');">Groups</a></li>
</ul>

<li><a href="javascript: setValues(document.information,'system','mail'); navigate(document.navigate,'mail.cgi','_top');">Mail Server</a></li>
<ul>
<li><a href="javascript: setValues(document.information,'system','mail','subsystem','smtp'); navigate(document.navigate,'mail.cgi','_top');">SMTP Server</a></li>
<li><a href="javascript: setValues(document.information,'system','mail','subsystem','pop'); navigate(document.navigate,'mail.cgi','_top');">Pop Server</a></li>
<li><a href="javascript: setValues(document.information,'system','mail','subsystem','imap'); navigate(document.navigate,'mail.cgi','_top');">Imap Server</a></li>
</ul>

<li><a href="javascript: setValues(document.information,'system','web'); navigate(document.navigate,'web.cgi','_top');">Web Server</a></li>
<ul>
<li><a href="javascript: setValues(document.information,'system','web','subsystem','virtualdomains'); navigate(document.navigate,'web.cgi','_top');">Virtual Domains</a></li>
<li><a href="javascript: setValues(document.information,'system','web','subsystem','startstop'); navigate(document.navigate,'web.cgi','_top');">Start/Stop</a></li>
</ul>

<li><a href="javascript: setValues(document.information,'system','ftp'); navigate(document.navigate,'ftp.cgi','_top');">FTP Server</a></li>
<ul>
<li><a href="javascript: setValues(document.information,'system','ftp','subsystem','virtualdomains'); navigate(document.navigate,'ftp.cgi','_top');">Virtual Domains</a></li>
<li><a href="javascript: setValues(document.information,'system','ftp','subsystem','startstop'); navigate(document.navigate,'ftp.cgi','_top');">Start/Stop</a></li>
</ul>
<ul>

</body>
</html>
safeunescape.js

In an HTTP-escaped string, spaces can be replaced by +'s and other non-alphabet characters are replaced by hex codes. Some browsers (most notoriously Netscape 4.x) don't properly implement the unescape function. In these browsers, +'s are not converted back to spaces. safeunescape.js implements the safeUnescape(string) function which properly unescapes strings.

For example, the following page:

<html>
<head>
<script language="Javascript" src="safeunescape.js"></script>
</head>
<body>
<script language="Javascript">
        document.write(safeUnescape("hello+world%2C+how+are+you+doing%3F");
</script>
</body>
</html>

Generates the following output:

hello world, how are you doing?
cookies.js

Working with cookies in javascript can be complex and unintuitive. cookies.js implements the getCookie(name), setCookie(name,value,expires,path,domain,secure) and deleteCookie(name,path,domain) functions which make cookies much easier to manipulate. Note that cookies.js depends on safeunescape.js, so safeunescape.js must be loaded prior to loading cookies.js.

For example, the following page pops up a new window (which could possibly contian an advertisement) if the browser has not been to this page during this session. It does this by checking for a cookie called displaypopup and if it's not found, pops up a window and sets it.

<html>
<head>
<script language="Javascript" src="safeunescape.js"></script>
<script language="Javascript" src="cookies.js"></script>
</head>
<body>
<script language="Javascript">
if (getCookie('displaypopup')!='yes') {
        open('popup.html','popup','directories=no,innerheight=300,innerwidth=200,location=no,menubar=no,personalbar=no,resizable=no,scrollbars=no,status=no,toolbar=no');
        setCookie('displaypopup','yes',null,null,null,false);
}
</script>
Hello world.
</body>
</html>

This example deletes the displaypopup cookie.

<html>
<head>
<script language="Javascript" src="safeunescape.js"></script>
<script language="Javascript" src="cookies.js"></script>
</head>
<body>
<script language="Javascript">
deleteCookie('displaypopup');
</script>
Goodbye.
</body>
</html>