Scala html类代码示例

//设置package包名称以及导入依赖的类
package org.danielnixon.progressive.services

import org.scalajs.dom.html
import org.danielnixon.saferdom.implicits._

import scala.concurrent.{ Future, Promise }
import scala.scalajs.js.timers._
import scala.util.Success

class AnimationService {
  private def transition(element: html.Element, show: Boolean, preserveHeight: Boolean, durationOpt: Option[Int]): Future[Unit] = {
    val initialMinHeight = element.getAttributeOpt("data-initial-min-height") getOrElse {
      val m = element.style.minHeight
      element.setAttribute("data-initial-min-height", m)
      m
    }

    val minHeight = if (preserveHeight) s"${element.getBoundingClientRect.height}px" else initialMinHeight

    val duration = {
      val defaultDuration = 400
      durationOpt.getOrElse(defaultDuration)
    }

    element.style.minHeight = minHeight
    element.style.transition = s"opacity ${duration}ms ease"
    element.style.opacity = if (show) "1" else "0"

    val promise = Promise[Unit]()
    setTimeout(duration.toDouble)(promise.complete(Success(())))
    promise.future
  }

  def transitionOut(element: html.Element, duration: Option[Int]): Future[Unit] = {
    transition(element, false, true, duration)
  }

  def transitionIn(element: html.Element, preserveHeight: Boolean = false): Future[Unit] = {
    transition(element, true, preserveHeight, None)
  }
} 

//设置package包名称以及导入依赖的类
package org.danielnixon.progressive.services

import org.danielnixon.progressive.extensions.dom.ElementWrapper
import org.danielnixon.progressive.shared.api.{ CssClasses, DataAttributes, Target }
import org.scalajs.dom.html
import org.danielnixon.saferdom.implicits._
import org.scalajs.dom.raw.{ Element, HTMLElement }

class TargetService {
  def getTargetElement(element: Element, target: Target): Option[html.Element] = {
    val targetElement = target match {
      case Target.Next => element.nextElementSiblingOpt
      case Target.Parent => Some(element).collect({ case e: HTMLElement => e }).flatMap(_.parentElementOpt)
      case Target.ChildTarget => element.querySelectorOpt(s".${CssClasses.target}")
      case Target.ClosestRefresh => element.closest(s"[${DataAttributes.refresh}]")
    }

    targetElement collect {
      case htmlElement: html.Element => htmlElement
    }
  }
} 

//设置package包名称以及导入依赖的类
package org.danielnixon.progressive.services

import org.danielnixon.progressive.extensions.dom.{ EventTargetWrapper, NodeListSeq }
import org.danielnixon.progressive.shared.Wart
import org.danielnixon.progressive.shared.api.DataAttributes
import org.scalajs.dom.{ Element, Event, MouseEvent, html }

class EventHandlerSetupService(
    refreshService: => RefreshService,
    hijaxService: => HijaxService,
    additionalSetupInitial: html.Body => Unit,
    additionalSetup: Element => Unit
) {

  def setup(element: Element): Unit = {
    additionalSetup(element)

    element.querySelectorAll(s"[${DataAttributes.refresh}]").collect({ case e: Element => e }) foreach { node =>
      refreshService.setupRefresh(node)
    }
  }

  @SuppressWarnings(Array(Wart.AsInstanceOf, Wart.Nothing))
  def setupInitial(body: html.Body): Unit = {

    additionalSetupInitial(body)

    body.on("click", s"a[${DataAttributes.progressive}]") { (e: MouseEvent, element: Element) =>
      hijaxService.ajaxLinkClick(e, element.asInstanceOf[html.Anchor])
    }

    body.on("click", s"form[${DataAttributes.progressive}] button[${DataAttributes.progressive}]") { (e: Event, element: Element) =>
      hijaxService.ajaxSubmitButtonClick(element.asInstanceOf[html.Button])
    }

    body.on("submit", s"form[${DataAttributes.progressive}]") { (e: Event, element: Element) =>
      hijaxService.ajaxFormSubmit(e, element.asInstanceOf[html.Form])
    }

    setup(body)
  }
} 

//设置package包名称以及导入依赖的类
package ui

import org.scalajs.dom.html.{Div, Element}
import org.scalajs.dom.{CanvasRenderingContext2D, document, html}
import ui.helper.HtmlCreator

object Road {
  val cellCountPerRow = 150
  val cellSizeInPixels = 5

  def setupUI(): Element = {

    val roadBox = HtmlCreator.create[Div]("simulation-box")

    val simulationCanvas = document.createElement("canvas")
    simulationCanvas.id = "simulation-canvas"
    simulationCanvas.setAttribute("width", cellCountPerRow * cellSizeInPixels + "px")

    roadBox.appendChild(simulationCanvas)

    roadBox
  }

