From 535a501e4bb11c51b970ca4eef8e085756fa962b Mon Sep 17 00:00:00 2001 From: surunzi Date: Mon, 16 May 2016 17:33:07 +0800 Subject: [PATCH] Dev: Elements refactoring --- src/Elements/Elements.es6 | 98 ++++++++++---------------------------- src/Elements/Highlight.es6 | 19 ++------ 2 files changed, 27 insertions(+), 90 deletions(-) diff --git a/src/Elements/Elements.es6 b/src/Elements/Elements.es6 index cf448a9..8840984 100644 --- a/src/Elements/Elements.es6 +++ b/src/Elements/Elements.es6 @@ -11,6 +11,7 @@ export default class Elements extends Tool constructor() { super(); + this.name = 'elements'; this._tpl = require('./Elements.hbs'); this._rmDefComputedStyle = true; @@ -28,8 +29,8 @@ export default class Elements extends Tool $el.append(require('./BottomBar.hbs')()); this._htmlEl = document.documentElement; - this._initHighlight(); - this._initSelect(); + this._highlight = new Highlight(this._parent.$parent); + this._select = new Select(); this._bindEvent(); this._setEl(this._htmlEl); } @@ -43,9 +44,9 @@ export default class Elements extends Tool { if (this._curEl === this._htmlEl) return; - var parentQueue = this._curParentQueue; + var parentQueue = this._curParentQueue, + parent = parentQueue.shift(); - var parent = parentQueue.shift(); while (!isElExist(parent)) parent = parentQueue.shift(); this._setEl(parent); @@ -57,19 +58,16 @@ export default class Elements extends Tool this._$el.on('click', '.eruda-child', function () { - var idx = util.$(this).data('idx'); - - var curEl = self._curEl, + var idx = util.$(this).data('idx'), + curEl = self._curEl, el = curEl.childNodes[idx]; if (!isElExist(el)) self._render(); if (el.nodeType === 3) { - var parent = self._parent, - sources = parent.get('sources'); - - var curTagName = curEl.tagName, + let parent = self._parent, + curTagName = curEl.tagName, type; switch (curTagName) @@ -79,16 +77,12 @@ export default class Elements extends Tool default: return; } - sources.set(type, el.nodeValue); - + parent.get('sources').set(type, el.nodeValue); parent.showTool('sources'); } if (el.nodeType === 1) return self._setEl(el); - }).on('click', '.toggle-all-computed-style', () => - { - this._toggleAllComputedStyle(); - }); + }).on('click', '.toggle-all-computed-style', () => this._toggleAllComputedStyle()); var $bottomBar = this._$el.find('.eruda-bottom-bar'); @@ -98,7 +92,7 @@ export default class Elements extends Tool .on('click', '.eruda-select', () => this._toggleSelect()) .on('click', '.eruda-reset', () => this._setEl(this._htmlEl)); - select.on('select', (target) => this._setEl(target)); + select.on('select', target => this._setEl(target)); } _toggleAllComputedStyle() { @@ -106,14 +100,6 @@ export default class Elements extends Tool this._render(); } - _initHighlight() - { - this._highlight = new Highlight(this._parent.$parent); - } - _initSelect() - { - this._select = new Select(); - } _toggleHighlight() { if (this._selectElement) return; @@ -167,12 +153,7 @@ export default class Elements extends Tool var el = this._curEl, cssStore = this._curCssStore; - var { - className, - id, - attributes, - tagName - } = el; + var {className, id, attributes, tagName} = el; ret.children = formatChildNodes(el.childNodes); ret.attributes = formatAttr(attributes); @@ -199,18 +180,11 @@ export default class Elements extends Tool } } -function isElExist(val) -{ - return util.isEl(val) && val.parentNode; -} +var isElExist = val => util.isEl(val) && val.parentNode; function formatElName(data) { - var { - id, - className, - attributes - } = data; + var {id, className, attributes} = data; var ret = `${data.tagName.toLowerCase()}`; @@ -218,49 +192,35 @@ function formatElName(data) util.each(className.split(/\s+/g), (val) => { - if (util.trim(val) === '') return; - + if (val.trim() === '') return; ret += `.${val}`; }); util.each(attributes, (attr) => { var name = attr.name; - if (name === 'id' || name === 'class' || name === 'style') return; - ret += ` ${name}="${attr.value}"`; }); return ret; } -function formatAttr(attributes) +var formatAttr = attributes => util.map(attributes, attr => { - var ret = []; - - for (var i = 0, len = attributes.length; i < len; i++) - { - var attr = attributes[i]; - ret.push({ - name: attr.name, - value: attr.value - }); - } - - return ret; -} + return {name: attr.name, value: attr.value}; +}); function formatChildNodes(nodes) { var ret = []; - for (var i = 0, len = nodes.length; i < len; i++) + for (let i = 0, len = nodes.length; i < len; i++) { var child = nodes[i]; if (child.nodeType === 3) { - var val = util.trim(child.nodeValue); + var val = child.nodeValue.trim(); if (val !== '') ret.push({ text: val, idx: i @@ -272,12 +232,7 @@ function formatChildNodes(nodes) child.className.indexOf('eruda') < 0) { ret.push({ - text: formatElName({ - tagName: child.tagName, - id: child.id, - className: child.className, - attributes: child.attributes - }), + text: formatElName(child), idx: i }); } @@ -293,7 +248,7 @@ function getInlineStyle(style) style: {} }; - for (var i = 0, len = style.length; i < len; i++) + for (let i = 0, len = style.length; i < len; i++) { var s = style[i]; @@ -321,9 +276,4 @@ function rmDefComputedStyle(computedStyle) var NO_STYLE_TAG = ['script', 'style', 'meta', 'title', 'link', 'head']; -function needNoStyle(tagName) -{ - tagName = tagName.toLowerCase(); - - return NO_STYLE_TAG.indexOf(tagName) > -1; -} +var needNoStyle = tagName => NO_STYLE_TAG.indexOf(tagName.toLowerCase()) > -1; diff --git a/src/Elements/Highlight.es6 b/src/Elements/Highlight.es6 index 1904dce..69c8de2 100644 --- a/src/Elements/Highlight.es6 +++ b/src/Elements/Highlight.es6 @@ -30,23 +30,10 @@ export default class Highlight } render() { - var $target = this._$target; - - var { - left, - width, - top, - height - } = $target.offset(); + var {left, width, top, height} = this._$target.offset(); this._top = top; - - this._$el.css({ - left: left, - top: top - window.scrollY, - width: width, - height: height - }); + this._$el.css({left, top: top - window.scrollY, width, height}); var computedStyle = getComputedStyle(this._target, ''); @@ -92,7 +79,7 @@ export default class Highlight }); this._$size.css({ - top: -mt - (top < 25 ? 0 : 25), + top: -mt - (top - mt < 25 ? 0 : 25), left: -ml }).html(`${formatElName(this._target)} | ${width} × ${height}`); }