From 80c47145b4cdd9c5f5ed9fe6ff1ac6f30e6a1b38 Mon Sep 17 00:00:00 2001 From: nikolayemrikh Date: Fri, 22 Feb 2019 13:51:17 +0300 Subject: [PATCH 01/14] =?UTF-8?q?=D0=92=D1=8B=D0=BD=D0=BE=D1=81=D0=B8?= =?UTF-8?q?=D1=82=20entry=20=D0=B2=20=D0=BE=D1=82=D0=B4=D0=B5=D0=BB=D1=8C?= =?UTF-8?q?=D0=BD=D1=8B=D0=B9=20=D0=BA=D0=BB=D0=B0=D1=81=D1=81-=D0=B2?= =?UTF-8?q?=D1=8C=D1=8E=D1=85=D1=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/array/array-view.js | 7 ++-- src/entry-view.js | 51 +++++++++++++++++++++++++++ src/object/map-entry-view.js | 5 +-- src/object/map-set-view.js | 5 +-- src/object/promise-view.js | 19 +++++----- src/object/string-number-view.js | 9 ++--- src/type-view.js | 59 +++++--------------------------- 7 files changed, 84 insertions(+), 71 deletions(-) create mode 100644 src/entry-view.js diff --git a/src/array/array-view.js b/src/array/array-view.js index 6c48ee1..6b18379 100644 --- a/src/array/array-view.js +++ b/src/array/array-view.js @@ -1,4 +1,5 @@ import TypeView from '../type-view'; +import EntryView from '../entry-view'; import MapEntryView from '../object/map-entry-view'; import {getElement} from '../utils'; import {Mode, ViewType} from '../enums'; @@ -139,7 +140,7 @@ export default class ArrayView extends TypeView { } if (inHead && emptyCount !== 0 && (hasKey || i === l - 1)) { TypeView.appendEntryElIntoFragment( - this._createEntryEl({key, el: getElement(`${EMPTY}${emptyCount > 1 ? ` ${MULTIPLY_SIGN} ${emptyCount}` : ``}`), withoutKey: true}), + new EntryView({key, entryEl: getElement(`${EMPTY}${emptyCount > 1 ? ` ${MULTIPLY_SIGN} ${emptyCount}` : ``}`), withoutKey: true}).el, fragment ); if (inHead && countEntriesWithoutKeys) { @@ -150,9 +151,9 @@ export default class ArrayView extends TypeView { if (hasKey) { if (isMapEntriesSpecialValue) { const pair = arr[i]; - const el = new MapEntryView({val: pair, mode, depth: this.nextNestingLevel, parentView: this, propKey: this._propKey}, this._console).el; + const entryEl = new MapEntryView({val: pair, mode, depth: this.nextNestingLevel, parentView: this, propKey: this._propKey}, this._console).el; TypeView.appendEntryElIntoFragment( - this._createEntryEl({key, el, withoutKey: inHead}), + new EntryView({key, entryEl, withoutKey: inHead}).el, fragment ); } else { diff --git a/src/entry-view.js b/src/entry-view.js new file mode 100644 index 0000000..6d646cc --- /dev/null +++ b/src/entry-view.js @@ -0,0 +1,51 @@ +import AbstractView from './abstract-view'; +import {escapeHTML} from './utils'; + +export default class EntryView extends AbstractView { + constructor({key, entryEl, mode, withoutKey, withoutValue, getViewEl, isGrey}) { + super(); + this._key = key; + this._entryEl = entryEl; // TODO не забыть поменять + this._mode = mode; + this._withoutKey = withoutKey; + this._withoutValue = withoutValue; + this._getViewEl = getViewEl; + this._isGrey = isGrey; + } + get template() { + return `\ +
\ + ${this._withoutKey ? `` : `${escapeHTML(this._key.toString())}`}\ + ${this._withoutValue ? `` : `
${this._entryEl ? `` : `(...)`}
`}\ +
`; + } + + _bind() { + if (this._withoutValue) { + return; + } + this._valueContEl = this._el.querySelector(`.entry-container__value-container`); + + if (this._entryEl) { + this._valueContEl.appendChild(this._entryEl); + } + + this._valueContEl.addEventListener(`click`, this._onClickInsertEl.bind(this), { + once: true + }); + } + + _onClickInsertEl(evt) { + evt.preventDefault(); + + this._valueContEl.textContent = ``; + this._valueContEl.classList.remove(`entry-container__value-container--underscore`); + + try { + const viewEl = this._getViewEl(); + this._valueContEl.appendChild(viewEl); + } catch (err) { + this._valueContEl.textContent = `[Exception: ${err.stack}]`; + } + } +} diff --git a/src/object/map-entry-view.js b/src/object/map-entry-view.js index 87794b4..3e276a5 100644 --- a/src/object/map-entry-view.js +++ b/src/object/map-entry-view.js @@ -1,4 +1,5 @@ import TypeView from '../type-view'; +import EntryView from '../entry-view'; import {Mode, ViewType} from '../enums'; export default class MapEntryView extends TypeView { @@ -65,11 +66,11 @@ export default class MapEntryView extends TypeView { const valueEl = this._console.createTypedView(this._pairValue, this._mode, this.nextNestingLevel, this, this._propKey).el; TypeView.appendEntryElIntoFragment( - this._createEntryEl({key: `key`, el: keyEl, withoutKey: false}), + new EntryView({key: `key`, entryEl: keyEl, withoutKey: false}).el, fragment ); TypeView.appendEntryElIntoFragment( - this._createEntryEl({key: `value`, el: valueEl, withoutKey: false}), + new EntryView({key: `value`, entryEl: valueEl, withoutKey: false}).el, fragment ); diff --git a/src/object/map-set-view.js b/src/object/map-set-view.js index 731d94d..4c9e85c 100644 --- a/src/object/map-set-view.js +++ b/src/object/map-set-view.js @@ -1,4 +1,5 @@ import TypeView from '../type-view'; +import EntryView from '../entry-view'; import ObjectView from './object-view'; import MapEntryView from '../object/map-entry-view'; import {Mode} from '../enums'; @@ -30,7 +31,7 @@ export default class MapSetView extends ObjectView { let entryEl; if (this._console.checkInstanceOf(this._value, `Map`)) { const el = new MapEntryView({val: entry, mode, depth: this.nextNestingLevel, parentView: this, propKey: this._propKey}, this._console).el; - entryEl = this._createEntryEl({key: i, el, withoutKey: true}); + entryEl = new EntryView({key: i, entryEl: el, withoutKey: true}); } if (this._console.checkInstanceOf(this.value, `Set`)) { entryEl = this._createTypedEntryEl({obj: entriesArr, key: i, mode, withoutKey: true, notCheckDescriptors: true}); @@ -46,7 +47,7 @@ export default class MapSetView extends ObjectView { const entriesArrView = this._console.createTypedView(entriesArr, Mode.PROP, this.nextNestingLevel, this, `[[Entries]]`); entriesArrView.isAutoExpandNeeded = true; TypeView.appendEntryElIntoFragment( - this._createEntryEl({key: `[[Entries]]`, el: entriesArrView.el, withoutKey: false}), + new EntryView({key: `[[Entries]]`, entryEl: entriesArrView.el, withoutKey: false}).el, fragment ); } diff --git a/src/object/promise-view.js b/src/object/promise-view.js index ce1a73c..b35072d 100644 --- a/src/object/promise-view.js +++ b/src/object/promise-view.js @@ -1,4 +1,5 @@ import TypeView from '../type-view'; +import EntryView from '../entry-view'; import ObjectView from './object-view'; import {Mode, PromiseStatus} from '../enums'; @@ -37,27 +38,27 @@ export default class PromiseView extends ObjectView { const mode = inHead ? Mode.PREVIEW : Mode.PROP; if (inHead) { TypeView.prependEntryElIntoFragment( - this._createEntryEl({ + new EntryView({ key: `<${this._promiseStatus}>`, - el: this._console.createTypedView(this._promiseValue, mode, this.nextNestingLevel, this).el, + entryEl: this._console.createTypedView(this._promiseValue, mode, this.nextNestingLevel, this).el, withoutValue: this._promiseStatus === PromiseStatus.pending, isGrey: true - }), + }).el, fragment ); } else { TypeView.appendEntryElIntoFragment( - this._createEntryEl({ + new EntryView({ key: `[[PromiseStatus]]`, - el: this._console.createTypedView(this._promiseStatus, mode, this.nextNestingLevel, this).el - }), + entryEl: this._console.createTypedView(this._promiseStatus, mode, this.nextNestingLevel, this).el + }).el, fragment ); TypeView.appendEntryElIntoFragment( - this._createEntryEl({ + new EntryView({ key: `[[PromiseValue]]`, - el: this._console.createTypedView(this._promiseValue, mode, this.nextNestingLevel, this).el - }), + entryEl: this._console.createTypedView(this._promiseValue, mode, this.nextNestingLevel, this).el + }).el, fragment ); } diff --git a/src/object/string-number-view.js b/src/object/string-number-view.js index ef1ca14..3c32f35 100644 --- a/src/object/string-number-view.js +++ b/src/object/string-number-view.js @@ -1,4 +1,5 @@ import TypeView from '../type-view'; +import EntryView from '../entry-view'; import ObjectView from './object-view'; import {Mode} from '../enums'; @@ -30,15 +31,15 @@ export default class StringNumberView extends ObjectView { const insertFn = inHead ? TypeView.prependEntryElIntoFragment : TypeView.appendEntryElIntoFragment; const mode = inHead ? Mode.PREVIEW : Mode.PROP; if (this._console.checkInstanceOf(obj, `String`)) { - const el = this._console.createTypedView(this._value.toString(), mode, this.nextNestingLevel, this).el; + const entryEl = this._console.createTypedView(this._value.toString(), mode, this.nextNestingLevel, this).el; insertFn( - this._createEntryEl({key: `[[PrimitiveValue]]`, el, withoutKey: inHead}), + new EntryView({key: `[[PrimitiveValue]]`, entryEl, withoutKey: inHead}).el, fragment ); } else if (this._console.checkInstanceOf(obj, `Number`)) { - const el = this._console.createTypedView(this._value * 1, mode, this.nextNestingLevel, this).el; + const entryEl = this._console.createTypedView(this._value * 1, mode, this.nextNestingLevel, this).el; insertFn( - this._createEntryEl({key: `[[PrimitiveValue]]`, el, withoutKey: inHead}), + new EntryView({key: `[[PrimitiveValue]]`, entryEl, withoutKey: inHead}).el, fragment ); } diff --git a/src/type-view.js b/src/type-view.js index c166306..cf5ece2 100644 --- a/src/type-view.js +++ b/src/type-view.js @@ -1,6 +1,7 @@ /* eslint no-empty: "off"*/ /* eslint no-unused-vars: "off"*/ import AbstractView from './abstract-view'; +import EntryView from './entry-view'; import {getElement, escapeHTML} from './utils'; import {Mode, Env} from './enums'; @@ -517,14 +518,14 @@ export default class TypeView extends AbstractView { if (descriptor.get !== void 0) { const getterEl = this._console.createTypedView(descriptor.get, mode, this.nextNestingLevel, this, key).el; TypeView.appendEntryElIntoFragment( - this._createEntryEl({key: `get ${key}`, el: getterEl, mode, isGrey: true}), + new EntryView({key: `get ${key}`, entryEl: getterEl, mode, isGrey: true}), fragment ); } if (descriptor.set !== void 0) { const setterEl = this._console.createTypedView(descriptor.set, mode, this.nextNestingLevel, this, key).el; TypeView.appendEntryElIntoFragment( - this._createEntryEl({key: `set ${key}`, el: setterEl, mode, isGrey: true}), + new EntryView({key: `set ${key}`, entryEl: setterEl, mode, isGrey: true}), fragment ); } @@ -532,50 +533,6 @@ export default class TypeView extends AbstractView { return fragment; } - /** - * Create entry element - * @protected - * @param {{}} params - * @param {string} params.key — key, index of array or field name - * @param {HTMLSpanElement|undefined} params.el — HTML span element to append into container - * @param {Mode} params.mode — log mode - * @param {boolean} [params.withoutKey] — create entry without key element - * @param {function} [params.getViewEl] — function to get element if so wasn't present while calling this method - * @return {HTMLSpanElement} - */ - _createEntryEl({key, el, mode, withoutKey, withoutValue, getViewEl, isGrey}) { - const entryEl = getElement(`\ -
\ -${withoutKey ? `` : `${escapeHTML(key.toString())}`}${withoutValue ? `` : `
`}\ -
`); - if (withoutValue) { - return entryEl; - } - const valueContEl = entryEl.querySelector(`.entry-container__value-container`); - - if (el) { - valueContEl.appendChild(el); - } else { - valueContEl.textContent = `(...)`; - valueContEl.classList.add(`entry-container__value-container--underscore`); - const insertEl = () => { - valueContEl.textContent = ``; - valueContEl.classList.remove(`entry-container__value-container--underscore`); - let viewEl; - try { - viewEl = getViewEl(); - valueContEl.appendChild(viewEl); - } catch (err) { - valueContEl.textContent = `[Exception: ${err.stack}]`; - } - valueContEl.removeEventListener(`click`, insertEl); - }; - valueContEl.addEventListener(`click`, insertEl); - } - - return entryEl; - } - /** * Create typed entry element * @protected @@ -607,10 +564,10 @@ ${withoutKey ? `` : ` { return /{\s*\[native code\]\s*}/g.test(fn); @@ -29,45 +29,12 @@ const getFirstProtoContainingObject = (typeView) => { return typeView.value; }; -export default class TypeView extends AbstractView { - constructor(params, cons) { - super(); - if (params.parentView) { - this._parentView = params.parentView; - this.rootView = params.parentView.rootView; - } - /** @abstract must be overriden */ - this._viewTypeParams = void 0; - this._console = cons; - this._value = params.val; - this._mode = params.mode; - this._type = params.type; - this._propKey = params.propKey; - this._currentDepth = typeof params.depth === `number` ? params.depth : 1; - - this._cache = {}; - } +const getStateDescriptorsKey = Symbol(GET_STATE_DESCRIPTORS_KEY_NAME); - /** - * @abstract - * @protected - */ - _afterRender() {} - - _bind() { - if (!this.viewType) { - throw new Error(`this.viewType must be specified`); - } - if (!this.rootView) { - throw new Error(`this.rootView must be specified`); - } - - this._headEl = this.el.querySelector(`.head`); - this._headContentEl = this.el.querySelector(`.head__content`); - this._infoEl = this.el.querySelector(`.info`); - this._contentEl = this.el.querySelector(`.item__content`); - - this._afterRender(); +export default class TypeView extends BaseView { + constructor(params, cons) { + super(params, cons); + this._stateDescriptorsQueue.push(this[getStateDescriptorsKey]()); } get protoConstructorName() { @@ -105,39 +72,10 @@ export default class TypeView extends AbstractView { return this._parentView; } - /** - * Current state - * @type {{}} - * @param {{}} params — object with values which will be assigned throught setters - */ - get _state() { - if (!this._viewState) { - this._viewState = {}; - Object.defineProperties( - this._viewState, - Object.getOwnPropertyDescriptors(this._getStateCommonDescriptors()) - ); - Object.defineProperties( - this._viewState, - Object.getOwnPropertyDescriptors(this._getStateDescriptors()) - ); - Object.seal(this._viewState); - } - return this._viewState; - } - - /** - * @abstract - * @return {{}} if not overriden return object without descriptors - */ - _getStateDescriptors() { - return {}; - } - /** * @return {{}} — object that contains descriptors only */ - _getStateCommonDescriptors() { + [getStateDescriptorsKey]() { const self = this; return { set isShowInfo(bool) { @@ -476,7 +414,6 @@ export default class TypeView extends AbstractView { get isChangeHeaderOnExpandNeeded() { const typeParams = this._viewTypeParams; - } get info() { From 5fe00b8b13897ed84e10503a23a7224380e6e194 Mon Sep 17 00:00:00 2001 From: nikolayemrikh Date: Mon, 25 Feb 2019 18:21:53 +0300 Subject: [PATCH 03/14] =?UTF-8?q?=D0=A4=D0=B8=D0=BA=D1=81=D0=B8=D1=82=20?= =?UTF-8?q?=D0=B1=D0=B0=D0=B3=20=D1=81=20=D0=B8=D0=BD=D1=82=D0=B5=D0=BD?= =?UTF-8?q?=D0=B4=D0=B0=D1=86=D0=B8=D0=B5=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/entry-view.js | 11 ++++++----- src/node/node-view.js | 9 +++++++++ 2 files changed, 15 insertions(+), 5 deletions(-) create mode 100644 src/node/node-view.js diff --git a/src/entry-view.js b/src/entry-view.js index 6d646cc..f13bec4 100644 --- a/src/entry-view.js +++ b/src/entry-view.js @@ -12,12 +12,13 @@ export default class EntryView extends AbstractView { this._getViewEl = getViewEl; this._isGrey = isGrey; } + get template() { - return `\ -
\ - ${this._withoutKey ? `` : `${escapeHTML(this._key.toString())}`}\ - ${this._withoutValue ? `` : `
${this._entryEl ? `` : `(...)`}
`}\ -
`; + return `
${this._withoutKey ? `` : + `${escapeHTML(this._key.toString())}` + }${this._withoutValue ? `` : + `
${this._entryEl ? `` : `(...)`}
` + }
`; } _bind() { diff --git a/src/node/node-view.js b/src/node/node-view.js new file mode 100644 index 0000000..4b42d67 --- /dev/null +++ b/src/node/node-view.js @@ -0,0 +1,9 @@ +import BaseView from '../base-view'; + +export default class NodeView extends BaseView { + constructor(params, cons) { + super(params, cons); + } + + +} From 0775eefd790800d038e571c1034a7e43f1c00a3b Mon Sep 17 00:00:00 2001 From: nikolayemrikh Date: Tue, 26 Feb 2019 14:43:12 +0300 Subject: [PATCH 04/14] =?UTF-8?q?=D0=A4=D0=B8=D0=BA=D1=81=D0=B8=D1=82=20?= =?UTF-8?q?=D0=B1=D0=B0=D0=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/entry-view.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/entry-view.js b/src/entry-view.js index f13bec4..2570038 100644 --- a/src/entry-view.js +++ b/src/entry-view.js @@ -29,6 +29,7 @@ export default class EntryView extends AbstractView { if (this._entryEl) { this._valueContEl.appendChild(this._entryEl); + return; } this._valueContEl.addEventListener(`click`, this._onClickInsertEl.bind(this), { From 39396bf1c7b397e1efcf289bab9a9fe1a912403c Mon Sep 17 00:00:00 2001 From: nikolayemrikh Date: Tue, 26 Feb 2019 21:40:37 +0300 Subject: [PATCH 05/14] =?UTF-8?q?=D0=A4=D0=B8=D0=BA=D1=81=D0=B8=D1=82=20?= =?UTF-8?q?=D0=B1=D0=B0=D0=B3=20=D1=81=20MapSetView?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/object/map-entry-view.js | 8 ++++++-- src/object/map-set-view.js | 3 ++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/object/map-entry-view.js b/src/object/map-entry-view.js index 3e276a5..56645c3 100644 --- a/src/object/map-entry-view.js +++ b/src/object/map-entry-view.js @@ -1,6 +1,8 @@ import TypeView from '../type-view'; import EntryView from '../entry-view'; -import {Mode, ViewType} from '../enums'; +import {Mode, ViewType, GET_STATE_DESCRIPTORS_KEY_NAME} from '../enums'; + +const getStateDescriptorsKey = Symbol(GET_STATE_DESCRIPTORS_KEY_NAME); export default class MapEntryView extends TypeView { constructor(params, cons) { @@ -12,6 +14,8 @@ export default class MapEntryView extends TypeView { this._pairKey = this._value[0]; this._pairValue = this._value[1]; + + this._stateDescriptorsQueue.push(this[getStateDescriptorsKey]()); } get template() { return `\ @@ -34,7 +38,7 @@ export default class MapEntryView extends TypeView { this._state.isOpened = this.isOpeningAllowed; } - _getStateDescriptors() { + [getStateDescriptorsKey]() { const self = this; return { set isHeadContentShowed(bool) { diff --git a/src/object/map-set-view.js b/src/object/map-set-view.js index 4c9e85c..6007da1 100644 --- a/src/object/map-set-view.js +++ b/src/object/map-set-view.js @@ -29,9 +29,10 @@ export default class MapSetView extends ObjectView { } const entry = entriesArr[i]; let entryEl; + if (this._console.checkInstanceOf(this._value, `Map`)) { const el = new MapEntryView({val: entry, mode, depth: this.nextNestingLevel, parentView: this, propKey: this._propKey}, this._console).el; - entryEl = new EntryView({key: i, entryEl: el, withoutKey: true}); + entryEl = new EntryView({key: i, entryEl: el, withoutKey: true}).el; } if (this._console.checkInstanceOf(this.value, `Set`)) { entryEl = this._createTypedEntryEl({obj: entriesArr, key: i, mode, withoutKey: true, notCheckDescriptors: true}); From ed76fd14396c9d373793efbb564a3d926d6c9e04 Mon Sep 17 00:00:00 2001 From: nikolayemrikh Date: Wed, 27 Feb 2019 01:39:30 +0300 Subject: [PATCH 06/14] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20NodeView?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/console.js | 5 +- src/node/node-view.js | 120 ++++++++++++++++++++++++++++++++++++++- src/object/node-view.js | 122 ++++++++++++++++++++++++++++++++++++++++ src/type-view.js | 112 +----------------------------------- 4 files changed, 247 insertions(+), 112 deletions(-) create mode 100644 src/object/node-view.js diff --git a/src/console.js b/src/console.js index 15b30a5..40dd24c 100644 --- a/src/console.js +++ b/src/console.js @@ -6,6 +6,7 @@ import StringNumberView from './object/string-number-view'; import ArrayView from './array/array-view'; import FunctionView from './function/function-view'; import PrimitiveView from './primitive/primitive-view'; +// import NodeView from './object/node-view'; import mergeParams from './utils/merge-params'; import {getElement, checkObjectisPrototype, checkEnumContainsValue} from './utils'; import {Mode, ViewType, Env} from './enums'; @@ -345,10 +346,12 @@ export default class Console { view = new ArrayView(params, this); } else if (!objectIsPrototype && (this.checkInstanceOf(val, `Map`) || this.checkInstanceOf(val, `Set`))) { view = new MapSetView(params, this); - } else if (!objectIsPrototype && val instanceof Promise) { + } else if (!objectIsPrototype && this.checkInstanceOf(val, `Promise`)) { view = new PromiseView(params, this); } else if (!objectIsPrototype && (this.checkInstanceOf(val, `String`) || this.checkInstanceOf(val, `Number`))) { view = new StringNumberView(params, this); + // } else if (!objectIsPrototype && this.checkInstanceOf(val, `Node`) && ) { + // view = new NodeView(params, this); } else { view = new ObjectView(params, this); } diff --git a/src/node/node-view.js b/src/node/node-view.js index 4b42d67..ec34640 100644 --- a/src/node/node-view.js +++ b/src/node/node-view.js @@ -1,9 +1,125 @@ -import BaseView from '../base-view'; +import {ViewType, GET_STATE_DESCRIPTORS_KEY_NAME, Mode} from '../enums'; +import TypeView from '../type-view'; -export default class NodeView extends BaseView { +const ContentType = { + PROPERTIES: `properties`, + NODES: `nodes` +}; + +const getStateDescriptorsKey = Symbol(GET_STATE_DESCRIPTORS_KEY_NAME); + +const getElementAttributesStr = (el) => Array.from(el.attributes) + .map(({name, value}) => `${name}="${value}"`).join(` `); + +const checkElementIsEmpty = (el) => !( + el.textContent.trim() || + el.children.length || + el.content +); + +export default class NodeView extends TypeView { constructor(params, cons) { super(params, cons); + this.viewType = ViewType.NODE; + this._viewTypeParams = this._console.params[this.viewType]; + if (!params.parentView) { + this.rootView = this; + } + this._contentType = this._getContentType(); + this._stateDescriptorsQueue.push(this[getStateDescriptorsKey]()); + } + + get template() { + return `\ +
+
+ +
+ +
`; + } + + _afterRender() { + if (this.headContentClassName) { + this._headContentEl.classList.add(this.headContentClassName); + } + + this._state.isShowInfo = this.isShowInfo; + this._state.isBraced = this.isShowBraces; + this._state.isHeadContentShowed = this.isShowHeadContent; + this._state.isOpeningDisabled = this.isDisableOpening; + this._state.isItalicEnabled = this.isEnableItalic; + this._state.isErrorEnabled = this.isEnableError; + this._state.isOversized = this.isEnableOversized; + + this._state.isOpened = this.isOpeningAllowed; + } + + _getHeadContent() { + let val; + switch (this._contentType) { + case ContentType.NODES: + val = this._getHeadNodesContent(this._value); + break; + case ContentType.PROPERTIES: + val = this._getHeadPropertiesContent(this._value); + break; + } + return val; } + _getHeadNodesContent(v) { + let val; + if (this._console.checkInstanceOf(v, `Element`)) { + val = `<${v.tagName.toLowerCase()} ${getElementAttributesStr(v)}>${checkElementIsEmpty(v) ? `` : `…`}<${v.tagName.toLowerCase()}>`; + } else if (this._console.checkInstanceOf(v, `DocumentFragment`)) { + val = `#document-fragment`; + } else if (this._console.checkInstanceOf(v, `Document`)) { + val = `#document`; + } else if (this._console.checkInstanceOf(v, `Text`)) { + val = v.data; + } else if (this._console.checkInstanceOf(v, `Comment`)) { + val = ``; + } else if (this._console.checkInstanceOf(v, `Attr`)) { + val = v.name; + } else { + val = `not implemented`; + } + return val; + } + + _getHeadPropertiesContent(v) { + // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName#Value + let val; + if (this._console.checkInstanceOf(v, `Element`)) { + val = v.tagName.toLowerCase(); + if (v.id) { + val += `#${v.id}`; + } + if (v.classList.length) { + val += `.` + Array.prototype.join.call(v.classList, `.`); + } + } else if (this._console.checkInstanceOf(v, `DocumentFragment`)) { + val = `#document-fragment`; + } else if (this._console.checkInstanceOf(v, `Document`)) { + val = `#document`; + } else if (this._console.checkInstanceOf(v, `Text`)) { + val = `#text`; + } else if (this._console.checkInstanceOf(v, `Comment`)) { + val = `#comment`; + } else if (this._console.checkInstanceOf(v, `Attr`)) { + val = v.name; + } else { + val = `not implemented`; + } + return val; + } + _getContentType() { + return ( + this._mode === Mode.LOG || + this._mode === Mode.LOG_HTML || + this._mode === Mode.ERROR + ) ? ContentType.NODES : ContentType.PROPERTIES; + } } diff --git a/src/object/node-view.js b/src/object/node-view.js new file mode 100644 index 0000000..19bb57a --- /dev/null +++ b/src/object/node-view.js @@ -0,0 +1,122 @@ +import TypeView from '../type-view'; +import EntryView from '../entry-view'; +import ObjectView from './object-view'; +import {Mode} from '../enums'; +import {getElement} from './utils'; + +const ContentType = { + PROPERTIES: `properties`, + NODES: `nodes` +}; + +export default class NodeView extends ObjectView { + constructor(params, cons) { + super(params, cons); + } + + /** + * @override + */ + getHeadContent() { + // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName#Value + let val = ``; + if (this._console.checkInstanceOf(this._value, `Element`)) { + val = this._value.tagName.toLowerCase(); + if (this._value.id) { + val += `#${this._value.id}`; + } + if (this._value.classList.length) { + val += `.` + Array.prototype.join.call(this._value.classList, `.`); + } + } else if (this._console.checkInstanceOf(this._value, `DocumentFragment`)) { + val = `#document-fragment`; + } else if (this._console.checkInstanceOf(this._value, `Document`)) { + val = `#document`; + } else if (this._console.checkInstanceOf(this._value, `Text`)) { + val = `#text`; + } else if (this._console.checkInstanceOf(this._value, `Comment`)) { + val = `#comment`; + } else if (this._console.checkInstanceOf(this._value, `Attr`)) { + val = this._value.name; + } else { + val = `not implemented`; + } + return val; + } + + [getStateDescriptorsKey]() { + const self = this; + return { + set isHeadContentShowed(bool) { + if (bool && !self._headContentEl.innerHTML) { + let fragment; + if (self.contentType === ContentType.NODES) { + + } else { + const obj = self.createContent(self.value, true); + fragment = obj.fragment; + } + self._headContentEl.appendChild(fragment); + } + self._isHeadContentShowed = self.toggleHeadContentShowed(bool); + }, + get isHeadContentShowed() { + return self._isHeadContentShowed; + }, + set isContentShowed(bool) { + if (bool === self._isContentShowed) { + return; + } + self._isContentShowed = self.toggleContentShowed(bool); + if (self._isContentShowed && self._contentEl.childElementCount === 0) { + self._contentEl.appendChild(self.createNodeContent(self._value).fragment); + } + }, + get isContentShowed() { + return self._isContentShowed; + }, + set isErrorEnabled(bool) { + self._isErrorEnabled = self.toggleError(bool); + }, + get isErrorEnabled() { + return self._isErrorEnabled; + }, + set isOpened(bool) { + if (bool === self._isOpened) { + return; + } + + self._isOpened = bool; + self.toggleArrowBottom(bool); + self._state.isContentShowed = bool; + + self._state.isHeadContentShowed = self.isShowHeadContent; + self._state.isShowInfo = self.isShowInfo; + }, + get isOpened() { + return self._isOpened; + } + }; + } + + get contentType() { + if (!this._cache.contentType) { + this._cache.contentType = this._mode === Mode.LOG || + this._mode === Mode.LOG_HTML || + this._mode === Mode.ERROR ? + ContentType.NODES : ContentType.PROPERTIES; + } + return this._cache.contentType; + } + + createContent(node, inHead) { + const fragment = document.createDocumentFragment(); + + const nodes = Array.from(node.childNodes); + for (let _node of nodes) { + + } + + return {fragment, isOversized}; + } +} diff --git a/src/type-view.js b/src/type-view.js index f3dae7d..90a5835 100644 --- a/src/type-view.js +++ b/src/type-view.js @@ -34,7 +34,7 @@ const getStateDescriptorsKey = Symbol(GET_STATE_DESCRIPTORS_KEY_NAME); export default class TypeView extends BaseView { constructor(params, cons) { super(params, cons); - this._stateDescriptorsQueue.push(this[getStateDescriptorsKey]()); + // this._stateDescriptorsQueue.push(this[getStateDescriptorsKey]()); } get protoConstructorName() { @@ -72,80 +72,6 @@ export default class TypeView extends BaseView { return this._parentView; } - /** - * @return {{}} — object that contains descriptors only - */ - [getStateDescriptorsKey]() { - const self = this; - return { - set isShowInfo(bool) { - if (!self._infoEl) { - return; - } - if (bool && !self._infoEl.textContent) { - self._infoEl.textContent = self.info; - } - self._isShowInfo = self.toggleInfoShowed(bool); - }, - get isShowInfo() { - return self._isShowInfo; - }, - set isHeadContentShowed(bool) { - self.toggleHeadContentShowed(bool); - }, - set isOpeningDisabled(bool) { - if (!bool && self._mode === Mode.PREVIEW) { - throw new Error(`Enabling opening object in preview mode is forbidden`); - } - if (self._isOpeningDisabled === bool) { - return; - } - self.toggleArrowPointer(!bool); - self._addOrRemoveHeadClickHandler(!bool); - self._isOpeningDisabled = bool; - }, - get isOpeningDisabled() { - return self._isOpeningDisabled; - }, - set isBraced(bool) { - self.toggleHeadContentBraced(bool); - }, - set isOpened(bool) { - if (bool === self._isOpened) { - return; - } - - self._isOpened = bool; - self.toggleArrowBottom(bool); - self._state.isContentShowed = bool; - }, - get isOpened() { - return self._isOpened; - }, - set isContentShowed(bool) { - if (bool === self._isContentShowed) { - return; - } - self._isContentShowed = self.toggleContentShowed(bool); - if (self._isContentShowed && self._contentEl.childElementCount === 0) { - self._contentEl.appendChild(self.createContent(self._value, false).fragment); - } - }, - get isContentShowed() { - return self._isContentShowed; - }, - set isOversized(bool) { - self.toggleHeadContentOversized(bool); - }, - set isItalicEnabled(bool) { - self._isItalicEnabled = self.toggleItalic(bool); - }, - get isItalicEnabled() { - return self._isItalicEnabled; - } - }; - } - toggleHeadContentBraced(isEnable) { return this._headContentEl.classList.toggle(`entry-container--braced`, isEnable); } @@ -426,22 +352,6 @@ export default class TypeView extends BaseView { } } - _headClickHandler(evt) { - evt.preventDefault(); - this._state.isOpened = !this._state.isOpened; - } - - _addOrRemoveHeadClickHandler(bool) { - if (bool) { - if (!this._bindedHeadClickHandler) { - this._bindedHeadClickHandler = this._headClickHandler.bind(this); - } - this._headEl.addEventListener(`click`, this._bindedHeadClickHandler); - } else if (this._bindedHeadClickHandler) { - this._headEl.removeEventListener(`click`, this._bindedHeadClickHandler); - } - } - _createGettersEntriesFragment() { const fragment = document.createDocumentFragment(); const mode = Mode.PROP; @@ -455,14 +365,14 @@ export default class TypeView extends BaseView { if (descriptor.get !== void 0) { const getterEl = this._console.createTypedView(descriptor.get, mode, this.nextNestingLevel, this, key).el; TypeView.appendEntryElIntoFragment( - new EntryView({key: `get ${key}`, entryEl: getterEl, mode, isGrey: true}), + new EntryView({key: `get ${key}`, entryEl: getterEl, mode, isGrey: true}).el, fragment ); } if (descriptor.set !== void 0) { const setterEl = this._console.createTypedView(descriptor.set, mode, this.nextNestingLevel, this, key).el; TypeView.appendEntryElIntoFragment( - new EntryView({key: `set ${key}`, entryEl: setterEl, mode, isGrey: true}), + new EntryView({key: `set ${key}`, entryEl: setterEl, mode, isGrey: true}).el, fragment ); } @@ -531,22 +441,6 @@ export default class TypeView extends BaseView { return new EntryView({key, entryEl, mode, withoutKey, getViewEl, isGrey}).el; } - /** - * @param {HTMLElement|null} entryEl - * @param {DocumentFragment} fragment - */ - static appendEntryElIntoFragment(entryEl, fragment) { - if (entryEl !== null) { - fragment.appendChild(entryEl); - } - } - - static prependEntryElIntoFragment(entryEl, fragment) { - if (entryEl !== null) { - fragment.insertBefore(entryEl, fragment.firstElementChild); - } - } - static compareProperties(a, b) { if (a === b) { return 0; From 13537b94a77864932907ffd1c42a95a8f3074c91 Mon Sep 17 00:00:00 2001 From: nikolayemrikh Date: Thu, 28 Feb 2019 01:23:04 +0300 Subject: [PATCH 07/14] =?UTF-8?q?=D0=9F=D1=80=D0=BE=D0=BC=D0=B5=D0=B6?= =?UTF-8?q?=D1=83=D1=82=D0=BE=D1=87=D0=BD=D1=8B=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/console.js | 10 ++- src/node/node-view.js | 127 +++++++++++++++++++++++++-------- src/object/node-view.js | 122 ------------------------------- src/object/object-node-view.js | 22 ++++++ src/object/object-view.js | 33 ++++----- 5 files changed, 145 insertions(+), 169 deletions(-) delete mode 100644 src/object/node-view.js create mode 100644 src/object/object-node-view.js diff --git a/src/console.js b/src/console.js index 40dd24c..e421cf3 100644 --- a/src/console.js +++ b/src/console.js @@ -3,9 +3,11 @@ import ObjectView from './object/object-view'; import MapSetView from './object/map-set-view'; import PromiseView from './object/promise-view'; import StringNumberView from './object/string-number-view'; +import ObjectNodeView from './object/object-node-view'; import ArrayView from './array/array-view'; import FunctionView from './function/function-view'; import PrimitiveView from './primitive/primitive-view'; +import NodeView from './node/node-view'; // import NodeView from './object/node-view'; import mergeParams from './utils/merge-params'; import {getElement, checkObjectisPrototype, checkEnumContainsValue} from './utils'; @@ -350,8 +352,12 @@ export default class Console { view = new PromiseView(params, this); } else if (!objectIsPrototype && (this.checkInstanceOf(val, `String`) || this.checkInstanceOf(val, `Number`))) { view = new StringNumberView(params, this); - // } else if (!objectIsPrototype && this.checkInstanceOf(val, `Node`) && ) { - // view = new NodeView(params, this); + } else if (!objectIsPrototype && this.checkInstanceOf(val, `Node`)) { + if (mode === Mode.LOG || mode === Mode.LOG_HTML || mode === Mode.ERROR) { + view = new NodeView(params, this); + } else { + view = new ObjectNodeView(params, this); + } } else { view = new ObjectView(params, this); } diff --git a/src/node/node-view.js b/src/node/node-view.js index ec34640..48733b1 100644 --- a/src/node/node-view.js +++ b/src/node/node-view.js @@ -1,5 +1,7 @@ import {ViewType, GET_STATE_DESCRIPTORS_KEY_NAME, Mode} from '../enums'; -import TypeView from '../type-view'; +import BaseView from '../base-view'; + +const MAX_PREVIEW_CONTENT_LENGTH = 43; const ContentType = { PROPERTIES: `properties`, @@ -8,16 +10,19 @@ const ContentType = { const getStateDescriptorsKey = Symbol(GET_STATE_DESCRIPTORS_KEY_NAME); -const getElementAttributesStr = (el) => Array.from(el.attributes) - .map(({name, value}) => `${name}="${value}"`).join(` `); +const getElementAttributesStr = (el) => ( + Array.from(el.attributes) + .map(({name, value}) => `${name}="${value}"`) + .join(` `) +); const checkElementIsEmpty = (el) => !( el.textContent.trim() || - el.children.length || + el.childNodes.length || el.content ); -export default class NodeView extends TypeView { +export default class NodeView extends BaseView { constructor(params, cons) { super(params, cons); this.viewType = ViewType.NODE; @@ -33,29 +38,69 @@ export default class NodeView extends TypeView { return `\
- + \
`; } _afterRender() { - if (this.headContentClassName) { - this._headContentEl.classList.add(this.headContentClassName); - } + this._tagContentEl = this._headContentEl.querySelector(`.tag-pair__content`); + this._tagOpeningEl = this._headContentEl.querySelector(`.tag-pair__opening`); + this._tagClosingEl = this._headContentEl.querySelector(`.tag-pair__closing`); - this._state.isShowInfo = this.isShowInfo; - this._state.isBraced = this.isShowBraces; - this._state.isHeadContentShowed = this.isShowHeadContent; - this._state.isOpeningDisabled = this.isDisableOpening; - this._state.isItalicEnabled = this.isEnableItalic; - this._state.isErrorEnabled = this.isEnableError; - this._state.isOversized = this.isEnableOversized; + this._state.isHeadContentShowed = true; + this._state.isOpeningDisabled = this._mode !== Mode.PREVIEW; this._state.isOpened = this.isOpeningAllowed; } - _getHeadContent() { + [getStateDescriptorsKey]() { + const self = this; + return { + set isHeadContentShowed(bool) { + if (bool && !self._headContentEl.innerHTML) { + self._tagContentEl.innerHTML = + self._tagOpeningEl.innerHTML = + self._tagClosingEl.innerHTML = + } + self._isHeadContentShowed = self.toggleHeadContentShowed(bool); + }, + get isHeadContentShowed() { + return self._isHeadContentShowed; + }, + set isErrorEnabled(bool) { + self._isErrorEnabled = self.toggleError(bool); + }, + get isErrorEnabled() { + return self._isErrorEnabled; + }, + set isOpened(bool) { + if (bool === self._isOpened) { + return; + } + + self._isOpened = bool; + self.toggleArrowBottom(bool); + self._state.isContentShowed = bool; + + self._state.isHeadContentShowed = self.isShowHeadContent; + self._state.isShowInfo = self.isShowInfo; + }, + get isOpened() { + return self._isOpened; + } + }; + } + + /** + * Возвращает строку контента ноды. Если это Элемент — первый, открывающий, тег. + * @param {ContentType} type + * @return {string} + */ + _getMainHeadContent(type) { let val; switch (this._contentType) { case ContentType.NODES: @@ -71,7 +116,7 @@ export default class NodeView extends TypeView { _getHeadNodesContent(v) { let val; if (this._console.checkInstanceOf(v, `Element`)) { - val = `<${v.tagName.toLowerCase()} ${getElementAttributesStr(v)}>${checkElementIsEmpty(v) ? `` : `…`}<${v.tagName.toLowerCase()}>`; + val = `<${v.tagName.toLowerCase()} ${getElementAttributesStr(v)}>`; } else if (this._console.checkInstanceOf(v, `DocumentFragment`)) { val = `#document-fragment`; } else if (this._console.checkInstanceOf(v, `Document`)) { @@ -99,18 +144,33 @@ export default class NodeView extends TypeView { if (v.classList.length) { val += `.` + Array.prototype.join.call(v.classList, `.`); } - } else if (this._console.checkInstanceOf(v, `DocumentFragment`)) { - val = `#document-fragment`; - } else if (this._console.checkInstanceOf(v, `Document`)) { - val = `#document`; - } else if (this._console.checkInstanceOf(v, `Text`)) { - val = `#text`; - } else if (this._console.checkInstanceOf(v, `Comment`)) { - val = `#comment`; - } else if (this._console.checkInstanceOf(v, `Attr`)) { - val = v.name; } else { - val = `not implemented`; + val = v.nodeName; + } + return val; + } + + /** + * Возвращает остальную строку контента ноды. + * Если это элемент — текст после открывающего тега (если там он есть) и закрывающий тег + * Если не элемент — пустую строку + * @param {ContentType} type + * @return {string} + */ + _getOtherHeadContent() { + let val = ``; + if (this._contentType === ContentType.NODES && this._console.checkInstanceOf(this._value, `Element`)) { + let content = ``; + if (!checkElementIsEmpty(v) && !this._console.checkInstanceOf(this._value, `HTMLTemplateElement`)) { + if (v.innerHTML.length > MAX_PREVIEW_CONTENT_LENGTH) { + content = `…` + } else { + content = v.innerHTML; + } + } + + + val = `${!checkElementIsEmpty(v) || this._value.innerHTML.length > MAX_PREVIEW_CONTENT_LENGTH ? `…` : ``}<${v.tagName.toLowerCase()}>` } return val; } @@ -122,4 +182,13 @@ export default class NodeView extends TypeView { this._mode === Mode.ERROR ) ? ContentType.NODES : ContentType.PROPERTIES; } + + createContent(obj, inHead) { + const fragment = document.createDocumentFragment(); + + const mode = inHead ? Mode.PREVIEW : Mode.PROP; + + const keyEl = this._console.createTypedView(this._pairKey, this._mode, this.nextNestingLevel, this, this._propKey).el; + return {fragment, isOversized}; + } } diff --git a/src/object/node-view.js b/src/object/node-view.js deleted file mode 100644 index 19bb57a..0000000 --- a/src/object/node-view.js +++ /dev/null @@ -1,122 +0,0 @@ -import TypeView from '../type-view'; -import EntryView from '../entry-view'; -import ObjectView from './object-view'; -import {Mode} from '../enums'; -import {getElement} from './utils'; - -const ContentType = { - PROPERTIES: `properties`, - NODES: `nodes` -}; - -export default class NodeView extends ObjectView { - constructor(params, cons) { - super(params, cons); - } - - /** - * @override - */ - getHeadContent() { - // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName#Value - let val = ``; - if (this._console.checkInstanceOf(this._value, `Element`)) { - val = this._value.tagName.toLowerCase(); - if (this._value.id) { - val += `#${this._value.id}`; - } - if (this._value.classList.length) { - val += `.` + Array.prototype.join.call(this._value.classList, `.`); - } - } else if (this._console.checkInstanceOf(this._value, `DocumentFragment`)) { - val = `#document-fragment`; - } else if (this._console.checkInstanceOf(this._value, `Document`)) { - val = `#document`; - } else if (this._console.checkInstanceOf(this._value, `Text`)) { - val = `#text`; - } else if (this._console.checkInstanceOf(this._value, `Comment`)) { - val = `#comment`; - } else if (this._console.checkInstanceOf(this._value, `Attr`)) { - val = this._value.name; - } else { - val = `not implemented`; - } - return val; - } - - [getStateDescriptorsKey]() { - const self = this; - return { - set isHeadContentShowed(bool) { - if (bool && !self._headContentEl.innerHTML) { - let fragment; - if (self.contentType === ContentType.NODES) { - - } else { - const obj = self.createContent(self.value, true); - fragment = obj.fragment; - } - self._headContentEl.appendChild(fragment); - } - self._isHeadContentShowed = self.toggleHeadContentShowed(bool); - }, - get isHeadContentShowed() { - return self._isHeadContentShowed; - }, - set isContentShowed(bool) { - if (bool === self._isContentShowed) { - return; - } - self._isContentShowed = self.toggleContentShowed(bool); - if (self._isContentShowed && self._contentEl.childElementCount === 0) { - self._contentEl.appendChild(self.createNodeContent(self._value).fragment); - } - }, - get isContentShowed() { - return self._isContentShowed; - }, - set isErrorEnabled(bool) { - self._isErrorEnabled = self.toggleError(bool); - }, - get isErrorEnabled() { - return self._isErrorEnabled; - }, - set isOpened(bool) { - if (bool === self._isOpened) { - return; - } - - self._isOpened = bool; - self.toggleArrowBottom(bool); - self._state.isContentShowed = bool; - - self._state.isHeadContentShowed = self.isShowHeadContent; - self._state.isShowInfo = self.isShowInfo; - }, - get isOpened() { - return self._isOpened; - } - }; - } - - get contentType() { - if (!this._cache.contentType) { - this._cache.contentType = this._mode === Mode.LOG || - this._mode === Mode.LOG_HTML || - this._mode === Mode.ERROR ? - ContentType.NODES : ContentType.PROPERTIES; - } - return this._cache.contentType; - } - - createContent(node, inHead) { - const fragment = document.createDocumentFragment(); - - const nodes = Array.from(node.childNodes); - for (let _node of nodes) { - - } - - return {fragment, isOversized}; - } -} diff --git a/src/object/object-node-view.js b/src/object/object-node-view.js new file mode 100644 index 0000000..046a99e --- /dev/null +++ b/src/object/object-node-view.js @@ -0,0 +1,22 @@ +import ObjectView from './object-view'; +import {Mode} from '../enums'; +import NodeView from '../node/node-view'; + +export default class ObjectNodeView extends ObjectView { + constructor(params, cons) { + super(params, cons); + } + + createContent(obj, inHead) { + if (inHead) { + const nodeView = new NodeView({val: this._value, mode: Mode.PREVIEW, depth: this.nextNestingLevel, parentView: this, propKey: this._propKey}, this._console); + + const fragment = document.createDocumentFragment(); + fragment.appendChild(nodeView.el); + return {fragment}; + } else { + const objContent = ObjectView.prototype.createContent.apply(this, [obj, inHead]); + return objContent; + } + } +} diff --git a/src/object/object-view.js b/src/object/object-view.js index d330c99..511cdb7 100644 --- a/src/object/object-view.js +++ b/src/object/object-view.js @@ -1,6 +1,7 @@ /* eslint guard-for-in: "off"*/ /* eslint no-empty: "off"*/ import TypeView from '../type-view'; +import NodeView from '../node/node-view'; import {Mode, ViewType, GET_STATE_DESCRIPTORS_KEY_NAME} from '../enums'; import {checkObjectisPrototype} from '../utils'; @@ -215,7 +216,6 @@ export default class ObjectView extends TypeView { return this.el.classList.toggle(`error`, isEnable); } - get headContentClassName() { if (this._console.checkInstanceOf(this._value, `RegExp`) && this._mode !== Mode.DIR) { return `c-regexp`; @@ -229,23 +229,24 @@ export default class ObjectView extends TypeView { this.protoConstructorName === `Object`) { return `…`; } - if (!Object.prototype.hasOwnProperty.call(this._value, `constructor`)) { + if (!checkObjectisPrototype(this._value)) { // Что пишем, если у нас элемент, отнаследованный от Node // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName#Value - if (this._console.checkInstanceOf(this._value, `Node`)) { - if (this._console.checkInstanceOf(this._value, `HTMLElement`)) { - let str = this._value.tagName.toLowerCase(); - if (this._value.id) { - str += `#${this._value.id}`; - } - if (this._value.classList.length) { - str += `.` + Array.prototype.join.call(this._value.classList, `.`); - } - return str; - } else { - return this._value.nodeName; - } - } else if (this._console.checkInstanceOf(this._value, `Error`)) { + // if (this._console.checkInstanceOf(this._value, `Node`)) { + // if (this._console.checkInstanceOf(this._value, `HTMLElement`)) { + // let str = this._value.tagName.toLowerCase(); + // if (this._value.id) { + // str += `#${this._value.id}`; + // } + // if (this._value.classList.length) { + // str += `.` + Array.prototype.join.call(this._value.classList, `.`); + // } + // return str; + // } else { + // return this._value.nodeName; + // } + // } else + if (this._console.checkInstanceOf(this._value, `Error`)) { let str = this._value.name; if (this._value.message) { str += `: ${this._value.message}`; From 1ee2be8e7169f0f82f4a3e261ab077e32682c39d Mon Sep 17 00:00:00 2001 From: nikolayemrikh Date: Thu, 28 Feb 2019 02:22:29 +0300 Subject: [PATCH 08/14] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D1=85=D0=B5=D0=B4=D0=B5=D1=80=20=D0=B4?= =?UTF-8?q?=D0=BB=D1=8F=20Node?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/node/node-view.js | 70 ++++++++++++++++++++----------------------- 1 file changed, 33 insertions(+), 37 deletions(-) diff --git a/src/node/node-view.js b/src/node/node-view.js index 48733b1..6cf0792 100644 --- a/src/node/node-view.js +++ b/src/node/node-view.js @@ -1,5 +1,8 @@ import {ViewType, GET_STATE_DESCRIPTORS_KEY_NAME, Mode} from '../enums'; import BaseView from '../base-view'; +import {escapeHTML} from '../utils'; + +const elsWithoutEndTag = [`input`, `br`, `hr`, `img`, `base`, `link`, `meta`, `wbr`, `source`, `embed`, `param`, `track`, `area`, `col`]; const MAX_PREVIEW_CONTENT_LENGTH = 43; @@ -38,9 +41,7 @@ export default class NodeView extends BaseView { return `\
- \ + \
`; @@ -48,8 +49,7 @@ export default class NodeView extends BaseView { _afterRender() { this._tagContentEl = this._headContentEl.querySelector(`.tag-pair__content`); - this._tagOpeningEl = this._headContentEl.querySelector(`.tag-pair__opening`); - this._tagClosingEl = this._headContentEl.querySelector(`.tag-pair__closing`); + this._tagRestContentEl = this._headContentEl.querySelector(`.tag-pair__rest`); this._state.isHeadContentShowed = true; this._state.isOpeningDisabled = this._mode !== Mode.PREVIEW; @@ -60,16 +60,8 @@ export default class NodeView extends BaseView { [getStateDescriptorsKey]() { const self = this; return { - set isHeadContentShowed(bool) { - if (bool && !self._headContentEl.innerHTML) { - self._tagContentEl.innerHTML = - self._tagOpeningEl.innerHTML = - self._tagClosingEl.innerHTML = - } - self._isHeadContentShowed = self.toggleHeadContentShowed(bool); - }, - get isHeadContentShowed() { - return self._isHeadContentShowed; + set isShowRestHeadContent(bool) { + self._tagRestContentEl.classList.toggle(`hidden`, bool); }, set isErrorEnabled(bool) { self._isErrorEnabled = self.toggleError(bool); @@ -85,9 +77,7 @@ export default class NodeView extends BaseView { self._isOpened = bool; self.toggleArrowBottom(bool); self._state.isContentShowed = bool; - - self._state.isHeadContentShowed = self.isShowHeadContent; - self._state.isShowInfo = self.isShowInfo; + self._state.isShowRestHeadContent = bool; }, get isOpened() { return self._isOpened; @@ -97,10 +87,9 @@ export default class NodeView extends BaseView { /** * Возвращает строку контента ноды. Если это Элемент — первый, открывающий, тег. - * @param {ContentType} type * @return {string} */ - _getMainHeadContent(type) { + _getMainHeadContent() { let val; switch (this._contentType) { case ContentType.NODES: @@ -116,17 +105,20 @@ export default class NodeView extends BaseView { _getHeadNodesContent(v) { let val; if (this._console.checkInstanceOf(v, `Element`)) { - val = `<${v.tagName.toLowerCase()} ${getElementAttributesStr(v)}>`; + const attrs = getElementAttributesStr(v); + val = `<${v.tagName.toLowerCase()}${attrs ? ` ${attrs}` : ``}>`; + } else if (this._console.checkInstanceOf(v, `Text`)) { + val = v.data; } else if (this._console.checkInstanceOf(v, `DocumentFragment`)) { val = `#document-fragment`; } else if (this._console.checkInstanceOf(v, `Document`)) { val = `#document`; - } else if (this._console.checkInstanceOf(v, `Text`)) { - val = v.data; } else if (this._console.checkInstanceOf(v, `Comment`)) { - val = ``; + val = ``; } else if (this._console.checkInstanceOf(v, `Attr`)) { val = v.name; + } else if (this._console.checkInstanceOf(v, `DocumentType`)) { + val = ``; } else { val = `not implemented`; } @@ -157,22 +149,26 @@ export default class NodeView extends BaseView { * @param {ContentType} type * @return {string} */ - _getOtherHeadContent() { - let val = ``; - if (this._contentType === ContentType.NODES && this._console.checkInstanceOf(this._value, `Element`)) { - let content = ``; - if (!checkElementIsEmpty(v) && !this._console.checkInstanceOf(this._value, `HTMLTemplateElement`)) { - if (v.innerHTML.length > MAX_PREVIEW_CONTENT_LENGTH) { - content = `…` - } else { - content = v.innerHTML; - } - } + _getRestHeadContent() { + if (!this._console.checkInstanceOf(this._value, `Element`)) { + return ``; + } + let content = ``; + if (!checkElementIsEmpty(this._value) && !this._console.checkInstanceOf(this._value, `HTMLTemplateElement`)) { + if (this._value.innerHTML.length > MAX_PREVIEW_CONTENT_LENGTH) { + content = `…`; + } else { + content = this._value.innerHTML; + } + } - val = `${!checkElementIsEmpty(v) || this._value.innerHTML.length > MAX_PREVIEW_CONTENT_LENGTH ? `…` : ``}<${v.tagName.toLowerCase()}>` + let closingTag = ``; + const tagNameLower = this._value.tagName.toLowerCase(); + if (content || !elsWithoutEndTag.includes(tagNameLower)) { + closingTag = `\`; } - return val; + return `${content}${closingTag}`; } _getContentType() { From b4f77354fcb75361502a407927de878c53483222 Mon Sep 17 00:00:00 2001 From: nikolayemrikh Date: Thu, 28 Feb 2019 22:58:56 +0300 Subject: [PATCH 09/14] =?UTF-8?q?=D0=9F=D1=80=D0=B0=D0=B2=D0=B8=D1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base-view.js | 1 + src/console.js | 3 +- src/node/node-view.js | 86 ++++++++++++++++++++++++++++--------------- 3 files changed, 60 insertions(+), 30 deletions(-) diff --git a/src/base-view.js b/src/base-view.js index b1e4209..86a1bec 100644 --- a/src/base-view.js +++ b/src/base-view.js @@ -131,6 +131,7 @@ export default class BaseView extends AbstractView { if (self._isOpeningDisabled === bool) { return; } + self.toggleArrowPointer(!bool); self._addOrRemoveHeadClickHandler(!bool); self._isOpeningDisabled = bool; diff --git a/src/console.js b/src/console.js index e421cf3..f6d0a6c 100644 --- a/src/console.js +++ b/src/console.js @@ -55,7 +55,8 @@ export default class Console { this.params = { object: this._parseViewParams(ViewType.OBJECT, mergeParams([{}, mergedParams.common, mergedParams.object])), array: this._parseViewParams(ViewType.ARRAY, mergeParams([{}, mergedParams.common, mergedParams.array])), - function: this._parseViewParams(ViewType.FUNCTION, mergeParams([{}, mergedParams.common, mergedParams.function])) + function: this._parseViewParams(ViewType.FUNCTION, mergeParams([{}, mergedParams.common, mergedParams.function])), + node: this._parseViewParams(ViewType.NODE, mergeParams([{}, mergedParams.common, mergedParams.node])) }; Object.assign(this.params, this._parseConsoleParams(mergedParams)); } diff --git a/src/node/node-view.js b/src/node/node-view.js index 6cf0792..ca6b7ca 100644 --- a/src/node/node-view.js +++ b/src/node/node-view.js @@ -34,6 +34,7 @@ export default class NodeView extends BaseView { this.rootView = this; } this._contentType = this._getContentType(); + this._stateDescriptorsQueue.push(this[getStateDescriptorsKey]()); } @@ -41,7 +42,7 @@ export default class NodeView extends BaseView { return `\
- \ + \
`; @@ -52,7 +53,8 @@ export default class NodeView extends BaseView { this._tagRestContentEl = this._headContentEl.querySelector(`.tag-pair__rest`); this._state.isHeadContentShowed = true; - this._state.isOpeningDisabled = this._mode !== Mode.PREVIEW; + this._state.isRestHeadContentShowed = this.isShowRestHeadContent; + this._state.isOpeningDisabled = this.isDisableOpening; this._state.isOpened = this.isOpeningAllowed; } @@ -60,8 +62,11 @@ export default class NodeView extends BaseView { [getStateDescriptorsKey]() { const self = this; return { - set isShowRestHeadContent(bool) { - self._tagRestContentEl.classList.toggle(`hidden`, bool); + set isRestHeadContentShowed(bool) { + self._isRestHeadContentShowed = !self._tagRestContentEl.classList.toggle(`hidden`, !bool); + }, + get isRestHeadContentShowed() { + return self._isRestHeadContentShowed; }, set isErrorEnabled(bool) { self._isErrorEnabled = self.toggleError(bool); @@ -77,7 +82,7 @@ export default class NodeView extends BaseView { self._isOpened = bool; self.toggleArrowBottom(bool); self._state.isContentShowed = bool; - self._state.isShowRestHeadContent = bool; + self._state.isRestHeadContentShowed = self.isShowRestHeadContent; }, get isOpened() { return self._isOpened; @@ -85,6 +90,27 @@ export default class NodeView extends BaseView { }; } + get isShowRestHeadContent() { + return this._contentType === ContentType.NODES && !this._state.isOpened; + } + + get isDisableOpening() { + if (!(this._mode === Mode.LOG || this._mode === Mode.LOG_HTML || this._mode === Mode.ERROR || this._mode === Mode.PREVIEW)) { + throw new Error(`NodeView must be created with mode LOG, LOG_HTML, ERROR or PREVIEW`); + } + + if (this._mode === Mode.PREVIEW) { + return true; + } + + const nt = this._value.nodeType; + if (nt === Node.ELEMENT_NODE || nt === Node.DOCUMENT_NODE || nt === Node.DOCUMENT_FRAGMENT_NODE || nt === Node.DOCUMENT_TYPE_NODE) { + return false; + } + + return true; + } + /** * Возвращает строку контента ноды. Если это Элемент — первый, открывающий, тег. * @return {string} @@ -104,20 +130,20 @@ export default class NodeView extends BaseView { _getHeadNodesContent(v) { let val; - if (this._console.checkInstanceOf(v, `Element`)) { + if (v.nodeType === Node.ELEMENT_NODE) { const attrs = getElementAttributesStr(v); val = `<${v.tagName.toLowerCase()}${attrs ? ` ${attrs}` : ``}>`; - } else if (this._console.checkInstanceOf(v, `Text`)) { + } else if (v.nodeType === Node.TEXT_NODE) { val = v.data; - } else if (this._console.checkInstanceOf(v, `DocumentFragment`)) { + } else if (v.nodeType === Node.DOCUMENT_FRAGMENT_NODE) { val = `#document-fragment`; - } else if (this._console.checkInstanceOf(v, `Document`)) { + } else if (v.nodeType === Node.DOCUMENT_NODE) { val = `#document`; - } else if (this._console.checkInstanceOf(v, `Comment`)) { + } else if (v.nodeType === Node.COMMENT_NODE) { val = ``; - } else if (this._console.checkInstanceOf(v, `Attr`)) { + } else if (v.nodeType === Node.ATTRIBUTE_NODE) { val = v.name; - } else if (this._console.checkInstanceOf(v, `DocumentType`)) { + } else if (v.nodeType === Node.DOCUMENT_TYPE_NODE) { val = ``; } else { val = `not implemented`; @@ -128,7 +154,7 @@ export default class NodeView extends BaseView { _getHeadPropertiesContent(v) { // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName#Value let val; - if (this._console.checkInstanceOf(v, `Element`)) { + if (v.nodeType === Node.ELEMENT_NODE) { val = v.tagName.toLowerCase(); if (v.id) { val += `#${v.id}`; @@ -150,25 +176,27 @@ export default class NodeView extends BaseView { * @return {string} */ _getRestHeadContent() { - if (!this._console.checkInstanceOf(this._value, `Element`)) { - return ``; - } - - let content = ``; - if (!checkElementIsEmpty(this._value) && !this._console.checkInstanceOf(this._value, `HTMLTemplateElement`)) { - if (this._value.innerHTML.length > MAX_PREVIEW_CONTENT_LENGTH) { - content = `…`; - } else { - content = this._value.innerHTML; + if (this._value.nodeType === Node.ELEMENT_NODE) { + let content = ``; + if (!checkElementIsEmpty(this._value) && !this._console.checkInstanceOf(this._value, `HTMLTemplateElement`)) { + if (this._value.innerHTML.length > MAX_PREVIEW_CONTENT_LENGTH) { + content = `…`; + } else { + content = this._value.innerHTML; + } } - } - let closingTag = ``; - const tagNameLower = this._value.tagName.toLowerCase(); - if (content || !elsWithoutEndTag.includes(tagNameLower)) { - closingTag = `\`; + let closingTag = ``; + const tagNameLower = this._value.tagName.toLowerCase(); + if (content || !elsWithoutEndTag.includes(tagNameLower)) { + closingTag = ``; + } + return `${content}${closingTag}`; + } else if (this._value.nodeType === Node.ATTRIBUTE_NODE) { + const attrValue = this._value.value; + return attrValue ? `="${attrValue}"` : ``; } - return `${content}${closingTag}`; + return ``; } _getContentType() { From ef22393fdb7cd8d4e0ab9ad07acdc0b256eacb0d Mon Sep 17 00:00:00 2001 From: nikolayemrikh Date: Fri, 1 Mar 2019 02:53:43 +0300 Subject: [PATCH 10/14] =?UTF-8?q?=D0=9A=D0=BE=D0=BD=D1=81=D0=BE=D0=BB?= =?UTF-8?q?=D1=8C=20=D0=BD=D0=B0=D1=83=D1=87=D0=B8=D0=BB=D0=B0=D1=81=D1=8C?= =?UTF-8?q?=20=D0=B2=D1=8B=D0=B2=D0=BE=D0=B4=D0=B8=D1=82=D1=8C=20html=20?= =?UTF-8?q?=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sass/console-blocks/c-html.scss | 31 +++++++++ sass/console-blocks/console.scss | 2 +- sass/style.scss | 1 + src/base-view.js | 8 +-- src/console.js | 1 + src/node/node-view.js | 114 +++++++++++++++++++------------ src/type-view.js | 1 + 7 files changed, 105 insertions(+), 53 deletions(-) create mode 100644 sass/console-blocks/c-html.scss diff --git a/sass/console-blocks/c-html.scss b/sass/console-blocks/c-html.scss new file mode 100644 index 0000000..3ee2b8a --- /dev/null +++ b/sass/console-blocks/c-html.scss @@ -0,0 +1,31 @@ +.c-html { + &__tag { + color: #a894a6; + } + + &__tag-name { + color: #881280; + } + + &__attr-name { + color: #994500; + } + + &__attr-value, + &__id { + color: #1a1aa6; + } + + &__comment, + &__doctype { + color: slategray; + } + + // &__punctuation { + // color: #999999; + // } + + &__link { + color: #4855cc; + } +} diff --git a/sass/console-blocks/console.scss b/sass/console-blocks/console.scss index a84e149..ed056ba 100644 --- a/sass/console-blocks/console.scss +++ b/sass/console-blocks/console.scss @@ -1,5 +1,5 @@ .console { - font: 0.8em/normal "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", "Courier New", monospace; + font: 0.8em/normal "Menlo", "Monaco", "Consolas", "Courier New", monospace; line-height: 1.4; cursor: default; diff --git a/sass/style.scss b/sass/style.scss index 4ab696e..802b5cd 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -31,6 +31,7 @@ __elem — element @import "console-blocks/grey"; @import "console-blocks/error"; @import "console-blocks/nowrap"; +@import "console-blocks/c-html"; // Prompt blocks @import "prompt-blocks/prompt"; diff --git a/src/base-view.js b/src/base-view.js index 86a1bec..429d5b6 100644 --- a/src/base-view.js +++ b/src/base-view.js @@ -17,7 +17,6 @@ export default class BaseView extends AbstractView { this._value = params.val; this._mode = params.mode; this._type = params.type; - this._propKey = params.propKey; this._currentDepth = params.depth ? params.depth : DEFAULT_DEPTH; this._cache = {}; @@ -75,10 +74,6 @@ export default class BaseView extends AbstractView { return this._value; } - get propKey() { - return this._propKey; - } - get parentView() { return this._parentView; } @@ -244,8 +239,7 @@ export default class BaseView extends AbstractView { if (this._parentView) { if (!(this._parentView.isAutoExpandNeeded && - !rootViewTypeParams.excludeViewTypesFromAutoexpand.includes(this.viewType) && - !rootViewTypeParams.excludePropertiesFromAutoexpand.includes(this._propKey))) { + !rootViewTypeParams.excludeViewTypesFromAutoexpand.includes(this.viewType))) { return this._cache.isAutoExpandNeeded; } } diff --git a/src/console.js b/src/console.js index f6d0a6c..4f68c77 100644 --- a/src/console.js +++ b/src/console.js @@ -335,6 +335,7 @@ export default class Console { const stringTagName = stringTag.substring(8, stringTag.length - 1); const objectIsPrototype = checkObjectisPrototype(val); + if (stringTagName !== `Object` && ( Array.isArray(val) || ( !objectIsPrototype && ( diff --git a/src/node/node-view.js b/src/node/node-view.js index ca6b7ca..0ad0714 100644 --- a/src/node/node-view.js +++ b/src/node/node-view.js @@ -1,13 +1,14 @@ import {ViewType, GET_STATE_DESCRIPTORS_KEY_NAME, Mode} from '../enums'; import BaseView from '../base-view'; -import {escapeHTML} from '../utils'; +import EntryView from '../entry-view'; +import {escapeHTML, getElement} from '../utils'; -const elsWithoutEndTag = [`input`, `br`, `hr`, `img`, `base`, `link`, `meta`, `wbr`, `source`, `embed`, `param`, `track`, `area`, `col`]; +const ELS_WITHOUT_ENDING_TAG = [`input`, `br`, `hr`, `img`, `base`, `link`, `meta`, `wbr`, `source`, `embed`, `param`, `track`, `area`, `col`]; const MAX_PREVIEW_CONTENT_LENGTH = 43; const ContentType = { - PROPERTIES: `properties`, + PLAIN: `plain`, NODES: `nodes` }; @@ -15,7 +16,7 @@ const getStateDescriptorsKey = Symbol(GET_STATE_DESCRIPTORS_KEY_NAME); const getElementAttributesStr = (el) => ( Array.from(el.attributes) - .map(({name, value}) => `${name}="${value}"`) + .map(({name, value}) => `${name}="${value}"`) .join(` `) ); @@ -33,7 +34,6 @@ export default class NodeView extends BaseView { if (!params.parentView) { this.rootView = this; } - this._contentType = this._getContentType(); this._stateDescriptorsQueue.push(this[getStateDescriptorsKey]()); } @@ -42,9 +42,9 @@ export default class NodeView extends BaseView { return `\
- \ + \
- +
`; } @@ -91,24 +91,23 @@ export default class NodeView extends BaseView { } get isShowRestHeadContent() { - return this._contentType === ContentType.NODES && !this._state.isOpened; + return this._mode !== Mode.PREVIEW && !this._state.isOpened; } get isDisableOpening() { - if (!(this._mode === Mode.LOG || this._mode === Mode.LOG_HTML || this._mode === Mode.ERROR || this._mode === Mode.PREVIEW)) { - throw new Error(`NodeView must be created with mode LOG, LOG_HTML, ERROR or PREVIEW`); - } - if (this._mode === Mode.PREVIEW) { return true; } - const nt = this._value.nodeType; - if (nt === Node.ELEMENT_NODE || nt === Node.DOCUMENT_NODE || nt === Node.DOCUMENT_FRAGMENT_NODE || nt === Node.DOCUMENT_TYPE_NODE) { + if (this._mode === Mode.PROP) { return false; } - return true; + return !( + this._value.nodeType === Node.ELEMENT_NODE || + this._value.nodeType === Node.DOCUMENT_FRAGMENT_NODE || + this._value.nodeType === Node.DOCUMENT_NODE + ); } /** @@ -117,13 +116,10 @@ export default class NodeView extends BaseView { */ _getMainHeadContent() { let val; - switch (this._contentType) { - case ContentType.NODES: - val = this._getHeadNodesContent(this._value); - break; - case ContentType.PROPERTIES: - val = this._getHeadPropertiesContent(this._value); - break; + if (this._mode === Mode.PREVIEW) { + val = this._getHeadPlainContent(this._value); + } else { + val = this._getHeadNodesContent(this._value); } return val; } @@ -132,7 +128,7 @@ export default class NodeView extends BaseView { let val; if (v.nodeType === Node.ELEMENT_NODE) { const attrs = getElementAttributesStr(v); - val = `<${v.tagName.toLowerCase()}${attrs ? ` ${attrs}` : ``}>`; + val = `<${v.tagName.toLowerCase()}${attrs ? ` ${attrs}` : ``}>`; } else if (v.nodeType === Node.TEXT_NODE) { val = v.data; } else if (v.nodeType === Node.DOCUMENT_FRAGMENT_NODE) { @@ -140,30 +136,30 @@ export default class NodeView extends BaseView { } else if (v.nodeType === Node.DOCUMENT_NODE) { val = `#document`; } else if (v.nodeType === Node.COMMENT_NODE) { - val = ``; + val = `<!-- ${v.data} -->`; } else if (v.nodeType === Node.ATTRIBUTE_NODE) { - val = v.name; + val = `${v.name}`; } else if (v.nodeType === Node.DOCUMENT_TYPE_NODE) { - val = ``; + val = `<!DOCTYPE html>`; } else { val = `not implemented`; } return val; } - _getHeadPropertiesContent(v) { + _getHeadPlainContent(v) { // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName#Value let val; if (v.nodeType === Node.ELEMENT_NODE) { - val = v.tagName.toLowerCase(); + val = `${v.tagName.toLowerCase()}`; if (v.id) { - val += `#${v.id}`; + val += `#${v.id}`; } if (v.classList.length) { - val += `.` + Array.prototype.join.call(v.classList, `.`); + val += `.${Array.prototype.join.call(v.classList, `.`)}`; } } else { - val = v.nodeName; + val = `${v.nodeName}`; } return val; } @@ -186,33 +182,61 @@ export default class NodeView extends BaseView { } } - let closingTag = ``; - const tagNameLower = this._value.tagName.toLowerCase(); - if (content || !elsWithoutEndTag.includes(tagNameLower)) { - closingTag = ``; - } + let closingTag = this._getClosingTag(); return `${content}${closingTag}`; } else if (this._value.nodeType === Node.ATTRIBUTE_NODE) { const attrValue = this._value.value; - return attrValue ? `="${attrValue}"` : ``; + return attrValue ? `="${attrValue}"` : ``; + } + return ``; + } + + _getClosingTag() { + const tagNameLower = this._value.tagName.toLowerCase(); + if (!ELS_WITHOUT_ENDING_TAG.includes(tagNameLower)) { + return `</${tagNameLower}>`; } return ``; } _getContentType() { return ( - this._mode === Mode.LOG || - this._mode === Mode.LOG_HTML || - this._mode === Mode.ERROR - ) ? ContentType.NODES : ContentType.PROPERTIES; + this._mode === Mode.PREVIEW + ) ? ContentType.PLAIN : ContentType.NODES; } - createContent(obj, inHead) { + createContent(node) { const fragment = document.createDocumentFragment(); - const mode = inHead ? Mode.PREVIEW : Mode.PROP; + const mode = Mode.PROP; + + if (node.nodeType === Node.ELEMENT_NODE) { + if (this._console.checkInstanceOf(node, `HTMLTemplateElement`)) { + const val = node.content; + const nodeView = new NodeView({val, mode, depth: this.nextNestingLevel, parentView: this}, this._console); + const entryEl = new EntryView({entryEl: nodeView.el, withoutKey: true}).el; + fragment.appendChild(entryEl); + } + for (let childNode of [...node.childNodes]) { + if (childNode.nodeType === Node.TEXT_NODE && !childNode.textContent.trim()) { + continue; + } + const nodeView = new NodeView({val: childNode, mode, depth: this.nextNestingLevel, parentView: this}, this._console); + const entryEl = new EntryView({entryEl: nodeView.el, withoutKey: true}).el; + fragment.appendChild(entryEl); + } + } + + const closingTag = this._getClosingTag(); + if (closingTag) { + const entryEl = getElement(closingTag); + const el = new EntryView({entryEl, withoutKey: true}).el; + fragment.appendChild(el); + } + + // const keyEl = this._console.createTypedView(this._pairKey, this._mode, this.nextNestingLevel, this, this._propKey).el; + - const keyEl = this._console.createTypedView(this._pairKey, this._mode, this.nextNestingLevel, this, this._propKey).el; - return {fragment, isOversized}; + return {fragment}; } } diff --git a/src/type-view.js b/src/type-view.js index 90a5835..00607d8 100644 --- a/src/type-view.js +++ b/src/type-view.js @@ -34,6 +34,7 @@ const getStateDescriptorsKey = Symbol(GET_STATE_DESCRIPTORS_KEY_NAME); export default class TypeView extends BaseView { constructor(params, cons) { super(params, cons); + this._propKey = params.propKey; // this._stateDescriptorsQueue.push(this[getStateDescriptorsKey]()); } From 111ad2214917e94ad4cd1f7ddc3601f5ee667d16 Mon Sep 17 00:00:00 2001 From: nikolayemrikh Date: Fri, 1 Mar 2019 02:54:54 +0300 Subject: [PATCH 11/14] =?UTF-8?q?=D0=9B=D0=B8=D0=BD=D1=82=D0=B8=D1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/node/node-view.js | 2 +- src/object/object-view.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/node/node-view.js b/src/node/node-view.js index 0ad0714..e0f6887 100644 --- a/src/node/node-view.js +++ b/src/node/node-view.js @@ -1,7 +1,7 @@ import {ViewType, GET_STATE_DESCRIPTORS_KEY_NAME, Mode} from '../enums'; import BaseView from '../base-view'; import EntryView from '../entry-view'; -import {escapeHTML, getElement} from '../utils'; +import {getElement} from '../utils'; const ELS_WITHOUT_ENDING_TAG = [`input`, `br`, `hr`, `img`, `base`, `link`, `meta`, `wbr`, `source`, `embed`, `param`, `track`, `area`, `col`]; diff --git a/src/object/object-view.js b/src/object/object-view.js index 511cdb7..a746030 100644 --- a/src/object/object-view.js +++ b/src/object/object-view.js @@ -1,7 +1,6 @@ /* eslint guard-for-in: "off"*/ /* eslint no-empty: "off"*/ import TypeView from '../type-view'; -import NodeView from '../node/node-view'; import {Mode, ViewType, GET_STATE_DESCRIPTORS_KEY_NAME} from '../enums'; import {checkObjectisPrototype} from '../utils'; From 883a1e5173e564475d3510444278b162a8aac999 Mon Sep 17 00:00:00 2001 From: nikolayemrikh Date: Sun, 3 Mar 2019 03:07:42 +0300 Subject: [PATCH 12/14] =?UTF-8?q?=D0=A7=D0=B8=D0=BD=D0=B8=D1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/node/node-view.js | 42 +++++++++++++++--------------------------- 1 file changed, 15 insertions(+), 27 deletions(-) diff --git a/src/node/node-view.js b/src/node/node-view.js index e0f6887..75d12c0 100644 --- a/src/node/node-view.js +++ b/src/node/node-view.js @@ -7,16 +7,14 @@ const ELS_WITHOUT_ENDING_TAG = [`input`, `br`, `hr`, `img`, `base`, `link`, `met const MAX_PREVIEW_CONTENT_LENGTH = 43; -const ContentType = { - PLAIN: `plain`, - NODES: `nodes` -}; - const getStateDescriptorsKey = Symbol(GET_STATE_DESCRIPTORS_KEY_NAME); const getElementAttributesStr = (el) => ( Array.from(el.attributes) - .map(({name, value}) => `${name}="${value}"`) + .map(({name, value}) => ( + `${name}=\ +"${value}"` + )) .join(` `) ); @@ -36,6 +34,7 @@ export default class NodeView extends BaseView { } this._stateDescriptorsQueue.push(this[getStateDescriptorsKey]()); + this._closingTag = this._getClosingTag(); } get template() { @@ -99,12 +98,8 @@ export default class NodeView extends BaseView { return true; } - if (this._mode === Mode.PROP) { - return false; - } - return !( - this._value.nodeType === Node.ELEMENT_NODE || + (this._value.nodeType === Node.ELEMENT_NODE && this._closingTag) || this._value.nodeType === Node.DOCUMENT_FRAGMENT_NODE || this._value.nodeType === Node.DOCUMENT_NODE ); @@ -136,7 +131,7 @@ export default class NodeView extends BaseView { } else if (v.nodeType === Node.DOCUMENT_NODE) { val = `#document`; } else if (v.nodeType === Node.COMMENT_NODE) { - val = `<!-- ${v.data} -->`; + val = `<!--${v.data}-->`; } else if (v.nodeType === Node.ATTRIBUTE_NODE) { val = `${v.name}`; } else if (v.nodeType === Node.DOCUMENT_TYPE_NODE) { @@ -182,7 +177,7 @@ export default class NodeView extends BaseView { } } - let closingTag = this._getClosingTag(); + let closingTag = this._closingTag; return `${content}${closingTag}`; } else if (this._value.nodeType === Node.ATTRIBUTE_NODE) { const attrValue = this._value.value; @@ -192,25 +187,21 @@ export default class NodeView extends BaseView { } _getClosingTag() { - const tagNameLower = this._value.tagName.toLowerCase(); - if (!ELS_WITHOUT_ENDING_TAG.includes(tagNameLower)) { - return `</${tagNameLower}>`; + if (this._value.nodeType === Node.ELEMENT_NODE) { + const tagNameLower = this._value.tagName.toLowerCase(); + if (!ELS_WITHOUT_ENDING_TAG.includes(tagNameLower)) { + return `</${tagNameLower}>`; + } } return ``; } - _getContentType() { - return ( - this._mode === Mode.PREVIEW - ) ? ContentType.PLAIN : ContentType.NODES; - } - createContent(node) { const fragment = document.createDocumentFragment(); const mode = Mode.PROP; - if (node.nodeType === Node.ELEMENT_NODE) { + if (node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.DOCUMENT_FRAGMENT_NODE || node.nodeType === Node.DOCUMENT_NODE) { if (this._console.checkInstanceOf(node, `HTMLTemplateElement`)) { const val = node.content; const nodeView = new NodeView({val, mode, depth: this.nextNestingLevel, parentView: this}, this._console); @@ -227,16 +218,13 @@ export default class NodeView extends BaseView { } } - const closingTag = this._getClosingTag(); + const closingTag = this._closingTag; if (closingTag) { const entryEl = getElement(closingTag); const el = new EntryView({entryEl, withoutKey: true}).el; fragment.appendChild(el); } - // const keyEl = this._console.createTypedView(this._pairKey, this._mode, this.nextNestingLevel, this, this._propKey).el; - - return {fragment}; } } From 11c3f8af3eb244df6e92dec67f3e726eb4f9db5c Mon Sep 17 00:00:00 2001 From: nikolayemrikh Date: Sun, 21 Apr 2019 13:20:35 +0300 Subject: [PATCH 13/14] =?UTF-8?q?=D0=9F=D1=80=D0=B0=D0=B2=D0=B8=D1=82=20?= =?UTF-8?q?=D0=BF=D1=83=D1=82=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- gulpfile.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 105c245..ba9da19 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -85,7 +85,7 @@ gulp.task(`build-scripts`, () => { json(), babel({ babelrc: false, - exclude: [`node_modules/**`, `js/tests/**`], + exclude: [`node_modules/**`, `src/tests/**`], presets: [ [`@babel/preset-env`, {modules: false, useBuiltIns: `entry`}] ] @@ -115,7 +115,7 @@ gulp.task(`build-prompt`, () => { json(), babel({ babelrc: false, - exclude: [`node_modules/**`, `js/tests/**`], + exclude: [`node_modules/**`, `src/tests/**`], presets: [ [`@babel/preset-env`, {modules: false}] ], From add98aed7666e0c6f40714b4d5275cf2e241d9db Mon Sep 17 00:00:00 2001 From: nikolayemrikh Date: Thu, 25 Apr 2019 13:46:26 +0300 Subject: [PATCH 14/14] =?UTF-8?q?=D0=A7=D0=B8=D0=BD=D0=B8=D1=82=20=D0=BE?= =?UTF-8?q?=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D0=B5=20?= =?UTF-8?q?=D0=B2=D0=BB=D0=BE=D0=B6=D0=B5=D0=BD=D0=BD=D1=8B=D1=85=20=D1=8D?= =?UTF-8?q?=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/node/node-view.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/node/node-view.js b/src/node/node-view.js index 75d12c0..c81da79 100644 --- a/src/node/node-view.js +++ b/src/node/node-view.js @@ -1,7 +1,7 @@ import {ViewType, GET_STATE_DESCRIPTORS_KEY_NAME, Mode} from '../enums'; import BaseView from '../base-view'; import EntryView from '../entry-view'; -import {getElement} from '../utils'; +import {getElement, escapeHTML} from '../utils'; const ELS_WITHOUT_ENDING_TAG = [`input`, `br`, `hr`, `img`, `base`, `link`, `meta`, `wbr`, `source`, `embed`, `param`, `track`, `area`, `col`]; @@ -170,10 +170,10 @@ export default class NodeView extends BaseView { if (this._value.nodeType === Node.ELEMENT_NODE) { let content = ``; if (!checkElementIsEmpty(this._value) && !this._console.checkInstanceOf(this._value, `HTMLTemplateElement`)) { - if (this._value.innerHTML.length > MAX_PREVIEW_CONTENT_LENGTH) { + if (this._value.children.length || this._value.innerHTML.length > MAX_PREVIEW_CONTENT_LENGTH) { content = `…`; } else { - content = this._value.innerHTML; + content = escapeHTML(this._value.innerHTML); } }