mirror of
https://ark.sudovanilla.org/Korbs/electron-tabs.git
synced 2024-12-23 03:53:53 +00:00
Merge pull request #26 from kontrollanten/master
Add support for badges
This commit is contained in:
commit
a96dd4c25c
|
@ -71,6 +71,7 @@ Add a new tab to the tab group and returns a `Tab` instance.
|
||||||
|
|
||||||
* `title`: tab title.
|
* `title`: tab title.
|
||||||
* `src`: URL to the page which will be loaded into the view. This is actually the same than `options.webview.src`.
|
* `src`: URL to the page which will be loaded into the view. This is actually the same than `options.webview.src`.
|
||||||
|
* `badge`: optional text to put into a badge, badge will be hidden if it's falsey
|
||||||
* `iconURL`: optional URL to the tab icon.
|
* `iconURL`: optional URL to the tab icon.
|
||||||
* `icon`: optional code for a tab icon. Can be used with symbol libraries (example with Font Awesome: `icon: 'fa fa-icon-name'`). This attribute is ignored if an `iconURL` was given.
|
* `icon`: optional code for a tab icon. Can be used with symbol libraries (example with Font Awesome: `icon: 'fa fa-icon-name'`). This attribute is ignored if an `iconURL` was given.
|
||||||
* `closable` (default: `true`): if set to `true` the close button won't be displayed and the user won't be able to close the tab. See also `tab.close()`.
|
* `closable` (default: `true`): if set to `true` the close button won't be displayed and the user won't be able to close the tab. See also `tab.close()`.
|
||||||
|
@ -99,6 +100,14 @@ Set tab title.
|
||||||
|
|
||||||
Get current tab title.
|
Get current tab title.
|
||||||
|
|
||||||
|
#### `tab.setBadge(badge)`
|
||||||
|
|
||||||
|
Set tab badge.
|
||||||
|
|
||||||
|
#### `tab.getBadge()`
|
||||||
|
|
||||||
|
Get current tab badge.
|
||||||
|
|
||||||
#### `tab.setIcon (iconURL, icon)`
|
#### `tab.setIcon (iconURL, icon)`
|
||||||
|
|
||||||
Set tab icon (a iconURL or an icon must be given).
|
Set tab icon (a iconURL or an icon must be given).
|
||||||
|
|
|
@ -72,6 +72,21 @@
|
||||||
background-color: #aaa;
|
background-color: #aaa;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.etabs-tab-badge {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: -7px;
|
||||||
|
background: red;
|
||||||
|
border-radius: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 10px;
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.etabs-tab-badge.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.etabs-tab-icon {
|
.etabs-tab-icon {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
|
|
24
index.js
24
index.js
|
@ -127,6 +127,7 @@ class Tab extends EventEmitter {
|
||||||
this.tabGroup = tabGroup;
|
this.tabGroup = tabGroup;
|
||||||
this.id = id;
|
this.id = id;
|
||||||
this.title = args.title;
|
this.title = args.title;
|
||||||
|
this.badge = args.badge;
|
||||||
this.iconURL = args.iconURL;
|
this.iconURL = args.iconURL;
|
||||||
this.icon = args.icon;
|
this.icon = args.icon;
|
||||||
this.closable = args.closable === false ? false : true;
|
this.closable = args.closable === false ? false : true;
|
||||||
|
@ -156,7 +157,27 @@ class Tab extends EventEmitter {
|
||||||
if (this.isClosed) return;
|
if (this.isClosed) return;
|
||||||
return this.title;
|
return this.title;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setBadge (badge) {
|
||||||
|
if (this.isClosed) return;
|
||||||
|
let span = this.tabElements.badge;
|
||||||
|
span.innerHTML = badge;
|
||||||
|
this.badge = badge;
|
||||||
|
|
||||||
|
if (!badge) {
|
||||||
|
span.classList.add('hidden');
|
||||||
|
} else {
|
||||||
|
span.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.emit("badge-changed", badge, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
getBadge () {
|
||||||
|
if (this.isClosed) return;
|
||||||
|
return this.badge;
|
||||||
|
}
|
||||||
|
|
||||||
setIcon (iconURL, icon) {
|
setIcon (iconURL, icon) {
|
||||||
if (this.isClosed) return;
|
if (this.isClosed) return;
|
||||||
this.iconURL = iconURL;
|
this.iconURL = iconURL;
|
||||||
|
@ -249,13 +270,14 @@ const TabPrivate = {
|
||||||
// Create tab element
|
// Create tab element
|
||||||
let tab = this.tab = document.createElement("div");
|
let tab = this.tab = document.createElement("div");
|
||||||
tab.classList.add(tabClass);
|
tab.classList.add(tabClass);
|
||||||
for (let el of ["icon", "title", "buttons"]) {
|
for (let el of ["icon", "title", "buttons", "badge"]) {
|
||||||
let span = tab.appendChild(document.createElement("span"));
|
let span = tab.appendChild(document.createElement("span"));
|
||||||
span.classList.add(`${tabClass}-${el}`);
|
span.classList.add(`${tabClass}-${el}`);
|
||||||
this.tabElements[el] = span;
|
this.tabElements[el] = span;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.setTitle(this.title);
|
this.setTitle(this.title);
|
||||||
|
this.setBadge(this.badge);
|
||||||
this.setIcon(this.iconURL, this.icon);
|
this.setIcon(this.iconURL, this.icon);
|
||||||
TabPrivate.initTabButtons.bind(this)();
|
TabPrivate.initTabButtons.bind(this)();
|
||||||
TabPrivate.initTabClickHandler.bind(this)();
|
TabPrivate.initTabClickHandler.bind(this)();
|
||||||
|
|
Loading…
Reference in a new issue