Browse Source

Rewrite in progress

develop
Sven Slootweg 9 years ago
parent
commit
20dee21a2c
  1. 161
      docs/api.html
  2. 109
      docs/api.zpy
  3. 45
      index.html
  4. 329
      jsde.js
  5. 273
      old.js

161
docs/api.html
File diff suppressed because it is too large
View File

109
docs/api.zpy

@ -0,0 +1,109 @@
# JSDE API Reference
{TOC}
## JsdeWindow
### Member variables
^ JsdeWindow.id
Holds the unique ID of the window.
^ JsdeWindow.x
Holds the current X position of the window.
^ JsdeWindow.y
Holds the current Y position of the window.
^ JsdeWindow.z
Holds the current Z-index of the window.
^ JsdeWindow.width
Holds the current width of the window.
^ JsdeWindow.height
Holds the current height of the window.
^ JsdeWindow._inner
! Do __not__ use this to set the window contents, use JsdeWindow.SetContents() instead!
Holds a reference to the DOM element containing the window contents.
### Member functions
^ JsdeWindow.SetPosition(**x**, **y**)
Sets the current position of a window.
x::
The X coordinate.
y::
The Y coordinate.
@ Setting the window position
$ win.SetPosition(100, 110);
^ JsdeWindow.SetSize(**width**, **height**)
Sets the current size of a window.
width::
The new width.
height::
The new height.
@ Setting the window size
$ win.SetSize(400, 350);
^ JsdeWindow.GetTitle()
Returns the current title of the window.
@ Retrieving the window title
$ console.log(win.GetTitle());
> "Example window title"
^ JsdeWindow.SetTitle(**title**)
Sets the current title of the window.
title::
The title to set.
@ Setting the window title
$ win.SetTitle("Fancy new window title");
^ JsdeWindow.GetContents()
Returns the current contents of the window.
@ Retrieving the window contents
$ console.log(win.GetContents());
> "These are some example contents that could hypothetically be in a <strong>JSDE window</strong>."
^ JsdeWindow.SetContents(**contents**)
Sets the contents of the window.
contents::
The new window contents.
@ Setting the window contents
$ win.SetContents("These are <em>new</em> hypothetical contents for a window.");

45
index.html

@ -1,26 +1,34 @@
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<!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);
/*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;
secondWindow.maxWidth = 400;*/
new JsdeWindow({
x: 20,
y: 20,
width: 400,
height: 300,
title: "Hi"
});
})
</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>
</head>
<body>
<div id="make-window">
<span id="id1">140, -8</span><br>
<span id="id2">733, 85<br>873, 77</span><br><br>
@ -42,4 +50,23 @@ lol&lt;hr&gt;
</span>
<a class="workspace-tab workspace-tab-add" id="workspace_tab_add" href="#">+</a>
</div>
</body></html>
<div id="templates">
<div class="template_window window-wrapper window-styled">
<div class="window-title">
Test title
<div class="window-close">
<a href="#">X</a>
</div>
</div>
<div class="window-outer">
<div class="window-inner">
<strong>Test contents</strong>
</div>
<div class="window-resizer">
</div>
</div>
<input type="hidden" name="MDIWindowIdentifier" value="1" class="MDIWindowIdentifier">
</div>
</div>
</body>
</html>

329
jsde.js

@ -20,271 +20,112 @@
/* 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 next_z_index = 1;
var currently_dragged_window = null;
var currently_dragging = true;
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 JsdeWindow(options)
{
$.extend(this, options);
this._outer = $("#templates .template_window").clone()[0];
this._inner = $(this._outer).children(".window-inner")[0];
this._title = $(this._outer).children(".window-title")[0];
if(typeof options.visible !== "undefined" && options.visible == false)
{
this.Hide();
}
if(typeof options.title !== "undefined")
{
this.SetTitle(options.title);
}
if(typeof options.contents !== "undefined")
{
this.SetContents(options.contents);
}
if(typeof options.x === "undefined") { this.x = 0; }
if(typeof options.y === "undefined") { this.y = 0; }
if(typeof options.width === "undefined") { this.width = 250; }
if(typeof options.height === "undefined") { this.height = 200; }
this.SetPosition(this.x, this.y);
this.SetSize(this.width, this.height);
$(this._outer).click(this._HandleClick);
$(this._outer).mousedown(this._HandleMouseDown);
$(this._outer).appendTo("body");
}
function createWindow(x, y, title, contents, width, height, resizable)
JsdeWindow.prototype.BringToForeground = function()
{
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;
this.element.css({"z-index": next_z_index})
next_z_index++;
return this;
}
function createWorkspace()
JsdeWindow.prototype.GetContents = function()
{
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;
return $(this._inner).html();
}
function activateWorkspace(id)
JsdeWindow.prototype.GetTitle = function()
{
currentWorkspace = id;
$('.workspace-tab-active').removeClass('workspace-tab-active');
$('#tab_' + id).addClass('workspace-tab-active');
redrawWindows();
return $(this._title).children(".window-title-inner").html();
}
function redrawWindows()
JsdeWindow.prototype.Hide = function()
{
$.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'});
}
});
this.visible = false;
return $(this._outer).hide();
}
function MDIWindow(x, y, title, contents, width, height, workspace, resizable)
JsdeWindow.prototype.SetPosition = function(x, y)
{
this.x = x;
this.y = y;
this.title = title;
this.contents = contents;
return $(this._outer).css({left: this.x, top: this.y});
}
JsdeWindow.prototype.SetSize = function(width, height)
{
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;
}
return $(this._outer).css({width: this.width, height: this.height});
}
JsdeWindow.prototype.SetContents = function(html)
{
return $(this._inner).html(html);
}
JsdeWindow.prototype.SetTitle = function(html)
{
return $(this._title).children(".window-title-inner").html(html);
}
JsdeWindow.prototype.Show = function()
{
this.visible = true;
return $(this._outer).show();
}
JsdeWindow.prototype._HandleClick = function(event)
{
this.close = function(){
windowList[this.windowId] = null;
$(this.element).remove();
}
}
JsdeWindow.prototype._HandleMouseDown = function(event)
{
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();});
}
JsdeWindow.prototype._HandleMouseUp = function(event)
{
windowList[windowIterator] = this;
windowIterator += 1;
}

273
old.js

@ -0,0 +1,273 @@
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;
}
Loading…
Cancel
Save