Tri-state checkbox in JavaScript

César Izurieta — Fri, 11 Sep 2009 00:52:28 +0000

I found myself needing to implement a tri-state checkbox in javascript. A checkbox has initially 2 states: on or off. From the html perspective if the checkbox is checked then the value is submitted, if it is not then the value is not submitted. From the javascript perspective you can use:

if (checkbox.checked) {
alert("This checkbox is checked");
}

Some times a true or false is not enough. Other development platforms have tri-state checkboxes that can have either a true, false or null value. The following snippet adds a “greyable” functionality to checkboxes:

Element.addMethods("INPUT", (function() {
var changeHandler = function(e) {
if (this.greyed || this.checked) {
this.setGreyed(!this.greyed);
if (!this.greyed) {
this.checked = true;
}
}
};

function setGreyed(checkbox, greyed) {
checkbox.greyed = typeof greyed == "undefined" ? true : !!greyed;
checkbox.setOpacity(checkbox.greyed ? 0.33 : 1);
if (checkbox.greyed) {
checkbox.checked = checkbox.greyedState;
}
}

function setGreyable(element, enable) {
if (!(element = $(element))) return;

if (!(/checkbox|radiobutton/i.test(element.type))) {
return;
}

if (typeof element.greyedState == "undefined" || enable) {
element.observe("change", changeHandler);
element.setGreyState(false);
element.setGreyed(false);
} else {
element.stopObserving("change", changeHandler);
element.setGreyed(false);
element.checked = element.greyedState;
element.greyedState = undefined;
element.greyed = undefined;
}
}

function setGreyState(element, greyedState) {
if (!(element = $(element))) return;

if (!(/checkbox|radiobutton/i.test(element.type))) {
return;
}

element.greyedState = typeof greyedState == "undefined" ? true :
!!greyedState;
}

return {
setGreyed: setGreyed,
setGreyable: setGreyable,
setGreyState: setGreyState
}
})());

This currently requires prototypejs but could be easily modified to not depend on it. To enable it on some element do something like this:

checkbox.setGreyable();

To check if it is greyed or not:

if (checkbox.greyed) {
alert("This checkbox is greyed");
}

You can also change the state of the checkbox when it is greyed. To set this use the following:

checkbox.setGreyState(true);

The parameter indicates whether the checkbox is checked when grey. Clicking on the checkbox (or changing the state by keyboard) loops through 3 states: checked, not checked and greyed.

No related posts.

Sectum: optimizing glass cutting

César Izurieta — Tue, 13 Jan 2009 05:13:43 +0000

I’m starting a new project. The problem I need to address is now glass cutting and how to optimize a set of cuts to satisfy an order of cut glass sheets. The algorithm I used is the following:

Get the largest piece of material from the order.
Get the smallest piece of material from the available material that can contain the ordered piece.
Cut.
Repeat the process.

It seems to be working just fine for a large set of examples. I cannot find some example where it would fail to produce the best result. There were some constraints I had to take into account.

Cuts should always be done from side to side on the available material and the cuts should be done perpendicular to the largest of the sides of the material whenever possible.
Each cut should be independent of the previous cuts and sequential in case there’s a glass breaking or anything else. In that case the cuts should be able to be “replayed” from the failure point forward after doing the correction.

Here’s an image of the result.

The 10th cut as calculated by sectum.

No related posts.

CAIH.org » alpha

Tri-state checkbox in JavaScript

Sectum: optimizing glass cutting