Permalink
Browse files

Update examples and remove some old ones

  • Loading branch information...
1 parent ef0b1aa commit d164f270b566847b4aa006433789fbe4bcf349f6 @marcuswestin committed Mar 4, 2012
View
@@ -1,20 +1,22 @@
-#import WebSocket
-let messages = []
+"We should make this example work :)"
-WebSocket.on('message', handler(message) { messages.push(message) })
-
-<div class="chat">
- let input = ""
- <input data=input />
- <button>"Send"</button onClick=handler() {
- let message = { body:input }
- input.set('')
- WebSocket.send('message', message)
- messages.push(message)
- }>
- <div class="messages">
- for (message in messages) {
- <div class="message"> message.body </div>
- }
- </div>
-</div>
+// #import WebSocket
+// let messages = []
+//
+// WebSocket.on('message', handler(message) { messages.push(message) })
+//
+// <div class="chat">
+// let input = ""
+// <input data=input />
+// <button>"Send"</button onClick=handler() {
+// let message = { body:input }
+// input.set('')
+// WebSocket.send('message', message)
+// messages.push(message)
+// }>
+// <div class="messages">
+// for (message in messages) {
+// <div class="message"> message.body </div>
+// }
+// </div>
+// </div>
View
@@ -1,24 +0,0 @@
-body, html { font-family: Helvetica, sans-serif; font-size: 14px; color: #555;
- background: #f2f8ff; overflow: hidden; }
-
-.chat { margin-bottom: 20px; }
-
-.title { font-size: 20px; }
-
-.rooms { width: 200px; float: left; }
-.rooms .room { margin: 8px 0 8px 10px; }
-.rooms .room .name { font-size: 16px; }
-
-input { margin: 5px; width: 200px; padding: 5px;
- border: 1px solid #649fd8; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
-
-.newRoom input { width: 100px; }
-
-.user { margin-top: 10px; }
-.user input { width: 100px; }
-
-.messages { margin-left: 200px; }
-.message { margin: 4px; padding: 5px; background: #fff;
- border: 1px solid #a4c9eb; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
-
-.messageInput { width: 330px; margin-bottom: 20px; }
View
@@ -1,68 +0,0 @@
-import Local
-import Global
-
-// Chatrooms app templates
-let templates = {
-
- // List all the rooms
- roomsList: template() {
- <h1>"Rooms"</h1>
- for (room in Global.rooms) {
- <div class="room" style={ cursor:'pointer' }>
- <span class="name"> room.name </span onclick=handler() {
- Local.currentRoom.set(room)
- }>
- if (room == Local.currentRoom) { <span class="currentRoomArrow">" --> "</span> }
- </div>
- }
- },
-
- // Render controls for creating a new room: an input field for the room name, and a button to create it
- newRoomControls: template() {
- <div class="newRoom">
- <input data=Local.newRoomName /><br />
- <button>"Create new room"</button onclick=handler() {
- let newRoom = new { name:Local.newRoomName, messages:[] }
- Global.rooms.unshift(newRoom)
- Local.newRoomName.set('')
- }>
- </div>
- },
-
- // Render the currently selected chatroom
- renderCurrentRoom: template() {
- <div class="currentChatroom">
- <h2> Local.currentRoom.name </h2>
- <div class="chat">
- "username" <input data=Local.username />
- <br />"message" <input data=Local.messageText />
- <button>"Send"</button onclick=handler() {
- let newMessage = new { sender: Local.username, text: Local.messageText }
- Local.messageText.set('')
- Local.currentRoom.messages.unshift(newMessage)
- }>
- </div>
-
- <div class="messages">
- for (message in Local.currentRoom.messages) {
- message.sender ": " <input class="message" data=message.text style={ width: 350 }/>
- <br />
- }
- </div>
- </div>
- },
-}
-
-// Start application
-////////////////////
-<link rel="stylesheet" href="examples/chatrooms.css" />
-
-<div class="rooms">
- templates.roomsList()
- templates.newRoomControls()
-</div>
-
-if (Local.currentRoom) {
- // TODO Pass in Local.currentRoom and rename template to renderRoom
- templates.renderCurrentRoom()
-}
@@ -1,60 +1,19 @@
-import Local
-import Global
import mouse
-"Global.x:" <input data=Global.x dataType="number" style={ display:'block' }/>
-"Global.y:" <input data=Global.y dataType="number" style={ display:'block' }/>
-
-let five = 5,
- two = 2,
- greeting = "hello ",
- name = "world"
-
-<table>
- <tr>
- <th>"Global.x + Global.y"</th>
- Global.x + Global.y
- </tr><tr>
- <th>"Global.x * Global.y + Global.x * five"</th>
- Global.x * Global.y + Global.x * five
- </tr><tr>
- <th>"five + 2 * Global.x"</th>
- five + 2 * Global.x
- </tr><tr>
- <th>"two - 3 / Global.y"</th>
- two - 3 / Global.y
- </tr><tr>
- <th>"(Global.y + 5) * ((Global.y + Global.x))"</th>
- (Global.y + 5) * ((Global.y + Global.x))
- </tr><tr>
- <th>"(6 * (5 + 4))"</th>
- (6 * (5 + 4))
- </tr><tr>
- <th>"greeting + name"</th>
- greeting + name
- </tr>
-</table>
-
-<br />"Numbers: "
- <input data=Local.x dataType="number" /> "+" <input data=Local.y dataType="number" /> "=" Local.x + Local.y
-<br />"Strings: "
- <input data=Local.foo /> "+" <input data=Local.bar /> "=" Local.foo + Local.bar
-
-if (Global.x < 10) {
- <br />"Global.x < 10"
-}
-
-if (Global.x * Global.y > 100) {
- <br />"Global.x * Global.y > 100"
-} else {
- <br />"Global.x * Global.y <= 100"
-}
-
-if (Global.x * Global.y + Global.x * five > 200) {
- <br />"Global.x * Global.y + Global.x * five > 200"
-}
-
-// TODO Make this work:
-// if (!(mouse.x > 100 && mouse.y > 100)) {
-// "mouse.x > 100 && mouse.y > 100"
-// }
+<div>"Some mouse and composite statements."</div>
+
+<pre>'
+"mouse: " mouse <br/>
+"mouse.x + 50: " mouse.x + 50 <br/>
+\"hello\" + mouse.x + 50: "hello" + mouse.x + 50 <br/>
+var foo = 40
+var bar = mouse.x
+"foo + bar + 50: " foo + bar + 50: <br/>
+'</pre>
+
+"mouse: " mouse <br/>
+"mouse.x + 50: " mouse.x + 50 <br/>
+"\"hello\" + mouse.x + 50: " "hello" + mouse.x + 50 <br/>
+var foo = 40
+var bar = mouse.x
+"foo + bar + 50: " foo + bar + 50 <br/>
View
@@ -1,12 +0,0 @@
-import Global
-
-var incr = handler(){ Global.counter.increment() }
-
-<div style={ color:'#444', fontFamily:'Helvetica', margin: 50 }>
- 'Counter: ' Global.counter
- <br />
- <button>"++"</button onclick=incr>
- <button>"--"</button onclick=handler(){ Global.counter.decrement() }>
- <button>"+5"</button onclick=handler(){ Global.counter.add(5) }>
- <button>"-3"</button onclick=handler(){ Global.counter.subtract(3) }>
-</div>
View
@@ -1,3 +1,12 @@
import mouse
-<div id="output1" style={ background:'red', width:100, height:100, position:"absolute", top:mouse.y, left:mouse.x }/>
-<div id="output2" style={ background:'blue', width:50, height:50, position:"absolute", top:mouse.y + 50, left:mouse.x + 50 }/>
+
+"Two divs that kind of follow the mouse."
+
+<pre>'
+var offset = 25
+<div id="output1" style={ background:"red", width:100, height:100, position:"absolute", top:mouse.y + offset, left:mouse.x + offset }/>
+<div id="output2" style={ background:"blue", width:50, height:50, position:"absolute", top:mouse.y + offset + 25, left:mouse.x + offset + 25 }/>
+'</pre>
+var offset = 25
+<div id="output1" style={ background:"red", width:100, height:100, position:"absolute", top:mouse.y + offset, left:mouse.x + offset }/>
+<div id="output2" style={ background:"blue", width:50, height:50, position:"absolute", top:mouse.y + offset + 25, left:mouse.x + offset + 25 }/>
View
@@ -1,13 +0,0 @@
-import facebook
-
-if (facebook.connected) {
- if (facebook.user.name) {
- <div>"Welcome " facebook.user.name "!"</div>
- }
- <div>"Your ID is: " facebook.user.id</div>
-} else {
- <button>"Connect to facebook"</button onclick=handler() {
- facebook.connect('177253448965438')
- }>
-}
-
View
@@ -0,0 +1,23 @@
+<div>"Some for loops"</div>
+
+<pre>"
+for (number in [1,2,3]) {
+ <div>'A number: 'number</div>
+}
+"</pre>
+for (number in [1,2,3]) {
+ <div>'A number: 'number</div>
+}
+
+
+<pre>"
+var person = { name:'Marcus', likes:'Ice cream' }
+for (value in person) {
+ <div>value</div>
+}
+"
+</pre>
+var person = { name:'Marcus', likes:'Ice cream' }
+for (value in person) {
+ <div>value</div>
+}
@@ -1,9 +0,0 @@
-// TODO make this compile
-for (number in [1,2,3,4,5,6]) {
- number
-}
-
-// TODO make this parse
-// for (number in [0..100]) {
-// number
-// }
View
@@ -1,5 +1,35 @@
import mouse
+"Some if/else statements depending on the mouse position"
+
+<pre>'
+<div>
+ "mouse: { x:" mouse.x ", y:" mouse.y " }"
+</div>
+
+<div>
+ if (mouse.x >= 100) { "mouse.x >= 100" }
+ else { "mouse.x < 100" }
+</div>
+
+<div>
+ if (100 >= mouse.y) {
+ "mouse.y < 100"
+ } else {
+ if (mouse.y <= 200) {
+ "100 < mouse.y <= 200"
+ } else {
+ "100 < 200 < mouse.y"
+ }
+ }
+</div>
+
+<div>
+ if (mouse.y <= mouse.x) { "mouse.y <= mouse.x" }
+ else { "mouse.y > mouse.x" }
+</div>
+'</pre>
+
<div>
"mouse: { x:" mouse.x ", y:" mouse.y " }"
</div>
View
@@ -1,28 +1,49 @@
-import Local
+var pictureURL = ""
-let setYahooLogo = handler() {
- Local.pictureURL.set("http://l.yimg.com/a/i/ww/met/yahoo_logo_us_061509.png")
-}
-let setBingTile = handler() {
- Local.pictureURL.set("http://www.bing.com/fd/s/a/h1.png")
-}
-let setGoogleLogo = handler() {
- Local.pictureURL.set("http://www.google.com/images/logos/ps_logo2.png")
-}
-
-<div style={ margin: 10, padding: 5, border: '2px solid #999', width: 500 }>
+<pre>'
+<div style={ margin: 10, padding: 5, border: "2px solid #999", width: 500 }>
<p>"examples"</p>
- <button onClick=setYahooLogo>"Yahoo logo"</button>
- <button onClick=setBingTile>"Bing Sprite tiles"</button>
- <button onClick=setGoogleLogo>"Google logo"</button>
+ <button>"Yahoo logo"</button onClick=handler() {
+ pictureURL.set("http://l.yimg.com/a/i/ww/met/yahoo_logo_us_061509.png")
+ }>
+ <button>"Bing Sprite tiles"</button onClick=handler() {
+ pictureURL.set("http://www.bing.com/fd/s/a/h1.png")
+ }>
+ <button>"Google logo"</button onClick=handler() {
+ pictureURL.set("http://www.google.com/images/logos/ps_logo2.png")
+ }>
</div>
-<div style={ margin: 10, padding: 5, border: '2px solid #999', width: 500 }>
+<div style={ margin: 10, padding: 5, border: "2px solid #999", width: 500 }>
<p>"src"</p>
- <input data=Local.pictureURL style={magin:10, width: 500} />
+ <input data=pictureURL style={magin:10, width: 500} />
</div>
-<div style={ margin: 10, padding: 5, border: '2px solid #999', width: 500 }>
+<div style={ margin: 10, padding: 5, border: "2px solid #999", width: 500 }>
<p>"image"</p>
- <img src=Local.pictureURL style={margin:10} />
+ <img src=pictureURL style={margin:10} />
</div>
+'</pre>
+
+<div style={ margin: 10, padding: 5, border: "2px solid #999", width: 500 }>
+ <p>"examples"</p>
+ <button>"Yahoo logo"</button onClick=handler() {
+ pictureURL.set("http://l.yimg.com/a/i/ww/met/yahoo_logo_us_061509.png")
+ }>
+ <button>"Bing Sprite tiles"</button onClick=handler() {
+ pictureURL.set("http://www.bing.com/fd/s/a/h1.png")
+ }>
+ <button>"Google logo"</button onClick=handler() {
+ pictureURL.set("http://www.google.com/images/logos/ps_logo2.png")
+ }>
+</div>
+
+<div style={ margin: 10, padding: 5, border: "2px solid #999", width: 500 }>
+ <p>"src"</p>
+ <input data=pictureURL style={magin:10, width: 500} />
+</div>
+
+<div style={ margin: 10, padding: 5, border: "2px solid #999", width: 500 }>
+ <p>"image"</p>
+ <img src=pictureURL style={margin:10} />
+</div>
Oops, something went wrong.

0 comments on commit d164f27

Please sign in to comment.