Skip to content

Commit

Permalink
Initial implementation and an example page
Browse files Browse the repository at this point in the history
  • Loading branch information
cturhan committed Jul 22, 2014
0 parents commit 48daeec
Show file tree
Hide file tree
Showing 3 changed files with 347 additions and 0 deletions.
115 changes: 115 additions & 0 deletions index.html
@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="js/jquery.aim.js"></script>
</head>
<body>
<div id="main_container" class="container full-width">
<header class="navbar navbar-default">Header </header>
<div class="navbar">
<div class="col-xs-offset-2">
<button id="hamburger" class="btn navbar-toggle pull-left" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<ul id="menu" class="nav">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Newsfeed</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Settings</a></li>
</ul>
</div>

<div class="col-xs-8">
<div class="row">
<div class="col-xs-2 col-xs-offset-5">
<div id="target1" class="btn-group text-center">
<button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Operations
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
<li><a href="#">Rename</a></li>
<li><a href="#">Add</a></li>
<li><a href="#">Copy</a></li>
<li><a href="#">Delete</a></li>
</ul>
</div>

</div>
</div>

<div class="row buffer-top">
<div class="panel panel-primary">
<div class="panel-body">
<p> You can use this plugin with popovers too </p>

<button type="button" class="popovers btn btn-default pull-right" data-container="body" data-animation="false" data-delay="0" data-toggle="popover" data-placement="right" data-content="Hello there! Does it work properly?">
Try it on a popup!
</button>
</div>
</div>
</div>


</div>
</div>
</div>

<script>

function drawCircles(d) {
if (d) {
$('.radius, #route').show();
} else {
$('.radius, #route').hide();
}
}


