@doneproperly/gitbook-plugin-theme-doneproperly-default/src/js/theme/toolbar.js

Default theme for GitBook

var $ = require('jquery');

var gitbook = window.gitbook;

// List of created buttons
var buttons = [],
// Generated Id for buttons
    BTN_ID = 0;

function generateId() {
    return 'btn-'+(BTN_ID++);
}

// Insert a jquery element at a specific position
function insertAt(parent, selector, index, element) {
    var lastIndex = parent.children(selector).length;
    if (index < 0) {
        index = Math.max(0, lastIndex + 1 + index);
    }
    parent.append(element);

    if (index < lastIndex) {
        parent.children(selector).eq(index).before(parent.children(selector).last());
    }
}

// Default click handler
function defaultOnClick(e) {
    e.preventDefault();
}

// Create a dropdown menu
function createDropdownMenu(dropdown) {
    var $menu = $('<div>', {
        'class': 'dropdown-menu',
        'html': '<div class="dropdown-caret"><span class="caret-outer"></span><span class="caret-inner"></span></div>'
    });

    if (typeof dropdown == 'string') {
        $menu.append(dropdown);
    } else {
        var groups = dropdown.map(function(group) {
            if ($.isArray(group)) return group;
            else return [group];
        });

        // Create buttons groups
        groups.forEach(function(group) {
            var $group = $('<div>', {
                'class': 'buttons'
            });
            var sizeClass = 'size-'+group.length;

            // Append buttons
            group.forEach(function(btn) {
                btn = $.extend({
                    text: '',
                    className: '',
                    onClick: defaultOnClick
                }, btn || {});

                var $btn = $('<button>', {
                    'class': 'button '+sizeClass+' '+btn.className,
                    'text': btn.text
                });
                $btn.click(btn.onClick);

                $group.append($btn);
            });


            $menu.append($group);
        });

    }


    return $menu;
}

// Create a new button in the toolbar
function createButton(opts) {
    opts = $.extend({
        // Aria label for the button
        label: '',

        // Icon to show
        icon: '',

        // Inner text
        text: '',

        // Right or left position
        position: 'left',

        // Other class name to add to the button
        className: '',

        // Triggered when user click on the button
        onClick: defaultOnClick,

        // Button is a dropdown
        dropdown: null,

        // Position in the toolbar
        index: null,

        // Button id for removal
        id: generateId()
    }, opts || {});

    buttons.push(opts);
    updateButton(opts);

    return opts.id;
}

// Update a button
function updateButton(opts) {
    var $result;
    var $toolbar = $('.book-header');
    var $title = $toolbar.find('h1');

    // Build class name
    var positionClass = 'pull-'+opts.position;

    // Create button
    var $btn = $('<a>', {
        'class': 'btn',
        'text': opts.text? ' ' + opts.text : '',
        'aria-label': opts.label,
        'href': '#'
    });

    // Bind click
    $btn.click(opts.onClick);

    // Prepend icon
    if (opts.icon) {
        $('<i>', {
            'class': opts.icon
        }).prependTo($btn);
    }

    // Prepare dropdown
    if (opts.dropdown) {
        var $container = $('<div>', {
            'class': 'dropdown '+positionClass+' '+opts.className
        });

        // Add button to container
        $btn.addClass('toggle-dropdown');
        $container.append($btn);

        // Create inner menu
        var $menu = createDropdownMenu(opts.dropdown);

        // Menu position
        $menu.addClass('dropdown-'+(opts.position == 'right'? 'left' : 'right'));

        $container.append($menu);
        $result = $container;
    } else {
        $btn.addClass(positionClass);
        $btn.addClass(opts.className);
        $result = $btn;
    }

    $result.addClass('js-toolbar-action');

    if ($.isNumeric(opts.index) && opts.index >= 0) {
        insertAt($toolbar, '.btn, .dropdown, h1', opts.index, $result);
    } else {
        $result.insertBefore($title);
    }
}

// Update all buttons
function updateAllButtons() {
    $('.js-toolbar-action').remove();
    buttons.forEach(updateButton);
}

// Remove a button provided its id
function removeButton(id) {
    buttons = $.grep(buttons, function(button) {
        return button.id != id;
    });

    updateAllButtons();
}

// Remove multiple buttons from an array of ids
function removeButtons(ids) {
    buttons = $.grep(buttons, function(button) {
        return ids.indexOf(button.id) == -1;
    });

    updateAllButtons();
}

// When page changed, reset buttons
gitbook.events.on('page.change', function() {
    updateAllButtons();
});

module.exports = {
    createButton: createButton,
    removeButton: removeButton,
    removeButtons: removeButtons
};