From 0e566fe6cb41de388df6793b350fb81aaa4a8476 Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Mon, 18 Jan 2010 17:56:08 -0800 Subject: tweeter demo client --- example/business_card.html | 50 ------------------ example/tweeter/style.css | 87 ++++++++++++++++++++++++++++++++ example/tweeter/tweeter_addressbook.html | 64 +++++++++++++++++++++++ example/tweeter/tweeterclient.js | 35 +++++++++++++ 4 files changed, 186 insertions(+), 50 deletions(-) delete mode 100644 example/business_card.html create mode 100644 example/tweeter/style.css create mode 100644 example/tweeter/tweeter_addressbook.html create mode 100644 example/tweeter/tweeterclient.js (limited to 'example') diff --git a/example/business_card.html b/example/business_card.html deleted file mode 100644 index cc45529f..00000000 --- a/example/business_card.html +++ /dev/null @@ -1,50 +0,0 @@ - - - - - - - - - - -
- Fetch tweets for: - - -

[{{tweet.user.screen_name}}]: {{tweet.text}}

- - diff --git a/example/tweeter/style.css b/example/tweeter/style.css new file mode 100644 index 00000000..769a6f45 --- /dev/null +++ b/example/tweeter/style.css @@ -0,0 +1,87 @@ +.loading {display: none;} +.fetching .loading {display: block;} + +a { + color: blue; +} + +h1 { + background-color: black; + margin: 0; + padding: .25em; + color: white; + border-bottom: 5px solid gray; +} + +.box { + border: 2px solid gray; +} + +.tweeter { + margin-right: 360px; +} + +ul { + list-style: none; + margin: 0; + padding: 0; +} + +li { + margin: .25em; + padding: 2px; +} + +li img { + float: left; + margin: 2px; + margin-right: .5em; + max-height: 48px; + min-height: 48px; +} + +li.even { + background-color: lightgray; +} + + +.addressbook { + float: right; + width: 350px; +} + +.clrleft { + clear: left; +} + +.notes { + font-size: .8em; + color: gray; +} + +.username, .nickname { + font-weight: bold; +} + +.editor { + padding: 4px; +} + +label { + color: gray; + display: inline-block; + width: 75px; + text-align: right; + padding: 2px; + margin-top: 10px; +} + +.editor input[type=text], +.editor textarea { + width: 230px; + vertical-align: text-top; +} + +.editor TEXTAREA { + height: 50px; +} \ No newline at end of file diff --git a/example/tweeter/tweeter_addressbook.html b/example/tweeter/tweeter_addressbook.html new file mode 100644 index 00000000..d8b8b893 --- /dev/null +++ b/example/tweeter/tweeter_addressbook.html @@ -0,0 +1,64 @@ + + + + + + + + + + + +

Address Book

+ [ Filter: ] +

+ + {{user.screen_name}} + as {{user.name}} + [ edit + | X + ] +
{{user.notes}}
+
+

+ Username: + + Name: + + Image: + + Notes: + + + +

Tweets: {{$anchor.user}}

+ [ Filter: + | << All + ] +

+ + [ {{user.nickname || user.name || user.screen_name }} + | + + ]: + {{tweet.text | linky}} + {{tweet.created_at}} + {{user.notes}} +
+

+ + diff --git a/example/tweeter/tweeterclient.js b/example/tweeter/tweeterclient.js new file mode 100644 index 00000000..27ec3348 --- /dev/null +++ b/example/tweeter/tweeterclient.js @@ -0,0 +1,35 @@ +function noop(){} +$(document).ready(function(){ + var scope = window.scope = angular.compile(document); + scope.getJSON = function(url, callback) { + var list = []; + var self = this; + self.set('status', 'fetching'); + $.getJSON(url, function(response){ + _(response).forEach(function(v,k){ + list[k] = v; + }); + (callback||noop)(response); + self.set('status', ''); + self.updateView(); + }); + return list; + }; + + function fetchTweets(username){ + return scope.getJSON( + username ? + "http://twitter.com/statuses/user_timeline/"+username+".json" : + "http://twitter.com/statuses/home_timeline.json"); + } + + scope.set('fetchTweets', fetchTweets); + scope.set('users', [ + {screen_name:'mhevery', name:'Mi\u0161ko Hevery', notes:'Author of .', + profile_image_url:'http://a3.twimg.com/profile_images/54360179/Me_-_Small_Banner_normal.jpg'}, + {screen_name:'abrons', name:'Adam Abrons', notes:'Author of & Ruby guru.', + profile_image_url:'http://a1.twimg.com/profile_images/533646480/PIC00024_normal.jpg'} + ]); + scope.watchUrl(); + scope.init(); +}); -- cgit v1.2.3