Add JSDE
Sven Slootweg
11 years ago
parent
10217bf4cb
commit
451c80b605
@ -0,0 +1,16 @@
|
||||
<?php
|
||||
/*
|
||||
* openNG is more free software. It is licensed under the WTFPL, which
|
||||
* allows you to do pretty much anything with it, without having to
|
||||
* ask permission. Commercial use is allowed, and no attribution is
|
||||
* required. We do politely request that you share your modifications
|
||||
* to benefit other developers, but you are under no enforced
|
||||
* obligation to do so :)
|
||||
*
|
||||
* Please read the accompanying LICENSE document for the full WTFPL
|
||||
* licensing text.
|
||||
*/
|
||||
|
||||
if(!isset($_APP)) { die("Unauthorized."); }
|
||||
|
||||
echo(NewTemplater::Render("index", $locale->strings, array()));
|
||||
@ -0,0 +1,104 @@
|
||||
html, body
|
||||
{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
position: fixed;
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#jsde_templates
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* MDIWindow Styling | Generic */
|
||||
|
||||
div.window-wrapper
|
||||
{
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
div.window-title
|
||||
{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
cursor: default;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
div.window-outer
|
||||
{
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
div.window-close
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
|
||||
div.window-close a
|
||||
{
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 2px;
|
||||
display: block;
|
||||
padding: 1px 4px;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* MDIWindow Styling | Normal state */
|
||||
|
||||
|
||||
div.window-styled div.window-inner
|
||||
{
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
||||
/* MDIWindow Styling | Dragging state */
|
||||
|
||||
|
||||
div.window-dragged div.window-inner
|
||||
{
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
div.workspace-bar
|
||||
{
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
a.workspace-tab
|
||||
{
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
div.window-resizer
|
||||
{
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
bottom: -6px;
|
||||
right: -6px;
|
||||
cursor: se-resize;
|
||||
}
|
||||
@ -0,0 +1,175 @@
|
||||
html,body
|
||||
{
|
||||
font-family: 'Varela Round', sans-serif, Trebuchet MS;
|
||||
background-color: silver;
|
||||
background-image: url(images/flower.jpg);
|
||||
background-attachment:fixed;
|
||||
background-position:center;
|
||||
}
|
||||
|
||||
/* Temporary styles */
|
||||
|
||||
div#make-window
|
||||
{
|
||||
background-color: white;
|
||||
border: 1px solid gray;
|
||||
padding: 14px;
|
||||
width: 350px;
|
||||
filter:alpha(opacity=85);
|
||||
opacity:0.85;
|
||||
}
|
||||
|
||||
/* MDIWindow Styling | Generic */
|
||||
|
||||
div.window-title
|
||||
{
|
||||
-webkit-border-top-left-radius: 10px;
|
||||
-webkit-border-top-right-radius: 10px;
|
||||
-moz-border-radius-topleft: 10px;
|
||||
-moz-border-radius-topright: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
height: 16px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
padding: 4px;
|
||||
padding-left: 7px;
|
||||
border-top: 1px solid #6262FF;
|
||||
border-right: 1px solid #6262FF;
|
||||
border-left: 1px solid #6262FF;
|
||||
}
|
||||
|
||||
div.window-outer
|
||||
{
|
||||
font-size: 13px;
|
||||
top: 25px;
|
||||
border-bottom: 1px solid gray;
|
||||
border-right: 1px solid gray;
|
||||
border-left: 1px solid gray;
|
||||
}
|
||||
|
||||
div.window-inner
|
||||
{
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
div.window-close a
|
||||
{
|
||||
color: white;
|
||||
border: 1px solid #014D8C;
|
||||
}
|
||||
|
||||
div.window-close a:hover
|
||||
{
|
||||
background-color: #014D8C;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
/* MDIWindow Styling | Normal state */
|
||||
|
||||
div.window-styled div.window-title, div.window-styled div.window-outer
|
||||
{
|
||||
-webkit-box-shadow: 5px 5px 10px #1a1a1a;
|
||||
-moz-box-shadow: 5px 5px 10px #1a1a1a;
|
||||
box-shadow: 5px 5px 10px #1a1a1a;
|
||||
}
|
||||
|
||||
div.window-styled div.window-title
|
||||
{
|
||||
background-image: -webkit-gradient(
|
||||
linear,
|
||||
left bottom,
|
||||
left top,
|
||||
color-stop(0, rgb(0,87,179)),
|
||||
color-stop(1, rgb(0,153,255))
|
||||
);
|
||||
background-image: -moz-linear-gradient(
|
||||
center bottom,
|
||||
rgb(0,87,179) 0%,
|
||||
rgb(0,153,255) 100%
|
||||
);
|
||||
|
||||
filter:alpha(opacity=85);
|
||||
opacity:0.85;
|
||||
}
|
||||
|
||||
div.window-styled div.window-outer
|
||||
{
|
||||
background-color: #F7F7F0;
|
||||
filter:alpha(opacity=95);
|
||||
opacity:0.95;
|
||||
}
|
||||
|
||||
|
||||
/* MDIWindow Styling | Dragging state */
|
||||
|
||||
div.window-dragged div.window-title
|
||||
{
|
||||
background-color: #0070D5;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
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;
|
||||
width: 48px;
|
||||
-webkit-border-top-left-radius: 10px;
|
||||
-webkit-border-top-right-radius: 10px;
|
||||
-moz-border-radius-topleft: 10px;
|
||||
-moz-border-radius-topright: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
border: 1px solid black;
|
||||
background-color: #E9E9E9;
|
||||
padding-top: 6px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
color: black;
|
||||
margin-top: 10px;
|
||||
filter:alpha(opacity=95);
|
||||
opacity:0.95;
|
||||
}
|
||||
|
||||
a.workspace-tab:hover
|
||||
{
|
||||
background-color: #DADADA;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
a.workspace-tab-active
|
||||
{
|
||||
font-weight: bold;
|
||||
background-color: #B9B9B9;
|
||||
color: #BC0000;
|
||||
}
|
||||
|
||||
a.workspace-tab-popup
|
||||
{
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
a.workspace-tab-add
|
||||
{
|
||||
background-color: #C8C8C8;
|
||||
filter:alpha(opacity=85);
|
||||
opacity:0.85;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 399 KiB |
@ -0,0 +1,240 @@
|
||||
(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);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,78 @@
|
||||
<!doctype>
|
||||
<html>
|
||||
<head>
|
||||
<title>openNG</title>
|
||||
<link rel="stylesheet" href="/static/css/jsde.base.css">
|
||||
<link rel="stylesheet" href="/static/css/jsde.style.css">
|
||||
<script src="/static/js/jquery-1.10.2.min.js"></script>
|
||||
<script src="/static/js/jsde.js"></script>
|
||||
<style>
|
||||
body
|
||||
{
|
||||
background-image: url(/static/images/background.jpg);
|
||||
}
|
||||
|
||||
#logo
|
||||
{
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
right: 32px;
|
||||
top: 16px;
|
||||
color: white;
|
||||
font-size: 64px;
|
||||
font-family: 'Istok Web';
|
||||
font-weight: bold;
|
||||
color: #E2FFFF;
|
||||
text-shadow: 0px 0px 1px #CEE3F9;
|
||||
-webkit-text-shadow: 0px 0px 1px #CEE3F9;
|
||||
-moz-text-shadow: 0px 0px 1px #CEE3F9;
|
||||
-o-text-shadow: 0px 0px 1px #CEE3F9;
|
||||
-ms-text-shadow: 0px 0px 1px #CEE3F9;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Istok+Web:400,700">
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,700">
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Varela+Round">
|
||||
<script>
|
||||
$(function(){
|
||||
new JsdeWindow({
|
||||
width: 640,
|
||||
height: 480,
|
||||
x: ($(window).width() / 2) - (640 / 2),
|
||||
y: ($(window).height() / 2) - (480 / 2),
|
||||
title: "Welcome!",
|
||||
contents: "Some kind of introduction should probably go here..."
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="logo">openNG</div>
|
||||
<!-- <div class="workspace-bar">
|
||||
<span id="workspace-tab-list">
|
||||
|
||||
</span>
|
||||
<a class="workspace-tab workspace-tab-add" id="workspace_tab_add" href="#">+</a>
|
||||
</div> -->
|
||||
<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>
|
||||
Loading…
Reference in New Issue