diff --git a/src/dual-listbox.js b/src/dual-listbox.js index f1bdbba..3c5738e 100644 --- a/src/dual-listbox.js +++ b/src/dual-listbox.js @@ -19,11 +19,15 @@ const SELECTED_MODIFIER = 'dual-listbox__item--selected'; class DualListbox { constructor(selector, options={}) { this.setDefaults(); - this.select = document.querySelector(selector); - this.selected = []; this.available = []; + if (this.isDomElement(selector)) { + this.select = selector; + } else { + this.select = document.querySelector(selector); + } + this._initOptions(options); this._initReusableElements(); this._splitSelectOptions(this.select); @@ -439,6 +443,17 @@ class DualListbox { } } } + + /** + * @Private + * Returns true if argument is a DOM element + */ + isDomElement(o) { + return ( + typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2 + o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName === "string" + ); + } } export default DualListbox; diff --git a/test/dual-listbox.spec.js b/test/dual-listbox.spec.js index 759d2e4..915a217 100644 --- a/test/dual-listbox.spec.js +++ b/test/dual-listbox.spec.js @@ -289,4 +289,13 @@ describe('Duallistbox', function() { expect(dlb.available.length).toBe(10); expect(dlb.selected.length).toBe(0); }); + + it('should be able to create object from DOM element', () => { + let domParent = document.createElement("div"); + domParent.innerHTML = FIXTURE_FILLED_SELECT; + let dlb = new DualListbox(domParent.getElementsByTagName('select')[0]); + + expect(dlb.available.length).toBe(10); + expect(dlb.selected.length).toBe(0); + }); });