Version 1.0Migrating from 0.x

Changes to consider

As part of our version policy Glow 1.0.0 contains changes that are backwardly incompatible with 0.x versions. This document is an exhaustive list of those changes. Most of the differences are small and will require minimal editing of your 0.x code.

• New method for including Glow on a page - Gloader
• glow.net.abort is gone, replaced with glow.net.Request
• glow.net.loadScript has a different interface, more like get & post
• glow.dom.NodeList#replaceWith change in behaviour
• glow.dom.NodeList#css now uses CSS values for "top", "bottom", "left" and "right"
• glow.dom.NodeList#offset return object has different properties
• glow.events.addListener now acts on every element in a selector / NodeList
• Widgets use different class names

Methods or properties in Glow that begin with an underscore or are undocumented may also have changed.

New method for including Glow on a page - Gloader

Prior to Glow 1.0.0, Glow was manually included using script tags. Now, we have a loader which handles dependencies, gives you the latest compatible version and can be used to get a sandboxed version of glow (away from the global scope).

How to use the loader is covered in Getting Started.

glow.net.abort is gone, replaced with glow.net.request

glow.net.get and glow.net.post now return an instance of glow.net.request which fires events and provides access to the browser's native request object.

Previously, to abort a request you would pass an identifier returned by glow.net.get to glow.net.abort. Now you can simply call the abort method of the request object.

Old method:

var id = glow.net.get("myfile.txt", { onLoad: loadFunction
}); //abort the request
glow.net.abort(id);

New method:

var request = glow.net.get("myfile.txt", { onLoad: loadFunction
}); //abort the request
request.abort();

API Documentation for glow.net

glow.net.loadScript has a different interface, more like get & post

glow.net.loadScript now uses an options object as the 2nd parameter rather than a callback. The options object can also be used for setting charsets and timeouts.

Old method:

glow.net.loadScript("http://www.somewhere.com/api/?callback={callback}", function(data) { alert("data returned");
});

New method:

var request = glow.net.loadScript("http://www.somewhere.com/api/?callback={callback}", { onLoad: function() { alert("data returned"); }
});

API Documentation for glow.net.loadScript

glow.dom.NodeList#replaceWith change in behaviour

Prior to 1.0.0, replaceWith would replace the contents of an element. Now, this function will replace the element(s) it's called on.

<div id="myElement">Hello World</div>

glow.dom.get("#myElement").replaceWith("<p>Replaced!</p>"); //prior to 1.0.0, the html would be:
//<div id="myElement"><p>Replaced!</p></div> //after 1.0.0 the html is:
//<p>Replaced!</p>

API Documentation for glow.dom.NodeList#replaceWith

glow.dom.NodeList#css now uses CSS values for "top", "bottom", "left" and "right"

If you were getting the CSS "top" property of a statically positioned element Glow would attempt to calculate what the "top" property would be if it were in the same position with absolute positioning.

However, this was unreliable, slow and inconvenient as an API. Getting the offset from the positioned parent is useful, but you may want to get this value even if the element has relative positioning.

Now, this method returns the calculated CSS value. For statically positioned items this is likely to be "0px". A separate method will be introduced to get the offset from the positioned parent.

API Documentation for glow.dom.NodeList#css

glow.dom.NodeList#offset return object has different properties

Previously, calling offset would return an object with x & y properties, now it has 'left' and 'top' properties

glow.events.addListener now acts on every element in a selector / NodeList

Previously, events would only be attached to one element. If a NodeList or CSS selector was used then the event would be applied to the first match. If you wanted to apply events to more than the first match you would have to create a loop to create listener.

Now, the listener will be applied to all matches.

glow.events.addListner("a", "click", function() { alert("hello!");
}); //"hello!" will be alerted when any link on the page is clicked

However, when setting events on multiple elements you should consider event delegation instead. Rather than assign events to each list item in an unordered list, it is more efficient to assign one listener to the list and react depending on the source of the event.

API Documentation for glow.events.addListener

Widgets use different class names

The class names used by Overlay, Mask, Panel and InfoPanel have changed, but their HTML structure has not. If you have customised the appearence of one of these widgets using CSS you will need to update your CSS to reflect the new (shorter) class names.

If you are going to change the appearence of a widget, ensure you add your own class name to its container and target the widget via that. This ensures you won't affect the design of other overlays on the page.