for (parent = self.parent(); !parentEventsRoot && parent; parent = parent.parent()) {
parentEventsRoot = parent._eventsRoot;
for (name in parentEventsRoot._nativeEvents) {
self._nativeEvents[name] = true;
elm.setAttribute('style', settings.style);
elm.style.cssText = settings.style;
if (self.settings.border) {
'border-top-width': box.top,
'border-right-width': box.right,
'border-bottom-width': box.bottom,
'border-left-width': box.left
var root = self.getRoot();
if (!root.controlIdLookup) {
root.controlIdLookup = {};
root.controlIdLookup[self._id] = self;
for (var key in self._aria) {
self.aria(key, self._aria[key]);
if (self.state.get('visible') === false) {
self.getEl().style.display = 'none';
self.state.on('change:visible', function (e) {
if (self.state.get('rendered')) {
self.getEl().style.display = state === false ? 'none' : '';
self.getEl().getBoundingClientRect();
parentCtrl = self.parent();
parentCtrl._lastRect = null;
self.fire(state ? 'show' : 'hide');
self.fire('postrender', {}, false);
bindStates: function () {
scrollIntoView: function (align) {
function getOffset(elm, rootElm) {
while (parent && parent !== rootElm && parent.nodeType) {
x += parent.offsetLeft || 0;
y += parent.offsetTop || 0;
parent = parent.offsetParent;
var elm = this.getEl(), parentElm = elm.parentNode;
var x, y, width, height, parentWidth, parentHeight;
var pos = getOffset(elm, parentElm);
height = elm.offsetHeight;
parentWidth = parentElm.clientWidth;
parentHeight = parentElm.clientHeight;
x -= parentWidth - width;
y -= parentHeight - height;
} else if (align === 'center') {
x -= parentWidth / 2 - width / 2;
y -= parentHeight / 2 - height / 2;
parentElm.scrollLeft = x;
var ctrl = this, rootControl;
rootControl = ctrl.rootControl;
parents[i].rootControl = rootControl;
ReflowQueue.remove(this);
var parent = this.parent();
if (parent && parent._layout && !parent._layout.isNative()) {
global$4.each('text title visible disabled active value'.split(' '), function (name) {
proto$1[name] = function (value) {
if (arguments.length === 0) {
return this.state.get(name);
if (typeof value !== 'undefined') {
this.state.set(name, value);
Control = global$8.extend(proto$1);
function getEventDispatcher(obj) {
if (!obj._eventDispatcher) {
obj._eventDispatcher = new global$9({
toggleEvent: function (name, state) {
if (state && global$9.isNative(name)) {
if (!obj._nativeEvents) {
obj._nativeEvents[name] = true;
if (obj.state.get('rendered')) {
return obj._eventDispatcher;
function bindPendingEvents(eventCtrl) {
var i, l, parents, eventRootCtrl, nativeEvents, name;
var control = eventCtrl.getParentCtrl(e.target);
function mouseLeaveHandler() {
var ctrl = eventRootCtrl._lastHoverCtrl;
ctrl.fire('mouseleave', { target: ctrl.getEl() });
ctrl.parents().each(function (ctrl) {
ctrl.fire('mouseleave', { target: ctrl.getEl() });
eventRootCtrl._lastHoverCtrl = null;
function mouseEnterHandler(e) {
var ctrl = eventCtrl.getParentCtrl(e.target), lastCtrl = eventRootCtrl._lastHoverCtrl, idx = 0, i, parents, lastParents;
eventRootCtrl._lastHoverCtrl = ctrl;
parents = ctrl.parents().toArray().reverse();
lastParents = lastCtrl.parents().toArray().reverse();
lastParents.push(lastCtrl);
for (idx = 0; idx < lastParents.length; idx++) {
if (parents[idx] !== lastParents[idx]) {
for (i = lastParents.length - 1; i >= idx; i--) {
lastCtrl = lastParents[i];
lastCtrl.fire('mouseleave', { target: lastCtrl.getEl() });
for (i = idx; i < parents.length; i++) {
ctrl.fire('mouseenter', { target: ctrl.getEl() });
function fixWheelEvent(e) {
if (e.type === 'mousewheel') {
e.deltaY = -1 / 40 * e.wheelDelta;
e.deltaX = -1 / 40 * e.wheelDeltaX;
e = eventCtrl.fire('wheel', e);
nativeEvents = eventCtrl._nativeEvents;
parents = eventCtrl.parents().toArray();
parents.unshift(eventCtrl);
for (i = 0, l = parents.length; !eventRootCtrl && i < l; i++) {
eventRootCtrl = parents[i]._eventsRoot;
eventRootCtrl = parents[parents.length - 1] || eventCtrl;
eventCtrl._eventsRoot = eventRootCtrl;
for (l = i, i = 0; i < l; i++) {
parents[i]._eventsRoot = eventRootCtrl;
var eventRootDelegates = eventRootCtrl._delegates;
if (!eventRootDelegates) {
eventRootDelegates = eventRootCtrl._delegates = {};
for (name in nativeEvents) {
if (name === 'wheel' && !hasWheelEventSupport) {
if (hasMouseWheelEventSupport) {
global$7(eventCtrl.getEl()).on('mousewheel', fixWheelEvent);
global$7(eventCtrl.getEl()).on('DOMMouseScroll', fixWheelEvent);
if (name === 'mouseenter' || name === 'mouseleave') {
if (!eventRootCtrl._hasMouseEnter) {
global$7(eventRootCtrl.getEl()).on('mouseleave', mouseLeaveHandler).on('mouseover', mouseEnterHandler);
eventRootCtrl._hasMouseEnter = 1;
} else if (!eventRootDelegates[name]) {
global$7(eventRootCtrl.getEl()).on(name, delegate);
eventRootDelegates[name] = true;
nativeEvents[name] = false;
var isStatic = function (elm) {
return funcs.getRuntimeStyle(elm, 'position') === 'static';
var isFixed = function (ctrl) {
return ctrl.state.get('fixed');
function calculateRelativePosition(ctrl, targetElm, rel) {
var ctrlElm, pos, x, y, selfW, selfH, targetW, targetH, viewport, size;
viewport = getWindowViewPort();
pos = funcs.getPos(targetElm, UiContainer.getUiContainer(ctrl));
if (isFixed(ctrl) && isStatic(domGlobals.document.body)) {
size = funcs.getSize(ctrlElm);
size = funcs.getSize(targetElm);
rel = (rel || '').split('');
y += Math.round(targetH / 2);
x += Math.round(targetW / 2);
y -= Math.round(selfH / 2);
x -= Math.round(selfW / 2);
var getUiContainerViewPort = function (customUiContainer) {
w: customUiContainer.scrollWidth - 1,
h: customUiContainer.scrollHeight - 1
var getWindowViewPort = function () {
var win = domGlobals.window;
var x = Math.max(win.pageXOffset, domGlobals.document.body.scrollLeft, domGlobals.document.documentElement.scrollLeft);
var y = Math.max(win.pageYOffset, domGlobals.document.body.scrollTop, domGlobals.document.documentElement.scrollTop);
var w = win.innerWidth || domGlobals.document.documentElement.clientWidth;
var h = win.innerHeight || domGlobals.document.documentElement.clientHeight;
var getViewPortRect = function (ctrl) {
var customUiContainer = UiContainer.getUiContainer(ctrl);
return customUiContainer && !isFixed(ctrl) ? getUiContainerViewPort(customUiContainer) : getWindowViewPort();
testMoveRel: function (elm, rels) {
var viewPortRect = getViewPortRect(this);
for (var i = 0; i < rels.length; i++) {
var pos = calculateRelativePosition(this, elm, rels[i]);
if (pos.x > 0 && pos.x + pos.w < viewPortRect.w && pos.y > 0 && pos.y + pos.h < viewPortRect.h) {
if (pos.x > viewPortRect.x && pos.x + pos.w < viewPortRect.w + viewPortRect.x && pos.y > viewPortRect.y && pos.y + pos.h < viewPortRect.h + viewPortRect.y) {
moveRel: function (elm, rel) {
if (typeof rel !== 'string') {
rel = this.testMoveRel(elm, rel);
var pos = calculateRelativePosition(this, elm, rel);
return this.moveTo(pos.x, pos.y);
moveBy: function (dx, dy) {
var self = this, rect = self.layoutRect();
self.moveTo(rect.x + dx, rect.y + dy);
moveTo: function (x, y) {
function constrain(value, max, size) {
if (value + size > max) {
return value < 0 ? 0 : value;
if (self.settings.constrainToViewport) {
var viewPortRect = getViewPortRect(this);
var layoutRect = self.layoutRect();
x = constrain(x, viewPortRect.w + viewPortRect.x, layoutRect.w);
y = constrain(y, viewPortRect.h + viewPortRect.y, layoutRect.h);
var uiContainer = UiContainer.getUiContainer(self);
if (uiContainer && isStatic(uiContainer) && !isFixed(self)) {
x -= uiContainer.scrollLeft;
y -= uiContainer.scrollTop;
if (self.state.get('rendered')) {
var Tooltip = Control$1.extend({
Defaults: { classes: 'widget tooltip tooltip-n' },
renderHtml: function () {
var self = this, prefix = self.classPrefix;
return '<div id="' + self._id + '" class="' + self.classes + '" role="presentation">' + '<div class="' + prefix + 'tooltip-arrow"></div>' + '<div class="' + prefix + 'tooltip-inner">' + self.encode(self.state.get('text')) + '</div>' + '</div>';
bindStates: function () {
self.state.on('change:text', function (e) {
self.getEl().lastChild.innerHTML = self.encode(e.value);
style = self.getEl().style;
style.left = rect.x + 'px';
style.top = rect.y + 'px';
style.zIndex = 65535 + 65535;
var Widget = Control$1.extend({
init: function (settings) {
settings = self.settings;
if (settings.tooltip && Widget.tooltips !== false) {
self.on('mouseenter', function (e) {
var tooltip = self.tooltip().moveTo(-65535);
if (e.control === self) {
var rel = tooltip.text(settings.tooltip).show().testMoveRel(self.getEl(), [
tooltip.classes.toggle('tooltip-n', rel === 'bc-tc');
tooltip.classes.toggle('tooltip-nw', rel === 'bc-tl');
tooltip.classes.toggle('tooltip-ne', rel === 'bc-tr');
tooltip.moveRel(self.getEl(), rel);
self.on('mouseleave mousedown click', function () {
self.aria('label', settings.ariaLabel || settings.tooltip);
this._tooltip = new Tooltip({ type: 'tooltip' });
UiContainer.inheritUiContainer(this, this._tooltip);
this._tooltip.renderTo();
postRender: function () {
var self = this, settings = self.settings;
if (!self.parent() && (settings.width || settings.height)) {
if (settings.autofocus) {
bindStates: function () {
function disable(state) {
self.aria('disabled', state);
self.classes.toggle('disabled', state);
self.aria('pressed', state);
self.classes.toggle('active', state);
self.state.on('change:disabled', function (e) {
self.state.on('change:active', function (e) {
if (self.state.get('disabled')) {