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

Create a draggable version of the script (broken)

Browse source
This commit is contained in:
Thomas Brouard 2022-05-24 08:58:07 +02:00
parent 6d99c03ac6
commit a34efab009
11 changed files with 1902 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.parcelrc
View file

@ -1,7 +1,7 @@
{
"extends": "@parcel/config-default",
"transformers": {
"*.inline.css": [
"*.css": [
"parcel-transformer-css-to-string"
]
}

4
demo/electron-tabs.html
View file

@ -6,9 +6,9 @@
</head>
<body style="margin:0">
<tab-group new-tab-button="true"></tab-group>
<tab-group new-tab-button="true" draggable="true"></tab-group>
<script src="../dist/electron-tabs.js"></script>
<script src="../dist/electron-tabs.draggable.js"></script>
<script>
const tabGroup = document.querySelector("tab-group");

1789
dist/electron-tabs.draggable.js vendored Normal file
View file

File diff suppressed because it is too large Load diff

1
dist/electron-tabs.draggable.js.map vendored Normal file
View file

File diff suppressed because one or more lines are too long

23
dist/electron-tabs.js vendored
View file

@ -1,4 +1,4 @@
var $5580883c37846f86$export$2e2bcd8739ae039 = "/* TODO: use custom properties */\n\nwebview {\n position: absolute;\n visibility: hidden;\n width: 100%;\n height: 100%;\n}\n\nwebview.visible {\n visibility: visible;\n}\n\n.etabs {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n text-rendering: optimizeLegibility;\n font-feature-settings: 'liga', 'clig', 'kern';\n}\n\n.etabs-tabgroup {\n width: 100%;\n height: 32px;\n cursor: default;\n font: caption;\n font-size: 14px;\n -webkit-user-select: none;\n user-select: none;\n display: none;\n background: #E7EAED;\n box-shadow: inset 0 -1px #DADCE0;\n border-top: 1px solid #DADCE0;\n}\n\n.etabs-tabgroup.visible {\n display: flex;\n}\n\n.etabs-tabs {\n height: 100%;\n}\n\n.etabs-tab {\n display: none;\n position: relative;\n height: 100%;\n background: #E7EAED;\n color: #696A6C;\n padding: 5px 9px;\n transition: background-color 150ms ease-out;\n box-shadow: inset 0 -1px #DADCE0;\n font: caption;\n font-size: 13px;\n cursor: pointer;\n box-sizing: border-box;\n}\n\n/* Dragula */\n.etabs-tab.gu-mirror {\n padding-bottom: 0;\n cursor: grab;\n\tborder: none;\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 box-shadow: none;\n\tborder-left: 1px solid #DADCE0;\n\tborder-right: 1px solid #DADCE0;\n\tpadding-left: 8px;\n\tpadding-right: 8px;\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-tab.visible:not(.active)+.etabs-tab.visible:not(.active) {\n\tborder-left: 1px solid #B4B6B8;\n\tpadding-left: 8px;\n}\n\n.etabs-tab:not(.active):hover {\n\tbackground: #F1F3F4;\n}\n\n.etabs-buttons {\n border-left: 1px solid #B4B6B8;\n}\n\n.etabs-buttons button {\n display: block;\n color: #777;\n background: none;\n border: none;\n font-size: 16px;\n font-family: inherit;\n margin-top: 5px;\n border-radius: 50%;\n margin-left: 4px;\n width: 20px;\n height: 20px;\n text-align: center;\n line-height: 14px;\n padding: 1px 0 0 0;\n\tcursor: pointer;\n}\n\n.etabs-buttons button:hover {\n color: #333;\n background-color: #bbb;\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: #777;\n background: none;\n border: none;\n width: 20px;\n height: 20px;\n text-align: center;\n border-radius: 50%;\n cursor: pointer;\n padding: 1px 0 0 0;\n font-size: 16px;\n}\n\n.etabs-tab-buttons button:hover {\n color: #333;\n background-color: #bbb;\n}\n\n.etabs-views {\n position: relative;\n height: calc(100vh - 33px);\n}\n\n.etab-view {\n position: relative;\n}\n";
var $4866f6bbac7a0ed7$export$2e2bcd8739ae039 = "/* TODO: use custom properties */\n\nwebview {\n position: absolute;\n visibility: hidden;\n width: 100%;\n height: 100%;\n}\n\nwebview.visible {\n visibility: visible;\n}\n\n.etabs {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n text-rendering: optimizeLegibility;\n font-feature-settings: 'liga', 'clig', 'kern';\n}\n\n.etabs-tabgroup {\n width: 100%;\n height: 32px;\n cursor: default;\n font: caption;\n font-size: 14px;\n -webkit-user-select: none;\n user-select: none;\n display: none;\n background: #E7EAED;\n box-shadow: inset 0 -1px #DADCE0;\n border-top: 1px solid #DADCE0;\n}\n\n.etabs-tabgroup.visible {\n display: flex;\n}\n\n.etabs-tabs {\n height: 100%;\n}\n\n.etabs-tab {\n display: none;\n position: relative;\n height: 100%;\n background: #E7EAED;\n color: #696A6C;\n padding: 5px 9px;\n transition: background-color 150ms ease-out;\n box-shadow: inset 0 -1px #DADCE0;\n font: caption;\n font-size: 13px;\n cursor: pointer;\n box-sizing: border-box;\n}\n\n/* Dragula */\n.etabs-tab.gu-mirror {\n padding-bottom: 0;\n cursor: grab;\n\tborder: none;\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 box-shadow: none;\n\tborder-left: 1px solid #DADCE0;\n\tborder-right: 1px solid #DADCE0;\n\tpadding-left: 8px;\n\tpadding-right: 8px;\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-tab.visible:not(.active)+.etabs-tab.visible:not(.active) {\n\tborder-left: 1px solid #B4B6B8;\n\tpadding-left: 8px;\n}\n\n.etabs-tab:not(.active):hover {\n\tbackground: #F1F3F4;\n}\n\n.etabs-buttons {\n border-left: 1px solid #B4B6B8;\n}\n\n.etabs-buttons button {\n display: block;\n color: #777;\n background: none;\n border: none;\n font-size: 16px;\n font-family: inherit;\n margin-top: 5px;\n border-radius: 50%;\n margin-left: 4px;\n width: 20px;\n height: 20px;\n text-align: center;\n line-height: 14px;\n padding: 1px 0 0 0;\n\tcursor: pointer;\n}\n\n.etabs-buttons button:hover {\n color: #333;\n background-color: #bbb;\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: #777;\n background: none;\n border: none;\n width: 20px;\n height: 20px;\n text-align: center;\n border-radius: 50%;\n cursor: pointer;\n padding: 1px 0 0 0;\n font-size: 16px;\n}\n\n.etabs-tab-buttons button:hover {\n color: #333;\n background-color: #bbb;\n}\n\n.etabs-views {\n position: relative;\n height: calc(100vh - 33px);\n}\n\n.etab-view {\n position: relative;\n}\n";
if (!document) throw Error("electron-tabs module must be called in renderer process");
@ -16,7 +16,8 @@ class $4fa36e821943b400$var$TabGroup extends HTMLElement {
defaultTab: {
title: "New Tab",
active: true
}
},
draggable: this.getAttribute("draggable") || false
};
// Create custom element
const shadow = this.attachShadow({
@ -40,14 +41,28 @@ class $4fa36e821943b400$var$TabGroup extends HTMLElement {
wrapper.appendChild(viewContainer);
this.viewContainer = viewContainer;
const style = document.createElement("style");
style.textContent = $5580883c37846f86$export$2e2bcd8739ae039;
style.textContent = $4866f6bbac7a0ed7$export$2e2bcd8739ae039;
shadow.appendChild(style);
shadow.appendChild(wrapper);
this.tabs = [];
this.newTabId = 0;
$4fa36e821943b400$var$TabGroupPrivate.initNewTabButton.bind(this)();
$4fa36e821943b400$var$TabGroupPrivate.initVisibility.bind(this)();
if (typeof this.options.ready === "function") this.options.ready(this);
// Init draggable tabs
if (this.options.draggable) {
const initDragula = ()=>{
// FIXME: dragula doesnt support shadow dom :-(
console.log(this.tabContainer);
const d = window.dragula([
this.tabContainer
], {
direction: "horizontal"
});
console.log(d);
};
if (window.dragula) initDragula();
else document.addEventListener("DOMContentLoaded", initDragula);
}
}
setDefaultTab(tab) {
this.options.defaultTab = tab;

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

File diff suppressed because one or more lines are too long

47
package-lock.json generated
View file

@ -1057,6 +1057,12 @@
"color-convert": "^2.0.1"
}
},
"atoa": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/atoa/-/atoa-1.0.0.tgz",
"integrity": "sha512-VVE1H6cc4ai+ZXo/CRWoJiHXrA1qfA31DPnx6D20+kSI547hQN5Greh51LQ1baMRMfxO5K5M4ImMtZbZt2DODQ==",
"dev": true
},
"base-x": {
"version": "3.0.9",
"resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz",
@ -1241,6 +1247,16 @@
"proto-list": "~1.2.1"
}
},
"contra": {
"version": "1.9.4",
"resolved": "https://registry.npmjs.org/contra/-/contra-1.9.4.tgz",
"integrity": "sha1-9TveQtfltZhcrk2ZqNYQUm3o8o0=",
"dev": true,
"requires": {
"atoa": "1.0.0",
"ticky": "1.0.1"
}
},
"core-util-is": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@ -1260,6 +1276,15 @@
"yaml": "^1.10.0"
}
},
"crossvent": {
"version": "1.5.5",
"resolved": "https://registry.npmjs.org/crossvent/-/crossvent-1.5.5.tgz",
"integrity": "sha1-rSCHjkkh6b5z2daXb4suzQ9xoLE=",
"dev": true,
"requires": {
"custom-event": "^1.0.0"
}
},
"css-declaration-sorter": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz",
@ -1364,6 +1389,12 @@
"css-tree": "^1.1.2"
}
},
"custom-event": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
"integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=",
"dev": true
},
"debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -1468,6 +1499,16 @@
"integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
"dev": true
},
"dragula": {
"version": "3.7.3",
"resolved": "https://registry.npmjs.org/dragula/-/dragula-3.7.3.tgz",
"integrity": "sha512-/rRg4zRhcpf81TyDhaHLtXt6sEywdfpv1cRUMeFFy7DuypH2U0WUL0GTdyAQvXegviT4PJK4KuMmOaIDpICseQ==",
"dev": true,
"requires": {
"contra": "1.9.4",
"crossvent": "1.5.5"
}
},
"duplexer3": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
@ -2707,6 +2748,12 @@
}
}
},
"ticky": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/ticky/-/ticky-1.0.1.tgz",
"integrity": "sha1-t8+nHnaPHJAAxJe5FRswlHxQ5G0=",
"dev": true
},
"timsort": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",

