mirror of
https://github.com/liriliri/eruda.git
synced 2026-03-24 09:48:37 +08:00
Dev: Sources
This commit is contained in:
@@ -24,11 +24,12 @@ export default class Console extends Tool
|
||||
overrideConsole()
|
||||
{
|
||||
var log = this._log,
|
||||
origConsole = {},
|
||||
winConsole = window.console;
|
||||
|
||||
function override(name)
|
||||
{
|
||||
var origin = winConsole[name];
|
||||
var origin = origConsole[name] = winConsole[name];
|
||||
|
||||
winConsole[name] = function ()
|
||||
{
|
||||
@@ -38,9 +39,9 @@ export default class Console extends Tool
|
||||
};
|
||||
}
|
||||
|
||||
var methods = ['log', 'error', 'info', 'warn', 'dir', 'time', 'timeEnd', 'clear'];
|
||||
CONSOLE_METHOD.forEach((name) => override(name));
|
||||
|
||||
methods.forEach((name) => override(name));
|
||||
this._origConsole = origConsole;
|
||||
|
||||
return this;
|
||||
}
|
||||
@@ -61,7 +62,15 @@ export default class Console extends Tool
|
||||
{
|
||||
super.destroy();
|
||||
|
||||
window.onerror = this._origOnerror;
|
||||
var origOnerror = this._origOnerror;
|
||||
if (origOnerror) window.onerror = origOnerror;
|
||||
|
||||
var origConsole = this._origConsole;
|
||||
if (origConsole)
|
||||
{
|
||||
var winConsole = window.console;
|
||||
CONSOLE_METHOD.forEach((name) => winConsole[name] = origConsole[name]);
|
||||
}
|
||||
}
|
||||
_appendTpl()
|
||||
{
|
||||
@@ -150,3 +159,5 @@ export default class Console extends Tool
|
||||
}
|
||||
}
|
||||
|
||||
const CONSOLE_METHOD = ['log', 'error', 'info', 'warn', 'dir', 'time', 'timeEnd', 'clear'];
|
||||
|
||||
|
||||
@@ -10,10 +10,12 @@ function activeEruda(flag)
|
||||
window.localStorage.setItem('active-eruda', flag);
|
||||
}
|
||||
|
||||
export default class DevTools
|
||||
export default class DevTools extends util.Emitter
|
||||
{
|
||||
constructor($parent)
|
||||
{
|
||||
super();
|
||||
|
||||
this._$parent = $parent;
|
||||
this._isShow = false;
|
||||
this._opacity = 1;
|
||||
@@ -53,7 +55,7 @@ export default class DevTools
|
||||
var name = tool.name;
|
||||
|
||||
this._$tools.append('<div class="eruda-' + name + ' eruda-tool"></div>');
|
||||
tool.init(this._$tools.find('.eruda-' + name));
|
||||
tool.init(this._$tools.find('.eruda-' + name), this);
|
||||
tool.active = false;
|
||||
this._tools[name] = tool;
|
||||
|
||||
@@ -96,8 +98,12 @@ export default class DevTools
|
||||
var tool = tools[name];
|
||||
if (!tool) return;
|
||||
|
||||
var lastTool = {};
|
||||
|
||||
util.each(tools, (tool) =>
|
||||
{
|
||||
if (tool.active) lastTool = tool;
|
||||
|
||||
tool.active = false;
|
||||
tool.hide();
|
||||
});
|
||||
@@ -107,6 +113,8 @@ export default class DevTools
|
||||
|
||||
this._navBar.activeTool(name);
|
||||
|
||||
this.emit('showTool', name, lastTool);
|
||||
|
||||
return this;
|
||||
}
|
||||
_initConfig()
|
||||
|
||||
@@ -3,26 +3,6 @@ import util from '../lib/util'
|
||||
|
||||
require('./Resources.scss');
|
||||
|
||||
function getState(type, len)
|
||||
{
|
||||
if (type === 'localStore' || len === 0) return '';
|
||||
|
||||
var warn = 0, danger = 0;
|
||||
|
||||
switch (type)
|
||||
{
|
||||
case 'cookie': warn = 30; danger = 60; break;
|
||||
case 'script': warn = 5; danger = 10; break;
|
||||
case 'stylesheet': warn = 4; danger = 8; break;
|
||||
case 'image': warn = 50; danger = 100; break;
|
||||
}
|
||||
|
||||
if (len >= danger) return 'eruda-danger';
|
||||
if (len >= warn) return 'eruda-warn';
|
||||
|
||||
return 'eruda-ok';
|
||||
}
|
||||
|
||||
export default class Resources extends Tool
|
||||
{
|
||||
constructor()
|
||||
@@ -36,10 +16,12 @@ export default class Resources extends Tool
|
||||
this._imageData = [];
|
||||
this._tpl = require('./Resources.hbs');
|
||||
}
|
||||
init($el)
|
||||
init($el, parent)
|
||||
{
|
||||
super.init($el);
|
||||
|
||||
this._parent = parent;
|
||||
|
||||
this.refresh();
|
||||
this._bindEvent();
|
||||
}
|
||||
@@ -155,6 +137,8 @@ export default class Resources extends Tool
|
||||
{
|
||||
var self = this;
|
||||
|
||||
var parent = this._parent;
|
||||
|
||||
this._$el.on('click', '.refresh-local-storage', () =>
|
||||
{
|
||||
this.refreshLocalStorage()._render();
|
||||
@@ -179,9 +163,37 @@ export default class Resources extends Tool
|
||||
|
||||
util.cookie.remove(key);
|
||||
self.refreshCookie()._render();
|
||||
});
|
||||
}).on('click', '.css-link', linkFactory('css'))
|
||||
.on('click', '.js-link', linkFactory('js'));
|
||||
|
||||
util.orientation.on('change', () => this._render());
|
||||
|
||||
function linkFactory(type)
|
||||
{
|
||||
return function (e)
|
||||
{
|
||||
var url = util.$(this).attr('href');
|
||||
|
||||
if (!isCrossOrig(url))
|
||||
{
|
||||
e.preventDefault();
|
||||
|
||||
return util.get(url, (err, data) =>
|
||||
{
|
||||
if (err) return;
|
||||
|
||||
var sources = parent.get('sources');
|
||||
|
||||
sources.set({
|
||||
type: type,
|
||||
val: data
|
||||
});
|
||||
|
||||
parent.showTool('sources');
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
_render()
|
||||
{
|
||||
@@ -213,4 +225,31 @@ export default class Resources extends Tool
|
||||
$li.css({height: $li.get(0).offsetWidth});
|
||||
}, 150);
|
||||
}
|
||||
}
|
||||
|
||||
function getState(type, len)
|
||||
{
|
||||
if (type === 'localStore' || len === 0) return '';
|
||||
|
||||
var warn = 0, danger = 0;
|
||||
|
||||
switch (type)
|
||||
{
|
||||
case 'cookie': warn = 30; danger = 60; break;
|
||||
case 'script': warn = 5; danger = 10; break;
|
||||
case 'stylesheet': warn = 4; danger = 8; break;
|
||||
case 'image': warn = 50; danger = 100; break;
|
||||
}
|
||||
|
||||
if (len >= danger) return 'eruda-danger';
|
||||
if (len >= warn) return 'eruda-warn';
|
||||
|
||||
return 'eruda-ok';
|
||||
}
|
||||
|
||||
var origin = window.location.origin;
|
||||
|
||||
function isCrossOrig(url)
|
||||
{
|
||||
return !util.startWith(url, origin);
|
||||
}
|
||||
@@ -63,7 +63,7 @@
|
||||
{{#if scriptData}}
|
||||
{{#each scriptData}}
|
||||
<li>
|
||||
<a href="{{this}}" target="_blank">{{this}}</a>
|
||||
<a href="{{this}}" target="_blank" class="js-link">{{this}}</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
{{else}}
|
||||
@@ -82,7 +82,7 @@
|
||||
{{#if stylesheetData}}
|
||||
{{#each stylesheetData}}
|
||||
<li>
|
||||
<a href="{{this}}" target="_blank">{{this}}</a>
|
||||
<a href="{{this}}" target="_blank" class="css-link">{{this}}</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
{{else}}
|
||||
|
||||
@@ -15,9 +15,12 @@ export default class Sources extends Tool
|
||||
|
||||
this._loadTpl();
|
||||
}
|
||||
init($el)
|
||||
init($el, parent)
|
||||
{
|
||||
super.init($el);
|
||||
|
||||
this._parent = parent;
|
||||
this._bindEvent();
|
||||
}
|
||||
set(data)
|
||||
{
|
||||
@@ -42,7 +45,7 @@ export default class Sources extends Tool
|
||||
|
||||
return this._render();
|
||||
}
|
||||
get(location.href, (err, data) =>
|
||||
util.get(location.href, (err, data) =>
|
||||
{
|
||||
if (err) return;
|
||||
|
||||
@@ -50,6 +53,13 @@ export default class Sources extends Tool
|
||||
this._reset();
|
||||
});
|
||||
}
|
||||
_bindEvent()
|
||||
{
|
||||
this._parent.on('showTool', (name, lastTool) =>
|
||||
{
|
||||
if (name !== this.name && lastTool.name === this.name) this._reset();
|
||||
});
|
||||
}
|
||||
_loadTpl()
|
||||
{
|
||||
this._codeTpl = require('./code.hbs');
|
||||
@@ -72,43 +82,27 @@ export default class Sources extends Tool
|
||||
{
|
||||
var data = this._data;
|
||||
|
||||
var code = '';
|
||||
var code = data.val;
|
||||
|
||||
switch (data.type)
|
||||
// If source code too big, don't process it.
|
||||
if (data.val.length < 100000)
|
||||
{
|
||||
case 'html':
|
||||
code = beautify.html(data.val);
|
||||
break;
|
||||
case 'css':
|
||||
code = beautify.css(data.val);
|
||||
break;
|
||||
case 'js':
|
||||
code = beautify(data.val);
|
||||
break;
|
||||
}
|
||||
switch (data.type)
|
||||
{
|
||||
case 'html':
|
||||
code = beautify.html(code);
|
||||
break;
|
||||
case 'css':
|
||||
code = beautify.css(code);
|
||||
break;
|
||||
case 'js':
|
||||
code = beautify(code);
|
||||
break;
|
||||
}
|
||||
|
||||
code = highlight(code, data.type);
|
||||
code = highlight(code, data.type);
|
||||
}
|
||||
|
||||
this._$el.html(this._codeTpl({code: code}));
|
||||
}
|
||||
}
|
||||
|
||||
function get(url, cb)
|
||||
{
|
||||
var xhr = new window.XMLHttpRequest();
|
||||
|
||||
xhr.onload = function ()
|
||||
{
|
||||
var status = xhr.status;
|
||||
|
||||
if ((status >= 200 && status < 300) || status === 304)
|
||||
{
|
||||
cb(null, xhr.responseText);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = function () { cb(xhr) };
|
||||
|
||||
xhr.open('GET', url);
|
||||
xhr.send();
|
||||
}
|
||||
@@ -2,9 +2,11 @@
|
||||
|
||||
.dev-tools { .tools {
|
||||
.sources {
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
.code {
|
||||
padding: $common-padding;
|
||||
overflow-x: scroll;
|
||||
overflow-x: auto;
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -457,6 +457,33 @@ module.exports = (function ()
|
||||
return exports;
|
||||
})({});
|
||||
|
||||
/* ------------------------------ get ------------------------------ */
|
||||
|
||||
var get = _.get = (function (exports)
|
||||
{
|
||||
function exports(url, cb)
|
||||
{
|
||||
var xhr = new window.XMLHttpRequest();
|
||||
|
||||
xhr.onload = function ()
|
||||
{
|
||||
var status = xhr.status;
|
||||
|
||||
if ((status >= 200 && status < 300) || status === 304)
|
||||
{
|
||||
cb(null, xhr.responseText);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = function () { cb(xhr) };
|
||||
|
||||
xhr.open('GET', url);
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
return exports;
|
||||
})({});
|
||||
|
||||
/* ------------------------------ identity ------------------------------ */
|
||||
|
||||
var identity = _.identity = (function (exports)
|
||||
|
||||
Reference in New Issue
Block a user