Skip to content

Commit 95c63d9

Browse files
NovaAppsIncNovaAppsInc
committedJan 15, 2023
fullish resizeable windows
- left resize - right resize - top/bottom resize - bottom left and right resize
1 parent d657b84 commit 95c63d9

File tree

2 files changed

+333
-8
lines changed

2 files changed

+333
-8
lines changed
 

‎static/index.css

+89-8
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,7 @@
154154
--dock-alert-background: #47ca6360;
155155
--dock-button-boxshadow: #242424;
156156
--dock-icon-color: #47CA64;
157+
--dock-icon-color2: #419854;
157158
--dock-button-inactive-span: #424242;
158159

159160
/* context menu */
@@ -252,6 +253,7 @@
252253
--dock-alert-background: #fff7a560;
253254
--dock-button-boxshadow: #110d44;
254255
--dock-icon-color: #fff7a5;
256+
--dock-icon-color2: #d1ca7a;
255257
--dock-button-inactive-span: #594dee;
256258

257259
/* context menu */
@@ -350,6 +352,7 @@
350352
--dock-alert-background: #FF40F760;
351353
--dock-button-boxshadow: #282828;
352354
--dock-icon-color: #FF40F7;
355+
--dock-icon-color2: #cc2ec4;
353356
--dock-button-inactive-span: #606060;
354357

355358
/* context menu */
@@ -1475,9 +1478,9 @@ main > .inputAppSearch {
14751478
min-width: 32px;
14761479
}
14771480

