Merge pull request #94 from contactashish13/development

responsive issue #93

Author: selul

classes/Visualizer/Module/Frontend.php

@@ -110,8 +110,10 @@ public function renderChart( $atts ) {
 		}
 
 		$id = 'visualizer-' . $atts['id'];
+        $defaultClass   = "visualizer-front";
 		$class = apply_filters( Visualizer_Plugin::FILTER_CHART_WRAPPER_CLASS, $atts['class'], $atts['id'] );
-		$class = !empty( $class ) ? ' class="' . $class . '"' : '';
+        $class  = $defaultClass . " " . $class;
+		$class = !empty( $class ) ? ' class="' . trim($class) . '"' : '';
 
 		$type = get_post_meta( $chart->ID, Visualizer_Plugin::CF_CHART_TYPE, true );
 

js/render.js

@@ -210,5 +210,31 @@
 			clearTimeout(resizeTimeout);
 			resizeTimeout = setTimeout(v.render, 100);
 		});
-	});
+
+        resizeHiddenContainers();
+    });
+
+    function resizeHiddenContainers(){
+        $(".visualizer-front").parents().each(function(){
+            if(!$(this).is(":visible")){
+                $(this).addClass("visualizer-hidden-container");
+            }
+        });
+
+        var mutateObserver = new MutationObserver(function(records) {
+            records.forEach(function(record) {
+                if(record.attributeName == "style"){
+                    var element         = $(record.target);
+                    var displayStyle    = window.getComputedStyle(element[0]).getPropertyValue("display");
+                    if(element.hasClass("visualizer-hidden-container-resized") || displayStyle == "none") return;
+                    element.addClass("visualizer-hidden-container-resized").find(".visualizer-front").resize();
+                }
+            });
+        });
+
+        $('.visualizer-hidden-container').each(function(){
+            mutateObserver.observe($(this)[0], {attributes: true});
+        });
+	}
+
 })(jQuery, visualizer);