  def draw(road: Vector[Option[Int]]): Unit = {
    val rows = road.length / cellCountPerRow
    val canvas = document.getElementById("simulation-canvas").asInstanceOf[html.Canvas]
    val ctx = canvas.getContext("2d").asInstanceOf[CanvasRenderingContext2D]
    canvas.width = cellCountPerRow * cellSizeInPixels
    canvas.height = rows * cellSizeInPixels
    ctx.strokeStyle = "red"
    ctx.lineWidth = 20

    road.zipWithIndex.foreach(r => {
      if (r._1.isDefined) {
        ctx.fillRect(cellSizeInPixels*(r._2 % cellCountPerRow), cellSizeInPixels*(r._2 / cellCountPerRow), cellSizeInPixels, cellSizeInPixels)
      }
      else {
        ctx.clearRect(cellSizeInPixels*(r._2 % cellCountPerRow), cellSizeInPixels*(r._2 / cellCountPerRow), cellSizeInPixels, cellSizeInPixels)
      }
    })

    ctx.stroke
  }
} 

//设置package包名称以及导入依赖的类
package com.outr.nextui.examples.browser

import com.outr.nextui.browser.ScalaJS
import com.outr.nextui.examples.Examples
import org.scalajs.dom.{Event, document, html}

import scala.scalajs.js.JSApp

object ScalaJSExamples extends JSApp {
  override def main(): Unit = {
    val div = document.createElement("div").asInstanceOf[html.Div]
    Examples().foreach { ui =>
      val a = document.createElement("a").asInstanceOf[html.Anchor]
      a.href = "#"
      a.addEventListener("click", {(evt: Event) =>
        document.body.removeChild(div)
        ScalaJS(ui)
      }, true)
      a.textContent = ui.name
      val p = document.createElement("p").asInstanceOf[html.Paragraph]
      p.appendChild(a)
      div.appendChild(p)
    }
    document.body.appendChild(div)
  }
} 

//设置package包名称以及导入依赖的类
package com.github.kelebra.akka.js.snake

import akka.actor.{Actor, ActorLogging, PoisonPill}
import org.scalajs.dom
import org.scalajs.dom.html

trait Drawing extends Actor with ActorLogging {

  def draw(block: Block): Unit

  def erase(block: Block): Unit
}

case class CanvasDrawing(canvas: html.Canvas) extends Drawing {

  private val ctx = canvas.getContext("2d").asInstanceOf[dom.CanvasRenderingContext2D]

  def draw(block: Block): Unit = ctx.fillRect(block.x, block.y, block.radius, block.radius)

  def erase(block: Block): Unit = ctx.clearRect(block.x, block.y, block.radius, block.radius)

  def canDraw(block: Block): Boolean = {
    val radius = block.radius
    (block.x + radius) < canvas.width &&
      (block.x - radius) > 0 &&
      (block.y + radius) < canvas.height &&
      (block.y - radius) > 0
  }

  def receive: Receive = {
    case Draw(block) if canDraw(block) => draw(block)
    case Erase(block) => erase(block)
    case _ =>
      sender() ! PoisonPill
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      ctx.font = "20px Georgia"
      ctx.fillText("You lost!", canvas.width / 2, canvas.height / 2)
  }
} 

//设置package包名称以及导入依赖的类
package com.github.kelebra.akka.js.snake

import akka.actor.{ActorSystem, Props}
import org.scalajs.dom.{html, _}

import scala.scalajs.js
import scala.scalajs.js.annotation.JSExport
import scala.util.Random

object App extends js.JSApp {

  @JSExport
  override def main(): Unit = {

    val system = ActorSystem("system")
    val `moves per second` = 27
    val canvas = document.getElementById("canvas").asInstanceOf[html.Canvas]
    canvas.width = 1000
    canvas.height = 500

    val radius = 5

    val `random block generator`: () => Block = () => Block(
      radius + Random.nextInt(canvas.width - radius - 1) + 1,
      radius + Random.nextInt(canvas.height - radius - 1) + 1,
      radius
    )

    val pane = system.actorOf(Props(classOf[CanvasDrawing], canvas))
    val snake = system.actorOf(Props(classOf[Snake], pane))
    val keyboard = system.actorOf(Props(classOf[Keyboard], snake))
    val game = system.actorOf(Props(classOf[Game], snake, pane, `random block generator`, `moves per second`))

    game ! Start(?, Block(canvas.width / 2, canvas.height / 2, 5))
    document.onkeydown = (event: KeyboardEvent) => keyboard ! event.keyCode
  }
} 

//设置package包名称以及导入依赖的类
package org.nspl

import org.scalajs.dom
import org.scalajs.dom.raw._
import org.scalajs.dom.html

