Browse Source

Update jQuery version and turn code into something working

develop
Sven Slootweg 9 years ago
parent
commit
d49a7f1293
  1. 17
      base.css
  2. 14
      index.html
  3. 22
      jquery.js
  4. 89
      jsde.js
  5. 19
      style.css

17
base.css

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

14
index.html

@ -22,6 +22,14 @@
height: 300,
title: "Hi"
});
new JsdeWindow({
x: 20,
y: 20,
width: 400,
height: 300,
title: "Whee!"
});
})
</script>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
@ -50,10 +58,12 @@ lol&lt;hr&gt;
</span>
<a class="workspace-tab workspace-tab-add" id="workspace_tab_add" href="#">+</a>
</div>
<div id="templates">
<div id="jsde_templates">
<div class="template_window window-wrapper window-styled">
<div class="window-title">
Test title
<span class="window-title-inner">
Test title
</span>
<div class="window-close">
<a href="#">X</a>
</div>

22
jquery.js
File diff suppressed because it is too large
View File

89
jsde.js

@ -1,34 +1,34 @@
/**
* .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 */
(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');
};
})(jQuery);
var next_z_index = 1;
var currently_dragged_window = null;
var currently_dragging = true;
var currently_dragging = false;
var drag_start = {x: 0, y: 0};
$(function(){
$("body").mousemove(_HandleMouseMove);
$("body").mouseup(_HandleMouseUp);
})
function JsdeWindow(options)
{
$.extend(this, options);
this._outer = $("#templates .template_window").clone()[0];
this._outer = $("#jsde_templates .template_window").clone()[0];
this._inner = $(this._outer).children(".window-inner")[0];
this._title = $(this._outer).children(".window-title")[0];
@ -56,13 +56,20 @@ function JsdeWindow(options)
this.SetSize(this.width, this.height);
$(this._outer).click(this._HandleClick);
$(this._outer).mousedown(this._HandleMouseDown);
$(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.BringToForeground();
}
JsdeWindow.prototype.BringToForeground = function()
{
this.element.css({"z-index": next_z_index})
$(this._outer).css({"z-index": next_z_index})
next_z_index++;
return this;
}
@ -91,6 +98,11 @@ JsdeWindow.prototype.SetPosition = function(x, 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;
@ -117,15 +129,34 @@ JsdeWindow.prototype.Show = function()
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._HandleMouseUp = function(event)
function _HandleMouseUp(event)
{
if(currently_dragging === true)
{
currently_dragging = false;
$("body").enableSelection();
$(currently_dragged_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);
}
}

19
style.css

@ -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