Fix position of glossary icon relative to sidebar toggler

3 files changed, 52 insertions, 8 deletions

diff --git a/theme/assets/website/app.js b/theme/assets/website/app.js
index b1dbe9a..083c05d 100644
--- a/theme/assets/website/app.js
+++ b/theme/assets/website/app.js
@@ -24073,6 +24073,7 @@ function start(config) {
 
     // Add action to toggle sidebar
     toolbar.createButton({
+        index: 0,
         icon: 'fa fa-align-justify',
         onClick: function(e) {
             e.preventDefault();
@@ -24466,6 +24467,18 @@ var events = require('./events');
 // List of created buttons
 var buttons = [];
 
+// Insert a jquery element at a specific position
+function insertAt(parent, selector, index, element) {
+    var lastIndex = parent.children(selector).size();
+    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) {
@@ -24543,7 +24556,10 @@ function createButton(opts) {
         onClick: defaultOnClick,
 
         // Button is a dropdown
-        dropdown: null
+        dropdown: null,
+
+        // Position in the toolbar
+        index: null
     });
 
     buttons.push(opts);
@@ -24552,6 +24568,7 @@ function createButton(opts) {
 
 // Update a button
 function updateButton(opts) {
+    var $result;
     var $toolbar = $('.book-header');
     var $title = $toolbar.find('h1');
 
@@ -24593,12 +24610,17 @@ function updateButton(opts) {
         $menu.addClass('dropdown-'+(opts.position == 'right'? 'left' : 'right'));
 
         $container.append($menu);
-
-        $container.insertBefore($title);
+        $result = $container;
     } else {
         $btn.addClass(positionClass);
         $btn.addClass(opts.className);
-        $btn.insertBefore($title);
+        $result = $btn;
+    }
+
+    if (_.isNumber(opts.index) && opts.index >= 0) {
+        insertAt($toolbar, '.btn, .dropdown', opts.index, $result);
+    } else {
+        $result.insertBefore($title);
     }
 }
 
diff --git a/theme/javascript/index.js b/theme/javascript/index.js
index 6e601c6..303f87d 100755
--- a/theme/javascript/index.js
+++ b/theme/javascript/index.js
@@ -27,6 +27,7 @@ function start(config) {
 
     // Add action to toggle sidebar
     toolbar.createButton({
+        index: 0,
         icon: 'fa fa-align-justify',
         onClick: function(e) {
             e.preventDefault();
diff --git a/theme/javascript/toolbar.js b/theme/javascript/toolbar.js
index b987c88..49edc7c 100644
--- a/theme/javascript/toolbar.js
+++ b/theme/javascript/toolbar.js
@@ -6,6 +6,18 @@ var events = require('./events');
 // List of created buttons
 var buttons = [];
 
+// Insert a jquery element at a specific position
+function insertAt(parent, selector, index, element) {
+    var lastIndex = parent.children(selector).size();
+    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) {
@@ -83,7 +95,10 @@ function createButton(opts) {
         onClick: defaultOnClick,
 
         // Button is a dropdown
-        dropdown: null
+        dropdown: null,
+
+        // Position in the toolbar
+        index: null
     });
 
     buttons.push(opts);
@@ -92,6 +107,7 @@ function createButton(opts) {
 
 // Update a button
 function updateButton(opts) {
+    var $result;
     var $toolbar = $('.book-header');
     var $title = $toolbar.find('h1');
 
@@ -133,12 +149,17 @@ function updateButton(opts) {
         $menu.addClass('dropdown-'+(opts.position == 'right'? 'left' : 'right'));
 
         $container.append($menu);
-
-        $container.insertBefore($title);
+        $result = $container;
     } else {
         $btn.addClass(positionClass);
         $btn.addClass(opts.className);
-        $btn.insertBefore($title);
+        $result = $btn;
+    }
+
+    if (_.isNumber(opts.index) && opts.index >= 0) {
+        insertAt($toolbar, '.btn, .dropdown', opts.index, $result);
+    } else {
+        $result.insertBefore($title);
     }
 }