mirror of
https://github.com/librenms/librenms.git
synced 2024-10-07 16:52:45 +00:00
Files
321 lines
10 KiB
HTML
321 lines
10 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>src/jquery.collision.js</title>
|
||
|
|
<link rel="stylesheet" href="http://yui.yahooapis.com/3.5.1/build/cssgrids/cssgrids-min.css">
|
||
|
|
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
|
||
|
|
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
|
||
|
|
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
|
||
|
|
<script src="http://yui.yahooapis.com/combo?3.5.1/build/yui/yui-min.js"></script>
|
||
|
|
</head>
|
||
|
|
<body class="yui3-skin-sam">
|
||
|
|
|
||
|
|
<div id="doc">
|
||
|
|
<div id="hd" class="yui3-g header">
|
||
|
|
<div class="yui3-u-3-4">
|
||
|
|
|
||
|
|
<!-- <h1><img src="../assets/css/logo.png" title=""></h1> -->
|
||
|
|
<h1><img src="http://ducksboard.com/wp-content/themes/blog-theme-ducksboard/images/ducksboard.png" title=""></h1>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="yui3-u-1-4 version">
|
||
|
|
<em>API Docs for: </em>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="bd" class="yui3-g">
|
||
|
|
|
||
|
|
<div class="yui3-u-1-4">
|
||
|
|
<div id="docs-sidebar" class="sidebar apidocs">
|
||
|
|
<div id="api-list">
|
||
|
|
<h2 class="off-left">APIs</h2>
|
||
|
|
<div id="api-tabview" class="tabview">
|
||
|
|
<ul class="tabs">
|
||
|
|
<li><a href="#api-classes">Classes</a></li>
|
||
|
|
<li><a href="#api-modules">Modules</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div id="api-tabview-filter">
|
||
|
|
<input type="search" id="api-filter" placeholder="Type to filter APIs">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="api-tabview-panel">
|
||
|
|
<ul id="api-classes" class="apis classes">
|
||
|
|
|
||
|
|
<li><a href="../classes/Collision.html">Collision</a></li>
|
||
|
|
|
||
|
|
<li><a href="../classes/Coords.html">Coords</a></li>
|
||
|
|
|
||
|
|
<li><a href="../classes/Gridster.html">Gridster</a></li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<ul id="api-modules" class="apis modules">
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="yui3-u-3-4">
|
||
|
|
<div id="api-options">
|
||
|
|
Show:
|
||
|
|
<label for="api-show-inherited">
|
||
|
|
<input type="checkbox" id="api-show-inherited" checked>
|
||
|
|
Inherited
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<label for="api-show-protected">
|
||
|
|
<input type="checkbox" id="api-show-protected">
|
||
|
|
Protected
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<label for="api-show-private">
|
||
|
|
<input type="checkbox" id="api-show-private">
|
||
|
|
Private
|
||
|
|
</label>
|
||
|
|
<label for="api-show-deprecated">
|
||
|
|
<input type="checkbox" id="api-show-deprecated">
|
||
|
|
Deprecated
|
||
|
|
</label>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="apidocs">
|
||
|
|
<div id="docs-main">
|
||
|
|
<div class="content">
|
||
|
|
<h1 class="file-heading">File: src/jquery.collision.js</h1>
|
||
|
|
|
||
|
|
<div class="file">
|
||
|
|
<pre class="code prettyprint linenums">
|
||
|
|
/*
|
||
|
|
* jquery.collision
|
||
|
|
* https://github.com/ducksboard/gridster.js
|
||
|
|
*
|
||
|
|
* Copyright (c) 2012 ducksboard
|
||
|
|
* Licensed under the MIT, GPL licenses.
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function($, window, document, undefined){
|
||
|
|
|
||
|
|
var defaults = {
|
||
|
|
colliders_context: document.body,
|
||
|
|
on_overlap: function(collider_data){},
|
||
|
|
on_overlap_start : function(collider_data){
|
||
|
|
// console.log('the element START being a collider', collider_data);
|
||
|
|
},
|
||
|
|
on_overlap_stop : function(collider_data){
|
||
|
|
// console.log('the element STOP being a collider', collider_data);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Collision
|
||
|
|
*
|
||
|
|
* @class Collision
|
||
|
|
* @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
|
||
|
|
* @constructor
|
||
|
|
*/
|
||
|
|
function Collision(element, colliders, options) {
|
||
|
|
this.options = $.extend(defaults, options);
|
||
|
|
this.$element = element;
|
||
|
|
this.last_colliders = [];
|
||
|
|
this.last_colliders_coords = [];
|
||
|
|
if (typeof colliders === 'string' || colliders instanceof jQuery) {
|
||
|
|
this.$colliders = $(colliders,
|
||
|
|
this.options.colliders_context).not(this.$element);
|
||
|
|
}else{
|
||
|
|
this.colliders = $(colliders);
|
||
|
|
}
|
||
|
|
|
||
|
|
this.init();
|
||
|
|
}
|
||
|
|
|
||
|
|
var fn = Collision.prototype;
|
||
|
|
|
||
|
|
fn.init = function() {
|
||
|
|
this.find_collisions();
|
||
|
|
};
|
||
|
|
|
||
|
|
fn.overlaps = function(a, b) {
|
||
|
|
var x = false;
|
||
|
|
var y = false;
|
||
|
|
|
||
|
|
if ((b.x1 >= a.x1 && b.x1 <= a.x2) ||
|
||
|
|
(b.x2 >= a.x1 && b.x2 <= a.x2) ||
|
||
|
|
(a.x1 >= b.x1 && a.x2 <= b.x2)
|
||
|
|
) { x = true; }
|
||
|
|
|
||
|
|
if ((b.y1 >= a.y1 && b.y1 <= a.y2) ||
|
||
|
|
(b.y2 >= a.y1 && b.y2 <= a.y2) ||
|
||
|
|
(a.y1 >= b.y1 && a.y2 <= b.y2)
|
||
|
|
) { y = true; }
|
||
|
|
|
||
|
|
return (x && y);
|
||
|
|
};
|
||
|
|
|
||
|
|
fn.detect_overlapping_region = function(a, b){
|
||
|
|
var regionX = '';
|
||
|
|
var regionY = '';
|
||
|
|
|
||
|
|
if (a.y1 > b.cy && a.y1 < b.y2) { regionX = 'N'; }
|
||
|
|
if (a.y2 > b.y1 && a.y2 < b.cy) { regionX = 'S'; }
|
||
|
|
if (a.x1 > b.cx && a.x1 < b.x2) { regionY = 'W'; }
|
||
|
|
if (a.x2 > b.x1 && a.x2 < b.cx) { regionY = 'E'; }
|
||
|
|
|
||
|
|
return (regionX + regionY) || 'C';
|
||
|
|
};
|
||
|
|
|
||
|
|
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);
|
||
|
|
|
||
|
|
return $({
|
||
|
|
left: x1,
|
||
|
|
top: y1,
|
||
|
|
width : (x2 - x1),
|
||
|
|
height: (y2 - y1)
|
||
|
|
}).coords().get();
|
||
|
|
};
|
||
|
|
|
||
|
|
fn.calculate_overlapped_area = function(coords){
|
||
|
|
return (coords.width * coords.height);
|
||
|
|
};
|
||
|
|
|
||
|
|
fn.manage_colliders_start_stop = function(new_colliders_coords, start_callback, stop_callback){
|
||
|
|
var last = this.last_colliders_coords;
|
||
|
|
|
||
|
|
for (var i = 0, il = last.length; i < 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 < jl; j++) {
|
||
|
|
if ($.inArray(new_colliders_coords[j], last) === -1) {
|
||
|
|
stop_callback.call(this, new_colliders_coords[j]);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
fn.find_collisions = function(){
|
||
|
|
var self = this;
|
||
|
|
var colliders_coords = [];
|
||
|
|
var colliders_data = [];
|
||
|
|
var $colliders = (this.colliders || this.$colliders);
|
||
|
|
var count = $colliders.length;
|
||
|
|
|
||
|
|
while(count--){
|
||
|
|
var $collider = self.$colliders ? $($colliders[count]) : $colliders[count];
|
||
|
|
var player_coords = self.$element.coords().update().get();
|
||
|
|
var $collider_coords_ins = ($collider.isCoords) ?
|
||
|
|
$collider.update() : $collider.coords();
|
||
|
|
var collider_coords = $collider_coords_ins.get();
|
||
|
|
var overlaps = self.overlaps(player_coords, collider_coords);
|
||
|
|
|
||
|
|
if (!overlaps) {
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
|
||
|
|
var region = self.detect_overlapping_region(player_coords,
|
||
|
|
collider_coords);
|
||
|
|
//todo: make this if customizable
|
||
|
|
if (region === 'C'){
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
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;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
fn.get_closest_colliders = function(){
|
||
|
|
var colliders = this.find_collisions();
|
||
|
|
var min_area = 100;
|
||
|
|
colliders.sort(function(a, b){
|
||
|
|
|
||
|
|
if (a.area <= min_area) {
|
||
|
|
return 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* if colliders are being overlapped by the "C" (center) region,
|
||
|
|
* we have to set a lower index in the array to which they are placed
|
||
|
|
* above in the grid. */
|
||
|
|
if (a.region === 'C' && b.region === 'C') {
|
||
|
|
if (a.coords.y1 < b.coords.y1 || a.coords.x1 < b.coords.x1) {
|
||
|
|
return - 1;
|
||
|
|
}else{
|
||
|
|
return 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (a.area < b.area){
|
||
|
|
return 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
return 1;
|
||
|
|
});
|
||
|
|
return colliders;
|
||
|
|
};
|
||
|
|
|
||
|
|
//jQuery adapter
|
||
|
|
$.fn.collision = function(collider, options) {
|
||
|
|
return new Collision( this, collider, options );
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
}(jQuery, window, document));
|
||
|
|
|
||
|
|
</pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script src="../assets/vendor/prettify/prettify-min.js"></script>
|
||
|
|
<script>prettyPrint();</script>
|
||
|
|
<script src="../assets/js/yui-prettify.js"></script>
|
||
|
|
<script src="../assets/../api.js"></script>
|
||
|
|
<script src="../assets/js/api-filter.js"></script>
|
||
|
|
<script src="../assets/js/api-list.js"></script>
|
||
|
|
<script src="../assets/js/api-search.js"></script>
|
||
|
|
<script src="../assets/js/apidocs.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|