JavaScript Utilities

ACME Labs JavaScript Utilities

Calendar - simple calendar widget
Clusterer - display thousands of markers on a Google map
ColorPicker - simple color-picker widget
EditInPlace - enable editing a text field right on the page
Menu - simple menu widget
OverlayMessage - display a transparent message box
References - simple Wikipedia-style references
Blink - revives the late and not-very-lamented <blink> tag
Suggestions - popup suggestions menu
Tabs - simple HTML tabbed panes
KeyNav - simple keypress handler
Testbed - try out JavaScript code
Event Debugger - see how DOM events fire
Leaflet Zoom5 - an augmented zoom control for Leaflet.js
Google Zoom5 - an augmented zoom control for Google Maps API v3
Google Type Control - a map type control for Google Maps API v3

Calendar

This is a simple calendar widget. It puts a calendar onto your page in an HTML element you specify. When the user selects a date, the widget calls your callback routine.

Using Calendar is very easy.

In your HTML, make an element for the calendar to appear in:
```
<div id="calendar"></div>
      
```

Load the routines into your code:


<script src="//acme.com/javascript/acme.namespace.jsm" type="text/javascript"></script>
<script src="//acme.com/javascript/acme.utils.jsm" type="text/javascript"></script>
<script src="//acme.com/javascript/acme.calendar.jsm" type="text/javascript"></script>

Declare your callback routine:


function Callback( day, month, year )
    {  
    alert( day + '-' + MonthName( month ) + '-' + year ); 
    }

Create the calendar widget, passing it the HTML element and the callback:


acme.calendar.MakeCalendarCurrent( document.getElementById( 'calendar' ), Callback );

That's it! Everything else happens automatically.

Clusterer

[View source code.] [View example.]

This object is an add-on for the Google Maps API. It lets you handle large numbers of markers, thousands if you like, without the slow performance you'd get if you tried displaying them via the maps API directly. Clusterer uses two techniques to accomplish this:

Only the markers currently visible actually get created.
If too many markers would be visible, then they are grouped together into cluster markers.

Using Clusterer is very easy.

Load the routines into your code:


<script src="//acme.com/javascript/Clusterer2.jsm" type="text/javascript"></script>

(If your map is still using API v1, use Clusterer1.jsm instead.)

Create a Clusterer object, passing it your map object:
```
var clusterer = new Clusterer(map);
      
```
Wherever you now do map.addOverlay(marker), instead call clusterer.AddMarker(marker, title). The title is just a short descriptive string to use in the cluster info-boxes.
If you are doing any map.removeOverlay(marker) calls, change those to clusterer.RemoveMarker(marker).

That's it! Everything else happens automatically.

There are also a few routines to change the default behavior:

If you don't like the default large blue cluster icon, you can call clusterer.SetIcon(icon) to change it.
clusterer.SetMaxVisibleMarkers(n) lets you change the threshold marker count where clustering kicks in. The default is 150 markers.
clusterer.SetMinMarkersPerCluster(n) sets the minumum number of markers for a cluster. The default is five.
clusterer.SetMaxLinesPerInfoBox(n) sets the maximum number of lines in an info box. The default is ten, but if your map is small this may be too many.

ColorPicker

[View source code.] [View example.]

This is a simple color-picker widget. It adds a little icon to your page in an HTML element you specify. Clicking on it brings up the picker. Clicking on that calls your callback routine.

Using ColorPicker is very easy.

In your HTML, make an element for the calendar to appear in:
```
<div id="colorPicker"></div>
      
```

Load the routines into your code:


<script src="//acme.com/javascript/acme.namespace.jsm" type="text/javascript"></script>
<script src="//acme.com/javascript/acme.utils.jsm" type="text/javascript"></script>
<script src="//acme.com/javascript/acme.keynav.jsm" type="text/javascript"></script>
<script src="//acme.com/javascript/acme.colorpicker.jsm" type="text/javascript"></script>

