diff options
author | Emmanuel ROHEE <erohee@amdocs.com> | 2014-09-11 15:07:44 +0200 |
---|---|---|
committer | Emmanuel ROHEE <erohee@amdocs.com> | 2014-09-11 15:07:44 +0200 |
commit | aa347b52bace5cfe1ff528ad16973e02ae1b5dc1 (patch) | |
tree | 183cd95334a27fe089cb5e29f705632b23fc6099 | |
parent | Invite: reset the input when the invitation has been done (diff) | |
download | synapse-aa347b52bace5cfe1ff528ad16973e02ae1b5dc1.tar.xz |
Use autofill-event.js to workaround browsers issue: Form model doesn't update on autocomplete
https://github.com/angular/angular.js/issues/1460
Diffstat (limited to '')
-rw-r--r-- | webclient/index.html | 1 | ||||
-rwxr-xr-x | webclient/js/autofill-event.js | 117 |
2 files changed, 118 insertions, 0 deletions
diff --git a/webclient/index.html b/webclient/index.html index dd2393722c..9eea08215c 100644 --- a/webclient/index.html +++ b/webclient/index.html @@ -17,6 +17,7 @@ <script src="js/angular-sanitize.min.js"></script> <script src="js/angular-animate.min.js"></script> <script type='text/javascript' src='js/ng-infinite-scroll-matrix.js'></script> + <script type='text/javascript' src='js/autofill-event.js'></script> <script src="app.js"></script> <script src="config.js"></script> <script src="app-controller.js"></script> diff --git a/webclient/js/autofill-event.js b/webclient/js/autofill-event.js new file mode 100755 index 0000000000..006f83e1be --- /dev/null +++ b/webclient/js/autofill-event.js @@ -0,0 +1,117 @@ +/** + * Autofill event polyfill ##version:1.0.0## + * (c) 2014 Google, Inc. + * License: MIT + */ +(function(window) { + var $ = window.jQuery || window.angular.element; + var rootElement = window.document.documentElement, + $rootElement = $(rootElement); + + addGlobalEventListener('change', markValue); + addValueChangeByJsListener(markValue); + + $.prototype.checkAndTriggerAutoFillEvent = jqCheckAndTriggerAutoFillEvent; + + // Need to use blur and not change event + // as Chrome does not fire change events in all cases an input is changed + // (e.g. when starting to type and then finish the input by auto filling a username) + addGlobalEventListener('blur', function(target) { + // setTimeout needed for Chrome as it fills other + // form fields a little later... + window.setTimeout(function() { + findParentForm(target).find('input').checkAndTriggerAutoFillEvent(); + }, 20); + }); + + window.document.addEventListener('DOMContentLoaded', function() { + // The timeout is needed for Chrome as it auto fills + // login forms some time after DOMContentLoaded! + window.setTimeout(function() { + $rootElement.find('input').checkAndTriggerAutoFillEvent(); + }, 200); + }, false); + + return; + + // ---------- + + function jqCheckAndTriggerAutoFillEvent() { + var i, el; + for (i=0; i<this.length; i++) { + el = this[i]; + if (!valueMarked(el)) { + markValue(el); + triggerChangeEvent(el); + } + } + } + + function valueMarked(el) { + var val = el.value, + $$currentValue = el.$$currentValue; + if (!val && !$$currentValue) { + return true; + } + return val === $$currentValue; + } + + function markValue(el) { + el.$$currentValue = el.value; + } + + function addValueChangeByJsListener(listener) { + var jq = window.jQuery || window.angular.element, + jqProto = jq.prototype; + var _val = jqProto.val; + jqProto.val = function(newValue) { + var res = _val.apply(this, arguments); + if (arguments.length > 0) { + forEach(this, function(el) { + listener(el, newValue); + }); + } + return res; + } + } + + function addGlobalEventListener(eventName, listener) { + // Use a capturing event listener so that + // we also get the event when it's stopped! + // Also, the blur event does not bubble. + rootElement.addEventListener(eventName, onEvent, true); + + function onEvent(event) { + var target = event.target; + listener(target); + } + } + + function findParentForm(el) { + while (el) { + if (el.nodeName === 'FORM') { + return $(el); + } + el = el.parentNode; + } + return $(); + } + + function forEach(arr, listener) { + if (arr.forEach) { + return arr.forEach(listener); + } + var i; + for (i=0; i<arr.length; i++) { + listener(arr[i]); + } + } + + function triggerChangeEvent(element) { + var doc = window.document; + var event = doc.createEvent("HTMLEvents"); + event.initEvent("change", true, true); + element.dispatchEvent(event); + } + +})(window); |