fancellu/T1.scala

## index.html
<!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>

## T1.scala
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)
    }
  }
}
	<!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>
	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)
	}
	}
	}