Compare commits

...

8 Commits

Author SHA1 Message Date
Sven Slootweg b1191f6f5d Update docs, set defaults, and implement resizing 11 years ago
Sven Slootweg 6b2f696448 Fix line endings 11 years ago
Sven Slootweg 61f94e46cd Implement resizing 11 years ago
Sven Slootweg f4fd1b68fb Fix demo form, and add a .getWindow method 11 years ago
Sven Slootweg 6be9710a34 Implement close button 11 years ago
Sven Slootweg 52e2eed5a2 Update docs 11 years ago
Sven Slootweg d49a7f1293 Update jQuery version and turn code into something working 11 years ago
Sven Slootweg 20dee21a2c Rewrite in progress 11 years ago

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

File diff suppressed because one or more lines are too long

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

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

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

Loading…
Cancel
Save