tweeter demo client

author: Misko Hevery 2010-01-18 17:56:08 -0800
committer: Misko Hevery 2010-01-18 17:56:08 -0800
commit: 0e566fe6cb41de388df6793b350fb81aaa4a8476 (patch)
tree: dc526a2a5de174f820ef375ffcdb45e32de9cda7 /example/tweeter
parent: 7b558b5382c864b00392f50fa5095e53f7b486d0 (diff)
download: angular.js-0e566fe6cb41de388df6793b350fb81aaa4a8476.tar.bz2
3 files changed, 186 insertions, 0 deletions
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 @@
+<!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.3.2.js"></script>
+    <script type="text/javascript" src="../../angular.js"></script>
+    <script type="text/javascript" src="tweeterclient.js"></script>
+  </head>
+  <body ng-class="status" 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-action="$anchor.user=user.screen_name"><img src="{{user.profile_image_url}}"/></a>
+          <a href="" ng-action="$anchor.user=user.screen_name">{{user.screen_name}}</a> 
+          as <span class="nickname">{{user.name}}</span>
+          [ <a href="#" ng-action="$anchor.edituser=user.screen_name">edit</a>
+          | <a href="#" ng-action="users.$remove(user)">X</a>
+          ]
+          <div class="notes">{{user.notes}}</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-action="$anchor.edituser=undefined" value="Close"/> 
+        </div>
+      </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=">&lt;&lt; All</a></span>
+      ]
+      <div class="loading">Loading...</div>
+      <ul>
+       <li ng-repeat="tweet in tweets.$filter(tweetFilter)" 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-action="$anchor.user=user.screen_name">{{user.nickname || user.name || user.screen_name }}</a>
+         | <a href="" ng-action="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/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 <angular/>.', 
+        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.', 
+        profile_image_url:'http://a1.twimg.com/profile_images/533646480/PIC00024_normal.jpg'}
+    ]);
+  scope.watchUrl();
+  scope.init();
+});
author	Misko Hevery	2010-01-18 17:56:08 -0800
committer	Misko Hevery	2010-01-18 17:56:08 -0800
commit	0e566fe6cb41de388df6793b350fb81aaa4a8476 (patch)
tree	dc526a2a5de174f820ef375ffcdb45e32de9cda7 /example/tweeter
parent	7b558b5382c864b00392f50fa5095e53f7b486d0 (diff)
download	angular.js-0e566fe6cb41de388df6793b350fb81aaa4a8476.tar.bz2