fix code indentation display, added example of radio usage

Author: zbyte64

lesson2.html

@@ -9,8 +9,31 @@
         <script src="lib/prism.js"></script>
         <script src="lib/JSXTransformer.js"></script>
         <script id="sourceView">
+function fixExtraIndent(content) {
+  function countspace(line) {
+    var r = line.match(/^\s*/);
+    if (!r) return 0;
+    return r[0].length;
+  }
+
+  var lines = content.split(/\n/);
+  var returnlines = []
+  var guttersize = null;
+  _.each(lines, function(line) {
+    if (guttersize == null) {
+      var gspace = countspace(line)
+      if (gspace == line.length) {
+        return;
+      } else {
+        guttersize = gspace;
+      }
+    }
+    returnlines.push(line.substr(guttersize));
+  });
+  return returnlines.join("\n");
+}
+
 var SourceCode = React.createClass({
-  //define our prop/attribute types
   propTypes: {
     sourceId: React.PropTypes.string,
     language: React.PropTypes.string,
@@ -23,19 +46,18 @@
   },
   getInitialState: function() {
     return {
-      source: document.getElementById(this.props.sourceId).innerHTML
+      source: fixExtraIndent(document.getElementById(this.props.sourceId).innerHTML)
     };
   },
-  //refresh Prism on state change
   componentDidMount: function() {
     Prism.highlightElement(this.refs.source.getDOMNode());
   },
   componentDidUpdate: function() {
     Prism.highlightElement(this.refs.source.getDOMNode());
   },
   refreshCode: function() {
-    if (!this.props.liveEdit) return;
     var code = this.refs.source.getDOMNode().innerText;
+    if (!code) return;
     try {
       var result = JSXTransformer.transform(code)
       var jscode = result['code']
@@ -56,14 +78,11 @@
         ref: "source"}, this.state.source));
   }
 });
