Skip to content

Commit

Permalink
Merge pull request #1555 from bryan-m-hughes/timob-7856
Browse files Browse the repository at this point in the history 
Timob 7856 FILL/SIZE Layout implementation.
  • Loading branch information
@cb1kenobi
cb1kenobi committed Mar 5, 2012
2 parents 54155af + d8f0957 commit 85875dc
Show file tree
Hide file tree
Showing 31 changed files with 648 additions and 390 deletions.
60 changes: 53 additions & 7 deletions mobileweb/titanium/Ti/UI.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
define(
["Ti/_/Evented", "Ti/_/lang", "Ti/_/ready", "Ti/_/style"],
function(Evented, lang, ready, style) {
["Ti/_", "Ti/_/Evented", "Ti/_/lang", "Ti/_/ready", "Ti/_/style", "Ti/_/dom"],
function(_, Evented, lang, ready, style, dom) {

var body = document.body,
isIOS = /(iPhone|iPad)/.test(navigator.userAgent),
Expand Down Expand Up @@ -101,7 +101,10 @@ define(

_layoutMarkedNodes: function(node) {
if (node._markedForLayout) {
node._layout && node._layout._doLayout(node, node._measuredWidth, node._measuredHeight);
var parent = node._parent,
isParentWidthSize = parent && parent.width === Ti.UI.SIZE,
isParentHeightSize = parent && parent.height === Ti.UI.SIZE;
node._layout && node._layout._doLayout(node, node._measuredWidth, node._measuredHeight, !!isParentWidthSize, !!isParentHeightSize);
} else {
for (var i in node.children) {
this._layoutMarkedNodes(node.children[i]);
Expand All @@ -115,9 +118,28 @@ define(
},

_recalculateLayout: function() {
this._container.width = window.innerWidth;
this._container.height = window.innerHeight;
this._container._doLayout(0, 0, window.innerWidth, window.innerHeight, true, true);
var width = this._container.width = window.innerWidth,
height = this._container.height = window.innerHeight;
this._container._doLayout({
origin: {
x: 0,
y: 0
},
isParentSize: {
width: false,
height: false
},
boundingSize: {
width: width,
height: height
},
alignment: {
horizontal: "center",
vertical: "center"
},
positionElement: true,
layoutChildren: true
});
},

properties: {
Expand All @@ -140,6 +162,23 @@ define(
}
}
},

convertUnits: function(convertFromValue, convertToUnits) {
var intermediary = dom.computeSize(convertFromValue, 0, false);
switch(convertToUnits) {
case Ti.UI.UNIT_MM:
intermediary *= 10;
case Ti.UI.UNIT_CM:
return intermediary / ( 0.0393700787 * _.dpi * 10);
case Ti.UI.UNIT_IN:
return intermediary / _.dpi;
case Ti.UI.UNIT_DIP:
return intermediary * 96 / _.dpi;
case Ti.UI.UNIT_PX:
return intermediary;
default: return 0;
}
},

constants: {
currentWindow: undefined,
Expand Down Expand Up @@ -199,7 +238,14 @@ define(
ANIMATION_CURVE_EASE_IN: 1,
ANIMATION_CURVE_EASE_IN_OUT: 2,
ANIMATION_CURVE_EASE_OUT: 3,
ANIMATION_CURVE_LINEAR: 4
ANIMATION_CURVE_LINEAR: 4,
SIZE: "auto",
FILL: "fill",
UNIT_PX: "px",
UNIT_MM: "mm",
UNIT_CM: "cm",
UNIT_IN: "in",
UNIT_DIP: "dp" // We don't have DIPs, so we treat them as pixels
}

});
Expand Down
13 changes: 7 additions & 6 deletions mobileweb/titanium/Ti/UI/ActivityIndicator.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
define(["Ti/_/declare", "Ti/_/UI/FontWidget", "Ti/_/dom", "Ti/_/style"], function(declare, FontWidget, dom, style) {
define(["Ti/_/declare", "Ti/_/UI/FontWidget", "Ti/_/dom", "Ti/_/style", "Ti/UI"], function(declare, FontWidget, dom, style, UI) {

var setStyle = style.set;

Expand Down Expand Up @@ -84,15 +84,16 @@ define(["Ti/_/declare", "Ti/_/UI/FontWidget", "Ti/_/dom", "Ti/_/style"], functio
setStyle(this._contentContainer,"display","none");
},

_defaultWidth: "auto",
_defaultHeight: "auto",
_defaultWidth: UI.SIZE,

_defaultHeight: UI.SIZE,

_messagePadding: 0,

_getContentSize: function(width, height) {
return {
width: width === "auto" ? 36 + this._measureText(this.message, this._indicatorMessage).width + this._messagePadding : width,
height: height === "auto" ? Math.max(this._measureText(this.message, this._indicatorMessage).height,36) : height
width: 36 + this._measureText(this.message, this._indicatorMessage).width + this._messagePadding,
height: Math.max(this._measureText(this.message, this._indicatorMessage).height,36)
};
},

Expand All @@ -107,7 +108,7 @@ define(["Ti/_/declare", "Ti/_/UI/FontWidget", "Ti/_/dom", "Ti/_/style"], functio
}
setStyle(this._indicatorMessage,"paddingLeft", dom.unitize(this._messagePadding));
this._indicatorMessage.innerHTML = innerHTML;
this._hasAutoDimensions() && this._triggerParentLayout();
this._hasSizeDimensions() && this._triggerParentLayout();
return value;
}
},
Expand Down
8 changes: 4 additions & 4 deletions mobileweb/titanium/Ti/UI/AlertDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ define(["Ti/_/declare", "Ti/_/Evented", "Ti/UI", "Ti/_/css"], function(declare,
// Create the alert dialog itself
var alertDialog = UI.createView({
width: "50%",
height: "auto",
height: UI.SIZE,
backgroundColor: "white",
layout: "vertical",
borderRadius: 3,
Expand All @@ -35,7 +35,7 @@ define(["Ti/_/declare", "Ti/_/Evented", "Ti/UI", "Ti/_/css"], function(declare,
left: 5,
right: 5,
top: 5,
height: "auto",
height: UI.SIZE,
textAlign: UI.TEXT_ALIGNMENT_CENTER
}));

Expand All @@ -45,7 +45,7 @@ define(["Ti/_/declare", "Ti/_/Evented", "Ti/UI", "Ti/_/css"], function(declare,
left: 5,
right: 5,
top: 5,
height: "auto",
height: UI.SIZE,
textAlign: UI.TEXT_ALIGNMENT_CENTER
}));

Expand All @@ -56,7 +56,7 @@ define(["Ti/_/declare", "Ti/_/Evented", "Ti/UI", "Ti/_/css"], function(declare,
right: 5,
top: 5,
bottom: bottom,
height: "auto",
height: UI.SIZE,
title: title,
index: index
});
Expand Down
12 changes: 6 additions & 6 deletions mobileweb/titanium/Ti/UI/Button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,9 @@ define(["Ti/_/declare", "Ti/_/UI/FontWidget", "Ti/_/dom", "Ti/_/css", "Ti/_/styl
}));
},

_defaultWidth: "auto",
_defaultWidth: UI.SIZE,

_defaultHeight: "auto",
_defaultHeight: UI.SIZE,

_updateLook: function() {
if (this.backgroundColor || this.backgroundDisabledColor || this.backgroundDisabledImage || this.backgroundFocusedColor ||
Expand Down Expand Up @@ -89,8 +89,8 @@ define(["Ti/_/declare", "Ti/_/UI/FontWidget", "Ti/_/dom", "Ti/_/css", "Ti/_/styl

_getContentSize: function(width, height) {
return {
width: width === "auto" ? this._buttonImage.width + this._measureText(this.title, this._buttonTitle).width : width,
height: height === "auto" ? Math.max(this._buttonImage.height, this._measureText(this.title, this._buttonTitle).height) : height
width: this._buttonImage.width + this._measureText(this.title, this._buttonTitle).width,
height: Math.max(this._buttonImage.height, this._measureText(this.title, this._buttonTitle).height)
};
},

Expand Down Expand Up @@ -144,7 +144,7 @@ define(["Ti/_/declare", "Ti/_/UI/FontWidget", "Ti/_/dom", "Ti/_/css", "Ti/_/styl
image: {
set: function(value) {
require.on(this._buttonImage, "load", lang.hitch(this, function () {
this._hasAutoDimensions() && this._triggerLayout();
this._hasSizeDimensions() && this._triggerLayout();
}));
this._buttonImage.src = value;
return value;
Expand All @@ -166,7 +166,7 @@ define(["Ti/_/declare", "Ti/_/UI/FontWidget", "Ti/_/dom", "Ti/_/css", "Ti/_/styl
title: {
set: function(value) {
this._buttonTitle.innerHTML = value;
this._hasAutoDimensions() && this._triggerParentLayout();
this._hasSizeDimensions() && this._triggerParentLayout();
return value;
}
},
Expand Down
39 changes: 22 additions & 17 deletions mobileweb/titanium/Ti/UI/ImageView.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
define(["Ti/_/declare", "Ti/_/UI/Widget", "Ti/_/dom", "Ti/_/css", "Ti/_/style", "Ti/_/lang"],
function(declare, Widget, dom, css, style, lang) {
define(["Ti/_/declare", "Ti/_/UI/Widget", "Ti/_/dom", "Ti/_/css", "Ti/_/style", "Ti/_/lang", "Ti/UI"],
function(declare, Widget, dom, css, style, lang, UI) {

var setStyle = style.set,
undef,
Expand All @@ -19,35 +19,40 @@ define(["Ti/_/declare", "Ti/_/UI/Widget", "Ti/_/dom", "Ti/_/css", "Ti/_/style",
}
},

_doLayout: function(originX, originY, parentWidth, parentHeight, defaultHorizontalAlignment, defaultVerticalAlignment, isParentAutoWidth, isParentAutoHeight) {
_doLayout: function(params) {
var imageRatio = this.domNode.width / this.domNode.height,
self = this;
boundingHeight = params.boundingSize.height,
boundingWidth = params.boundingSize.width,
values = this.properties.__values__;

function setByHeight() {
self.properties.__values__.width = parentHeight * imageRatio;
self.properties.__values__.height = parentHeight;
values.width = boundingHeight * imageRatio;
values.height = boundingHeight;
}

function setByWidth() {
self.properties.__values__.width = parentWidth;
self.properties.__values__.height = parentWidth / imageRatio;
values.width = boundingWidth;
values.height = boundingWidth / imageRatio;
}

if (!isParentAutoWidth && !isParentAutoHeight) {
if (parentWidth / parentHeight > imageRatio) {
var isParentWidthSize = params.isParentSize.width,
isParentHeightSize = params.isParentSize.width;
if (!isParentWidthSize && !isParentHeightSize) {
if (boundingWidth / boundingHeight > imageRatio) {
setByHeight();
} else {
setByWidth();
}
} else if (!isParentAutoWidth) {
} else if (!isParentWidthSize) {
setByWidth();
} else if (!isParentAutoHeight) {
} else if (!isParentHeightSize) {
setByHeight();
} else {
this.properties.__values__.width = "auto";
this.properties.__values__.height = "auto";
values.width = UI.SIZE;
values.height = UI.SIZE;
}
Widget.prototype._doLayout.apply(this,arguments);

return Widget.prototype._doLayout.call(this,params);
},

properties: {
Expand Down Expand Up @@ -83,9 +88,9 @@ define(["Ti/_/declare", "Ti/_/UI/Widget", "Ti/_/dom", "Ti/_/css", "Ti/_/style",

return declare("Ti.UI.ImageView", Widget, {

_defaultWidth: "auto",
_defaultWidth: UI.SIZE,

_defaultHeight: "auto",
_defaultHeight: UI.SIZE,

_slideshowCount: 0,

Expand Down
12 changes: 6 additions & 6 deletions mobileweb/titanium/Ti/UI/Label.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,14 @@ define(["Ti/_/declare", "Ti/_/UI/FontWidget", "Ti/_/dom", "Ti/_/css", "Ti/_/styl
this.wordWrap = true;
},

_defaultWidth: "auto",
_defaultWidth: UI.SIZE,

_defaultHeight: "auto",
_defaultHeight: UI.SIZE,

_getContentSize: function(width, height) {
return {
width: width === "auto" ? this._measureText(this.text, this.textContainerDiv, width).width : width,
height: height === "auto" ? this._measureText(this.text, this.textContainerDiv, width).height : height
width: this._measureText(this.text, this.textContainerDiv, width).width,
height: this._measureText(this.text, this.textContainerDiv, width).height
};
},

Expand Down Expand Up @@ -84,7 +84,7 @@ define(["Ti/_/declare", "Ti/_/UI/FontWidget", "Ti/_/dom", "Ti/_/css", "Ti/_/styl
html: {
set: function(value) {
this.textContainerDiv.innerHTML = value;
this._hasAutoDimensions() && this._triggerParentLayout();
this._hasSizeDimensions() && this._triggerParentLayout();
return value;
}
},
Expand Down Expand Up @@ -131,7 +131,7 @@ define(["Ti/_/declare", "Ti/_/UI/FontWidget", "Ti/_/dom", "Ti/_/css", "Ti/_/styl
value.match("<br/>$") && (value += "&nbsp;");

this.textContainerDiv.innerHTML = value;
this._hasAutoDimensions() && this._triggerParentLayout();
this._hasSizeDimensions() && this._triggerParentLayout();
return value;
}
},
Expand Down
6 changes: 3 additions & 3 deletions mobileweb/titanium/Ti/UI/OptionDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ define(["Ti/_/declare", "Ti/_/Evented", "Ti/UI", "Ti/_/css"], function(declare,
// Create the options dialog itself
var optionsDialog = UI.createView({
width: "100%",
height: "auto",
height: UI.SIZE,
bottom: 0,
backgroundColor: "white",
layout: "vertical",
Expand All @@ -35,7 +35,7 @@ define(["Ti/_/declare", "Ti/_/Evented", "Ti/UI", "Ti/_/css"], function(declare,
left: 5,
right: 5,
top: 5,
height: "auto",
height: UI.SIZE,
textAlign: UI.TEXT_ALIGNMENT_CENTER
}));

Expand All @@ -46,7 +46,7 @@ define(["Ti/_/declare", "Ti/_/Evented", "Ti/UI", "Ti/_/css"], function(declare,
right: 5,
top: 5,
bottom: bottom,
height: "auto",
height: UI.SIZE,
title: title,
index: index
});
Expand Down

0 comments on commit 85875dc

Please sign in to comment.