2gis-maps

## Working with DOM {toc} ### DG.DomEvent Utility functions to work with the <a href="https://developer.mozilla.org/docs/Web/API/Event">DOM events</a>. #### Functions <table> <thead> <tr> <th>Function</th> <th>Returns</th> <th>Description</th> </tr> </thead> <tbody> <tr id="domevent-on"> <td><code>on( <HTMLElement> el, <String> types, <Function> fn, <Object> context? ) </code></td> <td><code>this</code></td> <td>Adds a listener function (<code>fn</code>) to a particular DOM event type of the element <code>el</code>. You can optionally specify the context of the listener (object the <code>this</code> keyword will point to). You can also pass several space-separated types (e.g. <code>'click dblclick'</code>).</td> </tr> <tr> <td><code>on( <HTMLElement> el, <Object> eventMap, <Object> context? ) </code></td> <td><code>this</code></td> <td>Adds a set of type/listener pairs, e.g. <code>{click: onClick, mousemove: onMouseMove}</code></td> </tr> <tr id="domevent-off"> <td><code>off( <HTMLElement> el, <String> types, <Function> fn, <Object> context? ) </code></td> <td><code>this</code></td> <td>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 <code>off</code> in order to remove the listener.</td> </tr> <tr> <td><code>off( <HTMLElement> el, <Object> eventMap, <Object> context? ) </code></td> <td><code>this</code></td> <td>Removes a set of type/listener pairs.</td> </tr> <tr id="domevent-stoppropagation"> <td><code>stopPropagation( <DOMEvent> ev ) </code></td> <td><code>this</code></td> <td>Stop the given event from propagation to parent elements. Used inside the listener functions: <pre><code>DG.DomEvent.on(div, 'click', function (ev) { DG.DomEvent.stopPropagation(ev); });</code></pre></td> </tr> <tr id="domevent-disablescrollpropagation"> <td><code>disableScrollPropagation( <HTMLElement> el ) </code></td> <td><code>this</code></td> <td>Adds <code>stopPropagation</code> to the element's <code>'mousewheel'</code> events (plus browser variants).</td> </tr> <tr id="domevent-disableclickpropagation"> <td><code>disableClickPropagation( <HTMLElement> el ) </code></td> <td><code>this</code></td> <td>Adds <code>stopPropagation</code> to the element's <code>'click'</code>, <code>'doubleclick'</code>, <code>'mousedown'</code> and <code>'touchstart'</code> events (plus browser variants).</td> </tr> <tr id="domevent-preventdefault"> <td><code>preventDefault( <DOMEvent> ev ) </code></td> <td><code>this</code></td> <td>Prevents the default action of the DOM Event <code>ev</code> from happening (such as following a link in the href of the a element, or doing a POST request with page reload when a <code><form></code> is submitted). Use it inside listener functions.</td> </tr> <tr id="domevent-stop"> <td><code>stop( <DOMEvent> ev ) </code></td> <td><code>this</code></td> <td>Does <code>stopPropagation</code> and <code>preventDefault</code> at the same time.</td> </tr> <tr id="domevent-getmouseposition"> <td><code>getMousePosition( <DOMEvent> ev, <HTMLElement> container? ) </code></td> <td><code><a href="/doc/maps/en/manual/basic-types#dgpoint">Point</a></code></td> <td>Gets normalized mouse position from a DOM event relative to the <code>container</code> or to the whole page if not specified.</td> </tr> <tr id="domevent-getwheeldelta"> <td><code>getWheelDelta( <DOMEvent> ev ) </code></td> <td><code>Number</code></td> <td>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.</td> </tr> <tr id="domevent-addlistener"> <td><code>addListener( … ) </code></td> <td><code>this</code></td> <td>Alias to <a href="#domevent-on"><code>DG.DomEvent.on</code></a></td> </tr> <tr id="domevent-removelistener"> <td><code>removeListener( … ) </code></td> <td><code>this</code></td> <td>Alias to <a href="#domevent-off"><code>DG.DomEvent.off</code></a></td> </tr> </tbody> </table> ### DG.DomUtil Utility functions to work with the <a href="https://developer.mozilla.org/docs/Web/API/Document_Object_Model">DOM</a> tree. #### Functions <table> <thead> <tr> <th>Function</th> <th>Returns</th> <th>Description</th> </tr> </thead> <tbody> <tr id="domutil-get"> <td><code>get( <String|HTMLElement> id ) </code></td> <td><code>HTMLElement</code></td> <td>Returns an element given its DOM id, or returns the element itself if it was passed directly.</td> </tr> <tr id="domutil-getstyle"> <td><code>getStyle( <HTMLElement> el, <String> styleAttrib ) </code></td> <td><code>String</code></td> <td>Returns the value for a certain style attribute on an element, including computed values or values set through CSS.</td> </tr> <tr id="domutil-create"> <td><code>create( <String> tagName, <String> className?, <HTMLElement> container? ) </code></td> <td><code>HTMLElement</code></td> <td>Creates an HTML element with <code>tagName</code>, sets its class to <code>className</code>, and optionally appends it to <code>container</code> element.</td> </tr> <tr id="domutil-remove"> <td><code>remove( <HTMLElement> el ) </code></td> <td><code></code></td> <td>Removes <code>el</code> from its parent element</td> </tr> <tr id="domutil-empty"> <td><code>empty( <HTMLElement> el ) </code></td> <td><code></code></td> <td>Removes all of <code>el</code>'s children elements from <code>el</code></td> </tr> <tr id="domutil-tofront"> <td><code>toFront( <HTMLElement> el ) </code></td> <td><code></code></td> <td>Makes <code>el</code> the last children of its parent, so it renders in front of the other children.</td> </tr> <tr id="domutil-toback"> <td><code>toBack( <HTMLElement> el ) </code></td> <td><code></code></td> <td>Makes <code>el</code> the first children of its parent, so it renders back from the other children.</td> </tr> <tr id="domutil-hasclass"> <td><code>hasClass( <HTMLElement> el, <String> name ) </code></td> <td><code>Boolean</code></td> <td>Returns <code>true</code> if the element's class attribute contains <code>name</code>.</td> </tr> <tr id="domutil-addclass"> <td><code>addClass( <HTMLElement> el, <String> name ) </code></td> <td><code></code></td> <td>Adds <code>name</code> to the element's class attribute.</td> </tr> <tr id="domutil-removeclass"> <td><code>removeClass( <HTMLElement> el, <String> name ) </code></td> <td><code></code></td> <td>Removes <code>name</code> from the element's class attribute.</td> </tr> <tr id="domutil-setclass"> <td><code>setClass( <HTMLElement> el, <String> name ) </code></td> <td><code></code></td> <td>Sets the element's class.</td> </tr> <tr id="domutil-getclass"> <td><code>getClass( <HTMLElement> el ) </code></td> <td><code>String</code></td> <td>Returns the element's class.</td> </tr> <tr id="domutil-setopacity"> <td><code>setOpacity( <HTMLElement> el, <Number> opacity ) </code></td> <td><code></code></td> <td>Set the opacity of an element. <code>opacity</code> must be a number from <code>0</code> to <code>1</code>.</td> </tr> <tr id="domutil-testprop"> <td><code>testProp( <String[]> props ) </code></td> <td><code>String|false</code></td> <td>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 <code>transform</code>.</td> </tr> <tr id="domutil-settransform"> <td><code>setTransform( <HTMLElement> el, <<a href="/doc/maps/en/manual/basic-types#dgpoint">Point</a>> offset, <Number> scale? ) </code></td> <td><code></code></td> <td>Resets the 3D CSS transform of <code>el</code> so it is translated by <code>offset</code> pixels and optionally scaled by <code>scale</code>. Does not have an effect if the browser doesn't support 3D CSS transforms.</td> </tr> <tr id="domutil-setposition"> <td><code>setPosition( <HTMLElement> el, <<a href="/doc/maps/en/manual/basic-types#dgpoint">Point</a>> position ) </code></td> <td><code></code></td> <td>Sets the position of <code>el</code> to coordinates specified by <code>position</code>, using CSS translate or top/left positioning depending on the browser (used by Leaflet internally to position its layers).</td> </tr> <tr id="domutil-getposition"> <td><code>getPosition( <HTMLElement> el ) </code></td> <td><code><a href="/doc/maps/en/manual/basic-types#dgpoint">Point</a></code></td> <td>Returns the coordinates of an element previously positioned with setPosition.</td> </tr> <tr id="domutil-disabletextselection"> <td><code>disableTextSelection()</code></td> <td><code></code></td> <td>Prevents the user from generating <code>selectstart</code> 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.</td> </tr> <tr id="domutil-enabletextselection"> <td><code>enableTextSelection()</code></td> <td><code></code></td> <td>Cancels the effects of a previous <a href="#domutil-disabletextselection"><code>DG.DomUtil.disableTextSelection</code></a>.</td> </tr> <tr id="domutil-disableimagedrag"> <td><code>disableImageDrag()</code></td> <td><code></code></td> <td>As <a href="#domutil-disabletextselection"><code>DG.DomUtil.disableTextSelection</code></a>, but for <code>dragstart</code> DOM events, usually generated when the user drags an image.</td> </tr> <tr id="domutil-enableimagedrag"> <td><code>enableImageDrag()</code></td> <td><code></code></td> <td>Cancels the effects of a previous <a href="#domutil-disabletextselection"><code>DG.DomUtil.disableImageDrag</code></a>.</td> </tr> <tr id="domutil-preventoutline"> <td><code>preventOutline( <HTMLElement> el ) </code></td> <td><code></code></td> <td>Makes the <a href="https://developer.mozilla.org/docs/Web/CSS/outline">outline</a> of the element <code>el</code> invisible. Used internally by Leaflet to prevent focusable elements from displaying an outline when the user performs a drag interaction on them.</td> </tr> <tr id="domutil-restoreoutline"> <td><code>restoreOutline()</code></td> <td><code></code></td> <td>Cancels the effects of a previous <a href="#domutil-preventoutline"><code>DG.DomUtil.preventOutline</code></a>.</td> </tr> </tbody> </table> #### Properties <table> <thead> <tr> <th>Property</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>TRANSFORM</code></td> <td><code>String</code></td> <td>Vendor-prefixed fransform style name (e.g. <code>'webkitTransform'</code> for WebKit).</td> </tr> <tr> <td><code>TRANSITION</code></td> <td><code>String</code></td> <td>Vendor-prefixed transition style name.</td> </tr> </tbody> </table> ### 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 <table> <thead> <tr> <th>Event</th> <th>Data</th> <th>Description</th> </tr> </thead> <tbody> <tr id="posanimation-start"> <td><code>start</code></td> <td><code><a href="/doc/maps/en/manual/events#event">Event</a></code></td> <td>Fired when the animation starts.</td> </tr> <tr id="posanimation-step"> <td><code>step</code></td> <td><code><a href="/doc/maps/en/manual/events#event">Event</a></code></td> <td>Fired continuously during the animation.</td> </tr> <tr id="posanimation-end"> <td><code>end</code></td> <td><code><a href="/doc/maps/en/manual/events#event">Event</a></code></td> <td>Fired when the animation ends.</td> </tr> </tbody> </table> #### Methods <table> <thead> <tr> <th>Method</th> <th>Returns</th> <th>Description</th> </tr> </thead> <tbody> <tr id="posanimation-run"> <td><code>run( <HTMLElement> el, <<a href="/doc/maps/en/manual/basic-types#dgpoint">Point</a>> newPos, <Number> duration?, <Number> easeLinearity?) </code></td> <td><code></code></td> <td>Run an animation of a given element to a new position, optionally setting duration in seconds (<code>0.25</code> by default) and easing linearity factor (3rd argument of the <a href="http://cubic-bezier.com/#0,0,.5,1">cubic bezier curve</a>, <code>0.5</code> by default).</td> </tr> <tr id="posanimation-stop"> <td><code>stop()</code></td> <td><code></code></td> <td>Stops the animation (if currently running).</td> </tr> </tbody> </table> Methods inherited from <a href="/doc/maps/en/manual/base-classes#dgevented">Evented</a>  ### 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](#domutil-setposition) var draggable = new DG.Draggable(elementToDrag); draggable.enable(); #### Properties <table> <thead> <tr> <th>Property</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr id="draggable-clicktolerance"> <td><code>clickTolerance</code></td> <td><code>Number</code></td> <td><code>3</code></td> <td>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).</td> </tr> </tbody> </table> #### Events <table> <thead> <tr> <th>Event</th> <th>Data</th> <th>Description</th> </tr> </thead> <tbody> <tr id="draggable-down"> <td><code>down</code></td> <td><code><a href="/doc/maps/en/manual/events#event">Event</a></code></td> <td>Fired when a drag is about to start.</td> </tr> <tr id="draggable-dragstart"> <td><code>dragstart</code></td> <td><code><a href="/doc/maps/en/manual/events#event">Event</a></code></td> <td>Fired when a drag starts</td> </tr> <tr id="draggable-predrag"> <td><code>predrag</code></td> <td><code><a href="/doc/maps/en/manual/events#event">Event</a></code></td> <td>Fired continuously during dragging before each corresponding update of the element's position. Fired continuously during dragging.</td> </tr> <tr id="draggable-dragend"> <td><code>dragend</code></td> <td><code><a href="/doc/maps/en/manual/events#event">Event</a></code></td> <td>Fired when the drag ends.</td> </tr> </tbody> </table> #### Methods <table> <thead> <tr> <th>Method</th> <th>Returns</th> <th>Description</th> </tr> </thead> <tbody> <tr id="draggable-enable"> <td><code>enable()</code></td> <td><code></code></td> <td>Enables the dragging ability.</td> </tr> <tr id="draggable-disable"> <td><code>disable()</code></td> <td><code></code></td> <td>Disables the dragging ability.</td> </td> </tbody> </table> Methods inherited from <a href="/doc/maps/en/manual/base-classes#dgevented">Evented</a>