Работа с DOM

DG.DomEvent

Класс для работы с событиями DOM.

Методы

Метод	Возвращает	Описание
`on( <HTMLElement> el, <String> types, <Function> fn, <Object> context? )`	`this`	Добавляет метод `fn` к цепочкам обработчиков событий DOM, привязанных к элементу `el`. Вы также можете указать (изменить) контекст вызова обработчика (объект, на который ссылается ключевое слово `this` внутри обработчика). Также, можно указать несколько типов событий, разделив их пробелами (например: `'click dblclick'`).
`on( <HTMLElement> el, <Object> eventMap, <Object> context? )`	`this`	Добавляет набор пар 'тип/обработчик' в качестве обработчиков событий DOM (например: `{click: onClick, mousemove: onMouseMove}`).
`off( <HTMLElement> el, <String> types, <Function> fn, <Object> context? )`	`this`	Удаляет метод `fn` из цепочек обработчиков событий DOM, привязанных к элементу `el`. Если метод не указан, то удаляются все методы, привязанные на текущий момент. Замечание: если методу `on` передавался контекстный объект, этот же объект должен быть передан и методу `off`.
`off( <HTMLElement> el, <Object> eventMap, <Object> context? )`	`this`	Удаляет набор пар 'тип/обработчик' из цепочек обработчиков событий DOM.
`stopPropagation( <DOMEvent> ev )`	`this`	Останавливает всплытие события к родительским элементам. Используется внутри функции-обработчика. Пример: `DG.DomEvent.on(div, 'click', function (ev) { DG.DomEvent.stopPropagation(ev); });`
`disableScrollPropagation( <HTMLElement> el )`	`this`	Добавляет `stopPropagation` к событиям элемента `'mousewheel'`.
`disableClickPropagation( <HTMLElement> el )`	`this`	Добавляет `stopPropagation` к событиям элемента `'click'`, `'doubleclick'`, `'mousedown'` and `'touchstart'`.
`preventDefault( <DOMEvent> ev )`	`this`	Предотвращает поведение DOM элемента по умолчанию (например, переход по ссылке указанной в свойстве `href` элемента `a`). Используется внутри функции-обработчика.
`stop( <DOMEvent> ev )`	`this`	Вызывает одновременно `stopPropagation` и `preventDefault`. Используется внутри функции-обработчика.
`getMousePosition( <DOMEvent> ev, <HTMLElement> container? )`	`Point`	Возвращает нормализованную позицию мыши из события DOM относительно контейнера или относительно всей страницы, если контейнер не указан.
`getWheelDelta( <DOMEvent> ev )`	`Number`	Возвращает нормализованную дельту колесика мыши, в виде вертикального смещения в пикселях (отрицательного, при прокрутке вниз), из события DOM `mousewheel`. События от устройств, которые не поддерживают точную прокрутку, отображаются на пиксельные координаты так, чтобы дельта прокрутки попадала в диапазон 50-60 пикселей.
`addListener( … )`	`this`	Псевдоним для `DG.DomEvent.on`
`removeListener( … )`	`this`	Псевдоним для `DG.DomEvent.off`

DG.DomUtil

Класс для работы с DOM деревом.

Методы

