mirror of
https://ark.sudovanilla.org/Korbs/electron-tabs.git
synced 2024-12-22 19:43:53 +00:00
Create a draggable version of the script (broken)
This commit is contained in:
Thomas Brouard
parent
6d99c03ac6
commit
a34efab009
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"extends": "@parcel/config-default",
|
||||
"transformers": {
|
||||
"*.inline.css": [
|
||||
"*.css": [
|
||||
"parcel-transformer-css-to-string"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
1789
dist/electron-tabs.draggable.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
1
dist/electron-tabs.draggable.js.map
vendored
Normal file
1
dist/electron-tabs.draggable.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
23
dist/electron-tabs.js
vendored
23
dist/electron-tabs.js
vendored
|
|
@ -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
2
dist/electron-tabs.js.map
vendored
File diff suppressed because one or more lines are too long
47
package-lock.json
generated
47
package-lock.json
generated
|
|
@ -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
11
package.json
|
|
@ -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
12
src/draggable.js
Normal 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
24
src/index.js
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue