OLD | NEW |
1 import 'dart:async'; | 1 import 'dart:async'; |
2 import 'dart:html'; | 2 import 'dart:html'; |
3 import 'package:bot/bot.dart'; | 3 import 'package:bot/bot.dart'; |
4 import 'package:web_ui/web_ui.dart'; | 4 import 'package:web_ui/web_ui.dart'; |
5 import 'package:widget/effects.dart'; | 5 import 'package:widget/effects.dart'; |
6 import 'package:widget/widget.dart'; | 6 import 'package:widget/widget.dart'; |
7 | 7 |
8 // TODO: esc and click outside to collapse | 8 // TODO: esc and click outside to collapse |
9 // https://github.com/kevmoo/widget.dart/issues/14 | 9 // https://github.com/kevmoo/widget.dart/issues/14 |
10 | 10 |
(...skipping 29 matching lines...) Expand all Loading... |
40 if(value) { | 40 if(value) { |
41 // before we set the local shown value, ensure | 41 // before we set the local shown value, ensure |
42 // all of the other dropdowns are closed | 42 // all of the other dropdowns are closed |
43 closeDropdowns(); | 43 closeDropdowns(); |
44 } | 44 } |
45 | 45 |
46 _isShown = value; | 46 _isShown = value; |
47 | 47 |
48 final action = _isShown ? ShowHideAction.SHOW : ShowHideAction.HIDE; | 48 final action = _isShown ? ShowHideAction.SHOW : ShowHideAction.HIDE; |
49 | 49 |
50 final headerElement = this.query('x-dropdown > .dropdown'); | 50 final headerElement = this.query('[is=x-dropdown] > .dropdown'); |
51 | 51 |
52 if(headerElement != null) { | 52 if(headerElement != null) { |
53 if(_isShown) { | 53 if(_isShown) { |
54 headerElement.classes.add('open'); | 54 headerElement.classes.add('open'); |
55 } else { | 55 } else { |
56 headerElement.classes.remove('open'); | 56 headerElement.classes.remove('open'); |
57 } | 57 } |
58 } | 58 } |
59 | 59 |
60 final contentDiv = this.query('x-dropdown > .dropdown-menu'); | 60 final contentDiv = this.query('[is=x-dropdown] > .dropdown-menu'); |
61 if(contentDiv != null) { | 61 if(contentDiv != null) { |
62 ShowHide.begin(action, contentDiv, effect: _effect); | 62 ShowHide.begin(action, contentDiv, effect: _effect); |
63 } | 63 } |
64 ShowHideComponent.dispatchToggleEvent(this); | 64 ShowHideComponent.dispatchToggleEvent(this); |
65 } | 65 } |
66 } | 66 } |
67 | 67 |
68 Stream<Event> get onToggle => ShowHideComponent.toggleEvent.forTarget(this); | 68 Stream<Event> get onToggle => ShowHideComponent.toggleEvent.forTarget(this); |
69 | 69 |
70 void hide() { | 70 void hide() { |
71 isShown = false; | 71 isShown = false; |
72 } | 72 } |
73 | 73 |
74 void show() { | 74 void show() { |
75 isShown = true; | 75 isShown = true; |
76 } | 76 } |
77 | 77 |
78 void toggle() { | 78 void toggle() { |
79 isShown = !isShown; | 79 isShown = !isShown; |
80 } | 80 } |
81 | 81 |
82 static void closeDropdowns() { | 82 static void closeDropdowns() { |
83 document.queryAll('x-dropdown') | 83 document.queryAll('[is=x-dropdown]') |
84 .where((e) => e.xtag is Dropdown) | 84 .where((e) => e.xtag is Dropdown) |
85 .map((e) => e.xtag as Dropdown) | 85 .map((e) => e.xtag as Dropdown) |
86 .forEach((dd) => dd.hide()); | 86 .forEach((dd) => dd.hide()); |
87 } | 87 } |
88 | 88 |
89 @protected | 89 @protected |
90 void created() { | 90 void created() { |
91 this.onClick.listen(_onClick); | 91 this.onClick.listen(_onClick); |
92 this.onKeyDown.listen(_onKeyDown); | 92 this.onKeyDown.listen(_onKeyDown); |
93 } | 93 } |
94 | 94 |
95 void _onKeyDown(KeyboardEvent e) { | 95 void _onKeyDown(KeyboardEvent e) { |
96 if(!e.defaultPrevented && e.keyCode == KeyCode.ESC) { | 96 if(!e.defaultPrevented && e.keyCode == KeyCode.ESC) { |
97 this.hide(); | 97 this.hide(); |
98 e.preventDefault(); | 98 e.preventDefault(); |
99 } | 99 } |
100 } | 100 } |
101 | 101 |
102 void _onClick(MouseEvent event) { | 102 void _onClick(MouseEvent event) { |
103 if(!event.defaultPrevented && event.target is Element) { | 103 if(!event.defaultPrevented && event.target is Element) { |
104 final Element target = event.target; | 104 final Element target = event.target; |
105 if(target != null && target.dataset['toggle'] == 'dropdown') { | 105 if(target != null && target.dataset['toggle'] == 'dropdown') { |
106 toggle(); | 106 toggle(); |
107 event.preventDefault(); | 107 event.preventDefault(); |
108 target.focus(); | 108 target.focus(); |
109 } | 109 } |
110 } | 110 } |
111 } | 111 } |
112 } | 112 } |
OLD | NEW |