Declare your callback routine:


function Callback( color )
    {  
    alert( color ); 
    }

Create the color-picker icon, passing it the HTML element and the callback:


acme.colorpicker.MakeColorPicker( document.getElementById( 'colorPicker' ), Callback );

That's it! Everything else happens automatically.

EditInPlace

[View source code.] [View example.]

This object lets you make any text on the page editable. The user clicks on it and it turns into an input field, with Save and Cancel buttons. If the Save button gets clicked then the text is changed and you get a callback notifying you.

Using EditInPlace is very easy.

In your HTML, put the text you want to make editable into an identifiable HTML element. You can use an id, a name, or whatever identification method you like. For example:
```
<div id="text">Here is the text.</div>
      
```
The element should have only text inside it, not other HTML elements.

Load the routines into your code:


<script src="//acme.com/javascript/acme.namespace.jsm" type="text/javascript"></script>
<script src="//acme.com/javascript/acme.editinplace.jsm" type="text/javascript"></script>

Find the element you want to edit. For example, if you specified an id in the HTML then you could say:
```
var element = document.getElementById( 'text' );
      
```
Create an EditInPlace object, passing it the HTML element, the number of lines and columns you want in the editable field, and a callback function:
```
var eip = new acme.editinplace.EditInPlace( element, lines, columns, callback );
      
```
If lines is one you get a text input field for editing; if lines is greater than one you get a textarea.
The callback will probably a closure that you create, that knows which element it is getting called on. For example you might say:
```
function () { RealCallback( element ); }
      
```
That creates a closure that calls the real callback with the text element as argument.

When the callback is called, the contents of the text element have already been changed to the new value. If you don't need to do anything else, feel free to pass null as the callback.

That's it! Everything else happens automatically.

OverlayMessage

[View source code.] [View example.]

This object lets you display a semi-transparent message box over another HTML element. For instance you could use it to display a progress message while loading a Google Map. It's not specific to Google Maps, though - you can use it on anything.

Using OverlayMessage is very easy.

In your HTML, make an element for the message to appear over. Give it whatever style attributes you like:
```
<div id="container" style="width: 100%; height: 7in;"></div>
      
```

Load the routines into your code:


<script src="//acme.com/javascript/acme.namespace.jsm" type="text/javascript"></script>
<script src="//acme.com/javascript/acme.overlaymessage.jsm" type="text/javascript"></script>

Create an OverlayMessage object, passing it the HTML element:


var om = new acme.overlaymessage.OverlayMessage(document.getElementById('container'));

Call the Set method when you want a message to appear:
```
om.Set('Loading...');
      
```
Call the Clear method when you want the message to go away:
```
om.Clear();
      
```

That's it! Everything else happens automatically. You continue to use the container element in your own code, it does not get modified.

You can also change the colors used, if you don't like the defaults:


om.SetBackgroundColor( color );
om.SetBorderColor( color );

References

[View source code.] [View example.]

This object lets you add Wikipedia-style references / footnotes to an HTML page.

Using References is very easy.

Load the routines into your code:


<script src="//acme.com/javascript/acme.namespace.jsm" type="text/javascript"></script>
<script src="//acme.com/javascript/acme.utils.jsm" type="text/javascript"></script>
<script src="//acme.com/javascript/acme.references.jsm" type="text/javascript"></script>

Add <ref>text</ref> elements to your HTML.
Add one <references></references> element to your HTML where you want the footnotes to appear.

That's it! Everything else happens automatically. If you prefer valid HTML over good-looking HTML, you can also use <span class="ref"> and <span class="references">. Either will work, and you can use any element, not just <span>.

Blink

[View source code.] [View example.]

This object lets you use the <blink> tag again, even though browsers no longer support it directly.

Using Blink is very easy.

Load the routines into your code:


<script src="//acme.com/javascript/acme.namespace.jsm" type="text/javascript"></script>
<script src="//acme.com/javascript/acme.blink.jsm" type="text/javascript"></script>

