: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
init: function (settings) {
if (self.settings.size) {
self.size = self.settings.size;
if (self.settings.options) {
self._options = self.settings.options;
self.on('keydown', function (e) {
self.parents().reverse().each(function (ctrl) {
self.fire('submit', { data: rootControl.toJSON() });
options: function (state) {
return this.state.get('options');
this.state.set('options', state);
renderHtml: function () {
options = createOptions(self._options);
size = ' size = "' + self.size + '"';
return '<select id="' + self._id + '" class="' + self.classes + '"' + size + '>' + options + '</select>';
bindStates: function () {
self.state.on('change:options', function (e) {
self.getEl().innerHTML = createOptions(e.value);
function constrain(value, minVal, maxVal) {
function setAriaProp(el, name, value) {
el.setAttribute('aria-' + name, value);
function updateSliderHandle(ctrl, value) {
var maxHandlePos, shortSizeName, sizeName, stylePosName, styleValue, handleEl;
if (ctrl.settings.orientation === 'v') {
handleEl = ctrl.getEl('handle');
maxHandlePos = (ctrl.layoutRect()[shortSizeName] || 100) - funcs.getSize(handleEl)[sizeName];
styleValue = maxHandlePos * ((value - ctrl._minValue) / (ctrl._maxValue - ctrl._minValue)) + 'px';
handleEl.style[stylePosName] = styleValue;
handleEl.style.height = ctrl.layoutRect().h + 'px';
setAriaProp(handleEl, 'valuenow', value);
setAriaProp(handleEl, 'valuetext', '' + ctrl.settings.previewFilter(value));
setAriaProp(handleEl, 'valuemin', ctrl._minValue);
setAriaProp(handleEl, 'valuemax', ctrl._maxValue);
var Slider = Widget.extend({
init: function (settings) {
if (!settings.previewFilter) {
settings.previewFilter = function (value) {
return Math.round(value * 100) / 100;
self.classes.add('slider');
if (settings.orientation === 'v') {
self.classes.add('vertical');
self._minValue = isNumber(settings.minValue) ? settings.minValue : 0;
self._maxValue = isNumber(settings.maxValue) ? settings.maxValue : 100;
self._initValue = self.state.get('value');
renderHtml: function () {
var self = this, id = self._id, prefix = self.classPrefix;
return '<div id="' + id + '" class="' + self.classes + '">' + '<div id="' + id + '-handle" class="' + prefix + 'slider-handle" role="slider" tabindex="-1"></div>' + '</div>';
this.value(this._initValue).repaint();
postRender: function () {
var minValue, maxValue, screenCordName, stylePosName, sizeName, shortSizeName;
function toFraction(min, max, val) {
return (val + min) / (max - min);
function fromFraction(min, max, val) {
return val * (max - min) - min;
function handleKeyboard(minValue, maxValue) {
value = fromFraction(minValue, maxValue, toFraction(minValue, maxValue, value) + delta * 0.05);
value = constrain(value, minValue, maxValue);
self.fire('dragstart', { value: value });
self.fire('drag', { value: value });
self.fire('dragend', { value: value });
self.on('keydown', function (e) {
function handleDrag(minValue, maxValue, handleEl) {
var startPos, startHandlePos, maxHandlePos, handlePos, value;
self._dragHelper = new DragHelper(self._id, {
handle: self._id + '-handle',
startPos = e[screenCordName];
startHandlePos = parseInt(self.getEl('handle').style[stylePosName], 10);
maxHandlePos = (self.layoutRect()[shortSizeName] || 100) - funcs.getSize(handleEl)[sizeName];
self.fire('dragstart', { value: value });
var delta = e[screenCordName] - startPos;
handlePos = constrain(startHandlePos + delta, 0, maxHandlePos);
handleEl.style[stylePosName] = handlePos + 'px';
value = minValue + handlePos / maxHandlePos * (maxValue - minValue);
self.tooltip().text('' + self.settings.previewFilter(value)).show().moveRel(handleEl, 'bc tc');
self.fire('drag', { value: value });
self.fire('dragend', { value: value });
minValue = self._minValue;
maxValue = self._maxValue;
if (self.settings.orientation === 'v') {
screenCordName = 'screenY';
screenCordName = 'screenX';
handleKeyboard(minValue, maxValue);
handleDrag(minValue, maxValue, self.getEl('handle'));
updateSliderHandle(this, this.value());
bindStates: function () {
self.state.on('change:value', function (e) {
updateSliderHandle(self, e.value);
var Spacer = Widget.extend({
renderHtml: function () {
self.classes.add('spacer');
return '<div id="' + self._id + '" class="' + self.classes + '"></div>';
var SplitButton = MenuButton.extend({
classes: 'widget btn splitbtn',
var rect = self.layoutRect();
var mainButtonElm, menuButtonElm;
mainButtonElm = elm.firstChild;
menuButtonElm = elm.lastChild;
global$9(mainButtonElm).css({
width: rect.w - funcs.getSize(menuButtonElm).width,
global$9(menuButtonElm).css({ height: rect.h - 2 });
activeMenu: function (state) {
global$9(self.getEl().lastChild).toggleClass(self.classPrefix + 'active', state);
renderHtml: function () {
var prefix = self.classPrefix;
var icon = self.state.get('icon');
var text = self.state.get('text');
var settings = self.settings;
var textHtml = '', ariaPressed;
if (typeof image !== 'string') {
image = domGlobals.window.getSelection ? image[0] : image[1];
image = ' style="background-image: url(\'' + image + '\')"';
icon = settings.icon ? prefix + 'ico ' + prefix + 'i-' + icon : '';
self.classes.add('btn-has-text');
textHtml = '<span class="' + prefix + 'txt">' + self.encode(text) + '</span>';
ariaPressed = typeof settings.active === 'boolean' ? ' aria-pressed="' + settings.active + '"' : '';
return '<div id="' + id + '" class="' + self.classes + '" role="button"' + ariaPressed + ' tabindex="-1">' + '<button type="button" hidefocus="1" tabindex="-1">' + (icon ? '<i class="' + icon + '"' + image + '></i>' : '') + textHtml + '</button>' + '<button type="button" class="' + prefix + 'open" hidefocus="1" tabindex="-1">' + (self._menuBtnText ? (icon ? '\xA0' : '') + self._menuBtnText : '') + ' <i class="' + prefix + 'caret"></i>' + '</button>' + '</div>';
postRender: function () {
var self = this, onClickHandler = self.settings.onclick;
self.on('click', function (e) {
if (e.control === this) {
if (e.aria && e.aria.key !== 'down' || node.nodeName === 'BUTTON' && node.className.indexOf('open') === -1) {
e.stopImmediatePropagation();
onClickHandler.call(this, e);
delete self.settings.onclick;
var StackLayout = FlowLayout.extend({
containerClass: 'stack-layout',
controlClass: 'stack-layout-item',
var TabPanel = Panel.extend({
defaults: { type: 'panel' }
activateTab: function (idx) {
activeTabElm = this.getEl(this.activeTabId);
global$9(activeTabElm).removeClass(this.classPrefix + 'active');
activeTabElm.setAttribute('aria-selected', 'false');
this.activeTabId = 't' + idx;
activeTabElm = this.getEl('t' + idx);
activeTabElm.setAttribute('aria-selected', 'true');
global$9(activeTabElm).addClass(this.classPrefix + 'active');
this.items()[idx].show().fire('showtab');
this.items().each(function (item, i) {
renderHtml: function () {
var layout = self._layout;
var prefix = self.classPrefix;
self.items().each(function (ctrl, i) {
var id = self._id + '-t' + i;
ctrl.aria('role', 'tabpanel');
ctrl.aria('labelledby', id);
tabsHtml += '<div id="' + id + '" class="' + prefix + 'tab" ' + 'unselectable="on" role="tab" aria-controls="' + ctrl._id + '" aria-selected="false" tabIndex="-1">' + self.encode(ctrl.settings.title) + '</div>';
return '<div id="' + self._id + '" class="' + self.classes + '" hidefocus="1" tabindex="-1">' + '<div id="' + self._id + '-head" class="' + prefix + 'tabs" role="tablist">' + tabsHtml + '</div>' + '<div id="' + self._id + '-body" class="' + self.bodyClasses + '">' + layout.renderHtml(self) + '</div>' + '</div>';
postRender: function () {
self.settings.activeTab = self.settings.activeTab || 0;
self.activateTab(self.settings.activeTab);
this.on('click', function (e) {
var targetParent = e.target.parentNode;
if (targetParent && targetParent.id === self._id + '-head') {
var i = targetParent.childNodes.length;
if (targetParent.childNodes[i] === e.target) {
initLayoutRect: function () {
minW = funcs.getSize(self.getEl('head')).width;
minW = minW < 0 ? 0 : minW;
self.items().each(function (item) {
minW = Math.max(minW, item.layoutRect().minW);
minH = Math.max(minH, item.layoutRect().minH);
self.items().each(function (ctrl) {
var headH = funcs.getSize(self.getEl('head')).height;
self.settings.minWidth = minW;
self.settings.minHeight = minH + headH;
rect.innerH = rect.h - rect.deltaH;
var TextBox = Widget.extend({
init: function (settings) {
self.classes.add('textbox');
if (settings.multiline) {
self.classes.add('multiline');
self.on('keydown', function (e) {
self.parents().reverse().each(function (ctrl) {
self.fire('submit', { data: rootControl.toJSON() });
self.on('keyup', function (e) {
self.state.set('value', e.target.value);
var style, rect, borderBox, borderW, borderH = 0, lastRepaintRect;
style = self.getEl().style;
lastRepaintRect = self._lastRepaintRect || {};
var doc = domGlobals.document;
if (!self.settings.multiline && doc.all && (!doc.documentMode || doc.documentMode <= 8)) {
style.lineHeight = rect.h - borderH + 'px';
borderBox = self.borderBox;
borderW = borderBox.left + borderBox.right + 8;
borderH = borderBox.top + borderBox.bottom + (self.settings.multiline ? 8 : 0);
if (rect.x !== lastRepaintRect.x) {
style.left = rect.x + 'px';
lastRepaintRect.x = rect.x;
if (rect.y !== lastRepaintRect.y) {
style.top = rect.y + 'px';
lastRepaintRect.y = rect.y;
if (rect.w !== lastRepaintRect.w) {
style.width = rect.w - borderW + 'px';
lastRepaintRect.w = rect.w;
if (rect.h !== lastRepaintRect.h) {
style.height = rect.h - borderH + 'px';
lastRepaintRect.h = rect.h;
self._lastRepaintRect = lastRepaintRect;
self.fire('repaint', {}, false);
renderHtml: function () {
var settings = self.settings;
attrs[name] = settings[name];
attrs.disabled = 'disabled';
attrs.type = settings.subtype;
elm = funcs.create(settings.multiline ? 'textarea' : 'input', attrs);
elm.value = self.state.get('value');
elm.className = self.classes.toString();
value: function (value) {
this.state.set('value', value);
if (this.state.get('rendered')) {
this.state.set('value', this.getEl().value);
return this.state.get('value');
postRender: function () {
self.getEl().value = self.state.get('value');
self.$el.on('change', function (e) {
self.state.set('value', e.target.value);
bindStates: function () {
self.state.on('change:value', function (e) {
if (self.getEl().value !== e.value) {
self.getEl().value = e.value;
self.state.on('change:disabled', function (e) {