From df33a5cabf8692110f81c9ef60015bea51fbf2dc Mon Sep 17 00:00:00 2001 From: Li Haoyi Date: Tue, 2 Dec 2014 05:06:55 -0800 Subject: fixed a bunch of overflow/height-change problems --- book/src/main/scala/book/BookData.scala | 2 +- book/src/main/scalatex/book/handson/WebPage.scalatex | 8 ++++---- .../main/scalatex/book/indepth/AdvancedTechniques.scalatex | 11 ++++------- examples/demos/src/main/scala/scrollmenu/ScrollMenu.scala | 1 + 4 files changed, 10 insertions(+), 12 deletions(-) diff --git a/book/src/main/scala/book/BookData.scala b/book/src/main/scala/book/BookData.scala index c306475..ff1f23a 100644 --- a/book/src/main/scala/book/BookData.scala +++ b/book/src/main/scala/book/BookData.scala @@ -39,7 +39,7 @@ object BookData { val tagId = "example"+counter counter += 1 Seq( - t(id:=tagId, display.block), + t(id:=tagId, display.block, overflow.scroll), script(s"$main(document.getElementById('$tagId'))") ) } diff --git a/book/src/main/scalatex/book/handson/WebPage.scalatex b/book/src/main/scalatex/book/handson/WebPage.scalatex index 1056460..118dd0c 100644 --- a/book/src/main/scalatex/book/handson/WebPage.scalatex +++ b/book/src/main/scalatex/book/handson/WebPage.scalatex @@ -136,7 +136,7 @@ @hl.ref("examples/demos/src/main/scala/webpage/Weather0.scala", "val xhr") @less - @BookData.example(div, "Weather0().main") + @BookData.example(div(height:="400px"), "Weather0().main") @p The above snippet of code uses the raw Javascript Ajax API in order to make a request to @lnk("openweathermap.org", "http://openweathermap.org/"), to get the weather data for the city of Singapore as a JSON blob. The part of the API that we'll be using is documented @lnk("here", "http://openweathermap.org/current"), and if you're interested you can read all about the various options that they provide. For now, we're unceremoniously dumping it in a @hl.scala{pre} so you can see the raw response data. @@ -184,7 +184,7 @@ @hl.ref("examples/demos/src/main/scala/webpage/Weather1.scala", "val url") @less - @BookData.example(div(height:="100%", overflow:="scroll"), "Weather1().main") + @BookData.example(div(height:="400px", overflow:="scroll"), "Weather1().main") @p A single call to @hl.scala{Ajax.get(...)}, with the URL, and we receive a @hl.scala{scala.concurrent.Future} that we can use to get access to the result when ready. Here we're just using it's @hl.scala{onSuccess}, but we could use it in a for-comprehension, with @lnk("Scala Async", "https://github.com/scala/async"), or however else we can use normal @hl.scala{Future}s @@ -201,7 +201,7 @@ @hl.ref("examples/demos/src/main/scala/webpage/Weather2.scala", "Ajax.get") @less - @BookData.example(div(height:="100%", overflow:="scroll"), "Weather1().main") + @BookData.example(div(height:="400px"), "Weather2().main") @p We do this by taking @hl.scala{xhr.responseText} and putting it through both @hl.scala{JSON.parse} and @hl.scala{JSON.stringify}, passing in a @hl.scala{space} argument to tell @hl.scala{JSON.stringify} to spread it out nicely. @@ -214,7 +214,7 @@ @hl.ref("examples/demos/src/main/scala/webpage/Weather3.scala", "Ajax.get") @less - @BookData.example(div(height:="100%", overflow:="scroll"), "Weather3().main") + @BookData.example(div(height:="400px", overflow:="scroll"), "Weather3().main") @p First we parse the incoming response, extract a bunch of values from it, and then stick it in a Scalatags fragment for us to see. Note how we can use the names of the attributes e.g. @hl.scala{json.name} even though @hl.scala{name} is a dynamic property which you can't be sure exists: this is because @hl.scala{json} is of type @hl.scala{js.Dynamic}, which allows us to refer to arbitrary parameters and methods on the underlying object without type-checking. diff --git a/book/src/main/scalatex/book/indepth/AdvancedTechniques.scalatex b/book/src/main/scalatex/book/indepth/AdvancedTechniques.scalatex index 24fc2bd..d49728f 100644 --- a/book/src/main/scalatex/book/indepth/AdvancedTechniques.scalatex +++ b/book/src/main/scalatex/book/indepth/AdvancedTechniques.scalatex @@ -177,13 +177,10 @@ @p Overall, these helper functions do nothing special, btu we're defining them first to avoid having to copy-&-paste code throughout the subsequent examples. Now that we've defined all the relevant scaffolding, let's walk through a few ways that we can implement the all-important @hl.scala{handle} method. - @def scrollDiv = div( - height:="200px", - overflow:="scroll" - ) + @def exampleDiv = div(height:="200px") @sect{Direct Use of XMLHttpRequest} - @example(scrollDiv, "Futures().main0") + @example(exampleDiv, "Futures().main0") @hl.ref("examples/demos/src/main/scala/advanced/Futures.scala", "def handle0", "main") @p @@ -195,7 +192,7 @@ This solution is basically equivalent to the initial code given in the @sect.ref{Raw Javascript} section of @sect.ref{Interactive Web Pages}, with the additional code necessary for aggregation. As described in @sect.ref{dom.extensions}, we can make use of the @hl.scala{Ajax} object to make it slightly tidier. @sect{Using dom.extensions.Ajax} - @example(scrollDiv, "Futures().main1") + @example(exampleDiv, "Futures().main1") @hl.ref("examples/demos/src/main/scala/advanced/Futures.scala", "def handle1", "main") @p @@ -204,7 +201,7 @@ However, we still have the messiness inherent in the result aggregation: we don't actually want to perform our action (writing to the @hl.scala{output} div) when one @hl.scala{Future} is complete, but only when @i{all} the @hl.scala{Future}s are complete. Thus we still need to do some amount of manual book-keeping in the @hl.scala{results} buffer. @sect{Future Combinators} - @example(scrollDiv, "Futures().main2") + @example(exampleDiv, "Futures().main2") @hl.ref("examples/demos/src/main/scala/advanced/Futures.scala", "def handle2", "main") @p diff --git a/examples/demos/src/main/scala/scrollmenu/ScrollMenu.scala b/examples/demos/src/main/scala/scrollmenu/ScrollMenu.scala index 06ff753..ce3f07f 100644 --- a/examples/demos/src/main/scala/scrollmenu/ScrollMenu.scala +++ b/examples/demos/src/main/scala/scrollmenu/ScrollMenu.scala @@ -163,6 +163,7 @@ class ScrollSpy(structure: Tree[String], scroll(winItem.frag.children(0)) dom.history.replaceState(null, null, "#" + winItem.id) previousWin = winItem +// println(winPath.map(_.value.id)) walkTree(winPath) } } -- cgit v1.2.3