From c3738be31298453aa51734d7aefe09967db95f44 Mon Sep 17 00:00:00 2001 From: surunzi Date: Sat, 31 Dec 2016 17:23:50 +0800 Subject: [PATCH] Dev: Small improvements --- doc/UTIL_API.md | 142 ++++++++++++++++++++++++++++++----- package.json | 4 +- src/DevTools/DevTools.es6 | 4 +- src/Elements/Elements.scss | 17 +++-- src/Network/Network.scss | 9 ++- src/Resources/Resources.scss | 5 +- src/lib/util.js | 6 +- 7 files changed, 150 insertions(+), 37 deletions(-) diff --git a/doc/UTIL_API.md b/doc/UTIL_API.md index ad13f32..77b9b9c 100644 --- a/doc/UTIL_API.md +++ b/doc/UTIL_API.md @@ -2,11 +2,23 @@ ## $ -jQuery like style dom manipulator. TODO +jQuery like style dom manipulator. + +### Available methods + +offset, hide, show, first, last, get, eq, on, off, html, text, val, css, attr, +data, rmAttr, remove, addClass, rmClass, toggleClass, hasClass, append, prepend, +before, after ```javascript var $btn = $('#btn'); $btn.html('eustia'); +$btn.addClass('btn'); +$btn.show(); +$btn.on('click', function () +{ + // Do something... +}); ``` ## $attr @@ -148,13 +160,15 @@ $data('#test', 'attr1', 'eustia'); ## $event -bind events to certain dom elements. TODO +bind events to certain dom elements. ```javascript -event.on('#test', 'click', function () +function clickHandler() { - // ... -}); + // Do something... +} +$event.on('#test', 'click', clickHandler); +$event.off('#test', 'click', clickHandler); ``` ## $insert @@ -294,19 +308,19 @@ var People = Class({ var Student = People.extend({ initialize: function (name, age, school) { - this.callSuper('initialize', name, age); + this.callSuper(People, 'initialize', arguments); - this.school = school. + this.school = school; }, introduce: function () { - return this.callSuper('introduce') + '\n I study at ' + this.school + '.'. + return this.callSuper(People, 'introduce') + '\n I study at ' + this.school + '.'. } }, { is: function (obj) { return obj instanceof Student; - } + } }); var a = new Student('allen', 17, 'Hogwarts'); @@ -523,7 +537,32 @@ defaults({name: 'RedHood'}, {name: 'Unknown', age: 24}); // -> {name: 'RedHood', ## delegate -TODO +Event delegation. + +### add + +Add event delegation. + +|Name |Type |Desc | +|--------|--------|--------------| +|el |element |Parent element| +|type |string |Event type | +|selector|string |Match selector| +|cb |function|Event callback| + +### remove + +Remove event delegation. + +```javascript +var container = document.getElementById('container'); +function clickHandler() +{ + // Do something... +} +delegate.add(container, 'click', '.children', clickHandler); +delegate.remove(container, 'click', '.children', clickHandler); +``` ## each @@ -566,6 +605,10 @@ Escapes a string for insertion into HTML, replacing &, <, >, ", `, and ' charact escape('You & Me'); -> // -> 'You & Me' ``` +## escapeJsonStr + +No documentation. + ## escapeRegExp Escape special chars to be used as literals in RegExp constructors. @@ -590,7 +633,7 @@ Copy all of the properties in the source objects over to the destination object. |Name |Type |Desc | |------|------|------------------| |obj |object|Destination object| -|*src |object|Sources objects | +|...src|object|Sources objects | |return|object|Destination object| ```javascript @@ -637,6 +680,10 @@ No documentation. No documentation. +## getObjType + +No documentation. + ## has Checks if key is a direct property. @@ -666,7 +713,7 @@ identity('a'); // -> 'a' ## idxOf -Get the index at which the first occurrence of value. TODO +Get the index at which the first occurrence of value. |Name |Type |Desc | |-----------|------|--------------------| @@ -964,7 +1011,19 @@ last([1, 2]); // -> 2 ## loadJs -Inject script tag into page with given src value. TODO +Inject script tag into page with given src value. + +|Name|Type |Desc | +|----|--------|---------------| +|src |string |Script source | +|cb |function|Onload callback| + +```javascript +loadJs('main.js', function () +{ + // Do something... +}); +``` ## lpad @@ -1017,7 +1076,31 @@ map([4, 8], function (n) { return n * n; }); // -> [16, 64] ## matcher -TODO +Return a predicate function that checks if attrs are contained in an object. + +|Name |Type |Desc | +|------|--------|----------------------------------| +|attrs |object |Object of property values to match| +|return|function|New predicate function | + +```javascript +var objects = [ + {a: 1, b: 2, c: 3 }, + {a: 4, b: 5, c: 6 } +]; +filter(objects, matcher({a: 4, c: 6 })); // -> [{a: 4, b: 5, c: 6 }] +``` + +## memStorage + +Memory-backed implementation of the Web Storage API. + +A replacement for environments where localStorage or sessionStorage is not available. + +```javascript +var localStorage = window.localStorage || memStorage; +localStorage.setItem('test', 'eris'); +``` ## noop @@ -1066,7 +1149,7 @@ initOnce(); // -> init is invoked once ## optimizeCb -TODO +Used for function context binding. ## orientation @@ -1140,7 +1223,11 @@ rtrim('_abc_', ['c', '_']); // -> '_ab' ## safeCb -Create callback based on input value. TODO +Create callback based on input value. + +## safeStorage + +No documentation. ## slice @@ -1246,6 +1333,7 @@ Convert value to an integer. ```javascript toInt(1.1); // -> 1 +toInt(undefined); // -> 0 ``` ## toNum @@ -1303,7 +1391,7 @@ Generate a globally-unique id. |return|string|Globally-unique id| ```javascript -uniqueId('eusita_'); // -> 'eustia_xxx' +uniqId('eusita_'); // -> 'eustia_xxx' ``` ## unique @@ -1330,7 +1418,7 @@ Convert the first character of string to upper case. |return|string|Converted string | ```javascript -upperFirst('red'); // -> RED +upperFirst('red'); // -> Red ``` ## values @@ -1345,3 +1433,21 @@ Creates an array of the own enumerable property values of object. ```javascript values({one: 1, two: 2}); // -> [1, 2] ``` + +## wrap + +Wrap the function inside a wrapper function, passing it as the first argument. + +|Name |Type |Desc | +|-------|--------|----------------| +|fn |* |Function to wrap| +|wrapper|function|Wrapper function| +|return |function|New function | + +```javascript +var p = wrap(escape, function(fn, text) +{ + return '

