Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Update examples and remove some old ones

  • Loading branch information...
commit d164f270b566847b4aa006433789fbe4bcf349f6 1 parent ef0b1aa
@marcuswestin authored
View
40 examples/chat.fun
@@ -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
24 examples/chatrooms.css
@@ -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
68 examples/chatrooms.fun
@@ -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()
-}
View
75 examples/composit_statements.js
@@ -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
12 examples/counter.fun
@@ -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
13 examples/drag.fun
@@ -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
13 examples/facebook.fun
@@ -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
23 examples/for-loops.fun
@@ -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>
+}
View
9 examples/for_loop_literal.js
@@ -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
30 examples/if_else.fun
@@ -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
59 examples/image.fun
@@ -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>
View
4 examples/import.fun
@@ -1,4 +0,0 @@
-import "./import2"
-
-<div>"Hello " fromImport2</div>
-<div>"And Hello " <em>fromImport3ViaImport2</em> "!"</div>
View
2  examples/import2.fun
@@ -1,2 +0,0 @@
-import "./import3"
-let fromImport2 = "variable imported from import2.fun!"
View
1  examples/import3.fun
@@ -1 +0,0 @@
-let fromImport3ViaImport2 = "variable imported from import3.fun!"
View
25 examples/refactor.fun
@@ -1,25 +0,0 @@
-class Global {
- 1 stamps: List of Stamp
-}
-
-class Stamp {
- 1 text: Text
-}
-
-let displayStamp = template(stamp) {
- <span class="stamp">stamp.text</span>
-}
-
-let displayNumber = template(number) {
- <div>"A number!" number</div>
-}
-
-<div class="stamps">
- displayNumber(2)
- for (number in [1,2,3]) {
- displayNumber(number)
- displayNumber(number)
- }
- displayNumber(101)
-</div>
-
View
51 examples/registration.fun
@@ -1,51 +0,0 @@
-#import XHR
-#import location
-
-let Account = {
- state: @required { 'initial', 'created', 'verified' },
- id: @static Number,
- phoneNumber: @static Text
-}
-
-let RegistrationResponse = {
- error: Text,
- account: Account
-}
-
-let Account account = { state:'initial' }
-let oops = "Oops! Something went wrong. We're looking into it"
-let inviteToken = ""
-
-switch(account.state) {
- case 'initial': renderCreate()
- case 'created': renderVerifyNumber()
- case 'verified': renderApp
-}
-
-let renderCreate = template() {
- let phoneNumber = ""
- let errorMessage = ""
- if (errorMessage) { <div class="error">errorMessage</div> }
- <input data=phoneNumber placeholder="phone number" />
- <button>"Create account"</button onclick=handler() {
- let RegistrationResponse response = XHR.post('/create_account', { phoneNumber:phoneNumber })
- if (response.account) { account.set(response.account) }
- else { errorMessage.set(response.error || oops) }
- }>
-}
-
-let renderVerifyNumber = template() {
- #import location
- location.on('change', handler() {
- if (!location.hash.get('t')) { return }
- let params = { phoneNumber:account.phoneNumber, token:location.hash.get('t') }
- let RegistrationResponse response = XHR.post('/verify_number', params)
- if (response.account) { account.set(response.account) }
- else { errorMessage.set(response.error || oops)
- })
- XHR.post('/send_verification_sms', { phoneNumber:account.phoneNumber })
-}
-
-let renderApp = template() {
- "..."
-}
View
3  examples/simple.fun
@@ -1,3 +0,0 @@
-var greeting = 'hey'
-greeting
-<button>"shout"</button onclick=handler() { greeting.set('HEY!') }>
View
16 examples/switch.fun
@@ -1,11 +1,13 @@
-import Local
+// This example is currently broken. Need to make it work :)
-"Local.state: " <input data=Local.state /> "(try foo, bar, and others)"
+var state = 'foo'
+
+"Local.state: " <input data=state /> "(try foo, bar, and others)"
<div>
- switch(Local.state) {
- case 'foo', 'bar': "Local.state is foo/bar! " Local.state
- case 'marcus', 'westin': "Local.state is my name! " Local.state
- default: "default, Local.state is " Local.state
+ switch(state) {
+ case 'foo', 'bar': "Local.state is foo/bar! " state
+ case 'marcus', 'westin': "Local.state is my name! " state
+ default: "default, Local.state is " state
}
-</div>
+</div>
View
30 examples/template.fun
@@ -1,30 +0,0 @@
-import Local
-import Global
-let renderItem = template(item) {
- <em> "From renderItem, item.text: " item.text </em>
-}
-let renderItemAgain = template(item) {
- <b> "From renderItemAgain: " item.foo </b>
-}
-
-<input data=Local.itemText />
-<button>"click"</button onclick=handler() {
- let newItem = new { text: Local.itemText, foo:'foo' }
- Global.items.unshift(newItem)
-}>
-
-for (item in Global.items) {
- <div style={ border:'1px solid black', padding:4 }>
- "item: " item.text
- <br />"renderItem(item): " renderItem(item)
- <br />"renderItemAgain(item): "renderItemAgain(item)
- </div>
-}
-
-let aTemplate = template(name) {
- <br />"Hello " name
-}
-let firstName = "Marcus"
-aTemplate()
-aTemplate("Marcus")
-aTemplate(firstName + " Westin")
View
70 examples/twitter-typed.fun
@@ -1,70 +0,0 @@
-#import XHR
-
-let Account = { signedIn:@required Bool, username:@static Text, id:@static Number }
-let Tweet = { id:@static Number, text:@static Text, userID:@static Number }
-
-let Account user = { signedIn:false }
-
-if (account.signedIn) { renderApp() }
-else { renderLogin() }
-
-let renderLogin = template() {
- <div class="login">
- let password = ""
- <input data=account.username placeholder="username" />
- <input data=password type="password" placeholder="password" />
- <button>"Sign in"</button disabled=disableButton onclick=handler() {
- XHR.post('/login', { username:account.username, password:password }, handler(Text error, Account response) {
- if (error) { return alert(error) }
- user.set(response)
- })
- }>
- </div>
-}
-
-let Tab = { 'Timeline', '@Mentions', 'Retweets', 'Searches', 'Lists' }
-let Tab currentTab = 'Timeline'
-let renderApp = template() {
- <div class="columns">
- <div class="left column">
- renderTweetBox()
- renderTabs()
- renderTimeline()
- </div>
- <div class="right column">
-
- </div>
- </div>
-}
-
-let renderTweetBox = template() {
- let tweet = ""
- let remainingLetters = 160 - tweet.length
- let remainingColor =
- remainingLetters < 0 ? #633 :
- remainingLetters < 10 ? #333 :
- remainingLetters < 20 ? #444 :
- remainingLetters < 30 ? #666 : #999
-
- <div class="tweetBox">
- <div class="title">"What's happening?"</div>
- <textarea data=tweet />
- <div class="remainingLetters" style={ color:remainingColor }>
- remainingLetters
- </div>
- </div>
-}
-
-let renderTimeline = template() {
- let [Tweet] tweets = XHR.get('/timeline.json', { id:user.id })
- if (tweets.loading) { <div class="loading">"Loading..."</div> }
- for (tweet in tweets) {
- renderTweet(tweet)
- }
-}
-
-let renderTweet = template(Tweet tweet) {
- <div class="tweet" onclick=handler() { currentTweet.set(tweet) }>
- <img src="/images/user/"+tweet.userID /> tweet.text
- </div>
-}
View
57 examples/twitter.fun
@@ -1,57 +0,0 @@
-var twitter = {
- query: function(path, params) {
- var result = { loading:true, error:null, response:null }
- <script path=path params=params result=result>
- var script = document.createElement('script'),
- callbackID = 'callback_'+new Date().getTime(),
- query = []
- for (var key in params.getContent()) {
- query.push(encodeURIComponent(key)+"="+encodeURIComponent(params.getContent()[key].evaluate()))
- }
- query.push('callback='+callbackID)
- window[callbackID] = function(response) {
- if (response.error) {
- result.set(['error'], fun.expressions.fromJavascriptValue(response.error))
- } else {
- result.set(['response'], fun.expressions.fromJavascriptValue(response.response))
- }
- result.set(['loading'], false)
- }
- script.src = '//api.twitter.com'+path.evaluate()+'?'+query.join('&')
- </script>
- return result
- }
-}
-
-let user = {}
-let currentTweet = null
-
-let renderTweet = template(tweet) {
- <div class="tweet" onclick=handler() { currentTweet.set(tweet) }>
- <img src="/images/user/"+tweet.userID /> tweet.text
- </div>
-}
-
-<div class="columns">
- <div class="column left">
- if (user.timeline) {
- for (tweet in user.timeline) {
- renderTweet(tweet)
- }
- } else {
- <div class="login">
- <input data=user.username placeholder="username" />
- <button>"Sign in"</button onclick=handler() {
- twitter.query('/timeline', { username:user.username }, handler(error, response) {
- if (error) { return alert(error) }
- user.online.set(true)
- user.timeline = set(response)
- })
- }>
- </div>
- }
- </div>
- <div class="column right">
- renderTweet(currentTweet)
- </div>
-</div>
Please sign in to comment.
Something went wrong with that request. Please try again.