Dev: Settings
This commit is contained in:
surunzi
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1,3 +1,3 @@
|
||||
/.idea/
|
||||
/node_modules/
|
||||
/dist/eruda.min.js
|
||||
/dist/
|
||||
2101
dist/eruda.js
vendored
2101
dist/eruda.js
vendored
File diff suppressed because it is too large
Load Diff
@@ -41,7 +41,6 @@
|
||||
"webpack": "^1.12.14"
|
||||
},
|
||||
"dependencies": {
|
||||
"draggabilly": "^2.1.0",
|
||||
"fastclick": "^1.0.6"
|
||||
"draggabilly": "^2.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,7 +14,6 @@
|
||||
font-size: 13px;
|
||||
background: #fff;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
} }
|
||||
@@ -1,5 +1,6 @@
|
||||
import NavBar from './NavBar.es6'
|
||||
import util from '../util'
|
||||
import config from '../config/config.es6'
|
||||
|
||||
require('./DevTools.scss');
|
||||
|
||||
@@ -9,16 +10,20 @@ export default class DevTools
|
||||
{
|
||||
this._$parent = $parent;
|
||||
this._isShow = false;
|
||||
this._opacity = 1;
|
||||
this._tools = {};
|
||||
|
||||
this._appendTpl();
|
||||
this._initNavBar();
|
||||
this._initConfig();
|
||||
}
|
||||
show()
|
||||
{
|
||||
this._isShow = true;
|
||||
|
||||
this._$el.addClass('eruda-show').rmClass('eruda-hide');
|
||||
this._$el.show();
|
||||
// Need a delay after show to enable transition effect.
|
||||
setTimeout(() => this._$el.css('opacity', this._opacity), 50);
|
||||
|
||||
return this;
|
||||
}
|
||||
@@ -26,8 +31,8 @@ export default class DevTools
|
||||
{
|
||||
this._isShow = false;
|
||||
|
||||
this._$el.addClass('eruda-hide').rmClass('eruda-show');
|
||||
setTimeout(() => this._$el.rmClass('eruda-hide'), 300);
|
||||
this._$el.css({opacity: 0});
|
||||
setTimeout(() => this._$el.hide(), 300);
|
||||
|
||||
return this;
|
||||
}
|
||||
@@ -74,6 +79,38 @@ export default class DevTools
|
||||
|
||||
return this;
|
||||
}
|
||||
_initConfig()
|
||||
{
|
||||
var cfg = this.config = config.create('eruda-dev-tools');
|
||||
|
||||
cfg.set(util.defaults(cfg.get(), {
|
||||
transparent: false,
|
||||
halfScreen: false
|
||||
}));
|
||||
|
||||
if (cfg.get('transparent')) this._setTransparency(true);
|
||||
if (cfg.get('halfScreen')) this._setHalfScreen(true);
|
||||
|
||||
cfg.on('change', (key, val) =>
|
||||
{
|
||||
switch (key)
|
||||
{
|
||||
case 'transparent': return this._setTransparency(val);
|
||||
case 'halfScreen': return this._setHalfScreen(val);
|
||||
}
|
||||
});
|
||||
}
|
||||
_setTransparency(flag)
|
||||
{
|
||||
this._opacity = flag ? 0.9 : 1;
|
||||
if (this._isShow) this._$el.css({opacity: this._opacity});
|
||||
}
|
||||
_setHalfScreen(flag)
|
||||
{
|
||||
this._$el.css({
|
||||
height: flag ? '50%': '100%'
|
||||
});
|
||||
}
|
||||
_appendTpl()
|
||||
{
|
||||
var $parent = this._$parent;
|
||||
|
||||
@@ -5,19 +5,15 @@
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-top: 50px !important;
|
||||
background: #fff;
|
||||
z-index: 500;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity .3s;
|
||||
transform: translateZ(0);
|
||||
&.show {
|
||||
display: block !important;
|
||||
animation: show-menu .3s linear both;
|
||||
}
|
||||
&.hide {
|
||||
display: block !important;
|
||||
animation: hide-menu .3s linear both;
|
||||
}
|
||||
.tools {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@@ -27,6 +23,7 @@
|
||||
.tool {
|
||||
transform: translateZ(0);
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: $gray-light;
|
||||
@@ -36,23 +33,3 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes show-menu {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hide-menu {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -3,18 +3,17 @@ import Draggabilly from 'draggabilly'
|
||||
|
||||
require('./HomeBtn.scss');
|
||||
|
||||
export default class HomeBtn
|
||||
export default class HomeBtn extends util.Emitter
|
||||
{
|
||||
constructor($parent)
|
||||
{
|
||||
super();
|
||||
this._$parent = $parent;
|
||||
|
||||
this._appendTpl();
|
||||
this._makeDraggable();
|
||||
this._setPos();
|
||||
this._bindEvent();
|
||||
|
||||
util.Emitter.mixin(this);
|
||||
}
|
||||
_appendTpl()
|
||||
{
|
||||
|
||||
@@ -2,16 +2,15 @@ import util from '../util'
|
||||
|
||||
require('./NavBar.scss');
|
||||
|
||||
export default class NavBar
|
||||
export default class NavBar extends util.Emitter
|
||||
{
|
||||
constructor($el)
|
||||
{
|
||||
super();
|
||||
this._$el = $el;
|
||||
this._len = 0;
|
||||
|
||||
this._bindEvent();
|
||||
|
||||
util.Emitter.mixin(this);
|
||||
}
|
||||
add(name)
|
||||
{
|
||||
|
||||
@@ -16,4 +16,8 @@ export default class Tool
|
||||
|
||||
return this;
|
||||
}
|
||||
getConfig()
|
||||
{
|
||||
return this._config;
|
||||
}
|
||||
}
|
||||
@@ -50,6 +50,7 @@ export default class CssStore
|
||||
{
|
||||
var matchesEl = false;
|
||||
|
||||
// Mobile safari will throw DOM Exception 12 error, need to try catch it.
|
||||
try {
|
||||
matchesEl = this._elMatchesSel(cssRule.selectorText);
|
||||
} catch (e) {}
|
||||
|
||||
@@ -90,6 +90,22 @@ function getAttrStyle(attribute)
|
||||
return ret;
|
||||
}
|
||||
|
||||
var defComputedStyle = require('./defComputedStyle.json');
|
||||
|
||||
function rmDefComputedStyle(computedStyle)
|
||||
{
|
||||
var ret = {};
|
||||
|
||||
util.each(computedStyle, (val, key) =>
|
||||
{
|
||||
if (val === defComputedStyle[key]) return;
|
||||
|
||||
ret[key] = val;
|
||||
});
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
var noStyleTag = ['script', 'style', 'meta', 'title', 'link', 'head'];
|
||||
|
||||
function needNoStyle(tagName)
|
||||
@@ -106,6 +122,7 @@ export default class Elements extends Tool
|
||||
super();
|
||||
this.name = 'elements';
|
||||
this._tpl = require('./Elements.hbs');
|
||||
this._rmDefComputedStyle = true;
|
||||
}
|
||||
init($el)
|
||||
{
|
||||
@@ -119,6 +136,12 @@ export default class Elements extends Tool
|
||||
this._htmlEl = document.getElementsByTagName('html')[0];
|
||||
this._setEl(this._htmlEl, 0);
|
||||
}
|
||||
show()
|
||||
{
|
||||
super.show();
|
||||
|
||||
this._render();
|
||||
}
|
||||
_back()
|
||||
{
|
||||
if (this._curEl === this._htmlEl) return;
|
||||
@@ -139,6 +162,9 @@ export default class Elements extends Tool
|
||||
level = self._curLevel + 1;
|
||||
|
||||
self._setEl(el, level);
|
||||
}).on('click', '.toggle-all-computed-style', () =>
|
||||
{
|
||||
this._toggleAllComputedStyle();
|
||||
});
|
||||
|
||||
var $bottomBar = this._$el.find('.eruda-bottom-bar');
|
||||
@@ -148,6 +174,12 @@ export default class Elements extends Tool
|
||||
.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');
|
||||
@@ -162,6 +194,7 @@ export default class Elements extends Tool
|
||||
this._$curEl = util.$(el);
|
||||
this._curLevel = level;
|
||||
this._curCssStore = new CssStore(el);
|
||||
this._rmDefComputedStyle = true;
|
||||
|
||||
this._render();
|
||||
}
|
||||
@@ -188,7 +221,9 @@ export default class Elements extends Tool
|
||||
|
||||
if (needNoStyle(tagName)) return ret;
|
||||
|
||||
ret.computedStyle = cssStore.getComputedStyle();
|
||||
var computedStyle = cssStore.getComputedStyle();
|
||||
if (this._rmDefComputedStyle) computedStyle = rmDefComputedStyle(computedStyle);
|
||||
ret.computedStyle = computedStyle;
|
||||
|
||||
var styles = cssStore.getMatchedCSSRules();
|
||||
styles.unshift(getAttrStyle(attributes));
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
</div>
|
||||
{{#if computedStyle}}
|
||||
<div class="eruda-computed-style eruda-section">
|
||||
<h2>Computed Style</h2>
|
||||
<h2 class="toggle-all-computed-style">Computed Style</h2>
|
||||
<div class="eruda-table-wrapper">
|
||||
<table>
|
||||
<tbody>
|
||||
|
||||
352
src/Elements/defComputedStyle.json
Normal file
352
src/Elements/defComputedStyle.json
Normal file
@@ -0,0 +1,352 @@
|
||||
{
|
||||
"align-content": "stretch",
|
||||
"align-items": "stretch",
|
||||
"align-self": "start",
|
||||
"alignment-baseline": "auto",
|
||||
"all": "",
|
||||
"animation": "none 0s ease 0s 1 normal none running",
|
||||
"animation-delay": "0s",
|
||||
"animation-direction": "normal",
|
||||
"animation-duration": "0s",
|
||||
"animation-fill-mode": "none",
|
||||
"animation-iteration-count": "1",
|
||||
"animation-name": "none",
|
||||
"animation-play-state": "running",
|
||||
"animation-timing-function": "ease",
|
||||
"backface-visibility": "visible",
|
||||
"background": "rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box",
|
||||
"background-attachment": "scroll",
|
||||
"background-blend-mode": "normal",
|
||||
"background-clip": "border-box",
|
||||
"background-color": "rgba(0, 0, 0, 0)",
|
||||
"background-image": "none",
|
||||
"background-origin": "padding-box",
|
||||
"background-position": "0% 0%",
|
||||
"background-position-x": "0%",
|
||||
"background-position-y": "0%",
|
||||
"background-repeat": "repeat",
|
||||
"background-repeat-x": "",
|
||||
"background-repeat-y": "",
|
||||
"background-size": "auto",
|
||||
"baseline-shift": "0px",
|
||||
"border": "0px none rgb(0, 0, 0)",
|
||||
"border-bottom": "0px none rgb(0, 0, 0)",
|
||||
"border-bottom-color": "rgb(0, 0, 0)",
|
||||
"border-bottom-left-radius": "0px",
|
||||
"border-bottom-right-radius": "0px",
|
||||
"border-bottom-style": "none",
|
||||
"border-bottom-width": "0px",
|
||||
"border-collapse": "separate",
|
||||
"border-color": "rgb(0, 0, 0)",
|
||||
"border-image": "none",
|
||||
"border-image-outset": "0px",
|
||||
"border-image-repeat": "stretch",
|
||||
"border-image-slice": "100%",
|
||||
"border-image-source": "none",
|
||||
"border-image-width": "1",
|
||||
"border-left": "0px none rgb(0, 0, 0)",
|
||||
"border-left-color": "rgb(0, 0, 0)",
|
||||
"border-left-style": "none",
|
||||
"border-left-width": "0px",
|
||||
"border-radius": "0px",
|
||||
"border-right": "0px none rgb(0, 0, 0)",
|
||||
"border-right-color": "rgb(0, 0, 0)",
|
||||
"border-right-style": "none",
|
||||
"border-right-width": "0px",
|
||||
"border-spacing": "0px 0px",
|
||||
"border-style": "none",
|
||||
"border-top": "0px none rgb(0, 0, 0)",
|
||||
"border-top-color": "rgb(0, 0, 0)",
|
||||
"border-top-left-radius": "0px",
|
||||
"border-top-right-radius": "0px",
|
||||
"border-top-style": "none",
|
||||
"border-top-width": "0px",
|
||||
"border-width": "0px",
|
||||
"bottom": "auto",
|
||||
"box-shadow": "none",
|
||||
"box-sizing": "content-box",
|
||||
"buffered-rendering": "auto",
|
||||
"caption-side": "top",
|
||||
"clear": "none",
|
||||
"clip": "auto",
|
||||
"clip-path": "none",
|
||||
"clip-rule": "nonzero",
|
||||
"color": "rgb(0, 0, 0)",
|
||||
"color-interpolation": "sRGB",
|
||||
"color-interpolation-filters": "linearRGB",
|
||||
"color-rendering": "auto",
|
||||
"content": "",
|
||||
"counter-increment": "none",
|
||||
"counter-reset": "none",
|
||||
"cursor": "auto",
|
||||
"cx": "0px",
|
||||
"cy": "0px",
|
||||
"direction": "ltr",
|
||||
"display": "block",
|
||||
"dominant-baseline": "auto",
|
||||
"empty-cells": "show",
|
||||
"fill": "rgb(0, 0, 0)",
|
||||
"fill-opacity": "1",
|
||||
"fill-rule": "nonzero",
|
||||
"filter": "none",
|
||||
"flex": "0 1 auto",
|
||||
"flex-basis": "auto",
|
||||
"flex-direction": "row",
|
||||
"flex-flow": "row nowrap",
|
||||
"flex-grow": "0",
|
||||
"flex-shrink": "1",
|
||||
"flex-wrap": "nowrap",
|
||||
"float": "none",
|
||||
"flood-color": "rgb(0, 0, 0)",
|
||||
"flood-opacity": "1",
|
||||
"font": "normal normal normal normal 16px / normal simsun",
|
||||
"font-family": "Simsun",
|
||||
"font-feature-settings": "normal",
|
||||
"font-kerning": "auto",
|
||||
"font-size": "16px",
|
||||
"font-stretch": "normal",
|
||||
"font-style": "normal",
|
||||
"font-variant": "normal",
|
||||
"font-variant-ligatures": "normal",
|
||||
"font-weight": "normal",
|
||||
"image-rendering": "auto",
|
||||
"isolation": "auto",
|
||||
"justify-content": "flex-start",
|
||||
"left": "auto",
|
||||
"letter-spacing": "normal",
|
||||
"lighting-color": "rgb(255, 255, 255)",
|
||||
"line-height": "normal",
|
||||
"list-style": "disc outside none",
|
||||
"list-style-image": "none",
|
||||
"list-style-position": "outside",
|
||||
"list-style-type": "disc",
|
||||
"margin": "0px",
|
||||
"margin-bottom": "0px",
|
||||
"margin-left": "0px",
|
||||
"margin-right": "0px",
|
||||
"margin-top": "0px",
|
||||
"marker": "",
|
||||
"marker-end": "none",
|
||||
"marker-mid": "none",
|
||||
"marker-start": "none",
|
||||
"mask": "none",
|
||||
"mask-type": "luminance",
|
||||
"max-height": "none",
|
||||
"max-width": "none",
|
||||
"max-zoom": "",
|
||||
"min-height": "0px",
|
||||
"min-width": "0px",
|
||||
"min-zoom": "",
|
||||
"mix-blend-mode": "normal",
|
||||
"motion": "none 0px auto 0deg",
|
||||
"motion-offset": "0px",
|
||||
"motion-path": "none",
|
||||
"motion-rotation": "auto 0deg",
|
||||
"object-fit": "fill",
|
||||
"object-position": "50% 50%",
|
||||
"opacity": "1",
|
||||
"order": "0",
|
||||
"orientation": "",
|
||||
"orphans": "auto",
|
||||
"outline": "rgb(0, 0, 0) none 0px",
|
||||
"outline-color": "rgb(0, 0, 0)",
|
||||
"outline-offset": "0px",
|
||||
"outline-style": "none",
|
||||
"outline-width": "0px",
|
||||
"overflow": "visible",
|
||||
"overflow-wrap": "normal",
|
||||
"overflow-x": "visible",
|
||||
"overflow-y": "visible",
|
||||
"padding": "0px",
|
||||
"padding-bottom": "0px",
|
||||
"padding-left": "0px",
|
||||
"padding-right": "0px",
|
||||
"padding-top": "0px",
|
||||
"page": "",
|
||||
"page-break-after": "auto",
|
||||
"page-break-before": "auto",
|
||||
"page-break-inside": "auto",
|
||||
"paint-order": "fill stroke markers",
|
||||
"perspective": "none",
|
||||
"pointer-events": "auto",
|
||||
"position": "static",
|
||||
"quotes": "",
|
||||
"r": "0px",
|
||||
"resize": "none",
|
||||
"right": "auto",
|
||||
"rx": "0px",
|
||||
"ry": "0px",
|
||||
"shape-image-threshold": "0",
|
||||
"shape-margin": "0px",
|
||||
"shape-outside": "none",
|
||||
"shape-rendering": "auto",
|
||||
"size": "",
|
||||
"speak": "normal",
|
||||
"src": "",
|
||||
"stop-color": "rgb(0, 0, 0)",
|
||||
"stop-opacity": "1",
|
||||
"stroke": "none",
|
||||
"stroke-dasharray": "none",
|
||||
"stroke-dashoffset": "0px",
|
||||
"stroke-linecap": "butt",
|
||||
"stroke-linejoin": "miter",
|
||||
"stroke-miterlimit": "4",
|
||||
"stroke-opacity": "1",
|
||||
"stroke-width": "1px",
|
||||
"tab-size": "8",
|
||||
"table-layout": "auto",
|
||||
"text-align": "start",
|
||||
"text-align-last": "auto",
|
||||
"text-anchor": "start",
|
||||
"text-combine-upright": "none",
|
||||
"text-decoration": "none",
|
||||
"text-indent": "0px",
|
||||
"text-orientation": "mixed",
|
||||
"text-overflow": "clip",
|
||||
"text-rendering": "auto",
|
||||
"text-shadow": "none",
|
||||
"text-transform": "none",
|
||||
"top": "auto",
|
||||
"touch-action": "auto",
|
||||
"transform": "none",
|
||||
"transform-style": "flat",
|
||||
"transition": "all 0s ease 0s",
|
||||
"transition-delay": "0s",
|
||||
"transition-duration": "0s",
|
||||
"transition-property": "all",
|
||||
"transition-timing-function": "ease",
|
||||
"unicode-bidi": "normal",
|
||||
"unicode-range": "",
|
||||
"user-zoom": "",
|
||||
"vector-effect": "none",
|
||||
"vertical-align": "baseline",
|
||||
"visibility": "visible",
|
||||
"-webkit-app-region": "no-drag",
|
||||
"-webkit-appearance": "none",
|
||||
"-webkit-background-clip": "border-box",
|
||||
"-webkit-background-composite": "source-over",
|
||||
"-webkit-background-origin": "padding-box",
|
||||
"-webkit-border-after": "0px none rgb(0, 0, 0)",
|
||||
"-webkit-border-after-color": "rgb(0, 0, 0)",
|
||||
"-webkit-border-after-style": "none",
|
||||
"-webkit-border-after-width": "0px",
|
||||
"-webkit-border-before": "0px none rgb(0, 0, 0)",
|
||||
"-webkit-border-before-color": "rgb(0, 0, 0)",
|
||||
"-webkit-border-before-style": "none",
|
||||
"-webkit-border-before-width": "0px",
|
||||
"-webkit-border-end": "0px none rgb(0, 0, 0)",
|
||||
"-webkit-border-end-color": "rgb(0, 0, 0)",
|
||||
"-webkit-border-end-style": "none",
|
||||
"-webkit-border-end-width": "0px",
|
||||
"-webkit-border-horizontal-spacing": "0px",
|
||||
"-webkit-border-image": "none",
|
||||
"-webkit-border-start": "0px none rgb(0, 0, 0)",
|
||||
"-webkit-border-start-color": "rgb(0, 0, 0)",
|
||||
"-webkit-border-start-style": "none",
|
||||
"-webkit-border-start-width": "0px",
|
||||
"-webkit-border-vertical-spacing": "0px",
|
||||
"-webkit-box-align": "stretch",
|
||||
"-webkit-box-decoration-break": "slice",
|
||||
"-webkit-box-direction": "normal",
|
||||
"-webkit-box-flex": "0",
|
||||
"-webkit-box-flex-group": "1",
|
||||
"-webkit-box-lines": "single",
|
||||
"-webkit-box-ordinal-group": "1",
|
||||
"-webkit-box-orient": "horizontal",
|
||||
"-webkit-box-pack": "start",
|
||||
"-webkit-box-reflect": "none",
|
||||
"-webkit-clip-path": "none",
|
||||
"-webkit-column-break-after": "auto",
|
||||
"-webkit-column-break-before": "auto",
|
||||
"-webkit-column-break-inside": "auto",
|
||||
"-webkit-column-count": "auto",
|
||||
"-webkit-column-gap": "normal",
|
||||
"-webkit-column-rule": "0px none rgb(0, 0, 0)",
|
||||
"-webkit-column-rule-color": "rgb(0, 0, 0)",
|
||||
"-webkit-column-rule-style": "none",
|
||||
"-webkit-column-rule-width": "0px",
|
||||
"-webkit-column-span": "none",
|
||||
"-webkit-column-width": "auto",
|
||||
"-webkit-columns": "auto auto",
|
||||
"-webkit-filter": "none",
|
||||
"-webkit-font-size-delta": "",
|
||||
"-webkit-font-smoothing": "auto",
|
||||
"-webkit-highlight": "none",
|
||||
"-webkit-hyphenate-character": "auto",
|
||||
"-webkit-line-break": "auto",
|
||||
"-webkit-line-clamp": "none",
|
||||
"-webkit-locale": "auto",
|
||||
"-webkit-logical-height": "8px",
|
||||
"-webkit-logical-width": "980px",
|
||||
"-webkit-margin-after": "0px",
|
||||
"-webkit-margin-after-collapse": "collapse",
|
||||
"-webkit-margin-before": "0px",
|
||||
"-webkit-margin-before-collapse": "collapse",
|
||||
"-webkit-margin-bottom-collapse": "collapse",
|
||||
"-webkit-margin-collapse": "",
|
||||
"-webkit-margin-end": "0px",
|
||||
"-webkit-margin-start": "0px",
|
||||
"-webkit-margin-top-collapse": "collapse",
|
||||
"-webkit-mask": "",
|
||||
"-webkit-mask-box-image": "none",
|
||||
"-webkit-mask-box-image-outset": "0px",
|
||||
"-webkit-mask-box-image-repeat": "stretch",
|
||||
"-webkit-mask-box-image-slice": "0 fill",
|
||||
"-webkit-mask-box-image-source": "none",
|
||||
"-webkit-mask-box-image-width": "auto",
|
||||
"-webkit-mask-clip": "border-box",
|
||||
"-webkit-mask-composite": "source-over",
|
||||
"-webkit-mask-image": "none",
|
||||
"-webkit-mask-origin": "border-box",
|
||||
"-webkit-mask-position": "0% 0%",
|
||||
"-webkit-mask-position-x": "0%",
|
||||
"-webkit-mask-position-y": "0%",
|
||||
"-webkit-mask-repeat": "repeat",
|
||||
"-webkit-mask-repeat-x": "",
|
||||
"-webkit-mask-repeat-y": "",
|
||||
"-webkit-mask-size": "auto",
|
||||
"-webkit-max-logical-height": "none",
|
||||
"-webkit-max-logical-width": "none",
|
||||
"-webkit-min-logical-height": "0px",
|
||||
"-webkit-min-logical-width": "0px",
|
||||
"-webkit-padding-after": "0px",
|
||||
"-webkit-padding-before": "0px",
|
||||
"-webkit-padding-end": "0px",
|
||||
"-webkit-padding-start": "0px",
|
||||
"-webkit-perspective-origin-x": "",
|
||||
"-webkit-perspective-origin-y": "",
|
||||
"-webkit-print-color-adjust": "economy",
|
||||
"-webkit-rtl-ordering": "logical",
|
||||
"-webkit-ruby-position": "before",
|
||||
"-webkit-tap-highlight-color": "rgba(0, 0, 0, 0.180392)",
|
||||
"-webkit-text-combine": "none",
|
||||
"-webkit-text-decorations-in-effect": "none",
|
||||
"-webkit-text-emphasis": "",
|
||||
"-webkit-text-emphasis-color": "rgb(0, 0, 0)",
|
||||
"-webkit-text-emphasis-position": "over",
|
||||
"-webkit-text-emphasis-style": "none",
|
||||
"-webkit-text-fill-color": "rgb(0, 0, 0)",
|
||||
"-webkit-text-orientation": "vertical-right",
|
||||
"-webkit-text-security": "none",
|
||||
"-webkit-text-stroke": "",
|
||||
"-webkit-text-stroke-color": "rgb(0, 0, 0)",
|
||||
"-webkit-text-stroke-width": "0px",
|
||||
"-webkit-transform-origin-x": "",
|
||||
"-webkit-transform-origin-y": "",
|
||||
"-webkit-transform-origin-z": "",
|
||||
"-webkit-user-drag": "auto",
|
||||
"-webkit-user-modify": "read-only",
|
||||
"-webkit-user-select": "text",
|
||||
"-webkit-writing-mode": "horizontal-tb",
|
||||
"white-space": "normal",
|
||||
"widows": "1",
|
||||
"will-change": "auto",
|
||||
"word-break": "normal",
|
||||
"word-spacing": "0px",
|
||||
"word-wrap": "normal",
|
||||
"writing-mode": "horizontal-tb",
|
||||
"x": "0px",
|
||||
"y": "0px",
|
||||
"z-index": "0",
|
||||
"zoom": "1"
|
||||
}
|
||||
@@ -49,7 +49,7 @@ export default class Resources extends Tool
|
||||
.refreshCookie()
|
||||
.refreshScript()
|
||||
.refreshStylesheet()
|
||||
.refreshImage();
|
||||
.refreshImage()._render();
|
||||
}
|
||||
refreshScript()
|
||||
{
|
||||
@@ -65,7 +65,6 @@ export default class Resources extends Tool
|
||||
scriptData = util.unique(scriptData);
|
||||
|
||||
this._scriptData = scriptData;
|
||||
this._render();
|
||||
|
||||
return this;
|
||||
}
|
||||
@@ -83,7 +82,6 @@ export default class Resources extends Tool
|
||||
stylesheetData = util.unique(stylesheetData);
|
||||
|
||||
this._stylesheetData = stylesheetData;
|
||||
this._render();
|
||||
|
||||
return this;
|
||||
}
|
||||
@@ -91,7 +89,10 @@ export default class Resources extends Tool
|
||||
{
|
||||
var localStoreData = [];
|
||||
|
||||
util.each(localStorage, function (val, key)
|
||||
// Mobile safari is not able to loop through localStorage directly.
|
||||
var localStore = JSON.parse(JSON.stringify(window.localStorage));
|
||||
|
||||
util.each(localStore, function (val, key)
|
||||
{
|
||||
localStoreData.push({
|
||||
key: key,
|
||||
@@ -100,7 +101,6 @@ export default class Resources extends Tool
|
||||
});
|
||||
|
||||
this._localStoreData = localStoreData;
|
||||
this._render();
|
||||
|
||||
return this;
|
||||
}
|
||||
@@ -122,7 +122,6 @@ export default class Resources extends Tool
|
||||
}
|
||||
|
||||
this._cookieData = cookieData;
|
||||
this._render();
|
||||
|
||||
return this;
|
||||
}
|
||||
@@ -143,7 +142,6 @@ export default class Resources extends Tool
|
||||
imageData = util.unique(imageData);
|
||||
|
||||
this._imageData = imageData;
|
||||
this._render();
|
||||
|
||||
return this;
|
||||
}
|
||||
@@ -159,28 +157,28 @@ export default class Resources extends Tool
|
||||
|
||||
this._$el.on('click', '.refresh-local-storage', () =>
|
||||
{
|
||||
this.refreshLocalStorage();
|
||||
this.refreshLocalStorage()._render();
|
||||
}).on('click', '.refresh-cookie', () =>
|
||||
{
|
||||
this.refreshCookie();
|
||||
this.refreshCookie()._render();
|
||||
}).on('click', '.refresh-script', () =>
|
||||
{
|
||||
this.refreshScript();
|
||||
this.refreshScript()._render();
|
||||
}).on('click', '.refresh-image', () =>
|
||||
{
|
||||
this.refreshImage();
|
||||
this.refreshImage()._render();
|
||||
}).on('click', '.delete-local-storage', function ()
|
||||
{
|
||||
var key = util.$(this).data('key');
|
||||
|
||||
localStorage.removeItem(key);
|
||||
self.refreshLocalStorage();
|
||||
self.refreshLocalStorage()._render();
|
||||
}).on('click', '.delete-cookie', function ()
|
||||
{
|
||||
var key = util.$(this).data('key');
|
||||
|
||||
util.cookie.remove(key);
|
||||
self.refreshCookie();
|
||||
self.refreshCookie()._render();
|
||||
});
|
||||
|
||||
util.orientation.on('change', () => this._render());
|
||||
|
||||
@@ -10,8 +10,8 @@
|
||||
.section {
|
||||
margin-bottom: 10px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
box-shadow: $box-shadow;
|
||||
overflow: hidden;
|
||||
}
|
||||
.title {
|
||||
padding: 10px;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import Tool from '../DevTools/Tool.es6'
|
||||
import util from '../util'
|
||||
|
||||
require('./Settings.scss');
|
||||
|
||||
@@ -8,11 +9,49 @@ export default class Settings extends Tool
|
||||
{
|
||||
super();
|
||||
this.name = 'settings';
|
||||
|
||||
this._tpl = require('./Settings.hbs');
|
||||
this._switchTpl = require('./switch.hbs');
|
||||
this._settings = [];
|
||||
}
|
||||
init($el)
|
||||
{
|
||||
super.init($el);
|
||||
|
||||
this._bindEvent();
|
||||
}
|
||||
}
|
||||
add(config, key, desc)
|
||||
{
|
||||
this._settings.push({
|
||||
config: config,
|
||||
key: key
|
||||
});
|
||||
|
||||
this._$el.append(this._switchTpl({
|
||||
desc: desc,
|
||||
key: key,
|
||||
idx: this._settings.length - 1,
|
||||
val: config.get(key)
|
||||
}));
|
||||
|
||||
return this;
|
||||
}
|
||||
separator()
|
||||
{
|
||||
this._$el.append('<div class="eruda-separator"></div>');
|
||||
|
||||
return this;
|
||||
}
|
||||
_bindEvent()
|
||||
{
|
||||
var self = this;
|
||||
|
||||
this._$el.on('click', '.eruda-checkbox', function ()
|
||||
{
|
||||
var $input = util.$(this).find('input'),
|
||||
idx = $input.data('idx'),
|
||||
val = $input.get(0).checked;
|
||||
|
||||
var setting = self._settings[idx];
|
||||
setting.config.set(setting.key, val);
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,90 @@
|
||||
@import "../variable";
|
||||
@import "../color";
|
||||
|
||||
.dev-tools { .tools {
|
||||
.settings {
|
||||
.separator {
|
||||
height: 10px;
|
||||
}
|
||||
.switch {
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid $gray-light;
|
||||
.checkbox {
|
||||
float: right;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
width: 46px;
|
||||
height: 20px;
|
||||
padding: 3px;
|
||||
border-radius: 18px;
|
||||
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||
cursor: pointer;
|
||||
background-image: linear-gradient(to bottom, #eeeeee, white 25px);
|
||||
.input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.label {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 14px;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
background: #eceeef;
|
||||
border-radius: inherit;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
|
||||
transition: 0.15s ease-out;
|
||||
transition-property: opacity background;
|
||||
&:before, &:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -.5em;
|
||||
line-height: 1;
|
||||
transition: inherit;
|
||||
}
|
||||
}
|
||||
.input:checked ~ .label {
|
||||
background: #47a8d8;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.input:checked ~ .label:before {
|
||||
opacity: 0;
|
||||
}
|
||||
.input:checked ~ .label:after {
|
||||
opacity: 1;
|
||||
}
|
||||
.handle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
|
||||
background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
|
||||
transition: left 0.15s ease-out;
|
||||
}
|
||||
.handle:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -6px 0 0 -6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 6px;
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
|
||||
background-image: linear-gradient(to bottom, #eeeeee, white);
|
||||
}
|
||||
.input:checked ~ .handle {
|
||||
left: 30px;
|
||||
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} }
|
||||
8
src/Settings/switch.hbs
Normal file
8
src/Settings/switch.hbs
Normal file
@@ -0,0 +1,8 @@
|
||||
<div class="eruda-switch">
|
||||
{{desc}}
|
||||
<label class="eruda-checkbox">
|
||||
<input type="checkbox" class="eruda-input" data-idx="{{idx}}" {{#if val}}checked{{/if}}>
|
||||
<span class="eruda-label"></span>
|
||||
<span class="eruda-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
@@ -6,9 +6,9 @@
|
||||
padding: 10px;
|
||||
.section {
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
box-shadow: $box-shadow;
|
||||
overflow: hidden;
|
||||
.btn, .name {
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
var config = {
|
||||
init()
|
||||
{
|
||||
|
||||
},
|
||||
get(name)
|
||||
{
|
||||
|
||||
},
|
||||
set(name, val)
|
||||
{
|
||||
|
||||
},
|
||||
save()
|
||||
{
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
config.init();
|
||||
|
||||
export default config;
|
||||
74
src/config/Storage.es6
Normal file
74
src/config/Storage.es6
Normal file
@@ -0,0 +1,74 @@
|
||||
import util from '../util';
|
||||
|
||||
var localStore = {
|
||||
_storage: window.localStorage,
|
||||
get(key)
|
||||
{
|
||||
var val = this._storage.getItem(key);
|
||||
|
||||
try {
|
||||
val = JSON.parse(val);
|
||||
} catch (e) {}
|
||||
|
||||
return val;
|
||||
},
|
||||
set(key, val)
|
||||
{
|
||||
if (util.isObj(val)) val = JSON.stringify(val);
|
||||
|
||||
this._storage.setItem(key, val);
|
||||
|
||||
return this;
|
||||
},
|
||||
remove(key)
|
||||
{
|
||||
this._storage.removeItem(key);
|
||||
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
export default class Storage extends util.Emitter
|
||||
{
|
||||
constructor(name)
|
||||
{
|
||||
super();
|
||||
this._name = name;
|
||||
this._val = localStore.get(name);
|
||||
if (!this._val || !util.isObj(this._val)) this._val = {};
|
||||
}
|
||||
save()
|
||||
{
|
||||
localStore.set(this._name, this._val);
|
||||
|
||||
return this;
|
||||
}
|
||||
get(key)
|
||||
{
|
||||
if (util.isUndef(key)) return this._val;
|
||||
|
||||
return this._val[key];
|
||||
}
|
||||
set(key, val)
|
||||
{
|
||||
var kv;
|
||||
|
||||
if (util.isObj(key))
|
||||
{
|
||||
kv = key;
|
||||
} else
|
||||
{
|
||||
kv = {};
|
||||
kv[key] = val;
|
||||
}
|
||||
|
||||
util.each(kv, (val, key) =>
|
||||
{
|
||||
var preVal = this._val[key];
|
||||
this._val[key] = val;
|
||||
if (preVal !== val) this.emit('change', key, val);
|
||||
});
|
||||
|
||||
return this.save();
|
||||
}
|
||||
};
|
||||
14
src/config/config.es6
Normal file
14
src/config/config.es6
Normal file
@@ -0,0 +1,14 @@
|
||||
import Storage from './Storage.es6'
|
||||
|
||||
var configs = {};
|
||||
|
||||
var config = {
|
||||
create(name)
|
||||
{
|
||||
if (!configs[name]) configs[name] = new Storage(name);
|
||||
|
||||
return configs[name];
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -9,7 +9,6 @@ import Info from './Info/Info.es6'
|
||||
import Features from './Features/Features.es6'
|
||||
import Settings from './Settings/Settings.es6'
|
||||
import util from './util'
|
||||
import fastClick from 'fastclick'
|
||||
|
||||
require('./style.scss');
|
||||
|
||||
@@ -19,7 +18,6 @@ var isDebugMode = /eruda=true/.test(window.location);
|
||||
|
||||
if (isDebugMode)
|
||||
{
|
||||
initFaskClick();
|
||||
appendContainer();
|
||||
|
||||
var devTools = new DevTools($container);
|
||||
@@ -28,15 +26,28 @@ if (isDebugMode)
|
||||
|
||||
homeBtn.on('click', () => devTools.toggle());
|
||||
|
||||
devTools.add(new Console())
|
||||
.add(new Network())
|
||||
.add(new Elements())
|
||||
.add(new Snippets())
|
||||
.add(new Resources())
|
||||
.add(new Info())
|
||||
.add(new Features())
|
||||
.add(new Settings())
|
||||
var consoleTool = new Console(),
|
||||
network = new Network(),
|
||||
elements = new Elements(),
|
||||
snippets = new Snippets(),
|
||||
resources = new Resources(),
|
||||
info = new Info(),
|
||||
features = new Features(),
|
||||
settings = new Settings();
|
||||
|
||||
devTools.add(consoleTool)
|
||||
.add(network)
|
||||
.add(elements)
|
||||
.add(snippets)
|
||||
.add(resources)
|
||||
.add(info)
|
||||
.add(features)
|
||||
.add(settings)
|
||||
.showTool('console');
|
||||
|
||||
settings.separator()
|
||||
.add(devTools.config, 'transparent', 'Transparent')
|
||||
.add(devTools.config, 'halfScreen', 'Half Screen Size');
|
||||
}
|
||||
|
||||
function appendContainer()
|
||||
@@ -45,11 +56,6 @@ function appendContainer()
|
||||
$container = util.$('#eruda');
|
||||
}
|
||||
|
||||
function initFaskClick()
|
||||
{
|
||||
fastClick.attach(document.body, {});
|
||||
}
|
||||
|
||||
export default {
|
||||
get: function (name)
|
||||
{
|
||||
|
||||
@@ -23,3 +23,4 @@
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
15
src/util.js
15
src/util.js
@@ -117,7 +117,7 @@ module.exports = (function ()
|
||||
|
||||
dasherize = function (str)
|
||||
{
|
||||
return str.replace(/([a-z])([A-Z])/, '$1-$2').toLowerCase();
|
||||
return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
|
||||
};
|
||||
|
||||
return dasherize;
|
||||
@@ -291,6 +291,19 @@ module.exports = (function ()
|
||||
return indexOf;
|
||||
})();
|
||||
|
||||
/* ------------------------------ defaults ------------------------------ */
|
||||
|
||||
var defaults;
|
||||
|
||||
_.defaults = (function ()
|
||||
{
|
||||
// TODO
|
||||
|
||||
defaults = _createAssigner(allKeys, true);
|
||||
|
||||
return defaults;
|
||||
})();
|
||||
|
||||
/* ------------------------------ keys ------------------------------ */
|
||||
|
||||
var keys;
|
||||
|
||||
Reference in New Issue
Block a user