menu.classes.remove(menu._lastRel).add(rel);
self.classes.add('selected');
self.aria('expanded', true);
self.menu.items().each(function (item) {
self.aria('expanded', false);
renderHtml: function () {
var settings = self.settings;
var prefix = self.classPrefix;
var text = self.state.get('text');
var icon = self.settings.icon, image = '', shortcut = settings.shortcut;
var url = self.encode(settings.url), iconHtml = '';
function convertShortcut(shortcut) {
var i, value, replace = {};
replace = { meta: 'Ctrl' };
shortcut = shortcut.split('+');
for (i = 0; i < shortcut.length; i++) {
value = replace[shortcut[i].toLowerCase()];
return shortcut.join('+');
function escapeRegExp(str) {
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
function markMatches(text) {
var match = settings.match || '';
return match ? text.replace(new RegExp(escapeRegExp(match), 'gi'), function (match) {
return '!mce~match[' + match + ']mce~match!';
function boldMatches(text) {
return text.replace(new RegExp(escapeRegExp('!mce~match['), 'g'), '<b>').replace(new RegExp(escapeRegExp(']mce~match!'), 'g'), '</b>');
self.parent().classes.add('menu-has-icons');
image = ' style="background-image: url(\'' + settings.image + '\')"';
shortcut = convertShortcut(shortcut);
icon = prefix + 'ico ' + prefix + 'i-' + (self.settings.icon || 'none');
iconHtml = text !== '-' ? '<i class="' + icon + '"' + image + '></i>\xA0' : '';
text = boldMatches(self.encode(markMatches(text)));
url = boldMatches(self.encode(markMatches(url)));
return '<div id="' + id + '" class="' + self.classes + '" tabindex="-1">' + iconHtml + (text !== '-' ? '<span id="' + id + '-text" class="' + prefix + 'text">' + text + '</span>' : '') + (shortcut ? '<div id="' + id + '-shortcut" class="' + prefix + 'menu-shortcut">' + shortcut + '</div>' : '') + (settings.menu ? '<div class="' + prefix + 'caret"></div>' : '') + (url ? '<div class="' + prefix + 'menu-item-link">' + url + '</div>' : '') + '</div>';
postRender: function () {
var self = this, settings = self.settings;
var textStyle = settings.textStyle;
if (typeof textStyle === 'function') {
textStyle = textStyle.call(this);
var textElm = self.getEl('text');
textElm.setAttribute('style', textStyle);
self._textStyle = textStyle;
self.on('mouseenter click', function (e) {
if (e.control === self) {
if (!settings.menu && e.type === 'click') {
global$3.requestAnimationFrame(function () {
self.parent().items().each(function (ctrl) {
ctrl.classes.remove('selected');
self.classes.toggle('selected', true);
active: function (state) {
toggleTextStyle(this, state);
if (typeof state !== 'undefined') {
this.aria('checked', state);
return this._super(state);
var Radio = Checkbox.extend({
var ResizeHandle = Widget.extend({
renderHtml: function () {
var self = this, prefix = self.classPrefix;
self.classes.add('resizehandle');
if (self.settings.direction === 'both') {
self.classes.add('resizehandle-both');
return '<div id="' + self._id + '" class="' + self.classes + '">' + '<i class="' + prefix + 'ico ' + prefix + 'i-resize"></i>' + '</div>';
postRender: function () {
self.resizeDragHelper = new DragHelper(this._id, {
self.fire('ResizeStart');
if (self.settings.direction !== 'both') {
if (this.resizeDragHelper) {
this.resizeDragHelper.destroy();
function createOptions(options) {
for (var i = 0; i < options.length; i++) {
strOptions += '<option value="' + options[i] + '">' + options[i] + '</option>';
var SelectBox = Widget.extend({
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$1(settings.minValue) ? settings.minValue : 0;
self._maxValue = isNumber$1(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$7(mainButtonElm).css({
width: rect.w - funcs.getSize(menuButtonElm).width,
global$7(menuButtonElm).css({ height: rect.h - 2 });
activeMenu: function (state) {
global$7(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$7(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$7(activeTabElm).addClass(this.classPrefix + 'active');
this.items()[idx].show().fire('showtab');
this.items().each(function (item, i) {
renderHtml: function () {
var layout = self._layout;