lxm_front/eruda
1
0
Fork 0
mirror of https://github.com/liriliri/eruda.git synced 2026-03-20 09:38:37 +08:00
Code Issues Projects Releases Wiki Activity

Dev: Elements highlight

Browse Source
This commit is contained in:
surunzi
2016-05-04 12:10:19 +08:00
parent b23eeb0438
commit 89a8558e74
9 changed files with 393 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
eustia/pxToNum.js Normal file
View File

@@ -0,0 +1,6 @@
_('toNum');
function exports(str)
{
return toNum(str.replace('px', ''));
}

132
src/Console/Log.es6
View File

@@ -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] + '<br/>';
var stack = '<div class="eruda-stack">' + lines.slice(1).join('<br/>') + '</div>';
stack = stack.replace(regJsUrl, function (match)
{
return '<a href="' + match + '" target="_blank">' + match + '</a>';
});
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, '<br/>').replace(/ /g, '&nbsp;');
}
export default class Log extends util.Emitter
{
constructor($el)
@@ -310,4 +245,69 @@ export default class Log extends util.Emitter
el.scrollTop = el.scrollHeight;
}
}
}
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] + '<br/>';
var stack = '<div class="eruda-stack">' + lines.slice(1).join('<br/>') + '</div>';
stack = stack.replace(regJsUrl, function (match)
{
return '<a href="' + match + '" target="_blank">' + match + '</a>';
});
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, '<br/>').replace(/ /g, '&nbsp;');
}

257
src/Elements/Elements.es6
View File

@@ -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('<div class="eruda-show-area"></div>');
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('<div class="eruda-show-area"></div>');
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()));
}
}

6
src/Elements/Elements.scss
View File

@@ -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;
}

98
src/Elements/Highlight.es6 Normal file
View File

@@ -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');
}
}

6
src/Elements/Highlight.hbs Normal file
View File

@@ -0,0 +1,6 @@
<div class="eruda-elements-highlight">
<div class="eruda-margin"></div>
<div class="eruda-border"></div>
<div class="eruda-padding"></div>
<div class="eruda-content"></div>
</div>

32
src/Elements/Highlight.scss Normal file
View File

@@ -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;
}
}

80
src/lib/util.js
View File

@@ -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)

8
test/style.css
View File

@@ -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;
}