Verified Commit 293397fb authored by Marco Kellershoff's avatar Marco Kellershoff 🤸
Browse files

Major rework

parent 22a5179f
{
"manifest_version": 2,
"name": "Gorilla Script- and Style-Loader",
"version": "1.1.0",
"version": "2.0.1",
"description": "Enables you to load Javascript and CSS into websites.",
"default_locale": "en",
"icons": {
......@@ -30,7 +30,8 @@
],
"js": [
"boot.js"
]
],
"run_at": "document_start"
}
]
}
......@@ -58,6 +58,7 @@ button:focus {
outline: none;
}
.hostnames,
.input-file-url {
background-color: #222;
border-radius: 10px;
......@@ -68,6 +69,11 @@ button:focus {
width: 350px;
}
.hostnames {
width: 100%;
}
.hostnames,
.input-file-url:focus {
outline: none;
}
......@@ -155,3 +161,93 @@ footer a:visited {
footer a:hover {
border-bottom: 1px solid red;
}
.modal {
display: none;
position: fixed;
z-index: 7;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
.modal-container {
background-color: #272b30;
margin: auto;
padding: 20px;
border: 1px solid #000;
border-radius: 5px;
}
.modal-content {
align-items: center;
color: black;
display: flex;
justify-content: center;
flex-direction: column;
h1,
p {
text-align: center;
color: #4dde6e;
text-shadow: -1px -1px 0 #222, 1px -1px 0 #222,
-1px 1px 0 #222, 1px 1px 0 #222;
}
input {
background-color: #222;
border-radius: 10px;
border: 5px solid #444;
color: #f2cf66;
font-size: 16px;
padding: 10px;
width: 90%;
display: block;
margin: {
bottom: 20px;
}
&:focus {
outline: none;
}
}
button {
border-radius: 10px;
border: 1px solid #333;
color: #fff;
font-family: "monospace";
font-size: 18px;
margin: 0 10px 10px 10px;
padding: 10px 20px;
position: relative;
text-decoration: none;
&.new-document {
background-color: #0079d3;
}
&.cancel {
background-color: #f44336;
}
&.clipboard {
background-color: #19cf85;
}
&:active {
transform: translate(0px, 5px);
border-bottom: 1px solid;
}
}
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
}
......@@ -9,15 +9,18 @@
<div class="contentwrapper">
<h1>Options for <span>Gorilla Script- and Style-Loader</span></h1>
<p>Press <kbd>CTRL</kbd> / <kbd></kbd> + <kbd>S</kbd> to save the configuration.</p>
<nav class="hidden">
<button id="exportBtn">Export Configuration</button>
<button id="importBtn">Import Configuration</button>
<input id="file" name="file" type="file" accept=".json" />
</nav>
<h3>Files to be loaded</h3>
<div class="files-container">
<ol class="files"></ul>
</div>
<h3>.. when the hostname matches</h3>
<p>
A comma separated list of hostnames that have to match,
otherwise the files are not injected into the page.
</p>
<div class="hostname-matches-container">
<input type="text" class="hostnames" placeholder="gorilla.moe,www.gorilla.moe,apps.gorilla.moe" />
</div>
</div>
<footer>
Made with <span class="gorilla-heart"></span> by
......
......@@ -8,6 +8,65 @@
let mouseOveredFileUrlInput = null;
let dragSrcEl = null;
const gorillaModal = (opts) => {
opts = opts || {};
opts.content = opts.content || "";
opts.closeBtn = opts.closeBtn || false;
const modal = document.createElement("div");
const modalContainer = document.createElement("div");
modalContainer.className = "modal-container";
const modalContent = document.createElement("div");
modalContent.className = "modal-content";
modal.show = function() {
this.style.display = "flex";
return this;
};
modal.hide = function() {
this.style.display = "none";
return this;
};
modal.destroy = function() {
this.parentNode.removeChild(this);
return this;
};
modal.addContents = function(contents) {
switch (typeof contents) {
case "string":
modalContent.innerHTML = contents;
break;
case "object":
if (contents.length) {
contents.forEach(node => modalContent.appendChild(node));
} else {
modalContent.appendChild(contents);
}
break;
default:
break;
}
return this;
};
modal.className = "modal";
if (opts.closeBtn) {
const closeBtn = document.createElement("span");
closeBtn.innerText = "x";
closeBtn.className = "close";
closeBtn.addEventListener(
"click",
function() {
this.parentNode.parentNode.destroy();
},
{ passive: true }
);
modalContainer.appendChild(closeBtn);
}
modal.addContents(opts.contents);
modalContainer.appendChild(modalContent);
modal.appendChild(modalContainer);
document.body.appendChild(modal);
return modal;
};
const setDataStoreKey = function(key, value, cb) {
cb = cb || function() {};
const val = {};
......@@ -45,7 +104,19 @@
}
});
setDataStoreKey("files", files);
alert(msg);
const hostnames = [];
$(".hostnames")
.value.split(",")
.forEach((hostname) => {
hostnames.push(hostname.trim());
});
setDataStoreKey("hostnames", hostnames);
const modal = gorillaModal({
contents: `<p>${msg}</p>`
}).show();
setTimeout(() => {
modal.destroy();
}, 1000);
};
const onDropCallback = function(evt) {
......@@ -105,6 +176,13 @@
},
{ passive: true }
);
input.addEventListener(
"keyup",
function() {
this.setAttribute("value", this.value);
},
{ passive: true }
);
select.addEventListener(
"change",
function() {
......@@ -154,6 +232,10 @@
};
const createFileItem = (file, refNode) => {
file = file || {
type: "js",
url: ""
};
const listItem = create("li");
listItem.draggable = true;
listItem.className = "file";
......@@ -208,11 +290,17 @@
// load files from store and populate the list
getDataStoreKey("files", [], (files) => {
if (files.length === 0) {
createFileItem();
return;
}
files.forEach(file => createFileItem(file));
});
// load hostnames from store and populate the input field
getDataStoreKey("hostnames", [], (hostnames) => {
$(".hostnames").value = hostnames.join(",");
});
let onKeyDownCallback = function(evt) {
if (evt.ctrlKey === true) {
ctrlKeyPressed = true;
......
@font-face {
font-family: "monospace";
font-style: normal;
font-weight: 400;
}
html,
body {
background-color: #272b30;
color: #fff;
}
body {
font-size: 110%;
line-height: 1.8em;
}
a:link,
a:active,
a:visited {
color: #666;
}
.contentwrapper {
margin: 0 auto;
max-width: 100%;
padding-bottom: 42px;
width: 776px;
}
h1 {
border-bottom: 2px solid #f2cf66;
color: #de6a73;
}
h1 span {
color: #19cf85;
}
.hidden {
display: none;
}
.gorilla-heart {
color: #f00;
font-size: 170%;
padding: 5px;
}
.btn-file-add {
background-color: #19cf85;
}
.btn-file-remove {
background-color: #de6a73;
}
button:focus {
outline: none;
}
.hostnames,
.input-file-url {
background-color: #222;
border-radius: 10px;
border: 5px solid #444;
color: #f2cf66;
font-size: 16px;
padding: 10px;
width: 350px;
}
.hostnames {
width: 100%;
}
.hostnames,
.input-file-url:focus {
outline: none;
}
.clickable-url {
cursor: pointer;
text-decoration: underline;
}
.select-file-type {
background-color: #112233;
}
.select-file-type:focus {
outline: none;
}
.select-file-type option:checked {
background-color: #051525;
}
kbd {
background-color: #f7f7f7;
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
color: #333;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.4;
margin: 0 0.1em;
padding: 0.1em 0.6em;
text-shadow: 0 1px 0 #fff;
}
select {
border-radius: 10px;
border: 1px solid #333;
color: #fff;
font-family: "monospace";
font-size: 18px;
margin: 0 10px 10px 10px;
padding: 10px 20px;
position: relative;
text-decoration: none;
}
button {
border-radius: 10px;
border: 1px solid #333;
color: #fff;
font-family: "monospace";
font-size: 18px;
margin: 0 10px 10px 10px;
padding: 10px 20px;
position: relative;
text-decoration: none;
}
button:active {
transform: translate(0px, 5px);
border-bottom: 1px solid;
}
nav {
margin-top: 20px;
}
footer {
bottom: 1%;
color: #666;
display: block;
position: fixed;
right: 1%;
text-align: right;
}
footer a:link,
footer a:visited {
border-bottom: 1px solid;
text-decoration: none;
}
footer a:hover {
border-bottom: 1px solid red;
}
.modal {
display: none;
position: fixed;
z-index: 7;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
.modal-container {
background-color: #272b30;
margin: auto;
padding: 20px;
border: 1px solid #000;
border-radius: 5px;
}
.modal-content {
align-items: center;
color: black;
display: flex;
justify-content: center;
flex-direction: column;
h1,
p {
text-align: center;
color: #4dde6e;
text-shadow: -1px -1px 0 #222, 1px -1px 0 #222,
-1px 1px 0 #222, 1px 1px 0 #222;
}
input {
background-color: #222;
border-radius: 10px;
border: 5px solid #444;
color: #f2cf66;
font-size: 16px;
padding: 10px;
width: 90%;
display: block;
margin: {
bottom: 20px;
}
&:focus {
outline: none;
}
}
button {
border-radius: 10px;
border: 1px solid #333;
color: #fff;
font-family: "monospace";
font-size: 18px;
margin: 0 10px 10px 10px;
padding: 10px 20px;
position: relative;
text-decoration: none;
&.new-document {
background-color: #0079d3;
}
&.cancel {
background-color: #f44336;
}
&.clipboard {
background-color: #19cf85;
}
&:active {
transform: translate(0px, 5px);
border-bottom: 1px solid;
}
}
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
}
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment