Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
155 changes: 155 additions & 0 deletions common.blocks/functions/functions.en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
# functions

This block provides an object with a set of methods for working with JavaScript functions.

## Overview

### Properties and methods of the object

| Name | Type or return value | Description |
| -------- | --- | -------- |
| <a href="#fields-isFunction">isFunction</a>(`obj {*}`) | `Boolean` | Checks whether a passed argument is a function. |
| <a href="#fields-noop">noop</a> | `Function` | Empty function. |

### Elements of the block

| Element | Usage | Description |
| --------| ---- | -------- |
| <a href="#elems-debounce">debounce</a> | `JS` | Function decorator that combines multiple function calls within a specified time period into one call. |
| <a href="#elems-throttle">throttle</a> | `JS` | Function decorator that limits the frequency of function execution to once per specified period. |

### Public block technologies

The block is implemented in:

* `vanilla.js`

## Description

<a name="fields"></a>

### Properties and methods of the object

<a name="fields-isFunction"></a>

#### `isFunction` method

Checks whether a passed argument is a function.

**Accepted arguments:**

* `obj {*}` – The object being checked. Required argument.

**Return value:** `Boolean`. If the argument is a function, then `true`.

```js
modules.require('functions', function(func) {
var a = function(){},
b = {};
console.log(func.isFunction(a)); //true
console.log(func.isFunction(b)); //false
});
```

<a name="fields-noop"></a>

#### `noop` property

Empty function (`function() {}`).

No arguments or return value.

You can use `noop` when you need a function but there isn't a reason to add the logic. For example, you can use it as a placeholder for base classes at the design stage when using OOP.

Example:

```js
modules.define('base-class', ['inherit', 'functions'], function(provide, inherit, functions) {

provide(inherit({
getData : function() {
this._sendRequest();
},

_sendRequest : functions.noop

}));

});
```

<a name="elems"></a>

### Elements of the block

The block elements implement a set of function decorators.

The decorators add logic to the function without changing its original signature.

<a name="elems-debounce"></a>

#### `debounce` element

A decorator that postpones function calls for the specified delay time. After each attempt to make a call, the delay starts over again.

**Accepted arguments:**

* `fn {Function}` — Original function. Required argument.
* `timeout {Number}` — Time of delay, in milliseconds. Required argument.
* [`invokeAsap {Boolean}`] — The `debounce` mode. By default, the first mode is used (corresponding to the `false` value).
* [`context {Object}`] — The context for executing the original function.

There are two `debounce` modes, depending on the value of `invokeAsap`:

1. The original function is called when the delay expires after the last call attempt.
2. The original function is first called as soon as the decorated function is called. After this, the behavior is the same as in the first mode.

**Return value:** `Function`. The decorated function.

Example:

```js
modules.require('functions__debounce', function(provide, debounce) {

function log() {
console.log('hello!');
}

var debouncedLog = debounce(log, 300);
setInterval(debouncedLog, 50);

});
```

<a name="elems-throttle"></a>

#### `throttle` element

This decorator allows you to "slow down" the function. It won't be executed more than once during the specified period, no matter how many times it is called during this time. All calls in the meantime are ignored.

**Accepted arguments:**

* `fn {Function}` — Original function. Required argument.
* `period {Number}` — The interval between calls, in milliseconds. Required argument.
* [`context {Object}`] — The context for executing the original function.

**Return value:** `Function`. The decorated function.

This method is convenient for setting resource-intensive handlers for frequently generated events, such as `resize`, `pointermove`, and so on.

Example:

```js
modules.require('functions__throttle', function(provide, throttle) {

function log() {
console.log('hello!');
}

var throttledLog = throttle(log, 300);
setInterval(throttledLog, 50);

});
```

As a result, the function is executed no more than once every 300 milliseconds.
7 changes: 7 additions & 0 deletions common.blocks/i-bem-dom/i-bem-dom.en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# i-bem-dom

A helper block for creating other blocks that have a DOM representation.

The block is implemented as a specialized JavaScript framework for web development using the BEM methodology.

