nlacasse · January 19, 2012 01:54
diff --git a/htmlindex.html b/htmlindex.html
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>CHAT</title>

  <script src="/javascripts/lib/jquery.js"></script>
  <script src="/javascripts/lib/jquery.scrollto.js"></script>
  <script src="/javascripts/lib/jquery.spire.bundle.js"></script>

  <script src="/javascripts/application.js"></script>
 </head>

 <body>
  <!-- more here later -->
 </body>
 </html>
diff --git a/htmlinterface-elements-with-overlay.html b/htmlinterface-elements-with-overlay.html
 <div class="overlay">
  <form action="#" method="post">
    <input type="text" name="nick" placeholder="Name" />

    <input type="submit" value="Join &rarr;">
  </form>
 </div>

 <div class="messages"></div>

 <footer>
  <form action="#" method="post">
    <input type="text" name="content" />
  </form>
 </footer>
diff --git a/htmlinterface-elements.html b/htmlinterface-elements.html
 <div class="messages"></div>

 <footer>
  <form action="#" method="post">
    <input type="text" name="content" />
  </form>
 </footer>
diff --git a/htmlmessage-template.mustache b/htmlmessage-template.mustache
 <script id="message" type="text/html">
  <div class="message {{ type }}" id="{{ cssID }}">
    <time datetime="{{ time }}">{{ humanTime }}</time>

    <span class="name {{#isYou}} current-user {{/isYou}}">
      {{ author }}:
    </span>

    <span class="body">{{ content }}</span>
  </div>
 </script>

 <script src="/javascripts/lib/icanhaz.js"></script
diff --git a/javascriptsaccount-key.js b/javascriptsaccount-key.js
 spire.options.key = '<your account key>';
diff --git a/javascriptsjoin-chat-form-submission.js b/javascriptsjoin-chat-form-submission.js
 $('.overlay form').submit(function(event){
  event.stopPropagation();
  event.preventDefault();

  var form = this
    , nick = $(form).find('input[name="nick"]').val() || 'Anonymous'
    , message
  ;

  // keep track of who you are for later, this will allow us to check if the
  // person chatting is mentioned in another person's message.
  window.currentUser = nick;

  message = { channel: 'spire.io chat example'
    , content: { type: 'system'
      , body: 'joined'
      , author: nick
      }
  };

  // Send the message above, once it's sent trigger the passed in callback.
  spire.messages.publish(message, function(err, message){
    if (err) throw err; // really, you could do better

    // Hide the overlay with the initial form.
    $('.overlay').hide();

    // Focus the input in the footer for a smoother User Experience.
    $('footer form input').focus();
  });
 });
diff --git a/javascriptsnew-application.js b/javascriptsnew-application.js
 $(document).ready(function(){
  // The rest of the javascript will go here
 });
diff --git a/javascriptsnew-message-submission.js b/javascriptsnew-message-submission.js
 $('footer form').submit(function(event){
  event.stopPropagation();
  event.preventDefault();

  var form = this
    , message = { channel: 'spire.io chat example'
      , content: { author: currentUser
        , body: $(form).find('input[name="content"]').val()
        }
    };

  // No message content? don't do anything.
  if (! message.content.body) return;

  // Send the message constructed above, once the message is sent the
  // `callback` will remove the submitted text and re-focus the input
  spire.messages.publish(message, function(err, message){
    if (err) throw err;

    $(form).find('input').val('').focus();
  });
 });
diff --git a/javascriptsrequire-spire.js b/javascriptsrequire-spire.js
 var spire = require('./spire.io.js');
diff --git a/javascriptssubscribe.js b/javascriptssubscribe.js
 spire.messages.subscribe('spire.io chat example', function(err, messages){
  if (err) throw err; // you can do better...

  $(messages).each(function(i, message){
    var date = new Date(message.timestamp)
      , element
    ;

    // Add some helpers to the message object so the template
    // can add some style hooks (classes).
    message.content.isYou = message.author === currentUser;
    message.content.cssID = 'message-' + message.id;
    message.content.humanTime = [ date.getHours()
    , ':'
    , ('0' + date.getMinutes()).slice(-2)
    ].join('');

    element = $(ich.message(message.content));

    $('.messages')
      .append(element)
      .scrollTo(element);
  });
 });
