@htmlacademy/ace-editor-movie v1.0.26

ace-editor-movie.js

Движок для показа демок в редакторе Ace.

Техническая документация.

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

План

• Формат демки
• Ненастраиваемые свойства
• Tooltip
• Действия
• Удалить
• Заменить
• Вставить код
• Вставить строчку кода
• Отладка

Формат демки

• пояснения демки tooltip, строка;
• перечень действий actions, объект/массив.

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. Запустить демо можно командой npm run examples:run, затем открыть в браузере localhost:8080/examples.

Ненастраиваемые свойства

• интервал печати символов codeTypeInterval=130 ms
• ускорение показа демо, если следующее действие будет на той же линии кода sameLineActionBooster=10 times

Tooltip

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

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

Действия

Показ демо состоит из поочередного выполнения одного или нескольких действий (action). Последовательность действий для показа демо указыватся в массиве actions. Каждое действие показывается согласно своему положению в массиве.

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

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

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

Встроенные действия

Удалить

Ищет и удаляет строку/регулярное выражение from. Удаляется первое найденное значение от позиции курсора cursorPosition.

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

Заменить

Ищет строку/регулярное выражение from и заменяет ее на строку to. to может содержать символы переноса строки /n и другие управляющие последовательности.

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

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

Вставить код

Печатает строку to начиная с позиции курсора cursorPosition. to может содержать символы переноса строки /n и другие управляющие последовательности.

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

Вставить строчку кода

Добавляет строчку кода после cursorPosition.row и печатает строку to, выровненную с помощью cursorPosition.column количества отступов.

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

Отладка

Подробное логирование включается через глобальное свойства window.isAceEditorMovieLog = true;.

Пример лога: