From 20dee21a2cc16f981c640693cfb9d82395fa555e Mon Sep 17 00:00:00 2001 From: Sven Slootweg Date: Sun, 7 Jul 2013 17:40:10 +0200 Subject: [PATCH] Rewrite in progress --- docs/api.html | 161 ++++++++++++++++++++++++ docs/api.zpy | 109 +++++++++++++++++ index.html | 45 +++++-- jsde.js | 329 +++++++++++++------------------------------------- old.js | 273 +++++++++++++++++++++++++++++++++++++++++ 5 files changed, 664 insertions(+), 253 deletions(-) create mode 100644 docs/api.html create mode 100644 docs/api.zpy create mode 100644 old.js 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

Table of contents

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
Important: 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.
Example: Setting the window position
Code:
win.SetPosition(100, 110);
JsdeWindow.SetSize(width, height)
Sets the current size of a window.
width
The new width.
height
The new height.
Example: Setting the window size
Code:
win.SetSize(400, 350);
JsdeWindow.GetTitle()
Returns the current title of the window.
Example: Retrieving the window title
Code:
console.log(win.GetTitle());
Output:
"Example window title"
JsdeWindow.SetTitle(title)
Sets the current title of the window.
title
The title to set.
Example: Setting the window title
Code:
win.SetTitle("Fancy new window title");
JsdeWindow.GetContents()
Returns the current contents of the window.
Example: Retrieving the window contents
Code:
console.log(win.GetContents());
Output:
"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.
Example: Setting the window contents
Code:
win.SetContents("These are <em>new</em> hypothetical contents for a window.");
+ + 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 title +
+ X +
+
+
+
+ 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; +}