npm package: @htmlacademy/ace-editor-movie
Description: Automated typing in ace editor
Author: HTML Academy
Latest version: 1.0.26

# ace-editor-movie.js
Движок для показа демок в редакторе [Ace](https://ace.c9.io/).

[Техническая документация](/src/README.md).


## Руководство по составлению демок

### План
* <a href="#Format">Формат демки</a>
* <a href="#Options-nonconf">Ненастраиваемые свойства</a>
* <a href="#Tooltip">Tooltip</a>
* <a href="#Actions">Действия</a>
 * <a href="#Actions-delete">Удалить</a>
 * <a href="#Actions-replace">Заменить</a>
 * <a href="#Actions-add">Вставить код</a>
 * <a href="#Actions-addLine">Вставить строчку кода</a>
* <a href="#Debug">Отладка</a>


<a name="Format"></a>
### Формат демки
* пояснения демки `tooltip`, строка;
* перечень действий `actions`, объект/массив.

```js
var demo = {
tooltip: 'Этот тект будет показан в редакторе под курсором для пояснения демо',
actions: [ // Действия
    {
        action: 'delete',
        cursorPosition: {row: 2, column: 2},
        from: 'Заменяемый текст, будет удален'
    },
    {
        action: 'replace', // тип действия, см описание ниже
        cursorPosition: {row: 1, column: 1}, // Позиция курсора на момент начала показа
        from: 'Заменяемый текст, будет удален',
        to: 'Вставляемый текст'
    },
    {
        action: 'add',
        cursorPosition: {row: 2, column: 2},
        to: 'Вставляемый текст'
    },
    {
        action: 'addLine',
        cursorPosition: {row: 3, column: 3},
        to: 'Вставляемый текст'
    }
  ]
};
```

Полный пример демки находится в папке [examples](/examples).
Запустить демо можно командой `npm run examples:run`, затем открыть в браузере [localhost:8080/examples](http://localhost:8080/examples).

<a name="Options-nonconf"></a>
### Ненастраиваемые свойства
* интервал печати символов `codeTypeInterval=130 ms`
* ускорение показа демо, если следующее действие будет на той же линии кода `sameLineActionBooster=10 times`

<a name="Tooltip"></a>
### Tooltip
Tooltip — это подсказка к текущему действию демки. Отображается снизу строки кода, на котором показывается демо.
По умолчанию — текст на зеленом фоне. Вид tooltip настраивается через CSS, для изменения отображения нужно изменить стиль `.tooltip-answer`:

```css
.tooltip-answer
{
    /* Цвет фона tooltip, зеленый по уполчанию */
    background-color: #a4ffaa; 
}

```

<a name="Actions"></a>
### Действия
Показ демо состоит из поочередного выполнения одного или нескольких действий (`action`).
Последовательность действий для показа демо указыватся в массиве `actions`.
Каждое действие показывается согласно своему положению в массиве.

Старт показа демо происходит с задержкой `showInterval`, с этим же интервалом стартуют следующие действия.

**Для каждого действия обязательное поле – позиция курсора `cursorPosition`.**

Позицию курсора можно определить так: установить курсор в место требуемого показа демо и в консоли вызвать у редактора метод `editor.getCursorPosition()`.

#### Встроенные действия
<a name="Actions-delete"></a>
##### Удалить
Ищет и удаляет строку/регулярное выражение `from`.
Удаляется первое найденное значение от позиции курсора `cursorPosition`.

```js
{
  // название действия
  action: 'delete',
  cursorPosition: {row: 2, column: 2},
  from: 'Заменяемый текст, будет удален'
}
```

<a name="Actions-replace"></a>
##### Заменить
Ищет строку/регулярное выражение `from` и заменяет ее на строку `to`.
`to` может содержать символы переноса строки `/n` и другие
[управляющие последовательности](https://en.wikipedia.org/wiki/Escape_sequences_in_C).

Заменяется первое найденное значение от позиции курсора `cursorPosition`.

```js
{
  action: 'replace', // тип действия, см описание ниже
  cursorPosition: {row: 1, column: 1}, // Позиция курсора на момент начала показа
  from: 'Заменяемый текст, будет удален',
  to: 'Вставляемый текст'
}
```

<a name="Actions-add"></a>
##### Вставить код
Печатает строку `to` начиная с позиции курсора `cursorPosition`.
`to` может содержать символы переноса строки `/n` и другие
[управляющие последовательности](https://en.wikipedia.org/wiki/Escape_sequences_in_C).

```js
{
  action: 'add',
  cursorPosition: {row: 2, column: 2},
  to: 'Вставляемый текст'
}
```

<a name="Actions-addLine"></a>
##### Вставить строчку кода
Добавляет строчку кода после `cursorPosition.row` и печатает строку `to`,
выровненную с помощью `cursorPosition.column` количества отступов.

```js
{
  action: 'addLine',
  cursorPosition: {row: 3, column: 3},
  to: 'Вставляемый текст'
}
```


<a name="Debug"></a>
### Отладка
Подробное логирование включается через глобальное свойства 
`window.isAceEditorMovieLog = true;`.

Пример лога:

![log example](https://monosnap.com/file/eba4ljJXlbvJZjBRAvkKKQ12OJ1BAa.png)