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