Summit
/
BrowzOS
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Working window magager ported from selfsame.

This commit is contained in:
Severak 2019-09-14 21:51:15 +02:00
parent cc023781f1
commit 9ab7aa9dac
2 changed files with 366 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
desktop.html
View File

@ -3,9 +3,10 @@
<title>BrowzOS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="BrowzOS consists of sevearl JavaScrip components, all behaving like an actual operating system.">
<script type="text/javascript" src="desktop/js/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="desktop/js/interface.js"></script>
<script type="text/javascript" src="desktop/js/drag.js"></script>
<script type="text/javascript" src="desktop/js/desktop.js"></script>
<script type="text/javascript">
function disp_alert()
{alert("BrowzOS © 2008-2011 by TechEmporium. All rights reserved." + '\n' + '\n' + '\t' + "This software is in the public domain." + '\n');}
@ -22,41 +23,15 @@ window.resizeTo(screen.availWidth,screen.availHeight);
<link href="desktop/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--bottom dock -->
<div class="dock" id="dock2">
<div class="dock-container2">
<a class="dock-item2" href="#" onclick="window.open('rte/','_blank','width=screen.width,height=450,scrollbars=0,status=0,menubar=0,toolbar=0,top=20,left=0,resizable=0'); return false;"><span>Word Processor</span><img src="desktop/dock/wproc.gif" alt="rte"></a>
<a class="dock-item2" href="#" onclick="window.open('sprdsht/index_offline.html','_blank','width=screen.width,height=450,scrollbars=0,status=0,menubar=0,toolbar=0,top=30,left=0,resizable=0'); return false;"><span>Spreadsheet</span><img src="desktop/dock/sprdsht.gif" alt="sprdsht"></a>
<a class="dock-item2" href="#" onclick="window.open('calc/','_blank','width=550,height=410,scrollbars=0,status=0,menubar=0,toolbar=0,top=100,left=100,resizable=0'); return false;"><span>Scientific Calculator</span><img src="desktop/dock/calc.gif" alt="calc"></a>
<a class="dock-item2" href="#" onclick="window.open('web/','_blank','width=screen.width,height=350,scrollbars=1,status=1,menubar=1,toolbar=1,location=1,top=10,left=0,resizable=1'); return false;"><span>Web Browser</span><img src="desktop/dock/inet.gif" alt="inet"></a>
<a class="dock-item2" href="#" onclick="window.open('instmess/index_offline.html','_blank','width=550,height=200,scrollbars=0,status=0,menubar=0,toolbar=0,top=60,left=60,resizable=0'); return false;"><span>Instant Messenger</span><img src="desktop/dock/chat.gif" alt="chat"></a>
<a class="dock-item2" href="#" onclick="window.open('games/','_blank','width=675,height=410,scrollbars=0,status=0,menubar=0,toolbar=1,top=50,left=100,resizable=0'); return false;"><span>Games</span><img src="desktop/dock/games.gif" alt="games"></a>
<a class="dock-item2" href="#" onclick="window.open('media/','_blank','width=450,height=410,scrollbars=0,status=0,menubar=0,toolbar=0,top=100,left=200,resizable=0'); return false;"><span>Media Player</span><img src="desktop/dock/media.gif" alt="media"></a>
<a class="dock-item2" href="#" onclick="window.open('bzcmd/','_blank','width=800,height=450,scrollbars=0,status=0,menubar=0,toolbar=0,top=50,left=50,resizable=0'); return false;"><span>Command Line</span><img src="desktop/dock/term.gif" alt="term"></a>
<a class="dock-item2" href="#" onclick="window.open('sample_app/','_blank','width=800,height=450,scrollbars=0,status=0,menubar=0,toolbar=0,top=50,left=50,resizable=0'); return false;"><span>Sample &quot;Application&quot;</span><img src="desktop/dock/sample.gif" alt="sample"></a>
<a class="dock-item2" href="#" onclick="window.open('help_offline/','_blank','width=800,height=450,scrollbars=1,status=0,menubar=0,toolbar=1,top=0,left=100,resizable=0'); return false;"><span>Help</span><img src="desktop/dock/help.gif" alt="help"></a>
<a class="dock-item2" href="#" onclick="window.open('forum/','_blank','width=600,height=300,scrollbars=1,status=0,menubar=0,toolbar=0,top=70,left=50,resizable=0'); return false;"><span>Forum</span><img src="desktop/dock/forum.gif" alt="forum"></a>
<a class="dock-item2" href="#" onclick="window.open('clock/','_blank','width=245,height=475,scrollbars=0,status=0,menubar=0,toolbar=0,top=30,left=30,resizable=0'); return false;"><script type="text/javascript" src="desktop/js/clock.js"></script><span id="clockbox"></span><img src="desktop/dock/time.gif" alt="time"></a>
<a class="dock-item2" href="#" onclick="disp_alert()"><span>About BrowzOS</span><img src="desktop/dock/info.gif" alt="info"></a>
</div>
</div>
<!--dock menu JS options -->
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 75,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 50,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
})});</script>
<div id="desktop">
<!--- sorry - windowing system is not compatible with desktop -->
<!---
<div id="desktop-icons">
<div id="i2" style="position:absolute; top:30px; left:200px; width:32px; height:32px;">
<dl>
<dt><img src="desktop/drag/wproc.gif" width="48" height="48" align="left" alt="wproc"></dt>
@ -104,4 +79,152 @@ new dragElement('i5');
new dragElement('i6');
new dragElement('i7');
</script>
</div>
-->
</div>
<!--bottom dock -->
<div class="dock" id="dock2">
<div class="dock-container2">
<a class="dock-item2" href="#" onclick="window_open('rte/','_blank','width=screen.width,height=450,scrollbars=0,status=0,menubar=0,toolbar=0,top=20,left=0,resizable=0'); return false;"><span>Word Processor</span><img src="desktop/dock/wproc.gif" alt="rte"></a>
<a class="dock-item2" href="#" onclick="window_open('sprdsht/index_offline.html','_blank','width=screen.width,height=450,scrollbars=0,status=0,menubar=0,toolbar=0,top=30,left=0,resizable=0'); return false;"><span>Spreadsheet</span><img src="desktop/dock/sprdsht.gif" alt="sprdsht"></a>
<a class="dock-item2" href="#" onclick="window_open('calc/','_blank','width=550,height=410,scrollbars=0,status=0,menubar=0,toolbar=0,top=100,left=100,resizable=0'); return false;"><span>Scientific Calculator</span><img src="desktop/dock/calc.gif" alt="calc"></a>
<a class="dock-item2" href="#" onclick="window_open('web/','_blank','width=screen.width,height=350,scrollbars=1,status=1,menubar=1,toolbar=1,location=1,top=10,left=0,resizable=1'); return false;"><span>Web Browser</span><img src="desktop/dock/inet.gif" alt="inet"></a>
<a class="dock-item2" href="#" onclick="window_open('instmess/index_offline.html','_blank','width=550,height=200,scrollbars=0,status=0,menubar=0,toolbar=0,top=60,left=60,resizable=0'); return false;"><span>Instant Messenger</span><img src="desktop/dock/chat.gif" alt="chat"></a>
<a class="dock-item2" href="#" onclick="window_open('games/','_blank','width=675,height=410,scrollbars=0,status=0,menubar=0,toolbar=1,top=50,left=100,resizable=0'); return false;"><span>Games</span><img src="desktop/dock/games.gif" alt="games"></a>
<a class="dock-item2" href="#" onclick="window_open('media/','_blank','width=450,height=410,scrollbars=0,status=0,menubar=0,toolbar=0,top=100,left=200,resizable=0'); return false;"><span>Media Player</span><img src="desktop/dock/media.gif" alt="media"></a>
<a class="dock-item2" href="#" onclick="window_open('bzcmd/','_blank','width=800,height=450,scrollbars=0,status=0,menubar=0,toolbar=0,top=50,left=50,resizable=0'); return false;"><span>Command Line</span><img src="desktop/dock/term.gif" alt="term"></a>
<a class="dock-item2" href="#" onclick="window_open('sample_app/','_blank','width=800,height=450,scrollbars=0,status=0,menubar=0,toolbar=0,top=50,left=50,resizable=0'); return false;"><span>Sample &quot;Application&quot;</span><img src="desktop/dock/sample.gif" alt="sample"></a>
<a class="dock-item2" href="#" onclick="window_open('help_offline/','_blank','width=800,height=450,scrollbars=1,status=0,menubar=0,toolbar=1,top=0,left=100,resizable=0'); return false;"><span>Help</span><img src="desktop/dock/help.gif" alt="help"></a>
<a class="dock-item2" href="#" onclick="window_open('forum/','_blank','width=600,height=300,scrollbars=1,status=0,menubar=0,toolbar=0,top=70,left=50,resizable=0'); return false;"><span>Forum</span><img src="desktop/dock/forum.gif" alt="forum"></a>
<a class="dock-item2" href="#" onclick="window_open('clock/','_blank','width=245,height=475,scrollbars=0,status=0,menubar=0,toolbar=0,top=30,left=30,resizable=0'); return false;"><script type="text/javascript" src="desktop/js/clock.js"></script><span id="clockbox"></span><img src="desktop/dock/time.gif" alt="time"></a>
<a class="dock-item2" href="#" onclick="disp_alert()"><span>About BrowzOS</span><img src="desktop/dock/info.gif" alt="info"></a>
</div>
</div>
<!--dock menu JS options -->
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 75,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 50,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
})});</script>
<style>
#desktop {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: hidden;
}
.window .bar{
background-image: url(../img/window-bar.png);
cursor:pointer;
position:relative;
font-family: courier, mono-space;
font-size:10px;
font-weight:bold;
height:16px;
background-color:white;
margin-bottom:10px;
}
.window .bar p{
text-align:center;
margin:0px;
padding-top: 2px;
}
.window .bar p .name{
margin-top:0px;
}
.window .bar div.close{
position:absolute;
width:9px;
height:9px;
border:1px solid black;
background-color:white;
right: 2px;
top:1px;
}
.window .resize{
position:absolute;
width:14px; height:14px;
border:1px solid black;
background-color:white;
cursor:se-resize;
right:-1px;bottom:-1px;
}
.window .bar div.close:hover{
}
.window .view{
position:absolute;
top:16px;
left:0px;right:0px;
bottom:0px;
overflow:auto;
padding-top:10px;
background-color: white;
}
.view::-webkit-scrollbar, iframe::-webkit-scrollbar
{
width: 15px;
border-left:1px solid black;
border-top:1px solid black;
background-image:url(../img/dither.png);
}
.view::-webkit-scrollbar-thumb, iframe ::-webkit-scrollbar-thumb
{
width:14px;
height:14px;
border:1px solid black;
background:white;
}
.window.image .view img{
display: block;
margin: 0em auto;
}
.window.html .view{
padding-top:0em;
overflow: hidden;
}
.window.image .view{
padding-top:0em;
display: flex;
align-items: center;
justify-content: center;
}
.window.html iframe{
width:100%;
height:100%;
}
</style>
</td></tr></table></body></html>

