From 79daaf705bd2d58748bac28cf7065ca594f716d2 Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Wed, 15 Oct 2014 18:25:31 -0400
Subject: [PATCH] made metacode selecct for topic card always accessible, for
 when you move the card near the right or bottom of screen

---
 app/assets/javascripts/src/Metamaps.js | 41 ++++++++++++++++++++++++--
 app/assets/stylesheets/base.css        | 22 +++++++++++++-
 2 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/src/Metamaps.js b/app/assets/javascripts/src/Metamaps.js
index 43159c44..5c4bd5da 100644
--- a/app/assets/javascripts/src/Metamaps.js
+++ b/app/assets/javascripts/src/Metamaps.js
@@ -784,14 +784,51 @@ Metamaps.TopicCard = {
                 metacode_id: metacode.id
             });
             Metamaps.Visualize.mGraph.plot();
-            $('.metacodeSelect').hide();
+            $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge');
             $('.metacodeTitle').hide();
             $('.showcard .icon').css('z-index', '1');
         };
 
         var openMetacodeSelect = function (event) {
+            var windowWidth;
+            var showcardLeft;
+            var TOPICCARD_WIDTH = 300;
+            var METACODESELECT_WIDTH = 404;
+            var distanceFromEdge;
+
+            var MAX_METACODELIST_HEIGHT = 270;
+            var windowHeight;
+            var showcardTop;
+            var topicTitleHeight;
+            var distanceFromBottom;
+
             if (!selectingMetacode) {
                 selectingMetacode = true;
+
+                // this is to make sure the metacode 
+                // select is accessible onscreen, when opened
+                // while topic card is close to the right 
+                // edge of the screen
+                windowWidth = $(window).width();
+                showcardLeft = parseInt($('.showcard').css('left'));
+                distanceFromEdge = windowWidth - (showcardLeft + TOPICCARD_WIDTH);
+                if (distanceFromEdge < METACODESELECT_WIDTH) {
+                    $('.metacodeSelect').addClass('onRightEdge');
+                }
+
+                // this is to make sure the metacode 
+                // select is accessible onscreen, when opened
+                // while topic card is close to the bottom
+                // edge of the screen
+                windowHeight = $(window).height();
+                showcardTop = parseInt($('.showcard').css('top'));
+                topicTitleHeight = $('.showcard .title').height() + parseInt($('.showcard .title').css('padding-top')) + parseInt($('.showcard .title').css('padding-bottom'));
+                heightOfSetList = $('.showcard .metacodeSelect').height();
+                distanceFromBottom = windowHeight - (showcardTop + topicTitleHeight);
+                if (distanceFromBottom < MAX_METACODELIST_HEIGHT) {
+                    $('.metacodeSelect').addClass('onBottomEdge');
+                }
+
                 $('.metacodeSelect').show();
                 event.stopPropagation();
             }
@@ -799,7 +836,7 @@ Metamaps.TopicCard = {
 
         var hideMetacodeSelect = function () {
             selectingMetacode = false;
-            $('.metacodeSelect').hide();
+            $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge');
             $('.metacodeTitle').hide();
             $('.showcard .icon').css('z-index', '1');
         };
diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css
index 2089fe80..691ca650 100644
--- a/app/assets/stylesheets/base.css
+++ b/app/assets/stylesheets/base.css
@@ -183,6 +183,7 @@ resize: none;
   width:100%;
   z-index:1;
   padding: 0;
+  height: 48px;
 }
 .linkItem.contributor {
   margin-left:32px;
@@ -383,7 +384,7 @@ background-color: #E0E0E0;
   display:none;
   position: absolute;
   left: 200px;
-  top: 0;
+  top: -1px;
   max-height: 270px;
   overflow-y: auto;
 }
@@ -401,6 +402,25 @@ background-color: #E0E0E0;
   background-position: 0 -32px;
 }
 
+/* too close to right side of screen case */
+.onRightEdge.metacodeSelect {
+  right: 1px;
+  left: auto;
+  top: 46px;
+}
+.onRightEdge.metacodeSelect ul ul {
+  left: auto;
+  right: 200px;
+}
+/* too close to bottom of screen case */
+.onBottomEdge.metacodeSelect {
+  bottom: 0;
+}
+.onBottomEdge.metacodeSelect ul ul {
+  top: auto;
+  bottom: 0;
+}
+
 .CardOnGraph .hoverForTip:hover .tip, .mapCard .hoverForTip:hover .tip {
   display:block;
 }