joepie91
/
jsde
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Initial commit

master
Sven Slootweg 11 years ago
commit
9e8c38a530
7 changed files with 604 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 91
      base.css
  2. BIN
      images/1312830507506.jpg
  3. BIN
      images/flower.jpg
  4. 45
      index.html
  5. 16
      jquery.js
  6. 290
      jsde.js
  7. 162
      style.css

91
base.css
View File

@ -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;
}

BIN
images/1312830507506.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
images/flower.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 310 KiB

45
index.html
View File

@ -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;">&lt;strong&gt;ohai!&lt;/strong&gt;&lt;br&gt;
lol&lt;hr&gt;
&lt;button&gt;:3&lt;/button&gt;
</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>

16
jquery.js
View File

File diff suppressed because one or more lines are too long

290
jsde.js
View File

@ -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;
}

162
style.css
View File

@ -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;
}
Write Preview
Loading…
Cancel
Save