Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
semantic-ui dropdown usage on binding.scala
/*
Auto-initializing semantic-ui dropdown
using DOM MutationObserver
*/
object SemanticUI {
@js.native
trait SemanticJQuery extends JQuery {
def dropdown(params: js.Any*): SemanticJQuery = js.native
}
implicit def jq2semantic(jq: JQuery): SemanticJQuery = jq.asInstanceOf[SemanticJQuery]
}
@dom def simpleDropdownSemantic: Binding[Element] = {
<select name="gender" class="ui dropdown" id="simple" data:tabindex="0">
<option value="">Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
}
def main(): Unit = {
if(navDebug) println("main ")
binding.dom.render(document.body, render)
import SemanticUI.jq2semantic
setAsyncInitForComponent(document.body,"simple",
() => org.scalajs.jquery.jQuery("#simple.ui.dropdown").dropdown()
)
}
def setAsyncInitForComponent(domNode: HTMLElement, elementId: String, jqueryFn: () => Unit): Unit = {
def observerCallback(muts: js.Array[MutationRecord], obs: MutationObserver) = {
def checkNode = (addedNode: Node) => {
if (addedNode.nodeType == Node.ELEMENT_NODE ) {
if (addedNode.asInstanceOf[HTMLElement].id == elementId)
{
jqueryFn()
}
}
}
// quick and dirty
def checkSubNodes(node: Node): Unit = {
checkNode(node)
if (node.childNodes.length > 0 ) {
for (i<- 0 until node.childNodes.length) {
checkSubNodes(node.childNodes(i))
}
}
}
muts.foreach((m: MutationRecord) => {
checkSubNodes(m.target)
})
}
val jqueryInitObserver: MutationObserver = new MutationObserver(observerCallback _)
val jqueryInitParams = js.Dynamic.literal(
subtree = true,
childList =true,
).asInstanceOf[MutationObserverInit]
jqueryInitObserver.observe(domNode, jqueryInitParams)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.