Working window magager ported from selfsame.
This commit is contained in:
parent
cc023781f1
commit
9ab7aa9dac
195
desktop.html
195
desktop.html
|
@ -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 "Application"</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 "Application"</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>
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue