From 99bd4dd7b307fe4ad40d48de99183e852983f89b Mon Sep 17 00:00:00 2001 From: surunzi Date: Sun, 8 May 2016 21:35:08 +0800 Subject: [PATCH] Dev: Source panel --- eustia/pxToNum.js | 6 -- package.json | 5 +- src/Console/Log.es6 | 9 +++ src/Elements/Elements.es6 | 2 +- src/Elements/Highlight.es6 | 7 ++- src/Sources/Sources.es6 | 85 ++++++++++++++++++++++------ src/Sources/Sources.scss | 15 ++--- src/Sources/Sourees.hbs | 0 src/Sources/TreeView.es6 | 10 ---- src/Sources/TreeView.scss | 0 src/Sources/code.hbs | 1 + src/Sources/highlight.es6 | 110 +++++++++++++++++++++++++++++++++++++ src/Sources/html.hbs | 3 - src/lib/util.js | 80 ++++++++++++--------------- src/style.scss | 6 +- 15 files changed, 237 insertions(+), 102 deletions(-) delete mode 100644 eustia/pxToNum.js delete mode 100644 src/Sources/Sourees.hbs delete mode 100644 src/Sources/TreeView.es6 delete mode 100644 src/Sources/TreeView.scss create mode 100644 src/Sources/code.hbs create mode 100644 src/Sources/highlight.es6 delete mode 100644 src/Sources/html.hbs diff --git a/eustia/pxToNum.js b/eustia/pxToNum.js deleted file mode 100644 index 158cc12..0000000 --- a/eustia/pxToNum.js +++ /dev/null @@ -1,6 +0,0 @@ -_('toNum'); - -function exports(str) -{ - return toNum(str.replace('px', '')); -} \ No newline at end of file diff --git a/package.json b/package.json index 6618dd6..3c72e32 100644 --- a/package.json +++ b/package.json @@ -29,8 +29,10 @@ "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.6.0", "css-loader": "^0.23.1", + "draggabilly": "^2.1.0", "handlebars": "^4.0.5", "handlebars-loader": "^1.1.4", + "js-beautify": "^1.6.2", "json-loader": "^0.5.4", "modernizr": "^3.3.1", "node-sass": "^3.4.2", @@ -38,7 +40,6 @@ "postcss-loader": "^0.8.1", "sass-loader": "^3.1.2", "style-loader": "^0.13.0", - "webpack": "^1.12.14", - "draggabilly": "^2.1.0" + "webpack": "^1.12.14" } } diff --git a/src/Console/Log.es6 b/src/Console/Log.es6 index 8de8f96..7e5a096 100644 --- a/src/Console/Log.es6 +++ b/src/Console/Log.es6 @@ -182,6 +182,8 @@ export default class Log extends util.Emitter times: 1 }); + if (!log.isCode) log.val = txtToHtml(log.val); + var lastLog = this._lastLog; if (lastLog.type === log.type && lastLog.val === log.val) @@ -322,3 +324,10 @@ function transCode(code) { return code.replace(/\n/g, '
').replace(/ /g, ' '); } + +function txtToHtml(str) +{ + return str.replace(/\n/g, '
') + .replace(/\t/g, '    ') + .replace(/ /g, '  '); +} diff --git a/src/Elements/Elements.es6 b/src/Elements/Elements.es6 index 873832f..8ae3c22 100644 --- a/src/Elements/Elements.es6 +++ b/src/Elements/Elements.es6 @@ -138,7 +138,7 @@ export default class Elements extends Tool function formatElName(tagName, id, className, attributes) { - var ret = '' + tagName.toLowerCase() + ''; + var ret = '' + tagName.toLowerCase() + ''; if (id !== '') ret += '#' + id; diff --git a/src/Elements/Highlight.es6 b/src/Elements/Highlight.es6 index d94491a..da30b44 100644 --- a/src/Elements/Highlight.es6 +++ b/src/Elements/Highlight.es6 @@ -44,7 +44,7 @@ export default class Highlight function getNumStyle(name) { - return util.pxToNum(computedStyle.getPropertyValue(name)); + return pxToNum(computedStyle.getPropertyValue(name)); } var ml = getNumStyle('margin-left'), @@ -95,4 +95,9 @@ export default class Highlight this._$padding = this._$el.find('.eruda-padding'); this._$content = this._$el.find('.eruda-content'); } +} + +function pxToNum(str) +{ + return util.toNum(str.replace('px', '')); } \ No newline at end of file diff --git a/src/Sources/Sources.es6 b/src/Sources/Sources.es6 index 0c2fef1..3de2482 100644 --- a/src/Sources/Sources.es6 +++ b/src/Sources/Sources.es6 @@ -1,6 +1,7 @@ import Tool from '../DevTools/Tool.es6' -import TreeView from './TreeView.es6' import util from '../lib/util' +import beautify from 'js-beautify' +import highlight from './highlight.es6' require('./Sources.scss'); @@ -10,54 +11,104 @@ export default class Sources extends Tool { super(); this.name = 'sources'; + this._isInit = false; this._loadTpl(); - this._reset(); } init($el) { super.init($el); - - this._render(); } set(data) { this._data = data; + + this._render(); + } + show() + { + super.show(); + + if (!this._isInit) this._reset(); } _reset() { - this._data = { - type: 'html', - val: document.documentElement - }; + if (this._html) + { + this._data = { + type: 'html', + val: this._html + }; + + return this._render(); + } + get(location.href, (err, data) => + { + if (err) return; + + this._html = data; + this._reset(); + }); } _loadTpl() { - this._htmlTpl = require('./html.hbs'); + this._codeTpl = require('./code.hbs'); } _render() { + this._isInit = true; + var data = this._data; switch (data.type) { - case 'html': return this._renderHtml(); + case 'html': + case 'js': + case 'css': + return this._renderCode(); } } - _renderHtml() + _renderCode() { var data = this._data; - var rootNode = data.val; + var code = ''; - this._$el.html(this._htmlTpl); - new TreeView(this._$el.find('.eruda-tree'), getNodeChildren(rootNode)); + switch (data.type) + { + case 'html': + code = beautify.html(data.val); + break; + case 'css': + code = beautify.css(data.val); + break; + case 'js': + code = beautify(data.val); + break; + } + + code = highlight(code, data.type); + + this._$el.html(this._codeTpl({code: code})); } } -function getNodeChildren(rootNode) +function get(url, cb) { - var ret = []; + var xhr = new window.XMLHttpRequest(); - var children = rootNode.childNodes; + 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(); } \ No newline at end of file diff --git a/src/Sources/Sources.scss b/src/Sources/Sources.scss index c9fe349..160b1e7 100644 --- a/src/Sources/Sources.scss +++ b/src/Sources/Sources.scss @@ -2,17 +2,10 @@ .dev-tools { .tools { .sources { - .empty { - width: 100%; - height: 100%; - .content { - position: absolute; - top: 50%; - left: 0; - width: 100%; - text-align: center; - transform: translate3d(0, -50%, 0); - } + .code { + padding: $common-padding; + overflow-x: scroll; + min-height: 100%; } } } } \ No newline at end of file diff --git a/src/Sources/Sourees.hbs b/src/Sources/Sourees.hbs deleted file mode 100644 index e69de29..0000000 diff --git a/src/Sources/TreeView.es6 b/src/Sources/TreeView.es6 deleted file mode 100644 index 7f9e5ad..0000000 --- a/src/Sources/TreeView.es6 +++ /dev/null @@ -1,10 +0,0 @@ -require('./TreeView.scss'); - -export default class TreeView -{ - constructor($parent, initialData) - { - this._$parent = $parent; - this._data = initialData; - } -} \ No newline at end of file diff --git a/src/Sources/TreeView.scss b/src/Sources/TreeView.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/Sources/code.hbs b/src/Sources/code.hbs new file mode 100644 index 0000000..c07fca8 --- /dev/null +++ b/src/Sources/code.hbs @@ -0,0 +1 @@ +
{{{code}}}
\ No newline at end of file diff --git a/src/Sources/highlight.es6 b/src/Sources/highlight.es6 new file mode 100644 index 0000000..9047b03 --- /dev/null +++ b/src/Sources/highlight.es6 @@ -0,0 +1,110 @@ +import util from '../lib/util' + +// https://github.com/trentrichardson/jQuery-Litelighter + +export default function highlight(str, lang) +{ + str = str.replace(//g, '>'); + + lang = language[lang]; + + var subLangSi = 0, + subLangs = []; + + util.each(lang, (val) => + { + if (!val.language) return; + + str = str.replace(val.re, function($1, $2, $3) + { + subLangs[subLangSi++] = highlight($2, val.language); + return $1.replace($2, '___subtmpl'+ (subLangSi - 1) +'___'); + }); + }); + + util.each(lang, (val, key) => + { + if (language[val.language]) return; + + str = str.replace(val.re, "___"+ key +"___$1___end"+ key +"___"); + }); + + var lvls = []; + + str = str.replace(/___(?!subtmpl)\w+?___/g, function($0) + { + var end = $0.substr(3, 3) ==='end', + tag = (!end? $0.substr(3) : $0.substr(6)).replace(/_/g,''), + lastTag = lvls.length > 0 ? lvls[lvls.length - 1] : null; + + if(!end && (lastTag == null || tag == lastTag || (lastTag != null && lang[lastTag].embed != undefined && lang[lastTag].embed.indexOf(tag) > -1))) + { + lvls.push(tag); + + return $0; + } else if(end && tag == lastTag) + { + lvls.pop(); + + return $0; + } + + return ""; + }); + + util.each(lang, (val, key) => + { + str = str.replace(new RegExp("___end"+ key +"___","g"), "") + .replace(new RegExp("___"+ key +"___","g"), ""); + }); + + util.each(lang, (val) => + { + if (!val.language) return; + + str = str.replace(/___subtmpl\d+___/g, function($tmpl) + { + var i = parseInt($tmpl.replace(/___subtmpl(\d+)___/, "$1"), 10); + return subLangs[i]; + }); + }); + + return str; +}; + +var style = { + code: 'background-color:#ffffff;color:#555;', + comment: 'color:#969896', + string: 'color:#183691', + number: 'color:#0086b3;', + keyword: 'color:#a71d5d;', + operators: 'color:#a71d5d;' +}; + +var language = {}; + +language.js = { + comment: {re: /(\/\/.*|\/\*([\s\S]*?)\*\/)/g, style: 'comment'}, + string: {re: /(('.*?')|(".*?"))/g, style: 'string'}, + numbers: {re: /(\-?(\d+|\d+\.\d+|\.\d+))/g, style: 'number'}, + regex: {re: /([^\/]\/[^\/].+\/(g|i|m)*)/g, style: 'number'}, + keywords: {re: /(?:\b)(function|for|foreach|while|if|else|elseif|switch|break|as|return|this|class|self|default|var|false|true|null|undefined)(?:\b)/gi, style: 'keyword'}, + operators: {re: /(\+|\-|\/|\*|%|=|<|>|\||\?|\.)/g, style: 'operators'} +}; + +language.html = { + comment: {re: /(<!\-\-([\s\S]*?)\-\->)/g, style: 'comment'}, + tag: {re: /(<\/?\w(.|\n)*?\/?>)/g, style: 'keyword', embed: ['string']}, + string: language.js.string, + css: {re: /(?:<style.*?>)([\s\S]+?)(?:<\/style>)/gi, language: 'css'}, + script: {re: /(?:<script.*?>)([\s\S]+?)(?:<\/script>)/gi, language: 'js'} +}; + +language.css = { + comment: language.js.comment, + string: language.js.string, + numbers: {re: /((\-?(\d+|\d+\.\d+|\.\d+)(%|px|em|pt|in)?)|#[0-9a-fA-F]{3}[0-9a-fA-F]{3})/g, style: 'number'}, + keywords: {re: /(@\w+|:?:\w+|[a-z\-]+:)/g, style: 'keyword'} +}; + + diff --git a/src/Sources/html.hbs b/src/Sources/html.hbs deleted file mode 100644 index 7eeba48..0000000 --- a/src/Sources/html.hbs +++ /dev/null @@ -1,3 +0,0 @@ -
-
-
\ No newline at end of file diff --git a/src/lib/util.js b/src/lib/util.js index 51f959f..441254a 100644 --- a/src/lib/util.js +++ b/src/lib/util.js @@ -2268,52 +2268,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; - })({}); - - /* ------------------------------ pxToNum ------------------------------ */ - - var pxToNum = _.pxToNum = (function (exports) - { - function exports(str) - { - return toNum(str.replace('px', '')); - } - - return exports; - })({}); - /* ------------------------------ rtrim ------------------------------ */ var rtrim = _.rtrim = (function (exports) @@ -2392,6 +2346,40 @@ 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/src/style.scss b/src/style.scss index 30d4d08..feb43ee 100644 --- a/src/style.scss +++ b/src/style.scss @@ -1,6 +1,6 @@ @import "variable"; -#eruda { +.container { pointer-events: none; position: fixed; left: 0; @@ -19,10 +19,6 @@ padding: 0; margin: 0; } - pre { - padding: 0; - margin: 0; - } h1, h2, h3, h4 { margin: 0; }