semantic-ui dropdown usage on binding.scala

dropdown-initialize.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)
  }