diff options
Diffstat (limited to 'example/tweeter')
| -rw-r--r-- | example/tweeter/style.css | 98 | ||||
| -rw-r--r-- | example/tweeter/tweeter_addressbook.html | 80 | ||||
| -rw-r--r-- | example/tweeter/tweeter_demo.html | 34 | ||||
| -rw-r--r-- | example/tweeter/tweeterclient.js | 36 |
4 files changed, 248 insertions, 0 deletions
diff --git a/example/tweeter/style.css b/example/tweeter/style.css new file mode 100644 index 00000000..e8468b6b --- /dev/null +++ b/example/tweeter/style.css @@ -0,0 +1,98 @@ +.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; +} + +.addressbook li { + font-size: .9em; +} + +.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; +} + +.debug{ + font-size: .7em; + white-space: pre; + padding: 0; + margin: 0; +}
\ 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..4844c035 --- /dev/null +++ b/example/tweeter/tweeter_addressbook.html @@ -0,0 +1,80 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> + <head> + <link rel="stylesheet" type="text/css" href="style.css"> + <link rel="stylesheet" type="text/css" href="../../css/angular.css"> + <script type="text/javascript" src="../../lib/underscore/underscore.js"></script> + <script type="text/javascript" src="../../lib/jquery/jquery-1.4.2.min.js"></script> + <script type="text/javascript" src="../../src/angular-bootstrap.js"></script> + <script type="text/javascript" src="tweeterclient.js"></script> + </head> + <body ng-class="status" ng-init="mute={}" ng-watch="$anchor.user: tweets = fetchTweets($anchor.user)"> + <div class="addressbook box"> + <h1>Address Book</h1> + [ Filter: <input type="text" name="userFilter"/>] + <ul> + <li ng-repeat="user in users.$filter(userFilter).$orderBy('screen_name')" ng-class-even="'even'" ng-class-odd="'odd'"> + <a href="" ng-click="$anchor.user=user.screen_name"><img src="{{user.profile_image_url}}"/></a> + <a href="" ng-click="$anchor.user=user.screen_name">{{user.screen_name}}</a> + as <span class="nickname">{{user.name}}</span> + [ <a href="#" ng-click="$anchor.edituser=user.screen_name">edit</a> + | <a href="#" ng-click="users.$remove(user)">X</a> + | <a href="#" ng-click="mute[user.screen_name] = ! mute[user.screen_name]">mute</a> + ] + <div class="notes">{{user.notes|linky}}</div> + <div class="clrleft"></div> + </li> + </ul> + <hr/> + <div ng-show="$anchor.edituser" ng-eval="user = users.$find({:$.screen_name == $anchor.edituser})"> + <div class="editor"> + <label>Username:</label> + <input type="text" name="user.screen_name" disabled="disabled"/> + <label>Name:</label> + <input type="text" name="user.name"/> + <label>Image:</label> + <input type="text" name="user.profile_image_url"/> + <label>Notes:</label> + <textarea type="text" name="user.notes"></textarea> + + <input type="button" ng-click="$anchor.edituser=undefined" value="Close"/> + </div> + </div> + <hr/> + <div class="debug"> +mute={{mute|json}} + +userFilter={{userFilter|json}} + +tweetFilter={{tweetFilter|json}} + +$anchor={{$anchor}} + +users={{users}} + +tweets={{tweets}} + </div> + </div> + <div class="tweeter box"> + <h1>Tweets: {{$anchor.user}}</h1> + [ Filter: <input type="text" name="tweetFilter"/> + <span ng-show="$anchor.user">| <a href="#user="><< All</a></span> + ] + <div class="loading">Loading...</div> + <ul> + <li ng-repeat="tweet in tweets.$filter(tweetFilter).$filter({:!mute[$.user.screen_name]})" + ng-class-even="'even'" ng-class-odd="'odd'" + ng-eval="user = users.$find({: $.screen_name == tweet.user.screen_name}) || tweet.user"> + <img src="{{user.profile_image_url}}"/> + [ <a href="" ng-click="$anchor.user=user.screen_name">{{user.nickname || user.name || user.screen_name }}</a> + | <a href="" ng-click="users.$includeIf(user, true)">+</a> + ]: + {{tweet.text | linky}} + <span class="notes">{{tweet.created_at}}</span> + <span class="notes">{{user.notes}}</span> + <div class="clrleft"></div> + </li> + </ul> + </div> + </body> +</html> diff --git a/example/tweeter/tweeter_demo.html b/example/tweeter/tweeter_demo.html new file mode 100644 index 00000000..138d4e2b --- /dev/null +++ b/example/tweeter/tweeter_demo.html @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> + <head> + <link rel="stylesheet" type="text/css" href="style.css"> + <link rel="stylesheet" type="text/css" href="../../css/angular.css"> + <script type="text/javascript" src="../../lib/underscore/underscore.js"></script> + <script type="text/javascript" src="../../lib/jquery/jquery-1.4.2.min.js"></script> + <script type="text/javascript" src="../../src/angular-bootstrap.js"></script> + <script type="text/javascript" src="tweeterclient.js"></script> + </head> + <body ng-class="status" Xng-init="tweets = fetchTweets()"> + (TODO: I should fetch current tweets) + <div class="tweeter box"> + <h1>Tweets: {{$anchor.user}}</h1> + [ Filter: <input type="text" name="tweetFilter"/> (TODO: this should act as search box) + <span ng-show="$anchor.user">| <a href="#user="><< All</a></span> + ] + <div class="loading">Loading...</div> + <ul> + <li Xng-repeat="tweet in tweets" + ng-class-even="'even'" ng-class-odd="'odd'"> + <img src="{{tweet.user.profile_image_url}}"/> + [ <a href="" Xng-click="$anchor.user=tweet.user.screen_name">{{tweet.user.nickname || tweet.user.name || tweet.user.screen_name }}</a> + ]: + {{tweet.text}} (TODO: I want urls as links) + <span class="notes">{{tweet.created_at}}</span> + <span class="notes">{{tweet.user.notes}}</span> + <div class="clrleft"></div> + </li> + </ul> + </div> + <pre>tweets=(TODO: display me!!!)</pre> + </body> +</html> diff --git a/example/tweeter/tweeterclient.js b/example/tweeter/tweeterclient.js new file mode 100644 index 00000000..84fc5ef7 --- /dev/null +++ b/example/tweeter/tweeterclient.js @@ -0,0 +1,36 @@ +function noop(){} +$(document).ready(function(){ + function xhr(method, url, data, callback){ + jQuery.getJSON(url, function(){ + callback.apply(this, arguments); + scope.updateView(); + }); + } + + var resourceFactory = new ResourceFactory(xhr); + + var Tweeter = resourceFactory.route("http://twitter.com/statuses/:service:username.json", {}, { + home: {method:'GET', params: {service:'home_timeline'}, isArray:true }, + user: {method:'GET', params: {service:'user_timeline/'}, isArray:true } + }); + + + var scope = window.scope = angular.compile(document, { + location:angular.startUrlWatcher() + }); + + function fetchTweets(username){ + return username ? Tweeter.user({username: username}) : Tweeter.home(); + } + + scope.set('fetchTweets', fetchTweets); + scope.set('users', [ + {screen_name:'mhevery', name:'Mi\u0161ko Hevery', + notes:'Author of <angular/> http://www.getangular.com.', + profile_image_url:'http://a3.twimg.com/profile_images/54360179/Me_-_Small_Banner_normal.jpg'}, + {screen_name:'abrons', name:'Adam Abrons', + notes:'Author of <angular/> & Ruby guru see: http://www.angularjs.org.', + profile_image_url:'http://media.linkedin.com/mpr/mpr/shrink_80_80/p/2/000/005/0a8/044278d.jpg'} + ]); + scope.init(); +}); |