functionality for switching contexts via buttons
This commit is contained in:
parent
31ebabd5e0
commit
0140c54363
8 changed files with 223 additions and 0 deletions
46
css/dashboard.css
Normal file
46
css/dashboard.css
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
.lit-button#dashboard-authentik-button{
|
||||
background: url('/icons/goauthentik_logo.png') 30px 30px no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-color: lightblue;
|
||||
border: none;
|
||||
color: none;
|
||||
text-align: center;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
.lit-button#dashboard-authentik-button:hover{
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
.lit-button#dashboard-nextcloud-button{
|
||||
background: url('/icons/nextcloud_logo.png') 30px 30px no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-color: lightblue;
|
||||
border: none;
|
||||
color: none;
|
||||
text-align: center;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
.lit-button#dashboard-nextcloud-button:hover{
|
||||
background-color: lightgrey;
|
||||
}
|
||||
.lit-button#dashboard-wekan-button{
|
||||
background: url('/icons/wekan_logo.png') 30px 30px no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-color: lightblue;
|
||||
border: none;
|
||||
color: none;
|
||||
text-align: center;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
.lit-button#dashboard-wekan-button:hover{
|
||||
background-color: lightgrey;
|
||||
}
|
||||
101
dashboard.js
Normal file
101
dashboard.js
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
var buttonsize = 250;
|
||||
document.addEventListener("keyup", (event) =>{
|
||||
if (event.ctrlKey && event.code == "Enter") {
|
||||
console.log("pressed");
|
||||
var dashboard = document.querySelector('#lit-dashboard');
|
||||
isFront = dashboard.style.display === 'block';
|
||||
viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
|
||||
viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
|
||||
console.log(viewportWidth + 'px');
|
||||
dashboard.style.left = (document.documentElement.clientWidth/2) - 1.5*buttonsize + 'px' ;
|
||||
dashboard.style.top = (viewportHeight/2) - buttonsize + 'px';
|
||||
dashboard.style.position = "fixed";
|
||||
dashboard.style.zIndex = "3000";
|
||||
dashboard.style.display = isFront ? 'none' : 'block';
|
||||
}
|
||||
});
|
||||
|
||||
function onError(error) {
|
||||
console.log(`Error: ${error}`);
|
||||
}
|
||||
function deleteButtons(dashboard)
|
||||
{
|
||||
document.getElementById("dashboard-nextcloud-button").remove();
|
||||
document.getElementById("dashboard-wekan-button").remove();
|
||||
document.getElementById("dashboard-authentik-button").remove();
|
||||
}
|
||||
function createButtons(baseUrl, dashboard)
|
||||
{
|
||||
|
||||
links= {dashboard: "https://", wekan: "https://board.", nextcloud: "https://cloud." }
|
||||
|
||||
var wekanButton = document.createElement("button");
|
||||
//wekanButton.innerHTML = "Wekan";
|
||||
wekanButton.style.position= "relative";
|
||||
wekanButton.style.top= buttonsize + 'px';
|
||||
wekanButton.setAttribute("class", "lit-button wekan-button");
|
||||
wekanButton.setAttribute("id", "dashboard-wekan-button");
|
||||
wekanButton.addEventListener ("click", function() {
|
||||
window.open(links["wekan"] + baseUrl, "_self");
|
||||
});
|
||||
|
||||
var authentikButton = document.createElement("button");
|
||||
//authentikButton.innerHTML = "Dashboard";
|
||||
authentikButton.setAttribute("class", "lit-button authentik-button");
|
||||
authentikButton.setAttribute("id", "dashboard-authentik-button");
|
||||
authentikButton.addEventListener ("click", function() {
|
||||
window.open(links["dashboard"] + baseUrl, "_self");
|
||||
});
|
||||
|
||||
var nextcloudButton = document.createElement("button");
|
||||
//nextcloudButton.innerHTML = "Nextcloud";
|
||||
nextcloudButton.setAttribute("class", "lit-button nextcloud-button");
|
||||
nextcloudButton.setAttribute("id", "dashboard-nextcloud-button");
|
||||
nextcloudButton.addEventListener ("click", function() {
|
||||
window.open(links["nextcloud"] + baseUrl, "_self");
|
||||
});
|
||||
// 2. Append somewhere
|
||||
dashboard.appendChild(nextcloudButton);
|
||||
dashboard.appendChild(wekanButton);
|
||||
dashboard.appendChild(authentikButton);
|
||||
}
|
||||
|
||||
function setDashboard(baseUrl)
|
||||
{
|
||||
console.log(baseUrl);
|
||||
if (document.getElementById('lit-dashboard'))
|
||||
{
|
||||
dashboard = document.getElementById('lit-dashboard');
|
||||
dashboard.style.position = "fixed";
|
||||
dashboard.style.zIndex='3000';
|
||||
dashboard.style.height = '60px';
|
||||
dashboard.style.display = 'none';
|
||||
deleteButtons(dashboard);
|
||||
createButtons(baseUrl, dashboard);
|
||||
}
|
||||
|
||||
else
|
||||
{
|
||||
var dashboard = document.createElement("div");
|
||||
dashboard.setAttribute("id", "lit-dashboard");
|
||||
dashboard.style.position = "fixed";
|
||||
dashboard.style.zIndex='3000';
|
||||
dashboard.style.height = '60px';
|
||||
dashboard.style.display = 'none';
|
||||
createButtons(baseUrl, dashboard);
|
||||
var currentDiv = document.body.firstChild;
|
||||
document.body.insertBefore(dashboard, currentDiv);
|
||||
}
|
||||
// erstelle ein neues div Element
|
||||
// und gib ihm etwas Inhalt
|
||||
}
|
||||
function onGot(item) {
|
||||
let baseUrl = "demo.local-it.org";
|
||||
if (item.baseUrl) {
|
||||
baseUrl = item.baseUrl;
|
||||
}
|
||||
setDashboard(baseUrl);
|
||||
}
|
||||
|
||||
let getting = browser.storage.sync.get("baseUrl");
|
||||
getting.then(onGot, onError);
|
||||
BIN
icons/goauthentik_logo.png
Normal file
BIN
icons/goauthentik_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
BIN
icons/nextcloud_logo.png
Normal file
BIN
icons/nextcloud_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
icons/wekan_logo.png
Normal file
BIN
icons/wekan_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
34
manifest.json
Normal file
34
manifest.json
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
|
||||
"manifest_version": 2,
|
||||
"name": "Dashboard",
|
||||
"version": "1.0",
|
||||
|
||||
"description": "Adds a Dashboard Header before Webpage header.",
|
||||
|
||||
"content_scripts": [
|
||||
{
|
||||
"matches": ["*://*.local-it.org/*"],
|
||||
"js": ["dashboard.js"],
|
||||
"css": [ "css/dashboard.css" ]
|
||||
}
|
||||
],
|
||||
"web_accessible_resources": [
|
||||
"css/style.css",
|
||||
"icons/Nextcloud_Logo.png",
|
||||
"icons/wekan_logo.png",
|
||||
"icons/goauthentik_logo.png"
|
||||
],
|
||||
"options_ui": {
|
||||
"page": "options.html"
|
||||
},
|
||||
|
||||
"permissions": ["storage"],
|
||||
|
||||
"browser_specific_settings": {
|
||||
"gecko": {
|
||||
"id": "addon@example.com"
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
19
options.html
Normal file
19
options.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<form>
|
||||
<label>BaseUrl<input type="text" id="base-url-link" ></label>
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
|
||||
<script src="options.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
23
options.js
Normal file
23
options.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
function saveOptions(e) {
|
||||
e.preventDefault();
|
||||
browser.storage.sync.set({
|
||||
baseUrl: document.querySelector("#base-url-link").value
|
||||
});
|
||||
}
|
||||
|
||||
function restoreOptions() {
|
||||
|
||||
function setCurrentChoice(result) {
|
||||
document.querySelector("#base-url-link").value = result.baseUrl || "add Link here";
|
||||
}
|
||||
|
||||
function onError(error) {
|
||||
console.log(`Error: ${error}`);
|
||||
}
|
||||
|
||||
let getting = browser.storage.sync.get("baseUrl");
|
||||
getting.then(setCurrentChoice, onError);
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", restoreOptions);
|
||||
document.querySelector("form").addEventListener("submit", saveOptions);
|
||||
Loading…
Reference in a new issue