Add <blink>text</blink> elements to your HTML.
Optional step three, if you want to change the blink pattern: Call acme.blink.SetPattern( [ on, off ] ); On and off should be numbers in milliseconds saying how long the blinking elements should be on and off. The default pattern is [500, 250] meaning on for 500 msec and off for 250 msec. You can specify more than two numbers if you want more complicated patterns.

That's it! Everything else happens automatically. If you prefer valid HTML over good-looking HTML, you can also use <span class="blink">. Either will work, and you can use any element, not just <span>.

Suggestions

[View source code.] [View example.]

This is a popup suggestions menu. It attaches a menu to an HTML element you specify, generally an <input type="text"> element. When the user selects a menu item, the widget calls your callback routine.

Using Suggestions is easy.

In your HTML, choose the element that you want the menu to be attached to:


<input id="input" autocomplete="off" type="text" onchange="Suggest();" onkeyup="Suggest();" onfocus="Suggest();">

Load the routines into your code:


<script src="//acme.com/javascript/acme.namespace.jsm" type="text/javascript"></script>
<script src="//acme.com/javascript/acme.utils.jsm" type="text/javascript"></script>
<script src="//acme.com/javascript/acme.suggestions.jsm" type="text/javascript"></script>

Any time the input field changes, compute a new list of suggestions strings and create the menu.


var inputElement = document.getElementById( 'input' );

function Suggest()
    {  
    var strs = [ ... ];
    acme.suggestions.Make( inputElement, strs, Callback );
    }

Declare your callback routine:


function Callback( str )
    {  
    inputElement.value = str;
    }

If you want the menu to disappear, you can call acme.suggestions.Clear( inputElement ).

That's it! Everything else happens automatically.

Tabs

[View source code.] [View example.]

This object lets you put up a set of tabbed panes.

Using Tabs is very easy.

In your HTML, make an element for the tabs to appear in:
```
<div id="tabs"></div>
      
```

Load the routines into your code:


<script src="//acme.com/javascript/acme.namespace.jsm" type="text/javascript"></script>
<script src="//acme.com/javascript/acme.tabs.jsm" type="text/javascript"></script>

Create a Tabs object, passing it the HTML element:


var tabs = new acme.tabs.Tabs(document.getElementById('tabs'));

Call the Add method for each pane you want to add. The arguments are the name of the tab, and a routine to call when the tab gets activated:
```
tabs.Add('Tab One', TabOneActivate);
      
```
Declare the tab activation routines. They get passed the HTML element where the pane should go. The first time each routine is called, it should create the pane's contents:
```
function TabOneActivate(paneElement)
    {
    if ( paneElement.innerHTML == '' )
        paneElement.innerHTML = 'This is tab one.'
    }
      
```

That's it! Everything else happens automatically.

KeyNav

[View source code.]

This is a simple package that lets you register handlers for keyboard events. It really doesn't do much. It's useful mainly for encapsulating knowledge of what event handler to register and what property of the event to look at. Rather than having N different programs know about that stuff, only this package has to know.

Using KeyNav is very easy.

Load the routines into your code:


<script src="//acme.com/javascript/acme.namespace.jsm" type="text/javascript"></script>
<script src="//acme.com/javascript/acme.keynav.jsm" type="text/javascript"></script>


acme.keynav.KeyDown( keyCode, callback );
acme.keynav.KeyUp( keyCode, callback );

The package defines a few keyCodes you can use, or you can find them for yourself using e.g. HTML Events. Put your pointer in the tan area, press the key, and look for the "keydown" or "keyup" event. The number you want is called "which". Some of the keyCodes are just the key's ASCII value, but others are not, so use the events page to check.

Back to ACME Labs.

ACME Labs JavaScript Utilities

Calendar

Clusterer

ColorPicker

EditInPlace

Menu

OverlayMessage

References

Blink

Suggestions

Tabs

KeyNav