dom-utils

DG.DomEvent

Utility functions to work with the DOM events.

Functions

Function	Returns	Description
on( <HTMLElement> el, <String> types, <Function> fn, <Object> context? )	this	Adds a listener function (fn) to a particular DOM event type of the element el. You can optionally specify the context of the listener (object the this keyword will point to). You can also pass several space-separated types (e.g. 'click dblclick').
on( <HTMLElement> el, <Object> eventMap, <Object> context? )	this	Adds a set of type/listener pairs, e.g. {click: onClick, mousemove: onMouseMove}
off( <HTMLElement> el, <String> types, <Function> fn, <Object> context? )	this	Removes a previously added listener function. If no function is specified, it will remove all the listeners of that particular DOM event from the element. Note that if you passed a custom context to on, you must pass the same context to off in order to remove the listener.
off( <HTMLElement> el, <Object> eventMap, <Object> context? )	this	Removes a set of type/listener pairs.
stopPropagation( <DOMEvent> ev )	this	Stop the given event from propagation to parent elements. Used inside the listener functions: DG.DomEvent.on(div, 'click', function (ev) { DG.DomEvent.stopPropagation(ev); });
disableScrollPropagation( <HTMLElement> el )	this	Adds stopPropagation to the element's 'mousewheel' events (plus browser variants).
disableClickPropagation( <HTMLElement> el )	this	Adds stopPropagation to the element's 'click', 'doubleclick', 'mousedown' and 'touchstart' events (plus browser variants).
preventDefault( <DOMEvent> ev )	this	Prevents the default action of the DOM Event ev from happening (such as following a link in the href of the a element, or doing a POST request with page reload when a <form> is submitted). Use it inside listener functions.
stop( <DOMEvent> ev )	this	Does stopPropagation and preventDefault at the same time.
getMousePosition( <DOMEvent> ev, <HTMLElement> container? )	Point	Gets normalized mouse position from a DOM event relative to the container or to the whole page if not specified.
getWheelDelta( <DOMEvent> ev )	Number	Gets normalized wheel delta from a mousewheel DOM event, in vertical pixels scrolled (negative if scrolling down). Events from pointing devices without precise scrolling are mapped to a best guess of between 50-60 pixels.
addListener( … )	this	Alias to DG.DomEvent.on
removeListener( … )	this	Alias to DG.DomEvent.off

DG.DomUtil

Utility functions to work with the DOM tree.

Functions

Function	Returns	Description
get( <String|HTMLElement> id )	HTMLElement	Returns an element given its DOM id, or returns the element itself if it was passed directly.
getStyle( <HTMLElement> el, <String> styleAttrib )	String	Returns the value for a certain style attribute on an element, including computed values or values set through CSS.
create( <String> tagName, <String> className?, <HTMLElement> container? )	HTMLElement	Creates an HTML element with tagName, sets its class to className, and optionally appends it to container element.
remove( <HTMLElement> el )		Removes el from its parent element
empty( <HTMLElement> el )		Removes all of el's children elements from el
toFront( <HTMLElement> el )		Makes el the last children of its parent, so it renders in front of the other children.
toBack( <HTMLElement> el )		Makes el the first children of its parent, so it renders back from the other children.
hasClass( <HTMLElement> el, <String> name )	Boolean	Returns true if the element's class attribute contains name.
addClass( <HTMLElement> el, <String> name )		Adds name to the element's class attribute.
removeClass( <HTMLElement> el, <String> name )		Removes name from the element's class attribute.
setClass( <HTMLElement> el, <String> name )		Sets the element's class.
getClass( <HTMLElement> el )	String	Returns the element's class.
setOpacity( <HTMLElement> el, <Number> opacity )		Set the opacity of an element. opacity must be a number from 0 to 1.
testProp( <String[]> props )	String|false	Goes through the array of style names and returns the first name that is a valid style name for an element. If no such name is found, it returns false. Useful for vendor-prefixed styles like transform.
setTransform( <HTMLElement> el, <Point> offset, <Number> scale? )		Resets the 3D CSS transform of el so it is translated by offset pixels and optionally scaled by scale. Does not have an effect if the browser doesn't support 3D CSS transforms.
setPosition( <HTMLElement> el, <Point> position )		Sets the position of el to coordinates specified by position, using CSS translate or top/left positioning depending on the browser (used by Leaflet internally to position its layers).
getPosition( <HTMLElement> el )	Point	Returns the coordinates of an element previously positioned with setPosition.
disableTextSelection()		Prevents the user from generating selectstart DOM events, usually generated when the user drags the mouse through a page with text. Used internally by Leaflet to override the behaviour of any click-and-drag interaction on the map. Affects drag interactions on the whole document.
enableTextSelection()		Cancels the effects of a previous DG.DomUtil.disableTextSelection.
disableImageDrag()		As DG.DomUtil.disableTextSelection, but for dragstart DOM events, usually generated when the user drags an image.
enableImageDrag()		Cancels the effects of a previous DG.DomUtil.disableImageDrag.
preventOutline( <HTMLElement> el )		Makes the outline of the element el invisible. Used internally by Leaflet to prevent focusable elements from displaying an outline when the user performs a drag interaction on them.
restoreOutline()		Cancels the effects of a previous DG.DomUtil.preventOutline.

Properties

Property	Type	Description
TRANSFORM	String	Vendor-prefixed fransform style name (e.g. 'webkitTransform' for WebKit).
TRANSITION	String	Vendor-prefixed transition style name.

DG.PosAnimation

Used internally for panning animations, utilizing CSS3 Transitions for modern browsers and a timer fallback for IE6-9.

var fx = new DG.PosAnimation();
fx.run(el, [300, 500], 0.5);

Events

Event	Data	Description
start	Event	Fired when the animation starts.
step	Event	Fired continuously during the animation.
end	Event	Fired when the animation ends.

Methods

Method	Returns	Description
run( <HTMLElement> el, <Point> newPos, <Number> duration?, <Number> easeLinearity?)		Run an animation of a given element to a new position, optionally setting duration in seconds (0.25 by default) and easing linearity factor (3rd argument of the cubic bezier curve, 0.5 by default).
stop()		Stops the animation (if currently running).

Methods inherited from Evented

DG.Draggable

A class for making DOM elements draggable (including touch support). Used internally for map and marker dragging. Only works for elements that were positioned with DG.DomUtil.setPosition

var draggable = new DG.Draggable(elementToDrag);
draggable.enable();

Properties

Property	Type	Default	Description
clickTolerance	Number	3	The max number of pixels a user can shift the mouse pointer during a click for it to be considered a valid click (as opposed to a mouse drag).

Events

Event	Data	Description
down	Event	Fired when a drag is about to start.
dragstart	Event	Fired when a drag starts
predrag	Event	Fired continuously during dragging before each corresponding update of the element's position. Fired continuously during dragging.
dragend	Event	Fired when the drag ends.

Methods

Method	Returns	Description
enable()		Enables the dragging ability.
disable()		Disables the dragging ability.

Methods inherited from Evented