Child window fixes

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,9 @@
+Thanks for your interest in plotly.js!
+
+Before opening an issue, please search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/plotly/plotly.js/issues/new).
+
+Bug reports must be accompanied with a reproducible example. We recommend using [codepen](http://codepen.io/), [jsfiddle](https://jsfiddle.net/) or [jsbin](https://jsbin.com) to share your example.
+
+Note that GitHub issues are reserved for bug reports and feature requests only. Implementation questions should be asked on community.plot.ly (tagged [`plotly-js`](http://community.plot.ly/c/plotly-js)) or on Stack Overflow (tagged [`plotly`](https://stackoverflow.com/questions/tagged/plotly)).
+
+Comments on GitHub issues or pull requests should add content to the discussions. Approbation comments such as *+1* or *I would like this feature to be implemented as well* will be deleted by the maintainers. Please use [GitHub reactions](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments) instead.

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,7 @@
+Thanks for your interest in plotly.js!
+
+Developers are strongly encouraged to first make a PR to their own plotly.js fork and ask one of the maintainers to review the modifications there. Once the pull request is deemed satisfactory, the developer will be asked to make a pull request to the main plotly.js repo and may be asked to squash some commits before doing so.
+
+Developers should `git rebase` their local branch off the latest `master` before opening a pull request.
+
+Note that it is forbidden to force push (i.e. `git push -f`) to remote branches associated with opened pull requests. Force pushes make it hard for maintainers to keep track of updates. Therefore, if required, please `git merge master` into your PR branch instead of `git rebase master`.

CONTRIBUTING.md

@@ -2,40 +2,11 @@
 
 ## Opening issues
 
-Search for existing and closed issues. If your problem or idea is not addressed
-yet, [please open a new issue](https://github.com/plotly/plotly.js/issues/new).
-
-Bug reports must be accompanied with a reproducible example. We recommend using
-[codepen](http://codepen.io/), [jsfiddle](https://jsfiddle.net/) or
-[jsbin](https://jsbin.com) to share your example.
-
-Note that GitHub issues are reserved for bug reports and feature requests only.
-Implementation questions should be asked on
-community.plot.ly (tagged [`plotly-js`](http://community.plot.ly/c/plotly-js)) or on Stack Overflow (tagged
-[`plotly`](https://stackoverflow.com/questions/tagged/plotly)).
-
-Comments on GitHub issues or pull requests should add content to the discussions. 
-Approbation comments such as *+1* or *I would like this feature to be implemented as well* 
-will be deleted by the maintainers. Please use 
-[GitHub reactions](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments) 
-instead.
+Please read the [issue guidelines](./.github/ISSUE_TEMPLATE.md).
 
 ## Making pull requests
 
-Developers are strongly encouraged to first make a PR to their own plotly.js
-fork and ask one of the maintainers to review the modifications there. Once the
-pull request is deemed satisfactory, the developer will be asked to make a pull
-request to the main plotly.js repo and may be asked to squash some commits
-before doing so.
-
-Developers should `git rebase` their local branch off the latest `master` before 
-opening a pull request.
-
-Note that it is forbidden to force push (i.e. `git push -f`) to remote branches
-associated with opened pull requests. Force pushes make it hard for maintainers 
-to keep track of updates. Therefore, if required, please
-`git merge master` into your PR branch instead of `git rebase master`.
-
+Please read the [pull request guidelines](./.github/PULL_REQUEST_TEMPLATE.md).
 
 ## GitHub labels
 

build/plotcss.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var Plotly = require('../src/plotly');
 var rules = {
     "X,X div": "font-family:'Open Sans', verdana, arial, sans-serif;margin:0;padding:0;",
     "X input,X button": "font-family:'Open Sans', verdana, arial, sans-serif;",
@@ -54,9 +53,4 @@ var rules = {
     "Y .notifier-close:hover": "color:#444;text-decoration:none;cursor:pointer;"
 };
 
-for(var selector in rules) {
-    var fullSelector = selector.replace(/^,/,' ,')
-        .replace(/X/g, '.js-plotly-plot .plotly')
-        .replace(/Y/g, '.plotly-notifier');
-    Plotly.Lib.addStyleRule(fullSelector, rules[selector]);
-}
+module.exports = rules;

src/components/colorscale/is_valid_scale_array.js

@@ -13,21 +13,23 @@ var tinycolor = require('tinycolor2');
 
 
 module.exports = function isValidScaleArray(scl) {
-    var isValid = true,
-        highestVal = 0,
-        si;
-
-    if(!Array.isArray(scl)) return false;
-    else {
-        if(+scl[0][0] !== 0 || +scl[scl.length - 1][0] !== 1) return false;
-        for(var i = 0; i < scl.length; i++) {
-            si = scl[i];
-            if(si.length !== 2 || +si[0] < highestVal || !tinycolor(si[1]).isValid()) {
-                isValid = false;
-                break;
-            }
-            highestVal = +si[0];
+    var highestVal = 0;
+
+    if(!Array.isArray(scl) || scl.length < 2) return false;
+
+    if(!scl[0] || !scl[scl.length - 1]) return false;
+
+    if(+scl[0][0] !== 0 || +scl[scl.length - 1][0] !== 1) return false;
+
+    for(var i = 0; i < scl.length; i++) {
+        var si = scl[i];
+
+        if(si.length !== 2 || +si[0] < highestVal || !tinycolor(si[1]).isValid()) {
+            return false;
         }
-        return isValid;
+
+        highestVal = +si[0];
     }
+
+    return true;
 };

src/components/dragelement/index.js

@@ -86,7 +86,7 @@ dragElement.init = function init(options) {
 
         if(options.prepFn) options.prepFn(e, startX, startY);
 
-        dragCover = coverSlip();
+        dragCover = coverSlip(gd);
 
         dragCover.onmousemove = onMove;
         dragCover.onmouseup = onDone;
@@ -139,7 +139,7 @@ dragElement.init = function init(options) {
         if(options.doneFn) options.doneFn(gd._dragged, numClicks);
 
         if(!gd._dragged) {
-            var e2 = document.createEvent('MouseEvents');
+            var e2 = gd._document.createEvent('MouseEvents');
             e2.initEvent('click', true, true);
             initialTarget.dispatchEvent(e2);
         }
@@ -159,8 +159,8 @@ dragElement.init = function init(options) {
     options.element.style.pointerEvents = 'all';
 };
 
-function coverSlip() {
-    var cover = document.createElement('div');
+function coverSlip(gd) {
+    var cover = gd._document.createElement('div');
 
     cover.className = 'dragcover';
     var cStyle = cover.style;
@@ -172,7 +172,7 @@ function coverSlip() {
     cStyle.zIndex = 999999999;
     cStyle.background = 'none';
 
-    document.body.appendChild(cover);
+    gd._document.body.appendChild(cover);
 
     return cover;
 }

src/components/drawing/index.js

@@ -462,7 +462,8 @@ drawing.makeTester = function(gd) {
             left: '-10000px',
             top: '-10000px',
             width: '9000px',
-            height: '9000px'
+            height: '9000px',
+            'z-index': '1'
         });
 
     // browsers differ on how they describe the bounding rect of

src/components/modebar/buttons.js

@@ -50,19 +50,19 @@ modeBarButtons.toImage = {
     click: function(gd) {
         var format = 'png';
 
-        Lib.notifier('Taking snapshot - this may take a few seconds', 'long');
+        Lib.notifier(gd, 'Taking snapshot - this may take a few seconds', 'long');
 
         if(Lib.isIE()) {
-            Lib.notifier('IE only supports svg.  Changing format to svg.', 'long');
+            Lib.notifier(gd, 'IE only supports svg.  Changing format to svg.', 'long');
             format = 'svg';
         }
 
         downloadImage(gd, {'format': format})
           .then(function(filename) {
-              Lib.notifier('Snapshot succeeded - ' + filename, 'long');
+              Lib.notifier(gd, 'Snapshot succeeded - ' + filename, 'long');
           })
           .catch(function() {
-              Lib.notifier('Sorry there was a problem downloading your snapshot!', 'long');
+              Lib.notifier(gd, 'Sorry there was a problem downloading your snapshot!', 'long');
           });
     }
 };

src/components/rangeslider/create_slider.js

@@ -33,7 +33,7 @@ module.exports = function createSlider(gd) {
     var minStart = 0,
         maxStart = width;
 
-    var slider = document.createElementNS(svgNS, 'g');
+    var slider = gd._document.createElementNS(svgNS, 'g');
     helpers.setAttributes(slider, {
         'class': 'range-slider',
         'data-min': minStart,
@@ -43,7 +43,7 @@ module.exports = function createSlider(gd) {
     });
 
 
-    var sliderBg = document.createElementNS(svgNS, 'rect'),
+    var sliderBg = gd._document.createElementNS(svgNS, 'rect'),
         borderCorrect = options.borderwidth % 2 === 0 ? options.borderwidth : options.borderwidth - 1;
     helpers.setAttributes(sliderBg, {
         'fill': options.bgcolor,
@@ -56,7 +56,7 @@ module.exports = function createSlider(gd) {
     });
 
 
-    var maskMin = document.createElementNS(svgNS, 'rect');
+    var maskMin = gd._document.createElementNS(svgNS, 'rect');
     helpers.setAttributes(maskMin, {
         'x': 0,
         'width': minStart,
@@ -65,7 +65,7 @@ module.exports = function createSlider(gd) {
     });
 
 
-    var maskMax = document.createElementNS(svgNS, 'rect');
+    var maskMax = gd._document.createElementNS(svgNS, 'rect');
     helpers.setAttributes(maskMax, {
         'x': maxStart,
         'width': width - maxStart,
@@ -74,9 +74,9 @@ module.exports = function createSlider(gd) {
     });
 
 
-    var grabberMin = document.createElementNS(svgNS, 'g'),
-        grabAreaMin = document.createElementNS(svgNS, 'rect'),
-        handleMin = document.createElementNS(svgNS, 'rect');
+    var grabberMin = gd._document.createElementNS(svgNS, 'g'),
+        grabAreaMin = gd._document.createElementNS(svgNS, 'rect'),
+        handleMin = gd._document.createElementNS(svgNS, 'rect');
     helpers.setAttributes(grabberMin, { 'transform': 'translate(' + (minStart - handleWidth - 1) + ')' });
     helpers.setAttributes(grabAreaMin, {
         'width': 10,
@@ -97,9 +97,9 @@ module.exports = function createSlider(gd) {
     helpers.appendChildren(grabberMin, [handleMin, grabAreaMin]);
 
 
-    var grabberMax = document.createElementNS(svgNS, 'g'),
-        grabAreaMax = document.createElementNS(svgNS, 'rect'),
-        handleMax = document.createElementNS(svgNS, 'rect');
+    var grabberMax = gd._document.createElementNS(svgNS, 'g'),
+        grabAreaMax = gd._document.createElementNS(svgNS, 'rect'),
+        handleMax = gd._document.createElementNS(svgNS, 'rect');
     helpers.setAttributes(grabberMax, { 'transform': 'translate(' + maxStart + ')' });
     helpers.setAttributes(grabAreaMax, {
         'width': 10,
@@ -120,7 +120,7 @@ module.exports = function createSlider(gd) {
     helpers.appendChildren(grabberMax, [handleMax, grabAreaMax]);
 
 
-    var slideBox = document.createElementNS(svgNS, 'rect');
+    var slideBox = gd._document.createElementNS(svgNS, 'rect');
     helpers.setAttributes(slideBox, {
         'x': minStart,
         'width': maxStart - minStart,
@@ -137,8 +137,8 @@ module.exports = function createSlider(gd) {
             minVal = slider.getAttribute('data-min'),
             maxVal = slider.getAttribute('data-max');
 
-        window.addEventListener('mousemove', mouseMove);
-        window.addEventListener('mouseup', mouseUp);
+        gd._document.defaultView.addEventListener('mousemove', mouseMove);
+        gd._document.defaultView.addEventListener('mouseup', mouseUp);
 
         function mouseMove(e) {
             var delta = +e.clientX - startX,
@@ -189,8 +189,8 @@ module.exports = function createSlider(gd) {
         }
 
         function mouseUp() {
-            window.removeEventListener('mousemove', mouseMove);
-            window.removeEventListener('mouseup', mouseUp);
+            gd._document.defaultView.removeEventListener('mousemove', mouseMove);
+            gd._document.defaultView.removeEventListener('mouseup', mouseUp);
             slider.style.cursor = 'auto';
         }
     });
@@ -222,8 +222,8 @@ module.exports = function createSlider(gd) {
 
     function setDataRange(dataMin, dataMax) {
 
-        if(window.requestAnimationFrame) {
-            window.requestAnimationFrame(function() {
+        if(gd._document.defaultView.requestAnimationFrame) {
+            gd._document.defaultView.requestAnimationFrame(function() {
                 Plotly.relayout(gd, 'xaxis.range', [dataMin, dataMax]);
             });
         } else {

src/core.js

@@ -33,6 +33,7 @@ exports.setPlotConfig = require('./plot_api/set_plot_config');
 exports.register = Plotly.register;
 exports.toImage = require('./plot_api/to_image');
 exports.downloadImage = require('./snapshot/download');
+exports.validate = require('./plot_api/validate');
 
 // plot icons
 exports.Icons = require('../build/ploticon');

src/css/helpers.js

@@ -0,0 +1,38 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+// 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

@@ -0,0 +1,52 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+var helpers = require('./helpers');
+var lib = require('../lib');
+var plotcss = require('../../build/plotcss');
+
+// Inject styling information into the document containing the graph div
+module.exports = function injectStyles(gd) {
+    // If the graph div has already been styled, bail
+    if(gd._plotCSSLoaded) return;
+
+    var targetSelectors = helpers.getAllRuleSelectors(gd._document);
+    var targetStyleSheet = null;
+
+    if(gd._document.getElementsByTagName('style').length === 0) {
+        var style = gd._document.createElement('style');
+        // WebKit hack :(
+        style.appendChild(gd._document.createTextNode(''));
+        gd._document.head.appendChild(style);
+        targetStyleSheet = style.sheet;
+    }
+    else {
+        // Just grab the first style element to append to
+        targetStyleSheet = gd._document.getElementsByTagName('style')[0].sheet;
+    }
+
+    for(var selector in plotcss) {
+        var fullSelector = helpers.buildFullSelector(selector);
+
+        // Don't duplicate selectors
+        if(targetSelectors.indexOf(fullSelector) === -1) {
+            if(targetStyleSheet.insertRule) {
+                targetStyleSheet.insertRule(fullSelector + '{' + plotcss[selector] + '}', 0);
+            }
+            else if(targetStyleSheet.addRule) {
+                targetStyleSheet.addRule(fullSelector, plotcss[selector], 0);
+            }
+            else lib.warn('injectStyles failed');
+        }
+    }
+
+    gd._plotCSSLoaded = true;
+};