updated docs and dist

This commit is contained in:
vieron
2012-07-23 22:08:09 +02:00
parent 33b8f206cf
commit aa939d8bf7
15 changed files with 1387 additions and 769 deletions

View File

@@ -45,10 +45,10 @@
.gridster .dragging {
z-index: 10!important;
-webkit-transition: none!important;
-moz-transition: none!important;
-o-transition: none!important;
transition: none!important;
-webkit-transition: all 0s !important;
-moz-transition: all 0s !important;
-o-transition: all 0s !important;
transition: all 0s !important;
}
/* Uncomment this if you set helper : "clone" in draggable options */

File diff suppressed because it is too large Load Diff

View File

@@ -1,3 +1,3 @@
/*! gridster.js - v0.1.0 - 2012-07-23
* https://github.com/ducksboard/gridster.js
* Copyright (c) 2012 ducksboard; Licensed MIT, GPL */.gridster{position:relative}.gridster>*{margin:0 auto;-webkit-transition:height .4s;-moz-transition:height .4s;-o-transition:height .4s;-ms-transition:height .4s;transition:height .4s}.gridster .gs_w{z-index:2;position:absolute}.ready .gs_w:not(.preview-holder){-webkit-transition:opacity .3s,left .3s,top .3s;-moz-transition:opacity .3s,left .3s,top .3s;-o-transition:opacity .3s,left .3s,top .3s;transition:opacity .3s,left .3s,top .3s}.gridster .preview-holder{z-index:1;position:absolute;background-color:#fff;border-color:#fff;opacity:.3}.gridster .player-revert{z-index:10!important;-webkit-transition:left .3s,top .3s!important;-moz-transition:left .3s,top .3s!important;-o-transition:left .3s,top .3s!important;transition:left .3s,top .3s!important}.gridster .dragging{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;transition:none!important}
* Copyright (c) 2012 ducksboard; Licensed MIT, GPL */.gridster{position:relative}.gridster>*{margin:0 auto;-webkit-transition:height .4s;-moz-transition:height .4s;-o-transition:height .4s;-ms-transition:height .4s;transition:height .4s}.gridster .gs_w{z-index:2;position:absolute}.ready .gs_w:not(.preview-holder){-webkit-transition:opacity .3s,left .3s,top .3s;-moz-transition:opacity .3s,left .3s,top .3s;-o-transition:opacity .3s,left .3s,top .3s;transition:opacity .3s,left .3s,top .3s}.gridster .preview-holder{z-index:1;position:absolute;background-color:#fff;border-color:#fff;opacity:.3}.gridster .player-revert{z-index:10!important;-webkit-transition:left .3s,top .3s!important;-moz-transition:left .3s,top .3s!important;-o-transition:left .3s,top .3s!important;transition:left .3s,top .3s!important}.gridster .dragging{z-index:10!important;-webkit-transition:all 0s!important;-moz-transition:all 0s!important;-o-transition:all 0s!important;transition:all 0s!important}

File diff suppressed because one or more lines are too long

View File

@@ -1,8 +1,8 @@
YUI.add("yuidoc-meta", function(Y) {
Y.YUIDoc = { meta: {
"classes": [
"Collision",
"Coords",
"Collision\n\nDetects collisions between a DOM element against other DOM elements or\nCoords objects.",
"Coords\n\nCreates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)\nto simulate DOM elements on the screen.\nCoords is used by Gridster to create a faux grid with any DOM element can\ncollide.",
"Draggable",
"Gridster"
],

View File

@@ -2,7 +2,10 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>Collision</title>
<title>Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects.</title>
<link rel="stylesheet" href="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.5.1&#x2F;build&#x2F;cssgrids&#x2F;cssgrids-min.css">
<link rel="stylesheet" href="..&#x2F;assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="..&#x2F;assets/css/main.css" id="site_styles">
@@ -42,9 +45,25 @@
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="..&#x2F;classes/Collision.html">Collision</a></li>
<li><a href="..&#x2F;classes/Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects..html">Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects.</a></li>
<li><a href="..&#x2F;classes/Coords.html">Coords</a></li>
<li><a href="..&#x2F;classes/Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide..html">Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide.</a></li>
<li><a href="..&#x2F;classes/Draggable.html">Draggable</a></li>
@@ -89,7 +108,10 @@
<div class="apidocs">
<div id="docs-main">
<div class="content">
<h1>Collision Class</h1>
<h1>Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects. Class</h1>
<div class="box meta">
<div class="uses">
@@ -106,7 +128,7 @@
<div class="foundat">
Defined in: <a href="..&#x2F;files&#x2F;src_jquery.collision.js.html#l22"><code>src&#x2F;jquery.collision.js:22</code></a>
Defined in: <a href="..&#x2F;files&#x2F;src_jquery.collision.js.html#l19"><code>src&#x2F;jquery.collision.js:19</code></a>
</div>
@@ -118,14 +140,20 @@
<div class="box intro">
<p>Collision</p>
</div>
<div class="constructor">
<h2>Constructor</h2>
<div id="method_Collision" class="method item">
<h3 class="name"><code>Collision</code></h3>
<div id="method_Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects." class="method item">
<h3 class="name"><code>Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects.</code></h3>
<div class="args">
@@ -133,7 +161,7 @@
<li class="arg">
<code>element</code>
<code>el</code>
</li>
@@ -182,7 +210,7 @@
<a href="..&#x2F;files&#x2F;src_jquery.collision.js.html#l22"><code>src&#x2F;jquery.collision.js:22</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.collision.js.html#l19"><code>src&#x2F;jquery.collision.js:19</code></a>
</p>
@@ -204,14 +232,14 @@
<li class="param">
<code class="param-name">element</code>
<code class="param-name">el</code>
<span class="type">HTMLElement</span>
<div class="param-description">
<p>An Attribute name or object property path</p>
<p>The jQuery wrapped HTMLElement.</p>
</div>
@@ -220,13 +248,14 @@
<li class="param">
<code class="param-name">colliders</code>
<span class="type">String | HTMLElement | Array</span>
<span class="type">HTMLElement | Array</span>
<div class="param-description">
<p>An Attribute name or object property path</p>
<p>Can be a jQuery collection
of HTMLElements or an Array of Coords instances.</p>
</div>
@@ -242,26 +271,13 @@
<div class="param-description">
<p>An Attribute name or object property path</p>
<p>An Object with all options you want to
overwrite:</p>
</div>
<ul class="params-list">
<li class="param">
<code class="param-name optional">[on_overlap]</code>
<span class="type">Function</span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>An Attribute name or object property path</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[on_overlap_start]</code>
@@ -270,7 +286,8 @@
<div class="param-description">
<p>An Attribute name or object property path</p>
<p>Executes a function the first
time each <code>collider</code> is overlapped.</p>
</div>
@@ -284,7 +301,23 @@
<div class="param-description">
<p>An Attribute name or object property path</p>
<p>Executes a function when a
<code>collider</code> is no longer collided.</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[on_overlap]</code>
<span class="type">Function</span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>Executes a function when the
mouse is moved during the collision.</p>
</div>
@@ -307,7 +340,7 @@
<span class="type">Object</span>:
dasdasdadasd
Collision instance.
</div>
</div>

View File

@@ -2,7 +2,12 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>Coords</title>
<title>Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide.</title>
<link rel="stylesheet" href="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.5.1&#x2F;build&#x2F;cssgrids&#x2F;cssgrids-min.css">
<link rel="stylesheet" href="..&#x2F;assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="..&#x2F;assets/css/main.css" id="site_styles">
@@ -42,9 +47,25 @@
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="..&#x2F;classes/Collision.html">Collision</a></li>
<li><a href="..&#x2F;classes/Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects..html">Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects.</a></li>
<li><a href="..&#x2F;classes/Coords.html">Coords</a></li>
<li><a href="..&#x2F;classes/Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide..html">Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide.</a></li>
<li><a href="..&#x2F;classes/Draggable.html">Draggable</a></li>
@@ -89,7 +110,12 @@
<div class="apidocs">
<div id="docs-main">
<div class="content">
<h1>Coords Class</h1>
<h1>Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide. Class</h1>
<div class="box meta">
@@ -109,14 +135,24 @@
<div class="box intro">
<p>Coords</p>
</div>
<div class="constructor">
<h2>Constructor</h2>
<div id="method_Coords" class="method item">
<h3 class="name"><code>Coords</code></h3>
<div id="method_Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide." class="method item">
<h3 class="name"><code>Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide.</code></h3>
<div class="args">
@@ -133,6 +169,10 @@
<span class="returns-inline">
<span class="type">Object</span>
</span>
@@ -186,7 +226,8 @@
<div class="param-description">
<p>HTMLElement or a literal Object with the left, top, width and height properties.</p>
<p>The jQuery HTMLElement or a object with: left,
top, width and height properties.</p>
</div>
@@ -197,6 +238,19 @@
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<span class="type">Object</span>:
Coords instance.
</div>
</div>
</div>

View File

@@ -42,9 +42,25 @@
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="..&#x2F;classes/Collision.html">Collision</a></li>
<li><a href="..&#x2F;classes/Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects..html">Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects.</a></li>
<li><a href="..&#x2F;classes/Coords.html">Coords</a></li>
<li><a href="..&#x2F;classes/Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide..html">Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide.</a></li>
<li><a href="..&#x2F;classes/Draggable.html">Draggable</a></li>
@@ -109,7 +125,7 @@
<div class="box intro">
<p>Draggable</p>
</div>
@@ -119,10 +135,30 @@
<h3 class="name"><code>Draggable</code></h3>
<span class="paren">()</span>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>el</code>
</li>
<li class="arg">
<code class="optional">[options]</code>
</li>
</ul><span class="paren">)</span>
</div>
<span class="returns-inline">
<span class="type">Object</span>
</span>
@@ -162,7 +198,170 @@
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">el</code>
<span class="type">HTMLElement</span>
<div class="param-description">
<p>The HTMLelement that contains all the widgets
to be dragged.</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[options]</code>
<span class="type">Object</span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>An Object with all options you want to
overwrite:</p>
</div>
<ul class="params-list">
<li class="param">
<code class="param-name optional">[items]</code>
<span class="type">HTMLElement | String</span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>Define who will
be the draggable items. Can be a CSS Selector String or a
collection of HTMLElements.</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[distance]</code>
<span class="type">Number</span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>Distance in pixels after mousedown
the mouse must move before dragging should start.</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[limit]</code>
<span class="type">Boolean</span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>Constrains dragging to the width of
the container</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[offset_left]</code>
<span class="type">Offset_left</span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>Offset added to the item
that is being dragged.</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[drag]</code>
<span class="type">Number</span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>Executes a callback when the mouse is
moved during the dragging.</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[start]</code>
<span class="type">Number</span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>Executes a callback when the drag
starts.</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[stop]</code>
<span class="type">Number</span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>Executes a callback when the drag stops.</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<span class="type">Object</span>:
Returns <code>el</code>.
</div>
</div>

View File

@@ -42,9 +42,25 @@
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="..&#x2F;classes/Collision.html">Collision</a></li>
<li><a href="..&#x2F;classes/Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects..html">Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects.</a></li>
<li><a href="..&#x2F;classes/Coords.html">Coords</a></li>
<li><a href="..&#x2F;classes/Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide..html">Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide.</a></li>
<li><a href="..&#x2F;classes/Draggable.html">Draggable</a></li>
@@ -96,7 +112,7 @@
Uses
<ul class="inline commas">
<li><a href="Coords.html">Coords</a></li>
<li><a href="Draggable.html">Draggable</a></li>
<li><a href="Collision.html">Collision</a></li>
@@ -145,6 +161,12 @@
</li>
<li class="arg">
<code class="optional">[avoid_overlapped_widgets]</code>
</li>
</ul><span class="paren">)</span>
</div>
@@ -393,8 +415,8 @@
<div class="param-description">
<p>An Object with all options for
jQuery UI Draggable you want to overwrite. See
http://jqueryui.com/demos/draggable/ for more info.</p>
Draggable class you want to overwrite. See Draggable docs for more
info.</p>
</div>
@@ -404,6 +426,24 @@
</li>
<li class="param">
<code class="param-name optional">[avoid_overlapped_widgets]</code>
<span class="type">Boolean</span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>Avoid that widgets loaded
from the DOM can be overlapped. It is helpful if the positions were
bad stored in the database or if there was any conflict.</p>
</div>
</li>
</ul>
</div>
@@ -962,7 +1002,7 @@
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l2004"><code>src&#x2F;jquery.gridster.js:2004</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l2030"><code>src&#x2F;jquery.gridster.js:2030</code></a>
</p>
@@ -1072,7 +1112,7 @@
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l342"><code>src&#x2F;jquery.gridster.js:342</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l349"><code>src&#x2F;jquery.gridster.js:349</code></a>
</p>
@@ -1205,7 +1245,7 @@
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l129"><code>src&#x2F;jquery.gridster.js:129</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l133"><code>src&#x2F;jquery.gridster.js:133</code></a>
</p>
@@ -1340,7 +1380,7 @@
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1048"><code>src&#x2F;jquery.gridster.js:1048</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1056"><code>src&#x2F;jquery.gridster.js:1056</code></a>
</p>
@@ -1458,7 +1498,7 @@
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1455"><code>src&#x2F;jquery.gridster.js:1455</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1469"><code>src&#x2F;jquery.gridster.js:1469</code></a>
</p>
@@ -1595,7 +1635,7 @@ upper row possible.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1097"><code>src&#x2F;jquery.gridster.js:1097</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1105"><code>src&#x2F;jquery.gridster.js:1105</code></a>
</p>
@@ -1713,7 +1753,7 @@ upper row possible.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1627"><code>src&#x2F;jquery.gridster.js:1627</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1644"><code>src&#x2F;jquery.gridster.js:1644</code></a>
</p>
@@ -1725,8 +1765,8 @@ upper row possible.</p>
<div class="description">
<p>Check if it's possible to move a widget to a specific col/row. It takes
into account the dimensions (<code>size_y</code> and <code>size_x</code> attrs. of the grid coords
object) the widget occupies.</p>
into account the dimensions (<code>size_y</code> and <code>size_x</code> attrs. of the grid
coords object) the widget occupies.</p>
</div>
@@ -1840,7 +1880,7 @@ into account the dimensions (<code>size_y</code> and <code>size_x</code> attrs.
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l364"><code>src&#x2F;jquery.gridster.js:364</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l371"><code>src&#x2F;jquery.gridster.js:371</code></a>
</p>
@@ -1851,7 +1891,7 @@ into account the dimensions (<code>size_y</code> and <code>size_x</code> attrs.
</div>
<div class="description">
<p>Make widgets draggable. It Wraps the jQuery UI Draggable Plugin.</p>
<p>Make widgets draggable.</p>
</div>
@@ -1911,7 +1951,7 @@ into account the dimensions (<code>size_y</code> and <code>size_x</code> attrs.
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1590"><code>src&#x2F;jquery.gridster.js:1590</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1606"><code>src&#x2F;jquery.gridster.js:1606</code></a>
</p>
@@ -1982,7 +2022,7 @@ into account the dimensions (<code>size_y</code> and <code>size_x</code> attrs.
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l105"><code>src&#x2F;jquery.gridster.js:105</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l108"><code>src&#x2F;jquery.gridster.js:108</code></a>
</p>
@@ -2053,7 +2093,7 @@ into account the dimensions (<code>size_y</code> and <code>size_x</code> attrs.
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l117"><code>src&#x2F;jquery.gridster.js:117</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l121"><code>src&#x2F;jquery.gridster.js:121</code></a>
</p>
@@ -2140,7 +2180,7 @@ into account the dimensions (<code>size_y</code> and <code>size_x</code> attrs.
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1730"><code>src&#x2F;jquery.gridster.js:1730</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1748"><code>src&#x2F;jquery.gridster.js:1748</code></a>
</p>
@@ -2268,7 +2308,7 @@ each one.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1751"><code>src&#x2F;jquery.gridster.js:1751</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1769"><code>src&#x2F;jquery.gridster.js:1769</code></a>
</p>
@@ -2396,7 +2436,7 @@ each one.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1770"><code>src&#x2F;jquery.gridster.js:1770</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1788"><code>src&#x2F;jquery.gridster.js:1788</code></a>
</p>
@@ -2442,7 +2482,8 @@ each one.</p>
<div class="param-description">
<p>The function to execute on each column iteration. The row number is passed as first argument.</p>
<p>The function to execute on each column
iteration. The row number is passed as first argument.</p>
</div>
@@ -2529,7 +2570,7 @@ each one.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1836"><code>src&#x2F;jquery.gridster.js:1836</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1855"><code>src&#x2F;jquery.gridster.js:1855</code></a>
</p>
@@ -2589,7 +2630,8 @@ each one.</p>
<div class="param-description">
<p>The function to execute on each widget
iteration. The value of <code>this</code> inside the function is the jQuery wrapped HTMLElement.</p>
iteration. The value of <code>this</code> inside the function is the jQuery
wrapped HTMLElement.</p>
</div>
@@ -2676,7 +2718,7 @@ iteration. The value of <code>this</code> inside the function is the jQuery wrap
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1852"><code>src&#x2F;jquery.gridster.js:1852</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1872"><code>src&#x2F;jquery.gridster.js:1872</code></a>
</p>
@@ -2736,7 +2778,8 @@ iteration. The value of <code>this</code> inside the function is the jQuery wrap
<div class="param-description">
<p>The function to execute on each widget
iteration. The value of <code>this</code> inside the function is the jQuery wrapped HTMLElement.</p>
iteration. The value of <code>this</code> inside the function is the jQuery wrapped
HTMLElement.</p>
</div>
@@ -2817,7 +2860,7 @@ iteration. The value of <code>this</code> inside the function is the jQuery wrap
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l2027"><code>src&#x2F;jquery.gridster.js:2027</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l2053"><code>src&#x2F;jquery.gridster.js:2053</code></a>
</p>
@@ -2927,7 +2970,7 @@ detect row or column that we want to go.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l2101"><code>src&#x2F;jquery.gridster.js:2101</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l2127"><code>src&#x2F;jquery.gridster.js:2127</code></a>
</p>
@@ -3015,7 +3058,7 @@ detect row or column that we want to go.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1941"><code>src&#x2F;jquery.gridster.js:1941</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1960"><code>src&#x2F;jquery.gridster.js:1960</code></a>
</p>
@@ -3134,7 +3177,7 @@ detect row or column that we want to go.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1702"><code>src&#x2F;jquery.gridster.js:1702</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1720"><code>src&#x2F;jquery.gridster.js:1720</code></a>
</p>
@@ -3228,7 +3271,7 @@ detect row or column that we want to go.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1868"><code>src&#x2F;jquery.gridster.js:1868</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1889"><code>src&#x2F;jquery.gridster.js:1889</code></a>
</p>
@@ -3309,7 +3352,7 @@ detect row or column that we want to go.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1667"><code>src&#x2F;jquery.gridster.js:1667</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1684"><code>src&#x2F;jquery.gridster.js:1684</code></a>
</p>
@@ -3320,7 +3363,8 @@ detect row or column that we want to go.</p>
</div>
<div class="description">
<p>Given the leftmost column returns all columns that are overlapping with the player.</p>
<p>Given the leftmost column returns all columns that are overlapping
with the player.</p>
</div>
@@ -3414,7 +3458,7 @@ detect row or column that we want to go.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1685"><code>src&#x2F;jquery.gridster.js:1685</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1703"><code>src&#x2F;jquery.gridster.js:1703</code></a>
</p>
@@ -3531,7 +3575,7 @@ detect row or column that we want to go.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1148"><code>src&#x2F;jquery.gridster.js:1148</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1158"><code>src&#x2F;jquery.gridster.js:1158</code></a>
</p>
@@ -3659,7 +3703,7 @@ the</code>upper<em>rows<code>array. Iteration starts from row specified in</code
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l2087"><code>src&#x2F;jquery.gridster.js:2087</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l2113"><code>src&#x2F;jquery.gridster.js:2113</code></a>
</p>
@@ -3730,7 +3774,7 @@ the</code>upper<em>rows<code>array. Iteration starts from row specified in</code
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1226"><code>src&#x2F;jquery.gridster.js:1226</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1236"><code>src&#x2F;jquery.gridster.js:1236</code></a>
</p>
@@ -3801,7 +3845,7 @@ the</code>upper<em>rows<code>array. Iteration starts from row specified in</code
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l975"><code>src&#x2F;jquery.gridster.js:975</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l985"><code>src&#x2F;jquery.gridster.js:985</code></a>
</p>
@@ -3888,7 +3932,7 @@ the</code>upper<em>rows<code>array. Iteration starts from row specified in</code
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l894"><code>src&#x2F;jquery.gridster.js:894</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l904"><code>src&#x2F;jquery.gridster.js:904</code></a>
</p>
@@ -4013,7 +4057,7 @@ the</code>upper<em>rows<code>array. Iteration starts from row specified in</code
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l913"><code>src&#x2F;jquery.gridster.js:913</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l923"><code>src&#x2F;jquery.gridster.js:923</code></a>
</p>
@@ -4138,7 +4182,7 @@ the</code>upper<em>rows<code>array. Iteration starts from row specified in</code
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l867"><code>src&#x2F;jquery.gridster.js:867</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l877"><code>src&#x2F;jquery.gridster.js:877</code></a>
</p>
@@ -4257,7 +4301,7 @@ the</code>upper<em>rows<code>array. Iteration starts from row specified in</code
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l881"><code>src&#x2F;jquery.gridster.js:881</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l891"><code>src&#x2F;jquery.gridster.js:891</code></a>
</p>
@@ -4367,7 +4411,7 @@ the</code>upper<em>rows<code>array. Iteration starts from row specified in</code
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l835"><code>src&#x2F;jquery.gridster.js:835</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l845"><code>src&#x2F;jquery.gridster.js:845</code></a>
</p>
@@ -4495,7 +4539,7 @@ HTMLElements.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l852"><code>src&#x2F;jquery.gridster.js:852</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l862"><code>src&#x2F;jquery.gridster.js:862</code></a>
</p>
@@ -4621,7 +4665,7 @@ and col given.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l933"><code>src&#x2F;jquery.gridster.js:933</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l943"><code>src&#x2F;jquery.gridster.js:943</code></a>
</p>
@@ -4747,7 +4791,7 @@ else returns the jQuery HTMLElement
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l958"><code>src&#x2F;jquery.gridster.js:958</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l968"><code>src&#x2F;jquery.gridster.js:968</code></a>
</p>
@@ -4879,7 +4923,7 @@ params and if this is under the widget that is being dragged.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l789"><code>src&#x2F;jquery.gridster.js:789</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l799"><code>src&#x2F;jquery.gridster.js:799</code></a>
</p>
@@ -5021,7 +5065,7 @@ each widget) in descending way.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1410"><code>src&#x2F;jquery.gridster.js:1410</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1423"><code>src&#x2F;jquery.gridster.js:1423</code></a>
</p>
@@ -5050,7 +5094,8 @@ each widget) in descending way.</p>
<div class="param-description">
<p>The jQuery object representing the widget you want to move.</p>
<p>The jQuery object representing the widget
you want to move.</p>
</div>
@@ -5140,7 +5185,7 @@ each widget) in descending way.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1321"><code>src&#x2F;jquery.gridster.js:1321</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1331"><code>src&#x2F;jquery.gridster.js:1331</code></a>
</p>
@@ -5171,7 +5216,8 @@ if they can.</p>
<div class="param-description">
<p>The jQuery wrapped HTMLElement of the widget is going to be moved.</p>
<p>The jQuery wrapped HTMLElement of the
widget is going to be moved.</p>
</div>
@@ -5252,7 +5298,7 @@ if they can.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1364"><code>src&#x2F;jquery.gridster.js:1364</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1375"><code>src&#x2F;jquery.gridster.js:1375</code></a>
</p>
@@ -5378,7 +5424,7 @@ if they can.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l159"><code>src&#x2F;jquery.gridster.js:159</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l163"><code>src&#x2F;jquery.gridster.js:163</code></a>
</p>
@@ -5500,7 +5546,7 @@ if they can.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l452"><code>src&#x2F;jquery.gridster.js:452</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l461"><code>src&#x2F;jquery.gridster.js:461</code></a>
</p>
@@ -5544,8 +5590,7 @@ if they can.</p>
<div class="param-description">
<p>prepared ui object.
See http://jqueryui.com/demos/draggable/ for more info.</p>
<p>prepared ui object.</p>
</div>
@@ -5613,7 +5658,7 @@ if they can.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l545"><code>src&#x2F;jquery.gridster.js:545</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l555"><code>src&#x2F;jquery.gridster.js:555</code></a>
</p>
@@ -5741,7 +5786,7 @@ overlapped or stops being overlapped.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l585"><code>src&#x2F;jquery.gridster.js:585</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l595"><code>src&#x2F;jquery.gridster.js:595</code></a>
</p>
@@ -5865,7 +5910,7 @@ overlapped or stops being overlapped.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l400"><code>src&#x2F;jquery.gridster.js:400</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l410"><code>src&#x2F;jquery.gridster.js:410</code></a>
</p>
@@ -5909,8 +5954,7 @@ overlapped or stops being overlapped.</p>
<div class="param-description">
<p>prepared ui object.
See http://jqueryui.com/demos/draggable/ for more info.</p>
<p>prepared ui object.</p>
</div>
@@ -5972,7 +6016,7 @@ overlapped or stops being overlapped.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1259"><code>src&#x2F;jquery.gridster.js:1259</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1269"><code>src&#x2F;jquery.gridster.js:1269</code></a>
</p>
@@ -6076,7 +6120,7 @@ overlapped or stops being overlapped.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1271"><code>src&#x2F;jquery.gridster.js:1271</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1281"><code>src&#x2F;jquery.gridster.js:1281</code></a>
</p>
@@ -6182,7 +6226,7 @@ overlapped or stops being overlapped.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l489"><code>src&#x2F;jquery.gridster.js:489</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l499"><code>src&#x2F;jquery.gridster.js:499</code></a>
</p>
@@ -6226,8 +6270,7 @@ overlapped or stops being overlapped.</p>
<div class="param-description">
<p>prepared ui object.
See http://jqueryui.com/demos/draggable/ for more info.</p>
<p>prepared ui object.</p>
</div>
@@ -6289,7 +6332,7 @@ overlapped or stops being overlapped.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1283"><code>src&#x2F;jquery.gridster.js:1283</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1293"><code>src&#x2F;jquery.gridster.js:1293</code></a>
</p>
@@ -6393,7 +6436,7 @@ overlapped or stops being overlapped.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1301"><code>src&#x2F;jquery.gridster.js:1301</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1311"><code>src&#x2F;jquery.gridster.js:1311</code></a>
</p>
@@ -6487,7 +6530,7 @@ overlapped or stops being overlapped.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l2063"><code>src&#x2F;jquery.gridster.js:2063</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l2089"><code>src&#x2F;jquery.gridster.js:2089</code></a>
</p>
@@ -6559,7 +6602,7 @@ the browser is resized.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l265"><code>src&#x2F;jquery.gridster.js:265</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l272"><code>src&#x2F;jquery.gridster.js:272</code></a>
</p>
@@ -6641,7 +6684,7 @@ mapped array of positions.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l329"><code>src&#x2F;jquery.gridster.js:329</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l336"><code>src&#x2F;jquery.gridster.js:336</code></a>
</p>
@@ -6746,7 +6789,7 @@ mapped array of positions.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l201"><code>src&#x2F;jquery.gridster.js:201</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l205"><code>src&#x2F;jquery.gridster.js:205</code></a>
</p>
@@ -6850,7 +6893,7 @@ mapped array of positions.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l231"><code>src&#x2F;jquery.gridster.js:231</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l237"><code>src&#x2F;jquery.gridster.js:237</code></a>
</p>
@@ -6948,7 +6991,7 @@ mapped array of positions.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l253"><code>src&#x2F;jquery.gridster.js:253</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l259"><code>src&#x2F;jquery.gridster.js:259</code></a>
</p>
@@ -6959,7 +7002,8 @@ mapped array of positions.</p>
</div>
<div class="description">
<p>Returns a serialized array of the widgets that have changed their position.</p>
<p>Returns a serialized array of the widgets that have changed their
position.</p>
</div>
@@ -7036,7 +7080,7 @@ mapped array of positions.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1573"><code>src&#x2F;jquery.gridster.js:1573</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1589"><code>src&#x2F;jquery.gridster.js:1589</code></a>
</p>
@@ -7145,7 +7189,7 @@ mapped array of positions.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1927"><code>src&#x2F;jquery.gridster.js:1927</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1947"><code>src&#x2F;jquery.gridster.js:1947</code></a>
</p>
@@ -7232,7 +7276,7 @@ mapped array of positions.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l997"><code>src&#x2F;jquery.gridster.js:997</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1007"><code>src&#x2F;jquery.gridster.js:1007</code></a>
</p>
@@ -7359,7 +7403,7 @@ mapped array of positions.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l621"><code>src&#x2F;jquery.gridster.js:621</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l631"><code>src&#x2F;jquery.gridster.js:631</code></a>
</p>
@@ -7480,7 +7524,7 @@ mapped array of positions.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l710"><code>src&#x2F;jquery.gridster.js:710</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l720"><code>src&#x2F;jquery.gridster.js:720</code></a>
</p>
@@ -7585,7 +7629,7 @@ each widget) in ascending way.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l750"><code>src&#x2F;jquery.gridster.js:750</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l760"><code>src&#x2F;jquery.gridster.js:760</code></a>
</p>
@@ -7690,7 +7734,7 @@ coords of each widget) in ascending way.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l730"><code>src&#x2F;jquery.gridster.js:730</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l740"><code>src&#x2F;jquery.gridster.js:740</code></a>
</p>
@@ -7795,7 +7839,7 @@ each widget) placing first the empty cells upper left.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l770"><code>src&#x2F;jquery.gridster.js:770</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l780"><code>src&#x2F;jquery.gridster.js:780</code></a>
</p>
@@ -7906,7 +7950,7 @@ each widget) in descending way.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l308"><code>src&#x2F;jquery.gridster.js:308</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l315"><code>src&#x2F;jquery.gridster.js:315</code></a>
</p>
@@ -8029,7 +8073,7 @@ the grid coords object passed in the <code>grid_data</code> param.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1544"><code>src&#x2F;jquery.gridster.js:1544</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1560"><code>src&#x2F;jquery.gridster.js:1560</code></a>
</p>
@@ -8133,7 +8177,7 @@ the grid coords object passed in the <code>grid_data</code> param.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l674"><code>src&#x2F;jquery.gridster.js:674</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l684"><code>src&#x2F;jquery.gridster.js:684</code></a>
</p>

View File

@@ -5,7 +5,7 @@
"name": "src/jquery.collision.js",
"modules": {},
"classes": {
"Collision": 1
"Collision\n\nDetects collisions between a DOM element against other DOM elements or\nCoords objects.": 1
},
"fors": {},
"namespaces": {}
@@ -14,7 +14,7 @@
"name": "src/jquery.coords.js",
"modules": {},
"classes": {
"Coords": 1
"Coords\n\nCreates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)\nto simulate DOM elements on the screen.\nCoords is used by Gridster to create a faux grid with any DOM element can\ncollide.": 1
},
"fors": {},
"namespaces": {}
@@ -40,54 +40,51 @@
},
"modules": {},
"classes": {
"Collision": {
"name": "Collision",
"shortname": "Collision",
"Collision\n\nDetects collisions between a DOM element against other DOM elements or\nCoords objects.": {
"name": "Collision\n\nDetects collisions between a DOM element against other DOM elements or\nCoords objects.",
"shortname": "Collision\n\nDetects collisions between a DOM element against other DOM elements or\nCoords objects.",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [
"Gridster"
],
"extension_for": [],
"file": "src/jquery.collision.js",
"line": 22,
"description": "Collision",
"line": 19,
"uses": [
"Coords"
],
"params": [
{
"name": "element",
"description": "An Attribute name or object property path",
"name": "el",
"description": "The jQuery wrapped HTMLElement.",
"type": "HTMLElement"
},
{
"name": "colliders",
"description": "An Attribute name or object property path",
"type": "String|HTMLElement|Array"
"description": "Can be a jQuery collection\n of HTMLElements or an Array of Coords instances.",
"type": "HTMLElement|Array"
},
{
"name": "options",
"description": "An Attribute name or object property path",
"description": "An Object with all options you want to\n overwrite:",
"type": "Object",
"optional": true,
"props": [
{
"name": "on_overlap",
"description": "An Attribute name or object property path",
"type": "Function",
"optional": true
},
{
"name": "on_overlap_start",
"description": "An Attribute name or object property path",
"description": "Executes a function the first\n time each `collider ` is overlapped.",
"type": "Function",
"optional": true
},
{
"name": "on_overlap_stop",
"description": "An Attribute name or object property path",
"description": "Executes a function when a\n `collider` is no longer collided.",
"type": "Function",
"optional": true
},
{
"name": "on_overlap",
"description": "Executes a function when the\nmouse is moved during the collision.",
"type": "Function",
"optional": true
}
@@ -95,32 +92,32 @@
}
],
"return": {
"description": "dasdasdadasd",
"description": "Collision instance.",
"type": "Object"
},
"is_constructor": 1
},
"Coords": {
"name": "Coords",
"shortname": "Coords",
"Coords\n\nCreates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)\nto simulate DOM elements on the screen.\nCoords is used by Gridster to create a faux grid with any DOM element can\ncollide.": {
"name": "Coords\n\nCreates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)\nto simulate DOM elements on the screen.\nCoords is used by Gridster to create a faux grid with any DOM element can\ncollide.",
"shortname": "Coords\n\nCreates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)\nto simulate DOM elements on the screen.\nCoords is used by Gridster to create a faux grid with any DOM element can\ncollide.",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [
"Collision",
"Gridster"
],
"extension_for": [],
"file": "src/jquery.coords.js",
"line": 10,
"description": "Coords",
"params": [
{
"name": "obj",
"description": "HTMLElement or a literal Object with the left, top, width and height properties.",
"description": "The jQuery HTMLElement or a object with: left,\ntop, width and height properties.",
"type": "HTMLElement|Object"
}
],
"return": {
"description": "Coords instance.",
"type": "Object"
},
"is_constructor": 1
},
"Draggable": {
@@ -130,10 +127,72 @@
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"extension_for": [
"Gridster"
],
"file": "src/jquery.draggable.js",
"line": 24,
"description": "Draggable",
"params": [
{
"name": "el",
"description": "The HTMLelement that contains all the widgets\n to be dragged.",
"type": "HTMLElement"
},
{
"name": "options",
"description": "An Object with all options you want to\n overwrite:",
"type": "Object",
"optional": true,
"props": [
{
"name": "items",
"description": "Define who will\n be the draggable items. Can be a CSS Selector String or a\n collection of HTMLElements.",
"type": "HTMLElement|String",
"optional": true
},
{
"name": "distance",
"description": "Distance in pixels after mousedown\n the mouse must move before dragging should start.",
"type": "Number",
"optional": true
},
{
"name": "limit",
"description": "Constrains dragging to the width of\n the container",
"type": "Boolean",
"optional": true
},
{
"name": "offset_left",
"description": "Offset added to the item\n that is being dragged.",
"type": "Offset_left",
"optional": true
},
{
"name": "drag",
"description": "Executes a callback when the mouse is\n moved during the dragging.",
"type": "Number",
"optional": true
},
{
"name": "start",
"description": "Executes a callback when the drag\n starts.",
"type": "Number",
"optional": true
},
{
"name": "stop",
"description": "Executes a callback when the drag stops.",
"type": "Number",
"optional": true
}
]
}
],
"return": {
"description": "Returns `el`.",
"type": "Object"
},
"is_constructor": 1
},
"Gridster": {
@@ -147,7 +206,7 @@
"file": "src/jquery.gridster.js",
"line": 33,
"uses": [
"Coords",
"Draggable",
"Collision"
],
"params": [
@@ -224,11 +283,17 @@
},
{
"name": "draggable",
"description": "An Object with all options for\n jQuery UI Draggable you want to overwrite. See\n http://jqueryui.com/demos/draggable/ for more info.",
"description": "An Object with all options for\n Draggable class you want to overwrite. See Draggable docs for more\n info.",
"type": "Object",
"optional": true
}
]
},
{
"name": "avoid_overlapped_widgets",
"description": "Avoid that widgets loaded\n from the DOM can be overlapped. It is helpful if the positions were\n bad stored in the database or if there was any conflict.",
"type": "Boolean",
"optional": true
}
],
"is_constructor": 1
@@ -237,7 +302,7 @@
"classitems": [
{
"file": "src/jquery.gridster.js",
"line": 105,
"line": 108,
"description": "Disable dragging.",
"itemtype": "method",
"name": "enable",
@@ -249,7 +314,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 117,
"line": 121,
"description": "Enable dragging.",
"itemtype": "method",
"name": "enable",
@@ -261,7 +326,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 129,
"line": 133,
"description": "Add a new widget to the grid.",
"itemtype": "method",
"name": "add_widget",
@@ -290,7 +355,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 159,
"line": 163,
"description": "Get the most left column below to add a new widget.",
"itemtype": "method",
"name": "next_position",
@@ -314,7 +379,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 201,
"line": 205,
"description": "Remove a widget from the grid.",
"itemtype": "method",
"name": "remove_widget",
@@ -333,7 +398,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 231,
"line": 237,
"description": "Returns a serialized array of the widgets in the grid.",
"itemtype": "method",
"name": "serialize",
@@ -353,8 +418,8 @@
},
{
"file": "src/jquery.gridster.js",
"line": 253,
"description": "Returns a serialized array of the widgets that have changed their position.",
"line": 259,
"description": "Returns a serialized array of the widgets that have changed their\n position.",
"itemtype": "method",
"name": "serialize_changed",
"return": {
@@ -365,7 +430,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 265,
"line": 272,
"description": "Creates the grid coords object representing the widget a add it to the\nmapped array of positions.",
"itemtype": "method",
"name": "register_widget",
@@ -377,7 +442,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 308,
"line": 315,
"description": "Update in the mapped array of positions the value of cells represented by\nthe grid coords object passed in the `grid_data` param.",
"params": [
{
@@ -401,7 +466,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 329,
"line": 336,
"description": "Remove a widget from the mapped array of positions.",
"itemtype": "method",
"name": "remove_from_gridmap",
@@ -420,7 +485,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 342,
"line": 349,
"description": "Add a widget to the mapped array of positions.",
"itemtype": "method",
"name": "add_to_gridmap",
@@ -444,8 +509,11 @@
},
{
"file": "src/jquery.gridster.js",
"line": 364,
"description": "Make widgets draggable. It Wraps the jQuery UI Draggable Plugin.",
"line": 371,
"description": "Make widgets draggable.",
"uses": [
"Draggable"
],
"itemtype": "method",
"name": "draggable",
"return": {
@@ -456,7 +524,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 400,
"line": 410,
"description": "This function is executed when the player begins to be dragged.",
"itemtype": "method",
"name": "on_start_drag",
@@ -468,7 +536,7 @@
},
{
"name": "A",
"description": "prepared ui object.\n See http://jqueryui.com/demos/draggable/ for more info.",
"description": "prepared ui object.",
"type": "Object"
}
],
@@ -476,7 +544,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 452,
"line": 461,
"description": "This function is executed when the player is being dragged.",
"itemtype": "method",
"name": "on_drag",
@@ -488,7 +556,7 @@
},
{
"name": "A",
"description": "prepared ui object.\n See http://jqueryui.com/demos/draggable/ for more info.",
"description": "prepared ui object.",
"type": "Object"
}
],
@@ -496,7 +564,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 489,
"line": 499,
"description": "This function is executed when the player stops being dragged.",
"itemtype": "method",
"name": "on_stop_drag",
@@ -508,7 +576,7 @@
},
{
"name": "A",
"description": "prepared ui object.\n See http://jqueryui.com/demos/draggable/ for more info.",
"description": "prepared ui object.",
"type": "Object"
}
],
@@ -516,7 +584,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 545,
"line": 555,
"description": "Executes the callbacks passed as arguments when a column begins to be\noverlapped or stops being overlapped.",
"params": [
{
@@ -540,7 +608,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 585,
"line": 595,
"description": "Executes the callbacks passed as arguments when a row starts to be\noverlapped or stops being overlapped.",
"params": [
{
@@ -564,7 +632,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 621,
"line": 631,
"description": "Sets the current position of the player",
"params": [
{
@@ -588,7 +656,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 674,
"line": 684,
"description": "See which of the widgets in the $widgets param collection can go to\na upper row and which not.",
"itemtype": "method",
"name": "widgets_contraints",
@@ -607,7 +675,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 710,
"line": 720,
"description": "Sorts an Array of grid coords objects (representing the grid coords of\neach widget) in ascending way.",
"itemtype": "method",
"name": "sort_by_row_asc",
@@ -626,7 +694,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 730,
"line": 740,
"description": "Sorts an Array of grid coords objects (representing the grid coords of\neach widget) placing first the empty cells upper left.",
"itemtype": "method",
"name": "sort_by_row_asc",
@@ -645,7 +713,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 750,
"line": 760,
"description": "Sorts an Array of grid coords objects by column (representing the grid\ncoords of each widget) in ascending way.",
"itemtype": "method",
"name": "sort_by_row_asc",
@@ -664,7 +732,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 770,
"line": 780,
"description": "Sorts an Array of grid coords objects (representing the grid coords of\neach widget) in descending way.",
"itemtype": "method",
"name": "sort_by_row_desc",
@@ -683,7 +751,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 789,
"line": 799,
"description": "Sorts an Array of grid coords objects (representing the grid coords of\neach widget) in descending way.",
"itemtype": "method",
"name": "manage_movements",
@@ -712,7 +780,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 835,
"line": 845,
"description": "Determines if there is a widget in the row and col given. Or if the\nHTMLElement passed as first argument is the player.",
"itemtype": "method",
"name": "is_player",
@@ -737,7 +805,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 852,
"line": 862,
"description": "Determines if the widget that is being dragged is currently over the row\nand col given.",
"itemtype": "method",
"name": "is_player_in",
@@ -761,7 +829,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 867,
"line": 877,
"description": "Determines if the placeholder is currently over the row and col given.",
"itemtype": "method",
"name": "is_placeholder_in",
@@ -785,7 +853,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 881,
"line": 891,
"description": "Determines if the placeholder is currently over the column given.",
"itemtype": "method",
"name": "is_placeholder_in_col",
@@ -804,7 +872,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 894,
"line": 904,
"description": "Determines if the cell represented by col and row params is empty.",
"itemtype": "method",
"name": "is_empty",
@@ -828,7 +896,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 913,
"line": 923,
"description": "Determines if the cell represented by col and row params is occupied.",
"itemtype": "method",
"name": "is_occupied",
@@ -852,7 +920,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 933,
"line": 943,
"description": "Determines if there is a widget in the cell represented by col/row params.",
"itemtype": "method",
"name": "is_widget",
@@ -876,7 +944,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 958,
"line": 968,
"description": "Determines if there is a widget in the cell represented by col/row\nparams and if this is under the widget that is being dragged.",
"itemtype": "method",
"name": "is_widget_under_player",
@@ -900,7 +968,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 975,
"line": 985,
"description": "Get widgets overlapping with the player.",
"itemtype": "method",
"name": "get_widgets_under_player",
@@ -912,7 +980,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 997,
"line": 1007,
"description": "Put placeholder at the row and column specified.",
"itemtype": "method",
"name": "set_placeholder",
@@ -936,7 +1004,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1048,
"line": 1056,
"description": "Determines whether the player can move to a position above.",
"itemtype": "method",
"name": "can_go_player_up",
@@ -955,7 +1023,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1097,
"line": 1105,
"description": "Determines whether a widget can move to a position above.",
"itemtype": "method",
"name": "can_go_widget_up",
@@ -974,7 +1042,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1148,
"line": 1158,
"description": "Search a valid row for the widget represented by `widget_grid_data' in\nthe `upper_rows` array. Iteration starts from row specified in `min_row`.",
"itemtype": "method",
"name": "get_valid_rows",
@@ -1003,7 +1071,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1226,
"line": 1236,
"description": "Get widgets overlapping with the player.",
"itemtype": "method",
"name": "get_widgets_overlapped",
@@ -1015,7 +1083,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1259,
"line": 1269,
"description": "This callback is executed when the player begins to collide with a column.",
"itemtype": "method",
"name": "on_start_overlapping_column",
@@ -1034,7 +1102,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1271,
"line": 1281,
"description": "A callback executed when the player begins to collide with a row.",
"itemtype": "method",
"name": "on_start_overlapping_row",
@@ -1053,7 +1121,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1283,
"line": 1293,
"description": "A callback executed when the the player ends to collide with a column.",
"itemtype": "method",
"name": "on_stop_overlapping_column",
@@ -1072,7 +1140,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1301,
"line": 1311,
"description": "This callback is executed when the player ends to collide with a row.",
"itemtype": "method",
"name": "on_stop_overlapping_row",
@@ -1091,14 +1159,14 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1321,
"line": 1331,
"description": "Move a widget to a specific row. The cell or cells must be empty.\nIf the widget has widgets below, all of these widgets will be moved also\nif they can.",
"itemtype": "method",
"name": "move_widget_to",
"params": [
{
"name": "$widget",
"description": "The jQuery wrapped HTMLElement of the widget is going to be moved.",
"description": "The jQuery wrapped HTMLElement of the\nwidget is going to be moved.",
"type": "HTMLElement"
}
],
@@ -1110,7 +1178,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1364,
"line": 1375,
"description": "Move up the specified widget and all below it.",
"itemtype": "method",
"name": "move_widget_up",
@@ -1135,14 +1203,14 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1410,
"line": 1423,
"description": "Move down the specified widget and all below it.",
"itemtype": "method",
"name": "move_widget_down",
"params": [
{
"name": "$widget",
"description": "The jQuery object representing the widget you want to move.",
"description": "The jQuery object representing the widget\n you want to move.",
"type": "HTMLElement"
},
{
@@ -1159,7 +1227,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1455,
"line": 1469,
"description": "Check if the widget can move to the specified row, else returns the\nupper row possible.",
"itemtype": "method",
"name": "can_go_up_to_row",
@@ -1188,7 +1256,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1544,
"line": 1560,
"description": "Get widgets below a widget.",
"itemtype": "method",
"name": "widgets_below",
@@ -1207,7 +1275,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1573,
"line": 1589,
"description": "Update the array of mapped positions with the new player position.",
"itemtype": "method",
"name": "set_cells_player_occupies",
@@ -1231,7 +1299,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1590,
"line": 1606,
"description": "Remove from the array of mapped positions the reference to the player.",
"itemtype": "method",
"name": "empty_cells_player_occupies",
@@ -1243,8 +1311,8 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1627,
"description": "Check if it's possible to move a widget to a specific col/row. It takes\ninto account the dimensions (`size_y` and `size_x` attrs. of the grid coords\n object) the widget occupies.",
"line": 1644,
"description": "Check if it's possible to move a widget to a specific col/row. It takes\ninto account the dimensions (`size_y` and `size_x` attrs. of the grid\n coords object) the widget occupies.",
"itemtype": "method",
"name": "can_move_to",
"params": [
@@ -1272,8 +1340,8 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1667,
"description": "Given the leftmost column returns all columns that are overlapping with the player.",
"line": 1684,
"description": "Given the leftmost column returns all columns that are overlapping\n with the player.",
"itemtype": "method",
"name": "get_targeted_columns",
"params": [
@@ -1292,7 +1360,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1685,
"line": 1703,
"description": "Given the upper row returns all rows that are overlapping with the player.",
"itemtype": "method",
"name": "get_targeted_rows",
@@ -1312,7 +1380,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1702,
"line": 1720,
"description": "Get all columns and rows that a widget occupies.",
"itemtype": "method",
"name": "get_cells_occupied",
@@ -1331,7 +1399,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1730,
"line": 1748,
"description": "Iterate over the cells occupied by a widget executing a function for\neach one.",
"itemtype": "method",
"name": "for_each_cell_occupied",
@@ -1355,7 +1423,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1751,
"line": 1769,
"description": "Iterate over the columns occupied by a widget executing a function for\neach one.",
"itemtype": "method",
"name": "for_each_column_occupied",
@@ -1379,7 +1447,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1770,
"line": 1788,
"description": "Iterate over the rows occupied by a widget executing a function for\neach one.",
"itemtype": "method",
"name": "for_each_row_occupied",
@@ -1391,7 +1459,7 @@
},
{
"name": "callback",
"description": "The function to execute on each column iteration. The row number is passed as first argument.",
"description": "The function to execute on each column\n iteration. The row number is passed as first argument.",
"type": "Function"
}
],
@@ -1403,7 +1471,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1836,
"line": 1855,
"description": "Iterate over each widget above the column and row specified.",
"itemtype": "method",
"name": "for_each_widget_above",
@@ -1420,7 +1488,7 @@
},
{
"name": "callback",
"description": "The function to execute on each widget\niteration. The value of `this` inside the function is the jQuery wrapped HTMLElement.",
"description": "The function to execute on each widget\n iteration. The value of `this` inside the function is the jQuery\n wrapped HTMLElement.",
"type": "Function"
}
],
@@ -1432,7 +1500,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1852,
"line": 1872,
"description": "Iterate over each widget below the column and row specified.",
"itemtype": "method",
"name": "for_each_widget_below",
@@ -1449,7 +1517,7 @@
},
{
"name": "callback",
"description": "The function to execute on each widget\niteration. The value of `this` inside the function is the jQuery wrapped HTMLElement.",
"description": "The function to execute on each widget\n iteration. The value of `this` inside the function is the jQuery wrapped\n HTMLElement.",
"type": "Function"
}
],
@@ -1461,7 +1529,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1868,
"line": 1889,
"description": "Returns the highest occupied cell in the grid.",
"itemtype": "method",
"name": "get_highest_occupied_cell",
@@ -1473,7 +1541,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1927,
"line": 1947,
"description": "Set the current height of the parent grid.",
"itemtype": "method",
"name": "set_dom_grid_height",
@@ -1485,7 +1553,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1941,
"line": 1960,
"description": "It generates the neccessary styles to position the widgets.",
"itemtype": "method",
"name": "generate_stylesheet",
@@ -1509,7 +1577,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 2004,
"line": 2030,
"description": "Injects the given CSS as string to the head of the document.",
"itemtype": "method",
"name": "add_style_tag",
@@ -1528,7 +1596,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 2027,
"line": 2053,
"description": "Generates a faux grid to collide with it when a widget is dragged and\ndetect row or column that we want to go.",
"itemtype": "method",
"name": "generate_faux_grid",
@@ -1552,7 +1620,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 2063,
"line": 2089,
"description": "Recalculates the offsets for the faux grid. You need to use it when\nthe browser is resized.",
"itemtype": "method",
"name": "recalculate_faux_grid",
@@ -1564,7 +1632,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 2087,
"line": 2113,
"description": "Get all widgets in the DOM and register them.",
"itemtype": "method",
"name": "get_widgets_from_DOM",
@@ -1576,7 +1644,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 2101,
"line": 2127,
"description": "Calculate columns and rows to be set based on the configuration\n parameters, grid dimensions, etc ...",
"itemtype": "method",
"name": "generate_grid_and_stylesheet",

View File

@@ -42,9 +42,25 @@
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="..&#x2F;classes/Collision.html">Collision</a></li>
<li><a href="..&#x2F;classes/Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects..html">Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects.</a></li>
<li><a href="..&#x2F;classes/Coords.html">Coords</a></li>
<li><a href="..&#x2F;classes/Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide..html">Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide.</a></li>
<li><a href="..&#x2F;classes/Draggable.html">Draggable</a></li>
@@ -104,198 +120,216 @@
;(function($, window, document, undefined){
var defaults = {
colliders_context: document.body,
on_overlap: function(collider_data){},
on_overlap_start : function(collider_data){
&#x2F;&#x2F; console.log(&#x27;the element START being a collider&#x27;, collider_data);
},
on_overlap_stop : function(collider_data){
&#x2F;&#x2F; console.log(&#x27;the element STOP being a collider&#x27;, collider_data);
}
colliders_context: document.body
&#x2F;&#x2F; ,on_overlap: function(collider_data){},
&#x2F;&#x2F; on_overlap_start : function(collider_data){},
&#x2F;&#x2F; on_overlap_stop : function(collider_data){}
};
&#x2F;**
* Collision
*
* @class Collision
*
* Detects collisions between a DOM element against other DOM elements or
* Coords objects.
*
* @uses Coords
* @param {HTMLElement} element An Attribute name or object property path
* @param {String|HTMLElement|Array} colliders An Attribute name or object property path
* @param {Object} [options] An Attribute name or object property path
* @param {Function} [options.on_overlap] An Attribute name or object property path
* @param {Function} [options.on_overlap_start] An Attribute name or object property path
* @param {Function} [options.on_overlap_stop] An Attribute name or object property path
* @return {Object} dasdasdadasd
* @param {HTMLElement} el The jQuery wrapped HTMLElement.
* @param {HTMLElement|Array} colliders Can be a jQuery collection
* of HTMLElements or an Array of Coords instances.
* @param {Object} [options] An Object with all options you want to
* overwrite:
* @param {Function} [options.on_overlap_start] Executes a function the first
* time each &#x60;collider &#x60; is overlapped.
* @param {Function} [options.on_overlap_stop] Executes a function when a
* &#x60;collider&#x60; is no longer collided.
* @param {Function} [options.on_overlap] Executes a function when the
* mouse is moved during the collision.
* @return {Object} Collision instance.
* @constructor
*&#x2F;
function Collision(element, colliders, options) {
this.options = $.extend(defaults, options);
this.$element = element;
this.last_colliders = [];
this.last_colliders_coords = [];
if (typeof colliders === &#x27;string&#x27; || colliders instanceof jQuery) {
this.$colliders = $(colliders,
this.options.colliders_context).not(this.$element);
}else{
this.colliders = $(colliders);
}
function Collision(el, colliders, options) {
this.options = $.extend(defaults, options);
this.$element = el;
this.last_colliders = [];
this.last_colliders_coords = [];
if (typeof colliders === &#x27;string&#x27; || colliders instanceof jQuery) {
this.$colliders = $(colliders,
this.options.colliders_context).not(this.$element);
}else{
this.colliders = $(colliders);
}
this.init();
this.init();
}
var fn = Collision.prototype;
fn.init = function() {
this.find_collisions();
this.find_collisions();
};
fn.overlaps = function(a, b) {
var x = false;
var y = false;
var x = false;
var y = false;
if ((b.x1 &gt;= a.x1 &amp;&amp; b.x1 &lt;= a.x2) ||
(b.x2 &gt;= a.x1 &amp;&amp; b.x2 &lt;= a.x2) ||
(a.x1 &gt;= b.x1 &amp;&amp; a.x2 &lt;= b.x2)
) { x = true; }
if ((b.x1 &gt;= a.x1 &amp;&amp; b.x1 &lt;= a.x2) ||
(b.x2 &gt;= a.x1 &amp;&amp; b.x2 &lt;= a.x2) ||
(a.x1 &gt;= b.x1 &amp;&amp; a.x2 &lt;= b.x2)
) { x = true; }
if ((b.y1 &gt;= a.y1 &amp;&amp; b.y1 &lt;= a.y2) ||
(b.y2 &gt;= a.y1 &amp;&amp; b.y2 &lt;= a.y2) ||
(a.y1 &gt;= b.y1 &amp;&amp; a.y2 &lt;= b.y2)
) { y = true; }
if ((b.y1 &gt;= a.y1 &amp;&amp; b.y1 &lt;= a.y2) ||
(b.y2 &gt;= a.y1 &amp;&amp; b.y2 &lt;= a.y2) ||
(a.y1 &gt;= b.y1 &amp;&amp; a.y2 &lt;= b.y2)
) { y = true; }
return (x &amp;&amp; y);
return (x &amp;&amp; y);
};
fn.detect_overlapping_region = function(a, b){
var regionX = &#x27;&#x27;;
var regionY = &#x27;&#x27;;
var regionX = &#x27;&#x27;;
var regionY = &#x27;&#x27;;
if (a.y1 &gt; b.cy &amp;&amp; a.y1 &lt; b.y2) { regionX = &#x27;N&#x27;; }
if (a.y2 &gt; b.y1 &amp;&amp; a.y2 &lt; b.cy) { regionX = &#x27;S&#x27;; }
if (a.x1 &gt; b.cx &amp;&amp; a.x1 &lt; b.x2) { regionY = &#x27;W&#x27;; }
if (a.x2 &gt; b.x1 &amp;&amp; a.x2 &lt; b.cx) { regionY = &#x27;E&#x27;; }
if (a.y1 &gt; b.cy &amp;&amp; a.y1 &lt; b.y2) { regionX = &#x27;N&#x27;; }
if (a.y2 &gt; b.y1 &amp;&amp; a.y2 &lt; b.cy) { regionX = &#x27;S&#x27;; }
if (a.x1 &gt; b.cx &amp;&amp; a.x1 &lt; b.x2) { regionY = &#x27;W&#x27;; }
if (a.x2 &gt; b.x1 &amp;&amp; a.x2 &lt; b.cx) { regionY = &#x27;E&#x27;; }
return (regionX + regionY) || &#x27;C&#x27;;
return (regionX + regionY) || &#x27;C&#x27;;
};
fn.calculate_overlapped_area_coords = function(a, b){
var x1 = Math.max(a.x1, b.x1);
var y1 = Math.max(a.y1, b.y1);
var x2 = Math.min(a.x2, b.x2);
var y2 = Math.min(a.y2, b.y2);
var x1 = Math.max(a.x1, b.x1);
var y1 = Math.max(a.y1, b.y1);
var x2 = Math.min(a.x2, b.x2);
var y2 = Math.min(a.y2, b.y2);
return $({
left: x1,
top: y1,
width : (x2 - x1),
height: (y2 - y1)
}).coords().get();
return $({
left: x1,
top: y1,
width : (x2 - x1),
height: (y2 - y1)
}).coords().get();
};
fn.calculate_overlapped_area = function(coords){
return (coords.width * coords.height);
return (coords.width * coords.height);
};
fn.manage_colliders_start_stop = function(new_colliders_coords, start_callback, stop_callback){
var last = this.last_colliders_coords;
var last = this.last_colliders_coords;
for (var i = 0, il = last.length; i &lt; il; i++) {
if ($.inArray(last[i], new_colliders_coords) === -1) {
start_callback.call(this, last[i]);
}
}
for (var i = 0, il = last.length; i &lt; il; i++) {
if ($.inArray(last[i], new_colliders_coords) === -1) {
start_callback.call(this, last[i]);
}
}
for (var j = 0, jl = new_colliders_coords.length; j &lt; jl; j++) {
if ($.inArray(new_colliders_coords[j], last) === -1) {
stop_callback.call(this, new_colliders_coords[j]);
}
for (var j = 0, jl = new_colliders_coords.length; j &lt; jl; j++) {
if ($.inArray(new_colliders_coords[j], last) === -1) {
stop_callback.call(this, new_colliders_coords[j]);
}
}
}
};
fn.find_collisions = function(player_data_coords){
var self = this;
var colliders_coords = [];
var colliders_data = [];
var $colliders = (this.colliders || this.$colliders);
var count = $colliders.length;
var player_coords = self.$element.coords().update(player_data_coords || false).get();
var self = this;
var colliders_coords = [];
var colliders_data = [];
var $colliders = (this.colliders || this.$colliders);
var count = $colliders.length;
var player_coords = self.$element.coords()
.update(player_data_coords || false).get();
while(count--){
var $collider = self.$colliders ? $($colliders[count]) : $colliders[count];
var $collider_coords_ins = ($collider.isCoords) ?
$collider : $collider.coords();
var collider_coords = $collider_coords_ins.get();
var overlaps = self.overlaps(player_coords, collider_coords);
while(count--){
var $collider = self.$colliders ?
$($colliders[count]) : $colliders[count];
var $collider_coords_ins = ($collider.isCoords) ?
$collider : $collider.coords();
var collider_coords = $collider_coords_ins.get();
var overlaps = self.overlaps(player_coords, collider_coords);
if (!overlaps) {
continue;
if (!overlaps) {
continue;
}
var region = self.detect_overlapping_region(
player_coords, collider_coords);
&#x2F;&#x2F;todo: make this an option
if (region === &#x27;C&#x27;){
var area_coords = self.calculate_overlapped_area_coords(
player_coords, collider_coords);
var area = self.calculate_overlapped_area(area_coords);
var collider_data = {
area: area,
area_coords : area_coords,
region: region,
coords: collider_coords,
player_coords: player_coords,
el: $collider
};
if (self.options.on_overlap) {
self.options.on_overlap.call(this, collider_data);
}
colliders_coords.push($collider_coords_ins);
colliders_data.push(collider_data);
}
}
var region = self.detect_overlapping_region(player_coords,
collider_coords);
&#x2F;&#x2F;todo: make this if customizable
if (region === &#x27;C&#x27;){
var area_coords = self.calculate_overlapped_area_coords(
player_coords, collider_coords);
var area = self.calculate_overlapped_area(area_coords);
var collider_data = {
area: area,
area_coords : area_coords,
region: region,
coords: collider_coords,
player_coords: player_coords,
el: $collider
};
self.options.on_overlap.call(this, collider_data);
colliders_coords.push($collider_coords_ins);
colliders_data.push(collider_data);
if (self.options.on_overlap_stop || self.options.on_overlap_start) {
this.manage_colliders_start_stop(colliders_coords,
self.options.on_overlap_stop, self.options.on_overlap_start);
}
}
this.last_colliders_coords = colliders_coords;
this.manage_colliders_start_stop(colliders_coords,
self.options.on_overlap_stop, self.options.on_overlap_start);
this.last_colliders_coords = colliders_coords;
return colliders_data;
return colliders_data;
};
fn.get_closest_colliders = function(player_data_coords){
var colliders = this.find_collisions(player_data_coords);
var min_area = 100;
colliders.sort(function(a, b){
var colliders = this.find_collisions(player_data_coords);
var min_area = 100;
colliders.sort(function(a, b){
if (a.area &lt;= min_area) {
return 1;
}
if (a.area &lt;= min_area) {
return 1;
}
&#x2F;* if colliders are being overlapped by the &quot;C&quot; (center) region,
* we have to set a lower index in the array to which they are placed
* above in the grid. *&#x2F;
if (a.region === &#x27;C&#x27; &amp;&amp; b.region === &#x27;C&#x27;) {
if (a.coords.y1 &lt; b.coords.y1 || a.coords.x1 &lt; b.coords.x1) {
return - 1;
}else{
return 1;
}
}
&#x2F;* if colliders are being overlapped by the &quot;C&quot; (center) region,
* we have to set a lower index in the array to which they are placed
* above in the grid. *&#x2F;
if (a.region === &#x27;C&#x27; &amp;&amp; b.region === &#x27;C&#x27;) {
if (a.coords.y1 &lt; b.coords.y1 || a.coords.x1 &lt; b.coords.x1) {
return - 1;
}else{
if (a.area &lt; b.area){
return 1;
}
}
if (a.area &lt; b.area){
return 1;
}
return 1;
});
return colliders;
return 1;
});
return colliders;
};
&#x2F;&#x2F;jQuery adapter
$.fn.collision = function(collider, options) {
return new Collision( this, collider, options );
return new Collision( this, collider, options );
};

View File

@@ -42,9 +42,25 @@
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="..&#x2F;classes/Collision.html">Collision</a></li>
<li><a href="..&#x2F;classes/Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects..html">Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects.</a></li>
<li><a href="..&#x2F;classes/Coords.html">Coords</a></li>
<li><a href="..&#x2F;classes/Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide..html">Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide.</a></li>
<li><a href="..&#x2F;classes/Draggable.html">Draggable</a></li>
@@ -103,10 +119,16 @@
;(function($, window, document, undefined){
&#x2F;**
* Coords
*
* @class Coords
* @param {HTMLElement|Object} obj HTMLElement or a literal Object with the left, top, width and height properties.
*
* Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
* to simulate DOM elements on the screen.
* Coords is used by Gridster to create a faux grid with any DOM element can
* collide.
*
* @param {HTMLElement|Object} obj The jQuery HTMLElement or a object with: left,
* top, width and height properties.
* @return {Object} Coords instance.
* @constructor
*&#x2F;
function Coords(obj) {
@@ -122,8 +144,10 @@
return this;
}
var fn = Coords.prototype;
fn.init = function(){
this.set();
this.original_coords = this.get();
@@ -181,6 +205,7 @@
return this.coords;
};
&#x2F;&#x2F;jQuery adapter
$.fn.coords = function() {
if (this.data(&#x27;coords&#x27;) ) {

View File

@@ -42,9 +42,25 @@
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="..&#x2F;classes/Collision.html">Collision</a></li>
<li><a href="..&#x2F;classes/Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects..html">Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects.</a></li>
<li><a href="..&#x2F;classes/Coords.html">Coords</a></li>
<li><a href="..&#x2F;classes/Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide..html">Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide.</a></li>
<li><a href="..&#x2F;classes/Draggable.html">Draggable</a></li>
@@ -107,24 +123,42 @@
items: &#x27;.gs_w&#x27;,
distance: 1,
limit: true,
offset_left: 0,
drag: function(e){},
start : function(e, ui){},
stop : function(e){}
offset_left: 0
&#x2F;&#x2F; ,drag: function(e){},
&#x2F;&#x2F; start : function(e, ui){},
&#x2F;&#x2F; stop : function(e){}
};
var $body = $(document.body);
&#x2F;**
* Draggable
*
* @class Draggable
*
* @param {HTMLElement} el The HTMLelement that contains all the widgets
* to be dragged.
* @param {Object} [options] An Object with all options you want to
* overwrite:
* @param {HTMLElement|String} [options.items] Define who will
* be the draggable items. Can be a CSS Selector String or a
* collection of HTMLElements.
* @param {Number} [options.distance] Distance in pixels after mousedown
* the mouse must move before dragging should start.
* @param {Boolean} [options.limit] Constrains dragging to the width of
* the container
* @param {offset_left} [options.offset_left] Offset added to the item
* that is being dragged.
* @param {Number} [options.drag] Executes a callback when the mouse is
* moved during the dragging.
* @param {Number} [options.start] Executes a callback when the drag
* starts.
* @param {Number} [options.stop] Executes a callback when the drag stops.
* @return {Object} Returns &#x60;el&#x60;.
* @constructor
*&#x2F;
function Draggable(element, options) {
this.options = $.extend(defaults, options);
this.$container = $(element);
function Draggable(el, options) {
this.options = $.extend({}, defaults, options);
this.$container = $(el);
this.$dragitems = $(this.options.items, this.$container);
this.is_dragging = false;
this.player_min_left = 0 + this.options.offset_left;
@@ -139,6 +173,7 @@
this.enable();
};
fn.get_actual_pos = function($el) {
var pos = $el.position();
return pos;
@@ -154,6 +189,10 @@
fn.drag_handler = function(e) {
if (e.which !== 1) {
return false;
};
var self = this;
var first = true;
this.$player = $(e.currentTarget);
@@ -162,6 +201,7 @@
this.mouse_init_pos = this.get_mouse_pos(e);
$body.on(&#x27;mousemove.draggable&#x27;, function(mme){
var mouse_actual_pos = self.get_mouse_pos(mme);
var diff_x = Math.abs(mouse_actual_pos.left - self.mouse_init_pos.left);
var diff_y = Math.abs(mouse_actual_pos.top - self.mouse_init_pos.top);

View File

@@ -42,9 +42,25 @@
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="..&#x2F;classes/Collision.html">Collision</a></li>
<li><a href="..&#x2F;classes/Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects..html">Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects.</a></li>
<li><a href="..&#x2F;classes/Coords.html">Coords</a></li>
<li><a href="..&#x2F;classes/Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide..html">Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide.</a></li>
<li><a href="..&#x2F;classes/Draggable.html">Draggable</a></li>
@@ -109,7 +125,7 @@
extra_rows: 0,
extra_cols: 0,
min_cols: 1,
min_rows: 10,
min_rows: 15,
autogenerate_stylesheet: true,
avoid_overlapped_widgets: true,
serialize_params: function($w, wgd) {
@@ -127,7 +143,7 @@
&#x2F;**
* @class Gridster
* @uses Coords
* @uses Draggable
* @uses Collision
* @param {HTMLElement} el The HTMLelement that contains all the widgets.
* @param {Object} [options] An Object with all options you want to
@@ -153,6 +169,9 @@
* &#x60;&lt;head&gt;&#x60; of the document. You can set this to false, and write
* your own CSS targeting rows and cols via data-attributes like so:
* &#x60;[data-col=&quot;1&quot;] { left: 10px; }&#x60;
* @param {Boolean} [avoid_overlapped_widgets] Avoid that widgets loaded
* from the DOM can be overlapped. It is helpful if the positions were
* bad stored in the database or if there was any conflict.
* @param {Function} [options.serialize_params] Return the data you want
* for each widget in the serialization. Two arguments are passed:
* &#x60;$w&#x60;: the jQuery wrapped HTMLElement, and &#x60;wgd&#x60;: the grid
@@ -161,8 +180,8 @@
* Collision class you want to overwrite. See Collision docs for
* more info.
* @param {Object} [options.draggable] An Object with all options for
* jQuery UI Draggable you want to overwrite. See
* http:&#x2F;&#x2F;jqueryui.com&#x2F;demos&#x2F;draggable&#x2F; for more info.
* Draggable class you want to overwrite. See Draggable docs for more
* info.
*
* @constructor
*&#x2F;
@@ -170,7 +189,7 @@
this.options = $.extend(true, defaults, options);
this.$el = $(el);
this.$wrapper = this.$el.parent();
this.$widgets = this.$el.find(this.options.widget_selector).addClass(&#x27;gs_w&#x27;);
this.$widgets = $(this.options.widget_selector, this.$el).addClass(&#x27;gs_w&#x27;);
this.widgets = [];
this.$changed = $([]);
this.wrapper_width = this.$wrapper.width();
@@ -203,7 +222,8 @@
* @method enable
* @return {Class} Returns the instance of the Gridster Class.
*&#x2F;
fn.disable = function(){
fn.disable = function() {
this.$wrapper.find(&#x27;.player-revert&#x27;).removeClass(&#x27;player-revert&#x27;);
this.drag_api.disable();
return this;
}
@@ -215,7 +235,7 @@
* @method enable
* @return {Class} Returns the instance of the Gridster Class.
*&#x2F;
fn.enable = function(){
fn.enable = function() {
this.drag_api.enable();
return this;
}
@@ -304,15 +324,17 @@
var $el = el instanceof jQuery ? el : $(el);
var wgd = $el.coords().grid;
this.cells_occupied_by_placeholder = {};
this.$widgets = this.$widgets.not($el);
var $nexts = this.widgets_below($el);
this.remove_from_gridmap(wgd);
$el.fadeOut($.proxy(function(){
$el.fadeOut($.proxy(function() {
$el.remove();
$nexts.each($.proxy(function(i, widget){
$nexts.each($.proxy(function(i, widget) {
this.move_widget_up( $(widget), wgd.size_y );
}, this));
@@ -336,9 +358,9 @@
fn.serialize = function($widgets) {
$widgets || ($widgets = this.$widgets);
var result = [];
$widgets.each($.proxy(function(i, widget){
result.push( this.options.serialize_params(
$(widget),$(widget).coords().grid ) );
$widgets.each($.proxy(function(i, widget) {
result.push(this.options.serialize_params(
$(widget), $(widget).coords().grid ) );
}, this));
return result;
@@ -346,7 +368,8 @@
&#x2F;**
* Returns a serialized array of the widgets that have changed their position.
* Returns a serialized array of the widgets that have changed their
* position.
*
* @method serialize_changed
* @return {Array} Returns an Array of Objects with the data specified in
@@ -376,7 +399,7 @@
if (this.options.avoid_overlapped_widgets &amp;&amp;
!this.can_move_to(
{ size_x: wgd.size_x, size_y: wgd.size_y }, wgd.col, wgd.row)
{size_x: wgd.size_x, size_y: wgd.size_y}, wgd.col, wgd.row)
) {
wgd = this.next_position(wgd.size_x, wgd.size_y);
wgd.el = $el;
@@ -429,7 +452,7 @@
* to update in the mapped array.
* @return {Class} Returns the instance of the Gridster Class.
*&#x2F;
fn.remove_from_gridmap = function(grid_data){
fn.remove_from_gridmap = function(grid_data) {
return this.update_widget_position(grid_data, false);
};
@@ -444,12 +467,12 @@
* position .
* @return {Class} Returns the instance of the Gridster Class.
*&#x2F;
fn.add_to_gridmap = function(grid_data, value){
fn.add_to_gridmap = function(grid_data, value) {
this.update_widget_position(grid_data, value || grid_data.el);
if (grid_data.el) {
var $widgets = this.widgets_below(grid_data.el);
$widgets.each($.proxy(function(i, widget){
$widgets.each($.proxy(function(i, widget) {
this.move_widget_up( $(widget));
}, this));
}
@@ -457,8 +480,9 @@
&#x2F;**
* Make widgets draggable. It Wraps the jQuery UI Draggable Plugin.
* Make widgets draggable.
*
* @uses Draggable
* @method draggable
* @return {Class} Returns the instance of the Gridster Class.
*&#x2F;
@@ -468,7 +492,9 @@
offset_left: this.options.widget_margins[0],
items: &#x27;.gs_w&#x27;,
start: function(event, ui) {
self.$widgets.filter(&#x27;.player-revert&#x27;).removeClass(&#x27;player-revert&#x27;);
self.$widgets.filter(&#x27;.player-revert&#x27;)
.removeClass(&#x27;player-revert&#x27;);
self.$player = $(this);
self.$helper = self.options.draggable.helper === &#x27;clone&#x27; ?
$(ui.helper) : self.$player;
@@ -498,7 +524,6 @@
* @method on_start_drag
* @param {Event} The original browser event
* @param {Object} A prepared ui object.
* See http:&#x2F;&#x2F;jqueryui.com&#x2F;demos&#x2F;draggable&#x2F; for more info.
*&#x2F;
fn.on_start_drag = function(event, ui) {
@@ -550,14 +575,15 @@
* @method on_drag
* @param {Event} The original browser event
* @param {Object} A prepared ui object.
* See http:&#x2F;&#x2F;jqueryui.com&#x2F;demos&#x2F;draggable&#x2F; for more info.
*&#x2F;
fn.on_drag = function(event, ui) {
var abs_offset = {
left: ui.position.left + this.baseX,
top: ui.position.top + this.baseY
}
this.colliders_data = this.collision_api.get_closest_colliders(abs_offset);
this.colliders_data = this.collision_api.get_closest_colliders(
abs_offset);
this.on_overlapped_column_change(
this.on_start_overlapping_column,
@@ -587,10 +613,10 @@
* @method on_stop_drag
* @param {Event} The original browser event
* @param {Object} A prepared ui object.
* See http:&#x2F;&#x2F;jqueryui.com&#x2F;demos&#x2F;draggable&#x2F; for more info.
*&#x2F;
fn.on_stop_drag = function(event, ui) {
this.$helper.add(this.$player).add(this.$wrapper).removeClass(&#x27;dragging&#x27;);
this.$helper.add(this.$player).add(this.$wrapper)
.removeClass(&#x27;dragging&#x27;);
ui.position.left = ui.position.left + this.baseX;
ui.position.top = ui.position.top + this.baseY;
@@ -606,14 +632,14 @@
this.on_stop_overlapping_row
);
this.$player
.addClass(&#x27;player-revert&#x27;).removeClass(&#x27;player&#x27;).attr({
&#x27;data-col&#x27;: this.placeholder_grid_data.col,
&#x27;data-row&#x27;: this.placeholder_grid_data.row
}).css({
&#x27;left&#x27;: &#x27;&#x27;,
&#x27;top&#x27;: &#x27;&#x27;
});
this.$player.addClass(&#x27;player-revert&#x27;).removeClass(&#x27;player&#x27;)
.attr({
&#x27;data-col&#x27;: this.placeholder_grid_data.col,
&#x27;data-row&#x27;: this.placeholder_grid_data.row
}).css({
&#x27;left&#x27;: &#x27;&#x27;,
&#x27;top&#x27;: &#x27;&#x27;
});
this.$changed = this.$changed.add(this.$player);
@@ -782,7 +808,7 @@
var wgd_can_go_up = [];
var wgd_can_not_go_up = [];
$widgets.each($.proxy(function(i, w){
$widgets.each($.proxy(function(i, w) {
var $w = $(w);
var wgd = $w.coords().grid;
if (this.can_go_widget_up(wgd)) {
@@ -811,7 +837,7 @@
* @return {Array} Returns the array sorted.
*&#x2F;
fn.sort_by_row_asc = function(widgets) {
widgets = widgets.sort(function(a, b){
widgets = widgets.sort(function(a, b) {
if (a.row &gt; b.row) {
return 1;
}
@@ -831,7 +857,7 @@
* @return {Array} Returns the array sorted.
*&#x2F;
fn.sort_by_row_and_col_asc = function(widgets) {
widgets = widgets.sort(function(a, b){
widgets = widgets.sort(function(a, b) {
if (a.row &gt; b.row || a.row == b.row &amp;&amp; a.col &gt; b.col) {
return 1;
}
@@ -851,7 +877,7 @@
* @return {Array} Returns the array sorted.
*&#x2F;
fn.sort_by_col_asc = function(widgets) {
widgets = widgets.sort(function(a, b){
widgets = widgets.sort(function(a, b) {
if (a.col &gt; b.col) {
return 1;
}
@@ -871,8 +897,8 @@
* @return {Array} Returns the array sorted.
*&#x2F;
fn.sort_by_row_desc = function(widgets) {
widgets = widgets.sort(function(a, b){
if (a.row + a.size_y &lt; b.row + b.size_y){
widgets = widgets.sort(function(a, b) {
if (a.row + a.size_y &lt; b.row + b.size_y) {
return 1;
}
return -1;
@@ -893,7 +919,7 @@
* @return {Class} Returns the instance of the Gridster Class.
*&#x2F;
fn.manage_movements = function($widgets, to_col, to_row) {
$.each($widgets, $.proxy(function(i, w){
$.each($widgets, $.proxy(function(i, w) {
var wgd = w;
var $w = wgd.el;
@@ -968,7 +994,7 @@
* @return {Boolean} Returns true or false.
*&#x2F;
fn.is_placeholder_in = function(col, row) {
var c = this.cells_occupied_by_placeholder || [];
var c = this.cells_occupied_by_placeholder || {};
return this.is_placeholder_in_col(col) &amp;&amp; $.inArray(row, c.rows) &gt;= 0;
};
@@ -1077,9 +1103,9 @@
var cells = this.cells_occupied_by_player;
var $widgets = $([]);
$.each(cells.cols, $.proxy(function(i, col){
$.each(cells.rows, $.proxy(function(i, row){
if(this.is_widget(col, row)){
$.each(cells.cols, $.proxy(function(i, col) {
$.each(cells.rows, $.proxy(function(i, row) {
if(this.is_widget(col, row)) {
$widgets = $widgets.add(this.gridmap[col][row]);
}
}, this));
@@ -1120,8 +1146,6 @@
this.placeholder_grid_data.col = col;
this.placeholder_grid_data.row = row;
this.cells_occupied_by_placeholder = this.get_cells_occupied(
this.placeholder_grid_data);
@@ -1131,9 +1155,9 @@
});
if (moved_down || changed_column) {
$nexts.each($.proxy(function(i, widget){
$nexts.each($.proxy(function(i, widget) {
this.move_widget_up(
$(widget), this.placeholder_grid_data.col - col + phgd.size_y);
$(widget), this.placeholder_grid_data.col - col + phgd.size_y);
}, this));
}
@@ -1158,12 +1182,12 @@
&#x2F;* generate an array with columns as index and array with upper rows
* empty as value *&#x2F;
this.for_each_column_occupied(widget_grid_data, function(tcol){
this.for_each_column_occupied(widget_grid_data, function(tcol) {
var grid_col = this.gridmap[tcol];
var r = p_bottom_row + 1;
upper_rows[tcol] = [];
while (--r &gt; 0){
while (--r &gt; 0) {
if (this.is_empty(tcol, r) || this.is_player(tcol, r) ||
this.is_widget(tcol, r) &amp;&amp;
grid_col[r].is($widgets_under_player)
@@ -1206,7 +1230,7 @@
&#x2F;* generate an array with columns as index and array with upper rows
* empty as value *&#x2F;
this.for_each_column_occupied(widget_grid_data, function(tcol){
this.for_each_column_occupied(widget_grid_data, function(tcol) {
var grid_col = this.gridmap[tcol];
upper_rows[tcol] = [];
@@ -1217,7 +1241,9 @@
break;
}
if (!this.is_player(tcol, r) &amp;&amp;!this.is_placeholder_in(tcol, r)) {
if (!this.is_player(tcol, r) &amp;&amp;
!this.is_placeholder_in(tcol, r)
) {
upper_rows[tcol].push(r);
}
@@ -1253,7 +1279,7 @@
* @return {Number|Boolean} Returns the upper row valid from the &#x60;upper_rows&#x60;
* for the widget in question.
*&#x2F;
fn.get_valid_rows = function(widget_grid_data, upper_rows, min_row){
fn.get_valid_rows = function(widget_grid_data, upper_rows, min_row) {
var p_top_row = widget_grid_data.row;
var p_bottom_row = widget_grid_data.row + widget_grid_data.size_y - 1;
var size_y = widget_grid_data.size_y;
@@ -1262,7 +1288,7 @@
while (++r &lt;= p_bottom_row ) {
var common = true;
$.each(upper_rows, function(col, rows){
$.each(upper_rows, function(col, rows) {
if (rows &amp;&amp; $.inArray(r, rows) === -1) {
common = false;
}
@@ -1331,8 +1357,8 @@
var rows_from_bottom = this.cells_occupied_by_player.rows.slice(0);
rows_from_bottom.reverse();
$.each(this.cells_occupied_by_player.cols, $.proxy(function(i, col){
$.each(rows_from_bottom, $.proxy(function(i, row){
$.each(this.cells_occupied_by_player.cols, $.proxy(function(i, col) {
$.each(rows_from_bottom, $.proxy(function(i, row) {
&#x2F;&#x2F; if there is a widget in the player position
if (!this.gridmap[col]) { return true; } &#x2F;&#x2F;next iteration
var $w = this.gridmap[col][row];
@@ -1419,7 +1445,8 @@
* if they can.
*
* @method move_widget_to
* @param {HTMLElement} $widget The jQuery wrapped HTMLElement of the widget is going to be moved.
* @param {HTMLElement} $widget The jQuery wrapped HTMLElement of the
* widget is going to be moved.
* @return {Class} Returns the instance of the Gridster Class.
*&#x2F;
fn.move_widget_to = function($widget, row) {
@@ -1442,12 +1469,12 @@
this.$changed = this.$changed.add($widget);
$next_widgets.each(function(i, widget){
$next_widgets.each(function(i, widget) {
var $w = $(widget);
var wgd = $w.coords().grid;
var can_go_up = self.can_go_widget_up(wgd);
if (can_go_up &amp;&amp; can_go_up !== wgd.row){
if (can_go_up &amp;&amp; can_go_up !== wgd.row) {
self.move_widget_to($w, can_go_up);
}
});
@@ -1473,12 +1500,14 @@
if (!this.can_go_up($widget)) { return false; } &#x2F;&#x2F;break;
this.for_each_column_occupied(el_grid_data, function(col){
this.for_each_column_occupied(el_grid_data, function(col) {
&#x2F;&#x2F; can_go_up
if ($.inArray($widget, moved) === -1) {
var widget_grid_data = $widget.coords().grid;
var next_row = actual_row - y_units;
next_row = this.can_go_up_to_row(widget_grid_data, col, next_row);
next_row = this.can_go_up_to_row(
widget_grid_data, col, next_row);
if (!next_row) {
return true;
}
@@ -1493,7 +1522,7 @@
moved.push($widget);
$next_widgets.each($.proxy(function(i, widget){
$next_widgets.each($.proxy(function(i, widget) {
this.move_widget_up($(widget), y_units);
}, this));
}
@@ -1506,7 +1535,8 @@
* Move down the specified widget and all below it.
*
* @method move_widget_down
* @param {HTMLElement} $widget The jQuery object representing the widget you want to move.
* @param {HTMLElement} $widget The jQuery object representing the widget
* you want to move.
* @param {Number} The number of cells that the widget has to move.
* @return {Class} Returns the instance of the Gridster Class.
*&#x2F;
@@ -1526,7 +1556,7 @@
this.remove_from_gridmap(widget_grid_data);
$next_widgets.each($.proxy(function(i, widget){
$next_widgets.each($.proxy(function(i, widget) {
var $w = $(widget);
var wd = $w.coords().grid;
var tmp_y = this.displacement_diff(
@@ -1566,13 +1596,14 @@
var actual_row = widget_grid_data.row;
var r;
&#x2F;&#x2F;generate an array with columns as index and array with upper rows empty in the column
this.for_each_column_occupied(widget_grid_data, function(tcol){
&#x2F;* generate an array with columns as index and array with
* upper rows empty in the column *&#x2F;
this.for_each_column_occupied(widget_grid_data, function(tcol) {
var grid_col = ga[tcol];
urc[tcol] = [];
r = actual_row;
while (r--){
while (r--) {
if (this.is_empty(tcol, r) &amp;&amp;
!this.is_placeholder_in(tcol, r)
) {
@@ -1591,7 +1622,8 @@
if (!result) { return false; }
&#x2F;&#x2F;get common rows starting from upper position in all the columns widget occupies
&#x2F;* get common rows starting from upper position in all the columns
* that widget occupies *&#x2F;
r = row;
for (r = 1; r &lt; actual_row; r++) {
var common = true;
@@ -1617,7 +1649,7 @@
var diffs = [];
var parent_max_y = parent_bgd.row + parent_bgd.size_y;
this.for_each_column_occupied(widget_grid_data, function(col){
this.for_each_column_occupied(widget_grid_data, function(col) {
var temp_y_units = 0;
for (var r = parent_max_y; r &lt; actual_row; r++) {
@@ -1650,9 +1682,9 @@
var next_row = el_grid_data.row + el_grid_data.size_y - 1;
var $nexts = $([]);
this.for_each_column_occupied(el_grid_data, function(col){
this.for_each_column_occupied(el_grid_data, function(col) {
self.for_each_widget_below(col, next_row,
function(tcol, trow){
function(tcol, trow) {
if (!self.is_player(this) &amp;&amp;
$.inArray(this, $nexts) === -1) {
$nexts = $nexts.add(this);
@@ -1704,7 +1736,8 @@
var result = true;
if (initial_row === 1) { return false; }
this.for_each_column_occupied(el_grid_data, function(col){
this.for_each_column_occupied(el_grid_data, function(col) {
var $w = this.is_widget(col, prev_row);
if (this.is_occupied(col, prev_row) ||
this.is_player(col, prev_row) ||
this.is_placeholder_in(col, prev_row)
@@ -1721,8 +1754,8 @@
&#x2F;**
* Check if it&#x27;s possible to move a widget to a specific col&#x2F;row. It takes
* into account the dimensions (&#x60;size_y&#x60; and &#x60;size_x&#x60; attrs. of the grid coords
* object) the widget occupies.
* into account the dimensions (&#x60;size_y&#x60; and &#x60;size_x&#x60; attrs. of the grid
* coords object) the widget occupies.
*
* @method can_move_to
* @param {Object} widget_grid_data The grid coords object that represents
@@ -1748,7 +1781,7 @@
return false;
};
this.for_each_cell_occupied(future_wd, function(tcol, trow){
this.for_each_cell_occupied(future_wd, function(tcol, trow) {
var $tw = this.is_widget(tcol, trow);
if ($tw &amp;&amp; (!widget_grid_data.el || $tw.is($w))) {
result = false;
@@ -1760,7 +1793,8 @@
&#x2F;**
* Given the leftmost column returns all columns that are overlapping with the player.
* Given the leftmost column returns all columns that are overlapping
* with the player.
*
* @method get_targeted_columns
* @param {Number} [from_col] The leftmost column.
@@ -1834,8 +1868,8 @@
* @return {Class} Returns the instance of the Gridster Class.
*&#x2F;
fn.for_each_cell_occupied = function(grid_data, callback) {
this.for_each_column_occupied(grid_data, function(col){
this.for_each_row_occupied(grid_data, function(row){
this.for_each_column_occupied(grid_data, function(col) {
this.for_each_row_occupied(grid_data, function(row) {
callback.call(this, col, row);
});
});
@@ -1869,7 +1903,8 @@
* @method for_each_row_occupied
* @param {Object} el_grid_data The grid coords object that represents
* the widget.
* @param {Function} callback The function to execute on each column iteration. The row number is passed as first argument.
* @param {Function} callback The function to execute on each column
* iteration. The row number is passed as first argument.
* @return {Class} Returns the instance of the Gridster Class.
*&#x2F;
fn.for_each_row_occupied = function(el_grid_data, callback) {
@@ -1935,7 +1970,8 @@
* @param {Number} col The column to start iterating.
* @param {Number} row The row to start iterating.
* @param {Function} callback The function to execute on each widget
* iteration. The value of &#x60;this&#x60; inside the function is the jQuery wrapped HTMLElement.
* iteration. The value of &#x60;this&#x60; inside the function is the jQuery
* wrapped HTMLElement.
* @return {Class} Returns the instance of the Gridster Class.
*&#x2F;
fn.for_each_widget_above = function(col, row, callback) {
@@ -1951,7 +1987,8 @@
* @param {Number} col The column to start iterating.
* @param {Number} row The row to start iterating.
* @param {Function} callback The function to execute on each widget
* iteration. The value of &#x60;this&#x60; inside the function is the jQuery wrapped HTMLElement.
* iteration. The value of &#x60;this&#x60; inside the function is the jQuery wrapped
* HTMLElement.
* @return {Class} Returns the instance of the Gridster Class.
*&#x2F;
fn.for_each_widget_below = function(col, row, callback) {
@@ -1992,14 +2029,13 @@
};
fn.get_widgets_from = function(col, row) {
var ga = this.gridmap;
var $widgets = $();
if (col) {
$widgets = $widgets.add(
this.$widgets.filter(function(){
this.$widgets.filter(function() {
var tcol = $(this).attr(&#x27;data-col&#x27;);
return (tcol == col || tcol &gt; col);
})
@@ -2008,7 +2044,7 @@
if (row) {
$widgets = $widgets.add(
this.$widgets.filter(function(){
this.$widgets.filter(function() {
var trow = $(this).attr(&#x27;data-row&#x27;);
return (trow == row || trow &gt; row);
})
@@ -2028,7 +2064,6 @@
fn.set_dom_grid_height = function() {
var r = this.get_highest_occupied_cell().row;
this.$el.css(&#x27;height&#x27;, r * this.min_widget_height);
&#x2F;&#x2F; this.$widgets.draggable(&quot;option&quot;, &quot;containment&quot;, this.$el);
return this;
};
@@ -2053,11 +2088,14 @@
opts.cols || (opts.cols = this.cols);
opts.rows || (opts.rows = this.rows);
opts.namespace || (opts.namespace = &#x27;&#x27;);
opts.widget_base_dimensions || (opts.widget_base_dimensions = this.options.widget_base_dimensions);
opts.widget_margins || (opts.widget_margins = this.options.widget_margins);
opts.min_widget_width = (opts.widget_margins[0] * 2) + opts.widget_base_dimensions[0];
opts.min_widget_height = (opts.widget_margins[1] * 2) + opts.widget_base_dimensions[1];
opts.widget_base_dimensions ||
(opts.widget_base_dimensions = this.options.widget_base_dimensions);
opts.widget_margins ||
(opts.widget_margins = this.options.widget_margins);
opts.min_widget_width = (opts.widget_margins[0] * 2) +
opts.widget_base_dimensions[0];
opts.min_widget_height = (opts.widget_margins[1] * 2) +
opts.widget_base_dimensions[1];
var serialized_opts = $.param(opts);
&#x2F;&#x2F; don&#x27;t duplicate stylesheets for the same configuration
@@ -2069,27 +2107,31 @@
&#x2F;* generate CSS styles for cols *&#x2F;
for (i = opts.cols + extra_cells; i &gt;= 0; i--) {
styles += opts.namespace + &#x27; [data-col=&quot;&#x27;+ (i + 1) +&#x27;&quot;] { left: &#x27; +
((i * opts.widget_base_dimensions[0]) + (i *opts.widget_margins[0] ) + ((i+1) * opts.widget_margins[0])) +
&#x27;px;} &#x27;;
styles += (opts.namespace + &#x27; [data-col=&quot;&#x27;+ (i + 1) + &#x27;&quot;] { left:&#x27; +
((i * opts.widget_base_dimensions[0]) +
(i * opts.widget_margins[0]) +
((i + 1) * opts.widget_margins[0])) + &#x27;px;} &#x27;);
}
&#x2F;* generate CSS styles for rows *&#x2F;
for (i = opts.rows + extra_cells; i &gt;= 0; i--) {
styles += opts.namespace + &#x27; [data-row=&quot;&#x27; + (i + 1) + &#x27;&quot;] { top: &#x27; +
((i * opts.widget_base_dimensions[1]) + (i * opts.widget_margins[1]) + ((i+1) * opts.widget_margins[1]) ) +
&#x27;px;} &#x27;;
styles += (opts.namespace + &#x27; [data-row=&quot;&#x27; + (i + 1) + &#x27;&quot;] { top:&#x27; +
((i * opts.widget_base_dimensions[1]) +
(i * opts.widget_margins[1]) +
((i + 1) * opts.widget_margins[1]) ) + &#x27;px;} &#x27;);
}
for (var y = 1; y &lt; max_size_y; y++) {
styles += opts.namespace + &#x27; [data-sizey=&quot;&#x27; + (y) + &#x27;&quot;] { height: &#x27; +
(y * opts.widget_base_dimensions[1] + (y-1)*(opts.widget_margins[1]*2)) + &#x27;px;}&#x27;;
styles += (opts.namespace + &#x27; [data-sizey=&quot;&#x27; + y + &#x27;&quot;] { height:&#x27; +
(y * opts.widget_base_dimensions[1] +
(y - 1) * (opts.widget_margins[1] * 2)) + &#x27;px;}&#x27;);
}
for (var x = 1; x &lt; max_size_x; x++) {
styles += opts.namespace + &#x27; [data-sizex=&quot;&#x27; + (x) + &#x27;&quot;] { width: &#x27; +
(x * opts.widget_base_dimensions[0] + (x-1)*(opts.widget_margins[0]*2)) + &#x27;px;}&#x27;;
styles += (opts.namespace + &#x27; [data-sizex=&quot;&#x27; + x + &#x27;&quot;] { width:&#x27; +
(x * opts.widget_base_dimensions[0] +
(x - 1) * (opts.widget_margins[0] * 2)) + &#x27;px;}&#x27;);
}
return this.add_style_tag(styles);
@@ -2103,7 +2145,7 @@
* @param {String} css The styles to apply.
* @return {Object} Returns the instance of the Gridster class.
*&#x2F;
fn.add_style_tag = function(css){
fn.add_style_tag = function(css) {
var d = document;
var tag = d.createElement(&#x27;style&#x27;);
@@ -2167,7 +2209,7 @@
this.baseX = ($(window).width() - aw) &#x2F; 2;
this.baseY = this.$wrapper.offset().top;
$.each(this.faux_grid, $.proxy(function(i, coords){
$.each(this.faux_grid, $.proxy(function(i, coords) {
this.faux_grid[i] = coords.update({
left: this.baseX + (coords.data.col -1) * this.min_widget_width,
top: this.baseY + (coords.data.row -1) * this.min_widget_height
@@ -2186,7 +2228,7 @@
* @return {Object} Returns the instance of the Gridster class.
*&#x2F;
fn.get_widgets_from_DOM = function() {
this.$widgets.each($.proxy(function(i, widget){
this.$widgets.each($.proxy(function(i, widget) {
this.register_widget($(widget));
}, this));
return this;

View File

@@ -42,9 +42,25 @@
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href=".&#x2F;classes/Collision.html">Collision</a></li>
<li><a href=".&#x2F;classes/Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects..html">Collision
Detects collisions between a DOM element against other DOM elements or
Coords objects.</a></li>
<li><a href=".&#x2F;classes/Coords.html">Coords</a></li>
<li><a href=".&#x2F;classes/Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide..html">Coords
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
to simulate DOM elements on the screen.
Coords is used by Gridster to create a faux grid with any DOM element can
collide.</a></li>
<li><a href=".&#x2F;classes/Draggable.html">Draggable</a></li>