Merge pull request #4487 from plotly/bye-bye-jQuery

Bye bye jQuery

Author: etpinard

shelly/plotlyjs/static/plotlyjs/src/annotations.js

@@ -771,7 +771,8 @@ annotations.draw = function(gd, index, opt, value) {
         // add the arrow
         // uses options[arrowwidth,arrowcolor,arrowhead] for styling
         var drawArrow = function(dx, dy){
-            $(gd).find('.annotation-arrow-g[data-index="' + index + '"]')
+            d3.select(gd)
+                .selectAll('.annotation-arrow-g[data-index="' + index + '"]')
                 .remove();
             // find where to start the arrow:
             // at the border of the textbox, if that border is visible,

shelly/plotlyjs/static/plotlyjs/src/graph_interact.js

@@ -1,7 +1,5 @@
 'use strict';
 
-/* jshint camelcase: false */
-
 var Plotly = require('./plotly'),
     d3 = require('d3'),
     tinycolor = require('tinycolor2'),
@@ -90,6 +88,7 @@ fx.init = function(gd) {
         }
         return fullLayout._plots[a].mainplot ? 1 : -1;
     });
+
     subplots.forEach(function(subplot) {
         var plotinfo = fullLayout._plots[subplot];
 
@@ -172,21 +171,23 @@ fx.init = function(gd) {
         }
     });
 
-    // in case you mousemove over some hovertext, send it to fx.hover too
+    // In case you mousemove over some hovertext, send it to fx.hover too
     // we do this so that we can put the hover text in front of everything,
     // but still be able to interact with everything as if it isn't there
-    $(fullLayout._hoverlayer.node())
-        .off('mousemove click')
-        .on('mousemove',function(evt){
-            evt.target = fullLayout._lasthover;
-            fx.hover(gd,evt,fullLayout._hoversubplot);
-        })
-        .on('click',function(evt){
-            evt.target = fullLayout._lasthover;
-            fx.click(gd,evt);
-        });
+    var hoverLayer = fullLayout._hoverlayer.node();
+
+    hoverLayer.onmousemove = function(evt) {
+        evt.target = fullLayout._lasthover;
+        fx.hover(gd, evt, fullLayout._hoversubplot);
+    };
+
+    hoverLayer.onclick = function(evt) {
+        evt.target = fullLayout._lasthover;
+        fx.click(gd, evt);
+    };
+
     // also delegate mousedowns... TODO: does this actually work?
-    fullLayout._hoverlayer.node().onmousedown = function(evt){
+    hoverLayer.onmousedown = function(evt) {
         fullLayout._lasthover.onmousedown(evt);
     };
 };
@@ -552,11 +553,13 @@ function hover(gd, evt, subplot){
 
     if(!hoverChanged(gd, evt, oldhoverdata)) return;
 
-    // emit the custom hover handler. Bind this like:
-    // $(gd).on('hover.plotly',
-    //    function(event,extras){ do something with extras.data });
+    /* Emit the custom hover handler. Bind this like:
+     *  gd.on('hover.plotly', function(extras) {
+     *      // do something with extras.data
+     *  });
+     */
     if(oldhoverdata) {
-        gd.emit('plotly_unhover', {points: oldhoverdata});
+        gd.emit('plotly_unhover', { points: oldhoverdata });
     }
     gd.emit('plotly_hover', {
         points: gd._hoverdata,

shelly/plotlyjs/static/plotlyjs/src/graph_obj.js

@@ -364,16 +364,29 @@ function positionPlayWithData(gd, container){
 
             var baseUrl = (window.PLOTLYENV && window.PLOTLYENV.BASE_URL) || 'https://plot.ly';
 
-            var hiddenform = $(
-                '<div id="hiddenform" style="display:none;">' +
-                '<form action="' + baseUrl + '/external" ' +
-                    'method="post" target="_blank">'+
-                '<input type="text" name="data" /></form></div>'
-            ).appendTo(gd);
-
-            hiddenform.find('input').val(plots.graphJson(gd,false,'keepdata'));
-            hiddenform.find('form').submit();
-            hiddenform.remove();
+            var hiddenformDiv = d3.select(gd)
+                .append('div')
+                .attr('id', 'hiddenform')
+                .style('display', 'none');
+
+            var hiddenform = hiddenformDiv
+                .append('form')
+                .attr({
+                    action: baseUrl + '/external',
+                    method: 'post',
+                    target: '_blank'
+                });
+
+            var hiddenformInput = hiddenform
+                .append('input')
+                .attr({
+                    type: 'text',
+                    name: 'data'
+                });
+
+            hiddenformInput.node().value = plots.graphJson(gd, false, 'keepdata');
+            hiddenform.node().submit();
+            hiddenformDiv.remove();
 
             gd.emit('plotly_afterexport');
             return false;

test-dashboard/index.html

@@ -17,8 +17,6 @@
   ">
   </div>
 
-  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
-
   <script type="text/javascript" src="./../shelly/shelly/static/js/plugins/mathjax/MathJax.js?config=TeX-AMS-MML_SVG"></script>
 
   <script>

test-dashboard/toolpanel-dashboard/index.html

@@ -11,9 +11,6 @@
 
     <div id="main"></div>
 
-    <!-- PlotlyJS Requirements -->
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
-
     <!-- ToolPanel JS dependencies Bundle -->
     <script type="text/javascript" src="./../../shelly/toolpanel/static/toolpanel/dist/toolpanel-dependencies-bundle.js"></script>