Image stack with steps

Extension ui.image-stack-steps displays and manages image stacks with steps. Each step includes a title, image stack and a footer. You dynamically add, update and delete steps.

Connection

JS (ES6)

import { ImageStackSteps } from 'ui.image-stack-steps';

const options = {
    steps: [
        {
            id: 'step1',
            header: { type: 'text', data: { text: 'Step title 1' } },
            stack: {
                images: [
                    { type: 'image', data: { src: 'image1.jpg', title: 'Image 1' } }
                ],
                status: { type: 'ok' }
            },
            footer: { type: 'text', data: { text: 'Step footer 1' } }
        }
    ]
};

const imageStack = new ImageStackSteps(options);
imageStack.renderTo(document.getElementById('container'));

JS (ES5)

var ImageStackSteps = require('ui.image-stack-steps').ImageStackSteps;

var options = {
    steps: [
        {
            id: 'step1',
            header: { type: 'text', data: { text: 'Step title 1' } },
            stack: {
                images: [
                    { type: 'image', data: { src: 'image1.jpg', title: 'Image 1' } }
                ],
                status: { type: 'ok' }
            },
            footer: { type: 'text', data: { text: 'Step footer 1' } }
        }
    ]
};

var imageStack = new ImageStackSteps(options);
imageStack.renderTo(document.getElementById('container'));

PHP

<php
use Bitrix\Main\Loader;
use Bitrix\Main\UI\Extension;

Loader::includeModule('ui');

Extension::load('ui.image-stack-steps');

?>
<div id="container"><div>
<script>
    BX.ready(function() {
        var options = {
            steps: [
                {
                    id: 'step1',
                    header: { type: 'text', data: { text: 'Step title 1' } },
                    stack: {
                        images: [
                            { type: 'image', data: { src: 'image1.jpg', title: 'Image 1' } }
                        ],
                        status: { type: 'ok' }
                    },
                    footer: { type: 'text', data: { text: 'Step footer 1' } }
                }
            ]
        };

        var imageStack = new BX.UI.ImageStackSteps(options);
        imageStack.renderTo(document.getElementById('container'));
    });
</script>

Parameters

Main parameters

Parameter `type`	Description	Required
steps `Array<StepType>`	Array with steps to be displayed in the component	Да

StepType parameter

Parameter `type`	Description	Required
id `String`	Step unique ID	Да
progressBox `Object`	Object, describing a progress-box and containing a title	No
header `HeaderType`	Step title, defined by type and data	Yes
stack `StackType`	Image stack, containing images and their status	Yes
footer `FooterType`	Step footer, defined by type and data	Yes
styles `Object`	Step styles. For example, minimal length	No

HeaderType parameter

Parameter `type`	Description	Required
type `String`	Header type	Yes
data `Object`	Header data	Yes
styles `Object`	Header styles	Нет

StackType parameter

Parameter `type`	Description	Required
images `Array<ImageType>`	Array with images	Yes
status `StackStatusType`	Stack status	No

ImageType parameter

Parameter `type`	Description	Required
type `String`	Image type	Yes
data `Object`	Image data	Yes

FooterType parameter

Parameters `type`	Description	Required
type `String`	Footer type	Yes
data `Object`	Footer data	Yes
styles `Object`	Footer styles	No

ImageStackSteps class

Class ImageStackSteps provides methods for managing image stacks and steps. These methods allow dynamically changing steps in the component.

Class methods

Method	Description	Parameters	Returned value
`renderTo(node: HTMLElement)`	Renders component indicated in the DOM element	`node` — DOM element used to render the component	—
`getSteps(): Array<StepType>`	Returns array with the following steps. Each step returns as a copy to avoid source data changes	—	Array with objects `StepType`
`addStep(stepData: StepType): boolean`	Addes a new step into the stack. If step data is incorrect, step won't be added	`stepData` — new step data	`true`, if step is added successfully, otherwise returns`false`
`updateStep(stepData: StepType, stepId: string): boolean`	Updates step data with specified `stepId`. If data is incorrect, step won't be updated	`stepData` — new step data. `stepId` — step identifier to be updated	`true`, if step was updated successfully, otherwise returns`false`
`deleteStep(stepId: string): boolean`	Deletes the step with specified `stepId`	`stepId` — step identifier to be deleted	`true`, if step was successfully deleted, otherwise returns `false`
`destroy()`	Destroys component, freeing up resources and disconnecting it from DOM	—	—

Examples

Simple stack with a single step

const options = {
    steps: [
        {
            id: 'step1',
            header: { type: 'text', data: { text: 'Step 1 header' } },
            stack: {
                images: [
                    { type: 'image', data: { src: 'image1.jpg', title: 'Image 1' } }
                ],
                status: { type: 'ok' }
            },
            footer: { type: 'text', data: { text: 'Step 1 footer' } }
        }
    ]
};

const imageStack = new ImageStackSteps(options);
imageStack.renderTo(document.getElementById('container'));

How to add a step dynamically

const newStep = {
    id: 'step2',
    header: { type: 'text', data: { text: 'Step 2 header' } },
    stack: {
        images: [
            { type: 'image', data: { src: 'image2.jpg', title: 'Image 2' } }
        ],
        status: { type: 'wait' }
    },
    footer: { type: 'text', data: { text: 'Step 2 footer' } }
};

imageStack.addStep(newStep);

Additional information

Extension uses EventEmitter for update notifications. For example, you can subscribe to the event UI.ImageStackSteps.onUpdateSteps, to track step updates.
To work with the extension, you need to have to connect libraries main.core, main.core.events and ui.vue3.
Extension supports various image types, including user avatars, icons and counters.
To customize external appearance, you can use the parameters styles in steps, headers and footers.