Skip to content

Commit

Permalink
Add: Search snippet
Browse files Browse the repository at this point in the history
  • Loading branch information
@surunzi
surunzi committed Jan 1, 2017
1 parent dbccb62 commit a5066f2
Show file tree
Hide file tree
Showing 5 changed files with 593 additions and 80 deletions.
118 changes: 118 additions & 0 deletions doc/UTIL_API.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -407,6 +407,79 @@ $test.find('.test').each(function (idx, element)
});
```

## Url

Simple url manipulator.

### constructor

|Name |Type |Desc |
|---------------------|------|----------|
|[url=window.location]|string|Url string|

### setQuery

Set query value.

|Name |Type |Desc |
|------|------|-----------|
|name |string|Query name |
|value |string|Query value|
|return|Url |this |

|Name |Type |Desc |
|------|------|------------|
|names |object|query object|
|return|Url |this |

### rmQuery

Remove query value.

|Name |Type |Desc |
|------|------------|----------|
|name |string array|Query name|
|return|Url |this |

### parse

[static] Parse url into an object.

|Name |Type |Desc |
|------|------|----------|
|url |string|Url string|
|return|object|Url object|

### stringify

[static] Stringify url object into a string.

|Name |Type |Desc |
|------|------|----------|
|url |object|Url object|
|return|string|Url string|

An url object contains the following properties:

|Name |Desc |
|--------|--------------------------------------------------------------------------------------|
|protocol|The protocol scheme of the URL (e.g. http:) |
|slashes |A boolean which indicates whether the protocol is followed by two forward slashes (//)|
|auth |Authentication information portion (e.g. username:password) |
|hostname|Host name without port number |
|port |Optional port number |
|pathname|URL path |
|query |Parsed object containing query string |
|hash |The "fragment" portion of the URL including the pound-sign (#) |

```javascript
var url = new Url('http://example.com:8080?eruda=true');
console.log(url.port); // -> '8080'
url.query.foo = 'bar';
url.rmQuery('eruda');
utl.toString(); // -> 'http://example.com:8080/?foo=bar'
```

## allKeys

Retrieve all the names of object's own and inherited properties.
Expand Down Expand Up @@ -1174,6 +1247,34 @@ sub(20); // -> 15

No documentation.

## query

Parse and stringify url query strings.

### parse

Parse a query string into an object.

|Name |Type |Desc |
|------|------|------------|
|str |string|Query string|
|return|object|Query object|

### stringify

Stringify an object into a query string.

|Name |Type |Desc |
|------|------|------------|
|obj |object|Query object|
|return|string|Query string|

```javascript
query.parse('foo=bar&eruda=true'); // -> {foo: 'bar', eruda: 'true'}
query.stringify({foo: 'bar', eruda: 'true'}); // -> 'foo=bar&eruda=true'
query.parse('name=eruda&name=eustia'); // -> {name: ['eruda', 'eustia']}
```

## repeat

Repeat string n-times.
Expand Down Expand Up @@ -1225,6 +1326,23 @@ rtrim('_abc_', ['c', '_']); // -> '_ab'

Create callback based on input value.

## safeGet

Get object property, don't throw undefined error.

|Name |Type |Desc |
|------|------------|-------------------------|
|obj |object |Object to query |
|path |array string|Path of property to get |
|return|* |Target value or undefined|

```javascript
var obj = {a: {aa: {aaa: 1}}};
safeGet(obj, 'a.aa.aaa'); // -> 1
safeGet(obj, ['a', 'aa']); // -> {aaa: 1}
safeGet(obj, 'a.b'); // -> undefined
```

## safeStorage

No documentation.
Expand Down
54 changes: 27 additions & 27 deletions src/Elements/Elements.es6
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,9 @@ export default class Elements extends Tool
}
overrideEventTarget()
{
var winEventProto = getWinEventProto();
let winEventProto = getWinEventProto();

var origAddEvent = this._origAddEvent = winEventProto.addEventListener,
let origAddEvent = this._origAddEvent = winEventProto.addEventListener,
origRmEvent = this._origRmEvent = winEventProto.removeEventListener;

winEventProto.addEventListener = function (type, listener, useCapture)
Expand All @@ -64,7 +64,7 @@ export default class Elements extends Tool
}
restoreEventTarget()
{
var winEventProto = getWinEventProto();
let winEventProto = getWinEventProto();

if (this._origAddEvent) winEventProto.addEventListener = this._origAddEvent;
if (this._origRmEvent) winEventProto.removeEventListener = this._origRmEvent;
Expand Down Expand Up @@ -149,7 +149,7 @@ export default class Elements extends Tool
!isElExist(el) ? self._render() : self._setElAndRender(el);
}).on('click', '.toggle-all-computed-style', () => this._toggleAllComputedStyle());

var $bottomBar = this._$el.find('.eruda-bottom-bar');
let $bottomBar = this._$el.find('.eruda-bottom-bar');

$bottomBar.on('click', '.eruda-refresh', () => this._render())
.on('click', '.eruda-highlight', () => this._toggleHighlight())
Expand All @@ -175,7 +175,7 @@ export default class Elements extends Tool
}
_toggleSelect()
{
var select = this._select;
let select = this._select;

this._$el.find('.eruda-select').toggleClass('eruda-active');
if (!this._selectElement && !this._highlightElement) this._toggleHighlight();
Expand All @@ -198,9 +198,9 @@ export default class Elements extends Tool
this._highlight.setEl(el);
this._rmDefComputedStyle = true;

var parentQueue = [];
let parentQueue = [];

var parent = el.parentNode;
let parent = el.parentNode;
while (parent)
{
parentQueue.push(parent);
Expand All @@ -215,29 +215,29 @@ export default class Elements extends Tool
}
_getData()
{
var ret = {};
let ret = {};

var el = this._curEl,
let el = this._curEl,
cssStore = this._curCssStore;

var {className, id, attributes, tagName} = el;
let {className, id, attributes, tagName} = el;

ret.parents = getParents(el);
ret.children = formatChildNodes(el.childNodes);
ret.attributes = formatAttr(attributes);
ret.name = formatElName({tagName, id, className, attributes});

var events = el.erudaEvents;
let events = el.erudaEvents;
if (events && util.keys(events).length !== 0) ret.listeners = events;

if (needNoStyle(tagName)) return ret;

var computedStyle = cssStore.getComputedStyle();
let computedStyle = cssStore.getComputedStyle();
if (this._rmDefComputedStyle) computedStyle = rmDefComputedStyle(computedStyle);
processStyleRules(computedStyle);
ret.computedStyle = computedStyle;

var styles = cssStore.getMatchedCSSRules();
let styles = cssStore.getMatchedCSSRules();
styles.unshift(getInlineStyle(el.style));
styles.forEach(style => processStyleRules(style.style));
ret.styles = styles;
Expand All @@ -259,7 +259,7 @@ export default class Elements extends Tool
}
_initConfig()
{
var cfg = this.config = config.create('eruda-elements');
let cfg = this.config = config.create('eruda-elements');

cfg.set(util.defaults(cfg.get(), {overrideEventTarget: true}));

Expand All @@ -273,7 +273,7 @@ export default class Elements extends Tool
}
});

var settings = this._parent.get('settings');
let settings = this._parent.get('settings');
settings.text('Elements')
.switch(cfg, 'overrideEventTarget', 'Catch Event Listeners')
.separator();
Expand All @@ -298,9 +298,9 @@ const isElExist = val => util.isEl(val) && val.parentNode;

function formatElName(data, {noAttr = false} = {})
{
var {id, className, attributes} = data;
let {id, className, attributes} = data;

var ret = `<span class="eruda-blue">${data.tagName.toLowerCase()}</span>`;
let ret = `<span class="eruda-blue">${data.tagName.toLowerCase()}</span>`;

if (id !== '') ret += `#${id}`;

