mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-13 03:12:41 +02:00
Move wrapping into container class
This commit is contained in:
parent
6130ee00d5
commit
beeeeb87ad
|
@ -218,7 +218,7 @@ class Choices {
|
|||
// Remove all event listeners
|
||||
this._removeEventListeners();
|
||||
this.passedElement.reveal();
|
||||
this.containerOuter.revert(this.passedElement.element);
|
||||
this.containerOuter.unwrap(this.passedElement.element);
|
||||
|
||||
// Clear data store
|
||||
this.clearStore();
|
||||
|
@ -2183,9 +2183,9 @@ class Choices {
|
|||
this.passedElement.conceal();
|
||||
|
||||
// Wrap input in container preserving DOM ordering
|
||||
wrap(this.passedElement.element, this.containerInner.element);
|
||||
this.containerInner.wrap(this.passedElement.element);
|
||||
// Wrapper inner container with outer container
|
||||
wrap(this.containerInner.element, this.containerOuter.element);
|
||||
this.containerOuter.wrap(this.containerInner.element);
|
||||
|
||||
if (this.isSelectOneElement) {
|
||||
this.input.setPlaceholder(this.config.searchPlaceholderValue || '');
|
||||
|
|
|
@ -131,13 +131,13 @@ describe('choices', () => {
|
|||
describe('when already initialised', () => {
|
||||
let removeEventListenersSpy;
|
||||
let passedElementRevealSpy;
|
||||
let containerOuterRevertSpy;
|
||||
let containerOuterUnwrapSpy;
|
||||
let clearStoreSpy;
|
||||
|
||||
beforeEach(() => {
|
||||
removeEventListenersSpy = spy(instance, '_removeEventListeners');
|
||||
passedElementRevealSpy = spy(instance.passedElement, 'reveal');
|
||||
containerOuterRevertSpy = spy(instance.containerOuter, 'revert');
|
||||
containerOuterUnwrapSpy = spy(instance.containerOuter, 'unwrap');
|
||||
clearStoreSpy = spy(instance, 'clearStore');
|
||||
|
||||
instance.initialised = true;
|
||||
|
@ -147,7 +147,7 @@ describe('choices', () => {
|
|||
afterEach(() => {
|
||||
removeEventListenersSpy.restore();
|
||||
passedElementRevealSpy.restore();
|
||||
containerOuterRevertSpy.restore();
|
||||
containerOuterUnwrapSpy.restore();
|
||||
clearStoreSpy.restore();
|
||||
});
|
||||
|
||||
|
@ -160,8 +160,8 @@ describe('choices', () => {
|
|||
});
|
||||
|
||||
it('reverts outer container', () => {
|
||||
expect(containerOuterRevertSpy.called).to.equal(true);
|
||||
expect(containerOuterRevertSpy.lastCall.args[0]).to.equal(instance.passedElement.element);
|
||||
expect(containerOuterUnwrapSpy.called).to.equal(true);
|
||||
expect(containerOuterUnwrapSpy.lastCall.args[0]).to.equal(instance.passedElement.element);
|
||||
});
|
||||
|
||||
it('clears store', () => {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { getWindowHeight } from '../lib/utils';
|
||||
import { getWindowHeight, wrap } from '../lib/utils';
|
||||
|
||||
export default class Container {
|
||||
constructor(instance, element, classNames) {
|
||||
|
@ -151,10 +151,15 @@ export default class Container {
|
|||
this.isDisabled = true;
|
||||
}
|
||||
|
||||
revert(originalElement) {
|
||||
wrap(element) {
|
||||
this.wrappedElement = element;
|
||||
wrap(this.wrappedElement, this.element);
|
||||
}
|
||||
|
||||
unwrap() {
|
||||
// Move passed element back to original position
|
||||
this.element.parentNode.insertBefore(
|
||||
originalElement,
|
||||
this.wrappedElement,
|
||||
this.element,
|
||||
);
|
||||
// Remove container
|
||||
|
|
|
@ -6,7 +6,7 @@ import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG } from '../constants';
|
|||
describe('components/container', () => {
|
||||
let instance;
|
||||
let choicesInstance;
|
||||
let choicesElement;
|
||||
let element;
|
||||
|
||||
beforeEach(() => {
|
||||
choicesInstance = {
|
||||
|
@ -14,8 +14,9 @@ describe('components/container', () => {
|
|||
...DEFAULT_CONFIG,
|
||||
},
|
||||
};
|
||||
choicesElement = document.createElement('select');
|
||||
instance = new Container(choicesInstance, choicesElement, DEFAULT_CLASSNAMES);
|
||||
element = document.createElement('div');
|
||||
element.id = 'container';
|
||||
instance = new Container(choicesInstance, element, DEFAULT_CLASSNAMES);
|
||||
});
|
||||
|
||||
describe('constructor', () => {
|
||||
|
@ -24,7 +25,7 @@ describe('components/container', () => {
|
|||
});
|
||||
|
||||
it('assigns choices element to class', () => {
|
||||
expect(instance.element).to.eql(choicesElement);
|
||||
expect(instance.element).to.eql(element);
|
||||
});
|
||||
|
||||
it('assigns classnames to class', () => {
|
||||
|
@ -34,7 +35,7 @@ describe('components/container', () => {
|
|||
|
||||
describe('getElement', () => {
|
||||
it('returns DOM reference of element', () => {
|
||||
expect(instance.getElement()).to.eql(choicesElement);
|
||||
expect(instance.getElement()).to.eql(element);
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -332,9 +333,59 @@ describe('components/container', () => {
|
|||
});
|
||||
});
|
||||
|
||||
// describe('revert', () => {
|
||||
describe('wrap', () => {
|
||||
let elementToWrap;
|
||||
|
||||
beforeEach(() => {
|
||||
elementToWrap = document.createElement('div');
|
||||
elementToWrap.id = 'wrap-test';
|
||||
document.body.appendChild(elementToWrap);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
document.getElementById('wrap-test').remove();
|
||||
});
|
||||
|
||||
it('wraps passed element inside element', () => {
|
||||
expect(instance.element.querySelector('div#wrap-test')).to.equal(null);
|
||||
instance.wrap(document.querySelector('div#wrap-test'));
|
||||
expect(instance.element.querySelector('div#wrap-test')).to.equal(elementToWrap);
|
||||
});
|
||||
|
||||
it('assigns reference to element to instance', () => {
|
||||
expect(instance.wrappedElement).to.equal(undefined);
|
||||
instance.wrap(document.querySelector('div#wrap-test'));
|
||||
expect(instance.wrappedElement).to.equal(elementToWrap);
|
||||
});
|
||||
});
|
||||
|
||||
describe('unwrap', () => {
|
||||
let elementToWrap;
|
||||
|
||||
beforeEach(() => {
|
||||
elementToWrap = document.createElement('div');
|
||||
elementToWrap.id = 'unwrap-test';
|
||||
document.body.appendChild(elementToWrap);
|
||||
instance.wrap(document.getElementById('unwrap-test'));
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
document.body.removeChild(document.getElementById('unwrap-test'));
|
||||
});
|
||||
|
||||
it('moves wrapped element outside of element', () => {
|
||||
expect(instance.element.querySelector('div#unwrap-test')).to.be.instanceof(HTMLElement);
|
||||
instance.unwrap(elementToWrap);
|
||||
expect(instance.element.querySelector('div#unwrap-test')).to.equal(null);
|
||||
expect(document.querySelector('div#unwrap-test')).to.be.instanceof(HTMLElement);
|
||||
});
|
||||
|
||||
// it('removes element from DOM', () => {
|
||||
// expect(document.getElementById('container')).to.not.equal(null);
|
||||
// instance.unwrap(elementToWrap);
|
||||
// expect(document.getElementById('container')).to.equal(null);
|
||||
// });
|
||||
});
|
||||
|
||||
describe('addLoadingState', () => {
|
||||
beforeEach(() => {
|
||||
|
|
Loading…
Reference in a new issue