mirror of
https://ark.sudovanilla.org/Korbs/electron-tabs.git
synced 2024-12-22 19:43:53 +00:00
Add setNewTab() method
This commit is contained in:
Thomas Brouard
parent
fad70427d5
commit
718be68e38
|
|
@ -11,22 +11,27 @@
|
|||
<script src="../dist/electron-tabs.js"></script>
|
||||
<script>
|
||||
const tabGroup = document.querySelector("tab-group");
|
||||
tabGroup.newTab = {
|
||||
title: "New Tab"
|
||||
}
|
||||
|
||||
tabGroup.addTab({
|
||||
title: 'Google',
|
||||
src: 'http://google.com',
|
||||
// TODO: fix this
|
||||
// newTab must be defined when the component is created ("add" button visibility)
|
||||
tabGroup.setNewTab({
|
||||
title: "New Tab"
|
||||
});
|
||||
|
||||
tabGroup.addTab({
|
||||
title: "Electron",
|
||||
src: "http://electron.atom.io",
|
||||
title: "electron-tabs on NPM",
|
||||
src: "https://www.npmjs.com/package/electron-tabs",
|
||||
});
|
||||
|
||||
tabGroup.addTab({
|
||||
title: "electron-tabs on Github",
|
||||
src: "https://github.com/brrd/electron-tabs",
|
||||
visible: true,
|
||||
active: true
|
||||
});
|
||||
|
||||
tabGroup.addTab({});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
9
dist/electron-tabs.js
vendored
9
dist/electron-tabs.js
vendored
|
|
@ -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");
|
||||
|
|
@ -44,6 +44,9 @@ class $4fa36e821943b400$var$TabGroup extends HTMLElement {
|
|||
$4fa36e821943b400$var$TabGroupPrivate.initVisibility.bind(this)();
|
||||
if (typeof this.options.ready === "function") this.options.ready(this);
|
||||
}
|
||||
setNewTab(newTab) {
|
||||
this.options.newTab = newTab;
|
||||
}
|
||||
addTab(args = this.options.newTab) {
|
||||
if (typeof args === "function") args = args(this);
|
||||
let id = this.newTabId;
|
||||
|
|
@ -166,8 +169,8 @@ class $4fa36e821943b400$var$Tab extends EventTarget {
|
|||
this.badge = badge;
|
||||
if (badge) {
|
||||
span.innerHTML = badge;
|
||||
span.classList.remove('hidden');
|
||||
} else span.classList.add('hidden');
|
||||
span.classList.remove("hidden");
|
||||
} else span.classList.add("hidden");
|
||||
this.emit("badge-changed", badge, this);
|
||||
}
|
||||
getBadge() {
|
||||
|
|
|
|||
2
dist/electron-tabs.js.map
vendored
2
dist/electron-tabs.js.map
vendored
File diff suppressed because one or more lines are too long
|
|
@ -59,6 +59,10 @@ class TabGroup extends HTMLElement {
|
|||
}
|
||||
}
|
||||
|
||||
setNewTab (newTab) {
|
||||
this.options.newTab = newTab;
|
||||
}
|
||||
|
||||
addTab (args = this.options.newTab) {
|
||||
if (typeof args === "function") {
|
||||
args = args(this);
|
||||
|
|
|
|||
Loading…
Reference in a new issue