There is a separate document with a detailed [user's guide](https://en.bem.info/technology/i-bem/v4/i-bem-js/).
7 changes: 7 additions & 0 deletions common.blocks/i-bem/i-bem.en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# i-bem

A helper block for creating other blocks.

The block is implemented as a specialized JavaScript framework for web development using the BEM methodology.

There is a separate document with a detailed [user's guide](https://en.bem.info/technology/i-bem/v4/i-bem-js/).
10 changes: 5 additions & 5 deletions common.blocks/i18n/i18n.en.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# i18n

Block is a function for project internationalization.
It could be used in browsers and within the Node.js environment.
This block provides a function for project internationalization.
It can be used in a browser and in a node.js environment.

## Signature

Expand All @@ -16,13 +16,13 @@ It could be used in browsers and within the Node.js environment.
i18n(keyset, key, params);
```

Example:
For example:

```js
i18n('keyset1', 'key2', { a : '1' });
```

To add translations, use `decl` method:
Use the `decl` method to add translations:

```js
i18n.decl({
Expand All @@ -38,4 +38,4 @@ i18n.decl({
});
```

You can find relevant documentation for building a project with internationalization within a build package [enb-bem-i18n](https://ru.bem.info/tools/bem/enb-bem-i18n/readme/) (in Russian only, translation is coming).
For information about building an internationalized project, see [enb-bem-i18n](https://ru.bem.info/tools/bem/enb-bem-i18n/readme/).
46 changes: 46 additions & 0 deletions common.blocks/identify/identify.en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
# identify

This block provides a function for working with unique identifiers. It allows you to:

* Create object identifiers.
* Check whether objects have an identifier.
* Create a unique identifier string.

**Accepted arguments:**

* [`obj {Object}`] – The object to identify.
* [`onlyGet {Boolean}`] – Flag for checking whether the object has an identifier. If `true`, the function returns a string with the identifier if the object was previously assigned an identifier. By default, `false`.

**Return value:** `String`. A string with the identifier assigned to the object. Subsequent calls will always return the same identifier.

Example:

```js
modules.require(['identify'], function(identify) {
var a = {},
b = {},
identA = identify(a);

console.log(identA === identify(a)); //true
console.log(identA === identify(b)); //false
});
```

When called without arguments, the function returns a string with a unique identifier every time.

Example:

```js
modules.require(['identify'], function(identify) {
var a = identify(),
b = identify();

console.log(a === b); //false
});
```

## Public block technologies

The block is implemented in:

* `vanilla.js`
146 changes: 146 additions & 0 deletions common.blocks/idle/idle.en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
# idle

This block provides an object with a set of methods for generating an event when user activity ends (i.e. the user switches to another window or doesn't finish actions).

## Overview

### Object events

The following events are available:

| Name | Description |
| -------- | -------- |
| <a href="#events-idle">idle</a> | The browser is idle. |
| <a href="#events-wakeup">wakeup</a> | The user has resumed activity. |

### Properties and methods of the object

| Name | Returned value | Description |
| -------- | --- | -------- |
| <a href="#fields-start">start</a>() | - | Starts tracking user activity. |
| <a href="#fields-stop">stop</a>() | - | Stops tracking user activity. |
| <a href="#fields-isIdle">isIdle</a>() | `Boolean` | Checks the current state. |

### Block modifiers

| Modifier | Acceptable values | Usage | Description |
| ----------- | ------------------- | --------------------- | -------- |
| <a href="#modifiers-start">start</a> | `auto` | `JS` | Automatically starts tracking user activity. |

### Public block technologies

The block is implemented in:

* `js`

## Description

Subscribing to the block's event allows you to suspend operations, such as displaying animation, when there isn't any user activity.

The block is a descendant of the `Emitter` class in the `events` block, which allows it to call these methods.

```js
modules.require(['idle'], function(idle) {

idle
.on({
idle : function() {
// idle event handler
},
wakeup : function() {
// wakeup event handler
}
})
.start(); // start event generation

});
```

<a name="events"></a>

### Object events

<a name="events-idle"></a>

#### `idle` event

Generated when user activity ends.

<a name="events-wakeup"></a>

#### `wakeup` event

Generated when user activity resumes.

<a name="fields"></a>

### Properties and methods of the object

<a name="fields-start"></a>

#### `start` method

Starts tracking user activity.

Doesn't accept arguments.

No return value.

```js
modules.require(['idle'], function(idle) {

idle.start()

});
```

<a name="fields-stop"></a>

#### `stop` method

Stops user activity tracking.

Doesn't accept arguments.

No return value.

```js
modules.require(['idle'], function(idle) {

idle.start() // start tracking activity
idle.stop() // stop tracking activity

});
```

<a name="fields-isIdle"></a>

#### `isIdle` method

Checks whether there is any user activity.

Doesn't accept arguments.

**Return value:** `Boolean`. If there isn't any activity, `true`.

```js
modules.require(['idle'], function(idle) {

idle.isIdle() // true or false, depending on the current state

});
```

<a name="modifiers"></a>

### Block modifiers

<a name="modifiers-start"></a>

#### `start` modifier

Acceptable values: `'auto'`.

Usage: enabled in the `deps.js` dependencies file.

Automatically starts tracking user activity.
Loading