Permalink
Browse files

Add Pull-to-Refresh and map annotations

  • Loading branch information...
1 parent 134f68b commit 694e2ebe1002dbe27d91d4238695408de40d5d8e @jpadilla committed May 3, 2012
View
BIN Resources/lib/arrow.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
15 Resources/lib/date.js
@@ -0,0 +1,15 @@
+var formatDate = function()
+{
+ var d = new Date;
+ var month = d.getMonth() + 1;
+ var datestr = d.getDate() + "/" + month + "/" + d.getFullYear();
+
+ var minutes = d.getMinutes();
+ if (minutes < 10) {
+ minutes = "0" + minutes;
+ }
+
+ datestr += " " + d.getHours() + ":" + minutes;
+
+ return datestr;
+}
View
116 Resources/lib/pulltorefresh.js
@@ -0,0 +1,116 @@
+var PullToRefresh = {
+ _loadingCallback: null,
+ _pulling: false,
+ _reloading: false,
+ _view: null,
+ _arrow: null,
+ _status: null,
+ _lastUpdate: null,
+ _activityIndicator: null,
+
+ createPullToRefresh: function(parameters)
+ {
+ PullToRefresh._loadingCallback = parameters.action;
+
+ PullToRefresh._view = Ti.UI.createView({
+ backgroundColor:parameters.backgroundColor,
+ width:320,
+ height:60
+ });
+
+ PullToRefresh._arrow = Ti.UI.createView({
+ backgroundImage:"/lib/arrow.png",
+ width:30,
+ height:30,
+ bottom:20,
+ left:20
+ });
+ PullToRefresh._view.add(PullToRefresh._arrow);
+
+ PullToRefresh._status = Ti.UI.createLabel({
+ text:"Pull down to refresh...",
+ left:55,
+ width:220,
+ bottom:35,
+ height:"auto",
+ color:parameters.labelColor,
+ textAlign:"center",
+ font:{fontSize:13,fontWeight:"bold"}
+ });
+ PullToRefresh._view.add(PullToRefresh._status);
+
+ PullToRefresh._lastUpdate = Ti.UI.createLabel({
+ text:"Last updated: " + formatDate(),
+ left:55,
+ width:220,
+ bottom:15,
+ height:15,
+ height:"auto",
+ color:parameters.labelColor,
+ textAlign:"center",
+ font:{fontSize:12}
+ });
+ PullToRefresh._view.add(PullToRefresh._lastUpdate);
+
+ PullToRefresh._activityIndicator = Titanium.UI.createActivityIndicator({
+ left:20,
+ bottom:13,
+ width:30,
+ height:30,
+ style:Titanium.UI.iPhone.ActivityIndicatorStyle.DARK
+ });
+ PullToRefresh._view.add(PullToRefresh._activityIndicator);
+
+ return PullToRefresh._view;
+
+ },
+
+ _scroll: function(e)
+ {
+ var offset = e.contentOffset.y;
+ if (offset <= -65.0 && !PullToRefresh._pulling)
+ {
+ var t = Ti.UI.create2DMatrix();
+ t = t.rotate(-180);
+ PullToRefresh._pulling = true;
+ PullToRefresh._arrow.animate({transform:t, duration:180});
+ PullToRefresh._status.text = "Release to refresh...";
+ }
+ else if (PullToRefresh._pulling && offset > -65.0 && offset < 0)
+ {
+ PullToRefresh._pulling = false;
+ var t = Ti.UI.create2DMatrix();
+ PullToRefresh._arrow.animate({transform:t,duration:180});
+ PullToRefresh._status.text = "Pull down to refresh...";
+ }
+ },
+
+ _begin: function(e, tableView)
+ {
+ if (PullToRefresh._pulling && !PullToRefresh._reloading && e.contentOffset.y <= -65.0)
+ {
+ PullToRefresh._reloading = true;
+ PullToRefresh._pulling = false;
+ PullToRefresh._arrow.hide();
+ PullToRefresh._activityIndicator.show();
+ PullToRefresh._status.text = "Loading...";
+ tableView.setContentInsets({top:60},{animated:true});
+ PullToRefresh._arrow.transform = Ti.UI.create2DMatrix();
+ PullToRefresh._loadingCallback();
+ }
+ },
+
+ _end: function(callback)
+ {
+ callback();
+ PullToRefresh._reloading = false;
+ PullToRefresh._lastUpdate.text = "Last updated: " + formatDate();
+ PullToRefresh._status.text = "Pull down to refresh...";
+ PullToRefresh._activityIndicator.hide();
+ PullToRefresh._arrow.show();
+ }
+}
+
+// exports = exports || {};
+
+module.exports = PullToRefresh;
View
111 Resources/ui/common/MasterView.js
@@ -1,6 +1,10 @@
+Ti.include("lib/date.js");
+// Ti.include("lib/pulltorefresh.js");
+
//Master View Component Constructor
function MasterView() {
+ var PullToRefresh = require('lib/pulltorefresh');
var Cloud = require('ti.cloud');
//create object instance, parasitic subclass of Observable
@@ -13,6 +17,7 @@ function MasterView() {
// Set Distance filter. This dictates how often an event fires based on the distance the device moves. This value is in meters.
Titanium.Geolocation.distanceFilter = 10;
+
//set the mapview with the current location
var mapView = Titanium.Map.createView({
mapType : Titanium.Map.STANDARD_TYPE,
@@ -34,17 +39,39 @@ function MasterView() {
//some dummy data for our table view
var tableData = [];
- var table = Ti.UI.createTableView({
+ var pullToRefresh = PullToRefresh.createPullToRefresh({
+ backgroundColor : "#CCC",
+ labelColor : "#000",
+ action : function() {
+ setTimeout(function() {
+ refresh();
+ }, 500)
+ }
+ });
+
+ var tableView = Ti.UI.createTableView({
data : tableData,
height : 225,
top : 193
});
- self.add(table);
-
+ self.add(tableView);
+
+ tableView.headerPullView = pullToRefresh;
+
+ tableView.addEventListener("scroll", function(e) {
+ PullToRefresh._scroll(e);
+ });
+
+ tableView.addEventListener("scrollEnd", function(e) {
+ PullToRefresh._begin(e, this);
+ });
+
+ var region = {};
+
function getLocation() {
//Get the current position and set it to the mapview
Titanium.Geolocation.getCurrentPosition(function(e) {
- var region = {
+ region = {
latitude : e.coords.latitude,
longitude : e.coords.longitude,
animate : true,
@@ -58,27 +85,9 @@ function MasterView() {
});
mapView.setLocation(region);
-
- Cloud.Posts.query({
- page : 1,
- per_page : 20,
- where : {
- coordinates : {
- '$nearSphere' : [region.longitude, region.latitude]
- }
- }
- }, function(e) {
- if(e.success) {
- var data = [];
- for(var i = 0; i < e.posts.length; i++) {
- var post = e.posts[i];
- data.push({title: post.content});
- }
- table.setData(data);
- } else {
- alert('Error:\\n' + ((e.error && e.message) || JSON.stringify(e)));
- }
- });
+
+ refresh();
+
});
}
@@ -89,16 +98,62 @@ function MasterView() {
getLocation();
-
//add behavior
- table.addEventListener('click', function(e) {
+ tableView.addEventListener('click', function(e) {
self.fireEvent('itemSelected', {
name : e.rowData.title,
price : e.rowData.price
});
});
+ var refresh = function() {
+ Cloud.Posts.query({
+ page : 1,
+ per_page : 20,
+ where : {
+ coordinates : {
+ '$nearSphere' : [region.longitude, region.latitude]
+ }
+ }
+ }, function(e) {
+ if(e.success) {
+ var data = [];
+ var annotations = [];
+ for(var i = 0; i < e.posts.length; i++) {
+ var post = e.posts[i];
+ data.push({
+ title : post.content
+ });
+ var annotationView = Titanium.Map.createAnnotation({
+ latitude : post.custom_fields.coordinates[0][1],
+ longitude : post.custom_fields.coordinates[0][0],
+ title : post.content,
+ pincolor : Titanium.Map.ANNOTATION_RED,
+ animate : true,
+ });
+ annotations.push(annotationView);
+ }
+ tableView.setData(data);
+ mapView.setAnnotations(annotations);
+ } else {
+ alert('Error:\\n' + ((e.error && e.message) || JSON.stringify(e)));
+ }
+ });
+
+ PullToRefresh._end(function() {
+ tableView.setContentInsets({
+ top : 0
+ }, {
+ animated : true
+ });
+ });
+ }
+
+ self.addEventListener("showCreatedPost", function(e) {
+ refresh();
+ });
+
return self;
};
-module.exports = MasterView;
+module.exports = MasterView;
View
13 Resources/ui/common/PostView.js
@@ -55,21 +55,18 @@ function PostView() {
self.add(counterLabel);
- self.addEventListener('create_post', function(e) {
+ self.addEventListener('create_post', function(obj) {
Cloud.Posts.create({
content: postTextArea.value,
custom_fields: {
- coordinates: [e.longitude, e.latitude]
+ coordinates: [obj.longitude, obj.latitude]
}
}, function (e) {
if (e.success) {
var post = e.posts[0];
- alert('Success:\\n' +
- 'id: ' + post.id + '\\n' +
- 'title: ' + post.title + '\\n' +
- 'content: ' + post.content + '\\n' +
- 'content: ' + post.custom_fields.coordinates + '\\n' +
- 'updated_at: ' + post.updated_at);
+ postTextArea.value = '';
+ counterLabel.text = '0/140';
+ self.fireEvent('showCreatedPost', {post: post});
} else {
alert('Error:\\n' +
((e.error && e.message) || JSON.stringify(e)));
View
42 Resources/ui/handheld/ios/ApplicationWindow.js
@@ -11,8 +11,7 @@ function ApplicationWindow() {
//construct UI
var masterView = new MasterView(),
- detailView = new DetailView(),
- postView = new PostView();
+ detailView = new DetailView();
var latitude, longitude;
@@ -26,20 +25,23 @@ function ApplicationWindow() {
title: 'Post'
});
- var PostWindow = Ti.UI.createWindow({
- title: 'Create a Post'
- });
-
- var closeButton = Ti.UI.createButton({
- title: 'Close'
- });
-
- var createButton = Ti.UI.createButton({
- title: 'Post',
- enabled: false
- });
-
postButton.addEventListener('click', function(e) {
+
+ var postView = new PostView();
+
+ var PostWindow = Ti.UI.createWindow({
+ title: 'Create a Post'
+ });
+
+ var closeButton = Ti.UI.createButton({
+ title: 'Close'
+ });
+
+ var createButton = Ti.UI.createButton({
+ title: 'Post',
+ enabled: false
+ });
+
PostWindow.add(postView);
closeButton.addEventListener('click', function(e) {
@@ -61,6 +63,16 @@ function ApplicationWindow() {
createButton.enabled = e.bool;
});
+ postView.addEventListener('showCreatedPost', function(e) {
+ PostWindow.close();
+ masterView.fireEvent('showCreatedPost', e);
+ });
+
+ PostWindow.addEventListener('close', function(e) {
+ PostWindow.remove(postView);
+ postView = null;
+ });
+
PostWindow.open({modal: true});
});

0 comments on commit 694e2eb

Please sign in to comment.