Skip to content
Browse files

changes to match modularization refactor in sail.js

  • Loading branch information...
1 parent 9a303a1 commit 0767ceaf16aa2d3102b39873e5430d36e7c3cc3e @zuk zuk committed Jul 20, 2011
Showing with 64 additions and 36 deletions.
  1. +3 −0 css/myapp.css
  2. +8 −10 index.html
  3. +52 −25 js/myapp.js
  4. +1 −1 js/sail.js
View
3 css/myapp.css
@@ -17,6 +17,7 @@
#hello-world {
font-size: 2.5em;
margin: 10%;
+ margin-bottom: 1em;
text-align: center;
font-family: Georgia, serif;
color: #00b;
@@ -28,10 +29,12 @@
#welcome {
font-size: 2.5em;
margin: 10%;
+ margin-top: 0;
text-align: center;
font-family: Georgia, serif;
color: #00b;
font-weight: bold;
color: white;
padding: 10px;
+ background: #060;
}
View
18 index.html
@@ -10,20 +10,18 @@
<link href="js/sail.js/css/sail.css" rel="stylesheet" type="text/css" />
<script src="js/sail.js/sail.js" type="text/javascript"></script>
+
<script type="text/javascript">
Sail.load()
+ .then('js/sail.js/rollcall.js')
.then('js/myapp.js')
- .thenRun(function() {
- Sail.UI.init()
- MyApp.init()
- })
+ .thenRun(function() { return Sail.init(MyApp) })
</script>
</head>
-<body>
-
- <header>
- <h1>Hello World!</h1>
- </header>
+<body>
+ <header>
+ <h1>Hello World!</h1>
+ </header>
<div id="connecting">
<img src="loader.gif" />
@@ -41,6 +39,6 @@
<footer>
</footer>
-
+
</body>
</html>
View
77 js/myapp.js
@@ -12,34 +12,52 @@
MyApp = {
xmppDomain: 'proto.encorelab.org',
groupchatRoom: 's3@conference.proto.encorelab.org',
+ rollcallURL: 'http://rollcall.proto.encorelab.org',
+ //rollcallURL: 'http://localhost:3000',
+ //rollcallURL: 'http://localhost:8000/rollcall',
// this is called in index.html
init: function() {
console.log("Initializing...")
- // enable's simple username-password authentication
- Sail.enable(MyApp, 'simple-auth')
-
- // takes care of event-binding magic... don't touch
- Sail.autobindEvents(MyApp)
-
- MyApp.authenticate()
+ Sail.modules
+ .load('Strophe.AutoConnector')
+ .load('Rollcall.LoginPicker')
+ .load('AuthIndicator')
+ .thenRun(function () {
+ // takes care of event-binding magic... don't touch this
+ Sail.autobindEvents(MyApp)
+
+ console.log("Initialized.")
+ $(Sail.app).trigger('initialized')
+ return true
+ })
},
authenticate: function() {
console.log("Authenticating...")
- MyApp.username = prompt("Enter your username:")
-
- MyApp.password = prompt("Enter your password:")
- MyApp.session = {
- account: {
- login: MyApp.username,
- password: MyApp.password
- }
+ // Note that we use Rollcall for authentication here.
+ // See: https://github.com/educoder/rollcall
+
+ MyApp.rollcall = new Rollcall.Client(MyApp.rollcallURL)
+ MyApp.token = MyApp.rollcall.getCurrentToken()
+
+ if (!MyApp.token) {
+ Rollcall.LoginPicker.showUserSelector()
+ } else {
+ MyApp.rollcall.fetchSessionForToken(MyApp.token, function(data) {
+ MyApp.session = data.session
+ $(MyApp).trigger('authenticated')
+ })
}
-
- $(MyApp).trigger('authenticated')
+ },
+
+ unauthenticate: function() {
+ MyApp.rollcall.destroySessionForToken(MyApp.rollcall.getCurrentToken(), function() {
+ MyApp.rollcall.unsetToken()
+ $(MyApp).trigger('unauthenticated')
+ })
},
events: {
@@ -49,7 +67,7 @@ MyApp = {
--> add additional XMPP-based event handlers for your app here
*/
- // triggered via sail (XMPP) event generated in onSelfJoined...
+ // triggered via sail (XMPP) event generated in selfJoined...
// this intercepts an event in XMPP groupchat that looks like this:
//
// {"eventType":"here","payload":{"who":"test1"}}
@@ -72,9 +90,9 @@ MyApp = {
// another way to respond to sail events it to map them onto local events.
// the following code would cause the 'foo' sail event to trigger the local
- // 'foobar' event -- you would also set up an 'onFoobar' event handler
+ // 'foobar' event -- you would also set up an 'foobar' event handler
// further down (under the events hash, outside of events.sail);
- // in this case the onFoobar event handler would receive two arguments:
+ // in this case the foobar event handler would receive two arguments:
// a standard javascript event (`ev`) and the sail event (`sev`)
foo: 'foobar'
},
@@ -85,10 +103,14 @@ MyApp = {
--> add additional local event handlers for your app here
*/
+ initialized: function(ev) {
+ MyApp.authenticate()
+ },
+
// this is triggered by $(MyApp).trigger('connected')
// in sail.js after the user passes authentication and
// connects to the XMPP server
- onConnected: function(ev) {
+ connected: function(ev) {
$('#username').text(session.account.login)
$('#connecting').hide()
@@ -97,25 +119,30 @@ MyApp = {
// this is triggered by $(MyApp).trigger('selfJoined')
// in sail.js after the user joins the groupchat (after 'connected')
- onSelfJoined: function(ev) {
+ selfJoined: function(ev) {
// example of how to trigger a sail event
// note that this will be handled by event.sail.here (further up in this file)
- sev = new Sail.Event('here', {who: MyApp.username})
+ sev = new Sail.Event('here', {who: MyApp.session.account.login})
MyApp.groupchat.sendEvent(sev)
},
// this would be triggered by $(MyApp).trigger('anotherLocalEvent')
- onAnotherLocalEvent: function(ev) {
+ anotherLocalEvent: function(ev) {
},
// sail event mapped to local event -- see the explenation above for "foo: 'foobar'".
// `ev` is a standard javascript event object (for the most part you can probably just
// ignore this, as it doesn't contain much useful data); `sev` is the sail event object,
// with the typical sail event fiels like `sev.eventType` and `sev.payload`.
- onFoobar: function(ev, sev) {
+ foobar: function(ev, sev) {
+ },
+
+ // triggered in MyApp.unauthenticate once the user has been unauthenticated
+ unauthenticated: function(ev) {
+ document.location.reload()
}
}
}
2 js/sail.js
@@ -1 +1 @@
-Subproject commit 864d48cd0d968a91ae7b28e6b2b53a59aff7f966
+Subproject commit 55afc623f84d866bc91462d128f96491245ae14e

0 comments on commit 0767cea

Please sign in to comment.
Something went wrong with that request. Please try again.