' + fn(text) + '

'; +}); +p('You & Me'); // -> '

You & Me

' +``` diff --git a/package.json b/package.json index 827d021..5b66810 100644 --- a/package.json +++ b/package.json @@ -5,10 +5,10 @@ "main": "eruda.js", "scripts": { "build": "webpack --config script/webpack.dev.js && webpack -p --config script/webpack.release.js", - "dev": "webpack-dev-server --config script/webpack.dev.js", + "dev": "webpack-dev-server --config script/webpack.dev.js --host 0.0.0.0", "cpTestLib": "script/cpTestLib.sh", "lint": "eslint --ext .es6 src", - "utilDoc": "eustia doc src/lib/util.js -f md -o doc/Util_Api.md -t \"Eruda Util Documentation\"" + "utilDoc": "eustia doc src/lib/util.js -f md -o doc/UTIl_API.md -t \"Eruda Util Documentation\"" }, "repository": { "type": "git", diff --git a/src/DevTools/DevTools.es6 b/src/DevTools/DevTools.es6 index ceffc26..129b274 100644 --- a/src/DevTools/DevTools.es6 +++ b/src/DevTools/DevTools.es6 @@ -100,8 +100,8 @@ export default class DevTools extends util.Emitter var cfg = this.config = config.create('eruda-dev-tools'); cfg.set(util.defaults(cfg.get(), { - transparency: '100%', - displaySize: '100%', + transparency: '95%', + displaySize: '80%', tinyNavBar: false, activeEruda: false })); diff --git a/src/Elements/Elements.scss b/src/Elements/Elements.scss index ca92e90..b979882 100644 --- a/src/Elements/Elements.scss +++ b/src/Elements/Elements.scss @@ -169,18 +169,21 @@ box-shadow: $box-shadow; margin-bottom: 10px; background: #fff; + border-radius: $border-radius; + overflow: hidden; .listener-type { padding: $padding; background: $blue; color: #fff; } - .listener-content li { - @include overflow-auto(x); - padding: $padding; - border: 1px solid $gray; - border-top: none; - &.capture { - background: $gray-light; + .listener-content { + li { + @include overflow-auto(x); + padding: $padding; + border-top: none; + &.capture { + background: $gray-light; + } } } } diff --git a/src/Network/Network.scss b/src/Network/Network.scss index 0171a8f..9d953b9 100644 --- a/src/Network/Network.scss +++ b/src/Network/Network.scss @@ -26,7 +26,7 @@ } } .performance-timing-data { - padding: 0 10px 10px; + padding-bottom: $padding; text-align: center; display: none; table { @@ -38,10 +38,13 @@ background: $gray; text-align: left; color: #fff; + font-size: $font-size; + } + td { + font-size: $font-size-s; } th, td { padding: 10px; - font-size: 14px; } } } @@ -84,4 +87,4 @@ max-height: 200px; } } -} } \ No newline at end of file +} } diff --git a/src/Resources/Resources.scss b/src/Resources/Resources.scss index f52d4c4..2014829 100644 --- a/src/Resources/Resources.scss +++ b/src/Resources/Resources.scss @@ -28,6 +28,7 @@ } } .link-list { + font-size: $font-size-s; li { padding: 10px; background: #fff; @@ -39,6 +40,7 @@ } .image-list { @include clear-float(); + font-size: $font-size-s; background: #fff; padding: $padding !important; li { @@ -58,6 +60,7 @@ table { border-collapse: collapse; width: 100%; + font-size: $font-size-s; td { padding: 10px; word-break: break-all; @@ -89,4 +92,4 @@ background: #fff; } } -} } \ No newline at end of file +} } diff --git a/src/lib/util.js b/src/lib/util.js index 4f89741..3b94750 100644 --- a/src/lib/util.js +++ b/src/lib/util.js @@ -1037,7 +1037,7 @@ module.exports = (function () * |Name |Type |Desc | * |------|------|------------------| * |obj |object|Destination object| - * |*src |object|Sources objects | + * |...src|object|Sources objects | * |return|object|Destination object| * * ```javascript @@ -1910,7 +1910,7 @@ module.exports = (function () * is: function (obj) * { * return obj instanceof Student; - * } + * } * }); * * var a = new Student('allen', 17, 'Hogwarts'); @@ -1924,8 +1924,6 @@ module.exports = (function () return Base.extend(methods, statics); } - var regCallSuper = /callSuper/; - function makeClass(parent, methods, statics) { statics = statics || {};