jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
1,218 lines (1,090 loc) • 576 kB
JavaScript
/* Release Date: Jan-28-2025
Copyright (c) 2011-2025 jQWidgets.
License: https://jqwidgets.com/license/ */
/******/ (() => { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ 7196:
/***/ (() => {
/* tslint:disable */
/* eslint-disable */
(function(){
if (typeof document === 'undefined') {
return;
}
(function ($) {
$.jqx.jqxWidget("jqxButtonGroup", "", {});
$.extend($.jqx._jqxButtonGroup.prototype, {
defineInstance: function () {
var settings =
{
//Possible values: checkbox, radio, default
mode: 'default',
roundedCorners: true,
disabled: false,
enableHover: false,
orientation: 'horizontal',
width: null,
height: null,
_eventsMap: {
'mousedown': $.jqx.mobile.getTouchEventName('touchstart'),
'mouseup': $.jqx.mobile.getTouchEventName('touchend')
},
_events: ['selected', 'unselected', 'buttonclick'],
_buttonId: {},
_selected: null,
_pressed: null,
rtl: false,
template: "",
_baseId: 'group_button',
aria:
{
"aria-disabled": { name: "disabled", type: "boolean" }
}
};
if (this === $.jqx._jqxButtonGroup.prototype) {
return settings;
}
$.extend(true, this, settings);
return settings;
},
createInstance: function (args) {
var that = this;
that._isTouchDevice = $.jqx.mobile.isTouchDevice();
$.jqx.aria(that);
that._baseId = that._baseId + that.element.id;
that.addHandler(that.host, 'selectstart', function (event) {
if (!that.disabled) {
event.preventDefault();
}
});
},
refresh: function () {
var that = this;
if (that.width) {
if (that.width.toString() && that.width.toString().indexOf('%') >= 0) {
that.element.style.width = that.width;
}
else {
that.host.width(that.width);
}
}
if (that.height) that.host.height(that.height);
that._refreshButtons();
},
render: function () {
this.refresh();
},
resize: function () {
this.refresh();
},
_getEvent: function (event) {
var that = this;
if (that._isTouchDevice) {
var e = that._eventsMap[event] || event;
e += "." + that.element.id;
return e;
}
event += "." + that.element.id;
return event;
},
_refreshButtons: function () {
var that = this;
if (that.lastElement)
that.lastElement.remove();
that.lastElement = $("<div style='clear: both;'></div>");
var children = that.host.children(),
count = children.length,
current;
switch (that.mode) {
case "radio":
that.host.attr('role', 'radiogroup');
break;
case "checkbox":
case "default":
that.host.attr('role', 'group');
break;
}
var width = new Number(100 / count).toFixed(2);
for (var i = 0; i < count; i += 1) {
current = $(children[i]);
if (that.width) {
if (that.orientation === "horizontal") {
current.css('width', width + '%');
current.css('box-sizing', 'border-box');
current.css('-moz-box-sizing', 'border-box');
current.css('white-space', 'nowrap');
current.css('text-overflow', 'ellipsis');
current.css('overflow', 'hidden');
}
else {
current.css('box-sizing', 'border-box');
current.css('-moz-box-sizing', 'border-box');
current.css('width', '100%');
}
}
that._refreshButton(current, i, count);
}
that.lastElement.appendTo(that.host);
},
_refreshButton: function (btn, counter, count) {
(function (btn) {
var that = this;
btn = that._render(btn);
that._removeStyles(btn);
that._addStyles(btn, counter, count);
that._performLayout(btn);
that._removeButtonListeners(btn);
that._addButtonListeners(btn);
that._handleButtonId(btn, counter);
if (that.mode === "radio") {
btn.attr('role', 'radio');
}
else {
btn.attr('role', 'button');
}
btn.attr('disabled', that.disabled);
if (that.disabled) {
btn.addClass(that.toThemeProperty('jqx-fill-state-disabled'));
}
else {
btn.removeClass(that.toThemeProperty('jqx-fill-state-disabled'));
}
}).apply(this, [btn]);
},
destroy: function (removeFromDom) {
var that = this;
var children = that.host.children(),
count = children.length,
current;
for (var i = 0; i < count; i += 1) {
current = $(children[i]);
that._removeStyles(current);
that._removeButtonListeners(current);
}
if (removeFromDom !== false) {
that.host.remove();
}
},
_render: function (btn) {
var that = this;
if (btn[0].tagName.toLowerCase() === 'button') {
return that._renderFromButton(btn);
} else {
return that._renderButton(btn);
}
},
_renderButton: function (btn) {
var content;
btn.wrapInner('<div/>');
return btn;
},
_removeStyles: function (btn) {
var that = this;
var tp = that.toThemeProperty;
that.host.removeClass('jqx-widget');
that.host.removeClass('jqx-rc-all');
btn.removeClass(tp.call(this, 'jqx-fill-state-normal'));
btn.removeClass(tp.call(this, 'jqx-group-button-normal'));
btn.removeClass(tp.call(this, 'jqx-rc-tl'));
btn.removeClass(tp.call(this, 'jqx-rc-bl'));
btn.removeClass(tp.call(this, 'jqx-rc-tr'));
btn.removeClass(tp.call(this, 'jqx-rc-br'));
btn.css('margin-left', 0);
},
_addStyles: function (btn, counter, count) {
var that = this;
var tp = this.toThemeProperty;
that.host.addClass(tp.call(this, 'jqx-widget'));
that.host.addClass(tp.call(this, 'jqx-rc-all'));
that.host.addClass(tp.call(this, 'jqx-buttongroup'));
btn.addClass(tp.call(this, 'jqx-button'));
btn.addClass(tp.call(this, 'jqx-group-button-normal'));
btn.addClass(tp.call(this, 'jqx-fill-state-normal'));
if (that.template) {
btn.addClass(tp.call(this, 'jqx-' + that.template));
}
if (that.roundedCorners) {
if (counter === 0) {
that._addRoundedCorners(btn, true);
} else if (counter === count - 1) {
that._addRoundedCorners(btn, false);
}
}
if (that.orientation === 'horizontal') {
btn.css('margin-left', -parseInt(btn.css('border-left-width'), 10));
}
else {
btn.css('margin-top', -parseInt(btn.css('border-left-width'), 10));
}
},
_addRoundedCorners: function (button, left) {
var that = this;
var tp = that.toThemeProperty;
if (that.orientation === 'horizontal') {
if (left) {
button.addClass(tp.call(this, 'jqx-rc-tl'));
button.addClass(tp.call(this, 'jqx-rc-bl'));
} else {
button.addClass(tp.call(this, 'jqx-rc-tr'));
button.addClass(tp.call(this, 'jqx-rc-br'));
}
}
else {
if (left) {
button.addClass(tp.call(this, 'jqx-rc-tl'));
button.addClass(tp.call(this, 'jqx-rc-tr'));
} else {
button.addClass(tp.call(this, 'jqx-rc-bl'));
button.addClass(tp.call(this, 'jqx-rc-br'));
}
}
},
_centerContent: function (content, parent) {
content.css({
'margin-top': (parent.height() - content.height()) / 2,
'margin-left': (parent.width() - content.width()) / 2
});
return content;
},
_renderFromButton: function (btn) {
var content = btn.val();
if (content === "") {
content = btn.html();
}
var div;
var id = btn[0].id;
btn.wrap('<div/>');
div = btn.parent();
div.attr('style', btn.attr('style'));
btn.remove();
$.jqx.utilities.html(div, content);
div[0].id = id;
return div;
},
_performLayout: function (btn) {
if (this.orientation === 'horizontal') {
if (this.rtl) {
btn.css('float', 'right');
}
else {
btn.css('float', 'left');
}
}
else {
btn.css('float', 'none');
}
this._centerContent($(btn.children()), btn);
},
_mouseEnterHandler: function (e) {
var self = e.data.self,
btn = $(e.currentTarget);
if (self._isDisabled(btn) || !self.enableHover) {
return;
}
var tp = self.toThemeProperty;
btn.addClass(tp.call(self, 'jqx-group-button-hover'));
btn.addClass(tp.call(self, 'jqx-fill-state-hover'));
},
_mouseLeaveHandler: function (e) {
var self = e.data.self,
btn = $(e.currentTarget);
if (self._isDisabled(btn) || !self.enableHover) {
return;
}
var tp = self.toThemeProperty;
btn.removeClass(tp.call(self, 'jqx-group-button-hover'));
btn.removeClass(tp.call(self, 'jqx-fill-state-hover'));
},
_mouseDownHandler: function (e) {
var self = e.data.self,
btn = $(e.currentTarget);
if (self._isDisabled(btn)) {
return;
}
self._pressed = btn;
var tp = self.toThemeProperty;
btn.addClass(tp.call(self, 'jqx-group-button-pressed'));
btn.addClass(tp.call(self, 'jqx-fill-state-pressed'));
},
_mouseUpHandler: function (e) {
var self = e.data.self,
btn = $(e.currentTarget);
if (self._isDisabled(btn)) {
return;
}
self._handleSelection(btn);
self._pressed = null;
btn = self._buttonId[btn[0].id];
self._raiseEvent(2, { index: btn.num, button: btn.btn });
},
_isDisabled: function (btn) {
if (!btn || !btn[0]) {
return false;
}
return this._buttonId[btn[0].id].disabled;
},
_documentUpHandler: function (e) {
var self = e.data.self,
pressedButton = self._pressed;
if (pressedButton && !self._buttonId[pressedButton[0].id].selected) {
pressedButton.removeClass(self.toThemeProperty('jqx-fill-state-pressed'));
self._pressed = null;
}
},
_addButtonListeners: function (btn) {
var that = this;
var ah = that.addHandler;
var ge = that._getEvent;
ah(btn, ge.call(that, 'mouseenter'), that._mouseEnterHandler, { self: that });
ah(btn, ge.call(that, 'mouseleave'), that._mouseLeaveHandler, { self: that });
ah(btn, ge.call(that, 'mousedown'), that._mouseDownHandler, { self: that });
ah(btn, ge.call(that, 'mouseup'), that._mouseUpHandler, { self: that });
ah($(document), ge.call(that, 'mouseup'), that._documentUpHandler, { self: that });
},
_removeButtonListeners: function (btn) {
var that = this;
var rh = that.removeHandler;
var ge = that._getEvent;
rh(btn, ge.call(that, 'mouseenter'), that._mouseEnterHandler);
rh(btn, ge.call(that, 'mouseleave'), that._mouseLeaveHandler);
rh(btn, ge.call(that, 'mousedown'), that._mouseDownHandler);
rh(btn, ge.call(that, 'mouseup'), that._mouseUpHandler);
rh($(document), ge.call(that, 'mouseup'), that._documentUpHandler);
},
_handleSelection: function (btn) {
var that = this;
if (that.mode === 'radio') {
that._handleRadio(btn);
} else if (that.mode === 'checkbox') {
that._handleCheckbox(btn);
} else {
that._handleDefault(btn);
}
},
_handleRadio: function (btn) {
var that = this;
var selected = that._getSelectedButton();
if (selected && selected.btn[0].id !== btn[0].id) {
that._unselectButton(selected.btn, true);
}
for (var data in that._buttonId) {
that._buttonId[data].selected = true;
that._unselectButton(that._buttonId[data].btn, false);
}
that._selectButton(btn, true);
},
_handleCheckbox: function (btn) {
var that = this;
var btnInfo = that._buttonId[btn[0].id];
if (btnInfo.selected) {
that._unselectButton(btnInfo.btn, true);
} else {
that._selectButton(btn, true);
}
},
_handleDefault: function (btn) {
var that = this;
that._selectButton(btn, false);
for (var data in that._buttonId) {
that._buttonId[data].selected = true;
that._unselectButton(that._buttonId[data].btn, false);
}
},
_getSelectedButton: function () {
var that = this;
for (var data in that._buttonId) {
if (that._buttonId[data].selected) {
return that._buttonId[data];
}
}
return null;
},
_getSelectedButtons: function () {
var that = this;
var selected = [];
for (var data in that._buttonId) {
if (that._buttonId[data].selected) {
selected.push(that._buttonId[data].num);
}
}
return selected;
},
_getButtonByIndex: function (index) {
var that = this;
var current;
for (var data in that._buttonId) {
if (that._buttonId[data].num === index) {
return that._buttonId[data];
}
}
return null;
},
_selectButton: function (btn, raiseEvent) {
var that = this;
var btnInfo = that._buttonId[btn[0].id];
if (btnInfo.selected) {
return;
}
var tp = that.toThemeProperty;
btnInfo.btn.addClass(tp.call(this, 'jqx-group-button-pressed'));
btnInfo.btn.addClass(tp.call(this, 'jqx-fill-state-pressed'));
btnInfo.selected = true;
if (raiseEvent) {
that._raiseEvent(0, { index: btnInfo.num, button: btnInfo.btn });
}
$.jqx.aria(btnInfo.btn, 'aria-checked', true);
},
_unselectButton: function (btn, raiseEvent) {
var that = this;
var btnInfo = that._buttonId[btn[0].id];
if (!btnInfo.selected) {
return;
}
var tp = that.toThemeProperty;
btnInfo.btn.removeClass(tp.call(this, 'jqx-group-button-pressed'));
btnInfo.btn.removeClass(tp.call(this, 'jqx-fill-state-pressed'));
btnInfo.selected = false;
if (raiseEvent) {
that._raiseEvent(1, { index: btnInfo.num, button: btnInfo.btn });
}
$.jqx.aria(btnInfo.btn, 'aria-checked', false);
},
setSelection: function (index) {
var that = this;
if (index === -1) {
that.clearSelection();
return;
}
if (that.mode === 'checkbox') {
if (typeof index === 'number') {
that._setSelection(index);
} else {
for (var i = 0; i < index.length; i += 1) {
that._setSelection(index[i]);
}
}
} else if (typeof index === 'number' && that.mode === 'radio') {
that._setSelection(index);
}
},
_setSelection: function (index) {
var that = this;
var btn = that._getButtonByIndex(index);
if (btn) {
that._handleSelection(btn.btn);
}
},
getSelection: function () {
var that = this;
if (that.mode === 'radio') {
if (that._getSelectedButton()) {
return that._getSelectedButton().num;
}
} else if (that.mode === 'checkbox') {
return that._getSelectedButtons();
}
return undefined;
},
disable: function () {
var that = this;
that.disabled = true;
var current;
for (var btn in that._buttonId) {
current = that._buttonId[btn];
that.disableAt(current.num);
}
$.jqx.aria(that, "aria-disabled", true);
},
enable: function () {
var that = this;
that.disabled = false;
var current;
for (var btn in that._buttonId) {
current = that._buttonId[btn];
that.enableAt(current.num);
}
$.jqx.aria(that, "aria-disabled", false);
},
disableAt: function (index) {
var that = this;
var btn = that._getButtonByIndex(index);
if (!btn.disabled) {
btn.disabled = true;
btn.btn.addClass(that.toThemeProperty('jqx-fill-state-disabled'));
}
},
enableAt: function (index) {
var that = this;
var btn = that._getButtonByIndex(index);
if (btn.disabled) {
btn.disabled = false;
btn.btn.removeClass(that.toThemeProperty('jqx-fill-state-disabled'));
}
},
_handleButtonId: function (btn, number) {
var id = btn[0].id,
btnId = { btn: btn, num: number, selected: false },
widgetId;
if (!id) {
id = this._baseId + btn.index();
}
btn[0].id = id;
this._buttonId[id] = btnId;
return id;
},
_raiseEvent: function (id, data) {
var event = $.Event(this._events[id]);
event.args = data;
return this.host.trigger(event);
},
_unselectAll: function () {
for (var data in this._buttonId) {
this._unselectButton(this._buttonId[data].btn, false);
}
},
clearSelection: function () {
this._unselectAll();
},
propertyChangedHandler: function (object, key, oldvalue, value) {
if (key === 'theme' && value !== null) {
$.jqx.utilities.setTheme(oldvalue, value, object.host);
}
if (key === 'rtl') {
object.refresh();
}
if (key === "template") {
object.refresh();
}
if (key === 'mode') {
object._unselectAll();
object.refresh();
return;
} else if (key === 'disabled') {
if (value) {
object.disable();
} else {
object.enable();
}
} else {
object.refresh();
}
}
});
})(jqxBaseFramework);
})();
/***/ }),
/***/ 7351:
/***/ (() => {
/* tslint:disable */
/* eslint-disable */
(function () {
if (typeof document === 'undefined') {
return;
}
(function ($) {
$.jqx.cssroundedcorners = function (value) {
var cssMap = {
'all': 'jqx-rc-all',
'top': 'jqx-rc-t',
'bottom': 'jqx-rc-b',
'left': 'jqx-rc-l',
'right': 'jqx-rc-r',
'top-right': 'jqx-rc-tr',
'top-left': 'jqx-rc-tl',
'bottom-right': 'jqx-rc-br',
'bottom-left': 'jqx-rc-bl'
};
for (var prop in cssMap) {
if (!cssMap.hasOwnProperty(prop))
continue;
if (value == prop)
return cssMap[prop];
}
}
$.jqx.jqxWidget("jqxButton", "", {});
$.extend($.jqx._jqxButton.prototype, {
defineInstance: function () {
var settings = {
type: '',
cursor: 'arrow',
// rounds the button corners.
roundedCorners: 'all',
// enables / disables the button
disabled: false,
// sets height to the button.
height: null,
// sets width to the button.
width: null,
overrideTheme: false,
enableHover: true,
enableDefault: true,
enablePressed: true,
imgPosition: "center",
imgSrc: "",
imgWidth: 16,
imgHeight: 16,
value: null,
textPosition: "",
textImageRelation: "overlay",
rtl: false,
_ariaDisabled: false,
_scrollAreaButton: false,
// "primary", "inverse", "danger", "info", "success", "warning", "link"
template: "default",
aria:
{
"aria-disabled": { name: "disabled", type: "boolean" }
}
}
if (this === $.jqx._jqxButton.prototype) {
return settings;
}
$.extend(true, this, settings);
return settings;
},
_addImage: function (name) {
var that = this;
if (that.element.nodeName.toLowerCase() == "input" || that.element.nodeName.toLowerCase() == "button" || that.element.nodeName.toLowerCase() == "div") {
if (!that._img) {
that.field = that.element;
if (that.field.className) {
that._className = that.field.className;
}
var properties = {
'title': that.field.title
};
var value = null;
if (that.field.getAttribute('value')) {
var value = that.field.getAttribute('value');
}
else if (that.element.nodeName.toLowerCase() != "input") {
var value = that.element.innerHTML;
}
if (that.value) {
value = that.value;
}
if (that.field.id.length) {
properties.id = that.field.id.replace(/[^\w]/g, '_') + "_" + name;
}
else {
properties.id = $.jqx.utilities.createId() + "_" + name;
}
var wrapper = document.createElement('div');
wrapper.id = properties.id;
wrapper.title = properties.title;
wrapper.style.cssText = that.field.style.cssText;
wrapper.style.boxSizing = 'border-box';
var img = document.createElement("img");
img.setAttribute('src', that.imgSrc);
img.setAttribute('width', that.imgWidth);
img.setAttribute('height', that.imgHeight);
wrapper.appendChild(img);
that._img = img;
var text = document.createElement('span');
if (value) {
text.innerHTML = value;
that.value = value;
}
wrapper.appendChild(text);
that._text = text;
that.field.style.display = "none";
if (that.field.parentNode) {
that.field.parentNode.insertBefore(wrapper, that.field.nextSibling);
}
var data = that.host.data();
that.host = $(wrapper);
that.host.data(data);
that.element = wrapper;
that.element.id = that.field.id;
that.field.id = properties.id;
var elementObj = new $(that.element);
var fieldObj = new $(that.field);
if (that._className) {
elementObj.addClass(that._className);
fieldObj.removeClass(that._className);
}
if (that.field.tabIndex) {
var tabIndex = that.field.tabIndex;
that.field.tabIndex = -1;
that.element.tabIndex = tabIndex;
}
}
else {
that._img.setAttribute('src', that.imgSrc);
that._img.setAttribute('width', that.imgWidth);
that._img.setAttribute('height', that.imgHeight);
that._text.innerHTML = that.value;
}
if (!that.imgSrc) {
that._img.style.display = "none";
}
else {
that._img.style.display = "inline";
}
if (!that.value) {
that._text.style.display = "none";
}
else {
that._text.style.display = "inline";
}
that._positionTextAndImage();
}
},
_positionTextAndImage: function () {
var that = this;
var width = that.element.offsetWidth;
var height = that.element.offsetHeight;
var imgWidth = that.imgWidth;
var imgHeight = that.imgHeight;
if (that.imgSrc == "") {
imgWidth = 0;
imgHeight = 0;
}
var textWidth = that._text.offsetWidth;
var textHeight = that._text.offsetHeight;
var offset = 4;
var edgeOffset = 4;
var factorIncrease = 4;
var w = 0;
var h = 0;
switch (that.textImageRelation) {
case "imageBeforeText":
case "textBeforeImage":
w = imgWidth + textWidth + 2 * factorIncrease + offset + 2 * edgeOffset;
h = Math.max(imgHeight, textHeight) + 2 * factorIncrease + offset + 2 * edgeOffset;
break;
case "imageAboveText":
case "textAboveImage":
w = Math.max(imgWidth, textWidth) + 2 * factorIncrease;
h = imgHeight + textHeight + offset + 2 * factorIncrease + 2 * edgeOffset;
break;
case "overlay":
w = Math.max(imgWidth, textWidth) + 2 * factorIncrease;
h = Math.max(imgHeight, textHeight) + 2 * factorIncrease;
break;
}
if (!that.width) {
that.element.style.width = w + "px";
width = w;
}
if (!that.height) {
that.element.style.height = h + "px";
height = h;
}
that._img.style.position = 'absolute';
that._text.style.position = 'absolute';
that.element.style.position = 'relative';
that.element.style.overflow = 'hidden';
var textRect = {};
var imageRect = {};
var drawElement = function (element, drawArea, pos, w, h) {
if (drawArea.width < w) drawArea.width = w;
if (drawArea.height < h) drawArea.height = h;
switch (pos) {
case "left":
element.style.left = drawArea.left + "px";
element.style.top = drawArea.top + drawArea.height / 2 - h / 2 + "px";;
break;
case "topLeft":
element.style.left = drawArea.left + "px";
element.style.top = drawArea.top + "px";
break;
case "bottomLeft":
element.style.left = drawArea.left + "px";
element.style.top = drawArea.top + drawArea.height - h + "px";
break;
default:
case "center":
element.style.left = drawArea.left + drawArea.width / 2 - w / 2 + "px";
element.style.top = drawArea.top + drawArea.height / 2 - h / 2 + "px";
break;
case "top":
element.style.left = drawArea.left + drawArea.width / 2 - w / 2 + "px";
element.style.top = drawArea.top + "px";
break;
case "bottom":
element.style.left = drawArea.left + drawArea.width / 2 - w / 2 + "px";
element.style.top = drawArea.top + drawArea.height - h + "px";
break;
case "right":
element.style.left = drawArea.left + drawArea.width - w + "px";
element.style.top = drawArea.top + drawArea.height / 2 - h / 2 + "px";;
break;
case "topRight":
element.style.left = drawArea.left + drawArea.width - w + "px";
element.style.top = drawArea.top + "px";
break;
case "bottomRight":
element.style.left = drawArea.left + drawArea.width - w + "px";
element.style.top = drawArea.top + drawArea.height - h + "px";
break;
}
}
var left = 0;
var top = 0;
var right = width;
var bottom = height;
var middle = (right - left) / 2;
var center = (bottom - top) / 2;
var img = that._img;
var text = that._text;
var rectHeight = bottom - top;
var rectWidth = right - left;
left += edgeOffset;
top += edgeOffset;
right = right - edgeOffset - 2;
rectWidth = rectWidth - 2 * edgeOffset - 2;
rectHeight = rectHeight - 2 * edgeOffset - 2;
switch (that.textImageRelation) {
case "imageBeforeText":
switch (that.imgPosition) {
case "left":
case "topLeft":
case "bottomLeft":
imageRect = { left: left, top: top, width: left + imgWidth, height: rectHeight };
textRect = { left: left + imgWidth + offset, top: top, width: rectWidth - imgWidth - offset, height: rectHeight };
break;
case "center":
case "top":
case "bottom":
imageRect = { left: middle - textWidth / 2 - imgWidth / 2 - offset / 2, top: top, width: imgWidth, height: rectHeight };
textRect = { left: imageRect.left + imgWidth + offset, top: top, width: right - imageRect.left - imgWidth - offset, height: rectHeight };
break;
case "right":
case "topRight":
case "bottomRight":
imageRect = { left: right - textWidth - imgWidth - offset, top: top, width: imgWidth, height: rectHeight };
textRect = { left: imageRect.left + imgWidth + offset, top: top, width: right - imageRect.left - imgWidth - offset, height: rectHeight };
break;
}
drawElement(img, imageRect, that.imgPosition, imgWidth, imgHeight);
drawElement(text, textRect, that.textPosition, textWidth, textHeight);
break;
case "textBeforeImage":
switch (that.textPosition) {
case "left":
case "topLeft":
case "bottomLeft":
textRect = { left: left, top: top, width: left + textWidth, height: rectHeight };
imageRect = { left: left + textWidth + offset, top: top, width: rectWidth - textWidth - offset, height: rectHeight };
break;
case "center":
case "top":
case "bottom":
textRect = { left: middle - textWidth / 2 - imgWidth / 2 - offset / 2, top: top, width: textWidth, height: rectHeight };
imageRect = { left: textRect.left + textWidth + offset, top: top, width: right - textRect.left - textWidth - offset, height: rectHeight };
break;
case "right":
case "topRight":
case "bottomRight":
textRect = { left: right - textWidth - imgWidth - offset, top: top, width: textWidth, height: rectHeight };
imageRect = { left: textRect.left + textWidth + offset, top: top, width: right - textRect.left - textWidth - offset, height: rectHeight };
break;
}
drawElement(img, imageRect, that.imgPosition, imgWidth, imgHeight);
drawElement(text, textRect, that.textPosition, textWidth, textHeight);
break;
case "imageAboveText":
switch (that.imgPosition) {
case "topRight":
case "top":
case "topLeft":
imageRect = { left: left, top: top, width: rectWidth, height: imgHeight };
textRect = { left: left, top: top + imgHeight + offset, width: rectWidth, height: rectHeight - imgHeight - offset };
break;
case "left":
case "center":
case "right":
imageRect = { left: left, top: center - imgHeight / 2 - textHeight / 2 - offset / 2, width: rectWidth, height: imgHeight };
textRect = { left: left, top: imageRect.top + offset + imgHeight, width: rectWidth, height: rectHeight - imageRect.top - offset - imgHeight };
break;
case "bottomLeft":
case "bottom":
case "bottomRight":
imageRect = { left: left, top: bottom - imgHeight - textHeight - offset, width: rectWidth, height: imgHeight };
textRect = { left: left, top: imageRect.top + offset + imgHeight, width: rectWidth, height: textHeight };
break;
}
drawElement(img, imageRect, that.imgPosition, imgWidth, imgHeight);
drawElement(text, textRect, that.textPosition, textWidth, textHeight);
break;
case "textAboveImage":
switch (that.textPosition) {
case "topRight":
case "top":
case "topLeft":
textRect = { left: left, top: top, width: rectWidth, height: textHeight };
imageRect = { left: left, top: top + textHeight + offset, width: rectWidth, height: rectHeight - textHeight - offset };
break;
case "left":
case "center":
case "right":
textRect = { left: left, top: center - imgHeight / 2 - textHeight / 2 - offset / 2, width: rectWidth, height: textHeight };
imageRect = { left: left, top: textRect.top + offset + textHeight, width: rectWidth, height: rectHeight - textRect.top - offset - textHeight };
break;
case "bottomLeft":
case "bottom":
case "bottomRight":
textRect = { left: left, top: bottom - imgHeight - textHeight - offset, width: rectWidth, height: textHeight };
imageRect = { left: left, top: textRect.top + offset + textHeight, width: rectWidth, height: imgHeight };
break;
}
drawElement(img, imageRect, that.imgPosition, imgWidth, imgHeight);
drawElement(text, textRect, that.textPosition, textWidth, textHeight);
break;
case "overlay":
default:
textRect = { left: left, top: top, width: rectWidth, height: rectHeight };
imageRect = { left: left, top: top, width: rectWidth, height: rectHeight };
drawElement(img, imageRect, that.imgPosition, imgWidth, imgHeight);
drawElement(text, textRect, that.textPosition, textWidth, textHeight);
break;
}
},
createInstance: function (args) {
var that = this;
that._setSize();
var isMaterial = that.isMaterialized();
that.buttonObj = new $(that.element);
if (that.imgSrc != "" || that.textPosition != "" || (that.element.value && that.element.value.indexOf("<") >= 0) || that.value != null) {
that.refresh();
that._addImage("jqxButton");
that.buttonObj = new $(that.element);
}
if (!that._ariaDisabled) {
that.element.setAttribute('role', 'button');
}
if (that.type !== '') {
that.element.setAttribute('type', that.type);
}
if (!that.overrideTheme) {
that.buttonObj.addClass(that.toThemeProperty($.jqx.cssroundedcorners(that.roundedCorners)));
if (that.enableDefault) {
that.buttonObj.addClass(that.toThemeProperty('jqx-button'));
}
that.buttonObj.addClass(that.toThemeProperty('jqx-widget'));
}
that.isTouchDevice = $.jqx.mobile.isTouchDevice();
if (!that._ariaDisabled) {
$.jqx.aria(this);
}
if (that.cursor != 'arrow') {
if (!that.disabled) {
that.element.style.cursor = that.cursor;
}
else {
that.element.style.cursor = "arrow";
}
}
var eventNames = 'mouseenter mouseleave mousedown focus blur';
if (that._scrollAreaButton) {
var eventNames = 'mousedown';
}
if (that.isTouchDevice) {
that.addHandler(that.host, $.jqx.mobile.getTouchEventName('touchstart'), function (event) {
that.isPressed = true;
that.refresh();
});
that.addHandler($(document), $.jqx.mobile.getTouchEventName('touchend') + "." + that.element.id, function (event) {
that.isPressed = false;
that.refresh();
});
}
that.addHandler(that.host, eventNames, function (event) {
switch (event.type) {
case 'mouseenter':
if (!that.isTouchDevice) {
if (!that.disabled && that.enableHover) {
that.isMouseOver = true;
that.refresh();
}
}
break;
case 'mouseleave':
if (!that.isTouchDevice) {
if (!that.disabled && that.enableHover) {
that.isMouseOver = false;
that.refresh();
}
}
break;
case 'mousedown':
if (!that.disabled) {
that.isPressed = true;
that.refresh();
}
break;
case 'focus':
if (!that.disabled) {
that.isFocused = true;
that.refresh();
}
break;
case 'blur':
if (!that.disabled) {
that.isFocused = false;
that.refresh();
}
break;
}
});
that.mouseupfunc = function (event) {
if (!that.disabled) {
if (that.isPressed || that.isMouseOver) {
that.isPressed = false;
that.refresh();
}
}
}
that.addHandler(document, 'mouseup.button' + that.element.id, that.mouseupfunc);
try {
if (document.referrer != "" || window.frameElement) {
if (window.top != null && window.top != window.that) {
var parentLocation = '';
if (window.parent && document.referrer) {
parentLocation = document.referrer;
}
if (parentLocation.indexOf(document.location.host) != -1) {
if (window.top.document) {
window.top.document.addEventListener('mouseup', that._topDocumentMouseupHandler);
}
}
}
}
}
catch (error) {
}
that.propertyChangeMap['roundedCorners'] = function (instance, key, oldVal, value) {
instance.buttonObj.removeClass(instance.toThemeProperty($.jqx.cssroundedcorners(oldVal)));
instance.buttonObj.addClass(instance.toThemeProperty($.jqx.cssroundedcorners(value)));
};
that.propertyChangeMap['disabled'] = function (instance, key, oldVal, value) {
if (oldVal != value) {
instance.refresh();
instance.element.setAttribute('disabled', value);
instance.element.disabled = value;
if (!value) {
instance.element.style.cursor = instance.cursor;
}
else {
instance.element.style.cursor = 'default';
}
$.jqx.aria(instance, "aria-disabled", instance.disabled);
}
};
that.propertyChangeMap['rtl'] = function (instance, key, oldVal, value) {
if (oldVal != value) {
instance.refresh();
}
};
that.propertyChangeMap['template'] = function (instance, key, oldVal, value) {
if (oldVal != value) {
instance.buttonObj.removeClass(instance.toThemeProperty("jqx-" + oldVal));
instance.refresh();
}
};
that.propertyChangeMap['theme'] = function (instance, key, oldVal, value) {
instance.buttonObj.removeClass(instance.element);
if (oldVal) {
instance.buttonObj.removeClass('jqx-button-' + oldVal);
instance.buttonObj.removeClass('jqx-widget-' + oldVal);