Commit c0fe23fd authored by Kjetil Thuen's avatar Kjetil Thuen

Moved most relevant css to plugin.

Users can override styles using their own css file, either by specifying
alternative id's for the genera elements when first applying the
plugin or by applying styles to #target and #expander
parent b29cfbc1
......@@ -9,8 +9,6 @@
centerOfHeadline = 0,
focusedListElement = null,
targetTop = 0,
documentHeight = 0;
listHeight = 0;
scrollListenersEnabled = false,
scrollInProgress = false,
handlersRegistered = false;
......@@ -28,13 +26,23 @@
peekedList = this;
targetTop = peekedList.position().top;
peekedList.after('<div id="' + settings.revealDivId + '"></div>');
peekedList.after('<div id="' + settings.targetId + '"></div>');
//TODO: Add padding under list to enable scrolling to the end
listHeight = peekedList.height();
docuementHeight = $(document).height();
$('<div></div>').attr('id', settings.revealDivId).css({
position: 'fixed',
width: '70%',
left: '15%',
'z-index': 2,
display: 'none',
'max-height': '70%'
}).insertAfter(peekedList);
$('<div></div>').attr('id', settings.targetId).css({
width: '100%',
left: 0,
'min-height': '1em',
'z-index': '-2',
padding: '0px',
position: 'fixed'
}).insertAfter(peekedList);
$('#' + settings.targetId).css({top: targetTop});
horizontalCenter = Math.floor(window.innerWidth/2);
......@@ -43,7 +51,8 @@
if (!handlersRegistered) {
registerEventHandlers();
}
setSelectedElement(focusedListElement);
resetGeometry();
return this;
};
......@@ -71,8 +80,6 @@
};
var showExpandedInfo = function() {
// console.log("expanding");
var listElem = peekedList.children("li." + settings.selectedClass),
details,
heightDiff,
......@@ -83,11 +90,6 @@
heightDiff = $('#' + settings.targetId).height() - listElem.height();
marginDiff = parseInt($('#' + settings.targetId).css('margin-top'), 0) + heightDiff;
console.log("target height: " + $('#' + settings.targetId).height());
console.log("listElem height: " + listElem.height());
console.log("marginDiff: " + marginDiff);
console.log("heightDiff: " + heightDiff);
if (heightDiff !== 0) {
$('#' + settings.targetId).animate({height: listElem.height(),'margin-top': marginDiff + 'px'}, 'fast');
}
......@@ -134,21 +136,42 @@
var findAndSelectElement = function() {
var newFocusedListElement = document.elementFromPoint(horizontalCenter, centerOfHeadline);
//TODO: Handle overshooting the list. Move target to bottom or top.
if (newFocusedListElement !== focusedListElement) {
setSelectedElement(newFocusedListElement);
}
};
var resetGeometry = function() {
var alreadyFocusedListElement = peekedList.children("li." + settings.selectedClass);
setSelectedElement(alreadyFocusedListElement);
var alreadyFocusedListElement,
bodyHeight = 0,
distanceFromListEndToBodyEnd = 0,
distanceFromTargetToViewportEnd = 0,
listHeight = 0,
viewPortHeight = 0;
alreadyFocusedListElement = peekedList.children("li." + settings.selectedClass);
if (alreadyFocusedListElement.length > 0) {
setSelectedElement(alreadyFocusedListElement[0]);
} else {
setSelectedElement();
}
listHeight = peekedList.outerHeight();
bodyHeight = $('body').outerHeight();
viewPortHeight = $(window).height();
distanceFromListEndToBodyEnd = bodyHeight - targetTop - listHeight;
distanceFromTargetToViewportEnd = viewPortHeight - targetTop - $('#' + settings.targetId).height();
if (distanceFromListEndToBodyEnd < distanceFromTargetToViewportEnd) {
// peekedList.css("padding-bottom", "+=" + (distanceFromTargetToViewportEnd - distanceFromListEndToBodyEnd));
}
};
var registerEventHandlers = function() {
$(window).bind('scrollstart', function(){
if (scrollListenersEnabled) {
scrollInProgress = true;
// console.log("scrollstart");
$('#' + settings.revealDivId + ':visible').slideUp(settings.timeout);
}
});
......@@ -157,7 +180,6 @@
//IOS specific touch event
if (scrollListenersEnabled) {
scrollInProgress = true;
// console.log("touchmove");
$('#' + settings.revealDivId + ':visible').hide();
} else {
// console.log("scroll registered, but listener disabled");
......@@ -167,13 +189,11 @@
$(window).bind('scrollstop', function(e){
if (scrollInProgress) {
// console.log("scrollstop");
findAndSelectElement();
}
});
peekedList.children("li").click(function() {
// console.log("click");
setSelectedElement($(this).get(), true);
});
......
......@@ -30,22 +30,16 @@ ul#studies_list li.selected {
color: #eee;
}
#target {
height: 10%;
width: 100%;
min-height: 1em;
z-index: -2;
padding: 0px;
position: fixed;
div.metadata div.abstract {
max-height: 6em;
margin-bottom: 0.5em;
overflow: hidden;
color: white;
padding: 0em 1em 1em 1em;
}
#expander {
position: fixed;
width: 70%;
left: 15%;
z-index: 2;
display: none;
max-height: 70%;
#expander button {
margin: 0 0 1em 1em ;
}
#target {
......@@ -62,14 +56,3 @@ ul#studies_list li.selected {
z-index: 3;
}
#expander div.metadata div.abstract {
max-height: 6em;
margin-bottom: 0.5em;
overflow: hidden;
color: white;
padding: 0em 1em 1em 1em;
}
#expander button {
margin: 0 0 1em 1em ;
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment