Added Follower/Following information column.

ttrace · Jan 27, 2010 · 86a8793 · 86a8793
1 parent 3e8c4d6
commit 86a8793
Show file tree

Hide file tree

Showing 11 changed files with 319 additions and 35 deletions.
diff --git a/about.html b/about.html
@@ -4,25 +4,25 @@
 	<title>mbtweet - more better tweeting experience for WebKit -</title>
 	<meta http-equiv="content-type" content="text/html, text/javascript; charset=utf-8">
 	<link rel="stylesheet"	href="pbapp.css">
-	<link rel="stylesheet"	href="pbauth.css">
+	<link rel="stylesheet"	href="pbabout.css">
 </head>
 <body>
 <h1>mbtweet</h1>
 <p>
-mbtweet HTML5 Application is currentry alpha stage.
+mbtweet is currentry alpha stage.
 </p>
 
 <h2>Install</h2>
 <p>
-Follow instruction on <a href="auth.html" target="_blank">mbtweet application authentication page</a>.<br>
+Follow instruction at <a href="auth.html" target="_blank">mbtweet authentication page</a>.<br>
 mbtweet app works with OAuth on Twitter API authentication.<br>
 mbtweet app runs on latest WebKit browsers (Safari 4 and Chrome 4 beta).
 </p>
 
 <h2>Features</h2>
 <ol>
 <li>
-Preset timelines.<br>Home, Mentions, Favorites and your subscribed lists launcher on Dock.
+Preset timelines.<br>Home, Mentions, Favorites, ReTweets, saved Searches and your subscribed lists launcher on Dock.
 </li>
 <li>
 Conversation chains.<br>mbtweet is capable of showing conversation chains with considering in_reply_to_status_id's.
@@ -37,7 +37,7 @@ <h2>Features</h2>
 Multi column interface.
 </li>
 <li>
-Geolocation support
+Geolocation viewer
 </li>
 <li>
 API Rate monitor

diff --git a/index.html b/index.html
@@ -66,7 +66,13 @@
 			<div class = "message"	onclick = "var mention = new timeline('message');">
 				<img src="images/messages_icn.png">
 			</div>
-			<div class = "your"		onclick = "var mention = new timeline('mine');">Yours</div>
+			<div class = "your  dock-icon">
+				<div class="dock-menu">
+					<div class="dock-menu-index" onclick = "var mention = new timeline('following');return false;">Your following</div>
+					<div class="dock-menu-index" onclick = "var mention = new timeline('followwers');">Your follower</div>
+				</div>
+				<img class = "user-icon" src="images/user_base.png" onclick = "var mention = new timeline('mine');">
+			</div>
 			<div class = "lists dock-icon" id = "my_lists">
 				<img src="images/lists_icn.png">
 			</div>

diff --git a/pbabout.css b/pbabout.css
@@ -0,0 +1,34 @@
+body
+{
+	height	: 100%;
+	padding	: 0.5em 1.25em;
+}
+
+.current-process
+{
+	display : block;
+}
+
+.inactive
+{
+	display : none;
+}
+
+#post_key , #go_pbtweet
+{
+	display :none;
+}
+
+iframe
+{
+	background-color: white;
+	height			: 120px;
+	width			: 550px;
+	margin			: 5px auto;
+}
+
+pre
+{
+	margin		: 0px 1em;
+	font-family	: monospace;
+}
diff --git a/pbapp.css b/pbapp.css
@@ -218,6 +218,21 @@ a:hover
 									);
 }
 
