Merge branch 'rknoll-resizeFix'

c3.js

@@ -325,28 +325,7 @@
         }
 
         // Bind resize event
-        if (window.onresize == null) {
-            window.onresize = $$.generateResize();
-        }
-        if (window.onresize.add) {
-            var timeout;
-            window.onresize.add(function () {
-                config.onresize.call($$);
-            });
-            if (config.resize_auto) {
-                window.onresize.add(function () {
-                    if (timeout !== undefined) {
-                        clearTimeout(timeout);
-                    }
-                    timeout = setTimeout(function () {
-                        $$.api.flush();
-                    }, 100);
-                });
-            }
-            window.onresize.add(function () {
-                config.onresized.call($$);
-            });
-        }
+        $$.bindResize();
 
         // export element of the chart
         $$.api.element = $$.selectChart.node();
@@ -942,6 +921,53 @@
         observer.observe(selection.node(), {attributes: true, childList: true, characterData: true});
     };
 
+    c3_chart_internal_fn.bindResize = function () {
+        var $$ = this, config = $$.config;
+
+        $$.resizeFunction = $$.generateResize();
+
+        $$.resizeFunction.add(function () {
+            config.onresize.call($$);
+        });
+        if (config.resize_auto) {
+            $$.resizeFunction.add(function () {
+                if (config.resize_timeout) {
+                    if ($$.resizeTimeout !== undefined) {
+                        window.clearTimeout($$.resizeTimeout);
+                    }
+                    $$.resizeTimeout = window.setTimeout(function () {
+                        delete $$.resizeTimeout;
+                        $$.api.flush();
+                    }, config.resize_timeout);
+                } else {
+                    $$.api.flush();
+                }
+            });
+        }
+        $$.resizeFunction.add(function () {
+            config.onresized.call($$);
+        });
+
+        if (window.attachEvent) {
+            window.attachEvent('onresize', $$.resizeFunction);
+        } else if (window.addEventListener) {
+            window.addEventListener('resize', $$.resizeFunction, false);
+        } else {
+            // fallback to this, if this is a very old browser
+            var wrapper = window.onresize;
+            if (!wrapper) {
+                // create a wrapper that will call all charts
+                wrapper = $$.generateResize();
+            } else if (!wrapper.add || !wrapper.remove) {
+                // there is already a handler registered, make sure we call it too
+                wrapper = $$.generateResize();
+                wrapper.add(window.onresize);
+            }
+            // add this graph to the wrapper, we will be removed if the user calls destroy
+            wrapper.add($$.resizeFunction);
+            window.onresize = wrapper;
+        }
+    };
 
     c3_chart_internal_fn.generateResize = function () {
         var resizeFunctions = [];
@@ -953,6 +979,14 @@
         callResizeFunctions.add = function (f) {
             resizeFunctions.push(f);
         };
+        callResizeFunctions.remove = function (f) {
+            for (var i = 0; i < resizeFunctions.length; i++) {
+                if (resizeFunctions[i] === f) {
+                    resizeFunctions.splice(i, 1);
+                    break;
+                }
+            }
+        };
         return callResizeFunctions;
     };
 
@@ -1032,6 +1066,7 @@
             padding_top: undefined,
             padding_bottom: undefined,
             resize_auto: true,
+            resize_timeout: 100,
             zoom_enabled: false,
             zoom_extent: undefined,
             zoom_privileged: false,
@@ -6764,7 +6799,22 @@
         var $$ = this.internal;
 
         window.clearInterval($$.intervalForObserveInserted);
-        window.onresize = null;
+
+        if ($$.resizeTimeout !== undefined) {
+            window.clearTimeout($$.resizeTimeout);
+        }
+
+        if (window.detachEvent) {
+            window.detachEvent('onresize', $$.resizeFunction);
+        } else if (window.removeEventListener) {
+            window.removeEventListener('resize', $$.resizeFunction);
+        } else {
+            var wrapper = window.onresize;
+            // check if no one else removed our wrapper and remove our resizeFunction from it
+            if (wrapper && wrapper.add && wrapper.remove) {
+                wrapper.remove($$.resizeFunction);
+            }
+        }
 
         $$.selectChart.classed('c3', false).html("");
 

src/api.chart.js

@@ -14,7 +14,22 @@ c3_chart_fn.destroy = function () {
     var $$ = this.internal;
 
     window.clearInterval($$.intervalForObserveInserted);
-    window.onresize = null;
+
+    if ($$.resizeTimeout !== undefined) {
+        window.clearTimeout($$.resizeTimeout);
+    }
+
+    if (window.detachEvent) {
+        window.detachEvent('onresize', $$.resizeFunction);
+    } else if (window.removeEventListener) {
+        window.removeEventListener('resize', $$.resizeFunction);
+    } else {
+        var wrapper = window.onresize;
+        // check if no one else removed our wrapper and remove our resizeFunction from it
+        if (wrapper && wrapper.add && wrapper.remove) {
+            wrapper.remove($$.resizeFunction);
+        }
+    }
 
     $$.selectChart.classed('c3', false).html("");
 

src/config.js

@@ -8,6 +8,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
         padding_top: undefined,
         padding_bottom: undefined,
         resize_auto: true,
+        resize_timeout: 100,
         zoom_enabled: false,
         zoom_extent: undefined,
         zoom_privileged: false,

src/core.js

@@ -320,28 +320,7 @@ c3_chart_internal_fn.initWithData = function (data) {
     }
 
     // Bind resize event
-    if (window.onresize == null) {
-        window.onresize = $$.generateResize();
-    }
-    if (window.onresize.add) {
-        var timeout;
-        window.onresize.add(function () {
-            config.onresize.call($$);
-        });
-        if (config.resize_auto) {
-            window.onresize.add(function () {
-                if (timeout !== undefined) {
-                    clearTimeout(timeout);
-                }
-                timeout = setTimeout(function () {
-                    $$.api.flush();
-                }, 100);
-            });
-        }
-        window.onresize.add(function () {
-            config.onresized.call($$);
-        });
-    }
+    $$.bindResize();
 
     // export element of the chart
     $$.api.element = $$.selectChart.node();
@@ -937,6 +916,53 @@ c3_chart_internal_fn.observeInserted = function (selection) {
     observer.observe(selection.node(), {attributes: true, childList: true, characterData: true});
 };
 
+c3_chart_internal_fn.bindResize = function () {
+    var $$ = this, config = $$.config;
+
+    $$.resizeFunction = $$.generateResize();
+
+    $$.resizeFunction.add(function () {
+        config.onresize.call($$);
+    });
+    if (config.resize_auto) {
+        $$.resizeFunction.add(function () {
+            if (config.resize_timeout) {
+                if ($$.resizeTimeout !== undefined) {
+                    window.clearTimeout($$.resizeTimeout);
+                }
+                $$.resizeTimeout = window.setTimeout(function () {
+                    delete $$.resizeTimeout;
+                    $$.api.flush();
+                }, config.resize_timeout);
+            } else {
+                $$.api.flush();
+            }
+        });
+    }
+    $$.resizeFunction.add(function () {
+        config.onresized.call($$);
+    });
+
+    if (window.attachEvent) {
+        window.attachEvent('onresize', $$.resizeFunction);
+    } else if (window.addEventListener) {
+        window.addEventListener('resize', $$.resizeFunction, false);
+    } else {
+        // fallback to this, if this is a very old browser
+        var wrapper = window.onresize;
+        if (!wrapper) {
+            // create a wrapper that will call all charts
+            wrapper = $$.generateResize();
+        } else if (!wrapper.add || !wrapper.remove) {
+            // there is already a handler registered, make sure we call it too
+            wrapper = $$.generateResize();
+            wrapper.add(window.onresize);
+        }
+        // add this graph to the wrapper, we will be removed if the user calls destroy
+        wrapper.add($$.resizeFunction);
+        window.onresize = wrapper;
+    }
+};
 
 c3_chart_internal_fn.generateResize = function () {
     var resizeFunctions = [];
@@ -948,6 +974,14 @@ c3_chart_internal_fn.generateResize = function () {
     callResizeFunctions.add = function (f) {
         resizeFunctions.push(f);
     };
+    callResizeFunctions.remove = function (f) {
+        for (var i = 0; i < resizeFunctions.length; i++) {
+            if (resizeFunctions[i] === f) {
+                resizeFunctions.splice(i, 1);
+                break;
+            }
+        }
+    };
     return callResizeFunctions;
 };