object svgFont {
  def apply(f: Font) = f match {
    case Monospace => s"font-family: monospace;font-size: ${Monospace.size}"
    case NamedFont(name, size) => s"font-family: ${name};font-size: ${size}"
  }
}


object canvasFont {
  def apply(f: Font) = f match {
    case Monospace => s"${Monospace.size}pt monospace"
    case NamedFont(name, size) => s"${size}pt $name"
  }
}

object CanvasGlyphMeasurer extends GlyphMeasurer[Font#F] {
  val canvas = dom.document.createElement("canvas").asInstanceOf[html.Canvas]
  val ctx =
    canvas.getContext("2d").asInstanceOf[dom.CanvasRenderingContext2D]
  val abc =
    "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPRQRSTUVWXYZ0123456789%,./][()]"
  def advance(s: Char, f: Font#F): Double = {
    ctx.font = canvasFont(f)
    ctx.measureText(s.toString).width
  }
  def lineMetrics(f: Font#F): LineMetrics = {
    ctx.font = canvasFont(f)
    LineMetrics(f.size.toDouble * 0.78, descent = f.size.toDouble * 0.22, 0)
  }
} 

//设置package包名称以及导入依赖的类
package se.lu.nateko.cp.doi.gui.views

import scalatags.JsDom.TypedTag
import scalatags.JsDom.all._
import scalatags.JsDom.Modifier
import org.scalajs.dom.Element
import org.scalajs.dom.html

object Bootstrap {

	def defaultPanel(title: String)(body: Modifier*): TypedTag[html.Div] =
		div(cls := "panel panel-default")(
			div(cls := "panel-heading")(
				span(cls := "panel-title")(title)
			),
			div(cls := "panel-body")(body)
		)

	def basicPanel(body: Modifier*): TypedTag[html.Div] =
		div(cls := "panel panel-default")(
			div(cls := "panel-body")(body)
		)

	def propValueRow(propHtml: Modifier*)(valHtml: Modifier*) =
		div(cls := "row")(
			div(cls := "col-md-1")(propHtml),
			div(cls := "col-md-11")(valHtml)
		)

	def basicPropValueWidget(name: String)(valHtml: Modifier*) = basicPanel{
		propValueRow(strong(name))(valHtml)
	}
} 

//设置package包名称以及导入依赖的类
package se.lu.nateko.cp.doi.gui.widgets.generic

import org.scalajs.dom.html
import scalatags.JsDom.all._
import org.scalajs.dom.raw.HTMLElement
import se.lu.nateko.cp.doi.gui.views.Constants

trait EntityWidget[E]{
	def element: html.Element
	protected def updateCb: E => Unit

	def highlightError(elem: HTMLElement, errorOpt: Option[String]): Unit = errorOpt match{
		case Some(err) =>
			elem.title = err
			elem.style.background = Constants.errorInputBackground
		case None =>
			elem.title = ""
			elem.style.background = ""
	}
} 

//设置package包名称以及导入依赖的类
package simple

import org.scalajs.dom
import org.scalajs.dom.ext.{Ajax, KeyCode}
import org.scalajs.dom.html
import org.scalajs.dom.raw.Node

import scala.scalajs.concurrent.JSExecutionContext.Implicits.runNow
import scala.scalajs.js.annotation.JSExport
import scalatags.JsDom.all._

@JSExport
object Client extends {

  @JSExport
  def main(container: html.Div): Node = {

    val inputBox = input.render
    val outputBox = ul.render

    def update() = Ajax.post("/mongo/data", inputBox.value).foreach { xhr =>
      val data = upickle.default.read[Seq[String]](xhr.responseText)
      outputBox.innerHTML = ""
      for (entry <- data) {
        outputBox.appendChild(
          li(b(entry)).render
        )
      }
    }

    inputBox.onkeyup = (e: dom.KeyboardEvent) => if (e.keyCode == KeyCode.Enter) update()
    inputBox.size = 100

    update()

    container.appendChild(
      div(
        h1("Oak"),
        div(b("Query: "), inputBox),
        outputBox
      ).render
    )
  }
} 

//设置package包名称以及导入依赖的类
package tutorial.webapp

import scala.scalajs.js.JSApp
import org.scalajs.dom
import dom.document
import tutorial.tree.BinaryTree._
import scala.xml
import scala.scalajs.js.annotation.JSExport
import org.scalajs.dom.html

object TutorialApp extends JSApp {

  var theTree: IntSet = Empty()

  def main(): Unit = {
   drawTree(theTree)
  }

  def drawTree(tree: IntSet) = {
    val content = toHtml(tree).toString
    val newNode = document.createElement("section")
    newNode.innerHTML = content
    new dom.ext.PimpedNodeList(document.body.querySelectorAll("section")).foreach( document.body.removeChild )
    document.body.appendChild(newNode)
  }

