diff options
author | Li Haoyi <haoyi@dropbox.com> | 2014-11-02 04:57:37 -0800 |
---|---|---|
committer | Li Haoyi <haoyi@dropbox.com> | 2014-11-02 04:57:37 -0800 |
commit | a33254276bd211bf33be86eeb871ddbfe36fdb47 (patch) | |
tree | b257d473be4fa110f7846f372ea94fc6714dad90 /examples/demos/src/main/scala/webpage | |
parent | d00a2e25a9ee527fa39feb04c3137715501e9fda (diff) | |
download | hands-on-scala-js-a33254276bd211bf33be86eeb871ddbfe36fdb47.tar.gz hands-on-scala-js-a33254276bd211bf33be86eeb871ddbfe36fdb47.tar.bz2 hands-on-scala-js-a33254276bd211bf33be86eeb871ddbfe36fdb47.zip |
Moved `examples` into `examples/demos`, sketched out a simple example cross-module
Diffstat (limited to 'examples/demos/src/main/scala/webpage')
10 files changed, 421 insertions, 0 deletions
diff --git a/examples/demos/src/main/scala/webpage/HelloWorld0.scala b/examples/demos/src/main/scala/webpage/HelloWorld0.scala new file mode 100644 index 0000000..df458ac --- /dev/null +++ b/examples/demos/src/main/scala/webpage/HelloWorld0.scala @@ -0,0 +1,19 @@ +package webpage +import org.scalajs.dom +import scala.scalajs.js.annotation.JSExport +@JSExport +object HelloWorld0 extends{ + @JSExport + def main(target: dom.HTMLDivElement) = { + val (animalA, animalB) = ("fox", "dog") + target.innerHTML = s""" + <div> + <h1>Hello World!</h1> + <p> + The quick brown <b>$animalA</b> + jumped over the lazy <i>$animalB</b> + </p> + </div> + """ + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/webpage/HelloWorld1.scala b/examples/demos/src/main/scala/webpage/HelloWorld1.scala new file mode 100644 index 0000000..1dc77b3 --- /dev/null +++ b/examples/demos/src/main/scala/webpage/HelloWorld1.scala @@ -0,0 +1,18 @@ +package webpage +import org.scalajs.dom +import scala.scalajs.js.annotation.JSExport +import scalatags.JsDom.all._ +@JSExport +object HelloWorld1 extends{ + @JSExport + def main(target: dom.HTMLDivElement) = { + val (animalA, animalB) = ("fox", "dog") + target.appendChild( + div( + h1("Hello World!"), + p("The quick brown ", b(animalA), + " jumped over the lazy ", i(animalB), ".") + ).render + ) + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/webpage/Inputs.scala b/examples/demos/src/main/scala/webpage/Inputs.scala new file mode 100644 index 0000000..9339e84 --- /dev/null +++ b/examples/demos/src/main/scala/webpage/Inputs.scala @@ -0,0 +1,35 @@ +package webpage + +import org.scalajs.dom +import scala.scalajs.js.annotation.JSExport +import scalatags.JsDom.all._ + +@JSExport +object Inputs extends{ + @JSExport + def main(target: dom.HTMLDivElement) = { + val box = input( + `type`:="text", + placeholder:="Type here!" + ).render + + val output = span.render + + box.onkeyup = (e: dom.Event) => { + output.textContent = + box.value.toUpperCase + } + + target.appendChild( + div( + h1("Capital Box!"), + p( + "Type here and " + + "have it capitalized!" + ), + div(box), + div(output) + ).render + ) + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/webpage/Search0.scala b/examples/demos/src/main/scala/webpage/Search0.scala new file mode 100644 index 0000000..300b506 --- /dev/null +++ b/examples/demos/src/main/scala/webpage/Search0.scala @@ -0,0 +1,50 @@ +package webpage + +import org.scalajs.dom +import scala.scalajs.js.annotation.JSExport +import scalatags.JsDom.all._ + +@JSExport +object Search0 extends{ + @JSExport + def main(target: dom.HTMLDivElement) = { + val listings = Seq( + "Apple", "Apricot", "Banana", "Cherry", + "Mango", "Mangosteen", "Mandarin", + "Grape", "Grapefruit", "Guava" + ) + + def renderListings = ul( + for { + fruit <- listings + if fruit.toLowerCase.startsWith( + box.value.toLowerCase + ) + } yield li(fruit) + ).render + + lazy val box = input( + `type`:="text", + placeholder:="Type here!" + ).render + + val output = div(renderListings).render + + box.onkeyup = (e: dom.Event) => { + output.innerHTML = "" + output.appendChild(renderListings) + } + + target.appendChild( + div( + h1("Search Box!"), + p( + "Type here to filter " + + "the list of things below!" + ), + div(box), + output + ).render + ) + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/webpage/Search1.scala b/examples/demos/src/main/scala/webpage/Search1.scala new file mode 100644 index 0000000..1936898 --- /dev/null +++ b/examples/demos/src/main/scala/webpage/Search1.scala @@ -0,0 +1,62 @@ +package webpage + +import org.scalajs.dom +import scala.scalajs.js.annotation.JSExport +import scalatags.JsDom.all._ + +@JSExport +object Search1 extends{ + @JSExport + def main(target: dom.HTMLDivElement) = { + val listings = Seq( + "Apple", "Apricot", "Banana", "Cherry", + "Mango", "Mangosteen", "Mandarin", + "Grape", "Grapefruit", "Guava" + ) + + def renderListings = ul( + for { + fruit <- listings + if fruit.toLowerCase.startsWith( + box.value.toLowerCase + ) + } yield { + val (first, last) = fruit.splitAt( + box.value.length + ) + li( + span( + backgroundColor:="yellow", + first + ), + last + ) + } + ).render + + + lazy val box = input( + `type`:="text", + placeholder:="Type here!" + ).render + + val output = div(renderListings).render + + box.onkeyup = (e: dom.Event) => { + output.innerHTML = "" + output.appendChild(renderListings) + } + + target.appendChild( + div( + h1("Search Box!"), + p( + "Type here to filter " + + "the list of things below!" + ), + div(box), + output + ).render + ) + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/webpage/Weather0.scala b/examples/demos/src/main/scala/webpage/Weather0.scala new file mode 100644 index 0000000..4a2c6f0 --- /dev/null +++ b/examples/demos/src/main/scala/webpage/Weather0.scala @@ -0,0 +1,27 @@ +package webpage + +import org.scalajs.dom +import org.scalajs.dom.{Node, Element} +import scala.scalajs.js +import scala.scalajs.js.annotation.JSExport +import scalatags.JsDom.all._ + +@JSExport +object Weather0 extends{ + @JSExport + def main(target: dom.HTMLDivElement) = { + val xhr = new dom.XMLHttpRequest() + xhr.open("GET", + "http://api.openweathermap.org/" + + "data/2.5/weather?q=Singapore" + ) + xhr.onload = (e: dom.Event) => { + if (xhr.status == 200) { + target.appendChild( + pre(xhr.responseText).render + ) + } + } + xhr.send() + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/webpage/Weather1.scala b/examples/demos/src/main/scala/webpage/Weather1.scala new file mode 100644 index 0000000..c509cb5 --- /dev/null +++ b/examples/demos/src/main/scala/webpage/Weather1.scala @@ -0,0 +1,30 @@ +package webpage + +import org.scalajs.dom +import org.scalajs.dom.{Node, Element} +import scala.scalajs.js +import scala.scalajs.js.annotation.JSExport +import scalatags.JsDom.all._ + +@JSExport +object Weather1 extends{ + @JSExport + def main(target: dom.HTMLDivElement) = { + import dom.extensions._ + import scala.scalajs + .concurrent + .JSExecutionContext + .Implicits + .runNow + + val url = + "http://api.openweathermap.org/" + + "data/2.5/weather?q=Singapore" + + Ajax.get(url).onSuccess{ case xhr => + target.appendChild( + pre(xhr.responseText).render + ) + } + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/webpage/Weather2.scala b/examples/demos/src/main/scala/webpage/Weather2.scala new file mode 100644 index 0000000..aa04059 --- /dev/null +++ b/examples/demos/src/main/scala/webpage/Weather2.scala @@ -0,0 +1,35 @@ +package webpage + +import org.scalajs.dom +import org.scalajs.dom.{Node, Element} +import scala.scalajs.js +import scala.scalajs.js.annotation.JSExport +import scalatags.JsDom.all._ + +@JSExport +object Weather2 extends{ + @JSExport + def main(target: dom.HTMLDivElement) = { + import dom.extensions._ + import scala.scalajs + .concurrent + .JSExecutionContext + .Implicits + .runNow + + val url = + "http://api.openweathermap.org/" + + "data/2.5/weather?q=Singapore" + + Ajax.get(url).onSuccess{ case xhr => + target.appendChild( + pre( + js.JSON.stringify( + js.JSON.parse(xhr.responseText), + space=4 + ) + ).render + ) + } + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/webpage/Weather3.scala b/examples/demos/src/main/scala/webpage/Weather3.scala new file mode 100644 index 0000000..4dadf94 --- /dev/null +++ b/examples/demos/src/main/scala/webpage/Weather3.scala @@ -0,0 +1,55 @@ +package webpage + +import org.scalajs.dom +import org.scalajs.dom.{Node, Element} +import scala.scalajs.js +import scala.scalajs.js.annotation.JSExport +import scalatags.JsDom.all._ + +@JSExport +object Weather3 extends{ + @JSExport + def main(target: dom.HTMLDivElement) = { + import dom.extensions._ + import scala.scalajs + .concurrent + .JSExecutionContext + .Implicits + .runNow + + val url = + "http://api.openweathermap.org/" + + "data/2.5/weather?q=Singapore" + + Ajax.get(url).onSuccess{ case xhr => + if (xhr.status == 200) { + val json = js.JSON.parse( + xhr.responseText + ) + val name = json.name.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 + target.appendChild( + div( + b("Weather in Singapore:"), + ul( + li(b("Country "), name), + li(b("Weather "), weather), + li(b("Temp "), min, " - ", max), + li(b("Humidity "), humid, "%") + ) + ).render + ) + } + } + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/webpage/WeatherSearch.scala b/examples/demos/src/main/scala/webpage/WeatherSearch.scala new file mode 100644 index 0000000..0c8acc9 --- /dev/null +++ b/examples/demos/src/main/scala/webpage/WeatherSearch.scala @@ -0,0 +1,90 @@ +package webpage + +import org.scalajs.dom +import dom.extensions._ +import scala.scalajs.concurrent.JSExecutionContext.Implicits.runNow +import scala.scalajs.js +import scala.scalajs.js.annotation.JSExport +import scalatags.JsDom.all._ + +@JSExport +object WeatherSearch extends{ + @JSExport + def main(target: dom.HTMLDivElement) = { + + lazy val box = input( + `type`:="text", + placeholder:="Type here!" + ).render + + lazy val output = div( + height:="400px", + overflowY:="scroll" + ).render + + box.onkeyup = (e: dom.Event) => { + output.innerHTML = "Loading..." + fetchWeather(box.value) + } + + target.appendChild( + div( + h1("Weather Search"), + p( + "Enter the name of a city to pull the ", + "latest weather data from api.openweathermap.com!" + ), + p(box), + hr, output, hr + ).render + ) + + def fetchWeather(query: String) = { + val searchUrl = + "http://api.openweathermap.org/data/" + + "2.5/find?type=like&mode=json&q=" + + query + + for{ + xhr <- Ajax.get(searchUrl) + if query == box.value + } js.JSON.parse(xhr.responseText).list match{ + case jsonlist: js.Array[js.Dynamic] => + output.innerHTML = "" + showResults(jsonlist, query) + case _ => + output.innerHTML = "No Results" + } + } + + def showResults(jsonlist: js.Array[js.Dynamic], query: String) = { + for (json <- jsonlist) { + val name = json.name.toString + 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 + val (first, last) = name.splitAt(query.length) + output.appendChild( + div( + b(span(first, backgroundColor:="yellow"), last, ", ", country), + ul( + li(b("Weather "), weather), + li(b("Temp "), min, " - ", max), + li(b("Humidity "), humid, "%") + ) + ).render + ) + } + + } + + + } +}
\ No newline at end of file |