+.timeline .read-more
+{
+	width		: 100%;
+	padding		: 4px 0px;
+	background	:-webkit-gradient(	linear,
+									left top,
+									left bottom,
+									from( rgb( 255, 255, 255 ) ),
+									color-stop( 0.3 , rgb( 200, 200, 200) ),
+									to( rgb( 160, 160, 160) )
+									);
+	-webkit-border-radius	: 8px;
+	cursor	:pointer;
+}
+
 /* timeline shrinked*/
 .timeline_column.shrink
 {

diff --git a/pbauth.css b/pbauth.css
@@ -21,7 +21,7 @@ body
 iframe
 {
 	background-color: white;
-	height			: 40px;
+	height			: 120px;
 	width			: 550px;
 	margin			: 5px auto;
 }
diff --git a/scripts/mbtweet.js b/scripts/mbtweet.js
@@ -2,8 +2,8 @@ var mbtweet = {};
 
 mbtweet = 
 {
-	debug			: true ,
-	build			: 00014 ,
+	debug			: false ,
+	build			: 00015 ,
 	version			: "1.0" ,
 	bitly_token		: "",
 	currentSearch	: "",
@@ -14,13 +14,14 @@ mbtweet =
 	},
 	user :
 	{
+		profile_image	: "",
 		language	: navigator.language.substr(0,2),
 		conv_length	: 2,
 	},
 	rate :
 	{
-		auth		: 150,
-		ip			: 150,
+		auth		: 0,
+		ip			: 0,
 		auth_reset	: 0,
 		ip_reset	: 0,
 	}

diff --git a/scripts/timeline.js b/scripts/timeline.js
@@ -44,6 +44,28 @@ mbtweet.timeline =
 					auth		: true,
 					cache		: true,
 				},