$().ready(function() {
$('header').aim({
className: 'shown'
});

$('#hamburger').aim({
aimEnter: function() {
$('#menu').show();
}, aimExit:function(){
$('#menu').hide();
}
});

$('#target1').aim({
className: 'open'
});

$('.popovers').aim({
aimEnter: function() {
this.popover('show');
},
aimExit: function() {
this.popover('hide');
}
});

//$.aimDebug(true)

});
</script>
</body>
</html>
200 changes: 200 additions & 0 deletions jquery.aim.js
@@ -0,0 +1,200 @@
(function($) {

var elementList = [];
var v = {x: 0, y: 0, r: 0, t: 0}, p = {x: 0, y: 0}, vr = 0, t = 12, mouseX = 0, mouseY = 0,
DEBUG = false, trailblazer = null, tbSize = 50, tbRadius = 50, tbCenter = {x: 0, y: 0}, tbRect = {x0: 0, y0: 0, x1: tbSize, y1: tbSize}, tbRad = 1;

$.fn.aim = function(opts) {
// Initialize menu-aim for all elements in jQuery collection
this.each(function() {
init.call(this, opts);
});

return this;
};

$.aimDebug = setDebugMode;

function setDebugMode(val) {
if (val) {
if ($('#jquery-aim-debug').length) {
return;
}
trailblazer = createDebugObject();

} else {
$('#jquery-aim-debug').remove();
trailblazer = null;
}
DEBUG = val;
}

function addRadius(elem) {
var percent = 0.25;
var w = elem.outerWidth();
var h = elem.outerHeight();
var x = elem.offset().left;
var y = elem.offset().top;

var max = Math.sqrt(w * w + h * h);
var r = max / 2 * (1 + percent);

elem.data('aim-data', {
rect: {
x0: x,
y0: y,
x1: x + w,
y1: y + h
},
radius: r,
center: {x: x, y: y},
hover: 0
}
);
}

function createDebugObject() {
var elem = $('<div>')
.attr({
id: '#jquery-aim-debug'
})
.css({
width: 2 * tbRadius,
height: 2 * tbRadius,
'margin-left': -tbRadius,
'margin-top': -tbRadius,
'border-radius': '50%',
top: 0,
left: 0,
border: '2px solid yellowgreen',
'background-color': 'hsla(0,0%,0%, 0.05)',
position: 'absolute'
})
.appendTo($('body'));
return elem;
}

function intersects(c1, r1, c2, r2) {
var d2 = Math.sqrt(Math.pow(c1.x - c2.x, 2) + Math.pow(c1.y - c2.y, 2));
//console.log((r1 + r2 > d2) ? (r1 + r2 - d2) / (r1 + r2) : false);
return (r1 + r2 > d2) ? (r1 + r2 - d2) / (r1 + r2) : false;
}

function intersectsRects(rect, rect2) {


var x_overlap = Math.max(0, Math.min(rect.x1, rect2.x1) - Math.max(rect.x0, rect2.x0));
var y_overlap = Math.max(0, Math.min(rect.y1, rect2.y1) - Math.max(rect.y0, rect2.y0));

return x_overlap * y_overlap / (tbRad * tbRad);
}

function init(opts) {
var $this = $(this);
if ($.inArray($this, elementList) > -1)
return;

elementList.push($this);
addRadius($this);//TO-DO check performance of rectangular intersection
$this.data('aim-data').options = opts;

}

$().ready(function() {
document.addEventListener('mousemove', function(e) {
mouseX = e.x, mouseY = e.y; //TO-DO: check if pageX, pageY is cross-browser or this one
}, false);
});


var timer = setInterval(function() {

if (!elementList.length)
return;

if (p.x && p.y) {
v.x = v.x * 0.7 + (mouseX - p.x) * 0.3;
v.y = v.y * 0.7 + (mouseY - p.y) * 0.3;
}

p.x = mouseX;
p.y = mouseY;


var vd = Math.sqrt(v.x * v.x + v.y * v.y);
vd < 0.1 && (v.x = 0, v.y = 0);
//console.log(vd);
tbRad = Math.sqrt(tbSize * vd + 1);

tbCenter.x = tbCenter.x * 0.7 + (p.x + v.x * t) * 0.3;
tbCenter.x < 0 && (tbCenter.x = 0);
(tbCenter.x > $(window).width() - tbRad) && (tbCenter.x = $(window).width() - tbRad);

tbRect.x0 = tbCenter.x - tbRad;
tbRect.x1 = tbCenter.x + tbRad;

tbCenter.y = tbCenter.y * 0.7 + (p.y + v.y * t) * 0.3;
tbCenter.y < 0 && (tbCenter.y = 0);
(tbCenter.y > $(window).height() - tbRad) && (tbCenter.y = $(window).height() - tbRad);

tbRect.y0 = tbCenter.y - tbRad;
tbRect.y1 = tbCenter.y + tbRad;


//Math.sqrt(tbRadius * vd * 5 + 1);


//console.log(v.y);
DEBUG && trailblazer.css({
'-webkit-transform': 'translate(' + tbCenter.x + 'px,' + tbCenter.y + 'px) scale(' + tbRad / tbRadius + ')',
/*width: tbRad * 2,
height: tbRad * 2,
marginLeft: -tbRad + 'px',
marginTop: -tbRad + 'px'*/
});
for (var i = 0; i < elementList.length; i++) {

var target = elementList[i];

var data = target.data('aim-data');

//var isct = intersects(data.center, data.radius, tbCenter, tbRad);
var isct = intersectsRects(data.rect, tbRect);
if (isct && vd !== 0) {
data.hover = data.hover + isct * 0.2;
// target.html(data.hover.toFixed(2));
if (data.hover > 1 && data.hover < 1.31) {
if (data.options.className)
target.addClass(data.options.className);
else if (data.options.aimEnter && typeof data.options.aimEnter === 'function')
data.options.aimEnter.call(target, true);

if (data.hover > 2) {
data.hover = 2;
}
DEBUG && trailblazer.css('border-color', 'tomato');
} else if (data.hover > 2) {
data.hover = 2;
DEBUG && trailblazer.css('border-color', 'tomato');
}
break;
} else {
DEBUG && trailblazer.css('border-color', 'yellowgreen');
}

if (data.hover !== 0) {
data.hover = data.hover - 0.05;
// target.html(data.hover.toFixed(2));
if (data.hover < 0) {
data.hover = 0;
if (data.options.className)
target.removeClass(data.options.className);
else if (data.options.aimExit && typeof data.options.aimExit === 'function')
data.options.aimExit.call(target, true);
}
}
}

}, 16);

})(jQuery);
32 changes: 32 additions & 0 deletions style.css
@@ -0,0 +1,32 @@
.full-width{
width: 100% !important;
}

.buffer-top{
margin-top: 15px;
}

.navbar-toggle .icon-bar{
background-color: dodgerblue
}

.navbar-toggle{
display: block !important;
}

#menu{
display: none;
}

header{
position: fixed !important;
top: 0;
left:0;
width: 100%;
-webkit-transform: translateY(-60px);
-webkit-transition: transform 0.3s;
}

header.shown{
-webkit-transform: translateY(0px);
}

0 comments on commit 48daeec

Please sign in to comment.