add samples

playground/samples/rt-if.code

@@ -0,0 +1,9 @@
+{
+    mixins: [React.addons.LinkedStateMixin],
+    getInitialState: function () {
+        return {open:false};
+    },
+    toggle: function() {
+        this.setState({open:!this.state.open});
+    }
+}

playground/samples/rt-if.rt

@@ -0,0 +1,4 @@
+<div>
+    <h4 style="cursor:pointer" onClick="()=>this.toggle()">Click to {this.state.open ? 'close' : 'open'}</h4>
+    <p style="display:{this.state.open?'block':'none'}">This is my paragraph. It opens and closes</p>
+</div>

playground/samples/rt-props.code

@@ -0,0 +1,9 @@
+{
+    mixins: [React.addons.LinkedStateMixin],
+    getProps: function() {
+        return _.omit(this.props, ['onClick', 'eventId']);    
+    },
+    reportClick: function(child) {
+        alert((this.props.eventId || -1) + ':' + child.innerText);
+    }
+}

playground/samples/rt-props.rt

@@ -0,0 +1,4 @@
+<div onClick="(evt)=>this.reportClick(evt.target)" rt-props="this.getProps()">
+    All kinds of stuff,
+    <span>some inner child, </span> and a sibling
+</div>

playground/samples/rt-repeat.code

@@ -0,0 +1,17 @@
+{
+    mixins: [React.addons.LinkedStateMixin],
+    getInitialState: function () {
+        return {
+            media: [
+                { id:0, type: 'Text', title: 'I\'m a title', body: 'I\'m a paragraph' },
+                { id:1, type: 'Image', src: 'https://facebook.github.io/react/img/logo.svg' },
+                { id:2, type: 'Text', title: 'Also a title', body: 'Also a paragraph' }
+            ]
+        };
+    },
+    swap: function(from, to) {
+        var newMedia = _.clone(this.state.media);
+        newMedia.splice(to, 0, newMedia.splice(from, 1)[0]);
+        this.setState({media:newMedia});
+    }
+}

playground/samples/rt-repeat.rt

@@ -0,0 +1,13 @@
+<div>
+    <div rt-repeat="media in this.state.media" key="{media.id}">
+        <button onClick="()=>this.swap(mediaIndex,mediaIndex-1)" rt-scope="mediaIndex === 0 as first" disabled="{first}" style="color:{first?'grey':'black'}">Up</button>
+        <button onClick="()=>this.swap(mediaIndex,mediaIndex+1)" rt-scope="mediaIndex === (this.state.media.length - 1) as last" disabled="{last}" style="color:{last?'grey':'black'}">Down</button>
+        <div rt-if="media.type == 'Image'">
+            <img src="{media.src}" width="80"/>
+        </div>
+        <div rt-if="media.type == 'Text'">
+            <h4>{media.title}</h4>
+            <p>{media.body}</p>
+        </div>
+    </div>
+</div>

playground/samples/todo2.code

@@ -0,0 +1,25 @@
+{
+    mixins: [React.addons.LinkedStateMixin],
+        getInitialState: function () {
+    return {
+        edited: '', todos: [], counter: 0};
+    },
+    add: function () {
+        if (this.state.edited.trim().length === 0) {
+            return;
+        }
+        var newTodo = {value: this.state.edited, done: false, key: this.state.counter};
+        this.setState({todos: this.state.todos.concat(newTodo), edited: '', counter: this.state.counter + 1});
+    },
+    remove: function (todo) {
+        this.setState({todos: _.reject(this.state.todos, todo)});
+    },
+    toggleChecked: function (index) {
+        var todos = _.cloneDeep(this.state.todos);
+        todos[index].done = !todos[index].done;
+        this.setState({todos: todos});
+    },
+    clearDone: function () {
+        this.setState({todos: _.filter(this.state.todos, {done: false})});
+    }
+}

playground/samples/todo2.rt

@@ -0,0 +1,13 @@
+<div>
+    Have {_.filter(this.state.todos, {done:true}).length} todos done,
+    and {_.filter(this.state.todos, {done:false}).length} not done
+    <br/>
+    <div rt-repeat="todo in this.state.todos" key="{todo.key}">
+        <button onClick="()=>this.remove(todo)">x</button>
+        <input type="checkbox" checked="{todo.done}" onChange="()=>this.toggleChecked(todoIndex)"/>
+        <span style="text-decoration: {todo.done ? 'line-through': 'none'}">{todo.value}</span>
+    </div>
+    <input key="myinput" type="text" onKeyDown="(e) => if (e.keyCode == 13) { e.preventDefault(); this.add(); }" valueLink="{this.linkState('edited')}"/>
+    <button onClick="()=>this.add()">Add</button><br/>
+    <button onClick="()=>this.clearDone()">Clear done</button>
+</div>

playground/samples/weather.code

@@ -0,0 +1,34 @@
+{
+    mixins: [React.addons.LinkedStateMixin],
+    getInitialState: function() {
+        this.cityIds = [5391959,293397,2643743];
+        this.fetchWeather();
+        return { loading: true, cityToAdd: '', info: [] };
+    },
+    addCity: function() {
+        if (this.state.cityToAdd.trim() == '') {
+            return;
+        }
+        this.setState({ loading: true, cityToAdd: '' });
+        $.get('http://api.openweathermap.org/data/2.5/weather?q=' + this.state.cityToAdd, this.findCityCallback);
+    },
+    findCityCallback: function(result) {
+        if (result.id && !_.contains(this.cityIds, result.id)) {
+            this.cityIds.unshift(result.id);
+            this.fetchWeather();
+        }
+        else {
+            this.setState({ loading: false });
+        }
+    },
+    refresh: function() {
+        this.setState({ loading:true });
+        this.fetchWeather();
+    },
+    fetchWeather: function() {
+       $.get('http://api.openweathermap.org/data/2.5/group?id=' + this.cityIds.join(',') + '&units=metric', this.fetchWeatherCallback);
+    },
+    fetchWeatherCallback: function(result) {
+        this.setState({ loading:false, info: result.list });
+    }
+}   

playground/samples/weather.rt

@@ -0,0 +1,12 @@
+<div>
+    <h4>Cities weather report</h4>
+    <input placeholder="Type a city to add" valueLink="{this.linkState('cityToAdd')}" onKeyDown="(e)=>if (e.keyCode === 13) { e.preventDefault(); this.addCity(); }"/>
+    <button onClick="{this.addCity}">Add</button>
+    <div key="preloader" rt-if="this.state.loading">-- Loading --</div>
+    <div rt-repeat="city in this.state.info" key="{city.id}">
+        {cityIndex+1})
+        <img rt-repeat="weather in city.weather" src="http://openweathermap.org/img/w/{weather.icon}.png" title="{weather.description}"/>
+        {city.name}, {city.sys.country}
+    </div>
+    <button onClick="{this.refresh}">Refresh</button>
+</div>