From f4fd1b68fb9dd4485d30f5aee82998854cc24095 Mon Sep 17 00:00:00 2001 From: Sven Slootweg Date: Sun, 7 Jul 2013 19:45:13 +0200 Subject: [PATCH] Fix demo form, and add a .getWindow method --- docs/api.html | 2 +- docs/api.zpy | 7 +++++++ index.html | 19 +++++++++++++++---- jsde.js | 7 ++++++- 4 files changed, 29 insertions(+), 6 deletions(-) diff --git a/docs/api.html b/docs/api.html index 4663487..e67224d 100644 --- a/docs/api.html +++ b/docs/api.html @@ -156,6 +156,6 @@ -

JSDE API Reference

Table of contents

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
Important: Do not use this to set the window contents, use JsdeWindow.SetContents() instead!
Holds a reference to the DOM element containing the window contents.

Member functions

JsdeWindow.SetPosition(x, y)
Sets the current position of a window.
x
The X coordinate.
y
The Y coordinate.
Example: Setting the window position
Code:
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.
Example: Setting the window size
Code:
win.SetSize(400, 350);
JsdeWindow.GetTitle()
Returns the current title of the window.
Example: Retrieving the window title
Code:
console.log(win.GetTitle());
Output:
"Example window title"
JsdeWindow.SetTitle(title)
Sets the current title of the window.
title
The title to set.
Example: Setting the window title
Code:
win.SetTitle("Fancy new window title");
JsdeWindow.GetContents()
Returns the current contents of the window.
Example: Retrieving the window contents
Code:
console.log(win.GetContents());
Output:
"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.
Example: Setting the window contents
Code:
win.SetContents("These are <em>new</em> hypothetical contents for a window.");
+

JSDE API Reference

Table of contents

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
Important: Do not use this to set the window contents, use JsdeWindow.SetContents() instead!
Holds a reference to the DOM element containing the window contents.

Member functions

JsdeWindow.SetPosition(x, y)
Sets the current position of a window.
x
The X coordinate.
y
The Y coordinate.
Example: Setting the window position
Code:
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.
Example: Setting the window size
Code:
win.SetSize(400, 350);
JsdeWindow.GetTitle()
Returns the current title of the window.
Example: Retrieving the window title
Code:
console.log(win.GetTitle());
Output:
"Example window title"
JsdeWindow.SetTitle(title)
Sets the current title of the window.
title
The title to set.
Example: Setting the window title
Code:
win.SetTitle("Fancy new window title");
JsdeWindow.GetContents()
Returns the current contents of the window.
Example: Retrieving the window contents
Code:
console.log(win.GetContents());
Output:
"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.
Example: Setting the window contents
Code:
win.SetContents("These are <em>new</em> hypothetical contents for a window.");
diff --git a/docs/api.zpy b/docs/api.zpy index b415ff1..cb9dcc9 100644 --- a/docs/api.zpy +++ b/docs/api.zpy @@ -2,6 +2,13 @@ {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 diff --git a/index.html b/index.html index 17ad415..5b5d1c2 100755 --- a/index.html +++ b/index.html @@ -24,12 +24,23 @@ }); new JsdeWindow({ - x: 20, - y: 20, + 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() + }); + }); }) @@ -42,7 +53,7 @@ 733, 85
873, 77

X:
Y:
- Title:
+ Title:
Contents (HTML):

Width:
Height:
- +
diff --git a/jsde.js b/jsde.js index 98f7add..ed8deba 100755 --- a/jsde.js +++ b/jsde.js @@ -12,6 +12,10 @@ .css('user-select', 'text') .off('selectstart'); }; + + $.fn.getWindow = function() { + return this.closest(".window-inner").data("jsde-window"); + }; })(jQuery); var next_z_index = 1; @@ -29,7 +33,7 @@ function JsdeWindow(options) $.extend(this, options); this._outer = $("#jsde_templates .template_window").clone()[0]; - this._inner = $(this._outer).children(".window-inner")[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) @@ -126,6 +130,7 @@ JsdeWindow.prototype.SetSize = function(width, height) JsdeWindow.prototype.SetContents = function(html) { + console.log("set contents", html, this); return $(this._inner).html(html); }