pip-webui/pip-webui-composite/samples/composite/composite.html

HTML5 UI for LOB applications

<h2 class="text-title tm0 bm24">{{ 'FILLED' | translate }} Composite Control</h2>
<pip-composite-toolbar pip-composite-empty="compositeView.length == 0"
                       pip-composite-id="2">
</pip-composite-toolbar>

<div class="tm24"></div>

<pip-composite-edit pip-contents="compositeView"
                    pip-scroll-container=".composite-scroll"
                    pip-rebind="true"
                    pip-composite-placeholder="'DESCRIBE_THIS'"
                    pip-added-content="true"
                    pip-composite-id="2">
</pip-composite-edit>

<pre class="text-body1 color-window-bg p16">
<h3 class="text-subhead2 m0">{{:: 'CODE' | translate}}</h3>
HTML:
<code class="language-markup">
&lt;<strong>pip-composite-toolbar</strong> pip-composite-empty="emptyComposite.length == 0"
                       <strong>ng-disabled="isDisabled()"</strong>
                       <strong>pip-composite-id="2"</strong>&gt;
&lt;/<strong>pip-composite-toolbar</strong>&gt;

&lt;div class="tm24"&gt;&lt;/div&gt;

&lt;<strong>pip-composite-edit</strong> <strong>pip-contents="compositeView"</strong>
                        pip-scroll-container=".composite-scroll"
                        pip-rebind="true"
                        pip-composite-placeholder="'DESCRIBE_THIS'"
                        pip-added-content="true"
                    <strong>pip-composite-id="2"</strong>&gt;
&lt;/<strong>pip-composite-edit</strong>&gt;
</code>
JS:
<code class="language-js">
$scope.compositeView = [
    {
        type: <strong>'text'</strong>,
        text: 'Architecture is both the process and the product of planning, designing, ' +
        'and constructing buildings and other physical structures. Architectural works, ' +
        'in the material form of buildings, are often perceived as cultural symbols and ' +
        'as works of art. Historical civilizations are often identified with their surviving ' +
        'architectural achievements.',
        docs: [],
        pic_ids: [],
        loc_pos: null,
        loc_name: '',
        start: null,
        end: null,
        checklist: []
    },
    {
        type: <strong>'pictures'</strong>,
        text: '',
        docs: [],
        pic_ids: [
            '56790b4c60958daa664fd8c8',
            '56790b4e60958daa664fd8c9',
            '56790b4f60958daa664fd8ca',
            '56790b4f60958daa664fd8cb',
            '56790b4f60958daa664fd8cc',
            '56790b5060958daa664fd8cd',
            '56790b5160958daa664fd8ce',
            '56790b5160958daa664fd8cf',
            '56790b5260958daa664fd8d0',
            '567911f060958daa664fd8ff',
            '567911f060958daa664fd8fe'
        ],
        loc_pos: null,
        loc_name: '',
        start: null,
        end: null,
        checklist: []
    },
    {
        type: <strong>'location'</strong>,
        text: '',
        docs: [],
        pic_ids: [],
        loc_pos: {
            type: 'Point',
            coordinates: [32.393603, -110.982593]
        },
        loc_name: '780 W. Lost Creek Place, Tucson, AZ 85737',
        start: null,
        end: null,
        checklist: []
    },
    {
        type: <strong>'documents'</strong>,
        text: '',
        docs: [
            {
                file_id: '12eb8327eaa60e89207b7489',
                file_name: '6d4261a3e51725.mp3'
            },
            {
                file_id: '54eb8327eaa60e89207b7489',
                file_name: '1d4261a3e51725.mp3'
            }
        ],
        pic_ids: [],
        loc_pos: null,
        loc_name: '',
        start: null,
        end: null,
        checklist: []
    },
    {
        type: <strong>'checklist'</strong>,
        text: '',
        docs: [],
        pic_ids: [],
        loc_pos: null,
        loc_name: '',
        start: null,
        end: null,
        checklist: [
            {
                text: 'Efficiently simplify visionary content rather than extensive. Phosfluorescently engage.',
                checked: true
            },
            {
                text: 'Phosfluorescently engage clicks-and-mortar niche markets.',
                checked: true
            },
            {
                text: 'Следующий будет пустым',
                checked: false
            },
            {
                text: '',
                checked: true
            },
            {
                text: 'Conveniently redefine empowered catalysts for change vis-a-vis timely action items.' +
                ' Continually underwhelm interactive information whereas leading-edge networks.',
                checked: true
            }
        ]
    }
];
</code>
</pre>