-window.SourceCode = SourceCode;
 
 (function(d, w){
   window.addEventListener("load", function() {
-    //Register our own jsx language
     Prism.languages.jsx = _.merge({}, Prism.languages.javascript, Prism.languages.markup);
 
-    //mount SourceCode for each element with class of sourceCode
     _.each(d.querySelectorAll(".sourceCode"), function(el) {
       React.renderComponent(SourceCode({sourceId: el.dataset.source,
                                         language: el.dataset.language,
@@ -158,18 +177,17 @@
                   newItems.splice(number, 1);
                   this.setState({items: newItems});
               },
+              renderItem: function(item, index) {
+                  return <li key={index}>
+                           {item}
+                           {/*bind callback to the index of this item*/}
+                           <button onClick={this.remove.bind(this, index)}>Remove</button>
+                         </li>
+              },
               render: function() {
-                  //keep this object around since we will be rendering in an anonymous function
-                  var self = this;
                   return <div>
                       <ul>
-                            {_.map(this.state.items,  function(item, number) {
-                                return <li key={number}>
-                                {item}
-                                {/*bind callback to the index of this item*/}
-                                <button onClick={self.remove.bind(self, number)}>Remove</button>
-                                </li>
-                            })}
+                            {_.map(this.state.items,  this.renderItem)}
                         </ul>
                         <fieldset><input ref="newItem" type="text"/></fieldset>
                         <button onClick={this.add}>Add</button>
@@ -192,7 +210,6 @@ <h1>Rendering a List</h1>
                         <li>Use "map" to iterate over items and emit virtual DOM</li>
                         <li>Specify "key" attribute to distinguish each item in the virtual DOM</li>
                         <li>Construct the DOM in the order that it will be rendered</li>
-                        <li>Define other render methods to keep the main render function simple</li>
                     </ul>
                     <div class="result" id="renderList"></div>
                 </div>
@@ -223,6 +240,7 @@ <h1>Binding data to callbacks</h1>
                     <ul>
                         <li>function.bind(this, arg1, arg2, ...)</li>
                         <li>embed callback data from the rendering cycle to the callback</li>
+                        <li>Define other render methods to keep the main render function simple</li>
                     </ul>
                     <div class="result" id="todoList"></div>
                 </div>

lesson3.html

@@ -1,26 +1,77 @@
 <html>
     <head>
-        <title>Syntax, Componets, Properties, State, Events</title>
+        <title>Messages, Ajax &amp; Routes</title>
         <link href="lib/bootstrap.css" rel="stylesheet" />
         <link href="lib/prism.css" rel="stylesheet" />
         <link href="lib/style.css" rel="stylesheet" type="text/css" media="all" />
         <script src="lib/lodash.min.js"></script>
+        <script src="lib/radio.min.js"></script>
         <script src="lib/react.js"></script>
         <script src="lib/prism.js"></script>
         <script src="lib/JSXTransformer.js"></script>
         <script src="lib/sourceview.js"></script>
         <script type="text/jsx" id="useMessageSource">
           /** @jsx React.DOM */
-          var UberTag = React.createClass({
+          var ChatWindow = React.createClass({
+              getInitialState: function() {
+                  return {
+                      messages: this.props.messages || []
+                  }
+              },
+              componentWillMount: function() {
+                  radio(this.props.channel + ".message.received").subscribe(this.receiveMessage);
+              },
+              componentWillUnmount: function() {
+                  radio(this.props.channel + ".message.received").unsubscribe(this.receiveMessage);
+              },
+              receiveMessage: function(message) {
+                  var messages = this.state.messages;
+                  messages.push(message);
+                  this.setState({messages: messages})
+              },
+              renderMessage: function(message) {
+                  return <li key={message.id}>{message.message}</li>
+              },
+              sendMessage: function(event) {
+                  var input = this.refs.input;
+                  radio(this.props.channel + ".message.send").broadcast({message: input.state.value});
+                  input.setState({value: ""});
+              },
               render: function() {
-                  return <h3>{this.props.children}</h3>;
+                  return <div>
+                      <h3>Chat Connection</h3>
+                      <ol>
+                        {_.map(this.state.messages, this.renderMessage)}
+                      </ol>
+                      <fieldset>
+                          <input ref="input" type="text"/>
+                          <button onClick={this.sendMessage}>Send</button>
+                      </fieldset>
+                    </div>;
               }
           });
 
+          var ChatConnection = function(channel) {
+              function send(msg) {
+                radio(channel + ".message.received").broadcast({
+                    message: msg,
+                    id: _.uniqueId()
+                });
+              }
+
+              radio(channel + ".message.send").subscribe(function(data) {
+                  send(data.message);
+              });
+
+              send("[Client] Connection established")
+          };
+
+
           React.renderComponent(
-            <UberTag>Hello World</UberTag>,
+            <ChatWindow channel="chat">Hello World</ChatWindow>,
             document.getElementById('useMessage')
           );
+          ChatConnection("chat")
         </script>
         <script type="text/jsx" id="ajaxSource">
           /** @jsx React.DOM */
@@ -85,7 +136,7 @@ <h1>Messages</h1>
                     <div class="result" id="useMessage"></div>
                 </div>
                 <div class="col-sm-8">
-                    <div class="sourceCode" data-source="useMessageSource"></div>
+                    <div class="sourceCode" data-source="useMessageSource" data-edit="true"></div>
                 </div>
             </div>
         </section>

lib/radio.min.js

@@ -1,6 +1,25 @@
 function fixExtraIndent(content) {
-  var lines = content.split(/\n/);
+  function countspace(line) {
+    var r = line.match(/^\s*/);
+    if (!r) return 0;
+    return r[0].length;
+  }
 
+  var lines = content.split(/\n/);
+  var returnlines = []
+  var guttersize = null;
+  _.each(lines, function(line) {
+    if (guttersize == null) {
+      var gspace = countspace(line)
+      if (gspace == line.length) {
+        return;
+      } else {
+        guttersize = gspace;
+      }
+    }
+    returnlines.push(line.substr(guttersize));
+  });
+  return returnlines.join("\n");
 }
 
 var SourceCode = React.createClass({
@@ -16,7 +35,7 @@ var SourceCode = React.createClass({
   },
   getInitialState: function() {
     return {
-      source: document.getElementById(this.props.sourceId).innerHTML
+      source: fixExtraIndent(document.getElementById(this.props.sourceId).innerHTML)
     };
   },
   componentDidMount: function() {
@@ -27,6 +46,7 @@ var SourceCode = React.createClass({
   },
   refreshCode: function() {
     var code = this.refs.source.getDOMNode().innerText;
+    if (!code) return;
     try {
       var result = JSXTransformer.transform(code)
       var jscode = result['code']
@@ -47,7 +67,6 @@ var SourceCode = React.createClass({
         ref: "source"}, this.state.source));
   }
 });
-window.SourceCode = SourceCode;
 
 (function(d, w){
   window.addEventListener("load", function() {