OLD | NEW |
1 part of angular.directive; | 1 part of angular.directive; |
2 | 2 |
3 // NOTE(deboer): onXX functions are now typed as 'var' instead of 'Getter' | 3 // NOTE(deboer): onXX functions are now typed as 'var' instead of 'Getter' |
4 // to work-around https://code.google.com/p/dart/issues/detail?id=13519 | 4 // to work-around https://code.google.com/p/dart/issues/detail?id=13519 |
5 | 5 |
6 /** | 6 /** |
7 * Allows you to specify custom behavior for DOM UI events such as mouse, | 7 * Allows you to specify custom behavior for DOM UI events such as mouse, |
8 * keyboard and touch events. | 8 * keyboard and touch events. |
9 * | 9 * |
10 * The custom behavior is specified via an Angular binding expression specified | 10 * The custom behavior is specified via an Angular binding expression specified |
(...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
70 * - [ng-speechchange] (documented in dart but not available) | 70 * - [ng-speechchange] (documented in dart but not available) |
71 * - [ng-submit] | 71 * - [ng-submit] |
72 * - [ng-toucheancel] | 72 * - [ng-toucheancel] |
73 * - [ng-touchend] | 73 * - [ng-touchend] |
74 * - [ng-touchenter] | 74 * - [ng-touchenter] |
75 * - [ng-touchleave] | 75 * - [ng-touchleave] |
76 * - [ng-touchmove] | 76 * - [ng-touchmove] |
77 * - [ng-touchstart] | 77 * - [ng-touchstart] |
78 * - [ng-transitionend] | 78 * - [ng-transitionend] |
79 */ | 79 */ |
80 @NgDirective(selector: '[ng-abort]', map: const {'ng-abort':
'&onAbort'}) | 80 @Decorator(selector: '[ng-abort]', map: const {'ng-abort':
'&onAbort'}) |
81 @NgDirective(selector: '[ng-beforecopy]', map: const {'ng-beforecopy':
'&onBeforeCopy'}) | 81 @Decorator(selector: '[ng-beforecopy]', map: const {'ng-beforecopy':
'&onBeforeCopy'}) |
82 @NgDirective(selector: '[ng-beforecut]', map: const {'ng-beforecut':
'&onBeforeCut'}) | 82 @Decorator(selector: '[ng-beforecut]', map: const {'ng-beforecut':
'&onBeforeCut'}) |
83 @NgDirective(selector: '[ng-beforepaste]', map: const {'ng-beforepaste':
'&onBeforePaste'}) | 83 @Decorator(selector: '[ng-beforepaste]', map: const {'ng-beforepaste':
'&onBeforePaste'}) |
84 @NgDirective(selector: '[ng-blur]', map: const {'ng-blur':
'&onBlur'}) | 84 @Decorator(selector: '[ng-blur]', map: const {'ng-blur':
'&onBlur'}) |
85 @NgDirective(selector: '[ng-change]', map: const {'ng-change':
'&onChange'}) | 85 @Decorator(selector: '[ng-change]', map: const {'ng-change':
'&onChange'}) |
86 @NgDirective(selector: '[ng-click]', map: const {'ng-click':
'&onClick'}) | 86 @Decorator(selector: '[ng-click]', map: const {'ng-click':
'&onClick'}) |
87 @NgDirective(selector: '[ng-contextmenu]', map: const {'ng-contextmenu':
'&onContextMenu'}) | 87 @Decorator(selector: '[ng-contextmenu]', map: const {'ng-contextmenu':
'&onContextMenu'}) |
88 @NgDirective(selector: '[ng-copy]', map: const {'ng-copy':
'&onCopy'}) | 88 @Decorator(selector: '[ng-copy]', map: const {'ng-copy':
'&onCopy'}) |
89 @NgDirective(selector: '[ng-cut]', map: const {'ng-cut':
'&onCut'}) | 89 @Decorator(selector: '[ng-cut]', map: const {'ng-cut':
'&onCut'}) |
90 @NgDirective(selector: '[ng-doubleclick]', map: const {'ng-doubleclick':
'&onDoubleClick'}) | 90 @Decorator(selector: '[ng-doubleclick]', map: const {'ng-doubleclick':
'&onDoubleClick'}) |
91 @NgDirective(selector: '[ng-drag]', map: const {'ng-drag':
'&onDrag'}) | 91 @Decorator(selector: '[ng-drag]', map: const {'ng-drag':
'&onDrag'}) |
92 @NgDirective(selector: '[ng-dragend]', map: const {'ng-dragend':
'&onDragEnd'}) | 92 @Decorator(selector: '[ng-dragend]', map: const {'ng-dragend':
'&onDragEnd'}) |
93 @NgDirective(selector: '[ng-dragenter]', map: const {'ng-dragenter':
'&onDragEnter'}) | 93 @Decorator(selector: '[ng-dragenter]', map: const {'ng-dragenter':
'&onDragEnter'}) |
94 @NgDirective(selector: '[ng-dragleave]', map: const {'ng-dragleave':
'&onDragLeave'}) | 94 @Decorator(selector: '[ng-dragleave]', map: const {'ng-dragleave':
'&onDragLeave'}) |
95 @NgDirective(selector: '[ng-dragover]', map: const {'ng-dragover':
'&onDragOver'}) | 95 @Decorator(selector: '[ng-dragover]', map: const {'ng-dragover':
'&onDragOver'}) |
96 @NgDirective(selector: '[ng-dragstart]', map: const {'ng-dragstart':
'&onDragStart'}) | 96 @Decorator(selector: '[ng-dragstart]', map: const {'ng-dragstart':
'&onDragStart'}) |
97 @NgDirective(selector: '[ng-drop]', map: const {'ng-drop':
'&onDrop'}) | 97 @Decorator(selector: '[ng-drop]', map: const {'ng-drop':
'&onDrop'}) |
98 @NgDirective(selector: '[ng-error]', map: const {'ng-error':
'&onError'}) | 98 @Decorator(selector: '[ng-error]', map: const {'ng-error':
'&onError'}) |
99 @NgDirective(selector: '[ng-focus]', map: const {'ng-focus':
'&onFocus'}) | 99 @Decorator(selector: '[ng-focus]', map: const {'ng-focus':
'&onFocus'}) |
100 @NgDirective(selector: '[ng-fullscreenchange]', map: const {'ng-fullscreenchange
': '&onFullscreenChange'}) | 100 @Decorator(selector: '[ng-fullscreenchange]', map: const {'ng-fullscreenchange':
'&onFullscreenChange'}) |
101 @NgDirective(selector: '[ng-fullscreenerror]', map: const {'ng-fullscreenerror'
: '&onFullscreenError'}) | 101 @Decorator(selector: '[ng-fullscreenerror]', map: const {'ng-fullscreenerror':
'&onFullscreenError'}) |
102 @NgDirective(selector: '[ng-input]', map: const {'ng-input':
'&onInput'}) | 102 @Decorator(selector: '[ng-input]', map: const {'ng-input':
'&onInput'}) |
103 @NgDirective(selector: '[ng-invalid]', map: const {'ng-invalid':
'&onInvalid'}) | 103 @Decorator(selector: '[ng-invalid]', map: const {'ng-invalid':
'&onInvalid'}) |
104 @NgDirective(selector: '[ng-keydown]', map: const {'ng-keydown':
'&onKeyDown'}) | 104 @Decorator(selector: '[ng-keydown]', map: const {'ng-keydown':
'&onKeyDown'}) |
105 @NgDirective(selector: '[ng-keypress]', map: const {'ng-keypress':
'&onKeyPress'}) | 105 @Decorator(selector: '[ng-keypress]', map: const {'ng-keypress':
'&onKeyPress'}) |
106 @NgDirective(selector: '[ng-keyup]', map: const {'ng-keyup':
'&onKeyUp'}) | 106 @Decorator(selector: '[ng-keyup]', map: const {'ng-keyup':
'&onKeyUp'}) |
107 @NgDirective(selector: '[ng-load]', map: const {'ng-load':
'&onLoad'}) | 107 @Decorator(selector: '[ng-load]', map: const {'ng-load':
'&onLoad'}) |
108 @NgDirective(selector: '[ng-mousedown]', map: const {'ng-mousedown':
'&onMouseDown'}) | 108 @Decorator(selector: '[ng-mousedown]', map: const {'ng-mousedown':
'&onMouseDown'}) |
109 @NgDirective(selector: '[ng-mouseenter]', map: const {'ng-mouseenter':
'&onMouseEnter'}) | 109 @Decorator(selector: '[ng-mouseenter]', map: const {'ng-mouseenter':
'&onMouseEnter'}) |
110 @NgDirective(selector: '[ng-mouseleave]', map: const {'ng-mouseleave':
'&onMouseLeave'}) | 110 @Decorator(selector: '[ng-mouseleave]', map: const {'ng-mouseleave':
'&onMouseLeave'}) |
111 @NgDirective(selector: '[ng-mousemove]', map: const {'ng-mousemove':
'&onMouseMove'}) | 111 @Decorator(selector: '[ng-mousemove]', map: const {'ng-mousemove':
'&onMouseMove'}) |
112 @NgDirective(selector: '[ng-mouseout]', map: const {'ng-mouseout':
'&onMouseOut'}) | 112 @Decorator(selector: '[ng-mouseout]', map: const {'ng-mouseout':
'&onMouseOut'}) |
113 @NgDirective(selector: '[ng-mouseover]', map: const {'ng-mouseover':
'&onMouseOver'}) | 113 @Decorator(selector: '[ng-mouseover]', map: const {'ng-mouseover':
'&onMouseOver'}) |
114 @NgDirective(selector: '[ng-mouseup]', map: const {'ng-mouseup':
'&onMouseUp'}) | 114 @Decorator(selector: '[ng-mouseup]', map: const {'ng-mouseup':
'&onMouseUp'}) |
115 @NgDirective(selector: '[ng-mousewheel]', map: const {'ng-mousewheel':
'&onMouseWheel'}) | 115 @Decorator(selector: '[ng-mousewheel]', map: const {'ng-mousewheel':
'&onMouseWheel'}) |
116 @NgDirective(selector: '[ng-paste]', map: const {'ng-paste':
'&onPaste'}) | 116 @Decorator(selector: '[ng-paste]', map: const {'ng-paste':
'&onPaste'}) |
117 @NgDirective(selector: '[ng-reset]', map: const {'ng-reset':
'&onReset'}) | 117 @Decorator(selector: '[ng-reset]', map: const {'ng-reset':
'&onReset'}) |
118 @NgDirective(selector: '[ng-scroll]', map: const {'ng-scroll':
'&onScroll'}) | 118 @Decorator(selector: '[ng-scroll]', map: const {'ng-scroll':
'&onScroll'}) |
119 @NgDirective(selector: '[ng-search]', map: const {'ng-search':
'&onSearch'}) | 119 @Decorator(selector: '[ng-search]', map: const {'ng-search':
'&onSearch'}) |
120 @NgDirective(selector: '[ng-select]', map: const {'ng-select':
'&onSelect'}) | 120 @Decorator(selector: '[ng-select]', map: const {'ng-select':
'&onSelect'}) |
121 @NgDirective(selector: '[ng-selectstart]', map: const {'ng-selectstart':
'&onSelectStart'}) | 121 @Decorator(selector: '[ng-selectstart]', map: const {'ng-selectstart':
'&onSelectStart'}) |
122 //@NgDirective(selector: '[ng-speechchange]', map: const {'ng-speechchange':
'&onSpeechChange'}) | 122 //@Decorator(selector: '[ng-speechchange]', map: const {'ng-speechchange':
'&onSpeechChange'}) |
123 @NgDirective(selector: '[ng-submit]', map: const {'ng-submit':
'&onSubmit'}) | 123 @Decorator(selector: '[ng-submit]', map: const {'ng-submit':
'&onSubmit'}) |
124 @NgDirective(selector: '[ng-toucheancel]', map: const {'ng-touchcancel':
'&onTouchCancel'}) | 124 @Decorator(selector: '[ng-toucheancel]', map: const {'ng-touchcancel':
'&onTouchCancel'}) |
125 @NgDirective(selector: '[ng-touchend]', map: const {'ng-touchend':
'&onTouchEnd'}) | 125 @Decorator(selector: '[ng-touchend]', map: const {'ng-touchend':
'&onTouchEnd'}) |
126 @NgDirective(selector: '[ng-touchenter]', map: const {'ng-touchenter':
'&onTouchEnter'}) | 126 @Decorator(selector: '[ng-touchenter]', map: const {'ng-touchenter':
'&onTouchEnter'}) |
127 @NgDirective(selector: '[ng-touchleave]', map: const {'ng-touchleave':
'&onTouchLeave'}) | 127 @Decorator(selector: '[ng-touchleave]', map: const {'ng-touchleave':
'&onTouchLeave'}) |
128 @NgDirective(selector: '[ng-touchmove]', map: const {'ng-touchmove':
'&onTouchMove'}) | 128 @Decorator(selector: '[ng-touchmove]', map: const {'ng-touchmove':
'&onTouchMove'}) |
129 @NgDirective(selector: '[ng-touchstart]', map: const {'ng-touchstart':
'&onTouchStart'}) | 129 @Decorator(selector: '[ng-touchstart]', map: const {'ng-touchstart':
'&onTouchStart'}) |
130 @NgDirective(selector: '[ng-transitionend]', map: const {'ng-transitionend':
'&onTransitionEnd'}) | 130 @Decorator(selector: '[ng-transitionend]', map: const {'ng-transitionend':
'&onTransitionEnd'}) |
131 | 131 |
132 class NgEventDirective { | 132 class NgEvent { |
133 // Is it better to use a map of listeners or have 29 properties on this | 133 // Is it better to use a map of listeners or have 29 properties on this |
134 // object? One would pretty much only assign to one or two of those | 134 // object? One would pretty much only assign to one or two of those |
135 // properties. I'm opting for the map since it's less boilerplate code. | 135 // properties. I'm opting for the map since it's less boilerplate code. |
136 var listeners = {}; | 136 var listeners = {}; |
137 final dom.Element element; | 137 final dom.Element element; |
138 final Scope scope; | 138 final Scope scope; |
139 | 139 |
140 NgEventDirective(this.element, this.scope); | 140 NgEvent(this.element, this.scope); |
141 | 141 |
142 // NOTE: Do not use the element.on['some_event'].listen(...) syntax. Doing so | 142 // NOTE: Do not use the element.on['some_event'].listen(...) syntax. Doing so |
143 // has two downsides: | 143 // has two downsides: |
144 // - it loses the event typing | 144 // - it loses the event typing |
145 // - some DOM events may have multiple platform-dependent event names | 145 // - some DOM events may have multiple platform-dependent event names |
146 // under the covers. The standard Stream getters you will get the | 146 // under the covers. The standard Stream getters you will get the |
147 // platform specific event name automatically but you're on your own if | 147 // platform specific event name automatically but you're on your own if |
148 // you use the on[] syntax. This also applies to $dom_addEventListener. | 148 // you use the on[] syntax. This also applies to $dom_addEventListener. |
149 // Ref: http://api.dartlang.org/docs/releases/latest/dart_html/Events.html | 149 // Ref: http://api.dartlang.org/docs/releases/latest/dart_html/Events.html |
150 initListener(var stream, var handler) { | 150 initListener(var stream, var handler) { |
(...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
200 // set onSpeechChange(value) => initListener(element.onSpeechChange, v
alue); | 200 // set onSpeechChange(value) => initListener(element.onSpeechChange, v
alue); |
201 set onSubmit(value) => initListener(element.onSubmit, val
ue); | 201 set onSubmit(value) => initListener(element.onSubmit, val
ue); |
202 set onTouchCancel(value) => initListener(element.onTouchCancel, val
ue); | 202 set onTouchCancel(value) => initListener(element.onTouchCancel, val
ue); |
203 set onTouchEnd(value) => initListener(element.onTouchEnd, val
ue); | 203 set onTouchEnd(value) => initListener(element.onTouchEnd, val
ue); |
204 set onTouchEnter(value) => initListener(element.onTouchEnter, val
ue); | 204 set onTouchEnter(value) => initListener(element.onTouchEnter, val
ue); |
205 set onTouchLeave(value) => initListener(element.onTouchLeave, val
ue); | 205 set onTouchLeave(value) => initListener(element.onTouchLeave, val
ue); |
206 set onTouchMove(value) => initListener(element.onTouchMove, val
ue); | 206 set onTouchMove(value) => initListener(element.onTouchMove, val
ue); |
207 set onTouchStart(value) => initListener(element.onTouchStart, val
ue); | 207 set onTouchStart(value) => initListener(element.onTouchStart, val
ue); |
208 set onTransitionEnd(value) => initListener(element.onTransitionEnd, val
ue); | 208 set onTransitionEnd(value) => initListener(element.onTransitionEnd, val
ue); |
209 } | 209 } |
OLD | NEW |