Highstock: Addition to #9740, refactored stockTools.update() and `n…

…avigationBindings.update()` to follow common pattern in updates. Added navigation mixin to share logic between bindings and exporting.

js/annotations/navigationBindings.js

@@ -5,10 +5,12 @@
  */
 'use strict';
 import H from '../parts/Globals.js';
+import chartNavigationMixin from '../mixins/navigation.js';
 
 var doc = H.doc,
     addEvent = H.addEvent,
     pick = H.pick,
+    merge = H.merge,
     extend = H.extend,
     isNumber = H.isNumber,
     fireEvent = H.fireEvent,
@@ -222,6 +224,23 @@ extend(H.NavigationBindings.prototype, {
         );
     },
 
+    /**
+     * Common chart.update() delegation, shared between bindings and exporting.
+     *
+     * @private
+     * @function Highcharts.NavigationBindings#initUpdate
+     */
+    initUpdate: function () {
+        var navigation = this;
+
+        chartNavigationMixin.addUpdate(
+            function (options) {
+                navigation.update(options);
+            },
+            this.chart
+        );
+    },
+
     /**
      * Hook for click on a button, method selcts/unselects buttons,
      * then calls `bindings.init` callback.
@@ -703,7 +722,8 @@ extend(H.NavigationBindings.prototype, {
      * @private
      * @function Highcharts.NavigationBindings#update
      */
-    update: function () {
+    update: function (options) {
+        this.options = merge(true, this.options, options);
         this.removeEvents();
         this.initEvents();
     },
@@ -741,6 +761,7 @@ H.Chart.prototype.initNavigationBindings = function () {
             options.navigation
         );
         chart.navigationBindings.initEvents();
+        chart.navigationBindings.initUpdate();
     }
 };
 
@@ -754,14 +775,6 @@ addEvent(H.Chart, 'destroy', function () {
     }
 });
 
-addEvent(H.Chart, 'afterUpdate', function () {
-    if (this.navigationBindings) {
-        this.navigationBindings.update();
-    } else {
-        this.initNavigationBindings();
-    }
-});
-
 addEvent(H.NavigationBindings, 'deselectButton', function () {
     this.selectedButtonElement = null;
 });

js/mixins/navigation.js

@@ -0,0 +1,59 @@
+/**
+ * (c) 2010-2018 Paweł Fus
+ *
+ * License: www.highcharts.com/license
+ */
+
+'use strict';
+
+var chartNavigation = {
+    /**
+     * Initializes `chart.navigation` object which delegates `update()` methods
+     * to all other common classes (used in exporting and navigationBindings).
+     *
+     * @private
+     *
+     * @param {Highcharts.Chart} chart
+     *        The chart instance.
+     */
+    initUpdate: function (chart) {
+        if (!chart.navigation) {
+            chart.navigation = {
+                updates: [],
+                update: function (options, redraw) {
+                    this.updates.forEach(function (updateConfig) {
+                        updateConfig.update.call(
+                            updateConfig.context,
+                            options,
+                            redraw
+                        );
+                    });
+                }
+            };
+        }
+    },
+    /**
+     * Registers an `update()` method in the `chart.navigation` object.
+     *
+     * @private
+     *
+     * @param {function} update
+     *        The `update()` method that will be called in `chart.update()`.
+     *
+     * @param {Highcharts.Chart} chart
+     *        The chart instance. `update()` will use that as a context
+     *        (`this`).
+     */
+    addUpdate: function (update, chart) {
+        if (!chart.navigation) {
+            this.initUpdate(chart);
+        }
+
+        chart.navigation.updates.push({
+            update: update,
+            context: chart
+        });
+    }
+};
+
+export default chartNavigation;

js/modules/exporting.src.js

@@ -51,6 +51,7 @@ import H from '../parts/Globals.js';
 import '../parts/Utilities.js';
 import '../parts/Options.js';
 import '../parts/Chart.js';
+import chartNavigationMixin from '../mixins/navigation.js';
 
 // create shortcuts
 var defaultOptions = H.defaultOptions,
@@ -2084,13 +2085,22 @@ addEvent(Chart, 'init', function () {
             chart.redraw();
         }
     }
-    ['exporting', 'navigation'].forEach(function (prop) {
-        chart[prop] = {
-            update: function (options, redraw) {
-                update(prop, options, redraw);
-            }
-        };
-    });
+
+    chart.exporting = {
+        update: function (options, redraw) {
+            update('exporting', options, redraw);
+        }
+    };
+
+    // Register update() method for navigation. Can not be set the same way as
+    // for exporting, becuase navigation options are shared with bindigs which
+    // has separate update() logic.
+    chartNavigationMixin.addUpdate(
+        function (options, redraw) {
+            update('navigation', options, redraw);
+        },
+        chart
+    );
 });
 
 Chart.prototype.callbacks.push(function (chart) {

js/modules/stock-tools-gui.js

@@ -775,41 +775,33 @@ H.setOptions({
 });
 
 // Run HTML generator
-addEvent(H.Chart, 'afterGetContainer', function (options) {
-    H.Chart.prototype.setStockTools.call(this, options);
+addEvent(H.Chart, 'afterGetContainer', function () {
+    this.setStockTools();
 });
 
 addEvent(H.Chart, 'getMargins', function () {
     var offsetWidth = (
-        this.stockToolbar &&
-        this.stockToolbar.listWrapper &&
-        this.stockToolbar.listWrapper.offsetWidth
+        this.stockTools &&
+        this.stockTools.listWrapper &&
+        this.stockTools.listWrapper.offsetWidth
     );
     if (offsetWidth && offsetWidth < this.plotWidth) {
         this.plotLeft += offsetWidth;
     }
 });
 
 addEvent(H.Chart, 'destroy', function () {
-    if (this.stockToolbar) {
-        this.stockToolbar.destroy();
+    if (this.stockTools) {
+        this.stockTools.destroy();
     }
 });
 
 addEvent(H.Chart, 'redraw', function () {
-    if (this.stockToolbar && this.stockToolbar.guiEnabled) {
-        this.stockToolbar.redraw();
+    if (this.stockTools && this.stockTools.guiEnabled) {
+        this.stockTools.redraw();
     }
 });
 
-addEvent(H.Chart, 'update', function (options) {
-    if (this.stockToolbar) {
-        this.stockToolbar.destroy();
-    }
-
-    H.Chart.prototype.setStockTools.call(this, options);
-});
-
 /*
  * Toolbar Class
  *
@@ -851,17 +843,15 @@ H.extend(H.Chart.prototype, {
     setStockTools: function (options) {
         var chartOptions = this.options,
             lang = chartOptions.lang,
-            paramOptionsGui = options.options && options.options.stockTools,
             guiOptions = merge(
                 chartOptions.stockTools && chartOptions.stockTools.gui,
-                paramOptionsGui && paramOptionsGui.gui,
-                options.stockTools && options.stockTools.gui
+                options && options.gui
             ),
             langOptions = lang.stockTools && lang.stockTools.gui;
 
-        this.stockToolbar = new H.Toolbar(guiOptions, langOptions, this);
+        this.stockTools = new H.Toolbar(guiOptions, langOptions, this);
 
-        if (this.stockToolbar.guiEnabled) {
+        if (this.stockTools.guiEnabled) {
             this.isDirtyBox = true;
         }
     }
@@ -1326,6 +1316,21 @@ H.Toolbar.prototype = {
             return true;
         }
     },
+    /*
+     * Update GUI with given options.
+     *
+     * @param {Object} - general options for Stock Tools
+     */
+    update: function (options) {
+        merge(true, this.chart.options.stockTools, options);
+        this.destroy();
+        this.chart.setStockTools(options);
+
+        // If Stock Tools are updated, then bindings should be updated too:
+        if (this.chart.navigationBindings) {
+            this.chart.navigationBindings.update();
+        }
+    },
     /*
      * Destroy all HTML GUI elements.
      *
@@ -1343,9 +1348,6 @@ H.Toolbar.prototype = {
             parent.removeChild(stockToolsDiv);
         }
 
-        // delete stockToolbar reference
-        delete this.chart.stockToolbar;
-
         // redraw
         this.chart.isDirtyBox = true;
         this.chart.redraw();
@@ -1409,7 +1411,7 @@ H.Toolbar.prototype = {
 addEvent(H.NavigationBindings, 'selectButton', function (event) {
     var button = event.button,
         className = PREFIX + 'submenu-wrapper',
-        gui = this.chart.stockToolbar;
+        gui = this.chart.stockTools;
 
     if (gui && gui.guiEnabled) {
         // Unslect other active buttons
@@ -1428,7 +1430,7 @@ addEvent(H.NavigationBindings, 'selectButton', function (event) {
 addEvent(H.NavigationBindings, 'deselectButton', function (event) {
     var button = event.button,
         className = PREFIX + 'submenu-wrapper',
-        gui = this.chart.stockToolbar;
+        gui = this.chart.stockTools;
 
     if (gui && gui.guiEnabled) {
         // If deselecting a button from a submenu, select state for it's parent

samples/unit-tests/stock-tools/bindings/demo.js

@@ -359,7 +359,13 @@ QUnit.test('Bindings general tests', function (assert) {
     );
 
     // #9740:
-    chart.update({}, true, false, false);
+    chart.update({
+        stockTools: {
+            gui: {
+                buttons: ['toggleAnnotations']
+            }
+        }
+    }, true);
 
     selectButton('toggle-annotations');