diff --git a/message-template.mustache b/message-template.mustache
 <script id="message" type="text/html">
  <div class="message {{ type }}" id="{{ cssID }}">
    <time datetime="{{ time }}">{{ humanTime }}</time>

    <span class="name {{#isYou}} current-user {{/isYou}}">
      {{ author }}:
    </span>

    <span class="body">{{ content }}</span>
  </div>
 </script>

 <script src="/javascripts/lib/icanhaz.js"></script
diff --git a/require-spire.js b/require-spire.js
 var spire = require('./spire.io.js');
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>CHAT</title>

	<script src="/javascripts/lib/jquery.js"></script>
	<script src="/javascripts/lib/jquery.scrollto.js"></script>
	<script src="/javascripts/lib/jquery.spire.bundle.js"></script>

	<script src="/javascripts/application.js"></script>
	</head>

	<body>
	<!-- more here later -->
	</body>
	</html>
	<div class="overlay">
	<form action="#" method="post">
	<input type="text" name="nick" placeholder="Name" />

	<input type="submit" value="Join →">
	</form>
	</div>

	<div class="messages"></div>

	<footer>
	<form action="#" method="post">
	<input type="text" name="content" />
	</form>
	</footer>
	<script id="message" type="text/html">
	<div class="message {{ type }}" id="{{ cssID }}">
	<time datetime="{{ time }}">{{ humanTime }}</time>

	<span class="name {{#isYou}} current-user {{/isYou}}">
	{{ author }}:
	</span>

	<span class="body">{{ content }}</span>
	</div>
	</script>

	<script src="/javascripts/lib/icanhaz.js"></script
	$('.overlay form').submit(function(event){
	event.stopPropagation();
	event.preventDefault();

	var form = this
	, nick = $(form).find('input[name="nick"]').val() \|\| 'Anonymous'
	, message
	;

	// keep track of who you are for later, this will allow us to check if the
	// person chatting is mentioned in another person's message.
	window.currentUser = nick;

	message = { channel: 'spire.io chat example'
	, content: { type: 'system'
	, body: 'joined'
	, author: nick
	}
	};

	// Send the message above, once it's sent trigger the passed in callback.
	spire.messages.publish(message, function(err, message){
	if (err) throw err; // really, you could do better

	// Hide the overlay with the initial form.
	$('.overlay').hide();

	// Focus the input in the footer for a smoother User Experience.
	$('footer form input').focus();
	});
	});
	$(document).ready(function(){
	// The rest of the javascript will go here
	});
	$('footer form').submit(function(event){
	event.stopPropagation();
	event.preventDefault();

	var form = this
	, message = { channel: 'spire.io chat example'
	, content: { author: currentUser
	, body: $(form).find('input[name="content"]').val()
	}
	};

	// No message content? don't do anything.
	if (! message.content.body) return;

	// Send the message constructed above, once the message is sent the
	// `callback` will remove the submitted text and re-focus the input
	spire.messages.publish(message, function(err, message){
	if (err) throw err;

	$(form).find('input').val('').focus();
	});
	});
	spire.messages.subscribe('spire.io chat example', function(err, messages){
	if (err) throw err; // you can do better...

	$(messages).each(function(i, message){
	var date = new Date(message.timestamp)
	, element
	;

	// Add some helpers to the message object so the template
	// can add some style hooks (classes).
	message.content.isYou = message.author === currentUser;
	message.content.cssID = 'message-' + message.id;
	message.content.humanTime = [ date.getHours()
	, ':'
	, ('0' + date.getMinutes()).slice(-2)
	].join('');

	element = $(ich.message(message.content));

	$('.messages')
	.append(element)
	.scrollTo(element);
	});
	});