This post gives an example of Dart dropdown menu, which the Dart version of
my previous post JavaScript dropdown menu .
Please first see (Dartium is needed for the demo):
Demo
Source Code for Demo (html ):
dart-dropdown-menu-example.html |
repository |
view raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 <!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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 # menu-dropdown {
font-size : 48 px ;
color : blue ;
margin-left : 20 % ;
}
# menu-dropdown : hover {
cursor : pointer ;
}
# menuDiv-dropdown {
position : absolute ;
border : 1 px solid blue ;
}
. invisible {
display : none ;
}
Makefile for automating the development:
Makefile |
repository |
view raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32 # 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: