From 804483beac90976c61ce2f30ff89e3306442cc18 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Sat, 5 Jan 2013 14:07:46 -0500 Subject: [PATCH] made mousewheel scrolling for metacode selection work, and also added ability to use up and down arrow keys to pick metacode --- app/assets/javascripts/application.js | 3 +- .../carousel/cloud-carousel.1.0.5.js | 35 ++++++++++++++++--- app/assets/stylesheets/base.css | 8 ++--- 3 files changed, 36 insertions(+), 10 deletions(-) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 86ffa8b5..07f5bf46 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -149,7 +149,8 @@ function addMetacode() { yRadius:40, xPos: 150, yPos: 40, - speed:0.15, + speed:0.15, + mouseWheel:true, bringToFront: true }); metacodeIMGinit = true; diff --git a/app/assets/javascripts/carousel/cloud-carousel.1.0.5.js b/app/assets/javascripts/carousel/cloud-carousel.1.0.5.js index 491a4c37..7ca777ad 100644 --- a/app/assets/javascripts/carousel/cloud-carousel.1.0.5.js +++ b/app/assets/javascripts/carousel/cloud-carousel.1.0.5.js @@ -127,6 +127,30 @@ 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 if (options.mouseWheel) { @@ -149,10 +173,10 @@ //$(options.titleBox).html( ($(event.target).attr('title') )); if ( options.bringToFront && event.type == 'click' ) { - $(options.titleBox).html( ($(event.target).attr('title') )); - // METAMAPS CODE - $('#topic_metacode').val($(event.target).attr('title')); - // NOT METAMAPS CODE + $(options.titleBox).html( ($(event.target).attr('title') )); + // METAMAPS CODE + $('#topic_metacode').val($(event.target).attr('title')); + // NOT METAMAPS CODE var idx = $(event.target).data('itemIndex'); var frontIndex = event.data.frontIndex; //var diff = idx - frontIndex; @@ -188,7 +212,7 @@ this.showFrontText = function() { 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')); // NOT METAMAPS CODE $(options.titleBox).html( $(items[this.frontIndex].image).attr('title')); @@ -213,6 +237,7 @@ this.rotate = function(direction) { this.frontIndex -= direction; + if (this.frontIndex == -1) this.frontIndex = items.length - 1; this.frontIndex %= items.length; this.destRotation += ( Math.PI / items.length ) * ( 2*direction ); this.showFrontText(); diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index a0c2cf78..51f2ff5a 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -90,19 +90,19 @@ text-overflow: ellipsis; } -.best_in_place_desc { +.CardOnGraph .best_in_place_desc { width:160px; - height:200px; + height:180px; display:block; margin-top:2px; } -.best_in_place_desc input { +.CardOnGraph .best_in_place_desc input { float: right; margin: 2px 0px 0px 2px; padding: 1px 5px; } -.best_in_place_desc input[value="Save"] { +.CardOnGraph .best_in_place_desc input[value="Save"] { margin-right: -8px; }