Skip to content

Commit

Permalink
Merge pull request #1509 from bryan-m-hughes/timob-7232
Browse files Browse the repository at this point in the history
Timob 7232 Progress Bar implementation.
  • Loading branch information
cb1kenobi committed Feb 25, 2012
2 parents 2250d76 + bcba2ff commit da5c153
Show file tree
Hide file tree
Showing 20 changed files with 247 additions and 91 deletions.
2 changes: 1 addition & 1 deletion apidoc/Titanium/UI/ProgressBar.yml
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ description: |
Use the <Titanium.UI.createProgressBar> method to create a progress bar.
extends: Titanium.UI.View
since: "0.8"
platforms: [android, iphone, ipad]
platforms: [android, iphone, ipad, mobileweb]
properties:
- name: color
summary: Color of the progress bar text.
Expand Down
13 changes: 13 additions & 0 deletions mobileweb/themes/common.css
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,19 @@ textarea {
background-color: #ccc;
}

.TiUIProgressBarContainer {
background-color: #666;
border-radius: 3px;
border: 1px solid #666;
box-shadow: inset 1px 2px 1px 1px #444;
-moz-box-shadow: inset 1px 2px 1px 1px #444;
-webkit-box-shadow: inset 1px 2px 1px 1px #444;
}

.TiUIProgressBarIndicator {
background-color: #ccc;
}

