Skip to content

spin: english version. Close #579 #603

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gela-d merged 1 commit into from
Jul 10, 2014
Merged

spin: english version. Close #579 #603

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
216 changes: 96 additions & 120 deletions common.blocks/spin/spin.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,141 +2,117 @@

This block indicates the progress of some process (e.g. site page or some media file loading).

Rotation of the **spin** block is implemented by CSS3 animation.
Rotation of the `spin` block is implemented by CSS3 animation.

## Block Modifiers

The **spin** block requires the block modifiers listed below:
### _theme

### Themes of a block `_theme`
Mandatory modifier. The `spin` block doesn't have native control representation (*default*).

#### simple
This block supports following themes:

* simple
* normal

Following examples demonstrate this:

**simple**

```bemjson
{
block : 'spin',
mods : { theme : 'simple', progress : true }
}
```

**normal**

```bemjson
{
block : 'spin',
mods : { theme : 'simple', size : 's', progress : true }
}
{
block : 'spin',
mods : { theme : 'normal', size : 's', progress : true }
}
```

#### normal
### _size

````bemjson
{
block : 'spin',
mods : { theme : 'normal', size : 's', progress : true }
}
````
Mandatory modifier.

### Sizes `_size`
There are five sizes available: **XS**, **S**, **M**, **L**, **XL**.

There are five sizes available: **xs**, **s**, **m**, **l**, **xl**.
Following examples demonstrate this:

<table>
<tr>
<th>Theme/Size</th>
<th>simple</th>
<th>normal</th>
</tr>
<tr>
<th>xs</th>
<td>
<pre><code>
{
block : 'spin',
mods : { theme : 'simple', size : 'xs', progress : true }
}
</code></pre>
</td>
<td>
<pre><code>
{
block : 'spin',
mods : { theme : 'normal', size : 'xs', progress : true }
}
</code></pre>
</td>
</tr>
<tr>
<th>s</th>
<td>
<pre><code>
{
block : 'spin',
mods : { theme : 'simple', size : 's', progress : true }
}
</code></pre>
</td>
<td>
<pre><code>
{
block : 'spin',
mods : { theme : 'normal', size : 's', progress : true }
}
</code></pre>
</td>
</tr>
<tr>
<th>m</th>
<td>
<pre><code>
{
block : 'spin',
mods : { theme : 'simple', size : 'm', progress : true }
}
</code></pre>
</td>
<td>
<pre><code>
{
block : 'spin',
mods : { theme : 'normal', size : 'm', progress : true }
}
</code></pre>
</td>
</tr>
<tr>
<th>l</th>
<td>
<pre><code>
{
block : 'spin',
mods : { theme : 'simple', size : 'l', progress : true }
}
</code></pre>
</td>
<td>
<pre><code>
{
block : 'spin',
mods : { theme : 'normal', size : 'l', progress : true }
}
</code></pre>
</td>
</tr>
<tr>
<th>xl</th>
<td>
<pre><code>
{
block : 'spin',
mods : { theme : 'simple', size : 'xl', progress : true }
}
</code></pre>
</td>
<td>
<pre><code>
{
block : 'spin',
mods : { theme : 'normal', size : 'xl', progress : true }
}
</code></pre>
</td>
</tr>
<tr>
<th>Block's size</th>
<th>Size, px</th>
<th>Example</th>
</tr>
<tr>
<th>XS</th>
<td>16px</td>
<td>
<pre><code>
{
block : 'spin',
mods : { theme : 'normal', size : 'xs', progress : true }
}
</code></pre>
</td>
</tr>
<tr>
<th>S</th>
<td>24px</td>
<td>
<pre><code>
{
block : 'spin',
mods : { theme : 'normal', size : 's', progress : true }
}
</code></pre>
</td>
</tr>
<tr>
<th>M</th>
<td>28px</td>
<td>
<pre><code>
{
block : 'spin',
mods : { theme : 'normal', size : 'm', progress : true }
}
</code></pre>
</td>
</tr>
<tr>
<th>L</th>
<td>32px</td>
<td>
<pre><code>
{
block : 'spin',
mods : { theme : 'normal', size : 'l', progress : true }
}
</code></pre>
</td>
</tr>
<tr>
<th>XL</th>
<td>38px</td>
<td>
<pre><code>
{
block : 'spin',
mods : { theme : 'normal', size : 'xl', progress : true }
}
</code></pre>
</td>
</tr>
</table>

### Spin progress `_progress`
### _progress

The `{ progress : true }` modifier activates the spin. The **spin** block rotates in visible state.
`progress` modifier with `true` value activates the spin. `spin` block rotates only in visible state.

The `{ progress : false }` modifies paused rotation process. The `false` value is used when a **spin** block is invisible.
`progress` modifies with `false` value paused rotation of `spin` block and hides it from the page.
Copy link
Member

@tadatuta tadatuta Jul 10, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

это не совсем корректно. нет модификатора в значении false, под этим подразумевается удаление данного модификатора.

8 changes: 3 additions & 5 deletions common.blocks/spin/spin.ru.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,12 @@

### Размеры `_size`

Задает размер блоку `spin`. Обязательный модификатор.
Обязательный модификатор. Задает размер блоку `spin`.

Реализован только в теме *normal*.

Доступно пять размеров реализации блока: **xs**, **s**, **m**, **l**, **xl**.



<table>
<tr>
<th>Размер<br>блока</th>
Expand Down Expand Up @@ -113,6 +111,6 @@

### Вращение прелоадера `_progress`

Модификатор `_progress` в значении `_true` задает вращение прелоадера и показывает его на странице. Когда прелоадер виден, он крутится.
Модификатор `progress` в значении `true` задает вращение прелоадера и показывает его на странице. Когда прелоадер виден, он крутится.

Модификатор `_progress` в значении `_false` останавливает прелоадер и скрывает его со страницы.
Модификатор `progress` в значении `false` останавливает прелоадер и скрывает его со страницы.