diff --git a/index.html b/index.html index 1fa0de5..e1ded24 100644 --- a/index.html +++ b/index.html @@ -70,8 +70,10 @@
+ +
@@ -108,9 +110,25 @@ }) }) + document.querySelector('button[data-add-not-closeable-tab]').addEventListener('click', _ => { + chromeTabs.addTab({ + title: 'New Tab', + favicon: false + }, { + closeable: false + }) + }) + document.querySelector('button[data-remove-tab]').addEventListener('click', _ => { chromeTabs.removeTab(chromeTabs.activeTabEl) }) + + + document.querySelector('button[data-remove-all]').addEventListener('click', _ => { + chromeTabs.tabEls.forEach(element => { + chromeTabs.removeTab(element) + }); + }) document.querySelector('button[data-theme-toggle]').addEventListener('click', _ => { if (el.classList.contains('chrome-tabs-dark-theme')) { diff --git a/js/chrome-tabs.js b/js/chrome-tabs.js index 34ab771..cab5792 100644 --- a/js/chrome-tabs.js +++ b/js/chrome-tabs.js @@ -179,14 +179,17 @@ this.styleEl.innerHTML = styleHTML } - createNewTabEl() { + createNewTabEl(closeable) { const div = document.createElement('div') div.innerHTML = tabTemplate + if(!closeable) { + div.querySelector('.chrome-tab-content').removeChild(div.querySelector('.chrome-tab-close')) + } return div.firstElementChild } - addTab(tabProperties, { animate = true, background = false } = {}) { - const tabEl = this.createNewTabEl() + addTab(tabProperties, { animate = true, background = false, closeable = true } = {}) { + const tabEl = this.createNewTabEl(closeable) if (animate) { tabEl.classList.add('chrome-tab-was-just-added') @@ -202,10 +205,14 @@ this.cleanUpPreviouslyDraggedTabs() this.layoutTabs() this.setupDraggabilly() + return tabEl } setTabCloseEventListener(tabEl) { - tabEl.querySelector('.chrome-tab-close').addEventListener('click', _ => this.removeTab(tabEl)) + const tab = tabEl.querySelector('.chrome-tab-close') + if(tab !== null){ + tab.addEventListener('click', _ => this.removeTab(tabEl)) + } } get activeTabEl() {