Skip to content

Commit 5f798d9

Browse files
NickeldonNickeldon
committed
Added file drop support (DropzoneJS) / Bug fixes / UI enhancement (v3.1.1)
1 parent f250c42 commit 5f798d9

179 files changed

Lines changed: 13539 additions & 48 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎UI/Addons/Multiselector/styles/multiselect.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.multiselect-wrapper {
22
width: 180px;
3+
height: 100px;
34
display: inline-block;
45
white-space: nowrap;
56
font-size: 12px;
@@ -13,11 +14,13 @@
1314
width: 100%;
1415
text-align: center;
1516
padding-right: 50px;
17+
height: 25px;
1618
}
1719

1820
.multiselect-wrapper label {
1921
display: block;
2022
font-size: 12px;
23+
height: 20px;
2124
font-weight : 600;
2225
text-align: center;
2326
cursor: pointer;
@@ -64,12 +67,12 @@
6467
position: relative;
6568
padding: 0px;
6669
margin: 0px;
67-
max-height: 200px;
6870
overflow-y: auto;
6971
overflow-x: hidden;
7072
}
7173

7274
.multiselect-wrapper ul li {
75+
padding-top: 10px;
7376
padding-right: 20px;
7477
display: block;
7578
transition: all 1s ease-out;
@@ -89,7 +92,7 @@
8992
}
9093

9194
.multiselect-input-div {
92-
height: 34px;
95+
height: 45px;
9396
}
9497

9598
.multiselect-input-div input{

‎UI/Dropzone.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
var path;
2+
var count = 0
3+
4+
5+
const myDropzone = new Dropzone("#drop-zone", {
6+
maxFiles: 39999,
7+
url: "http://localhost:8000/returnrequest",
8+
init: function() {
9+
this.hiddenFileInput.setAttribute("webkitdirectory", true);
10+
},
11+
});
12+
13+
myDropzone.on("addedfiles", (dir) => {
14+
15+
path = dir[0].path
16+
document.querySelector('.dropzone h4').style.color = 'transparent'
17+
document.querySelector('.dropzone h5').style.color = 'transparent'
18+
// Add an info line about the added file for each file.
19+
console.log(dir)
20+
});
21+
22+
myDropzone.on("complete", () => {
23+
count++
24+
if(count === 1){
25+
handler(path)}
26+
})

‎UI/electron.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,11 @@ function createWindow(){
2929
transparent: true
3030
});
3131
windowObj.loadURL(url.format(path.join(__dirname, 'index.html')));
32-
//windowObj.webContents.openDevTools()
3332
windowObj.on('closed', () => {
3433
windowObj = null
3534
})
3635

