/**
|
* @author Hong-Phuc Bui
|
* initial version 27.12.2018
|
* */
|
const TYPE_CLASS_PREFIX = "dom-output-";
|
const MAXIMUM_OBJECT_REPRESENT_LENGTH = 58;
|
|
|
export class DomOutput {
|
|
/**
|
* @constructor
|
*
|
* @param {string} outputElementId the element ID of an element in DOM, in which
|
* output objects are in written
|
*/
|
constructor(outputElementId) {
|
this.output = document.getElementById(outputElementId);
|
this._style = "";
|
this.outputElementId = outputElementId;
|
}
|
|
/**
|
* set style output, default is an empty string.
|
* @param {string} cssStyle a String represents a syntactical valid CSS-Style, for example
|
* `color: red; font-size:12px`
|
* */
|
set style(cssStyle) {
|
this._style = cssStyle;
|
}
|
|
get style() {
|
return this._style;
|
}
|
|
/**
|
* print each element of argv in an <code> Tag. Elements are converted to String
|
* by its natural String representation.
|
*
|
* @param {...Object} argv objects to be printed
|
*
|
* */
|
print(...argv) {
|
this._lazyInit( "print", "_print", ...argv);
|
}
|
|
/**
|
* like {@link print} but with an line break after the last element is printed.
|
*
|
* @param {...Object} argv objects to be printed
|
* */
|
printl(...argv) {
|
this._lazyInit("printl", "_printl", ...argv);
|
}
|
|
/**
|
* convert an HTML string to DOM-Element and appends it as the last element of output.
|
* @param {string} html HTML String
|
* */
|
printh(html) {
|
this._lazyInit("printh", "_printh", html);
|
}
|
|
/**
|
* convert each element of argv to HTML String
|
*
|
* @return {DocumentFragment}
|
*
|
* */
|
_html(...argv) {
|
let html = document.createDocumentFragment();
|
argv
|
.map(a => representTopLevelObject(a))
|
.forEach(represent => {
|
html.appendChild( represent );
|
});
|
return html;
|
}
|
|
/**
|
* clear all output
|
* */
|
clear() {
|
try {
|
this.output.innerText = "";
|
}catch (e) { // TypeError
|
console.log("output is not initialized.");
|
}
|
}
|
|
_print(...argv) {
|
let toHTML = this._html(...argv);
|
this.output.appendChild(toHTML);
|
}
|
|
_printl(...argv) {
|
let toHTML = this._html(...argv);
|
toHTML.appendChild(document.createElement("br"));
|
this.output.appendChild(toHTML);
|
}
|
|
_printh(html) {
|
this.output.insertAdjacentHTML('beforeend', html);
|
}
|
|
_lazyInit(sourceFn, targetFn, ...argv) {
|
if (!this.output) {
|
this.output = document.getElementById(this.outputElementId);
|
if (this.output) {
|
this[targetFn](...argv);
|
this[sourceFn] = this[targetFn];
|
} else {
|
console.warn("Cannot initialize output with #" + this.outputElementId);
|
console.log(...argv);
|
}
|
} else {
|
this[targetFn](...argv);
|
this[sourceFn] = this[targetFn];
|
}
|
}
|
}
|
|
|
function representTopLevelObject(arg) {
|
if (typeof arg === "string") {
|
return span("string",arg);
|
}
|
else {
|
return represent(arg, MAXIMUM_OBJECT_REPRESENT_LENGTH);
|
}
|
}
|
|
function span(type, text) {
|
let sp = document.createElement("code");
|
sp.className = TYPE_CLASS_PREFIX + type;
|
sp.appendChild(document.createTextNode(text));
|
return sp;
|
}
|
|
function td(type) {
|
let td = document.createElement("td");
|
td.className = TYPE_CLASS_PREFIX + type;
|
return td;
|
}
|
|
function eltSize(elt) {
|
return elt.textContent.length;
|
}
|
|
function represent(val, maximumSize) {
|
if (typeof val === "boolean") return span("bool", String(val));
|
if ((typeof val === "number") || (typeof val === "bigint") ) return span("number", val.toString());
|
if (typeof val === "string") return span("string-2", JSON.stringify(val));
|
if (typeof val === "symbol") return span("symbol", String(val));
|
if (val == null) return span("null", String(val));
|
if (Array.isArray(val)) return representArray(val, maximumSize);
|
else return representObj(val, maximumSize);
|
}
|
|
function representArray(val, maximumSize) {
|
return representIterable(val, maximumSize);
|
}
|
|
function representObj(val, maximumSize) {
|
if (val instanceof Set) {
|
return representSet(val, maximumSize);
|
}
|
if (val instanceof Map) {
|
return representMap(val, maximumSize);
|
}
|
let string = (typeof val.toString == "function") && val.toString();
|
if (!string || /^\[object .*\]$/.test(string)) {
|
return representSimpleObj(val, maximumSize);
|
}
|
let m = string.match(/^\s*(function[^(]*\([^)]*\))/) ;
|
if (val.call && m ) {
|
return span("function", m[1] + "{…}");
|
}
|
|
let elt = span("etc", string);
|
elt.addEventListener("click", () => expandObj(elt, "obj", val));
|
return elt;
|
}
|
|
function representSet(val, maximumSize) {
|
let wrap = document.createElement("span");
|
wrap.appendChild(document.createTextNode("Set("));
|
wrap.appendChild( representIterable([...val], maximumSize) );
|
wrap.appendChild(document.createTextNode(")"));
|
return wrap;
|
}
|
|
function representMap(val, maximumSize) {
|
let wrap = document.createElement("span");
|
wrap.appendChild(document.createTextNode("Map("));
|
wrap.appendChild( representIterable([...val], maximumSize, '[', ']') );
|
wrap.appendChild(document.createTextNode(")"));
|
return wrap;
|
}
|
|
function representIterable(val, maximumSize, beginDelimiter='[', endDelimiter=']' ) {
|
maximumSize -= 2;
|
let wrap = document.createElement("span");
|
wrap.appendChild(document.createTextNode( beginDelimiter ));
|
for (let i = 0; i < val.length; ++i) {
|
if (i) {
|
wrap.appendChild(document.createTextNode(", "));
|
maximumSize -= 2;
|
}
|
let next = maximumSize > 0 && represent(val[i], maximumSize);
|
let nextSize = next ? eltSize(next) : 0;
|
if (maximumSize - nextSize <= 0) {
|
wrap.appendChild(span("etc", "…")).addEventListener("click", () => expandObj(wrap, "array", val));
|
break;
|
}
|
maximumSize -= nextSize;
|
wrap.appendChild(next);
|
}
|
wrap.appendChild(document.createTextNode(endDelimiter ));
|
return wrap;
|
}
|
|
|
function constructorName(obj) {
|
if (!obj.constructor) return null;
|
let m = String(obj.constructor).match(/^function\s*([^\s(]+)/);
|
if (m && m[1] !== "Object") return m[1];
|
}
|
|
|
function representSimpleObj(val, space) {
|
space -= 2;
|
let wrap = document.createElement("span");
|
let name = constructorName(val);
|
if (name) {
|
space -= name.length;
|
wrap.appendChild(document.createTextNode(name))
|
}
|
wrap.appendChild(document.createTextNode("{"));
|
try {
|
let first = true;
|
/*for (let prop of Object.getOwnPropertyNames(val) ){*/
|
for (let prop in val ){
|
if (first) {
|
first = false;
|
} else {
|
space -= 2;
|
wrap.appendChild(document.createTextNode(", "));
|
}
|
let next = space > 0 && represent(val[prop], space);
|
let nextSize = next ? prop.length + 2 + eltSize(next) : 0;
|
if (space - nextSize <= 0) {
|
wrap.appendChild(span("etc", "…")).addEventListener("click", () => expandObj(wrap, "obj", val));
|
break;
|
}
|
space -= nextSize;
|
wrap.appendChild(span("prop", prop + ": "));
|
wrap.appendChild(next)
|
}
|
} catch (e) {
|
wrap.appendChild(document.createTextNode("…"))
|
}
|
wrap.appendChild(document.createTextNode("}"));
|
return wrap;
|
}
|
|
function expandObj(node, type, val) {
|
let wrap = document.createElement("span");
|
let opening = type === "array" ? "[" : "{",
|
cname;
|
if (opening === "{" && (cname = constructorName(val))) {
|
opening = cname + " {";
|
}
|
wrap.appendChild(document.createTextNode(opening));
|
let block = wrap.appendChild(document.createElement("div"));
|
block.className = "sandbox-output-etc-block";
|
let table = block.appendChild(document.createElement("table"));
|
|
function addProp(name) {
|
let row = table.appendChild(document.createElement("tr"));
|
let propTd = td("property-name");
|
row.appendChild(propTd).appendChild(span("prop", name + ":"));
|
row.appendChild(document.createElement("td")).appendChild(represent(val[name], 40));
|
}
|
function addValue(index) {
|
let row = table.appendChild(document.createElement("tr"));
|
row.appendChild(document.createElement("td")).appendChild(represent(val[index], 40));
|
}
|
if (type === "array") {
|
for (let i = 0; i < val.length; ++i) {
|
console.log(`${i} -> ${val[i]}`);
|
addValue(i);
|
}
|
} else {
|
for (let prop in val ) {
|
addProp(prop);
|
}
|
}
|
wrap.appendChild(document.createTextNode(type === "array" ? "]" : "}"));
|
node.parentNode.replaceChild(wrap, node)
|
}
|
