mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-19 14:06:33 +02:00
Add event listeners to each element in this.elements + wrap them in div
This commit is contained in:
parent
60a1bfc0a7
commit
d39fcde893
|
@ -1,6 +1,5 @@
|
||||||
{
|
{
|
||||||
"ecmaFeatures": {
|
"ecmaFeatures": {
|
||||||
"jsx": true,
|
|
||||||
"modules": true
|
"modules": true
|
||||||
},
|
},
|
||||||
"env": {
|
"env": {
|
||||||
|
@ -11,11 +10,5 @@
|
||||||
"rules": {
|
"rules": {
|
||||||
"quotes": [2, "single"],
|
"quotes": [2, "single"],
|
||||||
"strict": [2, "never"],
|
"strict": [2, "never"],
|
||||||
"react/jsx-uses-react": 2,
|
|
||||||
"react/jsx-uses-vars": 2,
|
|
||||||
"react/react-in-jsx-scope": 2
|
|
||||||
},
|
},
|
||||||
"plugins": [
|
|
||||||
"react"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|
2
assets/scripts/dist/bundle.js
vendored
2
assets/scripts/dist/bundle.js
vendored
|
@ -1 +1 @@
|
||||||
!function(e){function n(o){if(t[o])return t[o].exports;var i=t[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,n),i.loaded=!0,i.exports}var t={};return n.m=e,n.c=t,n.p="/assets/scripts/dist/",n(0)}([function(e,n,t){e.exports=t(1)},function(e,n,t){function o(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}var i,c=function(){function e(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(n,t,o){return t&&e(n.prototype,t),o&&e(n,o),n}}();"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e};!function(o,c){i=function(){return c(o)}.call(n,t,n,e),!(void 0!==i&&(e.exports=i))}(void 0,function(e){"use strict";var n=function(){function e(){o(this,e);var n={element:"[data-choice]",disabled:!1,maxItems:0,debug:!1,callbackOnInit:function(){},callbackOnRender:function(){},callbackOnKeyUp:function(){},callbackOnKeyDown:function(){},callbackOnEntry:function(){},callbackOnRemove:function(){}};this.options=n,this.elements=document.querySelectorAll(this.options.element),this.onClick=this.onClick.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.onChange=this.onChange.bind(this),this.onFocus=this.onFocus.bind(this),this.onBlur=this.onChange.bind(this),this.addEventListeners(),this.render()}return c(e,[{key:"isOpen",value:function(){}},{key:"isDisabled",value:function(){}},{key:"isEmpty",value:function(){}},{key:"onKeyDown",value:function(){console.log("Key down")}},{key:"onFocus",value:function(){console.log("Focus")}},{key:"onClick",value:function(){console.log("Click")}},{key:"onChange",value:function(){console.log("Change")}},{key:"addEventListeners",value:function(){document.addEventListener("click",this.onClick),document.addEventListener("keydown",this.onKeyDown),document.addEventListener("change",this.onChange),document.addEventListener("focus",this.onFocus),document.addEventListener("blur",this.onBlur)}},{key:"removeEventListeners",value:function(){document.removeEventListener("click",this.onClick),document.removeEventListener("keydown",this.onKeyDown),document.removeEventListener("change",this.onChange),document.removeEventListener("focus",this.onFocus),document.removeEventListener("blur",this.onBlur)}},{key:"setPlaceholder",value:function(){}},{key:"setValue",value:function(){}},{key:"getValue",value:function(){}},{key:"getPlaceholder",value:function(){}},{key:"search",value:function(){}},{key:"addItem",value:function(){}},{key:"removeItem",value:function(){}},{key:"removeAllItems",value:function(){}},{key:"createItemList",value:function(){}},{key:"render",value:function(){console.log("Render")}},{key:"destroy",value:function(){}}]),e}();new n})}]);
|
!function(e){function n(o){if(t[o])return t[o].exports;var i=t[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,n),i.loaded=!0,i.exports}var t={};return n.m=e,n.c=t,n.p="/assets/scripts/dist/",n(0)}([function(e,n,t){e.exports=t(1)},function(e,n,t){function o(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}var i,s=function(){function e(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(n,t,o){return t&&e(n.prototype,t),o&&e(n,o),n}}();"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e};!function(o,s){i=function(){return s(o)}.call(n,t,n,e),!(void 0!==i&&(e.exports=i))}(void 0,function(e){"use strict";var n=function(e,n){return n=n||document.createElement("div"),e.nextSibling?e.parentNode.insertBefore(n,e.nextSibling):e.parentNode.appendChild(n),n.appendChild(e)},t=function(){function e(){o(this,e);var n=document.createElement("fakeelement"),t={element:"[data-choice]",disabled:!1,maxItems:0,debug:!1,placeholder:!1,callbackOnInit:function(){},callbackOnRender:function(){},callbackOnKeyUp:function(){},callbackOnKeyDown:function(){},callbackOnEntry:function(){},callbackOnRemove:function(){}};this.options=t,this.initialised=!1,this.supports="querySelector"in document&&"addEventListener"in document&&"classList"in n,this.elements=document.querySelectorAll(this.options.element),this.onClick=this.onClick.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.onChange=this.onChange.bind(this),this.onFocus=this.onFocus.bind(this),this.onBlur=this.onChange.bind(this)}return s(e,[{key:"isOpen",value:function(){}},{key:"isDisabled",value:function(){}},{key:"isEmpty",value:function(){}},{key:"onKeyDown",value:function(e){console.log("Key down"),console.log(e.target)}},{key:"onFocus",value:function(e){console.log("Focus"),console.log(e.target)}},{key:"onClick",value:function(e){console.log("Click"),console.log(e.target)}},{key:"onChange",value:function(e){console.log("Change"),console.log(e.target)}},{key:"addEventListeners",value:function(e){e.addEventListener("click",this.onClick),e.addEventListener("keydown",this.onKeyDown),e.addEventListener("change",this.onChange),e.addEventListener("focus",this.onFocus),e.addEventListener("blur",this.onBlur)}},{key:"removeEventListeners",value:function(e){e.removeEventListener("click",this.onClick),e.removeEventListener("keydown",this.onKeyDown),e.removeEventListener("change",this.onChange),e.removeEventListener("focus",this.onFocus),e.removeEventListener("blur",this.onBlur)}},{key:"setPlaceholder",value:function(){}},{key:"setValue",value:function(){}},{key:"getValue",value:function(){}},{key:"getPlaceholder",value:function(){}},{key:"search",value:function(){}},{key:"addItem",value:function(){}},{key:"removeItem",value:function(){}},{key:"removeAllItems",value:function(){}},{key:"createItemList",value:function(){}},{key:"init",value:function(){this.supports||console.error("Your browser doesn'nt support shit"),this.initialised=!0;for(var e=this.elements,n=e.length-1;n>=0;n--){var t=e[n];this.render(t)}}},{key:"render",value:function(e){console.log("Render");var t=document.createElement("div");t.classList.add("choice","choice--active"),e.classList.add("choice__input","choice__input--original"),e.tabIndex="-1",e.setAttribute("style","display:none;"),n(e,t);var o=document.createElement("input");o.type="text",o.classList.add("choice__input","choice__input--cloned"),t.appendChild(o),this.addEventListeners(e)}},{key:"destroy",value:function(){this.options=null,this.elements=null;for(var e=this.elements,n=e.length-1;n>=0;n--){var t=e[n];this.removeEventListeners(t)}}}]),e}(),i=new t;i.init(),console.log(i)})}]);
|
|
@ -12,13 +12,25 @@
|
||||||
|
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
let wrap = function (element, wrapper) {
|
||||||
|
wrapper = wrapper || document.createElement('div');
|
||||||
|
if (element.nextSibling) {
|
||||||
|
element.parentNode.insertBefore(wrapper, element.nextSibling);
|
||||||
|
} else {
|
||||||
|
element.parentNode.appendChild(wrapper);
|
||||||
|
}
|
||||||
|
return wrapper.appendChild(element);
|
||||||
|
};
|
||||||
|
|
||||||
class Choices {
|
class Choices {
|
||||||
constructor() {
|
constructor() {
|
||||||
|
const fakeEl = document.createElement("fakeelement");
|
||||||
const DEFAULT_OPTIONS = {
|
const DEFAULT_OPTIONS = {
|
||||||
element: '[data-choice]',
|
element: '[data-choice]',
|
||||||
disabled: false,
|
disabled: false,
|
||||||
maxItems: 0,
|
maxItems: 0,
|
||||||
debug: false,
|
debug: false,
|
||||||
|
placeholder: false,
|
||||||
callbackOnInit: function(){},
|
callbackOnInit: function(){},
|
||||||
callbackOnRender: function(){},
|
callbackOnRender: function(){},
|
||||||
callbackOnKeyUp: function(){},
|
callbackOnKeyUp: function(){},
|
||||||
|
@ -29,6 +41,8 @@
|
||||||
|
|
||||||
// Merge options with user options
|
// Merge options with user options
|
||||||
this.options = DEFAULT_OPTIONS;
|
this.options = DEFAULT_OPTIONS;
|
||||||
|
this.initialised = false;
|
||||||
|
this.supports = 'querySelector' in document && 'addEventListener' in document && 'classList' in fakeEl;
|
||||||
|
|
||||||
// Retrieve elements
|
// Retrieve elements
|
||||||
this.elements = document.querySelectorAll(this.options.element);
|
this.elements = document.querySelectorAll(this.options.element);
|
||||||
|
@ -39,10 +53,6 @@
|
||||||
this.onChange = this.onChange.bind(this);
|
this.onChange = this.onChange.bind(this);
|
||||||
this.onFocus = this.onFocus.bind(this);
|
this.onFocus = this.onFocus.bind(this);
|
||||||
this.onBlur = this.onChange.bind(this);
|
this.onBlur = this.onChange.bind(this);
|
||||||
|
|
||||||
// Init
|
|
||||||
this.addEventListeners();
|
|
||||||
this.render();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* State */
|
/* State */
|
||||||
|
@ -61,38 +71,42 @@
|
||||||
|
|
||||||
/* Event handling */
|
/* Event handling */
|
||||||
|
|
||||||
onKeyDown() {
|
onKeyDown(e) {
|
||||||
console.log('Key down');
|
console.log('Key down')
|
||||||
|
console.log(e.target);
|
||||||
}
|
}
|
||||||
|
|
||||||
onFocus() {
|
onFocus(e) {
|
||||||
console.log('Focus');
|
console.log('Focus')
|
||||||
|
console.log(e.target);
|
||||||
}
|
}
|
||||||
|
|
||||||
onClick() {
|
onClick(e) {
|
||||||
console.log('Click');
|
console.log('Click')
|
||||||
|
console.log(e.target);
|
||||||
}
|
}
|
||||||
|
|
||||||
onChange() {
|
onChange(e) {
|
||||||
console.log('Change');
|
console.log('Change')
|
||||||
|
console.log(e.target);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Event listeners */
|
/* Event listeners */
|
||||||
|
|
||||||
addEventListeners() {
|
addEventListeners(el) {
|
||||||
document.addEventListener('click', this.onClick);
|
el.addEventListener('click', this.onClick);
|
||||||
document.addEventListener('keydown', this.onKeyDown);
|
el.addEventListener('keydown', this.onKeyDown);
|
||||||
document.addEventListener('change', this.onChange);
|
el.addEventListener('change', this.onChange);
|
||||||
document.addEventListener('focus', this.onFocus);
|
el.addEventListener('focus', this.onFocus);
|
||||||
document.addEventListener('blur', this.onBlur);
|
el.addEventListener('blur', this.onBlur);
|
||||||
}
|
}
|
||||||
|
|
||||||
removeEventListeners() {
|
removeEventListeners(el) {
|
||||||
document.removeEventListener('click', this.onClick);
|
el.removeEventListener('click', this.onClick);
|
||||||
document.removeEventListener('keydown', this.onKeyDown);
|
el.removeEventListener('keydown', this.onKeyDown);
|
||||||
document.removeEventListener('change', this.onChange);
|
el.removeEventListener('change', this.onChange);
|
||||||
document.removeEventListener('focus', this.onFocus);
|
el.removeEventListener('focus', this.onFocus);
|
||||||
document.removeEventListener('blur', this.onBlur);
|
el.removeEventListener('blur', this.onBlur);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Methods */
|
/* Methods */
|
||||||
|
@ -133,14 +147,52 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
init() {
|
||||||
|
if(!this.supports) console.error('Your browser doesn\'nt support shit');
|
||||||
|
this.initialised = true;
|
||||||
|
|
||||||
|
let els = this.elements;
|
||||||
|
for (let i = els.length - 1; i >= 0; i--) {
|
||||||
|
let el = els[i];
|
||||||
|
this.render(el);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render(el) {
|
||||||
console.log('Render');
|
console.log('Render');
|
||||||
|
|
||||||
|
let wrapper = document.createElement('div');
|
||||||
|
wrapper.classList.add('choice', 'choice--active')
|
||||||
|
|
||||||
|
el.classList.add('choice__input', 'choice__input--original');
|
||||||
|
el.tabIndex = '-1';
|
||||||
|
el.setAttribute('style', 'display:none;');
|
||||||
|
|
||||||
|
wrap(el, wrapper);
|
||||||
|
|
||||||
|
let input = document.createElement('input');
|
||||||
|
input.type = 'text';
|
||||||
|
input.classList.add('choice__input', 'choice__input--cloned');
|
||||||
|
wrapper.appendChild(input);
|
||||||
|
|
||||||
|
this.addEventListeners(el);
|
||||||
}
|
}
|
||||||
|
|
||||||
destroy() {
|
destroy() {
|
||||||
|
this.options = null;
|
||||||
|
this.elements = null;
|
||||||
|
|
||||||
|
let els = this.elements;
|
||||||
|
|
||||||
|
for (let i = els.length - 1; i >= 0; i--) {
|
||||||
|
let el = els[i];
|
||||||
|
|
||||||
|
this.removeEventListeners(el);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
new Choices();
|
var choices = new Choices();
|
||||||
|
choices.init();
|
||||||
|
console.log(choices);
|
||||||
});
|
});
|
|
@ -6,6 +6,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<input type="text" data-choice>
|
<input type="text" data-choice>
|
||||||
|
<input type="text" data-choice>
|
||||||
<script src="assets/scripts/dist/bundle.js"></script>
|
<script src="assets/scripts/dist/bundle.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -14,7 +14,6 @@ module.exports = {
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
new webpack.HotModuleReplacementPlugin(),
|
new webpack.HotModuleReplacementPlugin(),
|
||||||
new webpack.NoErrorsPlugin(),
|
|
||||||
new webpack.DefinePlugin({
|
new webpack.DefinePlugin({
|
||||||
'process.env': {
|
'process.env': {
|
||||||
'NODE_ENV': JSON.stringify('development')
|
'NODE_ENV': JSON.stringify('development')
|
||||||
|
|
Loading…
Reference in a new issue