Ashita.org

I last wrote about closures and how this affects the visibility of variables and functions. This time I’m going to introduce returning functions from a closure and how it can be useful in the first part.

First off, lets say you have a strange need to create functions to consistently add a value like addFive, addTen, etc. Well this is one way to go about it.

function createAdder(addition_size) {
      return function (value) {
                     return value + addition_size;
               }
}

var addFive = createAdder(5);
var addTen = createAdder(10);

alert(addFive(3));
alert(addTen(-10));

The code above will alert 8 and 0. While this isn’t the most natural use of the technique, hopefully it is clear enough. addition_size is retained by the addFive and addTen functions because the function had visibility when it was declared.

One handy way to use this is when creating event handlers that need to take parameters. When adding a handler, you pass the function itself, which doesn’t provide an opportunity to add extra parameters, we can get around this by doing:

function getValuePlusFiveDisplayer(value) {
  return function (event) {
    var sum = addFive(value);
    alert(value + " + 5 = " + sum);
  }
}

var number_1 = document.getElementById("number_1");
number_1.addEventListener("click",getValuePlusFiveDisplayer(1),false);

var number_2 = document.getElementById("number_2");
number_2.addEventListener("click",getValuePlusFiveDisplayer(2),false);

And HTML like:

<span id="number_1" class="number_button">1</span>
<span id="number_2" class="number_button">2</span>

Which would work like this:

12

Even though you’re unlikely to need this exact example, hopefully it gives you some ideas, or helps solve some problems

Tags: closures, JavaScript

This is going to be a pretty short tutorial today to help explain how to pass information to an window when opening it. The following is taken from PirateQuesting.

First, here is the function for entering the code when PirateQuest asks the user for verification.

