1 files changed, 109 insertions, 0 deletions
diff --git a/templates/assets/bootstrap-material-design/js/autofill.js b/templates/assets/bootstrap-material-design/js/autofill.js
new file mode 100644
index 0000000..2ada9ec
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/js/autofill.js
@@ -0,0 +1,109 @@
+import Base from './base'
+
+const Autofill = (($) => {
+
+  /**
+   * ------------------------------------------------------------------------
+   * Constants
+   * ------------------------------------------------------------------------
+   */
+  const NAME = 'autofill'
+  const DATA_KEY = `bmd.${NAME}`
+  const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
+  const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
+
+  const Default = {}
+
+  /**
+   * ------------------------------------------------------------------------
+   * Class Definition
+   * ------------------------------------------------------------------------
+   */
+  class Autofill extends Base {
+
+    constructor($element, config) {
+      super($element, $.extend(true, {}, Default, config))
+
+      this._watchLoading()
+      this._attachEventHandlers()
+    }
+
+    dispose() {
+      super.dispose(DATA_KEY)
+    }
+
+    // ------------------------------------------------------------------------
+    // private
+
+    _watchLoading() {
+      // After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
+      setTimeout(() => {
+        clearInterval(this._onLoading)
+      }, 10000)
+    }
+
+    // This part of code will detect autofill when the page is loading (username and password inputs for example)
+    _onLoading() {
+      setInterval(() => {
+        $('input[type!=checkbox]').each((index, element) => {
+          let $element = $(element)
+          if ($element.val() && $element.val() !== $element.attr('value')) {
+            $element.trigger('change')
+          }
+        })
+      }, 100)
+    }
+
+    _attachEventHandlers() {
+      // Listen on inputs of the focused form
+      //  (because user can select from the autofill dropdown only when the input has focus)
+      let focused = null
+      $(document)
+        .on('focus', 'input', (event) => {
+          let $inputs = $(event.currentTarget).closest('form').find('input').not('[type=file]')
+          focused = setInterval(() => {
+            $inputs.each((index, element) => {
+              let $element = $(element)
+              if ($element.val() !== $element.attr('value')) {
+                $element.trigger('change')
+              }
+            })
+          }, 100)
+        })
+        .on('blur', '.form-group input', () => {
+          clearInterval(focused)
+        })
+    }
+
+    // ------------------------------------------------------------------------
+    // static
+    static _jQueryInterface(config) {
+      return this.each(function () {
+        let $element = $(this)
+        let data = $element.data(DATA_KEY)
+
+        if (!data) {
+          data = new Autofill($element, config)
+          $element.data(DATA_KEY, data)
+        }
+      })
+    }
+  }
+
+  /**
+   * ------------------------------------------------------------------------
+   * jQuery
+   * ------------------------------------------------------------------------
+   */
+  $.fn[JQUERY_NAME] = Autofill._jQueryInterface
+  $.fn[JQUERY_NAME].Constructor = Autofill
+  $.fn[JQUERY_NAME].noConflict = () => {
+    $.fn[JQUERY_NAME] = JQUERY_NO_CONFLICT
+    return Autofill._jQueryInterface
+  }
+
+  return Autofill
+
+})(jQuery)
+
+export default Autofill