JavaScript toolbar

The jSuites.toolbar is a lightweight JavaScript toolbar you can integrate with javascript components.




Source code

<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<div id='toolbar'></div>

<script>
jSuites.toolbar(document.getElementById('toolbar'), {
    container: true,
    items:[{
            type: 'icon',
            content: 'undo',
            onclick: function() {
                console.log('undo action');
            }
        },
        {
            type: 'icon',
            content: 'redo',
            onclick: function() {
                console.log('redo action');
            }
        },
        {
            type: 'icon',
            content: 'save',
            onclick: function () {
                console.log('save something');
            }
        },
        {
            type: 'label',
            content: 'Text item',
            onclick: function() {
                console.log('action');
            }
        },
        {
            type: 'divisor',
        },
        {
            type: 'select',
            data: [ 'Verdana', 'Arial', 'Courier New' ],
            width: '160px',
            render: function(e) {
                return '<span style="font-family:' + e + '">' + e + '';
            },
            onchange: function(a,b,c,d) {
                console.log('font-family: ' + d);
            }
        },
        {
            type: 'select',
            data: ['x-small','small','medium','large','x-large'],
            content: 'format_size',
            render: function(e) {
                return '<span style="font-size:' + e + '">' + e + '';
            },
            onchange: function(a,b,c,d) {
                console.log('font-size: ' + d);
            }
        },
        {
            type: 'select',
            data: ['format_align_left','format_align_center','format_align_right','format_align_justify'],
            render: function(e) {
                return '<i class="material-icons">' + e + '';
            },
            onchange: function(a,b,c,d) {
                if (d == 'format_align_left') {
                    console.log('font-align: left');
                } else if (d == 'format_align_center') {
                    console.log('font-align: center');
                } else if (d == 'format_align_right') {
                    console.log('font-align: right');
                } else if (d == 'format_align_justify') {
                    console.log('font-align: justify');
                }
            }
        },
        {
            type: 'icon',
            content: 'format_bold',
            onclick: function(a,b,c) {
                console.log('font-weight: bold');
                // Control state
                c.toggleState();
            },
            state: true,
            active: true,
        },
        {
            type: 'icon',
            content: 'format_color_text',
            onclick: function(element, instance, item) {
                if (! item.color) {
                    var colorPicker = jSuites.color(item, {
                        onchange:function(o, v) {
                            console.log('color:', v);
                        }
                    });
                    colorPicker.open();
                }
            }
        },
        {
            type: 'select',
            data: [ 'border_all', 'border_inner', 'border_horizontal', 'border_vertical', 'border_outer', 'border_left', 'border_top', 'border_right', 'border_bottom', 'border_clear', 'border_color', 'line_style' ],
            columns: 6,
            render: function(e) {
                return e !== 'line_style' ? '' + e + '' : '';
            },
            onrender: function(a, b) {
                if (b == 'border_color') {
                    a.setAttribute('type', 'generic');

                    if (! a.color) {
                        var colorPicker = jSuites.color(a, {
                            onchange: function(o, v) {
                                a.children[0].style.color = v;
                            },
                        });
                        //colorPicker.open();
                    }
                } else if (b == 'line_style') {
                    if (! a.picker) {
                        a.setAttribute('type', 'generic');

                        var picker = jSuites.picker(a, {
                            content: 'line_style',
                            type: 'select',
                            data: ["height: 1px; width: 50px; border-bottom: 1px solid black;", "height: 1px; width: 50px; border-bottom: 2px solid black;", "height: 1px; width: 50px; border-bottom: 3px solid black;", "height: px; width: 50px; border-bottom: 1px dashed black;"],
                            render: function(e) {
                                return '
'; }, width: '24px', }); a.children[0].style.padding = 0; } } } }, ] }) </script> </html>