function enterCode(url,imgsrc, func) {
	var params = {in:imgsrc, out:null};
	window.openDialog("chrome://piratequesting/content/codeDialog.xul", "",
		"chrome, dialog, modal, resizable=no, status=no,
		height=250, width=400", params).focus();
	if (params.out) {
		piratequesting.Code.submit(url,params.out,imgsrc,func);
	}
	else {
	    // User clicked cancel. stop here
	}
}

So, as we can see in the first line the params variable stores a hash. A has is useful here as it allows us to easily pass more than one variable in without goign to the work of creating an object. There are actually much more significant differences between a hash and an object but, for this tutorial, know that it stores values in name:value pairs separated by commas and all of it enclosed by curly braces. The last element must not be followed by a comma.

Next, when we use openDialog we pass params into the dialog.

After the user has clicked OK, the value of params.out is checked. The condition will be true unless the value is still null or by some strange miracle taken on a value like ‘false’.

Now, let’s look at the code behind the dialog itself

function codeDialogOnLoad() {

    // Use the arguments passed to us by the caller
    document.getElementById("codeImage").setAttribute('src',
            window.arguments[0].in);
}

// Called once if and only if the user clicks OK
function onOK() {
    window.arguments[0].out = document.getElementById("codeValue").value;
    return true;
}

Ok, so what do we have here? well, when the dialog first loads we call codeDialogOnLoad which then sets the image source on the dialog based on the value passed in params.in. Note that it is now referred to as window.arguments[0].in.

When the user presses OK, the value of an input box, codeValue, is assigned to params.out (a.k.a. window.arguments[0].out).

Last thing to look at is the codeDialog.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
<dialog
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  id="codeDialog"
  title="Enter the Code"
  ondialogaccept="return onOK();"
  buttonlabelaccept="Submit"
  onload="codeDialogOnLoad();"
  persist="screenX screenY width height">

	<script type="application/x-javascript" src="chrome://piratequesting/content/codeDialog.js"/>
	<vbox>
		<label value="Enter the code shown below" />
		<image id="codeImage" />
		<textbox width="50" id="codeValue" />
	</vbox>
</dialog>

As you can see, codeDialog.xul is very simple and contains only three elements inside a vbox. This is really one of the simplest examples you could use and was chosen to illustrate how to simply and easily pass information into and out of a dialog

Tags: CSS, DOM, Firefox, Firefox Extension, JavaScript

In this article we’re going to look at how to add some direction controls to our filmstrip. At the end of the last article we had the following filmstrip:

Horizontal scrollbars in <div> tags don’t really play that nicely with scroll wheels or key controls unless you set the tabindex property. I’ve done so on the filmstrip above, and given it tabindex="1" so it’s the first thing you tab to. Just press left or right to test it out. And, although the scrollbars work well enough, let’s try something different. There are several ways to accomplish this, but some are distinctly better than others. I say better because of how well, or poorly, they play with browsers.

The method I describe below is doing nothing more than changing the display css-attribute. It also uses a couple of different ways to move the filmstrip images.

First let’s look at the events. Using the following for your onload function:

function onLoad() {
	if (document.addEventListener) {
		document.getElementById('strip').addEventListener('keypress',HandleKeyPress,false);
		document.getElementById('strip').addEventListener('DOMMouseScroll',HandleWheel,false);
		document.getElementById('larrow').addEventListener('click',moveLeft,false);
		document.getElementById('rarrow').addEventListener('click',moveRight,false);
	} else {
		document.getElementById('strip').onkeypress = HandleKeyPress;
		document.getElementById('strip').onmousewheel = HandleWheel;
		document.getElementById('larrow').onclick = moveLeft;
		document.getElementById('rarrow').onclick = moveRight;
	}
	thumbNum = document.getElementById("imagerow").getElementsByTagName("li").length;
	setLeft();
}

The only reason for the difference is that some browsers don’t support the addEventListener method. setLeft() we’ll see a little bit later on. thumbNum is just a convenient store for the number of thumbnails.

Next let’s look at some of the variables we’re using and how they’re initialized:

var thumbNum;    //total number of thumbnails
var showNum = 4; //how many thumbnails to show
var curLeft = 0; //current index of the leftmost thumbnail

thumbNum we already know gets initialized in the onLoad function. showNum and curLeft are used throughout the script.

Next, let’s look at the events and what they call:

function HandleKeyPress(e) {
	switch (e.keyCode) {
		case e.DOM_VK_LEFT:
			moveLeft();
			break;
		case e.DOM_VK_RIGHT:
			moveRight();
			break;
		case e.DOM_VK_ESCAPE:
			content.focus();
			return;
	}
}

/** Event handler for mouse wheel event.
 * originally from http://adomas.org/javascript-mouse-wheel/
 */
 function handle(delta) {
        if (delta < 0)
		moveRight();
        else
		moveLeft();
}

function HandleWheel(event){
        var delta = 0;
        if (!event) /* For IE. */
                event = window.event;
        if (event.wheelDelta) { /* IE/Opera. */
                delta = event.wheelDelta/120;
                /** In Opera 9, delta differs in sign as compared to IE.
                 */
                if (window.opera)
                        delta = -delta;
        } else if (event.detail) { /** Mozilla case. */
                /** In Mozilla, sign of delta is different than in IE.
                 * Also, delta is multiple of 3.
                 */
                delta = -event.detail/3;
        }
        /** If delta is nonzero, handle it.
         * Basically, delta is now positive if wheel was scrolled up,
         * and negative, if wheel was scrolled down.
         */
        if (delta)
                handle(delta);
        /** Prevent default actions caused by mouse wheel.
         * That might be ugly, but we handle scrolls somehow
         * anyway, so don't bother here..
         */
        if (event.preventDefault)
                event.preventDefault();
	event.returnValue = false;
}

Looking at HandleKeyPress we see that it does a short switch-case on the keycode from the event. You can use this same technique to add other keypress events. There are also keyup and keydown events which have their uses.  The best list of the keycodes available is here.

The mouse wheel event I’ve borrowed from another site (no point in re-inventing the wheel). The annoying part about the mouse wheel is that every browser interprets the event differently. Sooo… the script has to check for them all.

Both, the mouse wheel event and the keypress event, call moveLeft() and moveRight(), which are shown below:

function moveLeft(){
  if (curLeft == 0) return; //already at the left
  else {
    curLeft = curLeft - 1;
    setLeft();
  }
}

function moveRight() {
  if (curLeft==thumbNum-showNum) return; //already at the right
  else {
    curLeft = curLeft + 1;
    setLeft();
  }
}

All these do is check to see if they’re already at the left or the right and then increase or decrease curLeft and call setLeft(). setLeft is what does our styling changes.

function setLeft(){
	var rng = getRanges();
	for (var i = 0; i < rng.out.length; i++ ) {
		rng.out[i].setAttribute("style","display:none;");
		rng.out[i].style.display = "none";
	}
	for (var i = 0; i< rng.in.length; i++ ) {
		rng.in[i].setAttribute("style","display:inline;");
		rng.in[i].style.display = "inline";
	}
}

The first thing it does is get the ranges of elements which will be hidden or shown. Then it loops through those outside the range to be shown and hides them. Finally it loops through those inside the range to be shown and displays them.

function getRanges() {
	var end = curLeft + showNum - 1; //calculate the image position at the end of the display

	var iva = new Array();	//create arrays for the in and out of range elements
	var ova = new Array();

	//get all of the <li> tags inside our imagrow
	var litags = document.getElementById("imagerow").getElementsByTagName("li");

	// loop through and add them to iva or ova if they
	// are in or out, respectively, of our desired range
	for (var i = 0; i < litags.length; i++) {
		if ((i < curLeft) || (i > end))
			ova.push(litags[i]);
		else
			iva.push(litags[i]);
	}
	return { in: iva, out: ova };
}

It’s pretty well commented but just to make some things clear: The childNodes and getElementsByTagName collections don’t work exactly like arrays and specifically they don’t support slice(). Therefore, we just make two new arrays and sort through the collection items. The finished product looks like ths:

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Go ahead and try some of the events out. The key events only work if the strip has focus, so either click on it, or tab to it first.

If you want to see what it looks like on it’s own, here’s the html, the javascript, and the css

Although the page itself is pretty bare bones, the script itself is even simpler.  The bandanna guide is another piece I wrote to accompany the game Pirate Quest.

This article attempts to demonstrate how we can use dynamically generated DOM objects to update table data on the fly.  In this case it’s fairly simple as only one value is changing and we’re only changing the cell text. There are some other ideas demonstrated here, such as using opacity and alternating row styles to create a colourful and easy to read table.

The following is the table we’ll be updating. It’s pretty simple – just the column headings.  EDIT: added thead and tbody tags. IE would append rows to the table unless they were in the tbody tag.

<table id="tbl_guide" border="1">
	<thead>
		<tr>
			<td rowspan="2">Level</td>
			<td rowspan="2">Energy</td>
			<td colspan="2">No Bandanna</td>
			<td colspan="2">Bandanna of Vigor</td>
			<td colspan="2">Bandanna of Vitality</td>
			<td colspan="2">Bafunda de la Cabeza</td>
		</tr>
		<tr>
			<td>min</td>
			<td>max</td>
			<td>min</td>
			<td>max</td>
			<td>min</td>
			<td>max</td>
			<td>min</td>
			<td>max</td>
		</tr>
	</thead>
	<tbody id="tbl_body"/>
</table>

You can use whatever you want to start the update process. In this case I used the onchange event on a drop down list

<select id="hideout" onchange="update(Number(this.options[this.selectedIndex].value));">
  <option value="100">homeless (100)</option>
  <option value="105">Wretched Alcove (105)</option>
  <option value="110">Abandoned Outhouse (110)</option>
  <option value="115">Festering Swamp (115)</option>
  <option value="120">Swamp with a View (120)</option>
  <option value="130">Desolate Beach (130)</option>
  <option value="140">Rundown Shanty (140)</option>
  <option value="150">Rusted Roof Shack (150)</option>
  <option value="160">Shanty with a Fence (160)</option>
  <option value="170">Deserted Manor (170)</option>
  <option value="180">Ruined Castle (180)</option>
  <option value="185">Rundown Castle (185)</option>
  <option value="190">Stronghold (190)</option>
  <option value="195">Fortified Stronghold (195)</option>
  <option value="200">Shack on Skull Island (200)</option>
  <option value="220">Cavern on Skull Island (220)</option>
  <option value="230">Stronghold on Skull Island (230)</option>
</select>

Next, on to the script itself. First we define the number of rows and columns, and we create a 2D array for our cells.

//2D array of table cells
var cells = new Array();

var numcols = 10;
var numrows = 600;

I used the body onload event to set up the table rows. EDIT: Because IE doesn’t seem to recognize a class or style change made with setAttribute(), I had to fall back on an alternative

function onLoad() {
	//get our table and our select box
	var table = document.getElementById("tbl_guide");
	var select = document.getElementById("hideout");
	var row; //tr DOM object
	var cell; //td DOM object
	var celltext; //createTextNode DOM object
	var row_arr; //array of cells for each row
	//for the opacity overlay we use three divs. one on the outside, one for the
	//background color and one for the text
	var out_div, in_div1, in_div2; 

	//loop through the number of rows we want
	for (var i = 0; i<numrows; i++) {

		//create this row and set the style for even or odd.
		row = document.createElement("tr");
		row.setAttribute("class",(i%2 == 0)? "even":"odd");
		row.className = (i%2 == 0)? "even":"odd"; //for IE

		//get a new, clean array to work with
		row_arr = new Array();

		//loop through each cell for the number of columns we have
		for (var j=0; j<numcols;j++) {

			//create our table cell and div arrangement for our opacity trick
			cell = document.createElement("td");
			out_div = document.createElement("div");
			in_div1 = document.createElement("div");
			in_div2 = document.createElement("div");

			//set the styles for the div objects
			out_div.setAttribute("class","outer");
			in_div2.setAttribute("class","text");
			in_div1.setAttribute("class","bg");

			//for IE (up to 7) since it appears to lack proper support for setAttribute
			out_div.className = "outer";
			in_div1.className = "bg";
			in_div2.className = "text";

			//depending on what cell we're in we should do different things. mostly this affects the styles
			switch(j) {
				case 0:
					//level
					celltext = document.createTextNode(String(i+1));
					in_div1.setAttribute("style","background-color:yellow;");
					in_div1.style.background = "yellow"; //for IE again
					break;
				case 1:
					//Energy
					celltext = document.createTextNode(String(i+10));
					in_div1.setAttribute("style","background-color:yellow;");
					in_div1.style.background = "yellow";
					break;
				case 2:
					celltext = document.createTextNode("");
					in_div1.setAttribute("style","background-color:red;");
					in_div1.style.background = "red";
					break;
				case 3:
					celltext = document.createTextNode("");
					in_div1.setAttribute("style","background-color:red;");
					in_div1.style.background = "red";
					break;
				case 4:
					celltext = document.createTextNode("");
					in_div1.setAttribute("style","background-color:blue;");
					in_div1.style.background = "blue";
					break;
				case 5:
					celltext = document.createTextNode("");
					in_div1.setAttribute("style","background-color:blue;");
					in_div1.style.background = "blue";
					break;
				case 6:
					celltext = document.createTextNode("");
					in_div1.setAttribute("style","background-color:green;");
					in_div1.style.background = "green";
					break;
				case 7:
					celltext = document.createTextNode("");
					in_div1.setAttribute("style","background-color:green;");
					in_div1.style.background = "green";
					break;
				case 8:
					celltext = document.createTextNode("");
					in_div1.setAttribute("style","background-color:purple;");
					in_div1.style.background = "purple";
					break;
				case 9:
					celltext = document.createTextNode("");
					in_div1.setAttribute("style","background-color:purple;");
					in_div1.style.background = "purple";
					break;
			}

			//add our text to the second inner div
			in_div2.appendChild(celltext);

			//append the two inner divs to the outer div, then append the outer div to the cell
			out_div.appendChild(in_div1);
			out_div.appendChild(in_div2);
			cell.appendChild(out_div);

			//append the cell to the row
			row.appendChild(cell);

			/* finally add this celltext to the row array.
			 * NOTE: you could just as easily append one of the divs or the td tag. In this case
			 * I'm only changing the text. If you wanted to change the colors, for example, you'd
			 * need to push in_div1 onto the array. To change both the color and the text\, you'd
			 * need to push out_div onto the array and later access the children
			 */
			row_arr.push(celltext);
		}

		//add the row to the table, and push the row array onto our 2d cell array
		table.appendChild(row);
		cells.push(row_arr);
	}
	/* then update the values. The operation performed in update() could have been included
	 * in the switch-case above, but then if I changed it, I'd need to change it in two places.
	 * Casts the value from the select box to Number. for *, / , etc. the value is interpreted as
	 * a number anyways, but for +, it assumes it's a string value.... so we have to cast it.
	 */
	update(Number(select.options[select.selectedIndex].value));
}

The onLoad function only assigns values to level and energy.  Hopefully the comments in the code are clear enough to see what I’ve done.

Next up, the update function

function update(value) {
	//loop through each row
	for (var i = 0; i<numrows; i++) {
		//loop through each cell in a row but ignore the first two
		//(values were set up in the onLoad and don't change now)
		for (var j=2; j<numcols;j++) {
			//again switch-case, this time for the different formulas in each cell
			switch(j) {
				case 2:
					//no bandanna min
					cells[i][j].nodeValue = tp((value/150) * ((i+10)/20));
					break;
				case 3:
					//no bandanna max
					cells[i][j].nodeValue = tp((value/75) * ((i+10)/20));
					break;
				case 4:
					//vigor min
					cells[i][j].nodeValue = tp((value/150) * ((i+20)/20));
					break;
				case 5:
					//vigor max
					cells[i][j].nodeValue = tp((value/75) * ((i+20)/20));
					break;
				case 6:
					//vitality min
					cells[i][j].nodeValue = tp(((value + 20)/150) * ((i+10)/20));
					break;
				case 7:
					//vitality max
					cells[i][j].nodeValue = tp(((value + 20)/75) * ((i+10)/20));
					break;
				case 8:
					//bafunda min
					cells[i][j].nodeValue = tp(((value + 25)/150) * ((i+25)/20));
					break;
				case 9:
					//bafunda max
					cells[i][j].nodeValue = tp(((value + 25)/75) * ((i+25)/20));
					break;
			}
		}
	}
}

The update function, as you can see, is very simple. we use .nodeValue to change the text content of our text nodes. As noted in the comments of the onLoad, you could also use the cell itself or one of the containing divs. Your cases would look more like cells[i][j].childNodes[1].childNodes[0].nodeValue if you used out_div in your cells array.

I suppose the last thing to look at is the style section.

table { border-collapse:collapse; border-width:3px; border-style:double; border-color:black; }
td { border-color:black; border-width:1px; }
thead tr td {  padding-left:.5em; }
tbody tr td { padding: 0px 0px 0px 0px; height:1em; width:5em; }
div.outer { position:relative;}
div.bg { opacity: 0.3; height:1em; filter: alpha(opacity=30); padding: 5px 10px 5px 10px; }
div.text { position: absolute; top: 0; bottom: 0; color: black; padding: 5px 10px 5px 10px; }
tbody tr.even { background-color:#d0d0d0; }
tbody tr.odd { background-color:#ffffff; }

It’s pretty short. True, I could have done more to pretty up the page.. and I may yet. but for now, it works well enough and demonstrates the dynamic generation and update technique.

As you can see the code is far from complicated and this would have been far messier in the old pre-DOM days *shudder*.

EDIT: Also, please note that in IE the page is so slow to generate and update that I develop a whole new loathing for Ie every time I open it. In firefox, the generation takes a little time, but not too bad. The updating in Firefox is quite quick. For a small set of rows, IE is fine… 600 rows seemsto kill it though.

Tags: CSS, DOM, Dynamic, JavaScript, Opacity, Positioning, Table

Pirate Questing is a firefox addon thatI’ve been devloping for a while. It’s available at AMO here

I’ll mostly be using this space to document interesting solutions I come across.

Tags: Firefox, JavaScript, XUL