Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Timob 6481 Layout fixes. #872

Merged
merged 7 commits into from
Dec 8, 2011
Merged

Timob 6481 Layout fixes. #872

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1334c30
[TIMOB-6481] Implemented horizontal and vertical layouts.
nebrius Dec 6, 2011
9d11bf1
[TIMOB-6481] Added a containing div so percent heights, etc work prop…
nebrius Dec 6, 2011
8f12ef5
[TIMOB-6481] Fixed support for top/right/bottom/left arguments.
nebrius Dec 7, 2011
52bd4be
[TIMOB-6481] Updated some defaults to match the spec.
nebrius Dec 7, 2011
deb3c52
[TIMOB-6481] Fixed some layout issues and removed some old, obselete …
nebrius Dec 7, 2011
6460874
[TIMOB-6481] Code optimization.
nebrius Dec 8, 2011
c83a56d
[TIMOB-6481] Updated the outer div to use 100% sizing.
nebrius Dec 8, 2011
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 7 additions & 0 deletions mobileweb/src/Ti.UI/scrollableview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
3 changes: 3 additions & 0 deletions mobileweb/src/Ti.UI/scrollview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 2 additions & 0 deletions mobileweb/src/Ti.UI/slider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
Expand Down
4 changes: 4 additions & 0 deletions mobileweb/src/Ti.UI/tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
Expand Down
10 changes: 10 additions & 0 deletions mobileweb/src/Ti.UI/tabgroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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);

Expand Down
2 changes: 2 additions & 0 deletions mobileweb/src/Ti.UI/tableview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
7 changes: 4 additions & 3 deletions mobileweb/src/Ti.UI/tableviewrow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
Expand Down
2 changes: 2 additions & 0 deletions mobileweb/src/Ti.UI/toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
5 changes: 2 additions & 3 deletions mobileweb/src/Ti.UI/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(){
Expand Down
1 change: 1 addition & 0 deletions mobileweb/src/Ti.UI/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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%';
Expand Down
3 changes: 3 additions & 0 deletions mobileweb/src/Ti.UI/webview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
Expand Down
47 changes: 4 additions & 43 deletions mobileweb/src/Ti.UI/window.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -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"});
Expand Down Expand Up @@ -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);
});
39 changes: 28 additions & 11 deletions mobileweb/src/domview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
20 changes: 18 additions & 2 deletions mobileweb/src/positionable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
}

var _position = function(p, val) {
obj.dom.style.position = 'absolute';
obj.dom.style[p] = Ti._5.parseLength(val);
};

Expand All @@ -19,6 +18,9 @@
if (obj.dom.style['bottom']) {
obj.dom.style['bottom'] = '';
}
if (typeof val === "number") {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can all of these be abstracted into a single method? You're repeating the same logic.

val += "px";
}
_top = val;
_position('top', val);
},
Expand All @@ -34,6 +36,9 @@
if (obj.dom.style['top']) {
obj.dom.style['top'] = '';
}
if (typeof val === "number") {
val += "px";
}
_bottom = val;
_position('bottom', val);
},
Expand All @@ -49,6 +54,9 @@
if (obj.dom.style['right']) {
obj.dom.style['right'] = '';
}
if (typeof val === "number") {
val += "px";
}
obj.dom.style.cssFloat = '';
_left = val;
_position('left', val);
Expand All @@ -65,6 +73,9 @@
if (obj.dom.style['left']) {
obj.dom.style['left'] = '';
}
if (typeof val === "number") {
val += "px";
}
obj.dom.style.cssFloat = 'right';
_right = val;
_position('right', val);
Expand All @@ -78,6 +89,9 @@
return _width;
},
set: function(val) {
if (typeof val === "number") {
val += "px";
}
_width = val;
obj.dom.style.width = Ti._5.parseLength(val);
},
Expand All @@ -90,6 +104,9 @@
return _height;
},
set: function(val) {
if (typeof val === "number") {
val += "px";
}
_height = val;
obj.dom.style.height = Ti._5.parseLength(val);
},
Expand All @@ -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){
Expand Down
4 changes: 2 additions & 2 deletions mobileweb/src/screen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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);
};
Expand Down
9 changes: 6 additions & 3 deletions mobileweb/src/titanium.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,9 +322,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 = window.innerWidth + "px";
Ti._5.containerDiv.style.height = window.innerHeight + "px";
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){
Expand Down