From 915596f708257039828e25feaf1187bbc433c19b Mon Sep 17 00:00:00 2001 From: surunzi Date: Sun, 8 May 2016 16:55:55 +0800 Subject: [PATCH] Add: Text node support --- src/Elements/Elements.es6 | 37 +++++++++++++++++++++++++------------ src/Elements/Elements.hbs | 12 ++---------- src/Sources/Sources.es6 | 39 +++++++++++++++++++++++++++++++-------- src/Sources/TreeView.es6 | 10 ++++++++++ src/Sources/TreeView.scss | 0 src/Sources/empty.hbs | 5 ----- src/Sources/html.hbs | 3 +++ src/style.scss | 8 ++++++++ test/index.html | 7 +++++++ 9 files changed, 86 insertions(+), 35 deletions(-) create mode 100644 src/Sources/TreeView.es6 create mode 100644 src/Sources/TreeView.scss delete mode 100644 src/Sources/empty.hbs create mode 100644 src/Sources/html.hbs diff --git a/src/Elements/Elements.es6 b/src/Elements/Elements.es6 index aceb67e..873832f 100644 --- a/src/Elements/Elements.es6 +++ b/src/Elements/Elements.es6 @@ -50,9 +50,11 @@ export default class Elements extends Tool { var idx = util.$(this).data('idx'); - var el = self._curEl.children[idx], + var el = self._curEl.childNodes[idx], level = self._curLevel + 1; + if (el.nodeType !== 1) return; + self._setEl(el, level); }).on('click', '.toggle-all-computed-style', () => { @@ -89,7 +91,6 @@ export default class Elements extends Tool _setEl(el, level) { this._curEl = el; - this._$curEl = util.$(el); this._curLevel = level; this._curCssStore = new CssStore(el); this._highlight.setEl(el); @@ -107,15 +108,13 @@ export default class Elements extends Tool var { className, id, - children, + childNodes, attributes, - textContent, tagName } = el; - ret.children = formatChildren(children); + ret.children = formatChildNodes(childNodes); ret.attributes = formatAttr(attributes); - if (children.length === 0) ret.textContent = textContent; ret.name = formatElName(tagName, id, className, attributes) + '(' + this._curLevel + ')'; if (needNoStyle(tagName)) return ret; @@ -139,7 +138,7 @@ export default class Elements extends Tool function formatElName(tagName, id, className, attributes) { - var ret = tagName.toLowerCase(); + var ret = '' + tagName.toLowerCase() + ''; if (id !== '') ret += '#' + id; @@ -178,15 +177,29 @@ function formatAttr(attributes) return ret; } -function formatChildren(children) +function formatChildNodes(nodes) { var ret = []; - for (var i = 0, len = children.length; i < len; i++) + for (var i = 0, len = nodes.length; i < len; i++) { - var child = children[i]; - if (child.id === 'eruda') break; - ret.push(formatElName(child.tagName, child.id, child.className, child.attributes)); + var child = nodes[i]; + if (child.nodeType === 3) + { + var val = util.trim(child.nodeValue); + if (val !== '') ret.push({ + text: val, + idx: i + }); + continue; + } + if (child.nodeType === 1 || child.id !== 'eruda') + { + ret.push({ + text: formatElName(child.tagName, child.id, child.className, child.attributes), + idx: i + }); + } } return ret; diff --git a/src/Elements/Elements.hbs b/src/Elements/Elements.hbs index 775e8a3..2886b98 100644 --- a/src/Elements/Elements.hbs +++ b/src/Elements/Elements.hbs @@ -1,10 +1,10 @@
- {{name}} + {{{name}}}
{{#if children}} {{/if}} @@ -64,11 +64,3 @@ {{/if}} -{{#if textContent}} -
-

Text

-
- {{textContent}} -
-
-{{/if}} diff --git a/src/Sources/Sources.es6 b/src/Sources/Sources.es6 index c250a4d..0c2fef1 100644 --- a/src/Sources/Sources.es6 +++ b/src/Sources/Sources.es6 @@ -1,4 +1,6 @@ import Tool from '../DevTools/Tool.es6' +import TreeView from './TreeView.es6' +import util from '../lib/util' require('./Sources.scss'); @@ -9,11 +11,8 @@ export default class Sources extends Tool super(); this.name = 'sources'; - this._data = { - type: '' - }; - this._loadTpl(); + this._reset(); } init($el) { @@ -25,16 +24,40 @@ export default class Sources extends Tool { this._data = data; } + _reset() + { + this._data = { + type: 'html', + val: document.documentElement + }; + } _loadTpl() { - this._emptyTpl = require('./empty.hbs'); + this._htmlTpl = require('./html.hbs'); } _render() { var data = this._data; - var tpl = this._emptyTpl; - - this._$el.html(tpl(data)); + switch (data.type) + { + case 'html': return this._renderHtml(); + } } + _renderHtml() + { + var data = this._data; + + var rootNode = data.val; + + this._$el.html(this._htmlTpl); + new TreeView(this._$el.find('.eruda-tree'), getNodeChildren(rootNode)); + } +} + +function getNodeChildren(rootNode) +{ + var ret = []; + + var children = rootNode.childNodes; } \ No newline at end of file diff --git a/src/Sources/TreeView.es6 b/src/Sources/TreeView.es6 new file mode 100644 index 0000000..7f9e5ad --- /dev/null +++ b/src/Sources/TreeView.es6 @@ -0,0 +1,10 @@ +require('./TreeView.scss'); + +export default class TreeView +{ + constructor($parent, initialData) + { + this._$parent = $parent; + this._data = initialData; + } +} \ No newline at end of file diff --git a/src/Sources/TreeView.scss b/src/Sources/TreeView.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/Sources/empty.hbs b/src/Sources/empty.hbs deleted file mode 100644 index 0d61322..0000000 --- a/src/Sources/empty.hbs +++ /dev/null @@ -1,5 +0,0 @@ -
-
- Used for displaying html, javaScript, css and image. -
-
\ No newline at end of file diff --git a/src/Sources/html.hbs b/src/Sources/html.hbs new file mode 100644 index 0000000..7eeba48 --- /dev/null +++ b/src/Sources/html.hbs @@ -0,0 +1,3 @@ +
+
+
\ No newline at end of file diff --git a/src/style.scss b/src/style.scss index 7e52ce8..30d4d08 100644 --- a/src/style.scss +++ b/src/style.scss @@ -28,3 +28,11 @@ } } +.blue { + color: $blue; +} + +.red { + color: $red; +} + diff --git a/test/index.html b/test/index.html index 95adbbf..504b2a3 100644 --- a/test/index.html +++ b/test/index.html @@ -10,6 +10,13 @@
One
Two
+
+ This is a very long text! + This is a very long text! + This is a very long text! + This is a very long text! + This is a very long text! +