[Dart] Hide Div When Clicked Outside It

February 14, 2015

This post is the Dart version of my previous post Hide Div When Clicked Outside It [2].

Please first see (Dartium is needed for the demo):

Source Code for Demo (html):

dart-dropdown-menu-example.html | repository | view raw

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dart DropDown Menu Example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="menu-dropdown">Menu▼</div>
    <div id="menuDiv-dropdown" class="invisible">
      content<br>content<br>content
    </div>

  <script type='text/javascript'>
  var script = document.createElement('script');
  if (navigator.userAgent.indexOf('(Dart)') === -1) {
    // Browser doesn't support Dart
    script.setAttribute("type","text/javascript");
    script.setAttribute("src", "app.js");
  } else {
    script.setAttribute("type","application/dart");
    script.setAttribute("src", "app.dart");
  }
  document.getElementsByTagName("head")[0].appendChild(script);
  </script>
  </body>
</html>

Source Code for Demo (Dart):

app.dart | repository | view raw

import 'dart:html';

DivElement toggle = querySelector('#menu-dropdown');
DivElement menu = querySelector('#menuDiv-dropdown');

void check(Event e) {
  if ( !checkParent(e.target, menu) ) {
    //click NOT on the menu
    if ( checkParent(e.target, toggle) ) {
      // click on the link
      // http://stackoverflow.com/questions/13789879/getting-elements-global-document-coordinates-in-dart-aka-some-offset
      menu.style.left = toggle.getBoundingClientRect().left.toString() + 'px';
      // http://stackoverflow.com/questions/17756044/how-do-i-toggle-a-css-class-based-on-a-boolean-with-dart
      menu.classes.toggle('invisible');
    } else {
      // click both outside link and outside menu, hide menu
      menu.classes.add('invisible');
    }
  }
}

bool checkParent(target, elm) {
  while(target.parent != null) {
    if( target == elm ) { return true; }
    target = target.parent;
  }
  return false;
}

void main() {
  document.onClick.listen(check);
}

Source Code for Demo (css):

style.css | repository | view raw

#menu-dropdown {
  font-size: 48px;
  color: blue;
  margin-left: 20%;
}

#menu-dropdown:hover {
  cursor: pointer;
}

#menuDiv-dropdown {
  position: absolute;
  border: 1px solid blue;
}

.invisible {
  display: none;
}

Makefile for automating the development:

Makefile | repository | view raw

# path of Dart and utilities
DART_DIR=../../../../../dart
DART_SDK=$(DART_DIR)/dart-sdk
DART_SDK_BIN=$(DART_SDK)/bin
DARTVM=$(DART_SDK_BIN)/dart
DART2JS=$(DART_SDK_BIN)/dart2js
DARTPUB=$(DART_SDK_BIN)/pub
DARTIUM=$(DART_DIR)/chromium/chrome

HTML=dart-dropdown-menu-example.html

all: test

# Fix Dartium startup error:
# http://askubuntu.com/questions/369310/how-to-fix-missing-libudev-so-0-for-chrome-to-start-again
test:
	DART_FLAGS='--checked' $(DARTIUM) --user-data-dir=/tmp/data $(HTML) &

demo: js
	chromium-browser $(HTML)

js: app.dart
	$(DART2JS) --minify --out=app.js app.dart

# http://stackoverflow.com/questions/2989465/rm-rf-versus-rm-rf
clean:
	-rm *.js
	-rm *.deps
	-rm *.map

help:
	$(DARTVM) --print-flags

References:

[1]Javascript Drop Down Menu

[3]getting Element's global/document coordinates in Dart (aka $('some').offset())

[4]How do I toggle a CSS class based on a boolean, with Dart?

[5]Load Dart Script if Dartium, Otherwise Load JavaScript in Browser

[6][Golang] GopherJS DOM Example - Dropdown Menu