Chart preview icon on mobile

Author: cvasseng

less/editor.style.less

@@ -15,6 +15,17 @@
 	margin-top:5px;
 }
 
+.highed-chart-container-icon {
+	float:left;
+	width:40px;
+	height:40px;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: 100%;
+	.highed-box-size;
+	//transform:scale();
+}
+
 @media (max-width: 700px) {
 	.highed-chart-preview-bar {
 		display:none !important;

less/toolbar.less

@@ -24,5 +24,5 @@
 }
 
 .highed-toolbar .icon {
-	line-height:35px;
+	line-height:40px;
 }

src/editors/highed.editor.js

@@ -198,6 +198,8 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
             dataExpStep = wizbar.addStep({ title: highed.getLocalizedStr('stepExport'), id: 'export' }),
             dataExp = highed.Exporter(dataExpStep.body, properties.exporter),
 
+            chartIcon = highed.dom.cr('div', 'highed-chart-container-icon'),
+
             cmenu = highed.DefaultContextMenu(chartPreview)
 
         ;
@@ -208,6 +210,16 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
         ///////////////////////////////////////////////////////////////////////////
 
+        function updateToolbarIcon() {
+            if (highed.onPhone()) {
+                highed.dom.style(chartIcon, {
+                    'background-image': 'url("data:image/svg+xml;utf8,' + 
+                          encodeURIComponent(chartPreview.export.svg()) +
+                    '")'
+                });
+            }
+        }
+
         //Hide features that are disabled
         function applyFeatures() {
             var things = highed.arrToObj(properties.features.split(' '));
@@ -341,7 +353,10 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
         });
 
         //Route preview events
-        chartPreview.on('ChartChange', function (newData) { events.emit('ChartChange', newData);});
+        chartPreview.on('ChartChange', function (newData) { 
+            events.emit('ChartChange', newData);
+
+        });
         chartPreview.on('ChartChangeLately', function (newData) { events.emit('ChartChangeLately', newData);});
 
         ///////////////////////////////////////////////////////////////////////////
@@ -359,6 +374,8 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
             highed.log(2, 'on object in editor properties is not a valid object');
         }
 
+
+
         //Activate plugins
         properties.plugins = highed.arrToObj(properties.plugins);
         Object.keys(properties.plugins).forEach(function (name) {
@@ -367,6 +384,9 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
         //Dispatch change events to the active plugins
         chartPreview.on('ChartChangeLately', function (options) {
+
+            updateToolbarIcon();
+
             Object.keys(activePlugins).forEach(function (key) {
                 var plugin = activePlugins[key];
                 if (highed.isFn(plugin.definition.chartchange)) {
@@ -379,14 +399,31 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
         applyFeatures();
 
+
+        chartCustomizer.init(chartPreview.options.customized, chartPreview.options.chart);
+
+        if (highed.onPhone()) {
+            chartContainer.className = 'highed-chart-container-icon';
+            highed.dom.ap(mainToolbar.right, chartIcon);
+
+            highed.dom.on(chartIcon, 'click', function (e) {
+                chartPreview.expand();
+                e.cancelBubble = true;
+                e.preventDefault();
+                e.stopPropagation();
+                e.stopImmediatePropagation();
+                return false;
+            });
+        }
+
         mainToolbar.addIcon({
             css: 'fa-bars',
             click: function(e) {
                 cmenu.show(e.clientX, e.clientY);
             }
         });
 
-        chartCustomizer.init(chartPreview.options.customized, chartPreview.options.chart);
+        updateToolbarIcon();
 
         ///////////////////////////////////////////////////////////////////////////
 

src/ui/highed.chartpreview.js

@@ -115,7 +115,7 @@ highed.ChartPreview = function (parent, attributes) {
         window.clearTimeout(throttleTimeout);
         throttleTimeout = window.setTimeout(function () {
             events.emit('ChartChangeLately', aggregatedOptions);
-        }, 800);
+        }, 200);
     }
 
     /* Init the chart */
@@ -503,6 +503,11 @@ highed.ChartPreview = function (parent, attributes) {
         });
     }
 
+    function changeParent(newParent) {
+        parent = newParent;
+        init();
+    }
+
     ///////////////////////////////////////////////////////////////////////////
 
     //Init the initial chart
@@ -520,6 +525,7 @@ highed.ChartPreview = function (parent, attributes) {
         expand: expand,
         collapse: collapse,
         new: newChart,
+        changeParent: changeParent,
 
         loadTemplate: loadTemplate,
         resize: resize,

src/ui/highed.defctx.js

@@ -109,14 +109,14 @@ highed.DefaultContextMenu = function (chartPreview) {
             {
                 title: highed.getLocalizedStr('help'),
                 icon: 'question-circle'
-            },
-            {
-                title: highed.getLocalizedStr('licenseInfo'),
-                icon: 'key',
-                click: function () {
-                    highed.licenseInfo.show();
-                }
-            }
+            }//,
+            // {
+            //     title: highed.getLocalizedStr('licenseInfo'),
+            //     icon: 'key',
+            //     click: function () {
+            //         highed.licenseInfo.show();
+            //     }
+            // }
         ])
     ;