Merge pull request #5 from plotly/save_icon_modebar

add save and edit icon to modebar

Author: cldougl

src/components/modebar/index.js

@@ -478,6 +478,11 @@ proto.toImage = function() {
     });
 };
 
+proto.sendDataToCloud = function() {
+    var gd = this.graphInfo;
+    Plotly.Plots.sendDataToCloud(gd)
+};
+
 /**
  *
  * @Property config specification hash of button parameters
@@ -547,6 +552,11 @@ proto.config = function config() {
             icon: 'camera',
             click: this.toImage
         },
+        sendDataToCloud: {
+            title: 'save and edit plot in cloud',
+            icon: 'disk',
+            click: this.sendDataToCloud
+        },
         // gl3d
         zoom3d: {
             title: 'Zoom',

src/fonts/ploticon/_ploticon.scss

@@ -39,3 +39,4 @@
 .ploticon-3d_rotate:before { content: '\e80c'; } /* '' */
 .ploticon-camera:before { content: '\e80d'; } /* '' */
 .ploticon-movie:before { content: '\e80e'; } /* '' */
+.ploticon-disk:before { content: '\e80f'; } /* '' */

src/fonts/ploticon/ploticon.eot

@@ -35,7 +35,7 @@ module.exports = {
     showTips: true,
 
     // link to open this plot in plotly
-    showLink: true,
+    showLink: false,
 
     // if we show a link, does it contain data or just link to a plotly file?
     sendData: true,

src/fonts/ploticon/ploticon.svg

@@ -1319,15 +1319,15 @@ fx.modeBar = function(gd){
 function chooseModebarButtons(fullLayout) {
     if(fullLayout._hasGL3D) {
         return [
-            ['toImage'],
+            ['toImage', 'sendDataToCloud'],
             ['orbitRotation', 'tableRotation', 'zoom3d', 'pan3d'],
             ['resetCameraDefault3d', 'resetCameraLastSave3d'],
             ['hoverClosest3d']
         ];
     }
     else if(fullLayout._hasGeo) {
         return [
-            ['toImage'],
+            ['toImage', 'sendDataToCloud'],
             ['zoomInGeo', 'zoomOutGeo', 'resetGeo'],
             ['hoverClosestGeo']
         ];
@@ -1345,9 +1345,9 @@ function chooseModebarButtons(fullLayout) {
         }
     }
 
-    if(allFixed) buttons = [['toImage']];
+    if(allFixed) buttons = [['toImage', 'sendDataToCloud']];
     else buttons = [
-        ['toImage'],
+        ['toImage', 'sendDataToCloud'],
         ['zoom2d', 'pan2d'],
         ['zoomIn2d', 'zoomOut2d', 'resetScale2d', 'autoScale2d']
     ];

src/fonts/ploticon/ploticon.ttf

@@ -342,37 +342,8 @@ function positionPlayWithData(gd, container){
         .text(gd._context.linkText + ' ' + String.fromCharCode(187));
 
     if(gd._context.sendData) {
-        link.on('click',function(){
-            gd.emit('plotly_beforeexport');
-
-            var baseUrl = (window.PLOTLYENV && window.PLOTLYENV.BASE_URL) || 'https://plot.ly';
-
-            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;
+        link.on('click', function() {
+            plots.sendDataToCloud(gd)
         });
     }
     else {
@@ -384,6 +355,38 @@ function positionPlayWithData(gd, container){
         });
     }
 }
+plots.sendDataToCloud = function(gd) {
+        gd.emit('plotly_beforeexport');
+
+        var baseUrl = (window.PLOTLYENV && window.PLOTLYENV.BASE_URL) || 'https://plot.ly';
+
+        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;
+}
 
 plots.supplyDefaults = function(gd) {
     // fill in default values: