Last active
September 10, 2015 15:27
-
-
Save fancellu/d09b408b83f7c8f3a6f0 to your computer and use it in GitHub Desktop.
ScalaJS ractive example - Live demo http://dinofancellu.com/demo/scalajsRactive/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Example Scala.js application!!</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> | |
| </head> | |
| <body style="margin: 0px"> | |
| <!-- ractive start--> | |
| <div id='container2' style="float:right"></div> | |
| <div id='container'></div> | |
| <script id='template' type='text/ractive'> | |
| <label><input type="checkbox" checked="{{checkbox}}"/>Show buttons</label> | |
| {{#if checkbox}} | |
| <button on-click='increment'>Increment!</button> | |
| <button on-click='decrement'>Decrement!</button> | |
| <button on-click='animate'>Animate!</button> | |
| {{/if}} | |
| <p>Hello, {{name}}!</p> | |
| <p>Some data {{format(somedata)}}<BR/><input id="somedata" type="range" min="0" max="400" value="{{somedata}}"/></p> | |
| <div> | |
| <input placeholder='City Name' value='{{city}}' lazy="true"><BR/> | |
| <b>Weather in {{city}}:</b> | |
| <ul> | |
| <li><b>Country </b>{{country}}</li> | |
| <li><b>Weather </b>{{weather}}</li> | |
| <li><b>Temp </b>{{min}} - {{max}}</li> | |
| <li><b>Humidity </b>{{humid}}%</li> | |
| </ul> | |
| </div> | |
| <svg width="100%"> | |
| <g transform='translate(30,30)'> | |
| <rect width='{{somedata}}' height='100' style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"/> | |
| </g> | |
| </svg> | |
| </script> | |
| <script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script> | |
| <div id="mydiv"></div> | |
| <!-- ractive end --> | |
| <script type="text/javascript" src="../example-fastopt.js"></script> | |
| <script> | |
| var jstimes2=function(x){ | |
| return x*2; | |
| }; | |
| var jsalert=function(){ | |
| alert("Hello from JS"); | |
| }; | |
| example.T1().main(document.getElementById('mydiv')); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| package example | |
| import org.scalajs.dom | |
| import scalajs.js.annotation.JSExport | |
| import scala.scalajs.concurrent.JSExecutionContext.Implicits.runNow | |
| import dom.ext.Ajax | |
| import scalajs.js | |
| import js.Dynamic.literal | |
| import com.felstar.scalajs.ractive._ | |
| @JSExport | |
| object T1 extends { | |
| @JSExport | |
| def main(target: dom.html.Div) = { | |
| // if I were creating a Ractive dynamically | |
| // val ractive2 = js.Dynamic.newInstance(js.Dynamic.global.Ractive)(rvals) | |
| def format(x:AnyRef)=x.toString.toDouble.toInt | |
| val rvals = literal( | |
| el = "#container", | |
| template = "#template", | |
| data = literal( | |
| name = "world", | |
| checkbox = true, | |
| format= format _) | |
| ) | |
| val ra = new Ractive(rvals) | |
| def weather(city: String): Unit = { | |
| if (city == "") return | |
| val fXHR = Ajax.get(s"http://api.openweathermap.org/data/2.5/weather?q=$city") | |
| fXHR.onSuccess { | |
| case xhr => | |
| if (xhr.status == 200) { | |
| val json = js.JSON.parse( | |
| xhr.responseText) | |
| val country = json.sys.country.toString | |
| val weather = json.weather | |
| .pop() | |
| .main | |
| .toString | |
| def celsius(kelvins: js.Dynamic) = { | |
| kelvins.asInstanceOf[Double] - 273.15 | |
| }.toInt | |
| val min = celsius(json.main.temp_min) | |
| val max = celsius(json.main.temp_max) | |
| val humid = json.main.humidity.toString | |
| ra.set(literal(city=city,country=country,weather=weather,min=min,max=max,humid=humid)) | |
| } | |
| } | |
| } | |
| ra.observe("city", (ra: Ractive, newVal: String) => weather(newVal.toString)) | |
| ra.set("city", "London") | |
| // calling jstime2 in JS, magic | |
| (1 to 10).map(x => js.Dynamic.global.jstimes2(x)).map(x => ra.set("somedata", x)) | |
| ra.add("somedata", 10) | |
| val current = ra.get("somedata").asInstanceOf[Number] | |
| val ok: Any => Unit = x => println(s"ok $x") | |
| val failed: Any => Unit = x => println(s"failed $x") | |
| def animate(ra:Ractive)={ | |
| val animprom = ra.animate("somedata", 100 + current.intValue(), literal(duration = 2000)) | |
| animprom.andThen(ok) // should say ok 130 | |
| animprom.andThen((_: Int) + 1).andThen(ok) // should say ok 131 (we add 1 to 130, then print out) | |
| animprom.andThen((x: Int) => ra.animate("somedata", x - 100, literal(duration = 2000))).andThen { toAnyAny(println("Finished shrinking")) } | |
| } | |
| animate(ra) | |
| ra.onR("animate",animate(_)) | |
| // ra.on("increment", (ra:Ractive)=>ra.add("somedata")) // telling it to expect a ractive | |
| // ra.on("increment", toRactiveHandler(_.add("somedata"))) // doing same with converter | |
| // ra.onR("increment",_.add("somedata")) // same with pimp | |
| // ra.onR("decrement", _.subtract("somedata")) | |
| // in one go, TODO handle cancellable | |
| val cancellable = ra.on { | |
| literal( | |
| increment = toRactiveHandler(_.add("somedata")), | |
| decrement = toRactiveHandler(_.subtract("somedata"))) | |
| } | |
| // another example | |
| { | |
| val rvals = literal( | |
| el = "#container2", | |
| template = "<b>In place template. Greeting={{greeting}}</b>", | |
| data = literal(greeting = "world")) | |
| val customra = new Ractive(rvals) | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment