Korbs/electron-tabs
1
Fork 0
Code Issues Pull requests Activity

Add setNewTab() method

Browse source
This commit is contained in:
Thomas Brouard 2022-05-23 19:17:47 +02:00
parent fad70427d5
commit 718be68e38
4 changed files with 24 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
demo/electron-tabs.html
View file

@ -11,22 +11,27 @@
<script src="../dist/electron-tabs.js"></script> <script src="../dist/electron-tabs.js"></script>
<script> <script>
const tabGroup = document.querySelector("tab-group"); const tabGroup = document.querySelector("tab-group");
tabGroup.newTab = {
title: "New Tab"
}
tabGroup.addTab({ // TODO: fix this
title: 'Google', // newTab must be defined when the component is created ("add" button visibility)
src: 'http://google.com', tabGroup.setNewTab({
title: "New Tab"
}); });
tabGroup.addTab({ tabGroup.addTab({
title: "Electron", title: "electron-tabs on NPM",
src: "http://electron.atom.io", src: "https://www.npmjs.com/package/electron-tabs",
});
tabGroup.addTab({
title: "electron-tabs on Github",
src: "https://github.com/brrd/electron-tabs",
visible: true, visible: true,
active: true active: true
}); });
tabGroup.addTab({});
</script> </script>
</body> </body>
</html> </html>

9
dist/electron-tabs.js vendored
View file

@ -1,4 +1,4 @@
var $5580883c37846f86$export$2e2bcd8739ae039 = ".etabs-tabgroup {\n width: 100%;\n height: 32px;\n background-color: #ccc;\n cursor: default;\n font: caption;\n font-size: 14px;\n -webkit-user-select: none;\n user-select: none;\n display: none;\n}\n\n.etabs-tabgroup.visible {\n\tdisplay: block;\n}\n\n.etabs-tabs {\n}\n\n.etabs-tab {\n display: none;\n position: relative;\n color: #333;\n height: 22px;\n padding: 6px 8px 4px;\n border: 1px solid #aaa;\n border-bottom: none;\n border-left: none;\n background: linear-gradient(to bottom, rgba(234,234,234,1) 0%,rgba(204,204,204,1) 100%);\n font: caption;\n font-size: 14px;\n background-color: #ccc;\n cursor: default;\n}\n\n/* Dragula */\n.etabs-tab.gu-mirror {\n padding-bottom: 0;\n}\n\n.etabs-tab:first-child {\n border-left: none;\n}\n\n.etabs-tab.visible {\n display: inline-block;\n float: left;\n}\n\n.etabs-tab.active {\n background: #fff;\n}\n\n.etabs-tab.flash {\n background: linear-gradient(to bottom, rgba(255,243,170,1) 0%,rgba(255,227,37,1) 100%);\n}\n\n.etabs-buttons {\n float: left;\n}\n\n.etabs-buttons button {\n float: left;\n color: #333;\n background: none;\n border: none;\n font-size: 12px;\n margin-top: 6px;\n border-radius: 2px;\n margin-left: 4px;\n width: 20px;\n text-align: center;\n padding: 4px 0;\n}\n\n.etabs-buttons button:hover {\n color: #eee;\n background-color: #aaa;\n}\n\n.etabs-tab-badge {\n position: absolute;\n right: 0;\n top: -7px;\n background: red;\n border-radius: 100%;\n text-align: center;\n font-size: 10px;\n padding: 0 5px;\n}\n\n.etabs-tab-badge.hidden {\n display: none;\n}\n\n.etabs-tab-icon {\n display: inline-block;\n height: 16px;\n}\n\n.etabs-tab-icon img {\n max-width: 16px;\n max-height: 16px;\n}\n\n.etabs-tab-title {\n display: inline-block;\n margin-left: 10px;\n}\n\n.etabs-tab-buttons {\n display: inline-block;\n margin-left: 10px;\n}\n\n.etabs-tab-buttons button {\n display: inline-block;\n color: #333;\n background: none;\n border: none;\n width: 20px;\n text-align: center;\n border-radius: 2px;\n}\n\n.etabs-tab-buttons button:hover {\n color: #eee;\n background-color: #aaa;\n}\n\n.etabs-views {\n position: relative;\n border-top: 1px solid #aaa;\n height: calc(100vh - 33px);\n}\n\n.etab-view {\n position: relative;\n}\n\nwebview {\n position: absolute;\n visibility: hidden;\n width: 100%;\n height: 100%;\n}\nwebview.visible {\n visibility: visible;\n}\n"; var $5580883c37846f86$export$2e2bcd8739ae039 = ".etabs-tabgroup {\n width: 100%;\n height: 32px;\n background-color: #ccc;\n cursor: default;\n font: caption;\n font-size: 14px;\n -webkit-user-select: none;\n user-select: none;\n display: none;\n}\n\n.etabs-tabgroup.visible {\n\tdisplay: block;\n}\n\n.etabs-tab {\n display: none;\n position: relative;\n color: #333;\n height: 22px;\n padding: 6px 8px 4px;\n border: 1px solid #aaa;\n border-bottom: none;\n border-left: none;\n background: linear-gradient(to bottom, rgba(234,234,234,1) 0%,rgba(204,204,204,1) 100%);\n font: caption;\n font-size: 14px;\n background-color: #ccc;\n cursor: default;\n}\n\n/* Dragula */\n.etabs-tab.gu-mirror {\n padding-bottom: 0;\n}\n\n.etabs-tab:first-child {\n border-left: none;\n}\n\n.etabs-tab.visible {\n display: inline-block;\n}\n\n.etabs-tab.active {\n background: #fff;\n}\n\n.etabs-tab.flash {\n background: linear-gradient(to bottom, rgba(255,243,170,1) 0%,rgba(255,227,37,1) 100%);\n}\n\n.etabs-buttons {\n float: left;\n}\n\n.etabs-buttons button {\n float: left;\n color: #333;\n background: none;\n border: none;\n font-size: 12px;\n margin-top: 6px;\n border-radius: 2px;\n margin-left: 4px;\n width: 20px;\n text-align: center;\n padding: 4px 0;\n}\n\n.etabs-buttons button:hover {\n color: #eee;\n background-color: #aaa;\n}\n\n.etabs-tab-badge {\n position: absolute;\n right: 0;\n top: -7px;\n background: red;\n border-radius: 100%;\n text-align: center;\n font-size: 10px;\n padding: 0 5px;\n}\n\n.etabs-tab-badge.hidden {\n display: none;\n}\n\n.etabs-tab-icon {\n display: inline-block;\n height: 16px;\n}\n\n.etabs-tab-icon img {\n max-width: 16px;\n max-height: 16px;\n}\n\n.etabs-tab-title {\n display: inline-block;\n margin-left: 10px;\n}\n\n.etabs-tab-buttons {\n display: inline-block;\n margin-left: 10px;\n}\n\n.etabs-tab-buttons button {\n display: inline-block;\n color: #333;\n background: none;\n border: none;\n width: 20px;\n text-align: center;\n border-radius: 2px;\n}\n\n.etabs-tab-buttons button:hover {\n color: #eee;\n background-color: #aaa;\n}\n\n.etabs-views {\n position: relative;\n border-top: 1px solid #aaa;\n height: calc(100vh - 33px);\n}\n\n.etab-view {\n position: relative;\n}\n\nwebview {\n position: absolute;\n visibility: hidden;\n width: 100%;\n height: 100%;\n}\n\nwebview.visible {\n visibility: visible;\n}\n";
if (!document) throw Error("electron-tabs module must be called in renderer process"); if (!document) throw Error("electron-tabs module must be called in renderer process");
@ -44,6 +44,9 @@ class $4fa36e821943b400$var$TabGroup extends HTMLElement {
$4fa36e821943b400$var$TabGroupPrivate.initVisibility.bind(this)(); $4fa36e821943b400$var$TabGroupPrivate.initVisibility.bind(this)();
if (typeof this.options.ready === "function") this.options.ready(this); if (typeof this.options.ready === "function") this.options.ready(this);
} }
setNewTab(newTab) {
this.options.newTab = newTab;
}
addTab(args = this.options.newTab) { addTab(args = this.options.newTab) {
if (typeof args === "function") args = args(this); if (typeof args === "function") args = args(this);
let id = this.newTabId; let id = this.newTabId;
@ -166,8 +169,8 @@ class $4fa36e821943b400$var$Tab extends EventTarget {
this.badge = badge; this.badge = badge;
if (badge) { if (badge) {
span.innerHTML = badge; span.innerHTML = badge;
span.classList.remove('hidden'); span.classList.remove("hidden");
} else span.classList.add('hidden'); } else span.classList.add("hidden");
this.emit("badge-changed", badge, this); this.emit("badge-changed", badge, this);
} }
getBadge() { getBadge() {

2
dist/electron-tabs.js.map vendored
View file

File diff suppressed because one or more lines are too long

4
src/index.js
View file

@ -59,6 +59,10 @@ class TabGroup extends HTMLElement {
} }
} }
setNewTab (newTab) {
this.options.newTab = newTab;
}
addTab (args = this.options.newTab) { addTab (args = this.options.newTab) {
if (typeof args === "function") { if (typeof args === "function") {
args = args(this); args = args(this);