11
package.json
View file

@ -2,8 +2,16 @@
"name": "electron-tabs",
"version": "1.0.0-dev",
"description": "Simple tabs for Electron applications",
"source": "src/index.js",
"main": "dist/electron-tabs.js",
"draggable": "dist/electron-tabs.draggable.js",
"targets": {
"main": {
"source": "src/index.js"
},
"draggable": {
"source": "src/draggable.js"
}
},
"repository": {
"type": "git",
"url": "https://github.com/brrd/electron-tabs"
@ -23,6 +31,7 @@
"license": "MIT",
"devDependencies": {
"cssnano": "^5.1.9",
"dragula": "^3.7.3",
"electron": "^17.1.2",
"parcel": "^2.5.0",
"parcel-transformer-css-to-string": "^0.9.1",

12
src/draggable.js Normal file
View file

@ -0,0 +1,12 @@
import dragula from "dragula";
import "./index.js";
import styles from "dragula/dist/dragula.css";
window.dragula = dragula;
// Inject styles
(function () {
let styleTag = document.createElement("style");
styleTag.innerHTML = styles;
document.getElementsByTagName("head")[0].appendChild(styleTag);
})();

24
src/index.js
View file

@ -1,4 +1,4 @@
import styles from "./style.inline.css";
import styles from "./style.css";
if (!document) {
throw Error("electron-tabs module must be called in renderer process");
@ -16,7 +16,8 @@ class TabGroup extends HTMLElement {
tabClass: this.getAttribute("tab-class") || "etabs-tab",
viewClass: this.getAttribute("view-class") || "etabs-view",
newTabButton: this.getAttribute("new-tab-button") || false,
defaultTab: { title: "New Tab", active: true }
defaultTab: { title: "New Tab", active: true },
draggable: this.getAttribute("draggable") || false
// TODO: replace this callback
// ready: args.ready
};
@ -56,8 +57,23 @@ class TabGroup extends HTMLElement {
this.newTabId = 0;
TabGroupPrivate.initNewTabButton.bind(this)();
TabGroupPrivate.initVisibility.bind(this)();
if (typeof this.options.ready === "function") {
this.options.ready(this);
// Init draggable tabs
if (this.options.draggable) {
const initDragula = () => {
// FIXME: dragula doesnt support shadow dom :-(
console.log(this.tabContainer);
const d =window.dragula([this.tabContainer], {
direction: "horizontal"
});
console.log(d);
};
if (window.dragula) {
initDragula();
} else {
document.addEventListener("DOMContentLoaded", initDragula);
}
}
}

0
src/style.inline.css → src/style.css
View file