mirror of
https://github.com/atom/atom.git
synced 2026-04-28 03:01:47 -04:00
Convert panel container to JS: Decaffeinate
This commit is contained in:
Matthew Dapena-Tretter
@@ -1,137 +0,0 @@
|
||||
Panel = require '../src/panel'
|
||||
PanelContainer = require '../src/panel-container'
|
||||
|
||||
describe "PanelContainerElement", ->
|
||||
[jasmineContent, element, container] = []
|
||||
|
||||
class TestPanelContainerItem
|
||||
constructior: ->
|
||||
|
||||
class TestPanelContainerItemElement extends HTMLElement
|
||||
createdCallback: ->
|
||||
@classList.add('test-root')
|
||||
initialize: (@model) ->
|
||||
this
|
||||
|
||||
TestPanelContainerItemElement = document.registerElement 'atom-test-container-item-element', prototype: TestPanelContainerItemElement.prototype
|
||||
|
||||
beforeEach ->
|
||||
jasmineContent = document.body.querySelector('#jasmine-content')
|
||||
|
||||
atom.views.addViewProvider TestPanelContainerItem, (model) ->
|
||||
new TestPanelContainerItemElement().initialize(model)
|
||||
|
||||
container = new PanelContainer({location: 'left'})
|
||||
element = atom.views.getView(container)
|
||||
jasmineContent.appendChild(element)
|
||||
|
||||
it 'has a location class with value from the model', ->
|
||||
expect(element).toHaveClass 'left'
|
||||
|
||||
it 'removes the element when the container is destroyed', ->
|
||||
expect(element.parentNode).toBe jasmineContent
|
||||
container.destroy()
|
||||
expect(element.parentNode).not.toBe jasmineContent
|
||||
|
||||
describe "adding and removing panels", ->
|
||||
it "allows panels to be inserted at any position", ->
|
||||
panel1 = new Panel({item: new TestPanelContainerItem(), priority: 10})
|
||||
panel2 = new Panel({item: new TestPanelContainerItem(), priority: 5})
|
||||
panel3 = new Panel({item: new TestPanelContainerItem(), priority: 8})
|
||||
|
||||
container.addPanel(panel1)
|
||||
container.addPanel(panel2)
|
||||
container.addPanel(panel3)
|
||||
|
||||
expect(element.childNodes[2].getModel()).toBe(panel1)
|
||||
expect(element.childNodes[1].getModel()).toBe(panel3)
|
||||
expect(element.childNodes[0].getModel()).toBe(panel2)
|
||||
|
||||
describe "when the container is at the left location", ->
|
||||
it "adds atom-panel elements when a new panel is added to the container; removes them when the panels are destroyed", ->
|
||||
expect(element.childNodes.length).toBe 0
|
||||
|
||||
panel1 = new Panel({item: new TestPanelContainerItem()})
|
||||
container.addPanel(panel1)
|
||||
expect(element.childNodes.length).toBe 1
|
||||
expect(element.childNodes[0]).toHaveClass 'left'
|
||||
expect(element.childNodes[0]).toHaveClass 'tool-panel' # legacy selector support
|
||||
expect(element.childNodes[0]).toHaveClass 'panel-left' # legacy selector support
|
||||
|
||||
expect(element.childNodes[0].tagName).toBe 'ATOM-PANEL'
|
||||
|
||||
panel2 = new Panel({item: new TestPanelContainerItem()})
|
||||
container.addPanel(panel2)
|
||||
expect(element.childNodes.length).toBe 2
|
||||
|
||||
expect(atom.views.getView(panel1).style.display).not.toBe 'none'
|
||||
expect(atom.views.getView(panel2).style.display).not.toBe 'none'
|
||||
|
||||
panel1.destroy()
|
||||
expect(element.childNodes.length).toBe 1
|
||||
|
||||
panel2.destroy()
|
||||
expect(element.childNodes.length).toBe 0
|
||||
|
||||
describe "when the container is at the bottom location", ->
|
||||
beforeEach ->
|
||||
container = new PanelContainer({location: 'bottom'})
|
||||
element = atom.views.getView(container)
|
||||
jasmineContent.appendChild(element)
|
||||
|
||||
it "adds atom-panel elements when a new panel is added to the container; removes them when the panels are destroyed", ->
|
||||
expect(element.childNodes.length).toBe 0
|
||||
|
||||
panel1 = new Panel({item: new TestPanelContainerItem(), className: 'one'})
|
||||
container.addPanel(panel1)
|
||||
expect(element.childNodes.length).toBe 1
|
||||
expect(element.childNodes[0]).toHaveClass 'bottom'
|
||||
expect(element.childNodes[0]).toHaveClass 'tool-panel' # legacy selector support
|
||||
expect(element.childNodes[0]).toHaveClass 'panel-bottom' # legacy selector support
|
||||
expect(element.childNodes[0].tagName).toBe 'ATOM-PANEL'
|
||||
expect(atom.views.getView(panel1)).toHaveClass 'one'
|
||||
|
||||
panel2 = new Panel({item: new TestPanelContainerItem(), className: 'two'})
|
||||
container.addPanel(panel2)
|
||||
expect(element.childNodes.length).toBe 2
|
||||
expect(atom.views.getView(panel2)).toHaveClass 'two'
|
||||
|
||||
panel1.destroy()
|
||||
expect(element.childNodes.length).toBe 1
|
||||
|
||||
panel2.destroy()
|
||||
expect(element.childNodes.length).toBe 0
|
||||
|
||||
describe "when the container is modal", ->
|
||||
beforeEach ->
|
||||
container = new PanelContainer({location: 'modal'})
|
||||
element = atom.views.getView(container)
|
||||
jasmineContent.appendChild(element)
|
||||
|
||||
it "allows only one panel to be visible at a time", ->
|
||||
panel1 = new Panel({item: new TestPanelContainerItem()})
|
||||
container.addPanel(panel1)
|
||||
|
||||
expect(atom.views.getView(panel1).style.display).not.toBe 'none'
|
||||
|
||||
panel2 = new Panel({item: new TestPanelContainerItem()})
|
||||
container.addPanel(panel2)
|
||||
|
||||
expect(atom.views.getView(panel1).style.display).toBe 'none'
|
||||
expect(atom.views.getView(panel2).style.display).not.toBe 'none'
|
||||
|
||||
panel1.show()
|
||||
|
||||
expect(atom.views.getView(panel1).style.display).not.toBe 'none'
|
||||
expect(atom.views.getView(panel2).style.display).toBe 'none'
|
||||
|
||||
it "adds the 'modal' class to panels", ->
|
||||
panel1 = new Panel({item: new TestPanelContainerItem()})
|
||||
container.addPanel(panel1)
|
||||
|
||||
expect(atom.views.getView(panel1)).toHaveClass 'modal'
|
||||
|
||||
# legacy selector support
|
||||
expect(atom.views.getView(panel1)).not.toHaveClass 'tool-panel'
|
||||
expect(atom.views.getView(panel1)).toHaveClass 'overlay'
|
||||
expect(atom.views.getView(panel1)).toHaveClass 'from-top'
|
||||
154
spec/panel-container-element-spec.js
Normal file
154
spec/panel-container-element-spec.js
Normal file
@@ -0,0 +1,154 @@
|
||||
const Panel = require('../src/panel');
|
||||
const PanelContainer = require('../src/panel-container');
|
||||
|
||||
describe("PanelContainerElement", function() {
|
||||
let [jasmineContent, element, container] = Array.from([]);
|
||||
|
||||
class TestPanelContainerItem {
|
||||
constructior() {}
|
||||
}
|
||||
|
||||
class TestPanelContainerItemElement extends HTMLElement {
|
||||
createdCallback() {
|
||||
return this.classList.add('test-root');
|
||||
}
|
||||
initialize(model) {
|
||||
this.model = model;
|
||||
return this;
|
||||
}
|
||||
}
|
||||
|
||||
TestPanelContainerItemElement = document.registerElement('atom-test-container-item-element', {prototype: TestPanelContainerItemElement.prototype});
|
||||
|
||||
beforeEach(function() {
|
||||
jasmineContent = document.body.querySelector('#jasmine-content');
|
||||
|
||||
atom.views.addViewProvider(TestPanelContainerItem, model => new TestPanelContainerItemElement().initialize(model));
|
||||
|
||||
container = new PanelContainer({location: 'left'});
|
||||
element = atom.views.getView(container);
|
||||
return jasmineContent.appendChild(element);
|
||||
});
|
||||
|
||||
it('has a location class with value from the model', () => expect(element).toHaveClass('left'));
|
||||
|
||||
it('removes the element when the container is destroyed', function() {
|
||||
expect(element.parentNode).toBe(jasmineContent);
|
||||
container.destroy();
|
||||
return expect(element.parentNode).not.toBe(jasmineContent);
|
||||
});
|
||||
|
||||
describe("adding and removing panels", function() {
|
||||
it("allows panels to be inserted at any position", function() {
|
||||
const panel1 = new Panel({item: new TestPanelContainerItem(), priority: 10});
|
||||
const panel2 = new Panel({item: new TestPanelContainerItem(), priority: 5});
|
||||
const panel3 = new Panel({item: new TestPanelContainerItem(), priority: 8});
|
||||
|
||||
container.addPanel(panel1);
|
||||
container.addPanel(panel2);
|
||||
container.addPanel(panel3);
|
||||
|
||||
expect(element.childNodes[2].getModel()).toBe(panel1);
|
||||
expect(element.childNodes[1].getModel()).toBe(panel3);
|
||||
return expect(element.childNodes[0].getModel()).toBe(panel2);
|
||||
});
|
||||
|
||||
describe("when the container is at the left location", () =>
|
||||
it("adds atom-panel elements when a new panel is added to the container; removes them when the panels are destroyed", function() {
|
||||
expect(element.childNodes.length).toBe(0);
|
||||
|
||||
const panel1 = new Panel({item: new TestPanelContainerItem()});
|
||||
container.addPanel(panel1);
|
||||
expect(element.childNodes.length).toBe(1);
|
||||
expect(element.childNodes[0]).toHaveClass('left');
|
||||
expect(element.childNodes[0]).toHaveClass('tool-panel'); // legacy selector support
|
||||
expect(element.childNodes[0]).toHaveClass('panel-left'); // legacy selector support
|
||||
|
||||
expect(element.childNodes[0].tagName).toBe('ATOM-PANEL');
|
||||
|
||||
const panel2 = new Panel({item: new TestPanelContainerItem()});
|
||||
container.addPanel(panel2);
|
||||
expect(element.childNodes.length).toBe(2);
|
||||
|
||||
expect(atom.views.getView(panel1).style.display).not.toBe('none');
|
||||
expect(atom.views.getView(panel2).style.display).not.toBe('none');
|
||||
|
||||
panel1.destroy();
|
||||
expect(element.childNodes.length).toBe(1);
|
||||
|
||||
panel2.destroy();
|
||||
return expect(element.childNodes.length).toBe(0);
|
||||
})
|
||||
);
|
||||
|
||||
return describe("when the container is at the bottom location", function() {
|
||||
beforeEach(function() {
|
||||
container = new PanelContainer({location: 'bottom'});
|
||||
element = atom.views.getView(container);
|
||||
return jasmineContent.appendChild(element);
|
||||
});
|
||||
|
||||
return it("adds atom-panel elements when a new panel is added to the container; removes them when the panels are destroyed", function() {
|
||||
expect(element.childNodes.length).toBe(0);
|
||||
|
||||
const panel1 = new Panel({item: new TestPanelContainerItem(), className: 'one'});
|
||||
container.addPanel(panel1);
|
||||
expect(element.childNodes.length).toBe(1);
|
||||
expect(element.childNodes[0]).toHaveClass('bottom');
|
||||
expect(element.childNodes[0]).toHaveClass('tool-panel'); // legacy selector support
|
||||
expect(element.childNodes[0]).toHaveClass('panel-bottom'); // legacy selector support
|
||||
expect(element.childNodes[0].tagName).toBe('ATOM-PANEL');
|
||||
expect(atom.views.getView(panel1)).toHaveClass('one');
|
||||
|
||||
const panel2 = new Panel({item: new TestPanelContainerItem(), className: 'two'});
|
||||
container.addPanel(panel2);
|
||||
expect(element.childNodes.length).toBe(2);
|
||||
expect(atom.views.getView(panel2)).toHaveClass('two');
|
||||
|
||||
panel1.destroy();
|
||||
expect(element.childNodes.length).toBe(1);
|
||||
|
||||
panel2.destroy();
|
||||
return expect(element.childNodes.length).toBe(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return describe("when the container is modal", function() {
|
||||
beforeEach(function() {
|
||||
container = new PanelContainer({location: 'modal'});
|
||||
element = atom.views.getView(container);
|
||||
return jasmineContent.appendChild(element);
|
||||
});
|
||||
|
||||
it("allows only one panel to be visible at a time", function() {
|
||||
const panel1 = new Panel({item: new TestPanelContainerItem()});
|
||||
container.addPanel(panel1);
|
||||
|
||||
expect(atom.views.getView(panel1).style.display).not.toBe('none');
|
||||
|
||||
const panel2 = new Panel({item: new TestPanelContainerItem()});
|
||||
container.addPanel(panel2);
|
||||
|
||||
expect(atom.views.getView(panel1).style.display).toBe('none');
|
||||
expect(atom.views.getView(panel2).style.display).not.toBe('none');
|
||||
|
||||
panel1.show();
|
||||
|
||||
expect(atom.views.getView(panel1).style.display).not.toBe('none');
|
||||
return expect(atom.views.getView(panel2).style.display).toBe('none');
|
||||
});
|
||||
|
||||
return it("adds the 'modal' class to panels", function() {
|
||||
const panel1 = new Panel({item: new TestPanelContainerItem()});
|
||||
container.addPanel(panel1);
|
||||
|
||||
expect(atom.views.getView(panel1)).toHaveClass('modal');
|
||||
|
||||
// legacy selector support
|
||||
expect(atom.views.getView(panel1)).not.toHaveClass('tool-panel');
|
||||
expect(atom.views.getView(panel1)).toHaveClass('overlay');
|
||||
return expect(atom.views.getView(panel1)).toHaveClass('from-top');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,113 +0,0 @@
|
||||
Panel = require '../src/panel'
|
||||
PanelContainer = require '../src/panel-container'
|
||||
|
||||
describe "PanelContainer", ->
|
||||
[container] = []
|
||||
|
||||
class TestPanelItem
|
||||
constructor: ->
|
||||
|
||||
beforeEach ->
|
||||
container = new PanelContainer
|
||||
|
||||
describe "::addPanel(panel)", ->
|
||||
it 'emits an onDidAddPanel event with the index the panel was inserted at', ->
|
||||
container.onDidAddPanel addPanelSpy = jasmine.createSpy()
|
||||
|
||||
panel1 = new Panel(item: new TestPanelItem())
|
||||
container.addPanel(panel1)
|
||||
expect(addPanelSpy).toHaveBeenCalledWith({panel: panel1, index: 0})
|
||||
|
||||
panel2 = new Panel(item: new TestPanelItem())
|
||||
container.addPanel(panel2)
|
||||
expect(addPanelSpy).toHaveBeenCalledWith({panel: panel2, index: 1})
|
||||
|
||||
describe "when a panel is destroyed", ->
|
||||
it 'emits an onDidRemovePanel event with the index of the removed item', ->
|
||||
container.onDidRemovePanel removePanelSpy = jasmine.createSpy()
|
||||
|
||||
panel1 = new Panel(item: new TestPanelItem())
|
||||
container.addPanel(panel1)
|
||||
panel2 = new Panel(item: new TestPanelItem())
|
||||
container.addPanel(panel2)
|
||||
|
||||
expect(removePanelSpy).not.toHaveBeenCalled()
|
||||
|
||||
panel2.destroy()
|
||||
expect(removePanelSpy).toHaveBeenCalledWith({panel: panel2, index: 1})
|
||||
|
||||
panel1.destroy()
|
||||
expect(removePanelSpy).toHaveBeenCalledWith({panel: panel1, index: 0})
|
||||
|
||||
describe "::destroy()", ->
|
||||
it "destroys the container and all of its panels", ->
|
||||
destroyedPanels = []
|
||||
|
||||
panel1 = new Panel(item: new TestPanelItem())
|
||||
panel1.onDidDestroy -> destroyedPanels.push(panel1)
|
||||
container.addPanel(panel1)
|
||||
|
||||
panel2 = new Panel(item: new TestPanelItem())
|
||||
panel2.onDidDestroy -> destroyedPanels.push(panel2)
|
||||
container.addPanel(panel2)
|
||||
|
||||
container.destroy()
|
||||
|
||||
expect(container.getPanels().length).toBe(0)
|
||||
expect(destroyedPanels).toEqual([panel1, panel2])
|
||||
|
||||
describe "panel priority", ->
|
||||
describe 'left / top panel container', ->
|
||||
[initialPanel] = []
|
||||
beforeEach ->
|
||||
# 'left' logic is the same as 'top'
|
||||
container = new PanelContainer({location: 'left'})
|
||||
initialPanel = new Panel(item: new TestPanelItem())
|
||||
container.addPanel(initialPanel)
|
||||
|
||||
describe 'when a panel with low priority is added', ->
|
||||
it 'is inserted at the beginning of the list', ->
|
||||
container.onDidAddPanel addPanelSpy = jasmine.createSpy()
|
||||
panel = new Panel(item: new TestPanelItem(), priority: 0)
|
||||
container.addPanel(panel)
|
||||
|
||||
expect(addPanelSpy).toHaveBeenCalledWith({panel, index: 0})
|
||||
expect(container.getPanels()[0]).toBe panel
|
||||
|
||||
describe 'when a panel with priority between two other panels is added', ->
|
||||
it 'is inserted at the between the two panels', ->
|
||||
panel = new Panel(item: new TestPanelItem(), priority: 1000)
|
||||
container.addPanel(panel)
|
||||
|
||||
container.onDidAddPanel addPanelSpy = jasmine.createSpy()
|
||||
panel = new Panel(item: new TestPanelItem(), priority: 101)
|
||||
container.addPanel(panel)
|
||||
|
||||
expect(addPanelSpy).toHaveBeenCalledWith({panel, index: 1})
|
||||
expect(container.getPanels()[1]).toBe panel
|
||||
|
||||
describe 'right / bottom panel container', ->
|
||||
[initialPanel] = []
|
||||
beforeEach ->
|
||||
# 'bottom' logic is the same as 'right'
|
||||
container = new PanelContainer({location: 'right'})
|
||||
initialPanel = new Panel(item: new TestPanelItem())
|
||||
container.addPanel(initialPanel)
|
||||
|
||||
describe 'when a panel with high priority is added', ->
|
||||
it 'is inserted at the beginning of the list', ->
|
||||
container.onDidAddPanel addPanelSpy = jasmine.createSpy()
|
||||
panel = new Panel(item: new TestPanelItem(), priority: 1000)
|
||||
container.addPanel(panel)
|
||||
|
||||
expect(addPanelSpy).toHaveBeenCalledWith({panel, index: 0})
|
||||
expect(container.getPanels()[0]).toBe panel
|
||||
|
||||
describe 'when a panel with low priority is added', ->
|
||||
it 'is inserted at the end of the list', ->
|
||||
container.onDidAddPanel addPanelSpy = jasmine.createSpy()
|
||||
panel = new Panel(item: new TestPanelItem(), priority: 0)
|
||||
container.addPanel(panel)
|
||||
|
||||
expect(addPanelSpy).toHaveBeenCalledWith({panel, index: 1})
|
||||
expect(container.getPanels()[1]).toBe panel
|
||||
139
spec/panel-container-spec.js
Normal file
139
spec/panel-container-spec.js
Normal file
@@ -0,0 +1,139 @@
|
||||
const Panel = require('../src/panel');
|
||||
const PanelContainer = require('../src/panel-container');
|
||||
|
||||
describe("PanelContainer", function() {
|
||||
let [container] = Array.from([]);
|
||||
|
||||
class TestPanelItem {
|
||||
constructor() {}
|
||||
}
|
||||
|
||||
beforeEach(() => container = new PanelContainer);
|
||||
|
||||
describe("::addPanel(panel)", () =>
|
||||
it('emits an onDidAddPanel event with the index the panel was inserted at', function() {
|
||||
let addPanelSpy;
|
||||
container.onDidAddPanel(addPanelSpy = jasmine.createSpy());
|
||||
|
||||
const panel1 = new Panel({item: new TestPanelItem()});
|
||||
container.addPanel(panel1);
|
||||
expect(addPanelSpy).toHaveBeenCalledWith({panel: panel1, index: 0});
|
||||
|
||||
const panel2 = new Panel({item: new TestPanelItem()});
|
||||
container.addPanel(panel2);
|
||||
return expect(addPanelSpy).toHaveBeenCalledWith({panel: panel2, index: 1});
|
||||
})
|
||||
);
|
||||
|
||||
describe("when a panel is destroyed", () =>
|
||||
it('emits an onDidRemovePanel event with the index of the removed item', function() {
|
||||
let removePanelSpy;
|
||||
container.onDidRemovePanel(removePanelSpy = jasmine.createSpy());
|
||||
|
||||
const panel1 = new Panel({item: new TestPanelItem()});
|
||||
container.addPanel(panel1);
|
||||
const panel2 = new Panel({item: new TestPanelItem()});
|
||||
container.addPanel(panel2);
|
||||
|
||||
expect(removePanelSpy).not.toHaveBeenCalled();
|
||||
|
||||
panel2.destroy();
|
||||
expect(removePanelSpy).toHaveBeenCalledWith({panel: panel2, index: 1});
|
||||
|
||||
panel1.destroy();
|
||||
return expect(removePanelSpy).toHaveBeenCalledWith({panel: panel1, index: 0});
|
||||
})
|
||||
);
|
||||
|
||||
describe("::destroy()", () =>
|
||||
it("destroys the container and all of its panels", function() {
|
||||
const destroyedPanels = [];
|
||||
|
||||
const panel1 = new Panel({item: new TestPanelItem()});
|
||||
panel1.onDidDestroy(() => destroyedPanels.push(panel1));
|
||||
container.addPanel(panel1);
|
||||
|
||||
const panel2 = new Panel({item: new TestPanelItem()});
|
||||
panel2.onDidDestroy(() => destroyedPanels.push(panel2));
|
||||
container.addPanel(panel2);
|
||||
|
||||
container.destroy();
|
||||
|
||||
expect(container.getPanels().length).toBe(0);
|
||||
return expect(destroyedPanels).toEqual([panel1, panel2]);
|
||||
})
|
||||
);
|
||||
|
||||
return describe("panel priority", function() {
|
||||
describe('left / top panel container', function() {
|
||||
let [initialPanel] = Array.from([]);
|
||||
beforeEach(function() {
|
||||
// 'left' logic is the same as 'top'
|
||||
container = new PanelContainer({location: 'left'});
|
||||
initialPanel = new Panel({item: new TestPanelItem()});
|
||||
return container.addPanel(initialPanel);
|
||||
});
|
||||
|
||||
describe('when a panel with low priority is added', () =>
|
||||
it('is inserted at the beginning of the list', function() {
|
||||
let addPanelSpy;
|
||||
container.onDidAddPanel(addPanelSpy = jasmine.createSpy());
|
||||
const panel = new Panel({item: new TestPanelItem(), priority: 0});
|
||||
container.addPanel(panel);
|
||||
|
||||
expect(addPanelSpy).toHaveBeenCalledWith({panel, index: 0});
|
||||
return expect(container.getPanels()[0]).toBe(panel);
|
||||
})
|
||||
);
|
||||
|
||||
return describe('when a panel with priority between two other panels is added', () =>
|
||||
it('is inserted at the between the two panels', function() {
|
||||
let addPanelSpy;
|
||||
let panel = new Panel({item: new TestPanelItem(), priority: 1000});
|
||||
container.addPanel(panel);
|
||||
|
||||
container.onDidAddPanel(addPanelSpy = jasmine.createSpy());
|
||||
panel = new Panel({item: new TestPanelItem(), priority: 101});
|
||||
container.addPanel(panel);
|
||||
|
||||
expect(addPanelSpy).toHaveBeenCalledWith({panel, index: 1});
|
||||
return expect(container.getPanels()[1]).toBe(panel);
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
return describe('right / bottom panel container', function() {
|
||||
let [initialPanel] = Array.from([]);
|
||||
beforeEach(function() {
|
||||
// 'bottom' logic is the same as 'right'
|
||||
container = new PanelContainer({location: 'right'});
|
||||
initialPanel = new Panel({item: new TestPanelItem()});
|
||||
return container.addPanel(initialPanel);
|
||||
});
|
||||
|
||||
describe('when a panel with high priority is added', () =>
|
||||
it('is inserted at the beginning of the list', function() {
|
||||
let addPanelSpy;
|
||||
container.onDidAddPanel(addPanelSpy = jasmine.createSpy());
|
||||
const panel = new Panel({item: new TestPanelItem(), priority: 1000});
|
||||
container.addPanel(panel);
|
||||
|
||||
expect(addPanelSpy).toHaveBeenCalledWith({panel, index: 0});
|
||||
return expect(container.getPanels()[0]).toBe(panel);
|
||||
})
|
||||
);
|
||||
|
||||
return describe('when a panel with low priority is added', () =>
|
||||
it('is inserted at the end of the list', function() {
|
||||
let addPanelSpy;
|
||||
container.onDidAddPanel(addPanelSpy = jasmine.createSpy());
|
||||
const panel = new Panel({item: new TestPanelItem(), priority: 0});
|
||||
container.addPanel(panel);
|
||||
|
||||
expect(addPanelSpy).toHaveBeenCalledWith({panel, index: 1});
|
||||
return expect(container.getPanels()[1]).toBe(panel);
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,45 +0,0 @@
|
||||
{CompositeDisposable} = require 'event-kit'
|
||||
|
||||
class PanelContainerElement extends HTMLElement
|
||||
createdCallback: ->
|
||||
@subscriptions = new CompositeDisposable
|
||||
|
||||
initialize: (@model, {@views}) ->
|
||||
throw new Error("Must pass a views parameter when initializing PanelContainerElements") unless @views?
|
||||
|
||||
@subscriptions.add @model.onDidAddPanel(@panelAdded.bind(this))
|
||||
@subscriptions.add @model.onDidDestroy(@destroyed.bind(this))
|
||||
@classList.add(@model.getLocation())
|
||||
this
|
||||
|
||||
getModel: -> @model
|
||||
|
||||
panelAdded: ({panel, index}) ->
|
||||
panelElement = @views.getView(panel)
|
||||
panelElement.classList.add(@model.getLocation())
|
||||
if @model.isModal()
|
||||
panelElement.classList.add("overlay", "from-top")
|
||||
else
|
||||
panelElement.classList.add("tool-panel", "panel-#{@model.getLocation()}")
|
||||
|
||||
if index >= @childNodes.length
|
||||
@appendChild(panelElement)
|
||||
else
|
||||
referenceItem = @childNodes[index]
|
||||
@insertBefore(panelElement, referenceItem)
|
||||
|
||||
if @model.isModal()
|
||||
@hideAllPanelsExcept(panel)
|
||||
@subscriptions.add panel.onDidChangeVisible (visible) =>
|
||||
@hideAllPanelsExcept(panel) if visible
|
||||
|
||||
destroyed: ->
|
||||
@subscriptions.dispose()
|
||||
@parentNode?.removeChild(this)
|
||||
|
||||
hideAllPanelsExcept: (excludedPanel) ->
|
||||
for panel in @model.getPanels()
|
||||
panel.hide() unless panel is excludedPanel
|
||||
return
|
||||
|
||||
module.exports = PanelContainerElement = document.registerElement 'atom-panel-container', prototype: PanelContainerElement.prototype
|
||||
59
src/panel-container-element.js
Normal file
59
src/panel-container-element.js
Normal file
@@ -0,0 +1,59 @@
|
||||
const {CompositeDisposable} = require('event-kit');
|
||||
|
||||
class PanelContainerElement extends HTMLElement {
|
||||
createdCallback() {
|
||||
return this.subscriptions = new CompositeDisposable;
|
||||
}
|
||||
|
||||
initialize(model, {views}) {
|
||||
this.model = model;
|
||||
this.views = views;
|
||||
if (this.views == null) { throw new Error("Must pass a views parameter when initializing PanelContainerElements"); }
|
||||
|
||||
this.subscriptions.add(this.model.onDidAddPanel(this.panelAdded.bind(this)));
|
||||
this.subscriptions.add(this.model.onDidDestroy(this.destroyed.bind(this)));
|
||||
this.classList.add(this.model.getLocation());
|
||||
return this;
|
||||
}
|
||||
|
||||
getModel() { return this.model; }
|
||||
|
||||
panelAdded({panel, index}) {
|
||||
const panelElement = this.views.getView(panel);
|
||||
panelElement.classList.add(this.model.getLocation());
|
||||
if (this.model.isModal()) {
|
||||
panelElement.classList.add("overlay", "from-top");
|
||||
} else {
|
||||
panelElement.classList.add("tool-panel", `panel-${this.model.getLocation()}`);
|
||||
}
|
||||
|
||||
if (index >= this.childNodes.length) {
|
||||
this.appendChild(panelElement);
|
||||
} else {
|
||||
const referenceItem = this.childNodes[index];
|
||||
this.insertBefore(panelElement, referenceItem);
|
||||
}
|
||||
|
||||
if (this.model.isModal()) {
|
||||
this.hideAllPanelsExcept(panel);
|
||||
return this.subscriptions.add(panel.onDidChangeVisible(visible => {
|
||||
if (visible) { return this.hideAllPanelsExcept(panel); }
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
destroyed() {
|
||||
this.subscriptions.dispose();
|
||||
return (this.parentNode != null ? this.parentNode.removeChild(this) : undefined);
|
||||
}
|
||||
|
||||
hideAllPanelsExcept(excludedPanel) {
|
||||
for (let panel of this.model.getPanels()) {
|
||||
if (panel !== excludedPanel) { panel.hide(); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = PanelContainerElement = document.registerElement('atom-panel-container', {prototype: PanelContainerElement.prototype});
|
||||
@@ -1,71 +0,0 @@
|
||||
{Emitter, CompositeDisposable} = require 'event-kit'
|
||||
|
||||
module.exports =
|
||||
class PanelContainer
|
||||
constructor: ({@location}={}) ->
|
||||
@emitter = new Emitter
|
||||
@subscriptions = new CompositeDisposable
|
||||
@panels = []
|
||||
|
||||
destroy: ->
|
||||
panel.destroy() for panel in @getPanels()
|
||||
@subscriptions.dispose()
|
||||
@emitter.emit 'did-destroy', this
|
||||
@emitter.dispose()
|
||||
|
||||
###
|
||||
Section: Event Subscription
|
||||
###
|
||||
|
||||
onDidAddPanel: (callback) ->
|
||||
@emitter.on 'did-add-panel', callback
|
||||
|
||||
onDidRemovePanel: (callback) ->
|
||||
@emitter.on 'did-remove-panel', callback
|
||||
|
||||
onDidDestroy: (callback) ->
|
||||
@emitter.on 'did-destroy', callback
|
||||
|
||||
###
|
||||
Section: Panels
|
||||
###
|
||||
|
||||
getLocation: -> @location
|
||||
|
||||
isModal: -> @location is 'modal'
|
||||
|
||||
getPanels: -> @panels.slice()
|
||||
|
||||
addPanel: (panel) ->
|
||||
@subscriptions.add panel.onDidDestroy(@panelDestroyed.bind(this))
|
||||
|
||||
index = @getPanelIndex(panel)
|
||||
if index is @panels.length
|
||||
@panels.push(panel)
|
||||
else
|
||||
@panels.splice(index, 0, panel)
|
||||
|
||||
@emitter.emit 'did-add-panel', {panel, index}
|
||||
panel
|
||||
|
||||
panelForItem: (item) ->
|
||||
for panel in @panels
|
||||
return panel if panel.getItem() is item
|
||||
null
|
||||
|
||||
panelDestroyed: (panel) ->
|
||||
index = @panels.indexOf(panel)
|
||||
if index > -1
|
||||
@panels.splice(index, 1)
|
||||
@emitter.emit 'did-remove-panel', {panel, index}
|
||||
|
||||
getPanelIndex: (panel) ->
|
||||
priority = panel.getPriority()
|
||||
if @location in ['bottom', 'right']
|
||||
for p, i in @panels by -1
|
||||
return i + 1 if priority < p.getPriority()
|
||||
0
|
||||
else
|
||||
for p, i in @panels
|
||||
return i if priority < p.getPriority()
|
||||
@panels.length
|
||||
92
src/panel-container.js
Normal file
92
src/panel-container.js
Normal file
@@ -0,0 +1,92 @@
|
||||
let PanelContainer;
|
||||
const {Emitter, CompositeDisposable} = require('event-kit');
|
||||
|
||||
module.exports =
|
||||
PanelContainer = class PanelContainer {
|
||||
constructor({location}={}) {
|
||||
this.location = location;
|
||||
this.emitter = new Emitter;
|
||||
this.subscriptions = new CompositeDisposable;
|
||||
this.panels = [];
|
||||
}
|
||||
|
||||
destroy() {
|
||||
for (let panel of this.getPanels()) { panel.destroy(); }
|
||||
this.subscriptions.dispose();
|
||||
this.emitter.emit('did-destroy', this);
|
||||
return this.emitter.dispose();
|
||||
}
|
||||
|
||||
/*
|
||||
Section: Event Subscription
|
||||
*/
|
||||
|
||||
onDidAddPanel(callback) {
|
||||
return this.emitter.on('did-add-panel', callback);
|
||||
}
|
||||
|
||||
onDidRemovePanel(callback) {
|
||||
return this.emitter.on('did-remove-panel', callback);
|
||||
}
|
||||
|
||||
onDidDestroy(callback) {
|
||||
return this.emitter.on('did-destroy', callback);
|
||||
}
|
||||
|
||||
/*
|
||||
Section: Panels
|
||||
*/
|
||||
|
||||
getLocation() { return this.location; }
|
||||
|
||||
isModal() { return this.location === 'modal'; }
|
||||
|
||||
getPanels() { return this.panels.slice(); }
|
||||
|
||||
addPanel(panel) {
|
||||
this.subscriptions.add(panel.onDidDestroy(this.panelDestroyed.bind(this)));
|
||||
|
||||
const index = this.getPanelIndex(panel);
|
||||
if (index === this.panels.length) {
|
||||
this.panels.push(panel);
|
||||
} else {
|
||||
this.panels.splice(index, 0, panel);
|
||||
}
|
||||
|
||||
this.emitter.emit('did-add-panel', {panel, index});
|
||||
return panel;
|
||||
}
|
||||
|
||||
panelForItem(item) {
|
||||
for (let panel of this.panels) {
|
||||
if (panel.getItem() === item) { return panel; }
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
panelDestroyed(panel) {
|
||||
const index = this.panels.indexOf(panel);
|
||||
if (index > -1) {
|
||||
this.panels.splice(index, 1);
|
||||
return this.emitter.emit('did-remove-panel', {panel, index});
|
||||
}
|
||||
}
|
||||
|
||||
getPanelIndex(panel) {
|
||||
let i, p;
|
||||
const priority = panel.getPriority();
|
||||
if (['bottom', 'right'].includes(this.location)) {
|
||||
for (i = this.panels.length - 1; i >= 0; i--) {
|
||||
p = this.panels[i];
|
||||
if (priority < p.getPriority()) { return i + 1; }
|
||||
}
|
||||
return 0;
|
||||
} else {
|
||||
for (i = 0; i < this.panels.length; i++) {
|
||||
p = this.panels[i];
|
||||
if (priority < p.getPriority()) { return i; }
|
||||
}
|
||||
return this.panels.length;
|
||||
}
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user