@htmlacademy/ace-editor-movie

    1.0.26 • Public • Published

    ace-editor-movie.js

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

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

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

    План

    Формат демки

    • пояснения демки 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;.

    Пример лога:

    log example

    Install

    npm i @htmlacademy/ace-editor-movie

    DownloadsWeekly Downloads

    12

    Version

    1.0.26

    License

    MIT

    Unpacked Size

    51.7 kB

    Total Files

    31

    Last publish

    Collaborators

    • andreychap
    • rewoop
    • kaineer
    • nakleikoff
    • juwain
    • expa
    • sashasushko
    • kam4atka
    • antonov_i