Expand Down Expand Up @@ -340,7 +340,7 @@ var formatAttr = attributes => util.map(attributes, attr =>

function formatChildNodes(nodes)
{
var ret = [];
let ret = [];

for (let i = 0, len = nodes.length; i < len; i++)
{
Expand Down Expand Up @@ -377,7 +377,7 @@ function formatChildNodes(nodes)

function getParents(el)
{
var ret = [],
let ret = [],
i = 0,
parent = el.parentNode;

Expand All @@ -396,14 +396,14 @@ function getParents(el)

function getInlineStyle(style)
{
var ret = {
let ret = {
selectorText: 'element.style',
style: {}
};

for (let i = 0, len = style.length; i < len; i++)
{
var s = style[i];
let s = style[i];

ret.style[s] = style[s];
}
Expand All @@ -415,7 +415,7 @@ var defComputedStyle = require('./defComputedStyle.json');

function rmDefComputedStyle(computedStyle)
{
var ret = {};
let ret = {};

util.each(computedStyle, (val, key) =>
{
Expand All @@ -435,7 +435,7 @@ function addEvent(el, type, listener, useCapture = false)
{
if (!util.isFn(listener) || !util.isBool(useCapture)) return;

var events = el.erudaEvents = el.erudaEvents || {};
let events = el.erudaEvents = el.erudaEvents || {};

events[type] = events[type] || [];
events[type].push({
Expand All @@ -449,11 +449,11 @@ function rmEvent(el, type, listener, useCapture = false)
{
if (!util.isFn(listener) || !util.isBool(useCapture)) return;

var events = el.erudaEvents;
let events = el.erudaEvents;

if (!(events && events[type])) return;

var listeners = events[type];
let listeners = events[type];

for (let i = 0, len = listeners.length; i < len; i++)
{
Expand All @@ -468,6 +468,6 @@ function rmEvent(el, type, listener, useCapture = false)
if (util.keys(events).length === 0) delete el.erudaEvents;
}

var getWinEventProto = () => (window.EventTarget && window.EventTarget.prototype) || window.Node.prototype;
var getWinEventProto = () => util.safeGet(window, 'EventTarget.prototype') || window.Node.prototype;

let wrapLink = link => `<a href="${link}" target="_blank">${link}</a>`;
var wrapLink = link => `<a href="${link}" target="_blank">${link}</a>`;
8 changes: 8 additions & 0 deletions src/Snippets/Snippets.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,11 @@
}
} }

.search-highlight-block {
display: inline;
.keyword {
background: $yellow;
color: #fff;
}
}

Loading

0 comments on commit a5066f2

Please sign in to comment.