3
Copyright 2011 Yahoo! Inc. All rights reserved.
4
Licensed under the BSD License.
5
http://yuilibrary.com/license/
7
YUI.add('event-valuechange', function(Y) {
10
* Adds a synthetic <code>valueChange</code> event that fires when the
11
* <code>value</code> property of an input field or textarea changes as a result
12
* of a keystroke, mouse operation, or input method editor (IME) input event.
14
* @module event-valuechange
18
* Provides the implementation for the synthetic <code>valueChange</code> event.
28
// Just a simple namespace to make methods overridable.
30
// -- Static Constants -----------------------------------------------------
33
* Interval (in milliseconds) at which to poll for changes to the value of
34
* an element with one or more <code>valueChange</code> subscribers when the
35
* user is likely to be interacting with it.
37
* @property POLL_INTERVAL
45
* Timeout (in milliseconds) after which to stop polling when there hasn't
46
* been any new activity (keypresses, mouse clicks, etc.) on an element.
55
// -- Protected Static Properties ------------------------------------------
61
// -- Protected Static Methods ---------------------------------------------
64
* Called at an interval to poll for changes to the value of the specified
69
* @param {String} stamp
70
* @param {EventFacade} e
74
_poll: function (node, stamp, e) {
75
var domNode = node._node, // performance cheat; getValue() is a big hit when polling
76
newVal = domNode && domNode.value,
77
prevVal = VC._history[stamp],
81
Y.log('_poll: node ' + stamp + ' disappeared; stopping polling.', 'warn', 'event-valuechange');
82
VC._stopPolling(node, stamp);
86
if (newVal !== prevVal) {
87
VC._history[stamp] = newVal;
95
YArray.each(VC._notifiers[stamp], function (notifier) {
96
notifier.fire(facade);
99
VC._refreshTimeout(node, stamp);
104
* Restarts the inactivity timeout for the specified node.
106
* @method _refreshTimeout
108
* @param {String} stamp
112
_refreshTimeout: function (node, stamp) {
113
VC._stopTimeout(node, stamp); // avoid dupes
115
// If we don't see any changes within the timeout period (10 seconds by
116
// default), stop polling.
117
VC._timeouts[stamp] = setTimeout(function () {
118
VC._stopPolling(node, stamp);
121
Y.log('_refreshTimeout: ' + stamp, 'info', 'event-valuechange');
125
* Begins polling for changes to the <code>value</code> property of the
126
* specified node. If polling is already underway for the specified node,
127
* it will not be restarted unless the <i>force</i> parameter is
130
* @method _startPolling
131
* @param {Node} node Node to watch.
132
* @param {String} stamp (optional) Object stamp for the node. Will be
133
* generated if not provided (provide it to improve performance).
134
* @param {EventFacade} e (optional) Event facade of the event that
135
* initiated the polling (if any).
136
* @param {Boolean} force (optional) If <code>true</code>, polling will be
137
* restarted even if we're already polling this node.
141
_startPolling: function (node, stamp, e, force) {
143
stamp = Y.stamp(node);
146
// Don't bother continuing if we're already polling.
147
if (!force && VC._intervals[stamp]) {
151
VC._stopPolling(node, stamp); // avoid dupes
153
// Poll for changes to the node's value. We can't rely on keyboard
154
// events for this, since the value may change due to a mouse-initiated
155
// paste event, an IME input event, or for some other reason that
156
// doesn't trigger a key event.
157
VC._intervals[stamp] = setInterval(function () {
158
VC._poll(node, stamp, e);
159
}, VC.POLL_INTERVAL);
161
VC._refreshTimeout(node, stamp, e);
163
Y.log('_startPolling: ' + stamp, 'info', 'event-valuechange');
167
* Stops polling for changes to the specified node's <code>value</code>
170
* @method _stopPolling
172
* @param {String} stamp (optional)
176
_stopPolling: function (node, stamp) {
178
stamp = Y.stamp(node);
181
VC._intervals[stamp] = clearInterval(VC._intervals[stamp]);
182
VC._stopTimeout(node, stamp);
184
Y.log('_stopPolling: ' + stamp, 'info', 'event-valuechange');
188
* Clears the inactivity timeout for the specified node, if any.
190
* @method _stopTimeout
192
* @param {String} stamp (optional)
196
_stopTimeout: function (node, stamp) {
198
stamp = Y.stamp(node);
201
VC._timeouts[stamp] = clearTimeout(VC._timeouts[stamp]);
204
// -- Protected Static Event Handlers --------------------------------------
207
* Stops polling when a node's blur event fires.
210
* @param {EventFacade} e
214
_onBlur: function (e) {
215
VC._stopPolling(e.currentTarget);
219
* Resets a node's history and starts polling when a focus event occurs.
222
* @param {EventFacade} e
226
_onFocus: function (e) {
227
var node = e.currentTarget;
229
VC._history[Y.stamp(node)] = node.get(VALUE);
230
VC._startPolling(node, null, e);
234
* Starts polling when a node receives a keyDown event.
237
* @param {EventFacade} e
241
_onKeyDown: function (e) {
242
VC._startPolling(e.currentTarget, null, e);
246
* Starts polling when an IME-related keyUp event occurs on a node.
249
* @param {EventFacade} e
253
_onKeyUp: function (e) {
254
// These charCodes indicate that an IME has started. We'll restart
255
// polling and give the IME up to 10 seconds (by default) to finish.
256
if (e.charCode === 229 || e.charCode === 197) {
257
VC._startPolling(e.currentTarget, null, e, true);
262
* Starts polling when a node receives a mouseDown event.
264
* @method _onMouseDown
265
* @param {EventFacade} e
269
_onMouseDown: function (e) {
270
VC._startPolling(e.currentTarget, null, e);
274
* Called when event-valuechange receives a new subscriber.
276
* @method _onSubscribe
278
* @param {Subscription} subscription
279
* @param {SyntheticEvent.Notifier} notifier
283
_onSubscribe: function (node, subscription, notifier) {
284
var stamp = Y.stamp(node),
285
notifiers = VC._notifiers[stamp];
287
VC._history[stamp] = node.get(VALUE);
289
notifier._handles = node.on({
292
keydown : VC._onKeyDown,
294
mousedown: VC._onMouseDown
298
notifiers = VC._notifiers[stamp] = [];
301
notifiers.push(notifier);
305
* Called when event-valuechange loses a subscriber.
307
* @method _onUnsubscribe
309
* @param {Subscription} subscription
310
* @param {SyntheticEvent.Notifier} notifier
314
_onUnsubscribe: function (node, subscription, notifier) {
315
var stamp = Y.stamp(node),
316
notifiers = VC._notifiers[stamp],
317
index = YArray.indexOf(notifiers, notifier);
319
notifier._handles.detach();
322
notifiers.splice(index, 1);
324
if (!notifiers.length) {
325
VC._stopPolling(node, stamp);
327
delete VC._notifiers[stamp];
328
delete VC._history[stamp];
336
* Synthetic event that fires when the <code>value</code> property of an input
337
* field or textarea changes as a result of a keystroke, mouse operation, or
338
* input method editor (IME) input event.
342
* Unlike the <code>onchange</code> event, this event fires when the value
343
* actually changes and not when the element loses focus. This event also
344
* reports IME and multi-stroke input more reliably than <code>oninput</code> or
345
* the various key events across browsers.
350
* YUI().use('event-valuechange', function (Y) {
351
* Y.one('input').on('valueChange', function (e) {
352
* // Handle valueChange events on the first input element on the page.
357
* @param {EventFacade} e Event facade with the following additional
361
* <dt>prevVal (String)</dt>
363
* Previous value before the latest change.
366
* <dt>newVal (String)</dt>
368
* New value after the latest change.
375
Y.Event.define('valueChange', {
376
detach: VC._onUnsubscribe,
377
on : VC._onSubscribe,
387
}, '3.4.1' ,{requires:['event-focus', 'event-synthetic']});