Data changes cancel previous design changes

#509

Author: contactashish13

classes/Visualizer/Module/Chart.php

@@ -761,6 +761,7 @@ private function _handleDataAndSettingsPage() {
 					'loading'       => esc_html__( 'Loading...', 'visualizer' ),
 					'json_error'    => esc_html__( 'An error occured in fetching data.', 'visualizer' ),
 					'select_columns'    => esc_html__( 'Please select a few columns to include in the chart.', 'visualizer' ),
+					'save_settings'    => esc_html__( 'The settings seem to have changed. If you want to update your data, please save the chart first to save your settings. If you continue, you may lose your changes.', 'visualizer' ),
 				),
 				'charts' => array(
 					'canvas' => $data,

js/frame.js

@@ -1,8 +1,10 @@
 /* global prompt */
 /* global visualizer */
 /* global alert */
+/* global confirm */
 /* global ajaxurl */
 /* global CodeMirror */
+/* global vizHaveSettingsChanged */
 
 (function ($) {
     $(window).on('load', function(){
@@ -22,6 +24,12 @@
             create: function( event, ui ) {
                 $(this).addClass('done');
                 $( "#sidebar" ).unlock();
+            },
+            beforeActivate: function( event, ui ) {
+                // if settings have changed in tab #2 and tab #1 is being activated, warn the user.
+                if(vizHaveSettingsChanged() && $(ui.newTab.context).attr('id').includes('viz-tab-basic')){
+                    return confirm(visualizer.l10n.save_settings);
+                }
             }
         });
     }

js/preview.js

@@ -1,5 +1,8 @@
 /* global visualizer */
 /* global console */
+/* global vizSettingsHaveChanged */
+/* global vizHaveSettingsChanged */
+
 (function($, v) {
 	var timeout;
 
@@ -19,12 +22,25 @@
                 clear: updateChart
             });
             $('#settings-form textarea[name="manual"]').change(validateJSON).keyup(validateJSON);
+            vizSettingsHaveChanged(false);
         };
 
         $('#settings-button').click(function() {
 			$('#settings-form').submit();
 		});
 
+        // this portion captures if the settings have changed so that tabs can handle that information.
+        var viz_settings_have_changed = false;
+
+        window.vizHaveSettingsChanged = function(){
+            return viz_settings_have_changed;
+        };
+
+        window.vizSettingsHaveChanged = function(value){
+            viz_settings_have_changed = value;
+        };
+        // this portion captures if the settings have changed so that tabs can handle that information.
+
 		function updateChart() {
 			clearTimeout(timeout);
 			timeout = setTimeout(function() {
@@ -35,6 +51,7 @@
 
 				v.charts.canvas.settings = settings;
                 $('body').trigger('visualizer:render:currentchart:update', {visualizer: v});
+                vizSettingsHaveChanged(true);
 			}, 1000);
 		}