Composite content controls

Pip.WebUI.Composite contains a number of controls to visualize and edit complex unstructured and semi-structured content composed of pictures, documents, locations, video or audio, and, of course, hypertext with formatting and links.

Composite view

Control shows read-only version of composite content. The content structured as blocks with hypertext, images, documents, locations, checklists. The only allowed action is to check/uncheck item in checklists

Using

<pip-composite [elements]="elements" [disabled]="disabled"></pip-composite>

import { PipCompositeElement, PipCompositeElementTypes } from 'pip-webui2-composite';

...

elements: PipCompositeElement[] = [
        {
            type: PipCompositeElementTypes.TEXT,
            text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        },
        {
            type: PipCompositeElementTypes.CHECKLIST,
            elements: [
                {
                    text: 'Create checklist edit component',
                    checked: true
                },
                {
                    text: 'Create checklist view component',
                    checked: true
                },
                {
                    text: 'Add checklist view component to composite view component',
                    checked: true
                }
            ]
        },
        {
            type: PipCompositeElementTypes.LOCATION,
            location: {
                coordinates: [48.8534100, 2.3488000]
            },
            locationName: 'Paris'
        },
        {
            type: PipCompositeElementTypes.DOCUMENTS,
            documents: [
                {
                    url: './assets/boy.png'
                }
            ]
        },
        {
            type: PipCompositeElementTypes.PICTURES,
            pictures: [
                './assets/boy2.png',
                './assets/girl.png',
                './assets/girl2.png',
                './assets/boy.png'
            ]
        },
        {
            type: PipCompositeElementTypes.TIME,
            startDate: this.startDate,
            endDate: this.endDate
        },
        {
            type: PipCompositeElementTypes.LOCATION,
            location: {
                coordinates: [51.5085300, -0.1257400]
            },
            locationName: 'London'
        }
];

Example on the image

Composite edit

Control allows to construct complex content using blocks with hypertext, images, documents, locations and checklists. Blocks can be added, moved up or down or removed. Hypertext is entered using popular markdown format

Using

<div class="scrollable-element">
    <pip-composite-edit #composite [elements]="elements" scrollContainer=".scrollable-element" 
        (onElementsChange)="elements = $event">
    </pip-composite-edit>
</div>

import { PipCompositeElement, PipCompositeElementTypes } from 'pip-webui2-composite';

...

elements: PipCompositeElement[] = [
        {
            type: PipCompositeElementTypes.TEXT,
            text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        },
        {
            type: PipCompositeElementTypes.CHECKLIST,
            elements: [
                {
                    text: 'Create checklist edit component',
                    checked: true
                },
                {
                    text: 'Create checklist view component',
                    checked: true
                },
                {
                    text: 'Add checklist view component to composite view component',
                    checked: true
                }
            ]
        },
        {
            type: PipCompositeElementTypes.LOCATION,
            location: {
                coordinates: [48.8534100, 2.3488000]
            },
            locationName: 'Paris'
        },
        {
            type: PipCompositeElementTypes.DOCUMENTS,
            documents: [
                {
                    url: './assets/boy.png'
                }
            ]
        },
        {
            type: PipCompositeElementTypes.PICTURES,
            pictures: [
                './assets/boy2.png',
                './assets/girl.png',
                './assets/girl2.png',
                './assets/boy.png'
            ]
        },
        {
            type: PipCompositeElementTypes.TIME,
            startDate: this.startDate,
            endDate: this.endDate
        },
        {
            type: PipCompositeElementTypes.LOCATION,
            location: {
                coordinates: [51.5085300, -0.1257400]
            },
            locationName: 'London'
        }
];

Example on the image

Checlist view

Control shows read-only version of checklist and only allows to check/uncheck items. This control is integrated inside Composite view, but it also can be used independently

Using

<pip-checklist [disabled]="disabled" [elements]="elements"></pip-checklist>

import { PipChecklistElement } from '../pip-webui2-composite';

...

elements: PipChecklistElement[] = [
        {
            text: 'Buy christmas tree',
            checked: true,
        },
        {
            text: 'Buy gifts',
        },
        {
            text: 'Go to the gym on Saturday',
        },
        {
            text: 'Finish magistry site',
        },
        {
            text: 'Some text here...',
        }
];

Example on the image

Checlist edit

Control allows to edit checklist with textual items. It allows to append or insert new items, edit them, change their order or remove them. This control is integrated into Composite edit, but it can also be used independently

Using

<pip-checklist-edit [disabled]="disabled" [elements]="elements"></pip-checklist-edit>

import { PipChecklistElement } from '../pip-webui2-composite';

...

elements: PipChecklistElement[] = [
        {
            text: 'Buy christmas tree',
            checked: true,
        },
        {
            text: 'Buy gifts',
        },
        {
            text: 'Go to the gym on Saturday',
        },
        {
            text: 'Finish magistry site',
        },
        {
            text: 'Some text here...',
        }
];

Example on the image

Composite toolbar

Control helps to construct own vesion of a simple composite content. By clicking a button user can add text, images, files, location, date or checklist elements

Using

<pip-composite-edit #composite></pip-composite-edit>

<pip-composite-toolbar [compositeEdit]="composite"></pip-composite-toolbar>

Example on the image

Installation

To install this module using npm:

npm install pip-webui2-composite --save

License

This module is released under MIT license and totally free for commercial and non-commercial use.