AGENDA2 work mostly - started work on application menu and taskbar in
general, implemented destroyWindow and moveToFront, expanded upon creating html for applications and such, etc etc etc
This commit is contained in:
parent
65663ca23b
commit
668ced0356
|
|
@ -12,15 +12,25 @@
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href="<?= $wm ?>/css/desktop.css">
|
<link rel="stylesheet" href="<?= $wm ?>/css/desktop.css">
|
||||||
<link rel="stylesheet" href="<?= $wm ?>/css/mobile.css">
|
<link rel="stylesheet" href="<?= $wm ?>/css/mobile.css">
|
||||||
|
<link rel="stylesheet" href="<?= $wm ?>/css/standard.css">
|
||||||
|
<title>DremJS v0.3.0</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="dremjs">
|
<div id="dremjs">
|
||||||
<div id="taskbar">
|
<div id="taskbar">
|
||||||
|
<div>
|
||||||
|
<div onclick="toggleAppMenu();" class="appMenu" id="appMenu">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="applications">
|
<div id="applications">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="appMenuContainer"></div>
|
||||||
|
|
||||||
<script src="core/dremjs-core.js"></script>
|
<script src="core/dremjs-core.js"></script>
|
||||||
<script src="<?= $wm ?>/agenda2.js"></script>
|
<script src="<?= $wm ?>/agenda2.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -13,14 +13,21 @@
|
||||||
* (C) Innovation Science LLC 2024
|
* (C) Innovation Science LLC 2024
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var currentWID = 0
|
var currentWID = 0;
|
||||||
|
var openWindows = [];
|
||||||
|
var currentZIndex = 0;
|
||||||
|
|
||||||
|
// Load mobile-detect magic js file to instantiate a MobileDetect and return mobile status (null if not mobile).
|
||||||
var mobileStatus = import("./mobile-detect.js").then((md) => {
|
var mobileStatus = import("./mobile-detect.js").then((md) => {
|
||||||
var detector = new MobileDetect(window.navigator.userAgent);
|
var detector = new MobileDetect(window.navigator.userAgent);
|
||||||
return detector.mobile();
|
return detector.mobile();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
* initAgendaWM starts the window manager.
|
||||||
|
*/
|
||||||
async function initAgendaWM() {
|
async function initAgendaWM() {
|
||||||
|
// We need to wait for mobileStatus to resolve.
|
||||||
mobileStatus = await mobileStatus;
|
mobileStatus = await mobileStatus;
|
||||||
if(!mobileStatus) {
|
if(!mobileStatus) {
|
||||||
initAgendaDesktop();
|
initAgendaDesktop();
|
||||||
|
|
@ -31,29 +38,107 @@ async function initAgendaWM() {
|
||||||
|
|
||||||
function initAgendaDesktop() {
|
function initAgendaDesktop() {
|
||||||
console.log("AGENDA2 Desktop");
|
console.log("AGENDA2 Desktop");
|
||||||
|
|
||||||
|
var taskbar = createTaskbarHtml();
|
||||||
|
var taskbarContainer = document.getElementById("appMenuContainer");
|
||||||
|
taskbarContainer.insertAdjacentHTML('beforeend', taskbar);
|
||||||
|
|
||||||
createWindow("Test App 1", "/temp.html", true);
|
createWindow("Test App 1", "/temp.html");
|
||||||
createWindow("Test App 2", "/temp.html", true);
|
createWindow("Test App 2", "/temp.html");
|
||||||
}
|
}
|
||||||
|
|
||||||
function initAgendaMobile() {
|
function initAgendaMobile() {
|
||||||
console.log("AGENDA2 Mobile");
|
console.log("AGENDA2 Mobile");
|
||||||
|
|
||||||
|
var taskbar = createTaskbarHtml();
|
||||||
|
var taskbarContainer = document.getElementById("appMenuContainer");
|
||||||
|
taskbarContainer.insertAdjacentHTML('beforeend', taskbar);
|
||||||
|
|
||||||
|
createWindow("Test App 1", "/temp.html");
|
||||||
|
createWindow("Test App 2", "/temp.html");
|
||||||
}
|
}
|
||||||
|
|
||||||
function createWindow(name, href, draggable) {
|
function createTaskbarHtml() {
|
||||||
|
if(mobileStatus) {
|
||||||
|
return taskbar = createTaskbarHtmlMobile();
|
||||||
|
}
|
||||||
|
return taskbar = createTaskbarHtmlDesktop();
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTaskbarHtmlDesktop() {
|
||||||
|
var taskbar = `
|
||||||
|
<div class="dAppMenuContent" id="appMenuContent">
|
||||||
|
<a onclick="createWindow('Test', '/temp.html')"><p><img src="/nope.png" class="appMenuImage">Test App</p></a>
|
||||||
|
<hr />
|
||||||
|
<a target="_top" href="#"><p><img src="/nope.png" class="appMenuImage">Shutdown DremJS</p></a>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
|
||||||
|
return taskbar;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTaskbarHtmlMobile() {
|
||||||
|
var taskbar = `
|
||||||
|
<div class="mAppMenuContent" id="appMenuContent">
|
||||||
|
<a onclick="createWindow('Test', '/test.html')"><p><img src="/nope.png" class="appMenuImage"> Test App</p></a>
|
||||||
|
<hr />
|
||||||
|
<a target="_top" href="#"><p><img src="/nope.png" class="appMenuImage"> Shutdown DremJS</p></a>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
return taskbar;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Create window does exactly what it says on the tin.
|
||||||
|
* It takes a human-friendly window name, href to the application,
|
||||||
|
* and also whether or not it's draggable or not (default true).
|
||||||
|
*/
|
||||||
|
function createWindow(name, href, draggable = true, widget = false) {
|
||||||
|
// The window strings are just html. Actually a decent bit lifted from og Agenda, but implemented better obviously.
|
||||||
var wid = getNewWID();
|
var wid = getNewWID();
|
||||||
var window = `\
|
var window = createWindowHtml(name, href, draggable, widget);
|
||||||
<div onclick="moveToFront(${wid});"
|
var icon = createIconHtml(name, href, draggable, widget);
|
||||||
|
|
||||||
|
console.log(window);
|
||||||
|
// Now we can insert the new window text into the applications container.
|
||||||
|
var parent=document.getElementById('applications');
|
||||||
|
parent.insertAdjacentHTML('beforeend', window);
|
||||||
|
|
||||||
|
// We don't want to make the window draggable if AGENDA2 is in mobile mode
|
||||||
|
// or the window explicitly said not to be draggable.
|
||||||
|
if(draggable && !mobileStatus) {
|
||||||
|
makeDraggable(wid);
|
||||||
|
}
|
||||||
|
|
||||||
|
// We now set the window to the foreground.
|
||||||
|
moveToFront(wid);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Simple decision making logic. Create a mobile HTML if in mobile mode,
|
||||||
|
* and create a desktop HTML if not.
|
||||||
|
*/
|
||||||
|
function createWindowHtml(name, href, draggable, widget) {
|
||||||
|
if(mobileStatus) {
|
||||||
|
return createWindowHtmlMobile(name, href, draggable, widget);
|
||||||
|
}
|
||||||
|
|
||||||
|
return createWindowHtmlDesktop(name, href, draggable, widget);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createWindowHtmlDesktop(name, href, draggable, widget) {
|
||||||
|
var window = `
|
||||||
|
<div onmousedown="moveToFront(${wid});"
|
||||||
name="${name}"
|
name="${name}"
|
||||||
class="dAppWindow"
|
class="dAppWindow"
|
||||||
id="window-${wid}">
|
id="window-${wid}">
|
||||||
<div class="dAppTask" id="bar-${wid}">
|
<div class="dAppTask" id="bar-${wid}">
|
||||||
<div class="dAppTaskChild">
|
<div class="dAppTaskChild">
|
||||||
<input type="button" onclick="closeApplication(${wid})" value="X" />
|
<input type="button" onclick="destroyWindow(${wid})" value="X" />
|
||||||
<input type="button" onclick="maximizeApplication(${wid})" value="\u25A1" />
|
<input type="button" onclick="maximizeWindow(${wid})" value="\u25A1" />
|
||||||
<input type="button" onclick="minimizeApplication(${wid})" value="_" />
|
<input type="button" onclick="minimizeWindow(${wid})" value="_" />
|
||||||
</div>
|
</div>
|
||||||
<div class="dAppTaskChild">
|
<div class="dAppTaskChild" id="text-${wid}">
|
||||||
<p>${name}</p>
|
<p>${name}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -62,61 +147,84 @@ function createWindow(name, href, draggable) {
|
||||||
<iframe name="app-${wid}" id="app-${wid}" src="${href}"></iframe>
|
<iframe name="app-${wid}" id="app-${wid}" src="${href}"></iframe>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`
|
||||||
|
|
||||||
var parent=document.getElementById('applications');
|
return window;
|
||||||
parent.insertAdjacentHTML('beforeend', window);
|
|
||||||
|
|
||||||
if(draggable && !mobileStatus) {
|
|
||||||
makeDraggable(wid);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*function dragWindow(wid) {
|
function createWindowHtmlMobile(name, href, draggable, widget) {
|
||||||
var windowId = `window-${wid}`;
|
var window = `
|
||||||
var barId = `bar-${wid}`;
|
<div onmousedown="moveToFront(${wid});"
|
||||||
var pos1 = 0;
|
name="${name}"
|
||||||
var pos2 = 0;
|
class="mAppWindow"
|
||||||
var pos3 = 0;
|
id="window-${wid}">
|
||||||
var pos4 = 0;
|
<div class="mAppTask" id="bar-${wid}">
|
||||||
|
<div class="mAppTaskChild">
|
||||||
|
<input type="button" onclick="destroyWindow(${wid})" value="X" />
|
||||||
|
</div>
|
||||||
|
<div class="mAppTaskChild" id="text-${wid}">
|
||||||
|
<p>${name}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<div class="mAppFrame">
|
||||||
|
<iframe name="app-${wid}" id="app-${wid}" src="${href}"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
|
||||||
var element = document.getElementById(windowId);
|
return window;
|
||||||
var bar = document.getElementById(barId);
|
}
|
||||||
|
|
||||||
bar.onmousedown = dragMouseDown;
|
function createIconHtml(name, href, draggable, widget) {
|
||||||
|
|
||||||
function dragMouseDown(e) {
|
|
||||||
e = e || window.event;
|
|
||||||
e.preventDefault();
|
|
||||||
pos3 = e.clientX;
|
|
||||||
pos4 = e.clientY;
|
|
||||||
document.onmouseup = closeDragElement;
|
|
||||||
document.onmousemove = elementDrag;
|
|
||||||
}
|
|
||||||
|
|
||||||
function elementDrag(e) {
|
|
||||||
e = e || window.event;
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
pos1 = pos3 - e.clientX;
|
|
||||||
pos2 = pos4 - e.clientY;
|
|
||||||
pos3 = e.clientX;
|
|
||||||
pos4 = e.clientY;
|
|
||||||
|
|
||||||
element.style.top = (element.offsetTop - pos2) + "px";
|
|
||||||
element.style.left = (element.offsetLeft - pos1) + "px";
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeDragElement() {
|
|
||||||
document.onmouseup = null;
|
|
||||||
document.onmousemove = null;
|
|
||||||
}
|
|
||||||
}*/
|
|
||||||
|
|
||||||
function makeDraggable(wid) {
|
|
||||||
win = document.getElementById(`window-${wid}`);
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Destroy the window by sending it's element to the shadow realm.
|
||||||
|
*/
|
||||||
|
function destroyWindow(wid) {
|
||||||
|
var window = document.getElementById(`window-${wid}`);
|
||||||
|
var windowContainer = document.getElementById('applications');
|
||||||
|
|
||||||
|
windowContainer.removeChild(window);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* I went about moving windows to the front differently than in the original version of Agenda.
|
||||||
|
* A simple counter is used, and when the function is used, it sets the z-index to an incrementing
|
||||||
|
* counter. It's incremented after setting the z-index, so that the next time it's run it'll be sure
|
||||||
|
* to set it to the foreground. Did that make sense? I'm so tired.
|
||||||
|
*
|
||||||
|
* Obviously, this is how this should be done, unlike the bodge job before.
|
||||||
|
*/
|
||||||
|
function moveToFront(wid) {
|
||||||
|
var window = document.getElementById(`window-${wid}`);
|
||||||
|
|
||||||
|
window.style.zIndex = `${currentZIndex}`;
|
||||||
|
currentZIndex++;
|
||||||
|
}
|
||||||
|
|
||||||
|
function maximizeWindow(wid) {
|
||||||
|
console.log("maximizeWindow not yet implemented");
|
||||||
|
}
|
||||||
|
|
||||||
|
function minimizeWindow(wid) {
|
||||||
|
console.log("minimizeWindow not yet implemented");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Actual magic chicanery which I'm pretty sure I did last time lmao
|
||||||
|
function makeDraggable(wid) {
|
||||||
|
var win = document.getElementById(`window-${wid}`);
|
||||||
|
var bar = document.getElementById(`bar-${wid}`);
|
||||||
|
var barText = document.getElementById(`text-${wid}`);
|
||||||
|
|
||||||
win.addEventListener('mousedown', function(e) {
|
win.addEventListener('mousedown', function(e) {
|
||||||
|
// This bodge detects whether the object that was clicked
|
||||||
|
if(e.target != bar && e.target.parentNode != barText) {
|
||||||
|
reset();
|
||||||
|
return;
|
||||||
|
}
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
var offsetX = e.clientX - parseInt(window.getComputedStyle(this).left);
|
var offsetX = e.clientX - parseInt(window.getComputedStyle(this).left);
|
||||||
var offsetY = e.clientY - parseInt(window.getComputedStyle(this).top);
|
var offsetY = e.clientY - parseInt(window.getComputedStyle(this).top);
|
||||||
|
|
@ -140,10 +248,24 @@ function makeDraggable(wid) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Return a new window id and increment it.
|
||||||
|
* returns wid: current window id for use in a new window
|
||||||
|
*/
|
||||||
function getNewWID() {
|
function getNewWID() {
|
||||||
wid = currentWID;
|
wid = currentWID;
|
||||||
currentWID+=1;
|
currentWID+=1;
|
||||||
return wid;
|
return wid;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function toggleAppMenu() {
|
||||||
|
var appMenu = document.getElementById("appMenuContent");
|
||||||
|
|
||||||
|
if(appMenu.style.visibility == "hidden") {
|
||||||
|
appMenu.style.visibility = "visible";
|
||||||
|
} else {
|
||||||
|
appMenu.style.visibility = "hidden";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
initAgendaWM();
|
initAgendaWM();
|
||||||
|
|
@ -1,20 +1,3 @@
|
||||||
/* Taskbar */
|
|
||||||
#taskbar {
|
|
||||||
height: 48px;
|
|
||||||
width: 96%;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-top: 0px;
|
|
||||||
position: absolute;
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Applications and Windows */
|
|
||||||
#applications {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dAppWindow {
|
.dAppWindow {
|
||||||
width:500px;
|
width:500px;
|
||||||
height:300px;
|
height:300px;
|
||||||
|
|
@ -52,6 +35,7 @@
|
||||||
float: left;
|
float: left;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
|
width: 96%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dAppTaskChild {
|
.dAppTaskChild {
|
||||||
|
|
@ -65,4 +49,31 @@
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dTaskbarChild {
|
||||||
|
float: left;
|
||||||
|
margin-right: 5px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dAppMenuContent {
|
||||||
|
position: absolute;
|
||||||
|
visibility: hidden;
|
||||||
|
|
||||||
|
top: 56px;
|
||||||
|
/*height: 100px;
|
||||||
|
width: 40%;*/
|
||||||
|
min-width: 200px;
|
||||||
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||||
|
padding: 12px 16px;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
z-index: 100000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dAppMenuContent hr {
|
||||||
|
position: relative;
|
||||||
|
width: calc(100% - 32px);
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
.mAppWindow {
|
||||||
|
width: calc(96% - 10px);
|
||||||
|
height: calc(100% - 71px);
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
padding: 5px;
|
||||||
|
position: absolute;
|
||||||
|
top: 61px;
|
||||||
|
background-color:#87CEEB;
|
||||||
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||||
|
resize: none;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mAppWindow br {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mAppFrame {
|
||||||
|
/*float: none;
|
||||||
|
height: 93%;*/
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mAppFrame iframe {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 30px);
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mAppTask {
|
||||||
|
margin-right: 10px;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
height: 24px;
|
||||||
|
width: 96%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mAppTaskChild {
|
||||||
|
float: left;
|
||||||
|
margin-right: 5px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mAppTaskChild p {
|
||||||
|
line-height: 0;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-top: 12px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mTaskbarChild {
|
||||||
|
float: left;
|
||||||
|
margin-right: 5px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mAppMenuContent {
|
||||||
|
position: absolute;
|
||||||
|
visibility: hidden;
|
||||||
|
|
||||||
|
top: 61px;
|
||||||
|
/*width: calc(96% - 10px);*/
|
||||||
|
width: 50%;
|
||||||
|
max-height: calc(100% - 91px);
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
/*min-width: 200px;*/
|
||||||
|
padding: 12px 16px;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
z-index: 100000;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
/* Taskbar */
|
||||||
|
#taskbar {
|
||||||
|
height: 48px;
|
||||||
|
width: 96%;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-top: 0px;
|
||||||
|
position: absolute;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Applications and Windows */
|
||||||
|
#applications {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.appMenuImage {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-right: 16;
|
||||||
|
}
|
||||||
|
|
||||||
|
.appMenu {
|
||||||
|
margin-right: 10px;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
top: 4px;
|
||||||
|
left: 4px;
|
||||||
|
background-color: gray;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue