glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

made mousewheel scrolling for metacode selection work, and also added ability to use up and down arrow keys to pick metacode

Browse source
This commit is contained in:
Connor Turland 2013-01-05 14:07:46 -05:00
parent 1f2ac7611c
commit 804483beac
3 changed files with 36 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/javascripts/application.js
View file

@ -149,7 +149,8 @@ function addMetacode() {
yRadius:40, yRadius:40,
xPos: 150, xPos: 150,
yPos: 40, yPos: 40,
speed:0.15, speed:0.15,
mouseWheel:true,
bringToFront: true bringToFront: true
}); });
metacodeIMGinit = true; metacodeIMGinit = true;

35
app/assets/javascripts/carousel/cloud-carousel.1.0.5.js
View file

@ -127,6 +127,30 @@
return false; return false;
}); });
// Add code that makes up and down arrows scroll through.
$('.new_topic').bind('keydown keypress',this,function(event) {
//console.log(event)
if (event.keyCode == 38 || event.keyCode == 40)
{
//e.preventDefault();
}
});
$('.new_topic').bind('keyup',this,function(event){
console.log(event);
/*key navigation through elements*/
if (event.keyCode == 38 || event.keyCode == 40) {
switch ( event.keyCode ) {
case 38: // Up
event.data.rotate(-1);
break;
case 40: // Down
event.data.rotate(1);
break;
}
return;
}
});
// You will need this plugin for the mousewheel to work: http://plugins.jquery.com/project/mousewheel // You will need this plugin for the mousewheel to work: http://plugins.jquery.com/project/mousewheel
if (options.mouseWheel) if (options.mouseWheel)
{ {
@ -149,10 +173,10 @@
//$(options.titleBox).html( ($(event.target).attr('title') )); //$(options.titleBox).html( ($(event.target).attr('title') ));
if ( options.bringToFront && event.type == 'click' ) if ( options.bringToFront && event.type == 'click' )
{ {
$(options.titleBox).html( ($(event.target).attr('title') )); $(options.titleBox).html( ($(event.target).attr('title') ));
// METAMAPS CODE // METAMAPS CODE
$('#topic_metacode').val($(event.target).attr('title')); $('#topic_metacode').val($(event.target).attr('title'));
// NOT METAMAPS CODE // NOT METAMAPS CODE
var idx = $(event.target).data('itemIndex'); var idx = $(event.target).data('itemIndex');
var frontIndex = event.data.frontIndex; var frontIndex = event.data.frontIndex;
//var diff = idx - frontIndex; //var diff = idx - frontIndex;
@ -188,7 +212,7 @@
this.showFrontText = function() this.showFrontText = function()
{ {
if ( items[this.frontIndex] === undefined ) { return; } // Images might not have loaded yet. if ( items[this.frontIndex] === undefined ) { return; } // Images might not have loaded yet.
// METAMAPS CODE // METAMAPS CODE
$('#topic_metacode').val($(items[this.frontIndex].image).attr('title')); $('#topic_metacode').val($(items[this.frontIndex].image).attr('title'));
// NOT METAMAPS CODE // NOT METAMAPS CODE
$(options.titleBox).html( $(items[this.frontIndex].image).attr('title')); $(options.titleBox).html( $(items[this.frontIndex].image).attr('title'));
@ -213,6 +237,7 @@
this.rotate = function(direction) this.rotate = function(direction)
{ {
this.frontIndex -= direction; this.frontIndex -= direction;
if (this.frontIndex == -1) this.frontIndex = items.length - 1;
this.frontIndex %= items.length; this.frontIndex %= items.length;
this.destRotation += ( Math.PI / items.length ) * ( 2*direction ); this.destRotation += ( Math.PI / items.length ) * ( 2*direction );
this.showFrontText(); this.showFrontText();

8
app/assets/stylesheets/base.css
View file

@ -90,19 +90,19 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.best_in_place_desc { .CardOnGraph .best_in_place_desc {
width:160px; width:160px;
height:200px; height:180px;
display:block; display:block;
margin-top:2px; margin-top:2px;
} }
.best_in_place_desc input { .CardOnGraph .best_in_place_desc input {
float: right; float: right;
margin: 2px 0px 0px 2px; margin: 2px 0px 0px 2px;
padding: 1px 5px; padding: 1px 5px;
} }
.best_in_place_desc input[value="Save"] { .CardOnGraph .best_in_place_desc input[value="Save"] {
margin-right: -8px; margin-right: -8px;
} }