Konstruct - конструктор конструкторов

Виджет для создания конструкторов с обширными возможностями.

Подключение

Собранный скрипт последней версии всегда находится по пути https://github.com/poalrom/konstruct/blob/gh-pages/build/bundle.js

Можно подключить напрямую с github

<script src='https://raw.githubusercontent.com/poalrom/konstruct/gh-pages/build/bundle.js'></script>

Отображение

Для отображения необходимо вызвать функцию render, передав в нее селектор элемента, в который нужно встроить конструктор и настройки конструктора.

window.konstruct.render('.konstruct', konstructConfig);

Настройки

Настройки содержат несколько основных полей:

• action - значение атрибута action основного тега form
• saveButtonText - текст кнопки сохранения конструктора
• onSubmit - обработчик сохранения конструктора
• blocks - описание блоков конструктора
• debug - опции для отладки

Обработчик сохранения

Функция принимает на вход объект, где ключами являются заголовки блоков, а значениями - выбранные параметры.
Для блоков с текстовыми полями в значении находится объект с ключам-заголовками полей и значениями этих полей.

Блоки конструктора

Блок - один этап конструктора. Бывает разных типов. Имеет общие поля:

{
    // Уникальный идентификатор среди всех блоков
    id: 'width',
    // Массив условий, при которых этот блок будет отображаться
    // Может быть несколько условий, они объединяются через логическое "И"
    // Если хотя бы одно условие не выполняется, блока нет в DOM
    conditions: [{
        // Идентификатор блока, значение для которого нужно проверять
        id: 'type',
        // Значение блока с указанным идентификатором, при котором этот блок будет виден
        value: 'Framewall'
    }],
    // Тип блока
    type: 'select',
    // Заголовок блока. Поддерживает HTML, отображается в теге <h2> в начале блока
    title: 'CHOOSE A WIDTH',
    // Описание блока. Поддерживает HTML и шаблоны, отображается в теге <p> под заголовком
    description: 'Lorem ipsum dolor sit amet.',
}

Блок type select

Блок выбора одного из вариантов. Может отображать картинку выбранного варианта. Имеет поле values, где указываются варианты для выбора:

{
    // Массив значений выбора
    values: [{
        // Значение, должно быть уникально внутри одного блока
        // Используется для conditions
        value: 'Shift',
        // Текст варианта. Отображается внутри блока выбора, поддерживает HTML
        // Если отсутствует, то отображается value
        text: 'Shift',
        // Путь до изображения. Поддерживает шаблоны
        // Если отсутствует, то при выборе варианта изображение не будет отображаться
        img: 'raz'
    }, {
        value: 'Framewall',
        text: 'Framewall',
    }, {
        value: 'Chisel',
        text: 'Chisel'
    }],
    // Флаг, при установке которого убирается изображение финального результата,
    // а у каждого варианта появляется собственное изображение
    showImages: true,
}

Блок type fields

Блок текстовых полей ввода. Всё, что можно отобразить в качестве input, можно сделать через этот блок. Имеет поле fields, описывающее поля ввода:

{
    // Текст для кнопки перехода к следующему шагу
    // Вызывает отправку события update без поля path
    // Подробнее в блок про события
    nextStepButtonText: 'Далее',
    // Список полей ввода
    fields: [{
        // Уникальный идентификатор всреди этого блока полей ввода
        id: 'width',
        // Название поля. Отображается в теге <label> над полем ввода, поддерживает HTML
        title: 'Ширина',
        // Атрибуты, которые пробросятся напрямую в тег input
        attributes: {
            type: 'number',
            required: true,
            value: 3
        }
    }, {
        id: 'height',
        title: 'Высота',
        attributes: {
            type: 'number',
            required: true,
        }
    }]
}

Блок type image

Блок отображения картинки. Отлично подходит для отображения финального результата работы конструктора. Имеет поле img, которое принимает путь изображения. Поддерживает шаблоны

Шаблоны

Во все строки, которые поддерживают шаблоны, можно вставлять значения других блоков. Пример:

{
    //...
    img: "/images/{type}/{contacts.city}/result.jpg",
    //...
}

В этом примере на место {type} подставится значение блока с идентификатором type, а на место {contacts.city} - значение поля city блока списка полей с идентификатором contacts.

Для уточнения:

• {id} - вставить значение блока типа select с идентификатором id
• {blockId.fieldId} - найти блок с типом fields и идентификатором blockId и получить значение поля с идентификатором fieldId и вставить его на это место

События

Плагин вызывает всплывающие события на корневом элементе создаваемой формы.
Поддерживаемые типы событий:

• init - событие рендера формы. Без дополнительных полей
• update - событие обновления поля, либо нажатия на кнопку перехода к следующему шагу.

Событие update содержит следующие дополнительные данные в поле detail:

• blockId - ID блока, значение которого было обновлено
• blockType - тип обновленного блока
• path - присутствует, если было обновлено поле в блоке fields и соответствует {ID блока}.{ID поля}. Отсутствует при нажатии на кнопку перехода к следующему шагу в блоке fields

Опции отладки

• logUpdates - флаг логгирования изменений значений в реальном времени. Нужен, если где-то что-то не прорастает
• placeholdImages - флаг заменяет все изображения в блоках на заглушки с текстом пути, который для них формируется