36+
3737
//Workaround for frame top-bar glitch (electron 25)
3838
windowObj.on('blur', () => {
3939
windowObj.setBackgroundColor('#00000000')

‎UI/handler.js‎

Lines changed: 67 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
document.getElementById('sec-notif').style.transform = 'scale(0)'
1+
//document.getElementById('sec-notif').style.transform = 'scale(0)'
22

33
try {
44
console.log(localStorage.getItem("colormode"))
@@ -15,22 +15,28 @@ function colormode(pref){
1515
localStorage.setItem("colormode", "dark")
1616
document.getElementById('filter').style.opacity = '70%'
1717
document.getElementById('menu1').style.backgroundColor = 'black'
18-
document.getElementById('sec-notif').style.backgroundColor = 'black'
18+
//document.getElementById('sec-notif').style.backgroundColor = 'black'
1919
document.getElementById('warn-multichoice').style.backgroundColor = 'black'
2020
document.getElementById('warn-recursive').style.backgroundColor = 'black'
21-
document.getElementById('menu1').style.color = 'white'
21+
document.querySelectorAll('h4').forEach((elems) => {
22+
elems.style.color = 'white'
23+
})
24+
document.querySelectorAll('h5').forEach((elems) => {
25+
elems.style.color = 'white'
26+
})
2227
document.getElementById('warn-multichoice').style.color = 'white'
2328
document.getElementById('warn-recursive').style.color = 'white'
24-
document.getElementById('btn-select').style.color = 'white'
29+
document.getElementById('warn-multichoice').classList.add('scrl-bar-drk-mode')
30+
//document.getElementById('btn-select').style.color = 'white'
2531
for(i = 0; i < document.getElementsByClassName('choice-rec').length; i++){
2632
document.getElementsByClassName('choice-rec')[i].style.color = 'white'
2733
document.getElementsByClassName('choice-rec')[i].style.backgroundColor = 'black'
2834
}
2935
document.getElementsByClassName('gg-dark-mode')[0].style.backgroundColor = 'black'
30-
document.getElementById('sec-notif').style.color = 'white'
31-
document.querySelector('.security-notification input').style.color = 'white'
32-
document.querySelector('.security-notification input').style.backgroundColor = 'black'
33-
document.querySelector('.security-notification input').style.borderColor = 'white';
36+
//document.getElementById('sec-notif').style.color = 'white'
37+
//document.querySelector('.security-notification input').style.color = 'white'
38+
//document.querySelector('.security-notification input').style.backgroundColor = 'black'
39+
//document.querySelector('.security-notification input').style.borderColor = 'white';
3440
document.getElementById('sub-select1').style.backgroundColor = 'black'
3541
document.getElementById('sub-select1').style.borderColor = 'white'
3642
document.getElementById('sel-txt').style.color = 'white';
@@ -49,24 +55,51 @@ function colormode(pref){
4955
document.getElementById('error').style.color = 'white'
5056
document.getElementById('success').style.color = 'white';
5157
document.getElementById("notification").style.backgroundColor = 'black';
58+
59+
document.querySelector('.dropzone').style.backgroundColor = 'black';
60+
document.querySelector('.dropzone').style.color = 'white';
61+
document.querySelectorAll('.dz-image').forEach((elem) => {
62+
elem.classList.add('invert');
63+
})
64+
65+
document.querySelectorAll('.dz-details').forEach((elem) => {
66+
elem.classList.add('invert')
67+
})
5268

5369
} else if(pref === 'light'){
5470
localStorage.setItem("colormode", "light")
5571
document.getElementById('filter').style.opacity = '5%'
5672
document.getElementById('menu1').style.backgroundColor = 'white'
57-
document.getElementById('sec-notif').style.backgroundColor = 'white'
73+
//document.getElementById('sec-notif').style.backgroundColor = 'white'
5874
document.getElementById('warn-multichoice').style.backgroundColor = 'white'
5975
document.getElementById('warn-recursive').style.backgroundColor = 'white'
60-
document.getElementById('menu1').style.color = 'black'
76+
document.querySelectorAll('h4').forEach((elems) => {
77+
elems.style.color = 'black'
78+
})
79+
document.querySelectorAll('h5').forEach((elems) => {
80+
elems.style.color = 'black'
81+
})
6182
document.getElementById('warn-multichoice').style.color = 'black'
6283
document.getElementById('warn-recursive').style.color = 'black'
63-
document.getElementById('btn-select').style.color = 'black'
84+
document.getElementById('warn-multichoice').classList.remove('scrl-bar-drk-mode')
85+
//document.getElementById('btn-select').style.color = 'black'
86+
document.querySelector('.dropzone').style.backgroundColor = 'white';
87+
document.querySelector('.dropzone').style.color = 'black';
88+
document.querySelectorAll('.dz-image').forEach((elem) => {
89+
elem.classList.remove('invert');
90+
})
91+
92+
document.querySelectorAll('.dz-details').forEach((elem) => {
93+
elem.classList.remove('invert')
94+
})
95+
96+
//document.querySelector('.dz-details').style.backgroundColor = 'black'
6497
for(i = 0; i < document.getElementsByClassName('choice-rec').length; i++){
6598
document.getElementsByClassName('choice-rec')[i].style.color = 'black'
6699
document.getElementsByClassName('choice-rec')[i].style.backgroundColor = 'white'
67100
}
68101
document.getElementsByClassName('gg-dark-mode')[0].style.backgroundColor = null
69-
document.getElementById('sec-notif').style.color = 'black';
102+
//document.getElementById('sec-notif').style.color = 'black';
70103
document.getElementById('top-bar').classList.remove('invert');
71104
try {
72105
document.querySelector('.multiselect-wrapper').classList.remove('invert');
@@ -86,23 +119,24 @@ function colormode(pref){
86119
document.getElementById('error').style.color = 'black'
87120
document.getElementById('success').style.color = 'black';
88121
document.getElementById("notification").style.backgroundColor = 'white';
89-
document.querySelector('.security-notification input').style.color = 'black'
90-
document.querySelector('.security-notification input').style.backgroundColor = 'white'
91-
document.querySelector('.security-notification input').style.borderColor = 'black';
122+
//document.querySelector('.security-notification input').style.color = 'black'
123+
//document.querySelector('.security-notification input').style.backgroundColor = 'white'
124+
//document.querySelector('.security-notification input').style.borderColor = 'black';
92125
}
93126
}
94127

95128
function handler(value){
96129
if(!value){
97130
document.getElementById('sec-notif').style.visibility = 'visible'
98-
document.getElementById('sec-notif').style.transform = 'scale(1)'
99-
document.getElementsByClassName('btn-select')[0].children[0].innerHTML = 'Folder selected'}
131+
//document.getElementById('sec-notif').style.transform = 'scale(1)'
132+
//document.getElementsByClassName('btn-select')[0].children[0].innerHTML = 'Folder selected'
133+
}
100134
else{
101-
var path = document.getElementById('full-path').value
102-
document.getElementById('path-ph').innerHTML = path
103-
document.getElementById('sec-notif').style.transform = 'scale(0)'
135+
//var path = document.getElementById('full-path').value
136+
//document.getElementById('path-ph').innerHTML = path
137+
//document.getElementById('sec-notif').style.transform = 'scale(0)'
104138

105-
var metadata = {"data": path}
139+
var metadata = {"data": value}
106140

107141
fetch(`http://localhost:8000/request?METADATA=${JSON.stringify(metadata)}`, {
108142
method: 'GET',
@@ -114,10 +148,10 @@ function handler(value){
114148
switch(response.status){
115149
case 220: {
116150
console.log('path was not valid')
117-
document.getElementsByClassName('btn-select')[0].children[0].innerHTML = 'No Folder selected'
118-
document.getElementById('path-ph').innerHTML = null;
119-
document.getElementById('sec-notif').style.transform = 'scale(0)'
120-
document.getElementById('sec-notif').style.visibility = 'hidden'
151+
//document.getElementsByClassName('btn-select')[0].children[0].innerHTML = 'No Folder selected'
152+
//document.getElementById('path-ph').innerHTML = null;
153+
//document.getElementById('sec-notif').style.transform = 'scale(0)'
154+
//document.getElementById('sec-notif').style.visibility = 'hidden'
121155
document.getElementById('notification').style.display = 'block';
122156
document.getElementById('err-path').style.display = 'block';
123157
document.getElementById('notification').style.opacity = '100%';
@@ -132,11 +166,18 @@ function handler(value){
132166
}break;
133167
case 205: {
134168
console.log('path was valid')
169+
success()
170+
setTimeout(() => {
171+
document.querySelector('body').classList.add('blur')
172+
setTimeout(() => {
173+
window.location.reload()
174+
}, 600)
175+
}, 500)
135176
}break;
136177
case 201: {
137178
$.getJSON('http://localhost:8000/request', (data) => {
138179
const folders = JSON.parse(data.message)
139-
//console.log(folders)
180+
console.log(folders)
140181
folders.forEach((str) => {
141182
var strchoice = document.createElement('option')
142183
strchoice.text = str

‎UI/index.html‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="initial-scale=1.0; Access-Control-Allow-Origin">
66
<title>FHE-UI</title>
7+
<script src="https://unpkg.com/htmx.org@1.9.2"></script>
78
<style>
89
@font-face {
910
font-family: Ubuntu;
@@ -12,10 +13,13 @@
1213
</style>
1314
<link rel="stylesheet" href="./Addons/Multiselector/styles/multiselect.css">
1415
<link href='./Addons/light-dark-mode.css' rel='stylesheet'>
16+
<script src="./node_modules/dropzone/dist/dropzone-min.js"></script>
17+
<link href="./node_modules/dropzone/dist/min/dropzone.min.css" rel="stylesheet" type="text/css" />
18+
1519
</head>
1620
<body style="background-color:transparent; width: 1024px; height: 576px; overflow: hidden; border-radius: 10px; transition: all .5s ease-out;">
1721

18-
<div class="main" id="main" style="width: 1024px; height: 576px; position: relative;">
22+
<div class="main" id="main" style="width: 1024px; height: 576px; position: relative;" hx-boost="true">
1923
<div style="position: absolute; width: 100%; height: 100%; border-radius: 10px;">
2024
<object data="./Addons/bg.html" type="text/html" style="width: 1024px; height: 576px; border-radius: 10px; background-color: transparent;"></object>
2125
</div>
@@ -39,21 +43,20 @@ <h3 style="text-align:left; color: rgb(0, 0, 0); font-weight: 600; -webkit-text-
3943
</div>
4044
</div>
4145

42-
<div id="menu1" class="menu1" style="background-color: white; color: black; border-radius: 10px; border-width: 3px; opacity: 70%; border-style: dashed; border-color: gray; height: 300px; width: 80%; position: absolute; display: block; bottom: 10%; left: 10%; align-items: center; justify-content: center;">
43-
<h4 style="text-align: center; margin-top: 70px; font-size: larger;">
44-
Choose the folder you want to transform
45-
</h4>
46-
<a onclick="document.getElementById('div-select').click(); console.log('yes')" class="btn-select" id="btn-select" style="color: black;">
47-
<span>
48-
No folder selected
49-
</span>
50-
</a>
51-
<h4 style="text-align: center; margin-top: 100px; margin-right: 15px;" id="path-ph"></h4>
52-
<input type="file" id="div-select" class="div-select" oninput="handler()" webkitdirectory style="display: none;">
46+
<div id="menu1" class="menu1" webkitdirectory style="background-color: white; color: black; border-radius: 10px; border-width: 3px; opacity: 70%; border-style: dashed; border-color: gray; height: 300px; width: 80%; position: absolute; display: block; bottom: 10%; left: 10%;">
5347

48+
<div class="dropzone" id="drop-zone" webkitdirectory style="width:100%; height:100%; border-radius: 10px; border-color:transparent; border-style:solid; background-color:transparent; position:absolute; top:0;">
49+
<h4 style="text-align: center; margin-top: 70px; font-size: larger; transition:all 1s ease-out; color:black;">
50+
Choose the folder you want to transform
51+
</h4>
52+
53+
<h5 style="text-align: center; margin-top: 70px; font-size: 16px; transition:all 1s ease-out; color: black">
54+
No folder selected
55+
</h5>
56+
</div>
57+
5458
</div>
55-
56-
<div class="security-notification" id="sec-notif" style="visibility:hidden; display: block; transition: all .3s ease-out; position: absolute; top: 25%; left: 18%; height: 300px; width: 650px; background-color: white; opacity: 80%; border-radius: 10px; border-width: 3px; border-color: rgb(133, 133, 133); border-style: solid; align-items: center; justify-content: center;">
59+
<!--<div class="security-notification" id="sec-notif" style="visibility:hidden; display: block; transition: all .3s ease-out; position: absolute; top: 25%; left: 18%; height: 300px; width: 650px; background-color: white; opacity: 80%; border-radius: 10px; border-width: 3px; border-color: rgb(133, 133, 133); border-style: solid; align-items: center; justify-content: center;">
5760
<h3 style="font-size: 17px; text-align: center; margin-top: 40px;">
5861
Due to security restrictions by Windows, <br>please enter the full directory path below
5962
</h3>
@@ -64,7 +67,7 @@ <h3 style="font-size: 17px; text-align: center; margin-top: 40px;">
6467
</a>
6568
</div>
6669
67-
</div>
70+
</div>-->
6871

6972
<div id="warn-multichoice" class="warn-multichoice" style="background-color: white; color: black; display: none; opacity: 70%; border-radius: 10px; border-width: 3px; border-style: solid; border-color: gray; position: absolute; width: 80%; height: 300px; bottom: 10%; left: 10%; background-color: rgb(255, 255, 255);">
7073
<h3 style="text-align: center; margin-top: 60px;">
@@ -123,6 +126,9 @@ <h3 style="text-align: center; margin-top: 60px;">
123126

124127
.invert { filter: invert(100%); }
125128
.blur {filter: blur(10px);}
129+
.scrl-bar-drk-mode{
130+
scrollbar-color: dark;
131+
}
126132

127133
.notification{
128134
height: 70px;
@@ -242,7 +248,7 @@ <h3 style="text-align: center; margin-top: 60px;">
242248
caret-color: transparent;
243249
}
244250

245-
.warn-recursive, .warn-multichoice, .menu1, .filter{
251+
.warn-recursive, .warn-multichoice, .dropzone, .filter{
246252
transition: all .5s ease-out;
247253
}
248254
.warn-recursive a{
@@ -301,11 +307,11 @@ <h3 style="text-align: center; margin-top: 60px;">
301307

302308
}
303309
</style>
304-
305310
<script src="./Addons/Multiselector/scripts/multiselect.core.js"></script>
306311
<script src="./Addons/Multiselector/scripts/helper.js"></script>
307312
<script src="./Addons/Multiselector/scripts/multiselect.js"></script>
308313
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
309314
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js"></script>
315+
<script src="Dropzone.js"></script>
310316
<script src="handler.js"></script>
311317
</html>

‎UI/main.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ module.exports = {
1111
}catch(e){
1212
console.error("There is nothing we can do... I messed up",e)
1313
}
14-
var elementarray = []
14+
15+
var elementarray = []
1516
var fileTypes = []
1617
var validelem = []
1718
filenames.forEach(element => {

0 commit comments

Comments
 (0)