stash <base> href on gd._context

... now that we pass 'gd' to Drawing.setClipUrl

Author: etpinard

src/components/drawing/index.js

@@ -1011,21 +1011,8 @@ drawing.setClipUrl = function(s, localId, gd) {
         return;
     }
 
-    if(drawing.baseUrl === undefined) {
-        var base = d3.select('base');
-
-        // Stash base url once and for all!
-        // We may have to stash this elsewhere when
-        // we'll try to support for child windows
-        // more info -> https://github.com/plotly/plotly.js/issues/702
-        if(base.size() && base.attr('href')) {
-            drawing.baseUrl = window.location.href.split('#')[0];
-        } else {
-            drawing.baseUrl = '';
-        }
-    }
-
-    var baseUrl = gd._context.staticPlot ? '' : drawing.baseUrl;
+    var context = gd._context;
+    var baseUrl = context.staticPlot ? '' : (context.baseUrl || '');
 
     s.attr('clip-path', 'url(' + baseUrl + '#' + localId + ')');
 };

src/plot_api/plot_api.js

@@ -110,9 +110,6 @@ exports.plot = function(gd, data, layout, config) {
     // so we can share cached text across tabs
     Drawing.makeTester();
 
-    // clear stashed base url
-    delete Drawing.baseUrl;
-
     // collect promises for any async actions during plotting
     // any part of the plotting code can push to gd._promises, then
     // before we move to the next step, we check that they're all
@@ -419,7 +416,16 @@ function opaqueSetBackground(gd, bgColor) {
 }
 
 function setPlotContext(gd, config) {
-    if(!gd._context) gd._context = Lib.extendDeep({}, defaultConfig);
+    if(!gd._context) {
+        gd._context = Lib.extendDeep({}, defaultConfig);
+
+        // stash <base> href, used to make robust clipPath URLs
+        var base = d3.select('base');
+        gd._context.baseUrl = base.size() && base.attr('href') ?
+            window.location.href.split('#')[0] :
+            '';
+    }
+
     var context = gd._context;
 
     var i, keys, key;

test/jasmine/tests/drawing_test.js

@@ -19,15 +19,12 @@ describe('Drawing', function() {
         afterEach(function() {
             this.svg.remove();
             this.g.remove();
-
-            // unstash base url from Drawing module object
-            delete Drawing.baseUrl;
         });
 
         it('should set the clip-path attribute', function() {
             expect(this.g.attr('clip-path')).toBe(null);
 
-            Drawing.setClipUrl(this.g, 'id1');
+            Drawing.setClipUrl(this.g, 'id1', {_context: {}});
 
             expect(this.g.attr('clip-path')).toEqual('url(#id1)');
         });
@@ -49,7 +46,7 @@ describe('Drawing', function() {
             // grab window URL
             var href = window.location.href;
 
-            Drawing.setClipUrl(this.g, 'id3');
+            Drawing.setClipUrl(this.g, 'id3', {_context: {baseUrl: href}});
 
             expect(this.g.attr('clip-path'))
                 .toEqual('url(' + href + '#id3)');
@@ -63,10 +60,12 @@ describe('Drawing', function() {
                 .attr('href', 'https://plot.ly/#hash');
 
             window.location.hash = 'hash';
+            var href = window.location.href;
+            var href2 = href.split('#')[0];
 
-            Drawing.setClipUrl(this.g, 'id4');
+            Drawing.setClipUrl(this.g, 'id4', {_context: {baseUrl: href2}});
 
-            var expected = 'url(' + window.location.href.split('#')[0] + '#id4)';
+            var expected = 'url(' + href2 + '#id4)';
 
             expect(this.g.attr('clip-path')).toEqual(expected);
 

test/jasmine/tests/plot_interact_test.js

@@ -2,7 +2,6 @@ var d3 = require('d3');
 
 var Plotly = require('@lib/index');
 var Lib = require('@src/lib');
-var Drawing = require('@src/components/drawing');
 
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
@@ -552,7 +551,6 @@ describe('plot svg clip paths', function() {
             d3.selectAll('[clip-path]').each(function() {
                 var cp = d3.select(this).attr('clip-path');
 
-                expect(Drawing.baseUrl).toBe('');
                 expect(cp.substring(0, 5)).toEqual('url(#');
                 expect(cp.substring(cp.length - 1)).toEqual(')');
             });
@@ -578,7 +576,6 @@ describe('plot svg clip paths', function() {
             d3.selectAll('[clip-path]').each(function() {
                 var cp = d3.select(this).attr('clip-path');
 
-                expect(Drawing.baseUrl).toBe(href);
                 expect(cp.substring(0, 5 + href.length)).toEqual('url(' + href + '#');
                 expect(cp.substring(cp.length - 1)).toEqual(')');
             });

test/jasmine/tests/snapshot_test.js

@@ -1,6 +1,5 @@
 var Plotly = require('@lib/index');
 var Lib = require('@src/lib');
-var Drawing = require('@src/components/drawing');
 
 var d3 = require('d3');
 var createGraphDiv = require('../assets/create_graph_div');
@@ -370,7 +369,6 @@ describe('Plotly.Snapshot', function() {
         });
 
         it('should work on pages with <base>', function(done) {
-            delete Drawing.baseUrl;
             var base = d3.select('body')
                 .append('base')
                 .attr('href', 'https://plot.ly');
@@ -396,7 +394,6 @@ describe('Plotly.Snapshot', function() {
             .catch(failTest)
             .then(function() {
                 base.remove();
-                delete Drawing.baseUrl;
                 done();
             });
         });