  @JSExport
  def addNode() = {
    val nodeValue = document.getElementById("nodeValue").asInstanceOf[html.Input].value.toInt
    theTree = incl(theTree, nodeValue)
    drawTree(theTree)
  }

} 

//设置package包名称以及导入依赖的类
package evogame.graphics

import evogame.evolution.types.Grid
import org.scalajs.dom
import org.scalajs.dom.html

import scala.scalajs.js
import scala.scalajs.js.timers.SetIntervalHandle

class Canvas(id: String) {
  val canvas = dom.document.getElementById(id).asInstanceOf[html.Canvas]
  val ctx = canvas.getContext("2d").asInstanceOf[dom.CanvasRenderingContext2D]
  ctx.strokeStyle = "#d3d3d3"
  ctx.lineWidth = 1

  def withFillStyle(alive: Boolean): Canvas = {
    if (alive) ctx.fillStyle = "black" else ctx.fillStyle = "white"
    this
  }

  def drawPixel(x: Int, y: Int, scaleX: Int, scaleY: Int): Canvas = {
    ctx.beginPath()
    ctx.rect(x * scaleX, y * scaleY, scaleX, scaleY)
    ctx.fill()
    ctx.stroke()
    this
  }

  def draw(g: Grid[Boolean]): Canvas = {
    val scaleX = canvas.width / g.size
    val scaleY = canvas.height / g.size
    Grid.range(g.size).zip(g.cells).map { case ((x, y), alive) => withFillStyle(alive).drawPixel(x, y, scaleX, scaleY) }
    this
  }

  type Stop = () => Unit

  def animate(s: Stream[Grid[Boolean]], speed: Double = 200, frames: Int = -1): Stop = {
    var current = s
    var times = 0

    def clear(handle: SetIntervalHandle) = () => js.timers.clearInterval(handle)

    lazy val handle: SetIntervalHandle = js.timers.setInterval(speed) {
      if (frames > 0 && times > frames - 1) clear(handle)()
      else {
        draw(current.head)
        times += 1
        current = current.tail
      }
    }
    clear(handle)
  }

} 

//设置package包名称以及导入依赖的类
package demo

import java.lang.Math._

import org.scalajs.dom
import org.scalajs.dom.{CanvasRenderingContext2D, html}
import scala.scalajs.js.annotation.{JSExport, JSExportTopLevel}

@JSExportTopLevel("Demo1")
object Demo1 {

  @JSExport
  def main(canvas: html.Canvas): Unit = {
    val draw: CanvasRenderingContext2D = canvas.getContext("2d").asInstanceOf[dom.CanvasRenderingContext2D]
    val (h, w) = (canvas.height, canvas.width)
    var x = 0.0
    var xx = x
    var inc = 1
    val graphs = Seq[(String, Double => Double)](
      ("red", sin),
      ("green", x => 2 - abs(x % 8 - 4)),
      ("blue", x => 3 * pow(sin(x / 12), 2) * sin(x))
    ).zipWithIndex
    dom.window.setInterval(() => {
      xx = xx + inc
      x = (x + 1) % w
      if (x == 0) {
        draw.clearRect(0, 0, w, h)
        inc = -inc
      }
      else for (((color, func), i) <- graphs) {
        val y = func(xx/w * 75) * h/40 + h/graphs.size * (i+0.5)
        draw.fillStyle = color
        draw.fillRect(xx, y, 1, 1)
      }
    }, 10)
  }
} 

//设置package包名称以及导入依赖的类
package demo

import java.lang.Math._

import org.scalajs.dom
import org.scalajs.dom.html
import paperjs.Basic.Point
import paperjs.Paper
import paperjs.Paths.Path
import paperjs.Styling.Color
import scala.scalajs.js.annotation.{JSExport, JSExportTopLevel}

@JSExportTopLevel("Demo2")
object Demo2 {

  @JSExport
  def main(canvas: html.Canvas): Unit = {
    Paper.setup(canvas)
    val (h, w) = (canvas.height, canvas.width)
    var x = 0.0
    var xx = x
    var inc = 1
    val graphs = Seq[(String, Double => Double, Path)](
      ("red", sin, new Path()),
      ("green", x => 2 - abs(x % 8 - 4), new Path()),
      ("blue", x => 3 * pow(sin(x / 12), 2) * sin(x), new Path())
    ).zipWithIndex
    dom.window.setInterval(() => {
      xx = xx + inc
      x = (x + 1) % w
      if (x == 0) {
        for (((color, func, path), i) <- graphs) {
          path.removeSegments(0, path.segments.length)
        }
        inc = -inc
      }
      else for (((color, func, path), i) <- graphs) {
        val y = func(xx / w * 75) * h / 40 + h / graphs.size * (i + 0.5)
        path.strokeColor = Color(color)
        path.add(new Point(xx, y))
        path.smooth()
      }
    }, 10)

  }
}