xaymar/Legacy-Projects
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update to latest versions. BlitzUtility now has it's own repository.

Browse Source
This commit is contained in:
Michael Fabian Dirks
2015-05-17 11:31:51 +02:00
parent 8f3114e377
commit f53c98d8e3
11 changed files with 3754 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web-based/JS - JSDesktop/JSDesktop.html
+161
View File
@@ -0,0 +1,161 @@
<!DOCTYPE html>
<html>
<head>
<title>Desktop</title>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="js/JSDesktop.js"></script>
<link rel="stylesheet" type="text/css" href="./css/JSDesktop.css">
<meta charset="utf-8" />
</head>
<body>
<div name="main" id="JSDesktop">
<!-- <div class="JSWindow JSFlag_Titlebar" style="width: 200px; height: 100px; top: 10px; left: 10px;">
<div class="JSBorder">
<div class="JSTitlebar">
<div class="JSIcon"></div>
<div class="JSTitle">Window+Titlebar</div>
</div>
Inner
</div>
</div>
<div class="JSWindow JSFlag_ThinBorder JSFlag_Titlebar" style="width: 200px; height: 100px; top: 10px; left: 220px;">
<div class="JSBorder">
<div class="JSTitlebar">
<div class="JSIcon"></div>
<div class="JSTitle">Window+ThinBorder+Titlebar</div>
</div>
Inner
</div>
</div>
<div class="JSWindow JSFlag_Border JSFlag_Titlebar" style="width: 200px; height: 100px; top: 10px; left: 430px;">
<div class="JSBorder">
<div class="JSTitlebar">
<div class="JSIcon"></div>
<div class="JSTitle">Window+Border+Titlebar</div>
</div>
Inner
</div>
</div>
<div class="JSWindow JSFlag_ThickBorder JSFlag_Titlebar" style="width: 200px; height: 100px; top: 10px; left: 640px;">
<div class="JSBorder">
<div class="JSTitlebar">
<div class="JSIcon"></div>
<div class="JSTitle">Window+ThickBorder+Titlebar</div>
</div>
Inner
</div>
</div>
<div class="JSWindow JSFlag_Titlebar JSFlag_Active" style="width: 200px; height: 100px; top: 120px; left: 10px;">
<div class="JSBorder">
<div class="JSTitlebar">
<div class="JSIcon"></div>
<div class="JSTitle">Window+Titlebar+Active</div>
</div>
Inner
</div>
</div>
<div class="JSWindow JSFlag_ThinBorder JSFlag_Titlebar JSFlag_Active" style="width: 200px; height: 100px; top: 120px; left: 220px;">
<div class="JSBorder">
<div class="JSTitlebar">
<div class="JSIcon"></div>
<div class="JSTitle">Window+ThinBorder+Titlebar+Active</div>
</div>
Inner
</div>
</div>
<div class="JSWindow JSFlag_Border JSFlag_Titlebar JSFlag_Active" style="width: 200px; height: 100px; top: 120px; left: 430px;">
<div class="JSBorder">
<div class="JSTitlebar">
<div class="JSIcon"></div>
<div class="JSTitle">Window+Border+Titlebar+Active</div>
</div>
Inner
</div>
</div>
<div class="JSWindow JSFlag_ThickBorder JSFlag_Titlebar JSFlag_Active" style="width: 200px; height: 100px; top: 120px; left: 640px;">
<div class="JSBorder">
<div class="JSTitlebar">
<div class="JSIcon"></div>
<div class="JSTitle">Window+ThickBorder+Titlebar+Active</div>
</div>
Inner
</div>
</div>
<div class="JSWindow JSFlag_Titlebar JSFlag_Icon" style="width: 200px; height: 100px; top: 230px; left: 10px;">
<div class="JSBorder">
<div class="JSTitlebar">
<div class="JSIcon"></div>
<div class="JSTitle">Window+Titlebar+Icon</div>
</div>
Inner
</div>
</div>
<div class="JSWindow JSFlag_ThinBorder JSFlag_Titlebar JSFlag_Icon" style="width: 200px; height: 100px; top: 230px; left: 220px;">
<div class="JSBorder">
<div class="JSTitlebar">
<div class="JSIcon"></div>
<div class="JSTitle">Window+ThinBorder+Titlebar+Icon</div>
</div>
Inner
</div>
</div>
<div class="JSWindow JSFlag_Border JSFlag_Titlebar JSFlag_Icon" style="width: 200px; height: 100px; top: 230px; left: 430px;">
<div class="JSBorder">
<div class="JSTitlebar">
<div class="JSIcon"></div>
<div class="JSTitle">Window+Border+Titlebar+Icon</div>
</div>
Inner
</div>
</div>
<div class="JSWindow JSFlag_ThickBorder JSFlag_Titlebar JSFlag_Icon" style="width: 200px; height: 100px; top: 230px; left: 640px;">
<div class="JSBorder">
<div class="JSTitlebar">
<div class="JSIcon"></div>
<div class="JSTitle">Window+ThickBorder+Titlebar+Icon</div>
</div>
Inner
</div>
</div>
<div class="JSWindow JSFlag_Titlebar JSFlag_Icon JSFlag_Active" style="width: 200px; height: 100px; top: 340px; left: 10px;">
<div class="JSBorder">
<div class="JSTitlebar">
<div class="JSIcon"></div>
<div class="JSTitle">Window+Titlebar+Active+Icon</div>
</div>
Inner
</div>
</div>
<div class="JSWindow JSFlag_ThinBorder JSFlag_Titlebar JSFlag_Icon JSFlag_Active" style="width: 200px; height: 100px; top: 340px; left: 220px;">
<div class="JSBorder">
<div class="JSTitlebar">
<div class="JSIcon"></div>
<div class="JSTitle">Window+ThinBorder+Titlebar+Active+Icon</div>
</div>
Inner
</div>
</div>
<div class="JSWindow JSFlag_Border JSFlag_Titlebar JSFlag_Icon JSFlag_Active" style="width: 200px; height: 100px; top: 340px; left: 430px;">
<div class="JSBorder">
<div class="JSTitlebar">
<div class="JSIcon"></div>
<div class="JSTitle">Window+Border+Titlebar+Active+Icon</div>
</div>
Inner
</div>
</div>
<div class="JSWindow JSFlag_ThickBorder JSFlag_Titlebar JSFlag_Icon JSFlag_Active" style="width: 200px; height: 100px; top: 340px; left: 640px;">
<div class="JSBorder">
<div class="JSTitlebar">
<div class="JSIcon"></div>
<div class="JSTitle">Window+ThickBorder+Titlebar+Active+Icon</div>
</div>
Inner
</div>
</div>-->
</div>
</body>
</html>
Web-based/JS - JSDesktop/css/JSDesktop.css
+156
View File
@@ -0,0 +1,156 @@
html, body {
margin: 0px;
padding: 0px;
border: 0px;
width: 100%;
height: 100%;
}
body {
background: white;
}
/* JSDesktop Style: Default */
.JSDesktop {
width: 100%;
height: 100%;
background: rgb(58, 110, 165);
position: relative;
overflow: auto;
}
/* Substyle: Make everything follow actual sizes. Stupid Box-Model. */
.JSDesktop * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* JSWindow Style: Normal
** Possible Flags: **
* + Active - State set when the window is topmost object. (Usually means in use)
* + Titlebar - Show Titlebar.
* + Icon - Show Window Icon (Requires Titlebar).
* + ThinBorder - Show 1px thick border.
* + Border - Show 2px thick border.
* + ThickBorder - Show 3px thick border.
*/
.JSDesktop .JSWindow {
background: rgb(212, 208, 200);
border-color: rgb(212, 208, 200) rgb(64, 64, 64) rgb(64, 64, 64) rgb(212, 208, 200);
border-style: solid;
border-width: 0px;
color: black;
float: left;
font-family: "Segoe UI";
font-size: 8pt;
margin: 0px;
padding: 0px;
position: absolute;
z-index: 0;
-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.19069);
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.19069);
}
.JSDesktop .JSWindow.JSFlag_Active {
-webkit-box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.38138);
box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.38138);
}
/* JSWindow Style: Border Enabled*/
.JSDesktop .JSWindow.JSFlag_Border,
.JSDesktop .JSWindow.JSFlag_ThickBorder {
border-width: 1px;
}
/* JSBorder Style: Disabled */
.JSDesktop .JSWindow .JSBorder {
border-color: rgb(255, 255, 255) rgb(128, 128, 128) rgb(128, 128, 128) rgb(255, 255, 255);
border-style: solid;
border-width: 0px;
height: 100%;
width: 100%;
}
/* JSBorder Style: Enabled & Thin */
.JSDesktop .JSWindow.JSFlag_ThinBorder .JSBorder {
border-width: 1px;
}
/* JSBorder Style: Enabled */
.JSDesktop .JSWindow.JSFlag_Border .JSBorder {
border-width: 1px;
padding: 2px;
}
/* JSBorder Style: Enabled & Thick */
.JSDesktop .JSWindow.JSFlag_ThickBorder .JSBorder {
border-width: 2px;
padding: 2px;
}
/* JSTitlebar Style: Disabled */
.JSDesktop .JSWindow .JSTitlebar {
display: none;
height: 0px;
width: auto;
overflow: hidden;
white-space: nowrap;
}
/* JSTitlebar Style: Enabled */
.JSDesktop .JSWindow.JSFlag_Titlebar .JSTitlebar {
background: rgb(128,128,128);
background: -moz-linear-gradient(left, rgb(128,128,128) 0%, rgb(192,192,192) 100%);
background: -ms-linear-gradient(left, rgb(128,128,128) 0%,rgb(192,192,192) 100%);
background: -o-linear-gradient(left, rgb(128,128,128) 0%,rgb(192,192,192) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(128,128,128)), color-stop(100%,rgb(192,192,192)));
background: -webkit-linear-gradient(left, rgb(128,128,128) 0%,rgb(192,192,192) 100%);
background: linear-gradient(to right, rgb(128,128,128) 0%,rgb(192,192,192) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#808080', endColorstr='#c0c0c0',GradientType=1 );
display: block;
height: 18px;
padding: 1px 2px;
}
/* JSTitlebar Style: Enabled & Active */
.JSDesktop .JSWindow.JSFlag_Titlebar.JSFlag_Active .JSTitlebar {
background: rgb(10,36,106);
background: -moz-linear-gradient(left, rgb(10,36,106) 0%, rgb(166,202,240) 100%);
background: -ms-linear-gradient(left, rgb(10,36,106) 0%,rgb(166,202,240) 100%);
background: -o-linear-gradient(left, rgb(10,36,106) 0%,rgb(166,202,240) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(10,36,106)), color-stop(100%,rgb(166,202,240)));
background: -webkit-linear-gradient(left, rgb(10,36,106) 0%,rgb(166,202,240) 100%);
background: linear-gradient(to right, rgb(10,36,106) 0%,rgb(166,202,240) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a246a', endColorstr='#a6caf0',GradientType=1 );
}
/* JSIcon: Disabled */
.JSDesktop .JSWindow .JSTitlebar .JSIcon {
display: none;
float: left;
width: 18px;
height: 18px;
background-repeat: no-repeat;
background-image: url('./../img/icon_application.png');
background-position: center center;
}
/* JSIcon: Enabled (via JSFlag_Icon) */
.JSDesktop .JSWindow.JSFlag_Titlebar.JSFlag_Icon .JSTitlebar .JSIcon {
display: inline;
}
/* JSTitle: Inactive Window */
.JSDesktop .JSWindow .JSTitlebar .JSTitle {
display: inline;
height: 18px;
white-space: nowrap;
text-overflow: ellipsis;
color: rgb(212, 208, 200);
font-weight: bold;
}
/* JSTitle: Active Window */
.JSDesktop .JSWindow.JSFlag_Active .JSTitlebar .JSTitle {
color: rgb(255, 255, 255);
}
Web-based/JS - JSDesktop/img/icon_application.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 464 B

