Initial commit
commit
9e8c38a530
@ -0,0 +1,91 @@
|
||||
html, body
|
||||
{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* MDIWindow Styling | Generic */
|
||||
|
||||
div.window-wrapper
|
||||
{
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
div.window-title
|
||||
{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
cursor: default;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
div.window-outer
|
||||
{
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
div.window-close
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
|
||||
div.window-close a
|
||||
{
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 1px;
|
||||
display: block;
|
||||
padding: 1px 4px;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* MDIWindow Styling | Normal state */
|
||||
|
||||
|
||||
div.window-styled div.window-inner
|
||||
{
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
||||
/* MDIWindow Styling | Dragging state */
|
||||
|
||||
|
||||
div.window-dragged div.window-inner
|
||||
{
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
div.workspace-bar
|
||||
{
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
a.workspace-tab
|
||||
{
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
div.window-resizer
|
||||
{
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
bottom: -6px;
|
||||
right: -6px;
|
||||
cursor: se-resize;
|
||||
}
|
Binary file not shown.
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
After Width: | Height: | Size: 310 KiB |
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html><head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
|
||||
<title>Javascript Desktop Environment</title>
|
||||
<script type="text/javascript" src="jquery.js"></script>
|
||||
<script type="text/javascript" src="jquery.disable.select.js"></script>
|
||||
<script type="text/javascript" src="jsde.js"></script>
|
||||
<script type="text/javascript">
|
||||
var t;
|
||||
$(function(){
|
||||
createWindow(140, 30, "Test title", "<strong>Test contents</strong><pre></pre>", 500, 620, false);
|
||||
var secondWindow = createWindow(440, 120, "Test title", "<strong>Test contents</strong>", 300, 150).bringToForeground();
|
||||
debugEl = secondWindow;
|
||||
secondWindow.minHeight = 100;
|
||||
secondWindow.minWidth = 100;
|
||||
secondWindow.maxHeight = 400;
|
||||
secondWindow.maxWidth = 400;
|
||||
})
|
||||
</script>
|
||||
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" type="text/css" href="base.css">
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
</head><body>
|
||||
<div id="make-window">
|
||||
<span id="id1">140, -8</span><br>
|
||||
<span id="id2">733, 85<br>873, 77</span><br><br>
|
||||
X: <input id="x" value="200" type="text"><br>
|
||||
Y: <input id="y" value="250" type="text"><br>
|
||||
Title: <input id="title" value="200" type="text"><br>
|
||||
Contents (HTML): <br>
|
||||
<textarea id="contents" style="width: 300px; height: 180px;"><strong>ohai!</strong><br>
|
||||
lol<hr>
|
||||
<button>:3</button>
|
||||
</textarea><br>
|
||||
Width: <input id="w" value="400" type="text"><br>
|
||||
Height: <input id="h" value="300" type="text"><br>
|
||||
<button onclick="createWindow(parseInt($('#x').val()),parseInt($('#y').val()),$('#title').val(),$('#contents').val(),parseInt($('#w').val()),parseInt($('#h').val())).bringToForeground();">Make new window</button>
|
||||
</div>
|
||||
<div class="workspace-bar">
|
||||
<span id="workspace-tab-list">
|
||||
<!-- workspace tabs go here -->
|
||||
</span>
|
||||
<a class="workspace-tab workspace-tab-add" id="workspace_tab_add" href="#">+</a>
|
||||
</div>
|
||||
</body></html>
|
@ -0,0 +1,290 @@
|
||||
/**
|
||||
* .disableTextSelect - Disable Text Select Plugin
|
||||
*
|
||||
* Version: 1.1
|
||||
* Updated: 2007-11-28
|
||||
*
|
||||
* Used to stop users from selecting text
|
||||
*
|
||||
* Copyright (c) 2007 James Dempster (letssurf@gmail.com, http://www.jdempster.com/category/jquery/disabletextselect/)
|
||||
*
|
||||
* Dual licensed under the MIT (MIT-LICENSE.txt)
|
||||
* and GPL (GPL-LICENSE.txt) licenses.
|
||||
**/
|
||||
|
||||
/**
|
||||
* Requirements:
|
||||
* - jQuery (John Resig, http://www.jquery.com/)
|
||||
**/
|
||||
(function($){if($.browser.mozilla){$.fn.disableTextSelect=function(){return this.each(function(){$(this).css({"MozUserSelect":"none"})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).css({"MozUserSelect":""})})}}else{if($.browser.msie){$.fn.disableTextSelect=function(){return this.each(function(){$(this).bind("selectstart.disableTextSelect",function(){return false})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).unbind("selectstart.disableTextSelect")})}}else{$.fn.disableTextSelect=function(){return this.each(function(){$(this).bind("mousedown.disableTextSelect",function(){return false})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).unbind("mousedown.disableTextSelect")})}}}})(jQuery)
|
||||
|
||||
/* JSDE code starts here */
|
||||
|
||||
var dragCurrentElement = null;
|
||||
var dragStartX = 0;
|
||||
var dragStartY = 0;
|
||||
var dragCurrentX = 0;
|
||||
var dragCurrentY = 0;
|
||||
var dragOriginalX = 0;
|
||||
var dragOriginalY = 0;
|
||||
var dragEnabled = false;
|
||||
var dragMode = 'none';
|
||||
|
||||
var mouseX = 0;
|
||||
var mouseY = 0;
|
||||
|
||||
var windowCurrentZ = 1;
|
||||
var windowList = [];
|
||||
var windowIterator = 0;
|
||||
|
||||
var lastWorkspace = 0;
|
||||
var currentWorkspace = 0;
|
||||
|
||||
var debugEl = null;
|
||||
|
||||
$(function(){
|
||||
// Initialization function
|
||||
$(document).mousemove(function(e){
|
||||
mouseX = e.pageX;
|
||||
mouseY = e.pageY;
|
||||
if(dragEnabled)
|
||||
{
|
||||
if(dragMode == 'moveWindow')
|
||||
{
|
||||
dragCurrentX = e.pageX - dragStartX;
|
||||
dragCurrentY = e.pageY - dragStartY;
|
||||
$("span#id1").text("> " + dragCurrentX + ", " + dragCurrentY);
|
||||
dragCurrentElement.x = dragOriginalX + dragCurrentX;
|
||||
dragCurrentElement.y = dragOriginalY + dragCurrentY;
|
||||
if(dragCurrentElement.y < 0)
|
||||
{
|
||||
dragCurrentElement.y = 0;
|
||||
}
|
||||
dragCurrentElement.element.css({'left':dragCurrentElement.x+'px','top':dragCurrentElement.y+'px'});
|
||||
$("span#id2").html(dragOriginalX + ", " + dragOriginalY + "<br>" + dragCurrentElement.x + ", " + dragCurrentElement.y);
|
||||
}
|
||||
else if(dragMode == 'resizeWindow')
|
||||
{
|
||||
var dragNewX, dragNewY;
|
||||
dragCurrentX = e.pageX - dragStartX;
|
||||
dragCurrentY = e.pageY - dragStartY;
|
||||
$("span#id1").text("> " + dragCurrentX + ", " + dragCurrentY);
|
||||
dragNewX = dragOriginalX + dragCurrentX;
|
||||
dragNewY = dragOriginalY + dragCurrentY;
|
||||
|
||||
if(dragCurrentElement.maxWidth != undefined && dragNewX > dragCurrentElement.maxWidth)
|
||||
{
|
||||
dragNewX = dragCurrentElement.maxWidth;
|
||||
}
|
||||
if(dragCurrentElement.minWidth != undefined && dragNewX < dragCurrentElement.minWidth)
|
||||
{
|
||||
dragNewX = dragCurrentElement.minWidth;
|
||||
}
|
||||
if(dragCurrentElement.maxHeight != undefined && dragNewY > dragCurrentElement.maxHeight)
|
||||
{
|
||||
dragNewY = dragCurrentElement.maxHeight;
|
||||
}
|
||||
if(dragCurrentElement.minHeight != undefined && dragNewY < dragCurrentElement.minHeight)
|
||||
{
|
||||
dragNewY = dragCurrentElement.minHeight;
|
||||
}
|
||||
|
||||
dragCurrentElement.width = dragNewX;
|
||||
dragCurrentElement.height = dragNewY;
|
||||
if(dragCurrentElement.y < 0)
|
||||
{
|
||||
dragCurrentElement.y = 0;
|
||||
}
|
||||
dragCurrentElement.element.css({'width':dragCurrentElement.width+'px','height':dragCurrentElement.height+'px'});
|
||||
$("span#id2").html(dragOriginalX + ", " + dragOriginalY + "<br>" + dragCurrentElement.width + ", " + dragCurrentElement.height);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
$("span#id1").text(dragCurrentX + ", " + dragCurrentY);
|
||||
}
|
||||
});
|
||||
$(document).mouseup(function(){
|
||||
if(dragEnabled)
|
||||
{
|
||||
dragEnabled = false;
|
||||
$(document).enableTextSelect();
|
||||
dragCurrentElement.element.addClass('window-styled').removeClass('window-dragged');
|
||||
$('.workspace-tab-popup').removeClass('workspace-tab-popup');
|
||||
debugEl = dragCurrentElement;
|
||||
}
|
||||
});
|
||||
$('#workspace_tab_add').click(function(){
|
||||
createWorkspace();
|
||||
});
|
||||
createWorkspace(); // creates initial workspace
|
||||
activateWorkspace(1);
|
||||
})
|
||||
|
||||
function createWindow(x, y, title, contents, width, height, resizable)
|
||||
{
|
||||
if(width === undefined) { var width = 400; }
|
||||
if(height === undefined) { var height = 300; }
|
||||
var _newWindow = new MDIWindow(x, y, title, contents, width, height, currentWorkspace, resizable);
|
||||
$('body').append(_newWindow.element);
|
||||
_newWindow.bringToForeground();
|
||||
return _newWindow;
|
||||
}
|
||||
|
||||
function createWorkspace()
|
||||
{
|
||||
var newWorkspaceId = lastWorkspace + 1;
|
||||
var workspaceHtmlElement = document.createElement('a');
|
||||
workspaceHtmlElement.setAttribute('href','#');
|
||||
workspaceHtmlElement.setAttribute('id','tab_' + newWorkspaceId);
|
||||
var workspaceElement = $(workspaceHtmlElement).addClass('workspace-tab');
|
||||
workspaceElement.click(function(){
|
||||
activateWorkspace(newWorkspaceId);
|
||||
});
|
||||
debugEl = workspaceElement;
|
||||
$('#workspace-tab-list').append(workspaceElement);
|
||||
workspaceElement.html(newWorkspaceId);
|
||||
lastWorkspace += 1;
|
||||
}
|
||||
|
||||
function activateWorkspace(id)
|
||||
{
|
||||
currentWorkspace = id;
|
||||
$('.workspace-tab-active').removeClass('workspace-tab-active');
|
||||
$('#tab_' + id).addClass('workspace-tab-active');
|
||||
redrawWindows();
|
||||
}
|
||||
|
||||
function redrawWindows()
|
||||
{
|
||||
$.each($('.window-wrapper'),function(id, element){
|
||||
var currentElement = $(element);
|
||||
debugEl = windowList[currentElement.children('input.MDIWindowIdentifier')[0].value];
|
||||
//alert(windowList[currentElement.children('input.MDIWindowIdentifier')[0].value]);
|
||||
var currentWindow = windowList[currentElement.children('input.MDIWindowIdentifier')[0].value];
|
||||
if(currentWindow.assignedWorkspace == currentWorkspace)
|
||||
{
|
||||
currentElement.css({display: 'block'});
|
||||
}
|
||||
else
|
||||
{
|
||||
currentElement.css({display: 'none'});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function MDIWindow(x, y, title, contents, width, height, workspace, resizable)
|
||||
{
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.title = title;
|
||||
this.contents = contents;
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
this.minWidth = undefined;
|
||||
this.minHeight = undefined;
|
||||
this.maxWidth = undefined;
|
||||
this.maxHeight = undefined;
|
||||
this.windowId = windowIterator;
|
||||
|
||||
if(resizable == undefined)
|
||||
{
|
||||
this.resizable = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.resizable = resizable;
|
||||
}
|
||||
|
||||
if(workspace == undefined)
|
||||
{
|
||||
this.assignedWorkspace = 1;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.assignedWorkspace = workspace;
|
||||
}
|
||||
|
||||
var parentMDIWindow = this;
|
||||
|
||||
var _wrapper = $(document.createElement('div')).addClass('window-wrapper').addClass('window-styled').css({'top':y+'px', 'left':x+'px', 'width':width+'px', 'height':height+'px'});
|
||||
var _titlebar = $(document.createElement('div')).addClass('window-title').html(title);
|
||||
var _close = $(document.createElement('div')).addClass('window-close').html('<a href="#">X</a>');
|
||||
var _outer = $(document.createElement('div')).addClass('window-outer');
|
||||
var _inner = $(document.createElement('div')).addClass('window-inner').html(contents);
|
||||
var _identifier = document.createElement('input');
|
||||
var _resizer = $(document.createElement('div')).addClass('window-resizer');
|
||||
|
||||
_identifier.setAttribute('type', 'hidden');
|
||||
_identifier.setAttribute('name', 'MDIWindowIdentifier');
|
||||
_identifier.setAttribute('value', windowIterator);
|
||||
_identifier = $(_identifier).addClass('MDIWindowIdentifier');
|
||||
|
||||
_titlebar.mousedown(function(){
|
||||
parentMDIWindow.bringToForeground();
|
||||
});
|
||||
|
||||
_outer.mousedown(function(){
|
||||
parentMDIWindow.bringToForeground();
|
||||
});
|
||||
|
||||
_close.children("a").click(function(){
|
||||
parentMDIWindow.close();
|
||||
});
|
||||
|
||||
_titlebar.append(_close);
|
||||
_outer.append(_inner);
|
||||
|
||||
if(this.resizable == true)
|
||||
{
|
||||
_outer.append(_resizer);
|
||||
}
|
||||
|
||||
_wrapper.append(_titlebar).append(_outer).append(_identifier);
|
||||
|
||||
this.element = _wrapper;
|
||||
|
||||
this.bringToForeground = function(){
|
||||
this.element.css('z-index',windowCurrentZ);
|
||||
windowCurrentZ += 1;
|
||||
return this;
|
||||
}
|
||||
|
||||
this.startDrag = function(){
|
||||
$('.workspace-tab').addClass('workspace-tab-popup');
|
||||
dragCurrentElement = this;
|
||||
$(document).disableTextSelect();
|
||||
this.element.removeClass('window-styled').addClass('window-dragged');
|
||||
dragOriginalX = this.x;
|
||||
dragOriginalY = this.y;
|
||||
dragStartX = mouseX;
|
||||
dragStartY = mouseY;
|
||||
dragMode = 'moveWindow';
|
||||
dragEnabled = true;
|
||||
}
|
||||
|
||||
this.startResize = function(){
|
||||
dragCurrentElement = this;
|
||||
$(document).disableTextSelect();
|
||||
this.element.removeClass('window-styled').addClass('window-dragged');
|
||||
dragOriginalX = this.width;
|
||||
dragOriginalY = this.height;
|
||||
dragStartX = mouseX;
|
||||
dragStartY = mouseY;
|
||||
dragMode = 'resizeWindow';
|
||||
dragEnabled = true;
|
||||
}
|
||||
|
||||
this.close = function(){
|
||||
windowList[this.windowId] = null;
|
||||
$(this.element).remove();
|
||||
}
|
||||
|
||||
debugEl = this.element.children('.window-title');
|
||||
var thisElement = this;
|
||||
this.element.children('.window-title').mousedown(function(){thisElement.startDrag();});
|
||||
this.element.find('.window-resizer').mousedown(function(){thisElement.startResize();});
|
||||
|
||||
windowList[windowIterator] = this;
|
||||
windowIterator += 1;
|
||||
}
|
@ -0,0 +1,162 @@
|
||||
html,body
|
||||
{
|
||||
font-family: 'Varela Round', sans-serif, Trebuchet MS;
|
||||
background-color: silver;
|
||||
background-image: url(images/flower.jpg);
|
||||
background-attachment:fixed;
|
||||
background-position:center;
|
||||
}
|
||||
|
||||
/* Temporary styles */
|
||||
|
||||
div#make-window
|
||||
{
|
||||
background-color: white;
|
||||
border: 1px solid gray;
|
||||
padding: 14px;
|
||||
width: 350px;
|
||||
filter:alpha(opacity=85);
|
||||
opacity:0.85;
|
||||
}
|
||||
|
||||
/* MDIWindow Styling | Generic */
|
||||
|
||||
div.window-title
|
||||
{
|
||||
-webkit-border-top-left-radius: 10px;
|
||||
-webkit-border-top-right-radius: 10px;
|
||||
-moz-border-radius-topleft: 10px;
|
||||
-moz-border-radius-topright: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
height: 18px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
padding: 2px;
|
||||
padding-left: 7px;
|
||||
border-top: 1px solid #6262FF;
|
||||
border-right: 1px solid #6262FF;
|
||||
border-left: 1px solid #6262FF;
|
||||
}
|
||||
|
||||
div.window-outer
|
||||
{
|
||||
font-size: 13px;
|
||||
top: 23px;
|
||||
border-bottom: 1px solid gray;
|
||||
border-right: 1px solid gray;
|
||||
border-left: 1px solid gray;
|
||||
}
|
||||
|
||||
div.window-inner
|
||||
{
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
div.window-close a
|
||||
{
|
||||
color: white;
|
||||
border: 1px solid #014D8C;
|
||||
}
|
||||
|
||||
div.window-close a:hover
|
||||
{
|
||||
background-color: #014D8C;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
/* MDIWindow Styling | Normal state */
|
||||
|
||||
div.window-styled div.window-title, div.window-styled div.window-outer
|
||||
{
|
||||
-webkit-box-shadow: 5px 5px 10px #1a1a1a;
|
||||
-moz-box-shadow: 5px 5px 10px #1a1a1a;
|
||||
box-shadow: 5px 5px 10px #1a1a1a;
|
||||
}
|
||||
|
||||
div.window-styled div.window-title
|
||||
{
|
||||
background-image: -webkit-gradient(
|
||||
linear,
|
||||
left bottom,
|
||||
left top,
|
||||
color-stop(0, rgb(0,87,179)),
|
||||
color-stop(1, rgb(0,153,255))
|
||||
);
|
||||
background-image: -moz-linear-gradient(
|
||||
center bottom,
|
||||
rgb(0,87,179) 0%,
|
||||
rgb(0,153,255) 100%
|
||||
);
|
||||
|
||||
filter:alpha(opacity=85);
|
||||
opacity:0.85;
|
||||
}
|
||||
|
||||
div.window-styled div.window-outer
|
||||
{
|
||||
background-color: #F7F7F0;
|
||||
filter:alpha(opacity=95);
|
||||
opacity:0.95;
|
||||
}
|
||||
|
||||
|
||||
/* MDIWindow Styling | Dragging state */
|
||||
|
||||
div.window-dragged div.window-title
|
||||
{
|
||||
background-color: #0070D5;
|
||||
}
|
||||
|
||||
div.workspace-bar
|
||||
{
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
a.workspace-tab
|
||||
{
|
||||
height: 32px;
|
||||
width: 48px;
|
||||
-webkit-border-top-left-radius: 10px;
|
||||
-webkit-border-top-right-radius: 10px;
|
||||
-moz-border-radius-topleft: 10px;
|
||||
-moz-border-radius-topright: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
border: 1px solid black;
|
||||
background-color: #E9E9E9;
|
||||
padding-top: 6px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
color: black;
|
||||
margin-top: 10px;
|
||||
filter:alpha(opacity=95);
|
||||
opacity:0.95;
|
||||
}
|
||||
|
||||
a.workspace-tab:hover
|
||||
{
|
||||
background-color: #DADADA;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
a.workspace-tab-active
|
||||
{
|
||||
font-weight: bold;
|
||||
background-color: #B9B9B9;
|
||||
color: #BC0000;
|
||||
}
|
||||
|
||||
a.workspace-tab-popup
|
||||
{
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
a.workspace-tab-add
|
||||
{
|
||||
background-color: #C8C8C8;
|
||||
filter:alpha(opacity=85);
|
||||
opacity:0.85;
|
||||
}
|
Loading…
Reference in New Issue