224 lines
11 KiB
JavaScript
224 lines
11 KiB
JavaScript
// tslint:disable:max-line-length export-name
|
|
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
return new (P || (P = Promise))(function (resolve, reject) {
|
|
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
|
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
});
|
|
};
|
|
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
function step(op) {
|
|
if (f) throw new TypeError("Generator is already executing.");
|
|
while (_) try {
|
|
if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t;
|
|
if (y = 0, t) op = [0, t.value];
|
|
switch (op[0]) {
|
|
case 0: case 1: t = op; break;
|
|
case 4: _.label++; return { value: op[1], done: false };
|
|
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
default:
|
|
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
if (t[2]) _.ops.pop();
|
|
_.trys.pop(); continue;
|
|
}
|
|
op = body.call(thisArg, _);
|
|
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
}
|
|
};
|
|
import { UserCustomActionMegaMenuId } from './MegaMenuApplicationCustomizer';
|
|
import { UserCustomActionService } from '../../services/UserCustomActionService/UserCustomActionService';
|
|
import { UserCustomActionScope } from '../../services/UserCustomActionService/UserCustomActionScope';
|
|
var MegaMenuSettingsPanel = (function () {
|
|
function MegaMenuSettingsPanel(context, dataUpdated) {
|
|
this.context = context;
|
|
this.dataUpdated = dataUpdated;
|
|
this._panelElement = undefined;
|
|
this._overlayElement = undefined;
|
|
this._service = new UserCustomActionService(this.context);
|
|
}
|
|
MegaMenuSettingsPanel.prototype.open = function () {
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
var currentProps;
|
|
return __generator(this, function (_a) {
|
|
switch (_a.label) {
|
|
case 0:
|
|
if (this._panelElement) {
|
|
return [2 /*return*/];
|
|
}
|
|
return [4 /*yield*/, this.readApplicationCustomizerProps()];
|
|
case 1:
|
|
currentProps = _a.sent();
|
|
this._createPanel(currentProps);
|
|
return [2 /*return*/];
|
|
}
|
|
});
|
|
});
|
|
};
|
|
MegaMenuSettingsPanel.prototype.close = function () {
|
|
if (this._panelElement) {
|
|
this._panelElement.remove();
|
|
this._panelElement = undefined;
|
|
}
|
|
if (this._overlayElement) {
|
|
this._overlayElement.remove();
|
|
this._overlayElement = undefined;
|
|
}
|
|
// Fokus entfernen (kein sichtbarer Fokus-Rahmen nach Dialog-Schließung)
|
|
document.body.focus();
|
|
document.body.blur();
|
|
};
|
|
MegaMenuSettingsPanel.prototype.readApplicationCustomizerProps = function () {
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
var ucas, candidates, uca;
|
|
return __generator(this, function (_a) {
|
|
switch (_a.label) {
|
|
case 0: return [4 /*yield*/, this._service.getUserCustomActions(UserCustomActionScope.Site)];
|
|
case 1:
|
|
ucas = _a.sent();
|
|
candidates = ucas.filter(function (uca) { return uca.ClientSideComponentId === UserCustomActionMegaMenuId; });
|
|
if (candidates.length) {
|
|
uca = candidates[0];
|
|
this._ucaId = uca.Id;
|
|
return [2 /*return*/, JSON.parse(uca.ClientSideComponentProperties)];
|
|
}
|
|
else {
|
|
console.error('UserCustomAction für das Megamenü nicht gefunden. Alles ist sinnlos.');
|
|
return [2 /*return*/, {
|
|
termSetName: '',
|
|
cssUrl: ''
|
|
}];
|
|
}
|
|
return [2 /*return*/];
|
|
}
|
|
});
|
|
});
|
|
};
|
|
MegaMenuSettingsPanel.prototype.saveApplicationCustomizerProps = function (componentProps) {
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
var newUserCustomActionsProperty, e_1;
|
|
return __generator(this, function (_a) {
|
|
switch (_a.label) {
|
|
case 0:
|
|
_a.trys.push([0, 2, , 3]);
|
|
newUserCustomActionsProperty = {
|
|
ClientSideComponentProperties: JSON.stringify(componentProps)
|
|
};
|
|
return [4 /*yield*/, this._service.updateUserCustomAction(UserCustomActionScope.Site, this._ucaId, newUserCustomActionsProperty)];
|
|
case 1:
|
|
_a.sent();
|
|
this.dataUpdated(componentProps);
|
|
return [3 /*break*/, 3];
|
|
case 2:
|
|
e_1 = _a.sent();
|
|
console.error(e_1);
|
|
return [3 /*break*/, 3];
|
|
case 3: return [2 /*return*/];
|
|
}
|
|
});
|
|
});
|
|
};
|
|
MegaMenuSettingsPanel.prototype._createPanel = function (props) {
|
|
var _this = this;
|
|
var overlay = document.createElement('div');
|
|
overlay.className = 'mm-settings-overlay';
|
|
overlay.tabIndex = -1;
|
|
overlay.onclick = function () { return _this.close(); };
|
|
this._overlayElement = overlay;
|
|
var panel = document.createElement('div');
|
|
panel.className = 'mm-settings-panel';
|
|
panel.setAttribute('role', 'dialog');
|
|
panel.setAttribute('aria-modal', 'true');
|
|
panel.setAttribute('aria-label', 'MegaMenu Einstellungen');
|
|
panel.innerHTML = this._getMarkup(props.termSetName, props.cssUrl);
|
|
this._panelElement = panel;
|
|
document.body.appendChild(overlay);
|
|
document.body.appendChild(panel);
|
|
var closeBtn = panel.querySelector('.mm-settings-close');
|
|
var cancelBtn = panel.querySelector('.mm-settings-cancel');
|
|
var saveBtn = panel.querySelector('.mm-settings-save');
|
|
var firstInput = panel.querySelector('#mm-setting-termset');
|
|
if (closeBtn) {
|
|
closeBtn.onclick = function () { return _this.close(); };
|
|
}
|
|
if (cancelBtn) {
|
|
cancelBtn.onclick = function () { return _this.close(); };
|
|
}
|
|
if (saveBtn) {
|
|
saveBtn.onclick = function () { return _this._save(); };
|
|
}
|
|
panel.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Escape') {
|
|
e.preventDefault();
|
|
_this.close();
|
|
}
|
|
else if (e.key === 'Tab') {
|
|
_this._trapFocus(e);
|
|
}
|
|
});
|
|
setTimeout(function () { if (firstInput) {
|
|
firstInput.focus();
|
|
} }, 0);
|
|
};
|
|
MegaMenuSettingsPanel.prototype._getMarkup = function (termSet, cssUrl) {
|
|
return "<div class='mm-settings-header'>\n <h2 class='mm-settings-title'>Einstellungen</h2>\n <button type='button' class='mm-settings-close' aria-label='Schlie\u00DFen'>\u00D7</button>\n </div>\n <div class='mm-settings-body'>\n <div class='mm-settings-field'>\n <label for='mm-setting-termset'>Name des Navigations-Termsets</label>\n <input id='mm-setting-termset' type='text' value='" + this._escape(termSet) + "' />\n </div>\n <div class='mm-settings-field'>\n <label for='mm-setting-css'>Pfad zu zus\u00E4tzlicher CSS-Datei</label>\n <input id='mm-setting-css' type='text' value='" + this._escape(cssUrl) + "' />\n </div>\n </div>\n <div class='mm-settings-footer'>\n <button type='button' class='mm-settings-save ms-Button ms-Button--primary'><span>Speichern</span></button>\n <button type='button' class='mm-settings-cancel ms-Button'><span>Abbrechen</span></button>\n </div>";
|
|
};
|
|
MegaMenuSettingsPanel.prototype._save = function () {
|
|
if (!this._panelElement) {
|
|
return;
|
|
}
|
|
var termSetInput = this._panelElement.querySelector('#mm-setting-termset');
|
|
var cssInput = this._panelElement.querySelector('#mm-setting-css');
|
|
this.saveApplicationCustomizerProps({
|
|
termSetName: termSetInput && termSetInput.value ? termSetInput.value : '',
|
|
cssUrl: cssInput && cssInput.value ? cssInput.value : ''
|
|
});
|
|
this.close();
|
|
};
|
|
/**
|
|
* Hält den Fokus innerhalb des Settings-Panels gefangen (Focus Trapping).
|
|
* Wichtig für Accessibility: Verhindert, dass Tab-Navigation aus dem modalen Dialog herausführt.
|
|
* Bei Tab am letzten Element → springt zum ersten, bei Shift+Tab am ersten → springt zum letzten.
|
|
*/
|
|
MegaMenuSettingsPanel.prototype._trapFocus = function (e) {
|
|
if (!this._panelElement) {
|
|
return;
|
|
}
|
|
var focusable = this._panelElement.querySelectorAll('button, input');
|
|
if (!focusable || focusable.length === 0) {
|
|
return;
|
|
}
|
|
var first = focusable[0];
|
|
var last = focusable[focusable.length - 1];
|
|
var active = document.activeElement;
|
|
if (e.shiftKey && active === first) {
|
|
e.preventDefault();
|
|
last.focus();
|
|
}
|
|
else if (!e.shiftKey && active === last) {
|
|
e.preventDefault();
|
|
first.focus();
|
|
}
|
|
};
|
|
MegaMenuSettingsPanel.prototype._escape = function (value) {
|
|
if (value) {
|
|
return value.replace(/&/g, '&').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
|
|
}
|
|
else {
|
|
return '';
|
|
}
|
|
};
|
|
return MegaMenuSettingsPanel;
|
|
}());
|
|
export { MegaMenuSettingsPanel };
|
|
|
|
//# sourceMappingURL=MegaMenuSettings.js.map
|