diff --git a/docs/api.html b/docs/api.html
new file mode 100644
index 0000000..64f5e94
--- /dev/null
+++ b/docs/api.html
@@ -0,0 +1,161 @@
+
+
+
+
+
+
+ JSDE API Reference JsdeWindow Member variables Member functions
+
+
diff --git a/docs/api.zpy b/docs/api.zpy
new file mode 100644
index 0000000..c7cdae5
--- /dev/null
+++ b/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 JSDE window ."
+
+^ JsdeWindow.SetContents(**contents**)
+
+ Sets the contents of the window.
+
+ contents::
+ The new window contents.
+
+ @ Setting the window contents
+
+ $ win.SetContents("These are new hypothetical contents for a window.");
diff --git a/index.html b/index.html
index 40ce387..8400308 100755
--- a/index.html
+++ b/index.html
@@ -1,26 +1,34 @@
-
-
-
+
+
+
+
Javascript Desktop Environment
-
-
+
+
140, -8
733, 85 873, 77
@@ -42,4 +50,23 @@ lol<hr>
+
-
+
+
+
+
+
+ Test contents
+
+
+
+
+
+
+
+
+
diff --git a/jsde.js b/jsde.js
index 47a1aeb..595e17b 100755
--- a/jsde.js
+++ b/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 + " " + 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 + " " + 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('X ');
- 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;
}
diff --git a/old.js b/old.js
new file mode 100644
index 0000000..d9c2098
--- /dev/null
+++ b/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 + " " + 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 + " " + 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('X ');
+ 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;
+}