Permalink
Browse files

tweets is now lazy loaded

  • Loading branch information...
1 parent 2c76394 commit e68783a3368989547a6ac9ca3dd91ee0a8f16e38 @chetanankola committed Apr 19, 2012
View
@@ -37,3 +37,36 @@ All othe mojits including checkin mojit if need to pull data from facebook graph
+
+TWITTER MOJIT : how does this work
+===================================
+so go to the mojits/twitter/controller.server.js and to the index function
+thats where you start from.
+ if(!ac.params.getFromRoute('defer')){
+ var loaderImg1 = 'http://a.l.yimg.com/a/i/us/sch/mob/spinner-white-small.gif';
+ var loaderImg2 = 'http://a.l.yimg.com/a/i/us/sch/mob/spinner-1.0.0.gif';
+ return ac.done({'onload':{url:loaderImg2}});
+ }
+So here I do my own custom lazy loading where the mojits execute later after the parent (main mojit) has finished execution
+here you check for any defer params passed to the controller by either mojits/twitter/binders/index.js or from url etc..
+
+if you see none then you just put a "loading gif" and return meaning no more code of twitter mojit runs.
+
+now lets go back to mojits/twitter/binders/index.js
+here since controller.server.js a while ago since finished itself.. this gets loaded..
+here I do
+ var args = {params: {route: {
+ coord:{lat:lat,lon:lon,radius:radius},defer:true
+ }}};
+ this.mojitProxy.refreshView(args);
+so what this does is basically refresh the mojit (passing the code execution control to controller back again.)
+now the controller.. again
+
+
+this time if(!ac.params.getFromRoute('defer')){ wont run.. instead runs the later part of the server code.. which is pulling the tweets..
+
+
+
+
+
+
@@ -35,6 +35,13 @@ YUI.add('checkinBinderIndex', function(Y, NAME) {
onRefreshView: function(node){
this.node = node;
var self = this;
+ node.one('#refresh').on('click',function(){
+ var args = {params: {route: {
+ defer:true
+ }}};
+ self.mojitProxy.refreshView(args);
+ });
+
var scrollview_bookmarked_friends = new Y.ScrollView({
srcNode:this.node.one('#bookmarked-friends-scrollable-container'),
deceleration: 0.9,
@@ -45,23 +52,12 @@ YUI.add('checkinBinderIndex', function(Y, NAME) {
axis: "x"
}
});
- node.one('#refresh').on('click',function(){
- var args = {params: {route: {
- defer:true
- }}};
- self.mojitProxy.refreshView(args);
- });
- //scrollview_bookmarked_friends.plug(Y.Plugin.ScrollViewPaginator, { selector: 'li', index: 2 });
setTimeout(function(){
scrollview_bookmarked_friends.syncUI();
},1000);
scrollview_bookmarked_friends.render();
-
-
Y.on('resize', function (e) {
scrollview_bookmarked_friends.syncUI();
- //scrollview_bookmarked_friends.set('width', Y.config.win.innerWidth).syncUI();
- //scrollview_bookmarked_friends.pages.snapToCurrent(0);
});
},
/**
@@ -78,35 +74,6 @@ YUI.add('checkinBinderIndex', function(Y, NAME) {
}}};
this.mojitProxy.refreshView(args);
-
-
-
- /*var scrollview_bookmarked_friends = new Y.ScrollView({
- srcNode:this.node.one('#bookmarked-friends-scrollable-container'),
- deceleration: 0.9,
- bounce:0.1,
- flick: {
- minDistance:10,
- minVelocity:0.1,
- axis: "x"
- }
-
- });
-
- //scrollview_bookmarked_friends.plug(Y.Plugin.ScrollViewPaginator, { selector: 'li', index: 2 });
-
- setTimeout(function(){
- scrollview_bookmarked_friends.syncUI();
- },1000);
- scrollview_bookmarked_friends.render();
-
-
- Y.on('resize', function (e) {
- scrollview_bookmarked_friends.syncUI();
- //scrollview_bookmarked_friends.set('width', Y.config.win.innerWidth).syncUI();
- scrollview_bookmarked_friends.pages.snapToCurrent(0);
- });*/
-
}
};
@@ -12,11 +12,9 @@
{{#friends}}
<div id="checkin-container" class="mojit-panel">
-
<header class='header-style-default'>
Facebook Friends
<span class="location">{{#location}}in [{{name}}]{{/location}}</span>
-
</header>
<div id="bookmarked-friends-scrollable-container">
<ul>
@@ -52,6 +52,9 @@ YUI.add('gmapBinderIndex', function(Y, NAME) {
var currentLoc = {};
var self = this;
navigator.geolocation.getCurrentPosition(function(pos) {
+
+ Y.Cookie.set('currentlat', pos.coords.latitude);
+ Y.Cookie.set('currentlon', pos.coords.longitude);
currentLoc.lat = pos.coords.latitude;
currentLoc.lon = pos.coords.longitude;
return self.renderMap(currentLoc);
@@ -91,7 +94,7 @@ YUI.add('gmapBinderIndex', function(Y, NAME) {
Y.fire('MAP_UPDATE', {}, {
lat: this.get('lat'),
lon: this.get('lon'),
- radius: 15
+ radius: 2
});
});
});
@@ -67,6 +67,7 @@ YUI.add('login', function(Y) {
url_editprofile:'http://facebook.com/me/info'
}
});
+
},
setCookie: function(ac,access_token){
@@ -2,10 +2,8 @@
{{{login}}}
{{{gmap}}}
{{{twitter}}}
-
-
-
-{{{checkin}}}
{{{weather}}}
+{{{checkin}}}
+
</div>
@@ -1,3 +1,10 @@
#twitter-container {-webkit-border-radius:5px;background:#fefefe;position:relative;min-height:30px;-webkit-box-shadow: 0 0 15px 1px #ccc;}
#twitter-container ul {padding:4px;}
-#twitter-container ul li {padding:3px;background:#efefef;}
+#twitter-container ul li {padding:3px;background:#efefef;}
+#twitter-container ul li a {/*display:block;*/}
+
+
+
+#tweets-scrollable-container{overflow:hidden;}
+
+
@@ -32,14 +32,38 @@ YUI.add('twitterBinderIndex', function(Y, NAME) {
*
* @param node {Node} The DOM node to which this mojit is attached.
*/
+ onRefreshView: function(node){
+ this.node = node;
+ var self = this;
+ var tweets_scroll = new Y.ScrollView({
+ srcNode:this.node.one('#tweets-scrollable-container'),
+ height: "16em"
+ });
+ setTimeout(function(){
+ tweets_scroll.syncUI();
+ },1000);
+ tweets_scroll.render();
+
+ Y.on('resize', function (e) {
+ tweets_scroll.syncUI();
+ });
+ },
bind: function(node) {
var me = this;
this.node = node;
var self = this;
+ var lat = Y.Cookie.get('currentlat') ||'37.4144411';
+ var lon = Y.Cookie.get('currentlon') ||'-122.0240595';
+ var radius = 2;
+ var args = {params: {route: {
+ coord:{lat:lat,lon:lon,radius:radius},defer:true
+ }}};
+ this.mojitProxy.refreshView(args);
+
Y.on('MAP_UPDATE', function(e, map) {
var args = {params: {route: {
- coord:{lat:map.lat,lon:map.lon}
+ coord:{lat:map.lat,lon:map.lon,radius:map.radius},defer:true
}}};
this.mojitProxy.refreshView(args);
}, this);
@@ -50,4 +74,4 @@ YUI.add('twitterBinderIndex', function(Y, NAME) {
};
-}, '0.0.1', {requires: ['mojito-client']});
+}, '0.0.1', {requires: ['mojito-client','scrollview','scrollview-base', 'scrollview-paginator']});
@@ -30,34 +30,32 @@ YUI.add('twitter', function(Y, NAME) {
*/
index: function(ac) {
ac.assets.addCss('./index.css', 'top');
- var lat = '37.4144411';
- var lon = '-122.0240595';
+
+ if(!ac.params.getFromRoute('defer')){
+ var loaderImg1 = 'http://a.l.yimg.com/a/i/us/sch/mob/spinner-white-small.gif';
+ var loaderImg2 = 'http://a.l.yimg.com/a/i/us/sch/mob/spinner-1.0.0.gif';
+ return ac.done({'onload':{url:loaderImg2}});
+ }
+ var lat = ac.cookie.get('currentlat') || '37.4144411';
+ var lon = ac.cookie.get('currentlon') ||'-122.0240595';
+ var radius = 2; //miles
+
+
+
var coord = ac.params.getFromRoute('coord');
- if(coord){
+ if(coord && coord.lat &&coord.lon && coord.radius){
lat = coord.lat;
lon = coord.lon;
+ radius = coord.radius;
}
-/*
-{
- "completed_in": 0.097,
- "max_id": 192390629014257660,
- "max_id_str": "192390629014257666",
- "page": 1,
- "query": "",
- "refresh_url": "?since_id=192390629014257666&q=&geocode=22%2C22%2C1mi",
- "results": [],
- "results_per_page": 15,
- "since_id": 0,
- "since_id_str": "0"
-}
-*/
- ac.models.twitterModelFoo.getTweets(lat,lon,function(err, data) {
+
+ ac.models.twitterModelFoo.getTweets(lat,lon,radius,function(err, data) {
if (err) {
ac.done({err:{errmsg:'fail'}});
return;
}
- ac.done({success:data});
+ ac.done({success:data,coord:coord});
});
}
@@ -32,18 +32,16 @@ YUI.add('twitterModelFoo', function(Y, NAME) {
callback(null, { some: 'data' });
},
- getTweets: function(lat,lon,callback){
- var query= "http://search.twitter.com/search.json?geocode="+lat+","+lon+",1mi";
+ getTweets: function(lat,lon,radius,callback){
+ var query= "http://search.twitter.com/search.json?geocode="+lat+","+lon+","+radius+"mi";
var self = this;
function handler(err,res) {
if (err) {
return callback(err,null);
}
else if(res){
- var myinfo = Y.JSON.parse(res.getBody());
- Y.log(myinfo);
- var send = myinfo;
- return callback(null,send);
+ var tweets = Y.JSON.parse(res.getBody());
+ return callback(null,tweets);
} else {
return callback(null,null);
}
@@ -1,20 +1,33 @@
<div id="{{mojit_view_id}}">
+ {{#onload}}
+ <div id="twitter-container" class="mojit-panel">
+ <header class='header-style-default'>
+ Tweets loading ..<img src="{{url}}" height=20/>
+ </header>
+ </div>
+ {{/onload}}
+
+
{{#success}}
<div id="twitter-container" class="mojit-panel">
<header class='header-style-default'>
- Tweets from {{place}}
+ Tweets from {{#coord}}({{lat}},{{lon}}) radius:{{radius}} {{/coord}}
</header>
- {{#results}}
- <ul>
- <li>
- <span><a href="http://twitter.com/#!/{{from_user}}/status/{{id_str}}" target="_blank"><img src='{{profile_image_url}}' /> </span>
- {{from_user_name}} : {{text}}
- </a>
- </li>
- </ul>
- {{/results}}
+
+ <div id="tweets-scrollable-container">
+ {{#results}}
+ <ul>
+ <li>
+ <span><a href="http://twitter.com/#!/{{from_user}}/status/{{id_str}}" target="_blank"><img src='{{profile_image_url}}' />
+ {{from_user_name}} : {{text}} </span>
+ </a>
+ </li>
+ </ul>
+ {{/results}}
+ </div>
+
</div>
{{/success}}
@@ -17,7 +17,7 @@ YUI.add('weather', function(Y) {
*/
Y.mojito.controller = {
init: function(spec) {
- this.spec = spec;
+ this.spec = spec;
},
/**
* Method corresponding to the 'index' action.
@@ -27,26 +27,23 @@ YUI.add('weather', function(Y) {
*/
index: function(ac) {
ac.assets.addCss('./index.css', 'top');
- ac.done({title: 'Weather Mojit'});
+ ac.done({title: 'Weather Mojit'});
},
getWeather: function(ac) {
- var zipcode = ac.params.getFromRoute('zip');
- if(!zipcode) {
- return ac.done({});
- }
- var model = ac.models.weatherModelFoo;
-
- model.forecast(zipcode, function(err,res) {
- if(err) {
- Y.log(err);
- return ac.done({result:"error in processing weather information for"+zipcode});
- }
- var result = res;
- Y.log(result);
- ac.done({result:result, zipcode:zipcode},'json');
- });
- },
+ var zipcode = ac.params.getFromRoute('zip') ||'90007';
+ var model = ac.models.weatherModelFoo;
+
+ model.forecast(zipcode, function(err,res) {
+ if(err) {
+ Y.log(err);
+ return ac.done({result:"error in processing weather information for"+zipcode});
+ }
+ var result = res;
+ Y.log(result);
+ ac.done({result:result, zipcode:zipcode},'json');
+ });
+ },
get_randomzipcode:function(ac){
var zip = (89000+ Math.floor(Math.random()*10000)+ Math.floor(Math.random()*1000)+Math.floor(Math.random()*100)+Math.floor(Math.random()*10));
return zip;

0 comments on commit e68783a

Please sign in to comment.