ucbuilder
Version:
For Developing Applications with multiple form/usercontrols etc.. In Single BrowserWindow...
95 lines (94 loc) • 3.77 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ElementEditor = void 0;
const common_1 = require("ucbuilder/build/common");
const keyboard_1 = require("ucbuilder/global/hardware/keyboard");
class ElementEditor {
constructor() {
this.isInEditMode = false;
this.ATTR = {
lastEditedData: '______lval' + common_1.uniqOpt.guidAs_,
};
this.multiline = false;
this.callbackOnSave = (changedContent, oldContent) => { };
this.callbackOnReset = (oldContent) => { };
this.blurEventListener = (event) => {
if (this.isInEditMode) {
console.log('blurEventListener');
this.saveRow();
event.preventDefault();
}
};
this.keydownListener = (event) => {
switch (event.keyCode) {
case keyboard_1.keyBoard.keys.escape:
this.reset();
event.preventDefault();
break;
case keyboard_1.keyBoard.keys.up:
case keyboard_1.keyBoard.keys.down:
if (!this.multiline) {
this.reset();
event.preventDefault();
}
break;
case keyboard_1.keyBoard.keys.enter:
if (this.isInEditMode) {
if (this.multiline && event.shiftKey) {
event.stopPropagation();
return;
}
this.saveRow();
event.preventDefault();
}
break;
}
};
}
onDemandActualValue() {
return this.htEle.innerHTML;
}
bindEvents() {
this.lastActiveElement = document.activeElement;
this.htEle.setAttribute("contenteditable", "true");
this.htEle.addEventListener('blur', this.blurEventListener);
this.htEle.addEventListener('keydown', this.keydownListener);
}
unbindEvents() {
this.htEle.setAttribute("contenteditable", "false");
this.htEle.removeEventListener('blur', this.blurEventListener);
this.htEle.removeEventListener('keydown', this.keydownListener);
if (this.lastActiveElement !== undefined)
this.lastActiveElement.focus();
}
editRow(htEle = undefined, callbackOnSave = (changedContent, oldContent) => { }, callbackOnReset = (oldContent) => { }, multiline = false) {
this.multiline = multiline;
this.callbackOnSave = callbackOnSave;
this.callbackOnReset = callbackOnReset;
this.htEle = htEle;
this.bindEvents();
const val = this.onDemandActualValue();
this.htEle.dataset[this.ATTR.lastEditedData] = val;
this.isInEditMode = true;
this.htEle.innerHTML = val;
this.htEle.focus();
common_1.controlOpt.selectAllText(this.htEle);
}
reset() {
const oldContent = this.htEle.dataset[this.ATTR.lastEditedData];
this.callbackOnReset(oldContent);
this.unbindEvents();
this.htEle.innerHTML = oldContent;
}
saveRow() {
if (this.isInEditMode) {
const cntnt = this.htEle.innerText.trim();
const newContent = common_1.strOpt.replaceAll(cntnt, "\n", "<br>");
const oldContent = this.htEle.dataset[this.ATTR.lastEditedData];
this.callbackOnSave(newContent, oldContent);
this.unbindEvents();
}
this.isInEditMode = false;
}
}
exports.ElementEditor = ElementEditor;