1478-
.dockbtn.alert {
1481+
/* .dockbtn.alert {
14791482
animation: blink 1s infinite ease-in-out;
1480-
}
1483+
} */
14811484

14821485
.dockbtn:hover {
14831486
cursor: var(--cursorHand);
@@ -1506,6 +1509,10 @@ main > .inputAppSearch {
15061509
fill: var(--dock-icon-color);
15071510
}
15081511

1512+
.fill2 {
1513+
fill: var(--dock-icon-color2);
1514+
}
1515+
15091516
.iconFill1 {
15101517
fill: var(--iconFill2);
15111518
}
@@ -1559,13 +1566,13 @@ main > .inputAppSearch {
15591566
}
15601567

15611568
.winNotFocus {
1562-
z-index: 1;
1569+
z-index: 3;
15631570
opacity: 0.98;
15641571
filter: blur(1px);
15651572
}
15661573

15671574
.winFocus {
1568-
z-index: 2;
1575+
z-index: 4;
15691576
opacity: 1;
15701577
filter: blur(0px);
15711578
}
@@ -1582,10 +1589,6 @@ main > .inputAppSearch {
15821589
box-shadow: none !important;
15831590
}
15841591

1585-
.maxiN {
1586-
resize: both;
1587-
}
1588-
15891592
.maxiY {
15901593
top: 37px !important;
15911594
left: 0 !important;
@@ -2489,3 +2492,81 @@ mark {
24892492
color: var(--version);
24902493
height: 16px;
24912494
}
2495+
2496+
.rightResize {
2497+
position: absolute;
2498+
right: 0;
2499+
top: 0;
2500+
width: 8px;
2501+
height: 100%;
2502+
cursor: e-resize;
2503+
}
2504+
2505+
.bottomResize {
2506+
position: absolute;
2507+
bottom: 0;
2508+
left: 0;
2509+
width: 100%;
2510+
height: 8px;
2511+
cursor: s-resize;
2512+
}
2513+
2514+
.bottomRightResize {
2515+
position: absolute;
2516+
bottom: 0;
2517+
right: 0;
2518+
width: 8px;
2519+
height: 8px;
2520+
cursor: se-resize;
2521+
}
2522+
2523+
.topResize {
2524+
position: absolute;
2525+
top: 0;
2526+
left: 0;
2527+
width: 100%;
2528+
height: 8px;
2529+
cursor: n-resize;
2530+
}
2531+
2532+
.leftResize {
2533+
position: absolute;
2534+
left: 0;
2535+
top: 0;
2536+
width: 8px;
2537+
height: 100%;
2538+
cursor: w-resize;
2539+
}
2540+
2541+
.bottomLeftResize {
2542+
position: absolute;
2543+
bottom: 0;
2544+
left: 0;
2545+
width: 8px;
2546+
height: 8px;
2547+
cursor: sw-resize;
2548+
}
2549+
2550+
.maxiY .bottomLeftResize {
2551+
cursor: var(--cursorNormal);
2552+
}
2553+
2554+
.maxiY .bottomRightResize {
2555+
cursor: var(--cursorNormal);
2556+
}
2557+
2558+
.maxiY .topResize {
2559+
cursor: var(--cursorNormal);
2560+
}
2561+
2562+
.maxiY .leftResize {
2563+
cursor: var(--cursorNormal);
2564+
}
2565+
2566+
.maxiY .rightResize {
2567+
cursor: var(--cursorNormal);
2568+
}
2569+
2570+
.maxiY .bottomResize {
2571+
cursor: var(--cursorNormal);
2572+
}

‎static/js/windows.js

+244
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,15 @@ function windows(link, icn, title, browser = Boolean, os = Boolean, fullscreen =
7474
newwin.setAttribute("data-fullscreen", fullscreen);
7575
newwin.setAttribute("data-appName", appName);
7676
newwin.setAttribute("data-textAppText", textAppText);
77+
newwin.style.maxHeight = window.innerHeight - 37 + "px";
78+
newwin.style.maxWidth = window.innerWidth + "px";
79+
newwin.setAttribute("min-height", "499");
80+
newwin.setAttribute("min-width", "499");
81+
82+
window.onresize = (e) => {
83+
newwin.style.maxHeight = window.innerHeight - 37 + "px";
84+
newwin.style.maxWidth = window.innerWidth - 37 + "px";
85+
}
7786

7887
appsShellName.onclick = (e) => {
7988
if(appsShellName.innerHTML == "") {
@@ -1285,6 +1294,241 @@ function windows(link, icn, title, browser = Boolean, os = Boolean, fullscreen =
12851294
element.classList.remove("bottom");
12861295
}
12871296
}
1297+
const rightResize = document.createElement("div");
1298+
rightResize.classList.add("rightResize");
1299+
const bottomResize = document.createElement("div");
1300+
bottomResize.classList.add("bottomResize");
1301+
const bottomRightResize = document.createElement("div");
1302+
bottomRightResize.classList.add("bottomRightResize");
1303+
const leftResize = document.createElement("div");
1304+
leftResize.classList.add("leftResize");
1305+
const topResize = document.createElement("div");
1306+
topResize.classList.add("topResize");
1307+
const bottomLeftResize = document.createElement("div");
1308+
bottomLeftResize.classList.add("bottomLeftResize");
1309+
1310+
newwin.appendChild(rightResize);
1311+
newwin.appendChild(bottomResize);
1312+
newwin.appendChild(bottomRightResize);
1313+
newwin.appendChild(leftResize);
1314+
newwin.appendChild(topResize);
1315+
newwin.appendChild(bottomLeftResize);
1316+
1317+
rightResize.addEventListener("mousedown", (e) => {
1318+
if(newwin.classList.contains("maxiY")) {
1319+
return
1320+
}
1321+
var startX = e.clientX;
1322+
var rightest = window.innerWidth - 3;
1323+
var startWidth = parseInt(document.defaultView.getComputedStyle(newwin).width, 10);
1324+
function mousemove(e) {
1325+
if(e.clientX >= rightest) {
1326+
return
1327+
}
1328+
var newX = e.clientX;
1329+
var deltaX = newX - startX;
1330+
var newWidth = startWidth + deltaX;
1331+
newwin.style.width = newWidth + "px";
1332+
newwin.querySelector("iframe").style.pointerEvents = "none";
1333+
}
1334+
window.addEventListener("mousemove", mousemove);
1335+
window.addEventListener("mouseup", (mu) => {
1336+
window.removeEventListener("mousemove", mousemove);
1337+
window.removeEventListener("mouseup", mu);
1338+
newwin.querySelector("iframe").style.pointerEvents = "auto";
1339+
});
1340+
});
1341+
1342+
bottomResize.addEventListener("mousedown", (e) => {
1343+
if(newwin.classList.contains("maxiY")) {
1344+
return
1345+
}
1346+
var startY = e.clientY;
1347+
var startHeight = parseInt(document.defaultView.getComputedStyle(newwin).height, 10);
1348+
function mousemove(e) {
1349+
var newY = e.clientY;
1350+
var deltaY = newY - startY;
1351+
var newHeight = startHeight + deltaY;
1352+
newwin.style.height = newHeight + "px";
1353+
newwin.querySelector("iframe").style.pointerEvents = "none";
1354+
}
1355+
window.addEventListener("mousemove", mousemove);
1356+
window.addEventListener("mouseup", (mu) => {
1357+
window.removeEventListener("mousemove", mousemove);
1358+
window.removeEventListener("mouseup", mu);
1359+
newwin.querySelector("iframe").style.pointerEvents = "auto";
1360+
});
1361+
})
1362+
1363+
bottomRightResize.addEventListener("mousedown", (e) => {
1364+
if(newwin.classList.contains("maxiY")) {
1365+
return
1366+
}
1367+
var startX = e.clientX;
1368+
var startY = e.clientY;
1369+
var startWidth = parseInt(document.defaultView.getComputedStyle(newwin).width, 10);
1370+
var startHeight = parseInt(document.defaultView.getComputedStyle(newwin).height, 10);
1371+
function mousemove(e) {
1372+
var newX = e.clientX;
1373+
var newY = e.clientY;
1374+
var deltaX = newX - startX;
1375+
var deltaY = newY - startY;
1376+
var newWidth = startWidth + deltaX;
1377+
var newHeight = startHeight + deltaY;
1378+
newwin.style.width = newWidth + "px";
1379+
newwin.style.height = newHeight + "px";
1380+
newwin.querySelector("iframe").style.pointerEvents = "none";
1381+
}
1382+
window.addEventListener("mousemove", mousemove);
1383+
window.addEventListener("mouseup", (mu) => {
1384+
window.removeEventListener("mousemove", mousemove);
1385+
window.removeEventListener("mouseup", mu);
1386+
newwin.querySelector("iframe").style.pointerEvents = "auto";
1387+
});
1388+
})
1389+
1390+
leftResize.addEventListener("mousedown", (e) => {
1391+
if(newwin.classList.contains("maxiY")) {
1392+
return
1393+
}
1394+
var startX = e.clientX;
1395+
var leftest = 0;
1396+
var startWidth = parseInt(document.defaultView.getComputedStyle(newwin).width, 10);
1397+
function mousemove(e) {
1398+
if(e.clientX <= leftest) {
1399+
return
1400+
}
1401+
if(startWidth - (e.clientX - startX) <= newwin.getAttribute("min-width")) {
1402+
return
1403+
}
1404+
var newX = e.clientX;
1405+
var deltaX = newX - startX;
1406+
var newWidth = startWidth - deltaX;
1407+
newwin.style.width = newWidth + "px";
1408+
newwin.style.left = e.clientX + "px";
1409+
}
1410+
window.addEventListener("mousemove", mousemove);
1411+
window.addEventListener("mouseup", (mu) => {
1412+
window.removeEventListener("mousemove", mousemove);
1413+
window.removeEventListener("mouseup", mu);
1414+
newwin.querySelector("iframe").style.pointerEvents = "auto";
1415+
});
1416+
})
1417+
1418+
topResize.addEventListener("mousedown", (e) => {
1419+
if(newwin.classList.contains("maxiY")) {
1420+
return
1421+
}
1422+
var startY = e.clientY;
1423+
var startHeight = parseInt(document.defaultView.getComputedStyle(newwin).height, 10);
1424+
function mousemove(e) {
1425+
if (e.clientY <= "37") {
1426+
return
1427+
}
1428+
if(startHeight - (e.clientY - startY) <= newwin.getAttribute("min-height")) {
1429+
return
1430+
}
1431+
newwin.style.top = e.clientY + "px";
1432+
var newY = e.clientY;
1433+
var deltaY = newY - startY;
1434+
var newHeight = startHeight - deltaY;
1435+
newwin.style.height = newHeight + "px";
1436+
newwin.querySelector("iframe").style.pointerEvents = "none";
1437+
}
1438+
window.addEventListener("mousemove", mousemove);
1439+
window.addEventListener("mouseup", (mu) => {
1440+
window.removeEventListener("mousemove", mousemove);
1441+
window.removeEventListener("mouseup", mu);
1442+
newwin.querySelector("iframe").style.pointerEvents = "auto";
1443+
});
1444+
})
1445+
1446+
bottomLeftResize.addEventListener("mousedown", (e) => {
1447+
if(newwin.classList.contains("maxiY")) {
1448+
return
1449+
}
1450+
var startX = e.clientX;
1451+
var startY = e.clientY;
1452+
var leftest = 0;
1453+
var startWidth = parseInt(document.defaultView.getComputedStyle(newwin).width, 10);
1454+
var startHeight = parseInt(document.defaultView.getComputedStyle(newwin).height, 10);
1455+
function mousemove(e) {
1456+
if(e.clientX <= leftest) {
1457+
return
1458+
}
1459+
if(startWidth - (e.clientX - startX) <= newwin.getAttribute("min-width")) {
1460+
return
1461+
}
1462+
if(startHeight + (e.clientY - startY) <= newwin.getAttribute("min-height")) {
1463+
return
1464+
}
1465+
var newX = e.clientX;
1466+
var newY = e.clientY;
1467+
var deltaX = newX - startX;
1468+
var deltaY = newY - startY;
1469+
var newWidth = startWidth - deltaX;
1470+
var newHeight = startHeight + deltaY;
1471+
newwin.style.width = newWidth + "px";
1472+
newwin.style.height = newHeight + "px";
1473+
newwin.style.left = e.clientX + "px";
1474+
newwin.querySelector("iframe").style.pointerEvents = "none";
1475+
}
1476+
window.addEventListener("mousemove", mousemove);
1477+
window.addEventListener("mouseup", (mu) => {
1478+
window.removeEventListener("mousemove", mousemove);
1479+
window.removeEventListener("mouseup", mu);
1480+
newwin.querySelector("iframe").style.pointerEvents = "auto";
1481+
});
1482+
})
1483+
1484+
bottomRightResize.addEventListener("mousedown", (e) => {
1485+
if(newwin.classList.contains("maxiY")) {
1486+
return
1487+
}
1488+
var startX = e.clientX;
1489+
var startY = e.clientY;
1490+
var startWidth = parseInt(document.defaultView.getComputedStyle(newwin).width, 10);
1491+
var startHeight = parseInt(document.defaultView.getComputedStyle(newwin).height, 10);
1492+
function mousemove(e) {
1493+
var newX = e.clientX;
1494+
var newY = e.clientY;
1495+
var deltaX = newX - startX;
1496+
var deltaY = newY - startY;
1497+
var newWidth = startWidth + deltaX;
1498+
var newHeight = startHeight + deltaY;
1499+
newwin.style.width = newWidth + "px";
1500+
newwin.style.height = newHeight + "px";
1501+
newwin.querySelector("iframe").style.pointerEvents = "none";
1502+
}
1503+
window.addEventListener("mousemove", mousemove);
1504+
window.addEventListener("mouseup", (mu) => {
1505+
window.removeEventListener("mousemove", mousemove);
1506+
window.removeEventListener("mouseup", mu);
1507+
newwin.querySelector("iframe").style.pointerEvents = "auto";
1508+
});
1509+
})
1510+
1511+
leftResize.addEventListener("mousedown", (e) => {
1512+
if(newwin.classList.contains("maxiY")) {
1513+
return
1514+
}
1515+
var startX = e.clientX;
1516+
var startWidth = parseInt(document.defaultView.getComputedStyle(newwin).width, 10);
1517+
function mousemove(e) {
1518+
var newX = e.clientX;
1519+
var deltaX = newX - startX;
1520+
var newWidth = startWidth - deltaX;
1521+
newwin.style.width = newWidth + "px";
1522+
newwin.querySelector("iframe").style.pointerEvents = "none";
1523+
}
1524+
window.addEventListener("mousemove", mousemove);
1525+
window.addEventListener("mouseup", (mu) => {
1526+
window.removeEventListener("mousemove", mousemove);
1527+
window.removeEventListener("mouseup", mu);
1528+
newwin.querySelector("iframe").style.pointerEvents = "auto";
1529+
});
1530+
})
1531+
12881532
document.body.appendChild(newwin);
12891533
window.addEventListener("mousedown", (e) => {
12901534
const ctxm = document.createElement("div");

0 commit comments

Comments
 (0)
Please sign in to comment.