Метод	Возвращает	Описание
`get( <String\|HTMLElement> id )`	`HTMLElement`	Возвращает элемент по его id, если параметром была передана строка, либо возвращает элемент непосредственно, если он был передан в качестве параметра.
`getStyle( <HTMLElement> el, <String> styleAttrib )`	`String`	Возвращает значение стилей элемента, установленных через атрибут sytle, включая вычисленные значения или значения, указанные с помощью CSS.
`create( <String> tagName, <String> className?, <HTMLElement> container? )`	`HTMLElement`	Создает HTML элемент `tagName`, устанавливает ему значение класса `className` и опционально добавляет его в элемент `container`.
`remove( <HTMLElement> el )`		Удаляет элемент `el` из элемента контейнера.
`empty( <HTMLElement> el )`		Удаляет все дочерние элементы из контейнера `el`.
`toFront( <HTMLElement> el )`		Перемещает элемент `el` в конец списка дочерних элементов, чтобы он отображался поверх остальных дочерних элементов контейнера.
`toBack( <HTMLElement> el )`		Перемещает элемент `el` в начало списка дочерних элементов, чтобы он отображался перед остальными дочерними элементами контейнера.
`hasClass( <HTMLElement> el, <String> name )`	`Boolean`	Возвращает `true`, если элемент содержит класс `name`.
`addClass( <HTMLElement> el, <String> name )`		Добавляет класс `name` к элементу.
`removeClass( <HTMLElement> el, <String> name )`		Удаляет класс `name` из элемента.
`setClass( <HTMLElement> el, <String> name )`		Устанавливает класс у элемента.
`getClass( <HTMLElement> el )`	`String`	Возвращает значение класса элемента.
`setOpacity( <HTMLElement> el, <Number> opacity )`		Устанавливает прозрачность элемента. Значение `opacity` должно быть в диапазоне от `0.0` до `1.0`.
`testProp( <String[]> props )`	`String\|false`	Перебирает массив наименований стилей элемента и возвращает первое корректное наименование. Используется с префиксами производителей браузеров и стилями, вроде `transform`.
`setTransform( <HTMLElement> el, <Point> offset, <Number> scale? )`		Устанавливает стиль 3D CSS transform элемента `el` так, чтобы он был смещен на `offset` пикселей и увеличен/уменьшен в `scale` раз. Метод не работает, если браузер не поддерживает 3D CSS transforms.
`setPosition( <HTMLElement> el, <Point> position )`		Изменяет позиционирование элемента `el`, используя CSS translate или свойства top/left в зависимости от поддержки браузером.
`getPosition( <HTMLElement> el )`	`Point`	Возвращает координаты элемента, ранее установленные методом `setPosition`.
`disableTextSelection()`		Отключает возможность возникновения `selectstart` событий DOM, обычно сопутствующих выделению текстового фрагмента на странице. Влияет на поведение всего документа.
`enableTextSelection()`		Включает возможность возникновения событий DOM `selectstart`, ранее отключенных `DG.DomUtil.disableTextSelection`.
`disableImageDrag()`		Отключает возможность возникновения `dragstart` событий DOM, обычно сопутствующих перемещению изображения по странице.
`enableImageDrag()`		Включает возможность возникновения событий DOM `dragstart`, ранее отключенных `DG.DomUtil.disableImageDrag`.
`preventOutline( <HTMLElement> el )`		Делает outline элемента `el` невидимой.
`restoreOutline()`		Отменяет эффект `DG.DomUtil.preventOutline`.

Свойства

Свойство	Тип	Описание
`TRANSFORM`	`String`	Название CSS свойства transform с учетом префикса производителя браузера (например, `'webkitTransform'` для WebKit).
`TRANSITION`	`String`	Название CSS свойства transition с учетом префикса производителя браузера

DG.PosAnimation

Используется внутри библиотеки для анимаций перемещения, используя CSS3 transitions для современных браузеров и таймер для IE6-9.

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

События

Событие	Данные	Описание
`start`	`Event`	Вызывается во время старта анимации.
`step`	`Event`	Вызывается (периодически) в процессе анимации.
`end`	`Event`	Вызывается во время окончания анимации.

Методы

Метод	Возвращает	Описание
`run( <HTMLElement> el, <Point> newPos, <Number> duration?, <Number> easeLinearity?)`		Запускает анимацию перемещения элемента, полученного через аргумент метода. Дополнительно можно задать продолжительность анимации в секундах (по умолчанию `0.25`) и функцию затухания (третий аргумент кубической кривой Безье, по умолчанию `0.5`).
`stop()`		Останавливает ранее запущенную анимацию.

Методы, унаследованные от Evented

DG.Draggable

Класс, с помощью которого можно сделать DOM элемент перетаскиваемым (включая поддержку тач-устройств). Работает только в том случае, если элемент был позиционирован с помошью DG.DomUtil.setPosition.

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

Свойства

Свойство	Тип	Значение >по умолчанию	Описание
`clickTolerance`	`Number`	`3`	Максимальное количество пикселей, на которое может сдвинуться мышь при нажатой кнопке, чтобы идентифицировать это событике как нажатие (а не начало перетаскивания).

События

Событие	Данные	Описание
`down`	`Event`	Вызывается перед началом перетаскивания.
`dragstart`	`Event`	Вызывается в момент начала перетаскивания.
`predrag`	`Event`	Вызывается в процессе перетаскивания перед каждым обновлением позиции элемента.
`dragend`	`Event`	Вызывается в момент окончания перетаскивания.

Методы

Метод	Возвращает	Описание
`enable()`		Включает возможность перетаскивания.
`disable()`		Отключает возможность перетаскивания.

Методы, унаследованные от Evented