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

Add: Select element from page

Browse Source
This commit is contained in:
surunzi
2016-05-12 17:56:09 +08:00
parent fd6918c58c
commit b77e03703c
9 changed files with 112 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "eruda",
"version": "0.3.2",
"version": "0.3.3",
"description": "Console for mobile JavaScript",
"main": "dist/eruda.js",
"scripts": {

9
src/Elements/BottomBar.hbs
View File

@@ -1,6 +1,7 @@
<div class="eruda-bottom-bar">
<div class="eruda-btn back" ontouchstart>Back</div>
<div class="eruda-btn refresh" ontouchstart>Refresh</div>
<div class="eruda-btn highlight" ontouchstart>Highlight</div>
<div class="eruda-btn reset" ontouchstart>Reset</div>
<div class="eruda-btn eruda-back" ontouchstart>Back</div>
<div class="eruda-btn eruda-select">Select</div>
<div class="eruda-btn eruda-refresh" ontouchstart>Refresh</div>
<div class="eruda-btn eruda-highlight" ontouchstart>Highlight</div>
<div class="eruda-btn eruda-reset" ontouchstart>Reset</div>
</div>

39
src/Elements/Elements.es6
View File

@@ -1,6 +1,7 @@
import Tool from '../DevTools/Tool.es6'
import CssStore from './CssStore.es6'
import Highlight from './Highlight.es6'
import Select from './Select.es6'
import util from '../lib/util'
require('./Elements.scss');
@@ -25,9 +26,10 @@ export default class Elements extends Tool
this._$showArea = $el.find('.eruda-show-area');
$el.append(require('./BottomBar.hbs')());
this._bindEvent();
this._htmlEl = document.documentElement;
this._initHighlight();
this._initSelect();
this._bindEvent();
this._setEl(this._htmlEl);
}
show()
@@ -49,7 +51,9 @@ export default class Elements extends Tool
}
_bindEvent()
{
var self = this;
var self = this,
parent = this._parent,
select = this._select;
this._$el.on('click', '.eruda-child', function ()
{
@@ -88,14 +92,26 @@ export default class Elements extends Tool
var $bottomBar = this._$el.find('.eruda-bottom-bar');
$bottomBar.on('click', '.back', () => this._back())
.on('click', '.refresh', () => this._render())
.on('click', '.highlight', function ()
$bottomBar.on('click', '.eruda-back', () => this._back())
.on('click', '.eruda-refresh', () => this._render())
.on('click', '.eruda-highlight', () => this._toggleHighlight())
.on('click', '.eruda-select', () =>
{
util.$(this).toggleClass('eruda-active');
self._toggleHighlight()
parent.hide();
if (this._highlightElement) this._toggleHighlight();
this._render();
this._select.enable();
})
.on('click', '.reset', () => this._setEl(this._htmlEl));
.on('click', '.eruda-reset', () => this._setEl(this._htmlEl));
select.on('select', (target) =>
{
parent.show();
if (!this._highlightElement) this._toggleHighlight();
this._setEl(target);
});
}
_toggleAllComputedStyle()
{
@@ -107,8 +123,13 @@ export default class Elements extends Tool
{
this._highlight = new Highlight(this._parent.$parent);
}
_initSelect()
{
this._select = new Select();
}
_toggleHighlight()
{
this._$el.find('.eruda-highlight').toggleClass('eruda-active');
this._highlightElement = !this._highlightElement;
this._render();
@@ -202,7 +223,7 @@ function formatElName(data)
if (name === 'id' || name === 'class' || name === 'style') return;
ret += ` ' ${name}="${attr.value}"`;
ret += ` ${name}="${attr.value}"`;
});
return ret;

8
src/Elements/Highlight.es6
View File

@@ -4,9 +4,9 @@ require('./Highlight.scss');
export default class Highlight
{
constructor($container)
constructor($parent)
{
this._appendTpl($container);
this._appendTpl($parent);
}
setEl(el)
{
@@ -86,9 +86,9 @@ export default class Highlight
height: bh - pt - pb
});
}
_appendTpl($container)
_appendTpl($parent)
{
$container.append(require('./Highlight.hbs')());
$parent.append(require('./Highlight.hbs')());
this._$el = util.$('.eruda-elements-highlight');
this._$margin = this._$el.find('.eruda-margin');

32
src/Elements/Select.es6 Normal file
View File

@@ -0,0 +1,32 @@
import util from '../lib/util'
export default class Select extends util.Emitter
{
constructor()
{
super();
var self = this;
this._listener = function (e)
{
self.disable().emit('select', e.target);
return false;
};
}
enable()
{
document.body.addEventListener('click', this._listener, true);
return this;
}
disable()
{
document.body.removeEventListener('click', this._listener, true);
return this;
}
}
const CLASS_NAME = 'eruda-elements-select';

2
src/Network/Request.es6
View File

@@ -89,6 +89,8 @@ function getType(contentType)
function formatSize(size)
{
if (!util.isNum(size)) size = 0;
if (size < 1024) return size + 'B';
return (size / 1024).toFixed(1) + 'KB';

72
src/Resources/Resources.es6
View File

@@ -135,49 +135,45 @@ export default class Resources extends Tool
}
_bindEvent()
{
var self = this;
var self = this,
$el = this._$el,
parent = this._parent;
var parent = this._parent;
$el.on('click', '.refresh-local-storage', () => this.refreshLocalStorage()._render())
.on('click', '.refresh-cookie', () => this.refreshCookie()._render())
.on('click', '.refresh-script', () => this.refreshScript()._render())
.on('click', '.refresh-image', () => this.refreshImage()._render())
.on('click', '.delete-local-storage', function (e)
{
var key = util.$(this).data('key');
this._$el.on('click', '.refresh-local-storage', () =>
{
this.refreshLocalStorage()._render();
}).on('click', '.refresh-cookie', () =>
{
this.refreshCookie()._render();
}).on('click', '.refresh-script', () =>
{
this.refreshScript()._render();
}).on('click', '.refresh-image', () =>
{
this.refreshImage()._render();
}).on('click', '.delete-local-storage', function (e)
{
var key = util.$(this).data('key');
localStorage.removeItem(key);
self.refreshLocalStorage()._render();
})
.on('click', '.delete-cookie', function ()
{
var key = util.$(this).data('key');
localStorage.removeItem(key);
self.refreshLocalStorage()._render();
}).on('click', '.delete-cookie', function ()
{
var key = util.$(this).data('key');
util.cookie.remove(key);
self.refreshCookie()._render();
})
.on('click', '.eruda-local-storage-val', function ()
{
var key = util.$(this).data('key'),
val = localStorage.getItem(key);
util.cookie.remove(key);
self.refreshCookie()._render();
}).on('click', '.eruda-local-storage-val', function ()
{
var key = util.$(this).data('key'),
val = localStorage.getItem(key);
try {
showSources('json', JSON.parse(val));
} catch(e) {}
})
.on('click', '.img-link', function ()
{
var src = util.$(this).attr('src');
try {
showSources('json', JSON.parse(val));
} catch(e) {}
}).on('click', '.img-link', function ()
{
var src = util.$(this).attr('src');
showSources('img', src);
}).on('click', '.css-link', linkFactory('css'))
.on('click', '.js-link', linkFactory('js'));
showSources('img', src);
})
.on('click', '.css-link', linkFactory('css'))
.on('click', '.js-link', linkFactory('js'));
util.orientation.on('change', () => this._render());

3
src/Sources/Sources.scss
View File

@@ -46,6 +46,9 @@
font-size: 14px;
padding: 5px 10px;
}
.key {
white-space: nowrap;
}
}
}
.response {

2
src/Sources/http.hbs
View File

@@ -6,7 +6,7 @@
<tbody>
{{#each resHeaders}}
<tr>
<td>{{@key}}</td>
<td class="eruda-key">{{@key}}</td>
<td>{{.}}</td>
</tr>
{{/each}}