+	following	:
+				{
+					name		: "Your Following",
+					timeline_id	: "following",
+					spare_api	: "https://api.twitter.com/1/statuses/friends.json",
+					api			: "https://twitter.com/statuses/friends.json",
+					interval	: 1800000,
+					cursor		: -1,
+					auth		: true,
+					cache		: true,
+				},
+	followwers	:
+				{
+					name		: "Your Followers",
+					timeline_id	: "followers",
+					spare_api	: "https://api.twitter.com/1/statuses/followers.json",
+					api			: "https://twitter.com/statuses/followers.json",
+					interval	: 1800000,
+					cursor		: -1,
+					auth		: true,
+					cache		: true,
+				},
 	rt_by_me	:
 				{
 					name		: "ReTweets by You",
@@ -185,6 +207,10 @@ timeline = function( preset )
 		this.spare_api		= mbtweet.timeline[preset].spare_api;
 		this.interval		= mbtweet.timeline[preset].interval;
 		this.count			= mbtweet.timeline[preset].count;
+		if( mbtweet.timeline[preset].cursor )
+		{
+			this.cursor		= mbtweet.timeline[preset].cursor;
+		}
 		this.auth			= mbtweet.timeline[preset].auth;
 		this.cache			= mbtweet.timeline[preset].cache;
 		if( preset == "search" )
@@ -396,8 +422,32 @@ timeline.prototype.create = function()
 	var timeline = document.createElement("DIV");
 		timeline.className = "timeline";
 		timeline.id = this.timeline_id;
+
+	var timeline_readmore = document.createElement("DIV");
+		timeline_readmore.className = "read-more";
+		timeline_readmore.innerText = "Load next page";
+		timeline_readmore.addEventListener(	"click",
+											function( event )
+											{
+												var cursor = event.target.cursor;
+												if( !event.shiftKey )
+												{
+													self.loadCursor( cursor );
+												}
+												else
+												{
+													event.target.timeline = self;
+													self.loadCursor( cursor , "eternal" );
+												}
+											},
+											false);
+	if( this.timeline_id.match(/^follow/) )
+	{
+		timeline.appendChild( timeline_readmore );
+	}
 	timeline_column.appendChild( timeline );
-		this.timeline = timeline;		
+
+	this.timeline = timeline;		
 
 	document.querySelector("#column").appendChild( timeline_column );
 
@@ -420,24 +470,58 @@ timeline.prototype.init = function()
 	var timeline_object = this.timeline;
 	eval( "initial" + this.timeline_id + "=function(data){initialTimeline(data,'" + this.timeline_id + "' , " + this.cache + ");delete this}" );
 
+	if( !this.cursor )
+	{
+		mbtweetOAuth.callAPI(	this.api ,
+								"GET",
+								[
+									["callback" , "initial" + this.timeline_id ],
+									["count" , this.count ],
+									["per_page" , this.count ],
+								],
+								{ auth	: this.auth }
+							);
+	}
+	else
+	{
+		mbtweetOAuth.callAPI(	this.api ,
+								"GET",
+								[
+									["callback" , "initial" + this.timeline_id ],
+									["cursor" , this.cursor ],
+								],
+								{ auth	: this.auth }
+							);	
+	}
+	var my_timeline = this;
+	setTimeout( function(){ count_api_rate( { auth : my_timeline.auth , main : false } ) } , 1000 );
+	setTimeout( function(){ my_timeline.update() } , this.interval );
+	return false;
+}
+
+timeline.prototype.loadCursor = function( cursor , option )
+{
+	var timeline_object = this.timeline;
+	eval( "initial" + this.timeline_id + "=function(data){initialTimeline(data,'" + this.timeline_id + "' , " + this.cache + ");delete this}" );
+
+	if( option == "eternal" )
+	{
+		eval( "initial" + this.timeline_id + "=function(data){initialTimeline(data,'" + this.timeline_id + "' , " + this.cache + ",'eternal');delete this}" );
+	}
 	mbtweetOAuth.callAPI(	this.api ,
 							"GET",
 							[
 								["callback" , "initial" + this.timeline_id ],
-								["count" , this.count ],
-								["per_page" , this.count ],
+								["cursor" , cursor ],
 							],
 							{ auth	: this.auth }
 						);
-	var my_timeline = this;
-	setTimeout( function(){ count_api_rate( { auth : my_timeline.auth , main : false } ) } , 1000 );
-	setTimeout( function(){ my_timeline.update() } , this.interval );
 	return false;
 }
 
 timeline.prototype.update = function()
 {
-	if( document.getElementById( this.timeline.id ) )
+	if( document.getElementById( this.timeline.id )  && !this.timeline_id.match(/^follow/) )
 	{
 		var timeline_object = this.timeline;
 		var since_id = timeline_object.querySelector(".entry").id.replace(/.+\-([0-9]+)$/ , "$1") + "";
@@ -540,13 +624,28 @@ timeline.prototype.close = function()
 initialTimeline = function( data , target_id , cache )
 {
 	var timeline = document.getElementById( target_id );
-	var insert_target = timeline.querySelector(".read.more");
+	var insert_target = timeline.querySelector(".read-more");
 
-	for( i = 0 ; i < data.length ; i++ )
+	if( !target_id.match(/^(following|followers)/) )
+	{
+		for( i = 0 ; i < data.length ; i++ )
+		{
+			create_tweet_element( data[i] , cache ).buildEntry( timeline );
+		}
+	}
+	else
 	{
-		create_tweet_element( data[i] , cache ).buildEntry( timeline );
+		cursor = data.next_cursor;
+		for( i = 0 ; i < data.users.length ; i++ )
+		{
+			create_user_element( data.users[i] , cache , cursor ).buildUserInfo( timeline , "insert" , insert_target );
+		}
+		if( arguments[3] == "eternal" && cursor != 0 )
+		{
+//			window.console.log( insert_target.timeline , cursor );
+			insert_target.timeline.loadCursor( cursor , "eternal" );
+		}
 	}
-
 }
 
 updateTimeline = function( data , target_id , cache )

diff --git a/scripts/tweet.js b/scripts/tweet.js
@@ -344,13 +344,9 @@ tweet.prototype.buildEntry = function( target , append_mode )
 		icon_wrapper.className = "icon_wrapper";
 	entry_wrapper.appendChild( icon_wrapper );
 
-
-//	var icon = document.createElement("IMG");
 	var icon = document.createElement("DIV");
 		icon.className = "icon";
-//		icon.src = this.user.profile_image_url;
 		icon.style.backgroundImage = "url(" + this.user.profile_image_url + ")";
-
 	icon_wrapper.appendChild( icon );
 
 	if( isRetweeted )
@@ -397,14 +393,15 @@ tweet.prototype.buildEntry = function( target , append_mode )
 		string.className = "status-text";
 
 	var linked_source = this.text;
-		linked_source = linked_source.replace( mbutil.isUrlRegexp		, "<a href='$1' target='_blank'>$1</a>$6");
-		linked_source = linked_source.replace( /([^\/]|^)(www\.[\w\d:#@%\/;$\(\)~_\?\+-=\\\.&]+\.[\w\d:#@%\/;$\(\)~_\?\+-=\\\.&]+)/g , "<a href='http://$2' target='_blank'>$2</a>" );
-		linked_source = linked_source.replace(/blank\'\>([^\<]{28})[^\<]+\<\/a/g, "blank'>$1...</a");
-		linked_source = linked_source.replace(/#((([^\s\(\)\\\!\@\#\$\%\^\&\+\=\;\:\"\'\|\<\>\,\.\~\?]|[0-9a-zA-Z_\-])+[0-9a-zA-Z_\-]+){1,16}([^0-9a-zA-Z_\-\'\"\>]|\s|$))/g ,"<a class='hashtag' href='" + window.location.protocol + "//twitter.com/search?q=%23$2' target='_blank'>#$2</a>$4");
-		linked_source = linked_source.replace(/[@＠]([0-9a-zA-Z\_\-]+\/[0-9a-zA-Z\_\-]+)/g,"@<a class='list' href='" + window.location.protocol + "//twitter.com/$1' target='_blank'>$1</a>");
-		linked_source = linked_source.replace(/[@＠]([0-9a-zA-Z\_\-]+)/g,"@<a class='sname' href='" + window.location.protocol + "//twitter.com/$1' target='_blank'>$1</a>");
-
-		string.innerHTML = linked_source.replace(/&amp;/g , "&amp;amp;");
+// 		linked_source = linked_source.replace( mbutil.isUrlRegexp		, "<a href='$1' target='_blank'>$1</a>$6");
+// 		linked_source = linked_source.replace( /([^\/]|^)(www\.[\w\d:#@%\/;$\(\)~_\?\+-=\\\.&]+\.[\w\d:#@%\/;$\(\)~_\?\+-=\\\.&]+)/g , "<a href='http://$2' target='_blank'>$2</a>" );
+// 		linked_source = linked_source.replace(/blank\'\>([^\<]{28})[^\<]+\<\/a/g, "blank'>$1...</a");
+// 		linked_source = linked_source.replace(/#((([^\s\(\)\\\!\@\#\$\%\^\&\+\=\;\:\"\'\|\<\>\,\.\~\?]|[0-9a-zA-Z_\-])+[0-9a-zA-Z_\-]+){1,16}([^0-9a-zA-Z_\-\'\"\>]|\s|$))/g ,"<a class='hashtag' href='" + window.location.protocol + "//twitter.com/search?q=%23$2' target='_blank'>#$2</a>$4");
+// 		linked_source = linked_source.replace(/[@＠]([0-9a-zA-Z\_\-]+\/[0-9a-zA-Z\_\-]+)/g,"@<a class='list' href='" + window.location.protocol + "//twitter.com/$1' target='_blank'>$1</a>");
+// 		linked_source = linked_source.replace(/[@＠]([0-9a-zA-Z\_\-]+)/g,"@<a class='sname' href='" + window.location.protocol + "//twitter.com/$1' target='_blank'>$1</a>");
+// 
+// 		string.innerHTML = linked_source.replace(/&amp;/g , "&amp;amp;");
+ 		string.innerHTML = anchor_HTML(linked_source);
 	status_string_wrapper.appendChild( string );
 
 	// open new user's timeline in mbtweet
@@ -539,6 +536,7 @@ tweet.prototype.buildEntry = function( target , append_mode )
 	}
 
 	status_wrapper.appendChild( meta );
+
 	status_wrapper.tweet = this;
 	status_wrapper.addEventListener(	"mouseover",
 											function( event )
@@ -928,7 +926,10 @@ function append_status( status_id , entry_wrapper , target , append_mode , optio
 
 				if( append_mode != "conv" )
 				{
-					addClass( entry_wrapper , "unread" );
+					if( !hasClass(entry_wrapper.nextElementSibling , "read-more") )
+					{
+						addClass( entry_wrapper , "unread" );
+					}
 					entry_wrapper.addEventListener( 
 						"click" ,
 						function( event ){

diff --git a/scripts/twitterapi_call.js b/scripts/twitterapi_call.js
@@ -60,6 +60,8 @@ formEncode_noOAuth = function formEncode( parameters ) {
 
 retreveMine = function(data)
 {
+	mbtweet.user.profile_image = data[0].user.profile_image_url;
+	document.querySelector(".dock .user-icon").src = mbtweet.user.profile_image;
 	for( i = 0 ; i < data.length ; i++ )
 	{
 		create_tweet_element( data[i] , true );