Add support for auto resize.

src/ui/BaseDialog.js

@@ -8,12 +8,12 @@ var dat = require("./dat.gui.js");
 require("../styles/dat-gui-swec.css");
 require("../styles/jquery-ui.theme.min.css");
 require("../styles/dialog.css");
+var ResizeSensor = require('css-element-queries/src/ResizeSensor');
 
-var BaseDialog = function() {
-  this.container = undefined;
+var BaseDialog = function(parent, options) {
+  this.parent = parent;
+  this.containment = parent;
   this.module = undefined;
-  this.parent = undefined;
-  this.containment = undefined;
   this.content = undefined;
   this.datGui = undefined;
   this.UIIsReady = false;
@@ -23,6 +23,10 @@ var BaseDialog = function() {
   this.resizeStopCallbacks = [];
   this.snackbar = undefined;
   this.title = "Default";
+  this.autoResize = false;
+  this.sensor = undefined;
+  this.isDocked = false;
+  this.processOptions(options);
 }
 
 BaseDialog.prototype.getModule = function() {
@@ -78,9 +82,14 @@ BaseDialog.prototype.dock = function() {
 		containment: this.containment,
 		disabled: true
 	});
+	this.setPosition(0 , 0);
 	this.setWidth("100%");
 	this.setHeight("100%");
-	this.setPosition(0 , 0);
+	this.sensor = undefined;
+	this.setAutoResize(false);
+	this.setAutoResize(true);
+	this.hideCloseButton();
+	this.isDocked = true;
 }
 
 BaseDialog.prototype.dockToContainment = function(containment) {
@@ -89,15 +98,19 @@ BaseDialog.prototype.dockToContainment = function(containment) {
 }
 
 BaseDialog.prototype.undock = function() {
-	this.containment = this.parent;
-	this.container.parent().draggable({
-		containment: this.containment,
-		disabled: false
-	});
-	this.container.parent().resizable({
-		containment: this.containment,
-		disabled: false
-	});
+	if (this.isDocked == true) {
+		this.containment = this.parent;
+		this.container.parent().draggable({
+			containment: this.containment,
+			disabled: false
+		});
+		this.container.parent().resizable({
+			containment: this.containment,
+			disabled: false
+		});
+		this.setAutoResize(false);
+		this.isDocked = false;
+	}
 }
 
 BaseDialog.prototype.getContainment = function() {
@@ -172,7 +185,7 @@ BaseDialog.prototype.create = function(htmlData) {
   });
 
   //this is a docked widget if the containment and parent are not the same
-  if (this.containment != this.parent) {
+  if ((this.containment != this.parent) || this.isDocked) {
 	  this.dock();
   }
 
@@ -296,9 +309,9 @@ BaseDialog.prototype.setPosition = function(leftIn, topIn) {
 };
 
 BaseDialog.prototype.showCloseButton = function() {
-	  this.container.dialog("option",
+	this.container.dialog("option",
 	       "classes.ui-dialog-titlebar-close", "displayBlock");
-	}
+}
 
 
 BaseDialog.prototype.hideCloseButton = function() {
@@ -326,4 +339,36 @@ BaseDialog.prototype.setTop = function(topIn) {
   this.container[0].parentNode.style.top = topIn;
 };
 
+BaseDialog.prototype.maximiseCallback = function(dialogInstance) {
+	return function() {
+		dialogInstance.setPosition(0, 0);
+		dialogInstance.setWidth("100%");
+		dialogInstance.setHeight("100%");
+	}
+}
+
+BaseDialog.prototype.setAutoResize = function(flag) {
+	if (flag != this.autoResize) {
+		if (flag == true) {
+			this.sensor = new ResizeSensor(this.containment, this.maximiseCallback(this));
+			this.autoResize = true;
+		} else if (flag == false){
+			this.sensor = undefined;
+			this.autoResize = false;
+		} else {
+			return false;
+		}
+	}
+	return true;
+}
+
+BaseDialog.prototype.processOptions = function(options) {
+	if (options !== undefined) {
+		  if (options.containment !== undefined)
+			  this.containment = options.containment;
+		  if (options.isDocked !== undefined)
+			  this.isDocked = options.isDocked;
+	}
+}
+
 exports.BaseDialog = BaseDialog;

src/ui/BodyViewerDialog.js

@@ -2,14 +2,8 @@
  * A customised dialog for body viewer.
  */
 var BodyViewerDialog = function(bodyViewerIn, parentIn, options) {
-  (require('./BaseDialog').BaseDialog).call(this);
-  this.parent = parentIn;
+  (require('./BaseDialog').BaseDialog).call(this, parentIn, options);
   this.module = bodyViewerIn;
-  this.containment = parentIn;
-  if (options !== undefined) {
-	  if (options.containment !== undefined)
-		  this.containment = options.containment;
-  }
   var systemGuiFolder = new Array();
   var systemPartsGuiControls = new Array();
   var _myInstance = this;

src/ui/OrgansViewerDialog.js

@@ -1,15 +1,9 @@
 require("../styles/my_styles.css");
 
 var OrgansViewerDialog = function(organsViewerIn, parentIn, options) {
-  (require('./BaseDialog').BaseDialog).call(this);
-  this.parent = parentIn;
-  this.containment = parentIn;
-  if (options !== undefined) {
-	  if (options.containment !== undefined)
-		  this.containment = options.containment;
-  }
-  var sceneData = undefined;
+  (require('./BaseDialog').BaseDialog).call(this, parentIn, options);
   this.module = organsViewerIn;
+  var sceneData = undefined;
   var organPartsGui = undefined;
   var speedSlider = undefined;
   var timeSlider = undefined;

src/ui/ScaffoldDialog.js

@@ -2,14 +2,8 @@
  * A customised dialog for body viewer.
  */
 var ScaffoldDialog = function(scaffoldViewerIn, parentIn, options) {
-  (require('./BaseDialog').BaseDialog).call(this);
-  this.parent = parentIn;
+  (require('./BaseDialog').BaseDialog).call(this, parentIn, options);
   this.module = scaffoldViewerIn;
-  this.containment = parentIn;
-  if (options !== undefined) {
-	  if (options.containment !== undefined)
-		  this.containment = options.containment;
-  }
   var modal = undefined;
   var optionsChanged = false;
   var _myInstance = this;

src/ui/gridView.js

@@ -1,5 +1,4 @@
 require("../styles/gridView.css")
-var ResizeSensor = require('css-element-queries/src/ResizeSensor');
 
 exports.GridView = function(containerIn) {
 	var container = containerIn;
@@ -8,7 +7,7 @@ exports.GridView = function(containerIn) {
 	var template = require("../snippets/gridView.html");
 	var _this = this;
 	var dialogs = [];
-	var sensor = undefined;
+	//var sensor = undefined;
 	var height = "800px";
 	this.isEnabled = false;
 
@@ -58,15 +57,6 @@ exports.GridView = function(containerIn) {
 		return false;
 	}
 
-	var updateSize = function() {
-		if (_this.isEnabled) {
-			for (var i = 0; i < dialogs.length; i++) {
-				dialogs[i].setWidth("100%");
-				dialogs[i].setHeight("100%");
-			}
-		}
-	}
-
 	this.addManagerItem = function(item) {
 		if (_this.isEnabled) {
 			var dialog = item.getDialog();
@@ -79,7 +69,6 @@ exports.GridView = function(containerIn) {
 		}
 	}
 
-
 	var removeDialog = function(dialog) {
 		if (dialog && (dialogs.includes(dialog) == true)) {
 			var containment = dialog.getContainment();
@@ -109,8 +98,6 @@ exports.GridView = function(containerIn) {
 		parent = $(template);
 		rowElement = parent.find(".Row")[0];
 		container.appendChild(parent[0]);
-		parent.find(".portalGridViewContainer")[0].onscroll = resize();
-		sensor  = new ResizeSensor(parent[0], resize());
 	}
 
 	setup();

src/utilities/manager.js

@@ -273,10 +273,10 @@ exports.ModuleManager = function() {
       itemChangedCallbacks.push(callback);
   }
 
-  this.createDialog = function(module, parent) {
+  this.createDialog = function(module, parent, options) {
     if (module && ready) {
       if (constructors[module.typeName]) {
-        var dialog = constructors[module.typeName].dialog(module, parent);
+        var dialog = constructors[module.typeName].dialog(module, parent, options);
         _this.manageDialog(dialog);
         dialog.destroyModuleOnClose = true;
         return dialog;
@@ -402,7 +402,7 @@ exports.ModuleManager = function() {
 					  parent = document.querySelector(settings.parent);
 				  else
 					  parent = document.querySelector("body");
-				  _this.createDialog(module, parent);
+				  _this.createDialog(module, parent, settings);
 			  }
 		  }
 	  } 

src/utilities/managerItem.js

@@ -40,6 +40,7 @@ exports.ManagerItem = function() {
     	  var newSettings = module.exportSettings();
     	  if (dialog) {
     		  newSettings.parent = require("../utility").getSelector(dialog.parent);
+    		  newSettings.isDocked = dialog.isDocked;
     	  }
     	  return newSettings;
       }