Add api to extend toolbar

3 files changed, 156 insertions, 126 deletions

diff --git a/theme/javascript/apis/toolbar.js b/theme/javascript/apis/toolbar.js
new file mode 100644
index 0000000..1ed3fa8
--- /dev/null
+++ b/theme/javascript/apis/toolbar.js
@@ -0,0 +1,133 @@
+define([
+    'jQuery',
+    'lodash'
+], function($, _) {
+    var $toolbar = $('.book-header');
+    var $title = $toolbar.find('h1');
+
+    // 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 (_.isString(dropdown)) {
+            $menu.append(dropdown);
+        } else {
+            var groups = _.map(dropdown, function(group) {
+                if (_.isArray(group)) return group;
+                else return [group];
+            });
+
+            // Create buttons groups
+            _.each(groups, function(group) {
+                var $group = $('<div>', {
+                    'class': 'buttons'
+                });
+                var sizeClass = 'size-'+group.length;
+
+                // Append buttons
+                _.each(group, function(btn) {
+                    btn = _.defaults(btn || {}, {
+                        text: '',
+                        className: '',
+                        onClick: defaultOnClick
+                    });
+
+                    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 = _.defaults(opts || {}, {
+            // 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
+        });
+
+        // Build class name
+        var positionClass = 'pull-'+opts.position;
+
+        // Create button
+        var $btn = $('<a>', {
+            'class': 'btn',
+            '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);
+            $container.append($menu);
+
+            $container.insertBefore($title);
+        } else {
+            $btn.addClass(positionClass);
+            $btn.addClass(opts.className);
+            $btn.insertBefore($title);
+        }
+    }
+
+    return {
+        createButton: createButton
+    };
+});
diff --git a/theme/javascript/core/font-settings.js b/theme/javascript/core/font-settings.js
deleted file mode 100644
index 63177ee..0000000
--- a/theme/javascript/core/font-settings.js
+++ /dev/null
@@ -1,103 +0,0 @@
-define([
-    "jQuery",
-    "utils/storage"
-], function($, storage) {
-    var fontState;
-
-    var THEMES = {
-        "white": 0,
-        "sepia": 1,
-        "night": 2
-    };
-
-    var FAMILY = {
-        "serif": 0,
-        "sans": 1
-    };
-
-    var enlargeFontSize = function(e){
-        if (fontState.size < 4){
-            fontState.size++;
-            fontState.save();
-        }
-    };
-
-    var reduceFontSize = function(e){
-        if (fontState.size > 0){
-            fontState.size--;
-            fontState.save();
-        }
-    };
-
-    var changeFontFamily = function(){
-        var index = $(this).data("font");
-
-        fontState.family = index;
-        fontState.save();
-    };
-
-    var changeColorTheme = function(){
-        var $book = $(".book");
-        var index = $(this).data("theme");
-
-        if (fontState.theme !== 0)
-            $book.removeClass("color-theme-"+fontState.theme);
-
-        fontState.theme = index;
-        if (fontState.theme !== 0)
-            $book.addClass("color-theme-"+fontState.theme);
-
-        fontState.save();
-    };
-
-    var update = function() {
-        var $book = $(".book");
-
-        $(".font-settings .font-family-list li").removeClass("active");
-        $(".font-settings .font-family-list li:nth-child("+(fontState.family+1)+")").addClass("active");
-
-        $book[0].className = $book[0].className.replace(/\bfont-\S+/g, '');
-        $book.addClass("font-size-"+fontState.size);
-        $book.addClass("font-family-"+fontState.family);
-
-        if(fontState.theme !== 0) {
-            $book[0].className = $book[0].className.replace(/\bcolor-theme-\S+/g, '');
-            $book.addClass("color-theme-"+fontState.theme);
-        }
-    };
-
-    var init = function(config) {
-        var $toggle, $bookBody, $dropdown, $book;
-
-        //Find DOM elements.
-        $book = $(".book");
-        $toggle = $(".book-header .toggle-font-settings");
-        $dropdown = $("#font-settings-wrapper .dropdown-menu");
-        $bookBody = $(".book-body");
-
-        // Instantiate font state object
-        fontState = storage.get("fontState", {
-            size: config.size || 2,
-            family: FAMILY[config.family || "sans"],
-            theme: THEMES[config.theme || "white"]
-        });
-        fontState.save = function(){
-            storage.set("fontState",fontState);
-            update();
-        };
-
-        update();
-
-        //Add event listeners
-        $(document).on('click', "#enlarge-font-size", enlargeFontSize);
-        $(document).on('click', "#reduce-font-size", reduceFontSize);
-
-        $(document).on('click', "#font-settings-wrapper .font-family-list .button", changeFontFamily);
-        $(document).on('click', "#font-settings-wrapper .color-theme-list .button", changeColorTheme);
-    };
-
-    return {
-        init: init,
-        update: update
-    }
-});
\ No newline at end of file
diff --git a/theme/javascript/gitbook.js b/theme/javascript/gitbook.js
index 495afac..b9f7d01 100755
--- a/theme/javascript/gitbook.js
+++ b/theme/javascript/gitbook.js
@@ -1,22 +1,21 @@
 define([
-    "jQuery",
-    "utils/storage",
-    "utils/sharing",
-    "utils/dropdown",
-
-    "core/events",
-    "core/font-settings",
-    "core/state",
-    "core/keyboard",
-    "core/navigation",
-    "core/progress",
-    "core/sidebar",
-    "core/search"
-], function($, storage, sharing, dropdown, events, fontSettings, state, keyboard, navigation, progress, sidebar, search){
+    'jQuery',
+    'utils/storage',
+    'utils/sharing',
+    'utils/dropdown',
+
+    'core/events',
+    'core/state',
+    'core/keyboard',
+    'core/navigation',
+    'core/progress',
+    'core/sidebar',
+    'core/search',
+
+    'apis/toolbar'
+], function($, storage, sharing, dropdown, events, state,
+keyboard, navigation, progress, sidebar, search, toolbar){
     var start = function(config) {
-        var $book;
-        $book = state.$book;
-
         // Init sidebar
         sidebar.init();
 
@@ -35,15 +34,16 @@ define([
         // Init navigation
         navigation.init();
 
-        //Init font settings
-        fontSettings.init(config.fontSettings || {});
-
-        events.trigger("start", config);
-    }
+        events.trigger('start', config);
+    };
 
+    // Export APIs for plugins
     return {
         start: start,
         events: events,
-        state: state
+        state: state,
+
+        toolbar: toolbar,
+        storage: storage
     };
 });