.TiMediaVideoPlayer video {
left: 0;
position: absolute;
Expand Down
2 changes: 1 addition & 1 deletion mobileweb/titanium/Ti/UI.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ define(

var body = document.body,
isIOS = /(iPhone|iPad)/.test(navigator.userAgent),
modules = "2DMatrix,ActivityIndicator,AlertDialog,Animation,Button,EmailDialog,ImageView,Label,OptionDialog,ScrollableView,ScrollView,Slider,Switch,Tab,TabGroup,TableView,TableViewRow,TableViewSection,TextArea,TextField,View,WebView,Window",
modules = "2DMatrix,ActivityIndicator,AlertDialog,Animation,Button,EmailDialog,ImageView,Label,OptionDialog,ProgressBar,ScrollableView,ScrollView,Slider,Switch,Tab,TabGroup,TableView,TableViewRow,TableViewSection,TextArea,TextField,View,WebView,Window",
creators = {},
setStyle = style.set;

Expand Down
7 changes: 0 additions & 7 deletions mobileweb/titanium/Ti/UI/Button.js
Original file line number Diff line number Diff line change
Expand Up @@ -137,13 +137,6 @@ define(["Ti/_/declare", "Ti/_/UI/FontWidget", "Ti/_/dom", "Ti/_/css", "Ti/_/styl

backgroundSelectedImage: postDoBackground,

color: {
set: function(value) {
setStyle(this._buttonTitle, "color", value);
return value;
}
},

enabled: {
set: function(value, oldValue) {

Expand Down
2 changes: 1 addition & 1 deletion mobileweb/titanium/Ti/UI/ImageView.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ define(["Ti/_/declare", "Ti/_/UI/Widget", "Ti/_/dom", "Ti/_/css", "Ti/_/style",
}
},

_doLayout: function(originX, originY, parentWidth, parentHeight, centerHDefault, centerVDefault, isParentAutoWidth, isParentAutoHeight) {
_doLayout: function(originX, originY, parentWidth, parentHeight, defaultHorizontalAlignment, defaultVerticalAlignment, isParentAutoWidth, isParentAutoHeight) {
var imageRatio = this.domNode.width / this.domNode.height,
self = this;

Expand Down
6 changes: 0 additions & 6 deletions mobileweb/titanium/Ti/UI/Label.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,12 +74,6 @@ define(["Ti/_/declare", "Ti/_/UI/FontWidget", "Ti/_/dom", "Ti/_/css", "Ti/_/styl
},

properties: {
color: {
set: function(value) {
this.textContainerDiv.style.color = value;
return value;
}
},
ellipsize: {
set: function(value) {
set(this.textContainerDiv,"textOverflow", !!value ? "ellipsis" : "clip");
Expand Down
175 changes: 175 additions & 0 deletions mobileweb/titanium/Ti/UI/ProgressBar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
define(["Ti/_/declare", "Ti/_/UI/Widget", "Ti/_/UI/FontWidget", "Ti/_/lang", "Ti/_/dom", "Ti/_/style"], function(declare, Widget, FontWidget, lang, dom, style) {

var setStyle = style.set;

var InternalProgressBar = declare(Widget, {

constructor: function() {
this._contentContainer = dom.create("div", {
className: "TiUIProgressBarContainer",
style: {
pointerEvents: "none",
width: "100%",
height: "100%",
overflow: "hidden"
}
}, this.domNode);
this._indicator = dom.create("div", {
className: "TiUIProgressBarIndicator",
style: {
pointerEvents: "none",
width: "0%",
height: "100%"
}
}, this._contentContainer);
},

_doLayout: function(originX, originY, parentWidth, parentHeight, defaultHorizontalAlignment, defaultVerticalAlignment, isParentAutoWidth, isParentAutoHeight) {
var props = this.properties.__values__;
if (!isParentAutoWidth && !isParentAutoHeight) {
props.width = "100%";
props.height = "100%";
} else if (!isParentAutoWidth) {
props.width = "100%";
props.height = "auto";
} else if (!isParentAutoHeight) {
props.width = "auto";
props.height = "100%";
} else {
props.width = "auto";
props.height = "auto";
}

Widget.prototype._doLayout.apply(this,arguments);
},

_getContentSize: function(width, height) {
return {
width: 200,
height: 25
};
},

_setPosition: function(location) {
setStyle(this._indicator, "width", Math.round(100 * location) + "%");
}
});

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

constructor: function() {
this.add(this._contentContainer = Ti.UI.createView({
width: "auto",
height: "auto",
left: 0,
top: 0,
layout: "vertical"
}));
this._contentContainer._layout._defaultHorizontalLayout = "left";
this._contentContainer.add(this._message = Ti.UI.createLabel());
this._contentContainer.add(this._progressBar = new InternalProgressBar());
},

_doLayout: function(originX, originY, parentWidth, parentHeight, defaultHorizontalAlignment, defaultVerticalAlignment, isParentAutoWidth, isParentAutoHeight) {
var props = this._contentContainer.properties.__values__,
hasAutoWidth = this.width === "auto" || !lang.isDef(this.width),
hasAutoHeight = this.height === "auto" || !lang.isDef(this.height);
if (!hasAutoWidth && !hasAutoHeight) {
props.width = "100%";
props.height = "100%";
} else if (!hasAutoWidth) {
props.width = "100%";
props.height = "auto";
} else if (!hasAutoHeight) {
props.width = "auto";
props.height = "100%";
} else {
props.width = "auto";
props.height = "auto";
}

if (this._message._getContentSize("auto","auto").width === 0) {
this._message.properties.__values__.height = 0;
this._progressBar.properties.__values__.top = 0;
} else {
this._message.properties.__values__.height = "auto";
this._progressBar.properties.__values__.top = 2;
}

Widget.prototype._doLayout.apply(this,arguments);
},

_updateSize: function() {
this._progressBar._setPosition((this.value - this.min) / (this.max - this.min));
},

_defaultWidth: "auto",

_defaultHeight: "auto",

properties: {
color: {
set: function(value) {
this._message.color = value;
return value;
}
},

font: {
set: function(value) {
this._message.font = value;
return value;
}
},

message: {
set: function(value) {
this._message.text = value;
return value;
}
},

min: {
set: function(value) {
if (value > this.max) {
value = this.max;
}
return value;
},
post: function() {
this._updateSize();
},
value: 0
},

max: {
set: function(value) {
if (value < this.min) {
value = this.min;
}
return value;
},
post: function() {
this._updateSize();
},
value: 100
},

value: {
set: function(value) {
if (value < this.min) {
value = this.min;
} else if (value > this.max) {
value = this.max;
}
return value;
},
post: function() {
this._updateSize();
},
value: 0
}
}

});
});
2 changes: 0 additions & 2 deletions mobileweb/titanium/Ti/UI/ScrollView.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@ define(["Ti/_/declare", "Ti/UI/View", "Ti/_/style", "Ti/_/lang", "Ti/UI"],
}));
style.set(this._contentMeasurer.domNode,"overflow","hidden");

this.layout = "uncenteredAbsolute";

this._createHorizontalScrollBar();
this._createVerticalScrollBar();

Expand Down
4 changes: 4 additions & 0 deletions mobileweb/titanium/Ti/UI/Slider.js
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ define(["Ti/_/declare", "Ti/_/UI/Widget", "Ti/_/dom", "Ti/_/css", "Ti/_/style",
},
post: function() {
this.value = this._constrainValue(this.value);
this._updateSize();
},
value: 100
},
Expand All @@ -101,6 +102,7 @@ define(["Ti/_/declare", "Ti/_/UI/Widget", "Ti/_/dom", "Ti/_/css", "Ti/_/style",
},
post: function() {
this.value = this._constrainValue(this.value);
this._updateSize();
}
},

Expand All @@ -111,6 +113,7 @@ define(["Ti/_/declare", "Ti/_/UI/Widget", "Ti/_/dom", "Ti/_/css", "Ti/_/style",
},
post: function() {
this.value = this._constrainValue(this.value);
this._updateSize();
},
value: 0
},
Expand All @@ -122,6 +125,7 @@ define(["Ti/_/declare", "Ti/_/UI/Widget", "Ti/_/dom", "Ti/_/css", "Ti/_/style",
},
post: function() {
this.value = this._constrainValue(this.value);
this._updateSize();
}
},

Expand Down
7 changes: 0 additions & 7 deletions mobileweb/titanium/Ti/UI/Switch.js
Original file line number Diff line number Diff line change
Expand Up @@ -152,13 +152,6 @@ define(["Ti/_/declare", "Ti/_/UI/FontWidget", "Ti/_/dom", "Ti/_/css", "Ti/_/styl

backgroundSelectedImage: postDoBackground,

color: {
set: function(value) {
setStyle(this._switchTitle, "color", value);
return value;
}
},

enabled: {
set: function(value, oldValue) {

Expand Down
2 changes: 1 addition & 1 deletion mobileweb/titanium/Ti/UI/View.js
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@ define(["Ti/_/declare", "Ti/_/dom", "Ti/_/UI/Element", "Ti/_/lang", "Ti/_/string
properties: {
layout: {
set: function(value) {
var match = value.match(/^(uncenteredAbsolute|horizontal|centeredHorizontal|vertical)$/),
var match = value.match(/^(horizontal|vertical)$/),
value = match ? match[0] : "absolute";

if (this._layout) {
Expand Down
6 changes: 2 additions & 4 deletions mobileweb/titanium/Ti/_/Layouts.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
define(
["Ti/_/Layouts/UncenteredAbsolute", "Ti/_/Layouts/Absolute", "Ti/_/Layouts/Horizontal", "Ti/_/Layouts/CenteredHorizontal", "Ti/_/Layouts/Vertical"],
function(UncenteredAbsolute, Absolute, CenteredHorizontal, Horizontal, Vertical) {
["Ti/_/Layouts/Absolute", "Ti/_/Layouts/Horizontal", "Ti/_/Layouts/Vertical"],
function(Absolute, Horizontal, Vertical) {

return {
Absolute: Absolute,
UncenteredAbsolute: UncenteredAbsolute,
Horizontal: Horizontal,
CenteredHorizontal: CenteredHorizontal,
Vertical: Vertical
};

Expand Down
10 changes: 7 additions & 3 deletions mobileweb/titanium/Ti/_/Layouts/Absolute.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ define(["Ti/_/Layouts/Base", "Ti/_/declare"], function(Base, declare) {

// Layout the child
var child = element.children[i];
child._doLayout(0,0,width,height,true,true,isAutoWidth,isAutoHeight);
child._doLayout(0,0,width,height,this._defaultHorizontalAlignment,this._defaultVerticalAlignment,isAutoWidth,isAutoHeight);

// Update the size of the component
var rightMostEdge = child._measuredWidth + child._measuredLeft + 2 * child._measuredBorderWidth + child._measuredRightPadding;
Expand All @@ -17,8 +17,12 @@ define(["Ti/_/Layouts/Base", "Ti/_/declare"], function(Base, declare) {
bottomMostEdge > computedSize.height && (computedSize.height = bottomMostEdge);
}
return computedSize;
}

},

_defaultHorizontalAlignment: "center",

_defaultVerticalAlignment: "center"

});

});
25 changes: 0 additions & 25 deletions mobileweb/titanium/Ti/_/Layouts/CenteredHorizontal.js

This file was deleted.

0 comments on commit da5c153

Please sign in to comment.