Web-based/JS - JSDesktop/js/JSDesktop.js
+227
View File
@@ -0,0 +1,227 @@
// Enable binary notation.
Object.defineProperty(Number.prototype, 'b', {set:function(){return false;},get:function(){return parseInt(this, 2);}});
/* Set up usuable flags*/
JSFlags = new Array(
Window = new Array(
"Visible" = 1..b, //Window is visible.
"Maximized" = 10..b, //Window is maximized.
"Minimized" = 100..b, //Window is minimized.
"Active" = 1000..b, //Window is active/top-most.
"ThinBorder" = 10000..b, // Activates ThinBorder, if used in conjuction with Border will activate ThickBorder.
"Border" = 100000..b, // Activates Border, if used in conjuction with ThinBorder will activate ThickBorder.
"Titlebar" =
// Titlebar Features
"Titlebar" = ,
"Icon" = ,
"Draggable" = ,
// Internal Window States
"Active" = ,
)
);
/* JSDesktop Class */
/** Creates a new desktop.
* @param elElement Object: Either a parent or the desktop itself.
* @param tIsElementParent Boolean: Weether or not given element is the parent.
*/
function JSDesktop(elElement, tIsElementParent = false) {
// Prevent invalid use and crashes.
if (typeof(elElement) != "object") {
throw "elElement needs to be of type 'object'";
} else {
if (typeof(tIsElementParent) != "boolean") {
throw "tIsElementParent needs to be of type 'boolean'";
} else {
console.group(this); {
// Set a (virtual) type.
this.type = "JSDesktop";
// Check what the given element is.
if (tIsElementParent) { // Given element is parent.
console.debug("Recieved parent element, creating child...");
this.oElement = $(document.createElement("div"));
$(elElement).append(this.oElement);
} else { // Given element is us.
console.debug("Recieved our element...");
this.oElement = $(elElement);
}
console.debug("Setting element class to include JSDesktop...");
this.oElement.addClass("JSDesktop");
// Windows
console.debug("Creating window list...");
this.oWindowList = new Array();
} console.groupEnd();
}
}
}
/** Creates a new window and returns it's handle.
* @param iPosX Number: Position in pixels from left border of parent.
* @param iPosY Number: Position in pixels from top border of parent.
* @param iSizeX Number: Width in pixels.
* @param iSizeY Number: Height in pixels.
* @param tFlagsArr Array(Boolean): Array of Flags to apply to the window.
*/
JSDesktop.prototype.createWindow = function(iPosX, iPosY, iSizeX, iSizeY, tFlagsArr) {
var oWindow = new JSWindow(this.oElement);
oWindow.setPosition(iPosX, iPosY);
oWindow.setSize(iSizeX, iSizeY);
oWindow.setFlags(tFlagsArr);
this.oWindowList.push(oWindow); // Add the window to the desktop window list.
return oWindow;
}
/* JSWindow Class */
/** Creates a new window inside a parent.
* @param elParent Object: Parent Window or Desktop Element.
*/
function JSWindow(elParent) {
// Prevent invalid use and crashes.
if (typeof(elParent) != "object") {
throw "elParent needs to be of type jQuery Element";
} else {
console.group(this); {
// Set a (virtual) type.
this.type = "JSWindow";
// Remember our parent
this.oParent = $(elParent);
// Initialize variables
this.iPosition = new Array(2);
this.iSize = new Array(2);
this.iFlags = new Array();
// Create our window elements.
console.debug("Creating window element...");
this.oElement = $(document.createElement("div"));
this.oElement.addClass("JSWindow");
this.oParent.append(this.oElement);
console.group(this.oElement); {
console.debug("Creating border element...");
this.oElementBorder = $(document.createElement("div"));
this.oElementBorder.addClass("JSBorder");
this.oElement.append(this.oElementBorder);
console.group(this.oElementBorder); {
console.debug("Creating titlebar element...");
this.oElementTitlebar = $(document.createElement("div"));
this.oElementTitlebar.addClass("JSTitlebar");
this.oElementBorder.append(this.oElementTitlebar);
console.group(this.oElementTitlebar); {
console.debug("Creating icon element...");
this.oElementTitlebarIcon = $(document.createElement("img"));
this.oElementTitlebarIcon.addClass("JSIcon");
this.oElementTitlebar.append(this.oElementTitlebarIcon);
console.debug("Creating title element...");
this.oElementTitlebarTitle = $(document.createElement("div"));
this.oElementTitlebarTitle.addClass("JSTitle");
this.oElementTitlebar.append(this.oElementTitlebarTitle);
console.debug("Creating control elements...");
this.oElementTitlebarControls = $(document.createElement("div"));
this.oElementTitlebarControls.addClass("JSControls");
this.oElementTitlebar.append(this.oElementTitlebarControls);
} console.groupEnd();
} console.groupEnd();
} console.groupEnd();
} console.groupEnd();
}
}
/** Sets the windows position.
* @param iPositionX Number: Position from left border of parent in pixels.
* @param iPositionY Number: Position from top border of parent in pixels.
*/
JSWindow.prototype.setPosition = function(iPositionX, iPositionY) {
this.iPosition[0] = (typeof(iPositionX) == "number" ? iPositionX : this.iPosition[0]);
this.iPosition[1] = (typeof(iPositionY) == "number" ? iPositionY : this.iPosition[1]);
// Apply the css changes
this.oElement.css("top", this.iPosition[0] + "px");
this.oElement.css("left", this.iPosition[1] + "px");
}
/** Gets the windows position.
* @return Array(Number, Number): Position from left and top border of parent in pixels.
*/
JSWindow.prototype.getPosition = function() {
return [this.iPosition[0], this.iPosition[1]];
}
/** Sets the windows size.
* @param iSizeX Number: Width in pixels.
* @param iSizeY Number: Height in pixels.
*/
JSWindow.prototype.setSize = function(iSizeX, iSizeY) {
this.iSize[0] = (typeof(iSizeX) == "number" ? iSizeX : this.iSize[0]);
this.iSize[1] = (typeof(iSizeY) == "number" ? iSizeY : this.iSize[1]);
// Apply the css changes
this.oElement.css("width", this.iSize[0] + "px");
this.oElement.css("height", this.iSize[1] + "px");
}
/** Gets the windows size.
* @return Array(Number, Number): Width and Height in pixels.
*/
JSWindow.prototype.getSize = function() {
return [this.iSize[0], this.iSize[1]];
}
JSWindow.prototype.setFlags = function(tFlagsArr) {
// Prevent invalid use and crashes.
if (Array.isArray(tFlagsArr)) {
}
}
/* Prevent non-Firebug users from getting errors */
if (typeof('console') == 'undefined') {
console = {};
console.log = function(){};
console.debug = function(){};
console.info = function(){};
console.warn = function(){};
console.error = function(){};
console.assert = function(){};
console.clear = function(){};
console.dir = function(){};
console.dirxml = function(){};
console.trace = function(){};
console.group = function(){};
console.groupCollapsed = function(){};
console.groupEnd = function(){};
console.time = function(){};
console.timeEnd = function(){};
console.timeStamp = function(){};
console.profile = function(){};
console.profileEnd = function(){};
console.count = function(){};
console.exception = function(){};
console.table = function(){};
}
console.log("Hello?");
/* Seting up Desktops */
$(document).ready(function(event) {
console.group(this);
console.debug("Finding JSDesktops...");
var elDesktops = $("#JSDesktop");
elDesktops.each(function(iIndex, elDesktop) {
console.debug("Starting Desktop '" + elDesktop.getAttribute("name") + "(" + iIndex + ")'...");
var oDesktop = new JSDesktop(elDesktop);
oDesktop.createWindow(80, 100, 400, 200);
});
console.groupEnd();
});