diff --git a/eustia/pxToNum.js b/eustia/pxToNum.js new file mode 100644 index 0000000..158cc12 --- /dev/null +++ b/eustia/pxToNum.js @@ -0,0 +1,6 @@ +_('toNum'); + +function exports(str) +{ + return toNum(str.replace('px', '')); +} \ No newline at end of file diff --git a/src/Console/Log.es6 b/src/Console/Log.es6 index f095f13..52444e1 100644 --- a/src/Console/Log.es6 +++ b/src/Console/Log.es6 @@ -2,71 +2,6 @@ import util from '../lib/util' require('./Log.scss'); -var cmdList = require('./cmdList.json'), - helpMsg = require('./help.hbs')({ - commands: cmdList - }); - -var libraries = require('./libraries.json'); - -var regJsUrl = /https?:\/\/([0-9.\-A-Za-z]+)(?::(\d+))?\/[A-Z.a-z0-9/]*\.js/g; - -function evalJs(jsInput) -{ - return eval.call(window, jsInput); -} - -function errToStr(err, msg) -{ - var lines = err.stack.split('\n'); - - if (util.isUndef(msg)) msg = lines[0] + '
'; - var stack = '
' + lines.slice(1).join('
') + '
'; - - stack = stack.replace(regJsUrl, function (match) - { - return '' + match + ''; - }); - - return msg + stack; -} - -function transMsg(msg) -{ - if (util.isUndef(msg)) - { - msg = 'undefined'; - } else if (util.isFn(msg)) - { - msg = msg.toString(); - } else if (util.isArr(msg)) - { - msg = JSON.stringify(msg); - } else if (util.isObj(msg)) - { - msg = 'Object ' + JSON.stringify(msg); - } - - return util.escape(msg); -} - -function transMultipleMsg(args) -{ - var ret = []; - - util.each(args, function (val) - { - ret.push(transMsg(val)); - }); - - return ret.join(' '); -} - -function transCode(code) -{ - return code.replace(/\n/g, '
').replace(/ /g, ' '); -} - export default class Log extends util.Emitter { constructor($el) @@ -310,4 +245,69 @@ export default class Log extends util.Emitter el.scrollTop = el.scrollHeight; } -} \ No newline at end of file +} + +var cmdList = require('./cmdList.json'), + helpMsg = require('./help.hbs')({ + commands: cmdList + }); + +var libraries = require('./libraries.json'); + +var regJsUrl = /https?:\/\/([0-9.\-A-Za-z]+)(?::(\d+))?\/[A-Z.a-z0-9/]*\.js/g; + +function evalJs(jsInput) +{ + return eval.call(window, jsInput); +} + +function errToStr(err, msg) +{ + var lines = err.stack.split('\n'); + + if (util.isUndef(msg)) msg = lines[0] + '
'; + var stack = '
' + lines.slice(1).join('
') + '
'; + + stack = stack.replace(regJsUrl, function (match) + { + return '' + match + ''; + }); + + return msg + stack; +} + +function transMsg(msg) +{ + if (util.isUndef(msg)) + { + msg = 'undefined'; + } else if (util.isFn(msg)) + { + msg = msg.toString(); + } else if (util.isArr(msg)) + { + msg = JSON.stringify(msg); + } else if (util.isObj(msg)) + { + msg = 'Object ' + JSON.stringify(msg); + } + + return util.escape(msg); +} + +function transMultipleMsg(args) +{ + var ret = []; + + util.each(args, function (val) + { + ret.push(transMsg(val)); + }); + + return ret.join(' '); +} + +function transCode(code) +{ + return code.replace(/\n/g, '
').replace(/ /g, ' '); +} diff --git a/src/Elements/Elements.es6 b/src/Elements/Elements.es6 index 690e2b0..3ecd3f3 100644 --- a/src/Elements/Elements.es6 +++ b/src/Elements/Elements.es6 @@ -1,9 +1,144 @@ import Tool from '../DevTools/Tool.es6' import CssStore from './CssStore.es6' +import Highlight from './Highlight.es6' import util from '../lib/util' require('./Elements.scss'); +export default class Elements extends Tool +{ + constructor() + { + super(); + this.name = 'elements'; + this._tpl = require('./Elements.hbs'); + this._rmDefComputedStyle = true; + this._highlightElement = false; + } + init($el) + { + super.init($el); + + $el.html('
'); + this._$showArea = $el.find('.eruda-show-area'); + $el.append(require('./BottomBar.hbs')()); + + this._bindEvent(); + this._htmlEl = document.getElementsByTagName('html')[0]; + this._initHighlight(); + this._setEl(this._htmlEl, 0); + } + show() + { + super.show(); + + this._render(); + } + _back() + { + if (this._curEl === this._htmlEl) return; + + var parent = this._curEl.parentNode; + + this._setEl(parent, this._curLevel - 1); + } + _bindEvent() + { + var self = this; + + this._$el.on('click', '.eruda-child', function () + { + var idx = util.$(this).data('idx'); + + var el = self._curEl.children[idx], + level = self._curLevel + 1; + + self._setEl(el, level); + }).on('click', '.toggle-all-computed-style', () => + { + this._toggleAllComputedStyle(); + }); + + var $bottomBar = this._$el.find('.eruda-bottom-bar'); + + var self = this; + + $bottomBar.on('click', '.back', () => this._back()) + .on('click', '.refresh', () => this._render()) + .on('click', '.highlight', function () + { + util.$(this).toggleClass('eruda-active'); + self._toggleHighlight() + }) + .on('click', '.reset', () => this._setEl(this._htmlEl, 0)); + } + _toggleAllComputedStyle() + { + this._rmDefComputedStyle = !this._rmDefComputedStyle; + + this._render(); + } + _initHighlight() + { + this._highlight = new Highlight(); + } + _toggleHighlight() + { + this._highlightElement = !this._highlightElement; + + this._render(); + } + _setEl(el, level) + { + this._curEl = el; + this._$curEl = util.$(el); + this._curLevel = level; + this._curCssStore = new CssStore(el); + this._highlight.setEl(el); + this._rmDefComputedStyle = true; + + this._render(); + } + _getData() + { + var ret = {}; + + var el = this._curEl, + cssStore = this._curCssStore; + + var { + className, + id, + children, + attributes, + textContent, + tagName + } = el; + + ret.children = formatChildren(children); + 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; + + var computedStyle = cssStore.getComputedStyle(); + if (this._rmDefComputedStyle) computedStyle = rmDefComputedStyle(computedStyle); + ret.computedStyle = computedStyle; + + var styles = cssStore.getMatchedCSSRules(); + styles.unshift(getAttrStyle(attributes)); + ret.styles = styles; + + return ret; + } + _render() + { + this._highlight[this._highlightElement ? 'show' : 'hide'](); + this._$showArea.html(this._tpl(this._getData())); + } +} + function formatElName(tagName, id, className, attributes) { var ret = tagName.toLowerCase(); @@ -114,125 +249,3 @@ function needNoStyle(tagName) return noStyleTag.indexOf(tagName) > -1; } - -export default class Elements extends Tool -{ - constructor() - { - super(); - this.name = 'elements'; - this._tpl = require('./Elements.hbs'); - this._rmDefComputedStyle = true; - } - init($el) - { - super.init($el); - - $el.html('
'); - this._$showArea = $el.find('.eruda-show-area'); - $el.append(require('./BottomBar.hbs')()); - - this._bindEvent(); - this._htmlEl = document.getElementsByTagName('html')[0]; - this._setEl(this._htmlEl, 0); - } - show() - { - super.show(); - - this._render(); - } - _back() - { - if (this._curEl === this._htmlEl) return; - - var parent = this._curEl.parentNode; - - this._setEl(parent, this._curLevel - 1); - } - _bindEvent() - { - var self = this; - - this._$el.on('click', '.eruda-child', function () - { - var idx = util.$(this).data('idx'); - - var el = self._curEl.children[idx], - level = self._curLevel + 1; - - self._setEl(el, level); - }).on('click', '.toggle-all-computed-style', () => - { - this._toggleAllComputedStyle(); - }); - - var $bottomBar = this._$el.find('.eruda-bottom-bar'); - - $bottomBar.on('click', '.back', () => this._back()) - .on('click', '.refresh', () => this._render()) - .on('click', '.highlight', () => this._highlight()) - .on('click', '.reset', () => this._setEl(this._htmlEl, 0)); - } - _toggleAllComputedStyle() - { - this._rmDefComputedStyle = !this._rmDefComputedStyle; - - this._render(); - } - _highlight() - { - this._$curEl.toggleClass('eruda-highlight'); - - this._render(); - } - _setEl(el, level) - { - if (this._$curEl) this._$curEl.rmClass('eruda-highlight'); - - this._curEl = el; - this._$curEl = util.$(el); - this._curLevel = level; - this._curCssStore = new CssStore(el); - this._rmDefComputedStyle = true; - - this._render(); - } - _getData() - { - var ret = {}; - - var el = this._curEl, - cssStore = this._curCssStore; - - var { - className, - id, - children, - attributes, - textContent, - tagName - } = el; - - ret.children = formatChildren(children); - 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; - - var computedStyle = cssStore.getComputedStyle(); - if (this._rmDefComputedStyle) computedStyle = rmDefComputedStyle(computedStyle); - ret.computedStyle = computedStyle; - - var styles = cssStore.getMatchedCSSRules(); - styles.unshift(getAttrStyle(attributes)); - ret.styles = styles; - - return ret; - } - _render() - { - this._$showArea.html(this._tpl(this._getData())); - } -} \ No newline at end of file diff --git a/src/Elements/Elements.scss b/src/Elements/Elements.scss index 36ae1bb..a98091f 100644 --- a/src/Elements/Elements.scss +++ b/src/Elements/Elements.scss @@ -111,7 +111,7 @@ font-size: 14px; line-height: 40px; flex-grow: 1; - &:active { + &:active, &.active { background: $blue; color: #fff; } @@ -120,7 +120,3 @@ } } } -.highlight { - background: $blue !important; - border: 4px solid $green !important; -} \ No newline at end of file diff --git a/src/Elements/Highlight.es6 b/src/Elements/Highlight.es6 new file mode 100644 index 0000000..d94491a --- /dev/null +++ b/src/Elements/Highlight.es6 @@ -0,0 +1,98 @@ +import util from '../lib/util' + +require('./Highlight.scss'); + +export default class Highlight +{ + constructor() + { + this._appendTpl(); + } + setEl(el) + { + this._$target = util.$(el); + this._target = el; + } + show() + { + this._calSizeAndPos(); + this._$el.show(); + } + hide() + { + this._$el.hide(); + } + _calSizeAndPos() + { + var $target = this._$target; + + var { + left, + width, + top, + height + } = $target.offset(); + + this._$el.css({ + left: left, + top: top, + width: width, + height: height + }); + + var computedStyle = getComputedStyle(this._target, ''); + + function getNumStyle(name) + { + return util.pxToNum(computedStyle.getPropertyValue(name)); + } + + var ml = getNumStyle('margin-left'), + mr = getNumStyle('margin-right'), + mt = getNumStyle('margin-top'), + mb = getNumStyle('margin-bottom'); + + this._$margin.css({ + left: -ml, + top: -mt, + width: width + ml + mr, + height: height + mt + mb + }); + + var bl = getNumStyle('border-left-width'), + br = getNumStyle('border-right-width'), + bt = getNumStyle('border-top-width'), + bb = getNumStyle('border-bottom-width'); + + var bw = width - bl - br, + bh = height - bt - bb; + + this._$padding.css({ + left: bl, + top: bt, + width: bw, + height: bh + }); + + var pl = getNumStyle('padding-left'), + pr = getNumStyle('padding-right'), + pt = getNumStyle('padding-top'), + pb = getNumStyle('padding-bottom'); + + this._$content.css({ + left: bl + pl, + top: bl + pt, + width: bw - pl - pr, + height: bh - pt - pb + }); + } + _appendTpl() + { + util.$('body').append(require('./Highlight.hbs')()); + + this._$el = util.$('.eruda-elements-highlight'); + this._$margin = this._$el.find('.eruda-margin'); + this._$padding = this._$el.find('.eruda-padding'); + this._$content = this._$el.find('.eruda-content'); + } +} \ No newline at end of file diff --git a/src/Elements/Highlight.hbs b/src/Elements/Highlight.hbs new file mode 100644 index 0000000..df481a8 --- /dev/null +++ b/src/Elements/Highlight.hbs @@ -0,0 +1,6 @@ +
+
+
+
+
+
\ No newline at end of file diff --git a/src/Elements/Highlight.scss b/src/Elements/Highlight.scss new file mode 100644 index 0000000..ae224ac --- /dev/null +++ b/src/Elements/Highlight.scss @@ -0,0 +1,32 @@ +.elements-highlight { + display: none; + position: absolute; + left: 0; + right: 0; + opacity: .5; + z-index: 10000; + .margin { + position: absolute; + background: #e8925b; + z-index: 100; + } + .border { + position: absolute; + left: 0; + right: 0; + width: 100%; + height: 100%; + background: #ffcd7c; + z-index: 200; + } + .padding { + position: absolute; + background: #86af76; + z-index: 300; + } + .content { + position: absolute; + background: #5e88c1; + z-index: 400; + } +} \ No newline at end of file diff --git a/src/lib/util.js b/src/lib/util.js index 441254a..51f959f 100644 --- a/src/lib/util.js +++ b/src/lib/util.js @@ -2268,6 +2268,52 @@ module.exports = (function () return exports; })({}); + /* ------------------------------ toNum ------------------------------ */ + + var toNum = _.toNum = (function (exports) + { + /* Convert value to a number. + * + * |Name |Type |Desc | + * |------------------------------| + * |val |* |Value to process| + * |return|number|Resulted number | + * + * ```javascript + * toNum('5'); // -> 5 + * ``` + */ + + exports = function (val) + { + if (isNum(val)) return val; + + if (isObj(val)) + { + var temp = isFn(val.valueOf) ? val.valueOf() : val; + val = isObj(temp) ? (temp + '') : temp; + } + + if (!isStr(val)) return val === 0 ? val : +val; + + return +val; + }; + + return exports; + })({}); + + /* ------------------------------ pxToNum ------------------------------ */ + + var pxToNum = _.pxToNum = (function (exports) + { + function exports(str) + { + return toNum(str.replace('px', '')); + } + + return exports; + })({}); + /* ------------------------------ rtrim ------------------------------ */ var rtrim = _.rtrim = (function (exports) @@ -2346,40 +2392,6 @@ module.exports = (function () return exports; })({}); - /* ------------------------------ toNum ------------------------------ */ - - var toNum = _.toNum = (function (exports) - { - /* Convert value to a number. - * - * |Name |Type |Desc | - * |------------------------------| - * |val |* |Value to process| - * |return|number|Resulted number | - * - * ```javascript - * toNum('5'); // -> 5 - * ``` - */ - - exports = function (val) - { - if (isNum(val)) return val; - - if (isObj(val)) - { - var temp = isFn(val.valueOf) ? val.valueOf() : val; - val = isObj(temp) ? (temp + '') : temp; - } - - if (!isStr(val)) return val === 0 ? val : +val; - - return +val; - }; - - return exports; - })({}); - /* ------------------------------ trim ------------------------------ */ var trim = _.trim = (function (exports) diff --git a/test/style.css b/test/style.css index ede39db..66c1647 100644 --- a/test/style.css +++ b/test/style.css @@ -1,9 +1,7 @@ -body { - background: #b4bad2; -} #test-element { - margin: 0 auto; + margin: 15px auto; + padding: 10px; } .border { - border: 1px solid #ccc; + border: 15px solid #fff; } \ No newline at end of file