lxm_front/eruda
1
0
Fork 0
mirror of synced 2025-11-06 04:21:11 +08:00
Code Issues Projects Releases Wiki Activity

Add: Elements links detect

Browse Source
This commit is contained in:
surunzi
2016-07-01 17:01:01 +08:00
parent b821ac9ff1
commit 9c31487a1a
4 changed files with 35 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/Elements/Elements.es6
View File

@@ -272,14 +272,18 @@ export default class Elements extends Tool
}
}
var regColor = /rgba?\((.*?)\)/g;
function processStyleRules(style)
{
util.each(style, (val, key) =>
{
style[key] = val.replace(regColor, '<span class="eruda-style-color" style="background-color: $&"></span>$&');
});
util.each(style, (val, key) => style[key] = processStyleRule(val));
}
let regColor = /rgba?\((.*?)\)/g,
regCssUrl = /url\("?(.*?)"?\)/g;
function processStyleRule(val)
{
return val.replace(regColor, '<span class="eruda-style-color" style="background-color: $&"></span>$&')
.replace(regCssUrl, (match, url) => `url("${wrapLink(url)}")`);
}
const isElExist = val => util.isEl(val) && val.parentNode;
@@ -313,7 +317,14 @@ function formatElName(data)
var formatAttr = attributes => util.map(attributes, attr =>
{
return {name: attr.name, value: attr.value};
let {name, value} = attr;
value = util.escape(value);
let isLink = (name === 'src' || name === 'href') && !util.startWith(value, 'data');
if (isLink) value = wrapLink(value);
if (name === 'style') value = processStyleRule(value);
return {name, value};
});
function formatChildNodes(nodes)
@@ -428,3 +439,5 @@ function rmEvent(el, type, listener, useCapture = false)
}
var getWinEventProto = () => (window.EventTarget && window.EventTarget.prototype) || window.Node.prototype;
let wrapLink = link => `<a href="${link}" target="_blank">${link}</a>`;

2
src/Elements/Elements.hbs
View File

@@ -17,7 +17,7 @@
{{#each attributes}}
<tr>
<td>{{name}}</td>
<td>{{value}}</td>
<td>{{{value}}}</td>
</tr>
{{/each}}
{{else}}

14
src/Elements/Elements.scss
View File

@@ -43,7 +43,7 @@
border-bottom: 1px solid $gray-light;
li {
@include overflow-auto(x);
cursor: pointer;
cursor: default;
padding: $padding;
border-top: 1px solid $gray-light;
white-space: nowrap;
@@ -51,6 +51,9 @@
span {
transition: color $anim-duration;
}
&.active-effect {
cursor: pointer;
}
&.active-effect:active {
background: $blue;
color: #fff;
@@ -63,6 +66,9 @@
.attributes {
background: #fff;
font-size: 12px;
a {
color: $blue;
}
.table-wrapper {
@include overflow-auto(x);
}
@@ -89,6 +95,9 @@
.computed-style {
background: #fff;
font-size: 12px;
a {
color: $blue;
}
.table-wrapper {
@include overflow-auto(y);
max-height: 200px;
@@ -117,6 +126,9 @@
.rule {
padding-left: 2em;
word-break: break-all;
a {
color: $blue;
}
span {
color: $red;
}

2
test/index.html
View File

@@ -10,7 +10,7 @@
<body>
<div id="test-element" class="border" style="color:red">
<!-- This is a comment -->
<div class="child-one">One</div>
<div class="child-one" style="background-image: url(http://7xn2zy.com1.z0.glb.clouddn.com/blog_elf.jpg); color: rgb(255, 80, 0);">One</div>
<div class="child-two">Two</div>
<a href="https://github.com/liriliri/eruda">GitHub</a>
<div class="child-three" style="height: 500px">