Commit e1251e6b authored by Kjetil Thuen's avatar Kjetil Thuen

Removed need for extra markup in html.

The plugin will create all the helper elements it needs on init
parent 914c6777
......@@ -18,9 +18,5 @@
Finn interresante studier i listen under.
</div>
<div id="content"></div>
<h2 id="target"></h2>
<div id="expander"> </div>
</body>
</html>
......@@ -80,7 +80,7 @@ inScroll = false;
(function ($) {
"use strict";
var settings = {};
var listElement = null;
var peekedList = null;
var horizontalCenter = Math.floor(window.innerWidth/2),
centerOfHeadline = 0,
......@@ -90,6 +90,35 @@ inScroll = false;
scrollInProgress = false,
handlersRegistered = false;
$.fn.listPeek = function(options) {
settings = $.extend({
selectedClass: "listPeekSelected",
targetId: "listPeekTargetArea",
revealDivId: "listPeakRevealArea",
timeout: 100,
backgroundColor: "white",
extendedInfoFunc: function(id){ return "<strong>" + id + "</strong>";}
}, options );
//TODO: Create the target and revealDiv elements
peekedList = this;
target_top = peekedList.position().top;
peekedList.after('<div id="' + settings.targetId + '"></div>');
peekedList.after('<div id="' + settings.revealDivId + '"></div>');
$('#' + settings.targetId).css({top: target_top});
horizontalCenter = Math.floor(window.innerWidth/2);
$('#' + settings.revealDivId).css({top: target_top + $('#' + settings.targetId).height()});
centerOfHeadline = $('#' + settings.targetId).offset().top - $(window).scrollTop() + ($('#' + settings.targetId).height() / 2);
if (!handlersRegistered) {
register_event_handlers();
}
set_selected_element(focusedListElement);
return this;
};
var debounce = function (func, threshold, execAsap) {
var timeout;
......@@ -115,7 +144,7 @@ inScroll = false;
var show_expanded_info = function() {
// console.log("expanding");
var listElem = listElement.children("li." + settings.selectedClass),
var listElem = peekedList.children("li." + settings.selectedClass),
details,
heightDiff,
marginDiff;
......@@ -142,7 +171,6 @@ inScroll = false;
scrollInProgress = false;
if (details !== null) {
//FIXME: Stop depending on an existing div.abstract here
$('#' + settings.revealDivId).html(details);
$('#' + settings.revealDivId).slideDown('fast', function() {
scrollListenersEnabled = true;
......@@ -152,13 +180,13 @@ inScroll = false;
var set_selected_element = function (element, asap) {
if (!element) {
element = listElement.children('li:first-child').get();
element = peekedList.children('li:first-child').get();
}
if (element) {
var listElem = $(element).closest('li');
if (listElem.is("LI") && listElem !== focusedListElement) {
$('#' + settings.revealDivId + ':visible').slideUp(settings.timeout);
listElement.children('li').removeClass(settings.selectedClass);
peekedList.children('li').removeClass(settings.selectedClass);
listElem.addClass(settings.selectedClass);
focusedListElement = listElem;
if (asap) {
......@@ -179,29 +207,9 @@ inScroll = false;
}
};
$.fn.listPeek = function(options) {
settings = $.extend({
selectedClass: "listPeekSelected",
targetId: "target",
revealDivId: "expander",
timeout: 100,
backgroundColor: "white",
extendedInfoFunc: function(id){ return "<strong>" + id + "</strong>";}
}, options );
//TODO: Create the target and revealDiv elements
listElement = this;
target_top = listElement.position().top;
$('#' + settings.targetId).css({top: target_top});
horizontalCenter = Math.floor(window.innerWidth/2);
$('#' + settings.revealDivId).css({top: target_top + $('#' + settings.targetId).height()});
centerOfHeadline = $('#' + settings.targetId).offset().top - $(window).scrollTop() + ($('#' + settings.targetId).height() / 2);
if (!handlersRegistered) {
register_event_handlers();
}
set_selected_element(focusedListElement);
return this;
var reset_geometry = function() {
var alreadyFocusedListElement = peekedList.children("li." + settings.selectedClass);
set_selected_element(alreadyFocusedListElement);
};
var register_event_handlers = function() {
......@@ -232,13 +240,13 @@ inScroll = false;
}
});
listElement.children("li").click(function() {
peekedList.children("li").click(function() {
// console.log("click");
set_selected_element($(this).get(), true);
});
$(window).resize(function() {
initialize_list_peek();
debounce(reset_geometry, 500, false)();
});
handlersRegistered = true;
......
......@@ -26,22 +26,17 @@ ul#studies_list li {
border-bottom: 1px solid #5f5a49;
}
ul#studies_list li div.abstract {
display: none;
}
ul#studies_list li.selected {
color: #eee;
}
#target {
top: 20%;
height: 10%;
width: 100%;
min-height: 1em;
z-index: -2;
padding: 0px;
position: fixed;
background-color: rgba(0,0,0,0.8);
}
#expander {
......@@ -51,19 +46,22 @@ ul#studies_list li.selected {
z-index: 2;
display: none;
max-height: 70%;
}
#target {
background-color: rgba(0,0,0,0.8);
}
h2, #studies_list li div.study_title {
#expander {
background-color: rgba(0,0,0,0.8);
}
#studies_list li div.study_title {
margin: 0px;
padding: 0.5em;
z-index: 3;
}
h2#target {
padding: 0px;
}
#expander div.metadata div.abstract {
max-height: 6em;
margin-bottom: 0.5em;
......
......@@ -10,8 +10,11 @@ head.js("http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js")
var template = Handlebars.templates.studylist;
var listhtml = template(jsondata);
$('#content').html(listhtml);
$('#studies_list').listPeek({
selectedClass: "selected",
targetId: "target",
revealDivId: "expander",
extendedInfoFunc: get_metadata
});
};
......
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