build(arg, winRef) {
const child = this.$element;
if ( arguments.length < 2 ) {
return this;
}
child.setAttribute('role', 'menuitem' + (child.getAttribute('data-type') || ''));
const label = GUI.getLabel(child);
const icon = GUI.getIcon(child, winRef);
child.setAttribute('aria-label', label);
const span = document.createElement('label');
if ( icon ) {
child.style.backgroundImage = 'url(' + icon + ')';
DOM.$addClass(span, 'gui-has-image');
}
child.appendChild(span);
createTyped(child, span);
if ( child.getAttribute('data-labelhtml') === 'true' ) {
span.innerHTML = label;
} else {
span.appendChild(document.createTextNode(label));
}
if ( child.querySelector('gui-menu') ) {
DOM.$addClass(child, 'gui-menu-expand');
child.setAttribute('aria-haspopup', 'true');
} else {
child.setAttribute('aria-haspopup', 'false');
}
return this;
}
function _onClick(ev) {
ev.preventDefault();
const mel = ev.target;
const submenu = mel.querySelector('gui-menu');
if ( mel.getAttribute('data-disabled') === 'true' ) {
return;
}
mel.querySelectorAll('gui-menu-entry').forEach((c) => {
DOM.$removeClass(c, 'gui-hover');
});
if ( submenu ) {
Menu.setActive((ev) => {
if ( ev instanceof window.Event ) {
ev.stopPropagation();
}
DOM.$removeClass(mel, 'gui-active');
});
}
if ( DOM.$hasClass(mel, 'gui-active') ) {
if ( submenu ) {
DOM.$removeClass(mel, 'gui-active');
}
} else {
if ( submenu ) {
DOM.$addClass(mel, 'gui-active');
}
mel.dispatchEvent(new CustomEvent('_select', {detail: getSelectionEventAttribs(mel)}));
}
}
function selectTab(el, tabs, ev, idx, tab) {
tabs.querySelectorAll('li').forEach((tel, eidx) => {
toggleActive(tel, eidx, idx);
});
el.querySelectorAll('gui-tab-container').forEach((tel, eidx) => {
toggleActive(tel, eidx, idx);
});
DOM.$addClass(tab, 'gui-active');
el.dispatchEvent(new CustomEvent('_change', {detail: {index: idx}}));
}
/**
* @override
*/
init() {
const root = super.init(...arguments);
root.setAttribute('role', 'dialog');
const windowName = this.className.replace(/Dialog$/, '');
const focusButtons = ['ButtonCancel', 'ButtonNo'];
const buttonMap = {
ButtonOK: 'ok',
ButtonCancel: 'cancel',
ButtonYes: 'yes',
ButtonNo: 'no'
};
if ( this.scheme ) {
this.scheme.render(this, windowName, root, 'application-dialog', (node) => {
node.querySelectorAll('gui-label').forEach((el) => {
if ( el.childNodes.length && el.childNodes[0].nodeType === 3 && el.childNodes[0].nodeValue ) {
const label = el.childNodes[0].nodeValue;
$empty(el);
el.appendChild(document.createTextNode(_(label)));
}
});
});
} else {
this._render(windowName, require('osjs-scheme-loader!dialogs.html'));
}
Object.keys(buttonMap).filter((id) => this._findDOM(id)).forEach((id) => {
const btn = this._find(id);
btn.on('click', (ev) => {
this.onClose(ev, buttonMap[id]);
});
if ( focusButtons.indexOf(id) >= 0 ) {
btn.focus();
}
});
$addClass(root, 'DialogWindow');
return root;
}
function toggleActive(el, eidx, idx) {
DOM.$removeClass(el, 'gui-active');
if ( eidx === idx ) {
DOM.$addClass(el, 'gui-active');
}
}
node.querySelectorAll('*').forEach((el) => {
const lcase = el.tagName.toLowerCase();
if ( lcase.match(/^gui\-/) && !lcase.match(/(\-container|\-(h|v)box|\-columns?|\-rows?|(status|tool)bar|(button|menu)\-bar|bar\-entry)$/) ) {
DOM.$addClass(el, 'gui-element');
}
});