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

made metacode selecct for topic card always accessible, for when you move the card near the right or bottom of screen

Browse source
This commit is contained in:
Connor Turland 2014-10-15 18:25:31 -04:00
parent e43b7fca87
commit 79daaf705b
2 changed files with 60 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
app/assets/javascripts/src/Metamaps.js
View file

@ -784,14 +784,51 @@ Metamaps.TopicCard = {
metacode_id: metacode.id metacode_id: metacode.id
}); });
Metamaps.Visualize.mGraph.plot(); Metamaps.Visualize.mGraph.plot();
$('.metacodeSelect').hide(); $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge');
$('.metacodeTitle').hide(); $('.metacodeTitle').hide();
$('.showcard .icon').css('z-index', '1'); $('.showcard .icon').css('z-index', '1');
}; };
var openMetacodeSelect = function (event) { 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) { if (!selectingMetacode) {
selectingMetacode = true; 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(); $('.metacodeSelect').show();
event.stopPropagation(); event.stopPropagation();
} }
@ -799,7 +836,7 @@ Metamaps.TopicCard = {
var hideMetacodeSelect = function () { var hideMetacodeSelect = function () {
selectingMetacode = false; selectingMetacode = false;
$('.metacodeSelect').hide(); $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge');
$('.metacodeTitle').hide(); $('.metacodeTitle').hide();
$('.showcard .icon').css('z-index', '1'); $('.showcard .icon').css('z-index', '1');
}; };

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

@ -183,6 +183,7 @@ resize: none;
width:100%; width:100%;
z-index:1; z-index:1;
padding: 0; padding: 0;
height: 48px;
} }
.linkItem.contributor { .linkItem.contributor {
margin-left:32px; margin-left:32px;
@ -383,7 +384,7 @@ background-color: #E0E0E0;
display:none; display:none;
position: absolute; position: absolute;
left: 200px; left: 200px;
top: 0; top: -1px;
max-height: 270px; max-height: 270px;
overflow-y: auto; overflow-y: auto;
} }
@ -401,6 +402,25 @@ background-color: #E0E0E0;
background-position: 0 -32px; 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 { .CardOnGraph .hoverForTip:hover .tip, .mapCard .hoverForTip:hover .tip {
display:block; display:block;
} }