207
desktop/js/desktop.js Normal file
View File

@ -0,0 +1,207 @@
/* Author:
selfsame
*/
debug = true
window.files = {};
window.drag = false;
window.target = false;
window.mousex = 0; window.mousey = 0;
window.zheight = 0;
$(window).mousedown(function(e) {
window.mousex = e.clientX;
window.mousey = e.clientY;
document.body.classList.add("mousedown")
});
$(window).mousemove(function(e) {
if (window.drag) {
x = e.clientX; y = e.clientY;
dx = x - window.mousex;
dy = y - window.mousey;
window.mousex = x; window.mousey = y;
e["dx"] = dx; e["dy"] = dy;
window.drag(e, window.target);
}
});
$(window).mouseup(function(e){
window.drag = false;
window.target = false;
document.body.classList.remove("mousedown")
});
$(window).ready(function () {});
/*
$(window).load(function () {
$.getJSON("public.json", parse_files)
});
*/
var img_data = function(img){
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0 );
return context.getImageData(0, 0, img.width, img.height);
}
var data_url = function(img, data){
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
context.putImageData(data, 0, 0 );
return canvas.toDataURL();
}
var get_mime = function(s){
var match = s.match( /\.([^\.]*)$/)
if (match) {
return match[match.length-1]
}
}
var contains = function(ar, v){
return ar.indexOf(v) != -1
}
img_mimes = ["gif", "png", "jpg", "bmp"]
make_icon = function(name, path){
if (debug) {console.log("make_icon",name, path)};
mime = get_mime(name)
icon = "img/icon-doc.png"
if (mime == "zip") {
icon = "img/zip.png"
}
if (contains(img_mimes, mime)){
icon = "img/img.png"
}
var file = $("<div class='file'><a href='"+path+
"'><img src='"+icon+"'><p><span class='name'>"+name+"</span></p></a></div>");
if (contains(img_mimes, mime)){
file[0].onclick = function(e){
e.preventDefault()
var w = raw_window(name)
w.addClass("image")
var view = w.find('.view')
view.append($("<img src='./"+path+"'>"))
var img = view.find('img')
img[0].onload = function(e){
var id = monochrome(img_data(e.target) )
e.target.src = data_url(e.target, id)
e.target.onload = null
}
}
}
if (mime == "html"){
file[0].onclick = function(e){
e.preventDefault()
var w = raw_window(name)
w.addClass("html")
w[0].style.width = "600px"
w[0].style.height = "480px"
var view = w.find('.view')
view.append($("<iframe src='./"+path+"'>"))
var iframe = view.find('iframe')
}
}
return file
}
make_folder = function(target, dir, name){
if (debug) {console.log("make_folder", target, dir, name)};
folder = $("<div class='folder file'><img src='img/icon-folder.png'><p><span class='name'>"+name+"</span></p></a></div>")
folder.on("click", function(e){
make_window(dir, name);});
return folder
}
raw_window = function(name){
var window_count = $('.window').length
var f = $("<div class='window'><div class='bar'>"+
"<p><span class='name'>"+name+"</span></p>"+
"<div class='close'></div></div>"+
"<div class='view'></div><div class='resize'></div></div>");
f.find('.close').on("click", function(e){$(e.target).parents('.window').detach();});
f.find('.bar').on("mousedown", function(e){
window.drag = function(e, target){
o = target.offset();
o.left += e.dx;
o.top += e.dy;
if (o.top < 20){ o.top = 20}
if (o.left < 1){ o.left = 1}
target.offset(o)
}
window.target = $(e.target).parents('.window');
window.zheight += 1;
window.target.css('z-index', window.zheight);
})
f.find('.resize').on("mousedown", function(e){
window.drag = function(e, target){
target.width(target.width() + e.dx);
target.height(target.height() + e.dy);
}
window.target = $(e.target).parents('.window');
})
f[0].style.top = 20+(window_count*25)+"px"
f[0].style.left = 20+(window_count*10)+"px"
$('#desktop').append(f);
return f
}
make_window = function(dir, name){
if (debug) {console.log("make_window", dir, name)};
var f = raw_window(name)
create_dir(f.find('.view'), dir)
}
parse_files = function(e){
for (var k in e) {
cursor = window.files
sp = k.split("/");
for(var i = 0; i < sp.length; i++) {
var part = sp[i];
if (!cursor[part]) {
cursor[part] = (i == sp.length - 1 ? k : {});
}
cursor = cursor[part];
}
}
create_dir($('#desktop'), window.files);
}
create_dir = function(target, dir){
for (var k in dir){
v = dir[k];
if (typeof(v) == "string"){
target.append(make_icon(k, v));
} else {
target.prepend(make_folder(target, dir[k], k));
}
}
}
function window_open(path, blank, opts){
var w = raw_window("loading...");
w.addClass("html")
w[0].style.width = "600px"
w[0].style.height = "480px"
w[0].style.position = "absolute";
var view = w.find('.view')
view.append($("<iframe src='./"+path+"'>"))
var iframe = view.find('iframe')
iframe.on('load',function() {
w.find('.name').text(iframe[0].contentDocument.title);
});
return true;
}