Merge pull request #872 from bryan-m-hughes/timob-6481

[TIMOB-6481] Layout fixes.

mobileweb/src/Ti.UI/scrollableview.js

@@ -1,5 +1,12 @@
 Ti._5.createClass('Titanium.UI.ScrollableView', function(args){
 	var obj = this;
+
+	// Set defaults
+	args = Ti._5.extend({}, args);
+	args.unselectable = true;
+	args.width = args.width || '100%';
+	args.height = args.height || '100%';
+
 	// Interfaces
 	Ti._5.DOMView(this, 'div', args, 'ScrollableView');
 	Ti._5.Touchable(this, args);

mobileweb/src/Ti.UI/scrollview.js

@@ -1,8 +1,11 @@
 Ti._5.createClass('Titanium.UI.ScrollView', function(args){
 	var obj = this;
 
+	// Set defaults
 	args = Ti._5.extend({}, args);
 	args.unselectable = true;
+	args.width = args.width || '100%';
+	args.height = args.height || '100%';
 
 	// Interfaces
 	// outer container

mobileweb/src/Ti.UI/slider.js

@@ -1,8 +1,10 @@
 Ti._5.createClass('Titanium.UI.Slider', function(args){
 	var obj = this;
 
+	// Set defaults
 	args = Ti._5.extend({}, args);
 	args.unselectable = true;
+	args.width = args.width || '100%';
 
 	// Interfaces
 	Ti._5.DOMView(this, 'input', args, 'Slider');

mobileweb/src/Ti.UI/tab.js

@@ -1,5 +1,9 @@
 Ti._5.createClass('Titanium.UI.Tab', function(args){
 	var obj = this;
+
+	// Set default values
+	args.width = args.width || '100%';
+	args.height = args.height || '100%';
 
 	// Interfaces
 	Ti._5.DOMView(this, 'div', args, 'Tab');

mobileweb/src/Ti.UI/tabgroup.js

@@ -1,13 +1,20 @@
 Ti._5.createClass('Titanium.UI.TabGroup', function(args){
 	var obj = this;
 	var _activeTabIndex = null;
+
+	// Set defaults
+	args = Ti._5.extend({}, args);
+	args.unselectable = true;
+	args.width = args.width || '100%';
+	args.height = args.height || '100%';
 
 	// Interfaces
 	Ti._5.DOMView(this, 'div', args, 'TabGroup');
 	Ti._5.Screen(this, args);
 	Ti._5.Touchable(this, args);
 	Ti._5.Styleable(this, args);
 	Ti._5.Positionable(this, args);
+	this.dom.position = 'absolute';
 
 	// create DOM sctructure for the instance
 	// lets store tab headers as table - this is much more easy to resize and rewrap rather then do it manually
@@ -18,6 +25,9 @@ Ti._5.createClass('Titanium.UI.TabGroup', function(args){
 	_headerTable.appendChild(_tabsHeaders);
 	var _tabsContent = document.createElement("div");
 	_tabsContent.className = "tabsContent";
+	_tabsContent.style.width = "100%";
+	_tabsContent.style.height = "90%";
+	_tabsContent.style.position = "absolute";
 	this.dom.appendChild(_headerTable);
 	this.dom.appendChild(_tabsContent);
 

mobileweb/src/Ti.UI/tableview.js

@@ -3,10 +3,12 @@ Ti._5.createClass('Titanium.UI.TableView', function(args){
 	var _data = [];
 	var activeSection = null;
 
+	// Set defaults
 	args = Ti._5.extend({}, args);
 	args.unselectable = true;
 	args.layout = 'vertical';
 	args.width = args.width || '100%';
+	args.height = args.height || '100%';
 
 	// Interfaces
 	Ti._5.DOMView(this, 'div', args, 'TableView');

mobileweb/src/Ti.UI/tableviewrow.js

@@ -1,16 +1,17 @@
 Ti._5.createClass('Titanium.UI.TableViewRow', function(args){
 	this._rowData = args || {};
 	var obj = this;
-
+
+	// Set defaults
 	args = Ti._5.extend({}, args);
-	// Set some default values
+	args.unselectable = true;
+	args.width = args.width || '100%';
 	args['backgroundColor'] = args['backgroundColor'] ? args['backgroundColor'] : 'transparent';
 	if (!args['font']) {
 		args['fontSize'] = args['fontSize'] ? args['fontSize'] : 20;
 		args['fontWeight'] = args['fontWeight'] ? args['fontWeight'] : 'bold';
 		args['fontFamily'] = args['fontFamily'] ? args['fontFamily'] : 'Helvetica';
 	}
-	args.unselectable = true;
 
 	// Interfaces
 	Ti._5.DOMView(this, 'li', args, 'TableViewRow');

mobileweb/src/Ti.UI/toolbar.js

@@ -4,8 +4,10 @@ Ti._5.createClass('Titanium.UI.Toolbar', function(args){
 
 	var obj = this;
 
+	// Set defaults
 	args = Ti._5.extend({}, args);
 	args.unselectable = true;
+	args.width = args.width || '100%';
 
 	// Interfaces
 	Ti._5.DOMView(this, 'toolbar', args, 'Toolbar');

mobileweb/src/Ti.UI/ui.js

@@ -121,12 +121,11 @@
 
 	// Methods
 	api.setBackgroundColor = function(args) {
-		document.body.style.backgroundColor = args;
+		Ti._5.containerDiv.style.backgroundColor = args;
 	};
 
 	api.setBackgroundImage = function(args) {
-		document.body.style.backgroundImage = 'url("' + Ti._5.getAbsolutePath(args) + '")';
-		//document.body.style.backgroundRepeat = "no-repeat";
+		Ti._5.containerDiv.style.backgroundImage = 'url("' + Ti._5.getAbsolutePath(args) + '")';
 	};
 
 	api.create2DMatrix = function(args){

mobileweb/src/Ti.UI/view.js

@@ -1,6 +1,7 @@
 Ti._5.createClass('Titanium.UI.View', function(args){
 	var obj = this;
 
+	// Set defaults
 	args = Ti._5.extend({}, args);
 	args.unselectable = true;
 	args.width = args.width || '100%';

mobileweb/src/Ti.UI/webview.js

@@ -1,8 +1,11 @@
 Ti._5.createClass('Titanium.UI.WebView', function(args){
 	var obj = this;
 
+	// Set defaults
 	args = Ti._5.extend({}, args);
 	args.unselectable = true;
+	args.width = args.width || '100%';
+	args.height = args.height || '100%';
 
 	// Interfaces
 	Ti._5.DOMView(this, 'iframe', args, 'WebView');

mobileweb/src/Ti.UI/window.js

@@ -1,9 +1,12 @@
 Ti._5.createClass('Titanium.UI.Window', function(args){
 	var obj = this;
 	this._isBack = false;
-	// set defaults
+
+	// Set defaults
 	args = Ti._5.extend({}, args);
 	args.unselectable = true;
+	args.width = args.width || '100%';
+	args.height = args.height || '100%';
 
 	var _isHTMLPage = function(url){
 		return _url != null && (_url.indexOf('htm') != -1 || _url.indexOf('http') != -1);
@@ -90,12 +93,6 @@ Ti._5.createClass('Titanium.UI.Window', function(args){
 		}
 	});
 
-	var _oldShow = this.show;
-	this.show = function(){
-		_oldShow();
-		_setMinHeight();
-	};
-
 	var _oldHide = this.hide;
 	this.hide = function(){
 		obj.fireEvent("blur", {source: obj.dom, type: "blur"});
@@ -162,40 +159,4 @@ Ti._5.createClass('Titanium.UI.Window', function(args){
 
 	Ti._5.preset(this, ["url", "size", "title"], args);
 	Ti._5.presetUserDefinedElements(this, args);
-
-	function _setMinHeight(oSource) {
-		oSource = oSource || obj;
-		if (!oSource.dom) {
-			return;
-		}
-		// Set min window height for preventing window heights be smaller then sum of all window children heights  
-		var oElOffset = Ti._5._getElementOffset(oSource.dom);
-		//obj.dom.style.minHeight = (oElOffset.height - oElOffset.top) + 'px';
-		obj.dom.style.minHeight = oElOffset.height + 'px';
-	}
-
-	var _oldRender = obj.render;
-	obj.render = function(parent) {
-		_oldRender(parent);
-		// Get first element margin
-		var _maxChildrenHeight = 0;
-		if (obj._children) {
-			var _padding = 0;
-			if (obj._children[0] && obj._children[0].dom) {
-				_padding = parseInt(obj._children[0].dom.style.marginTop);
-			}
-			obj.dom.style.paddingTop = _padding + 'px';
-			for (var c=0;c<obj._children.length;c++) {
-				obj._children[c].render(obj);
-			}
-		}
-		_setMinHeight(obj);
-	};
-
-	obj.addEventListener('html5_child_rendered', function () {
-		// Give some time to browser to render the page
-		setTimeout(_setMinHeight, 100);
-	}, false);
-	window.addEventListener('resize', function () {_setMinHeight();}, false);
-	window.addEventListener('load', function () {_setMinHeight();}, false);
 });

mobileweb/src/domview.js

@@ -90,23 +90,40 @@
 				return;
 			}
 			if (parent) {
-				// handle horizontal layout
+				var convertToMargins = true;
 				if (parent.layout == 'horizontal') {
-					obj.dom.style.marginLeft = (obj.args) ? obj.args['left'] : '';
-					obj.dom.style.left = '';
-					obj.dom.style.marginTop = '';
+					obj.dom.style.display = 'inline-block';
+					obj.dom.style.position = '';
 				} else if (parent.layout == 'vertical') {
-					// handle vertical layout
-					obj.dom.style.cssFloat = obj.args && 'undefined' != typeof obj.args['right'] ? 'right' : '';
-					obj.dom.style.marginLeft = '';
-					obj.dom.style.top = '';
-					obj.dom.style.marginTop = (obj.args) ? obj.args['top'] : '';
-					if (obj.visible) {
-						obj.dom.style.display = 'block';
+					obj.dom.style.display = '';
+					obj.dom.style.position = '';
+				} else {
+					convertToMargins = false;
+					obj.dom.style.position = 'absolute';
+				}
+				if (convertToMargins) {
+					// Note: we use margins instead of the actual left/right/top/bottom because margins play much nicer with our layout techniques.
+					if (obj.left) {
+						obj.dom.style.marginLeft = obj.left;
+					}
+					if (obj.top) {
+						obj.dom.style.marginTop = obj.top;
 					}
+					if (obj.right) {
+						obj.dom.style.marginRight = obj.right;
+					}
+					if (obj.bottom) {
+						obj.dom.style.marginBottom = obj.bottom;
+					}
+					obj.dom.style.left = '';
+					obj.dom.style.right = '';
+					obj.dom.style.top = '';
+					obj.dom.style.bottom = '';
 				}
 				parent._getAddContainer().appendChild(obj.dom);
 				obj.fireEvent('html5_added', parent);
+			} else {
+				obj.dom.style.position = 'absolute';
 			}
 
 			if (obj._children) {

mobileweb/src/positionable.js

@@ -6,7 +6,6 @@
 		}
 
 		var _position = function(p, val) {
-			obj.dom.style.position = 'absolute';
 			obj.dom.style[p] = Ti._5.parseLength(val);
 		};
 
@@ -19,6 +18,9 @@
 				if (obj.dom.style['bottom']) {
 					obj.dom.style['bottom'] = '';
 				}
+				if (require.is(val,"Number")) {
+					val += "px";
+				}
 				_top = val;
 				_position('top', val);
 			},
@@ -34,6 +36,9 @@
 				if (obj.dom.style['top']) {
 					obj.dom.style['top'] = '';
 				}
+				if (require.is(val,"Number")) {
+					val += "px";
+				}
 				_bottom = val;
 				_position('bottom', val);
 			},
@@ -49,6 +54,9 @@
 				if (obj.dom.style['right']) {
 					obj.dom.style['right'] = '';
 				}
+				if (require.is(val,"Number")) {
+					val += "px";
+				}
 				obj.dom.style.cssFloat = '';
 				_left = val;
 				_position('left', val);
@@ -65,6 +73,9 @@
 				if (obj.dom.style['left']) {
 					obj.dom.style['left'] = '';
 				}
+				if (require.is(val,"Number")) {
+					val += "px";
+				}
 				obj.dom.style.cssFloat = 'right';
 				_right = val;
 				_position('right', val);
@@ -78,6 +89,9 @@
 				return _width;
 			},
 			set: function(val) {
+				if (require.is(val,"Number")) {
+					val += "px";
+				}
 				_width = val;
 				obj.dom.style.width = Ti._5.parseLength(val);
 			},
@@ -90,6 +104,9 @@
 				return _height;
 			},
 			set: function(val) {
+				if (require.is(val,"Number")) {
+					val += "px";
+				}
 				_height = val;
 				obj.dom.style.height =  Ti._5.parseLength(val);
 			},
@@ -106,7 +123,6 @@
 				if(val == null || val.x == null && val.y == null || obj.parent == null){
 					return;
 				}
-				obj.dom.style.position = 'absolute';
 				var width = obj.dom.clientWidth;
 				var height = obj.dom.clientHeight;
 				if(val.x != null){

mobileweb/src/screen.js

@@ -27,7 +27,7 @@
 
 			// this is top level window - it has no parent - need to add it into DOM
 			if(obj.parent == null) {
-				document.body.appendChild(obj.dom);
+				Ti._5.containerDiv.appendChild(obj.dom);
 			}
 
 			obj.show();
@@ -44,7 +44,7 @@
 
 		obj.screen_close = function(){
 			obj.fireEvent('screen_close');
-			document.body.removeChild(obj.dom);
+			Ti._5.containerDiv.removeChild(obj.dom);
 			// go prev state
 			window.history.go(-1);
 		};

mobileweb/src/titanium.js

@@ -324,9 +324,12 @@ function($window, args){
 			Ti._5.sendAnalytics();
 		}
 
-		Ti.UI.createWindow({
-			title: args.projectName
-		}).open();
+		Ti._5.containerDiv = document.createElement('div');
+		Ti._5.containerDiv.style.width = "100%";
+		Ti._5.containerDiv.style.height = "100%";
+		Ti._5.containerDiv.style.overflow = "hidden";
+		Ti._5.containerDiv.style.position = "absolute"; // Absolute so that any children that are absolute positioned will respect this DIVs height and width.
+		document.body.appendChild(Ti._5.containerDiv);
 	};
 
 	Ti._5.getAbsolutePath = function(path){