Compare commits

..

No commits in common. 'develop' and 'master' have entirely different histories.

@ -3,19 +3,6 @@ html, body
overflow: hidden; overflow: hidden;
} }
body
{
position: fixed;
margin: 0px;
width: 100%;
height: 100%;
}
#jsde_templates
{
display: none;
}
/* MDIWindow Styling | Generic */ /* MDIWindow Styling | Generic */
div.window-wrapper div.window-wrapper
@ -53,8 +40,8 @@ div.window-close
div.window-close a div.window-close a
{ {
position: absolute; position: absolute;
right: 3px; right: 2px;
top: 2px; top: 1px;
display: block; display: block;
padding: 1px 4px; padding: 1px 4px;
text-decoration: none; text-decoration: none;

File diff suppressed because one or more lines are too long

@ -1,171 +0,0 @@
# JSDE API Reference
{TOC}
## jQuery extensions
^ $.getWindow()
Returns the JsdeWindow that the applicable element exists in. Useful to
do things like dynamically updating windows from an AJAX response.
## 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.
### Constructor
^ new JsdeWindow(options)
Creates a new window.
options::
A plain object that contains the options for this window. Options can be any of
the following.
title::
The title of the new window. You can use HTML here.
contents::
The contents of the new window. You can use HTML here.
visible::
A boolean indicating whether the window should be visible. Defaults to `true`.
x::
An integer specifying the X coordinate that the window should be spawned at.
y::
An integer specifying the Y coordinate that the window should be spawned at.
width::
An integer specifying the initial width of the window in pixels.
height::
An integer specifying the initial height of the window in pixels.
resizable::
A boolean indicating whether the user is allowed to resize the window.
Defaults to `true`.
min_width::
The minimum width of the window in pixels (used to restrict resizing). Defaults to `120`.
min_height::
The minimum height of the window in pixels (used to restrict resizing). Defaults to `120`.
max_width::
The maximum width of the window in pixels (used to restrict resizing). Defaults to unlimited.
max_height::
The maximum height of the window in pixels (used to restrict resizing). Defaults to unlimited.
### 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.GetPosition()
Retrieves the current position of a window.
Returns an object with an `x` and a `y` key.
^ 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.");

@ -1,59 +1,32 @@
<!doctype html> <!DOCTYPE HTML>
<html> <html><head>
<head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Javascript Desktop Environment</title> <title>Javascript Desktop Environment</title>
<script type="text/javascript" src="jquery.js"></script> <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" src="jsde.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var t;
$(function(){ $(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(); var secondWindow = createWindow(440, 120, "Test title", "<strong>Test contents</strong>", 300, 150).bringToForeground();
debugEl = secondWindow; debugEl = secondWindow;
secondWindow.minHeight = 100; secondWindow.minHeight = 100;
secondWindow.minWidth = 100; secondWindow.minWidth = 100;
secondWindow.maxHeight = 400; secondWindow.maxHeight = 400;
secondWindow.maxWidth = 400;*/ secondWindow.maxWidth = 400;
new JsdeWindow({
x: 20,
y: 20,
width: 400,
height: 300,
title: "Hi"
});
new JsdeWindow({
x: 120,
y: 40,
width: 400,
height: 300,
title: "Whee!"
});
$("#demo_button").click(function(event){
new JsdeWindow({
width: parseInt($("#w").val()),
height: parseInt($("#h").val()),
x: parseInt($("#x").val()),
y: parseInt($("#y").val()),
title: $("#title").val(),
contents: $("#contents").val()
});
});
}) })
</script> </script>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <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="base.css">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
</head> </head><body>
<body>
<div id="make-window"> <div id="make-window">
<span id="id1">140, -8</span><br> <span id="id1">140, -8</span><br>
<span id="id2">733, 85<br>873, 77</span><br><br> <span id="id2">733, 85<br>873, 77</span><br><br>
X: <input id="x" value="200" type="text"><br> X: <input id="x" value="200" type="text"><br>
Y: <input id="y" value="250" type="text"><br> Y: <input id="y" value="250" type="text"><br>
Title: <input id="title" value="Sample title" type="text"><br> Title: <input id="title" value="200" type="text"><br>
Contents (HTML): <br> Contents (HTML): <br>
<textarea id="contents" style="width: 300px; height: 180px;">&lt;strong&gt;ohai!&lt;/strong&gt;&lt;br&gt; <textarea id="contents" style="width: 300px; height: 180px;">&lt;strong&gt;ohai!&lt;/strong&gt;&lt;br&gt;
lol&lt;hr&gt; lol&lt;hr&gt;
@ -61,7 +34,7 @@ lol&lt;hr&gt;
</textarea><br> </textarea><br>
Width: <input id="w" value="400" type="text"><br> Width: <input id="w" value="400" type="text"><br>
Height: <input id="h" value="300" type="text"><br> Height: <input id="h" value="300" type="text"><br>
<button id="demo_button">Make new window</button> <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>
<div class="workspace-bar"> <div class="workspace-bar">
<span id="workspace-tab-list"> <span id="workspace-tab-list">
@ -69,25 +42,4 @@ lol&lt;hr&gt;
</span> </span>
<a class="workspace-tab workspace-tab-add" id="workspace_tab_add" href="#">+</a> <a class="workspace-tab workspace-tab-add" id="workspace_tab_add" href="#">+</a>
</div> </div>
<div id="jsde_templates"> </body></html>
<div class="template_window window-wrapper window-styled">
<div class="window-title">
<span class="window-title-inner">
Test title
</span>
<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>

22
jquery.js vendored

File diff suppressed because one or more lines are too long

@ -1,240 +1,290 @@
(function($){ /**
$.fn.disableSelection = function() { * .disableTextSelect - Disable Text Select Plugin
return this *
.attr('unselectable', 'on') * Version: 1.1
.css('user-select', 'none') * Updated: 2007-11-28
.on('selectstart', false); *
}; * Used to stop users from selecting text
*
$.fn.enableSelection = function() { * Copyright (c) 2007 James Dempster (letssurf@gmail.com, http://www.jdempster.com/category/jquery/disabletextselect/)
return this *
.attr('unselectable', 'off') * Dual licensed under the MIT (MIT-LICENSE.txt)
.css('user-select', 'text') * and GPL (GPL-LICENSE.txt) licenses.
.off('selectstart'); **/
};
/**
$.fn.getWindow = function() { * Requirements:
return this.closest(".window-inner").data("jsde-window"); * - jQuery (John Resig, http://www.jquery.com/)
}; **/
})(jQuery); (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)
var next_z_index = 1; /* JSDE code starts here */
var currently_dragged_window = null;
var currently_dragging = false; var dragCurrentElement = null;
var drag_start = {x: 0, y: 0}; var dragStartX = 0;
var currently_resized_window = null; var dragStartY = 0;
var currently_resizing = false; var dragCurrentX = 0;
var resize_start = {x: 0, y: 0}; var dragCurrentY = 0;
var dragOriginalX = 0;
$(function(){ var dragOriginalY = 0;
$("body").mousemove(_HandleMouseMove); var dragEnabled = false;
$("body").mouseup(_HandleMouseUp); var dragMode = 'none';
})
var mouseX = 0;
function JsdeWindow(options) var mouseY = 0;
{
$.extend(this, options); var windowCurrentZ = 1;
var windowList = [];
this._outer = $("#jsde_templates .template_window").clone()[0]; var windowIterator = 0;
this._inner = $(this._outer).find(".window-inner")[0];
this._title = $(this._outer).children(".window-title")[0]; var lastWorkspace = 0;
var currentWorkspace = 0;
if(typeof options.visible !== "undefined" && options.visible == false)
{ var debugEl = null;
this.Hide();
} $(function(){
// Initialization function
if(typeof options.title !== "undefined") $(document).mousemove(function(e){
{ mouseX = e.pageX;
this.SetTitle(options.title); mouseY = e.pageY;
} if(dragEnabled)
{
if(typeof options.contents !== "undefined") if(dragMode == 'moveWindow')
{ {
this.SetContents(options.contents); dragCurrentX = e.pageX - dragStartX;
} dragCurrentY = e.pageY - dragStartY;
$("span#id1").text("> " + dragCurrentX + ", " + dragCurrentY);
if(typeof options.x === "undefined") { this.x = 0; } dragCurrentElement.x = dragOriginalX + dragCurrentX;
if(typeof options.y === "undefined") { this.y = 0; } dragCurrentElement.y = dragOriginalY + dragCurrentY;
if(typeof options.width === "undefined") { this.width = 250; } if(dragCurrentElement.y < 0)
if(typeof options.height === "undefined") { this.height = 200; } {
if(typeof options.min_width === "undefined") { this.min_width = 120; } dragCurrentElement.y = 0;
if(typeof options.min_height === "undefined") { this.min_height = 120; } }
if(typeof options.resizable === "undefined") { this.resizable = true; } dragCurrentElement.element.css({'left':dragCurrentElement.x+'px','top':dragCurrentElement.y+'px'});
$("span#id2").html(dragOriginalX + ", " + dragOriginalY + "<br>" + dragCurrentElement.x + ", " + dragCurrentElement.y);
this.SetPosition(this.x, this.y); }
this.SetSize(this.width, this.height); else if(dragMode == 'resizeWindow')
{
$(this._outer).click(this._HandleClick); var dragNewX, dragNewY;
$(this._outer).appendTo("body"); dragCurrentX = e.pageX - dragStartX;
dragCurrentY = e.pageY - dragStartY;
$(this._title).mousedown(this._HandleMouseDown); $("span#id1").text("> " + dragCurrentX + ", " + dragCurrentY);
dragNewX = dragOriginalX + dragCurrentX;
$(this._outer).data("jsde-window", this) dragNewY = dragOriginalY + dragCurrentY;
$(this._inner).data("jsde-window", this)
$(this._title).data("jsde-window", this) if(dragCurrentElement.maxWidth != undefined && dragNewX > dragCurrentElement.maxWidth)
{
$(this._outer).find(".window-close a").click(this._HandleClose); dragNewX = dragCurrentElement.maxWidth;
}
$(this._outer).find(".window-resizer").mousedown(this._HandleStartResize.bind(this)); if(dragCurrentElement.minWidth != undefined && dragNewX < dragCurrentElement.minWidth)
{
this.BringToForeground(); dragNewX = dragCurrentElement.minWidth;
} }
if(dragCurrentElement.maxHeight != undefined && dragNewY > dragCurrentElement.maxHeight)
JsdeWindow.prototype.BringToForeground = function() {
{ dragNewY = dragCurrentElement.maxHeight;
this.z = next_z_index; }
$(this._outer).css({"z-index": next_z_index}) if(dragCurrentElement.minHeight != undefined && dragNewY < dragCurrentElement.minHeight)
next_z_index++; {
return this; dragNewY = dragCurrentElement.minHeight;
} }
JsdeWindow.prototype.Close = function(forced) dragCurrentElement.width = dragNewX;
{ dragCurrentElement.height = dragNewY;
if(typeof forced === "undefined") if(dragCurrentElement.y < 0)
{ {
forced = false; dragCurrentElement.y = 0;
} }
dragCurrentElement.element.css({'width':dragCurrentElement.width+'px','height':dragCurrentElement.height+'px'});
$(this._outer).remove(); $("span#id2").html(dragOriginalX + ", " + dragOriginalY + "<br>" + dragCurrentElement.width + ", " + dragCurrentElement.height);
} }
}
JsdeWindow.prototype.GetContents = function() else
{ {
return $(this._inner).html(); $("span#id1").text(dragCurrentX + ", " + dragCurrentY);
} }
});
JsdeWindow.prototype.GetTitle = function() $(document).mouseup(function(){
{ if(dragEnabled)
return $(this._title).children(".window-title-inner").html(); {
} dragEnabled = false;
$(document).enableTextSelect();
JsdeWindow.prototype.Hide = function() dragCurrentElement.element.addClass('window-styled').removeClass('window-dragged');
{ $('.workspace-tab-popup').removeClass('workspace-tab-popup');
this.visible = false; debugEl = dragCurrentElement;
return $(this._outer).hide(); }
} });
$('#workspace_tab_add').click(function(){
JsdeWindow.prototype.SetPosition = function(x, y) createWorkspace();
{ });
this.x = x; createWorkspace(); // creates initial workspace
this.y = y; activateWorkspace(1);
})
return $(this._outer).css({left: this.x, top: this.y});
} function createWindow(x, y, title, contents, width, height, resizable)
{
JsdeWindow.prototype.GetPosition = function() if(width === undefined) { var width = 400; }
{ if(height === undefined) { var height = 300; }
return {x: this.x, y: this.y}; var _newWindow = new MDIWindow(x, y, title, contents, width, height, currentWorkspace, resizable);
} $('body').append(_newWindow.element);
_newWindow.bringToForeground();
JsdeWindow.prototype.SetSize = function(width, height) return _newWindow;
{ }
this.width = width;
this.height = height; function createWorkspace()
{
return $(this._outer).css({width: this.width, height: this.height}); var newWorkspaceId = lastWorkspace + 1;
} var workspaceHtmlElement = document.createElement('a');
workspaceHtmlElement.setAttribute('href','#');
JsdeWindow.prototype.SetContents = function(html) workspaceHtmlElement.setAttribute('id','tab_' + newWorkspaceId);
{ var workspaceElement = $(workspaceHtmlElement).addClass('workspace-tab');
console.log("set contents", html, this); workspaceElement.click(function(){
return $(this._inner).html(html); activateWorkspace(newWorkspaceId);
} });
debugEl = workspaceElement;
JsdeWindow.prototype.SetTitle = function(html) $('#workspace-tab-list').append(workspaceElement);
{ workspaceElement.html(newWorkspaceId);
return $(this._title).children(".window-title-inner").html(html); lastWorkspace += 1;
} }
JsdeWindow.prototype.Show = function() function activateWorkspace(id)
{ {
this.visible = true; currentWorkspace = id;
return $(this._outer).show(); $('.workspace-tab-active').removeClass('workspace-tab-active');
} $('#tab_' + id).addClass('workspace-tab-active');
redrawWindows();
JsdeWindow.prototype._HandleClick = function(event) }
{
$(this).data("jsde-window").BringToForeground(); function redrawWindows()
} {
$.each($('.window-wrapper'),function(id, element){
JsdeWindow.prototype._HandleMouseDown = function(event) var currentElement = $(element);
{ debugEl = windowList[currentElement.children('input.MDIWindowIdentifier')[0].value];
currently_dragging = true; //alert(windowList[currentElement.children('input.MDIWindowIdentifier')[0].value]);
currently_dragged_window = $(this).data("jsde-window"); var currentWindow = windowList[currentElement.children('input.MDIWindowIdentifier')[0].value];
drag_start = {x: event.pageX - currently_dragged_window.x, y: event.pageY - currently_dragged_window.y}; if(currentWindow.assignedWorkspace == currentWorkspace)
$(currently_dragged_window._outer).addClass("window-dragged"); {
currently_dragged_window.BringToForeground(); currentElement.css({display: 'block'});
$("body").disableSelection(); }
event.stopPropagation(); else
} {
currentElement.css({display: 'none'});
JsdeWindow.prototype._HandleClose = function(event) }
{ });
affected_window = $(this).closest(".window-title").data("jsde-window"); }
affected_window.Close();
} function MDIWindow(x, y, title, contents, width, height, workspace, resizable)
{
JsdeWindow.prototype._HandleStartResize = function(event) this.x = x;
{ this.y = y;
currently_resizing = true; this.title = title;
currently_resized_window = this; this.contents = contents;
resize_start = {x: event.pageX - (currently_resized_window.x + currently_resized_window.width), this.width = width;
y: event.pageY - (currently_resized_window.y + currently_resized_window.height)}; this.height = height;
$(currently_resized_window._outer).addClass("window-dragged"); this.minWidth = undefined;
currently_resized_window.BringToForeground(); this.minHeight = undefined;
$("body").disableSelection(); this.maxWidth = undefined;
event.stopPropagation(); this.maxHeight = undefined;
} this.windowId = windowIterator;
function _HandleMouseUp(event) if(resizable == undefined)
{ {
if(currently_dragging === true) this.resizable = true;
{ }
currently_dragging = false; else
$("body").enableSelection(); {
$(currently_dragged_window._outer).removeClass("window-dragged"); this.resizable = resizable;
} }
if(currently_resizing === true) if(workspace == undefined)
{ {
currently_resizing = false; this.assignedWorkspace = 1;
$("body").enableSelection(); }
$(currently_resized_window._outer).removeClass("window-dragged"); else
} {
} this.assignedWorkspace = workspace;
}
function _HandleMouseMove(event)
{ var parentMDIWindow = this;
if(currently_dragging === true)
{ var _wrapper = $(document.createElement('div')).addClass('window-wrapper').addClass('window-styled').css({'top':y+'px', 'left':x+'px', 'width':width+'px', 'height':height+'px'});
currently_dragged_window.SetPosition(event.pageX - drag_start.x, event.pageY - drag_start.y); var _titlebar = $(document.createElement('div')).addClass('window-title').html(title);
} var _close = $(document.createElement('div')).addClass('window-close').html('<a href="#">X</a>');
else if(currently_resizing === true) var _outer = $(document.createElement('div')).addClass('window-outer');
{ var _inner = $(document.createElement('div')).addClass('window-inner').html(contents);
var new_w = event.pageX - (resize_start.x + currently_resized_window.x); var _identifier = document.createElement('input');
var new_h = event.pageY - (resize_start.y + currently_resized_window.y); var _resizer = $(document.createElement('div')).addClass('window-resizer');
if(typeof currently_resized_window.min_width !== "undefined" && new_w < currently_resized_window.min_width) _identifier.setAttribute('type', 'hidden');
{ _identifier.setAttribute('name', 'MDIWindowIdentifier');
new_w = currently_resized_window.min_width; _identifier.setAttribute('value', windowIterator);
} _identifier = $(_identifier).addClass('MDIWindowIdentifier');
if(typeof currently_resized_window.min_height !== "undefined" && new_h < currently_resized_window.min_height) _titlebar.mousedown(function(){
{ parentMDIWindow.bringToForeground();
new_h = currently_resized_window.min_height; });
}
_outer.mousedown(function(){
if(typeof currently_resized_window.max_width !== "undefined" && new_w > currently_resized_window.max_width) parentMDIWindow.bringToForeground();
{ });
new_w = currently_resized_window.max_width;
} _close.children("a").click(function(){
parentMDIWindow.close();
if(typeof currently_resized_window.max_height !== "undefined" && new_h > currently_resized_window.max_height) });
{
new_h = currently_resized_window.max_height; _titlebar.append(_close);
} _outer.append(_inner);
currently_resized_window.SetSize(new_w, new_h); 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;
}

273
old.js

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

@ -29,11 +29,11 @@ div.window-title
-moz-border-radius-topright: 10px; -moz-border-radius-topright: 10px;
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
height: 16px; height: 18px;
color: white; color: white;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
padding: 4px; padding: 2px;
padding-left: 7px; padding-left: 7px;
border-top: 1px solid #6262FF; border-top: 1px solid #6262FF;
border-right: 1px solid #6262FF; border-right: 1px solid #6262FF;
@ -43,7 +43,7 @@ div.window-title
div.window-outer div.window-outer
{ {
font-size: 13px; font-size: 13px;
top: 25px; top: 23px;
border-bottom: 1px solid gray; border-bottom: 1px solid gray;
border-right: 1px solid gray; border-right: 1px solid gray;
border-left: 1px solid gray; border-left: 1px solid gray;
@ -107,7 +107,6 @@ div.window-styled div.window-outer
div.window-dragged div.window-title div.window-dragged div.window-title
{ {
background-color: #0070D5; background-color: #0070D5;
background-image: none;
} }
div.workspace-bar div.workspace-bar
@ -115,18 +114,6 @@ div.workspace-bar
height: 32px; height: 32px;
} }
div.window-dragged div.window-outer
{
background: none;
}
div.window-dragged div.window-title, div.window-dragged div.window-outer
{
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
a.workspace-tab a.workspace-tab
{ {
height: 32px; height: 32px;

Loading…
Cancel
Save