mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-22 17:47:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

converted autofill to es6

Browse Source
This commit is contained in:
Kevin Ross 2015-12-01 11:58:10 -06:00
parent 3d5f9df79a
commit 3c3bf7eb49
5 changed files with 163 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
Gruntfile.js
View File

@ -101,8 +101,8 @@ module.exports = function (grunt) {
},
files: {
'js/dist/util.js' : 'js/src/util.js',
'js/dist/ripples.js' : 'js/src/ripples.js' //,
//'js/dist/alert.js' : 'js/src/alert.js',
'js/dist/ripples.js' : 'js/src/ripples.js',
'js/dist/autofill.js' : 'js/src/autofill.js',
//'js/dist/button.js' : 'js/src/button.js',
//'js/dist/carousel.js' : 'js/src/carousel.js',
//'js/dist/collapse.js' : 'js/src/collapse.js',
@ -128,7 +128,8 @@ module.exports = function (grunt) {
},
files: {
'dist/js/umd/util.js' : 'js/src/util.js',
'dist/js/umd/ripples.js' : 'js/src/ripples.js' //,
'dist/js/umd/ripples.js' : 'js/src/ripples.js',
'dist/js/umd/autofill.js' : 'js/src/autofill.js',
//'dist/js/umd/alert.js' : 'js/src/alert.js',
//'dist/js/umd/button.js' : 'js/src/button.js',
//'dist/js/umd/carousel.js' : 'js/src/carousel.js',
@ -191,7 +192,7 @@ module.exports = function (grunt) {
src: [
'js/src/util.js',
'js/src/ripples.js',
//'js/src/alert.js',
'js/src/autofill.js',
//'js/src/button.js',
//'js/src/carousel.js',
//'js/src/collapse.js',

109
js/src/autofill.js Normal file
View File

@ -0,0 +1,109 @@
//import Util from './util'
const Autofill = (($) => {
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'autofill'
const DATA_KEY = `mdb.${NAME}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Default = {}
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
class Autofill {
constructor(config) {
this.config = $.extend({}, Default, config)
this._watchLoading()
this._attachEventHandlers()
}
dispose() {
$.removeData(this.element, DATA_KEY)
this.config = null
}
// ------------------------------------------------------------------------
// 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.triggerStart("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.triggerStart("change")
}
})
}, 100)
})
.on("blur", ".form-group input", () => {
clearInterval(focused)
})
}
// ------------------------------------------------------------------------
// static
static _jQueryInterface(config) {
return this.each(() => {
let $element = $(this)
let data = $element.data(DATA_KEY)
if (!data) {
data = new Autofill(this, config)
$element.data(DATA_KEY, data)
}
})
}
}
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Autofill._jQueryInterface
$.fn[NAME].Constructor = Autofill
$.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT
return Autofill._jQueryInterface
}
return Autofill
})(jQuery)
export default Autofill

16
js/src/old/es6Template.js
View File

@ -8,9 +8,11 @@ const Foo = (($) => {
* ------------------------------------------------------------------------
*/
const NAME = 'foo'
const DATA_KEY = `bmd.${NAME}`
const DATA_KEY = `mdb.${NAME}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Default = {}
/**
* ------------------------------------------------------------------------
* Class Definition
@ -18,13 +20,15 @@ const Foo = (($) => {
*/
class Foo {
constructor(element) {
constructor(element, config) {
this.element = element
this.config = $.extend({}, Default, config)
}
dispose() {
$.removeData(this.element, DATA_KEY)
this.element = null
this.config = null
}
// ------------------------------------------------------------------------
@ -43,13 +47,9 @@ const Foo = (($) => {
let data = $element.data(DATA_KEY)
if (!data) {
data = new Foo(this)
data = new Foo(this, config)
$element.data(DATA_KEY, data)
}
if (config === 'close') {
data[config](this)
}
})
}
}
@ -61,7 +61,7 @@ const Foo = (($) => {
*/
$.fn[NAME] = Foo._jQueryInterface
$.fn[NAME].Constructor = Foo
$.fn[NAME].noConflict = function() {
$.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT
return Foo._jQueryInterface
}

75
js/src/old/material.js
View File

@ -196,41 +196,41 @@
"ripples": function(selector) {
$((selector) ? selector : this.options.withRipples).ripples();
},
"autofill": function() {
// This part of code will detect autofill when the page is loading (username and password inputs for example)
var loading = setInterval(function() {
$("input[type!=checkbox]").each(function() {
var $this = $(this);
if ($this.val() && $this.val() !== $this.attr("value")) {
$this.triggerStart("change");
}
});
}, 100);
// After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
setTimeout(function() {
clearInterval(loading);
}, 10000);
},
"attachAutofillEventHandlers": function() {
// Listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus)
var focused;
$(document)
.on("focus", "input", function() {
var $inputs = $(this).parents("form").find("input").not("[type=file]");
focused = setInterval(function() {
$inputs.each(function() {
var $this = $(this);
if ($this.val() !== $this.attr("value")) {
$this.triggerStart("change");
}
});
}, 100);
})
.on("blur", ".form-group input", function() {
clearInterval(focused);
});
},
//"autofill": function() {
// // This part of code will detect autofill when the page is loading (username and password inputs for example)
// var loading = setInterval(function() {
// $("input[type!=checkbox]").each(function() {
// var $this = $(this);
// if ($this.val() && $this.val() !== $this.attr("value")) {
// $this.triggerStart("change");
// }
// });
// }, 100);
//
// // After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
// setTimeout(function() {
// clearInterval(loading);
// }, 10000);
//},
//"attachAutofillEventHandlers": function() {
// // Listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus)
// var focused;
// $(document)
// .on("focus", "input", function() {
// var $inputs = $(this).parents("form").find("input").not("[type=file]");
// focused = setInterval(function() {
// $inputs.each(function() {
// var $this = $(this);
// if ($this.val() !== $this.attr("value")) {
// $this.triggerStart("change");
// }
// });
// }, 100);
// })
// .on("blur", ".form-group input", function() {
// clearInterval(focused);
// });
//},
"init": function() {
var $document = $(document);
@ -251,8 +251,9 @@
this.radio();
}
if (this.options.autofill) {
this.autofill();
this.attachAutofillEventHandlers();
//this.autofill();
//this.attachAutofillEventHandlers();
new Autofill()
}
if (document.arrive && this.options.arrive) {

6
js/src/ripples.js
View File

@ -8,7 +8,7 @@ const Ripples = (($) => {
* ------------------------------------------------------------------------
*/
const NAME = 'ripples'
const DATA_KEY = `bmd.${NAME}`
const DATA_KEY = `mdb.${NAME}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Default = {
@ -251,13 +251,13 @@ const Ripples = (($) => {
// ------------------------------------------------------------------------
// static
static _jQueryInterface(options) {
static _jQueryInterface(config) {
return this.each(() => {
let element = $(this)
let data = element.data(DATA_KEY)
if (!data) {
data = new Ripples(this, options)
data = new Ripples(this, config)
element.data(DATA_KEY, data)
}
})