Move injectStyles and helpers to lib/plotcss_utils

This keeps the css directory free of Javascript. The helpers have been
moved inside the plotcss_utils.js file instead of a separate helpers
file. The plot API and tests have been updated accordingly.

Removed duplicate tests in plot_interact_tests.js

Author: nielsenb-jf

src/css/helpers.js

@@ -64,6 +64,9 @@ lib.log = loggersModule.log;
 lib.warn = loggersModule.warn;
 lib.error = loggersModule.error;
 
+var cssModule = require('./plotcss_utils');
+lib.injectStyles = cssModule.injectStyles;
+
 lib.notifier = require('./notifier');
 
 /**

src/lib/index.js

@@ -9,16 +9,15 @@
 
 'use strict';
 
-var helpers = require('./helpers');
-var lib = require('../lib');
+var lib = require('./index');
 var plotcss = require('../../build/plotcss');
 
 // Inject styling information into the document containing the graph div
-module.exports = function injectStyles(gd) {
+exports.injectStyles = function injectStyles(gd) {
     // If the graph div has already been styled, bail
     if(gd._plotCSSLoaded) return;
 
-    var targetSelectors = helpers.getAllRuleSelectors(gd._document);
+    var targetSelectors = module.exports.getAllRuleSelectors(gd._document);
     var targetStyleSheet = null;
 
     if(gd._document.getElementsByTagName('style').length === 0) {
@@ -34,7 +33,7 @@ module.exports = function injectStyles(gd) {
     }
 
     for(var selector in plotcss) {
-        var fullSelector = helpers.buildFullSelector(selector);
+        var fullSelector = module.exports.buildFullSelector(selector);
 
         // Don't duplicate selectors
         if(targetSelectors.indexOf(fullSelector) === -1) {
@@ -50,3 +49,31 @@ module.exports = function injectStyles(gd) {
 
     gd._plotCSSLoaded = true;
 };
+
+// expands a plotcss selector
+exports.buildFullSelector = function buildFullSelector(selector) {
+    var fullSelector = selector.replace(/,/, ', ')
+        .replace(/:after/g, '::after')
+        .replace(/:before/g, '::before')
+        .replace(/X/g, '.js-plotly-plot .plotly')
+        .replace(/Y/g, '.plotly-notifier');
+
+    return fullSelector;
+};
+
+// Gets all the rules currently attached to the document
+exports.getAllRuleSelectors = function getAllRuleSelectors(sourceDocument) {
+    var allSelectors = [];
+
+    for(var i = 0; i < sourceDocument.styleSheets.length; i++) {
+        var styleSheet = sourceDocument.styleSheets[i];
+
+        for(var j = 0; j < styleSheet.cssRules.length; j++) {
+            var cssRule = styleSheet.cssRules[j];
+
+            allSelectors.push(cssRule.selectorText);
+        }
+    }
+
+    return allSelectors;
+};

src/css/plotcss_injector.js renamed to src/lib/plotcss_utils.js

@@ -18,8 +18,6 @@ var Lib = require('../lib');
 var Events = require('../lib/events');
 var Queue = require('../lib/queue');
 
-var injectStyles = require('../css/plotcss_injector');
-
 var Plots = require('../plots/plots');
 var Fx = require('../plots/cartesian/graph_interact');
 
@@ -62,7 +60,7 @@ Plotly.plot = function(gd, data, layout, config) {
 
     // Inject the plot styles into the document where we're plotting, bails if
     // already styled
-    injectStyles(gd);
+    Lib.injectStyles(gd);
 
     // Events.init is idempotent and bails early if gd has already been init'd
     Events.init(gd);

src/plot_api/plot_api.js

@@ -4,7 +4,7 @@ var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 
 describe('css injection', function() {
-    var helpers = require('@src/css/helpers');
+    var plotcss_utils = require('@src/lib/plotcss_utils');
     var plotcss = require('@build/plotcss');
 
     // create a graph div in a child window
@@ -38,7 +38,7 @@ describe('css injection', function() {
     // deletes all rules defined in plotcss
     function deletePlotCSSRules(sourceDocument) {
         for(var selector in plotcss) {
-            var fullSelector = helpers.buildFullSelector(selector);
+            var fullSelector = plotcss_utils.buildFullSelector(selector);
 
             for(var i = 0; i < sourceDocument.styleSheets.length; i++) {
                 var styleSheet = sourceDocument.styleSheets[i];
@@ -68,10 +68,10 @@ describe('css injection', function() {
         var fullSelector = null;
 
         // make sure the rules are cleared
-        var allSelectors = helpers.getAllRuleSelectors(document);
+        var allSelectors = plotcss_utils.getAllRuleSelectors(document);
 
         for(selector in plotcss) {
-            fullSelector = helpers.buildFullSelector(selector);
+            fullSelector = plotcss_utils.buildFullSelector(selector);
 
             expect(allSelectors.indexOf(fullSelector)).toEqual(-1);
         }
@@ -81,10 +81,10 @@ describe('css injection', function() {
         plot(gd);
 
         // check for styles
-        allSelectors = helpers.getAllRuleSelectors(document);
+        allSelectors = plotcss_utils.getAllRuleSelectors(document);
 
         for(selector in plotcss) {
-            fullSelector = helpers.buildFullSelector(selector);
+            fullSelector = plotcss_utils.buildFullSelector(selector);
 
             expect(allSelectors.indexOf(fullSelector)).not.toEqual(-1);
         }
@@ -101,10 +101,10 @@ describe('css injection', function() {
         plot(gd);
 
         // check for styles
-        var allSelectors = helpers.getAllRuleSelectors(gd.ownerDocument);
+        var allSelectors = plotcss_utils.getAllRuleSelectors(gd.ownerDocument);
 
         for(var selector in plotcss) {
-            var fullSelector = helpers.buildFullSelector(selector);
+            var fullSelector = plotcss_utils.buildFullSelector(selector);
 
             expect(allSelectors.indexOf(fullSelector)).not.toEqual(-1);
         }
@@ -121,10 +121,10 @@ describe('css injection', function() {
         var fullSelector = null;
 
         // make sure the rules are cleared
-        var allSelectors = helpers.getAllRuleSelectors(document);
+        var allSelectors = plotcss_utils.getAllRuleSelectors(document);
 
         for(selector in plotcss) {
-            fullSelector = helpers.buildFullSelector(selector);
+            fullSelector = plotcss_utils.buildFullSelector(selector);
 
             expect(allSelectors.indexOf(fullSelector)).toEqual(-1);
         }
@@ -135,10 +135,10 @@ describe('css injection', function() {
         plot(gd); // plot again so injectStyles gets called again
 
         // check for styles
-        allSelectors = helpers.getAllRuleSelectors(document);
+        allSelectors = plotcss_utils.getAllRuleSelectors(document);
 
         for(selector in plotcss) {
-            fullSelector = helpers.buildFullSelector(selector);
+            fullSelector = plotcss_utils.buildFullSelector(selector);
 
             var firstIndex = allSelectors.indexOf(fullSelector);
 

test/jasmine/tests/plot_css_test.js

@@ -625,144 +625,3 @@ describe('plot svg clip paths', function() {
         });
     });
 });
-
-describe('css injection', function() {
-    var helpers = require('../../../src/css/helpers');
-    var plotcss = require('../../../build/plotcss')
-
-    // create a graph div in a child window
-    function createGraphDivInChildWindow() {
-        var childWindow = window.open('about:blank', 'popoutWindow', '');
-
-        var gd = childWindow.document.createElement('div');
-        gd.id = 'graph';
-        childWindow.document.body.appendChild(gd);
-
-        // force the graph to be at position 0,0 no matter what
-        gd.style.position = 'fixed';
-        gd.style.left = 0;
-        gd.style.top = 0;
-
-        return gd;
-    }
-
-    // the most basic of basic plots
-    function plot(target) {
-        Plotly.plot(target, [{
-            x: [1, 2, 3, 4, 5],
-            y: [1, 2, 4, 8, 16]
-        }], {
-            margin: {
-                t: 0
-            }
-        });
-    }
-
-    // deletes all rules defined in plotcss
-    function deletePlotCSSRules(sourceDocument) {
-        for(var selector in plotcss) {
-            var ruleDeleted = false;
-            var fullSelector = helpers.buildFullSelector(selector);
-
-            for(var i = 0; i < sourceDocument.styleSheets.length; i++) {
-                var styleSheet = sourceDocument.styleSheets[i];
-                var selectors = []
-
-                for(var j = 0; j < styleSheet.cssRules.length; j++) {
-                    var cssRule = styleSheet.cssRules[j];
-
-                    selectors.push(cssRule.selectorText);
-                }
-
-                var selectorIndex = selectors.indexOf(fullSelector);
-
-                if(selectorIndex !== -1) {
-                    styleSheet.deleteRule(selectorIndex);
-                    break;
-                }
-            }
-        }
-    }
-
-    it('inserts styles on initial plot', function() {
-        deletePlotCSSRules(document); // clear the rules
-
-        // make sure the rules are clared
-        var allSelectors = helpers.getAllRuleSelectors(document);
-
-        for(var selector in plotcss) {
-            var fullSelector = helpers.buildFullSelector(selector);
-
-            expect(allSelectors.indexOf(fullSelector)).toEqual(-1);
-        }
-
-        // plot
-        var gd = createGraphDiv();
-        plot(gd);
-
-        // check for styles
-        allSelectors = helpers.getAllRuleSelectors(document);
-
-        for(var selector in plotcss) {
-            var fullSelector = helpers.buildFullSelector(selector);
-
-            expect(allSelectors.indexOf(fullSelector)).not.toEqual(-1);
-        }
-
-        // clean up
-        destroyGraphDiv();
-    });
-
-    it('inserts styles in a child window document', function() {
-        var gd = createGraphDivInChildWindow();
-        var childWindow = gd.ownerDocument.defaultView;
-
-        // plot
-        plot(gd);
-
-        // check for styles
-        allSelectors = helpers.getAllRuleSelectors(gd.ownerDocument);
-
-        for(var selector in plotcss) {
-            var fullSelector = helpers.buildFullSelector(selector);
-
-            expect(allSelectors.indexOf(fullSelector)).not.toEqual(-1);
-        }
-
-        // clean up
-        childWindow.close();
-    });
-
-    it('does not insert duplicate styles', function() {
-        deletePlotCSSRules(document); // clear the rules
-
-        // make sure the rules are clared
-        var allSelectors = helpers.getAllRuleSelectors(document);
-
-        for(var selector in plotcss) {
-            var fullSelector = helpers.buildFullSelector(selector);
-
-            expect(allSelectors.indexOf(fullSelector)).toEqual(-1);
-        }
-
-        // plot
-        var gd = createGraphDiv();
-        plot(gd);
-        plot(gd); // plot again so injectStyles gets called again
-
-        // check for styles
-        allSelectors = helpers.getAllRuleSelectors(document);
-
-        for(var selector in plotcss) {
-            var fullSelector = helpers.buildFullSelector(selector);
-
-            var firstIndex = allSelectors.indexOf(fullSelector);
-
-            // there should be no occurences after the initial one
-            expect(allSelectors.indexOf(fullSelector, firstIndex + 1)).toEqual(-1);
-        }
-
-        // clean up
-        destroyGraphDiv();
-    });
-});