More progress on keybind creation menu
Guus van Meerveld
4 years ago
parent
02299d39e2
commit
7cf183ec9d
@ -0,0 +1,16 @@
|
||||
{
|
||||
"Applications": {
|
||||
"description": "Open/Close/Modify your applications",
|
||||
"openApp": {},
|
||||
"closeApp": {}
|
||||
},
|
||||
"System": {
|
||||
"description": "Interact with your system"
|
||||
},
|
||||
"Keys": {
|
||||
"description": "Output keyboard inputs"
|
||||
},
|
||||
"System Functions": {
|
||||
"description": "Some predefined functions"
|
||||
}
|
||||
}
|
||||
@ -1,28 +1,30 @@
|
||||
const customTitlebar = require('custom-electron-titlebar');
|
||||
const $ = require("./javascripts/jquery.min.js")
|
||||
const customTitlebar = require("custom-electron-titlebar");
|
||||
const { Menu } = require("electron");
|
||||
const $ = require("./javascripts/jquery.min.js");
|
||||
|
||||
var titleBar = new customTitlebar.Titlebar({
|
||||
backgroundColor: customTitlebar.Color.fromHex('#292929'),
|
||||
icon: "icon/icon.png"
|
||||
menu: null,
|
||||
backgroundColor: customTitlebar.Color.fromHex("#292929"),
|
||||
icon: "icon/icon.png",
|
||||
});
|
||||
|
||||
function init() {
|
||||
document.querySelectorAll(".nav-item").forEach(x => {
|
||||
x.addEventListener('click', () => {
|
||||
if ($("#main-page").prop('src').indexOf(x.id) < 0) {
|
||||
$("#main-page").prop('src', `pages/${x.id}.html`);
|
||||
document.querySelectorAll(".nav-item").forEach(y => {
|
||||
y.classList.remove('active')
|
||||
})
|
||||
x.classList.add('active')
|
||||
};
|
||||
document.querySelectorAll(".nav-item").forEach((x) => {
|
||||
x.addEventListener("click", () => {
|
||||
if ($("#main-page").prop("src").indexOf(x.id) < 0) {
|
||||
$("#main-page").prop("src", `pages/${x.id}.html`);
|
||||
document.querySelectorAll(".nav-item").forEach((y) => {
|
||||
y.classList.remove("active");
|
||||
});
|
||||
x.classList.add("active");
|
||||
}
|
||||
});
|
||||
document.querySelectorAll(".nav-item")[0].classList.add("active")
|
||||
};
|
||||
});
|
||||
document.querySelectorAll(".nav-item")[0].classList.add("active");
|
||||
}
|
||||
|
||||
document.onreadystatechange = function () {
|
||||
if (document.readyState == "complete") {
|
||||
init();
|
||||
}
|
||||
if (document.readyState == "complete") {
|
||||
init();
|
||||
}
|
||||
};
|
||||
@ -1,59 +1,96 @@
|
||||
const $ = require("../javascripts/jquery.min.js");
|
||||
const app = require("electron").remote.app;
|
||||
const path = app.getAppPath();
|
||||
|
||||
const q = document.querySelector.bind(document);
|
||||
const c = document.createElement.bind(document);
|
||||
|
||||
const $ = require(path + "/public/javascripts/jquery.min.js");
|
||||
const functions = require(path + "/json/functions.json");
|
||||
|
||||
// Predefine some vars
|
||||
var keys = {};
|
||||
var index;
|
||||
|
||||
$("input[type=text]").on("keyup", e => {
|
||||
keys[e.key.toUpperCase()] = false;
|
||||
setInput();
|
||||
// Detect keybinds
|
||||
$(".keybind-input").on("keyup", (e) => {
|
||||
keys[e.key.toUpperCase()] = false;
|
||||
setInput();
|
||||
});
|
||||
|
||||
$("input[type=text]").on("keydown", e => {
|
||||
Object.keys(keys).forEach(g => {
|
||||
if (!keys[g])
|
||||
delete keys[g];
|
||||
});
|
||||
keys[e.key.toUpperCase()] = true;
|
||||
setInput();
|
||||
$(".keybind-input").on("keydown", (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
Object.keys(keys).forEach((g) => {
|
||||
if (!keys[g]) delete keys[g];
|
||||
});
|
||||
|
||||
keys[e.key.toUpperCase()] = true;
|
||||
setInput();
|
||||
});
|
||||
|
||||
function setInput() {
|
||||
$(".keybind-input").val(Object.keys(keys).toString().replace(/,/gi, " + "));
|
||||
$(".keybind-input").val(Object.keys(keys).toString().replace(/,/gi, " + "));
|
||||
}
|
||||
|
||||
// Configure buttons
|
||||
$(".add-keybind").click(() => {
|
||||
index = 0;
|
||||
resetKeyAdder();
|
||||
$(".dark-overlay").show().addClass("d-flex");
|
||||
$(".keybind-input").focus();
|
||||
index = 0;
|
||||
$(".dark-overlay").show().addClass("d-flex");
|
||||
$(".keybind-input").focus();
|
||||
});
|
||||
|
||||
$(".cancel-btn").click(() => {
|
||||
$(".dark-overlay").hide().removeClass("d-flex");
|
||||
resetKeyAdder()
|
||||
})
|
||||
$(".dark-overlay").hide().removeClass("d-flex");
|
||||
resetKeyAdder();
|
||||
});
|
||||
|
||||
$(".done-btn").click(() => {
|
||||
switch (index) {
|
||||
case 0:
|
||||
$(".keybind-input").hide();
|
||||
$(".select-function").show();
|
||||
$(".done-btn").html("Done");
|
||||
break;
|
||||
case 1:
|
||||
$(".dark-overlay").hide().removeClass("d-flex");
|
||||
resetKeyAdder();
|
||||
|
||||
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
index++;
|
||||
})
|
||||
switch (index) {
|
||||
case 0:
|
||||
$(".keybind-input").hide();
|
||||
$(".customize").show().addClass("container-fluid");
|
||||
$(".done-btn").html("Done");
|
||||
break;
|
||||
case 1:
|
||||
$(".dark-overlay").hide().removeClass("d-flex");
|
||||
resetKeyAdder();
|
||||
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
index++;
|
||||
});
|
||||
|
||||
function resetKeyAdder() {
|
||||
$(".keybind-input").show().prop("value", "");
|
||||
$(".select-function").hide();
|
||||
$(".done-btn").html("Next");
|
||||
$(".keybind-input").show().val("");
|
||||
$(".customize").hide();
|
||||
$(".done-btn").html("Next");
|
||||
}
|
||||
|
||||
// Load functions from json
|
||||
Object.keys(functions).forEach((func) => {
|
||||
let title = c("div");
|
||||
|
||||
title.classList.add("category-item");
|
||||
title.classList.add("bold");
|
||||
title.innerHTML = func.toUpperCase();
|
||||
|
||||
title.addEventListener("click", () => {
|
||||
$(".select-function").toggle();
|
||||
});
|
||||
|
||||
let trailing = c("i");
|
||||
|
||||
trailing.classList.add("category-arrow");
|
||||
trailing.classList.add("material-icons");
|
||||
trailing.innerHTML = "arrow_forward_ios";
|
||||
|
||||
let subtitle = c("div");
|
||||
subtitle.classList.add("text-muted");
|
||||
subtitle.innerHTML = functions[func].description;
|
||||
|
||||
title.appendChild(subtitle);
|
||||
title.appendChild(trailing);
|
||||
q(".select-category").appendChild(title);
|
||||
});
|
||||
|
||||
@ -1,96 +1,96 @@
|
||||
.wrapper {
|
||||
position: absolute;
|
||||
height: calc(100vh - 30px);
|
||||
right: 0;
|
||||
position: absolute;
|
||||
height: calc(100vh - 30px);
|
||||
right: 0;
|
||||
border-radius: 5px 0 0 0;
|
||||
}
|
||||
|
||||
#main-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
user-select: none;
|
||||
background-color: #292929;
|
||||
user-select: none;
|
||||
background-color: #292929;
|
||||
}
|
||||
|
||||
@media (max-width:749px) {
|
||||
.nav-left {
|
||||
width: 100vw;
|
||||
bottom: 0;
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.nav-list li {
|
||||
margin-right: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.nav-list-top {
|
||||
left: 2rem;
|
||||
}
|
||||
|
||||
.nav-list-bottom {
|
||||
right: 2rem;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100vw;
|
||||
height: calc(100vh - 7.5rem);
|
||||
}
|
||||
@media (max-width: 749px) {
|
||||
.nav-left {
|
||||
width: 100vw;
|
||||
bottom: 0;
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.nav-list li {
|
||||
margin-right: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.nav-list-top {
|
||||
left: 2rem;
|
||||
}
|
||||
|
||||
.nav-list-bottom {
|
||||
right: 2rem;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100vw;
|
||||
height: calc(100vh - 7.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:750px) {
|
||||
.wrapper {
|
||||
min-width: calc(100vw - 6rem);
|
||||
width: 96vw;
|
||||
max-width: calc(100vw - 3.5rem);
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
top: 0;
|
||||
height: calc(100vh - 30px);
|
||||
min-width: 3.5rem;
|
||||
width: 4vw;
|
||||
max-width: 6rem;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
border-left: #a6a6a6 3px solid;
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
border-left: 3px solid #efefef!important;
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
.nav-list-top {
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
.nav-list li {
|
||||
width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 750px) {
|
||||
.wrapper {
|
||||
min-width: calc(100vw - 6rem);
|
||||
width: 96vw;
|
||||
max-width: calc(100vw - 3.5rem);
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
top: 0;
|
||||
height: calc(100vh - 30px);
|
||||
min-width: 3.5rem;
|
||||
width: 4vw;
|
||||
max-width: 6rem;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
border-left: #a6a6a6 3px solid;
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
border-left: 3px solid #efefef !important;
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
.nav-list-top {
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
.nav-list li {
|
||||
width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
list-style-type: none;
|
||||
bottom: 0;
|
||||
list-style-type: none;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.nav-list li {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-list li i {
|
||||
font-size: 2rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
@ -1,49 +1,79 @@
|
||||
.card-dark {
|
||||
background-color: rgb(39, 39, 39);
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
background-color: rgb(39, 39, 39);
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.add-keybind {
|
||||
font-size: 3rem;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
font-size: 3rem;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dark-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.keybind-input {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
height: 100%;
|
||||
cursor: default;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
font-size: 5rem;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
height: 100%;
|
||||
cursor: default;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
bottom: 1.5rem;
|
||||
right: 1.5rem;
|
||||
bottom: 1.5rem;
|
||||
right: 1.5rem;
|
||||
}
|
||||
|
||||
.keybind-input:focus {
|
||||
outline: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.select-function {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
background-color: #292929;
|
||||
border-radius: 5px;
|
||||
input {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input {
|
||||
cursor: pointer;
|
||||
/* Customize functions */
|
||||
.customize {
|
||||
width: 75%;
|
||||
height: 75%;
|
||||
background-color: #292929;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.custom-function {
|
||||
height: calc(100% - 2rem);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.right-border {
|
||||
border-right: 3px solid #333333;
|
||||
}
|
||||
|
||||
.category-arrow {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.category-item:hover .category-arrow {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border-top: 3px solid #333333;
|
||||
padding: 1rem;
|
||||
}
|
||||
Reference in new issue