Commit dd0670d4 authored by Kjetil Thuen's avatar Kjetil Thuen
Browse files

Moved functionality into a jQuery plugin

parent 56684089
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
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> <h2 id="target"></h2>
<div id="expander"> <div id="expander">
<div class="metadata"> <div class="metadata">
...@@ -28,5 +29,6 @@ ...@@ -28,5 +29,6 @@
</div> </div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>
...@@ -77,8 +77,10 @@ inScroll = false; ...@@ -77,8 +77,10 @@ inScroll = false;
}; };
}()); }());
(function () { (function ($) {
"use strict"; "use strict";
var settings = {};
var listElement = null;
var horizontalCenter = Math.floor(window.innerWidth/2), var horizontalCenter = Math.floor(window.innerWidth/2),
centerOfHeadline = 0, centerOfHeadline = 0,
...@@ -106,26 +108,26 @@ inScroll = false; ...@@ -106,26 +108,26 @@ inScroll = false;
func.apply(obj, args); func.apply(obj, args);
} }
timeout = setTimeout(delayed, threshold || 100); timeout = setTimeout(delayed, threshold || timeout);
}; };
}; };
var show_expanded_info = function() { var show_expanded_info = function() {
// console.log("expanding"); // console.log("expanding");
var listElem = $('#studies_list li.selected'), var listElem = listElement.children("li." + settings.selectedClass),
details, details,
heightDiff, heightDiff,
marginDiff; marginDiff;
scrollListenersEnabled = false; scrollListenersEnabled = false;
heightDiff = $('#target').height() - listElem.height(); heightDiff = $('#' + settings.targetId).height() - listElem.height();
marginDiff = parseInt($('#target').css('margin-top'), 0) + heightDiff; marginDiff = parseInt($('#' + settings.targetId).css('margin-top'), 0) + heightDiff;
if (heightDiff !== 0) { if (heightDiff !== 0) {
$('#target').animate({height: listElem.height(),'margin-top': marginDiff + 'px'}, 'fast'); $('#' + settings.targetId).animate({height: listElem.height(),'margin-top': marginDiff + 'px'}, 'fast');
} }
var tarTop = $('#target').position().top; var tarTop = $('#' + settings.targetId).position().top;
var listTop = listElem.offset().top; var listTop = listElem.offset().top;
var scrollVal = listTop - tarTop - marginDiff; var scrollVal = listTop - tarTop - marginDiff;
...@@ -138,27 +140,32 @@ inScroll = false; ...@@ -138,27 +140,32 @@ inScroll = false;
details = listElem.find("div.abstract").html(); details = listElem.find("div.abstract").html();
scrollInProgress = false; scrollInProgress = false;
if (details !== null) { if (details !== null) {
$('#expander div.abstract').html(details); //FIXME: Stop depending on an existing div.abstract here
$('#expander').slideDown('fast', function() { $('#' + settings.revealDivId + ' div.abstract').html(details);
$('#' + settings.revealDivId).slideDown('fast', function() {
scrollListenersEnabled = true; scrollListenersEnabled = true;
}); });
} }
}; };
var set_selected_element = function (element) { var set_selected_element = function (element, asap) {
if (!element) { if (!element) {
element = $('#studies_list li:first-child').get(); element = listElement.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) {
$('#expander:visible').slideUp(100); $('#' + settings.revealDivId + ':visible').slideUp(settings.timeout);
$('#studies_list li').removeClass("selected"); listElement.children('li').removeClass(settings.selectedClass);
listElem.addClass('selected'); listElem.addClass(settings.selectedClass);
focusedListElement = listElem; focusedListElement = listElem;
debounce(show_expanded_info, 500, false)(); if (asap) {
debounce(show_expanded_info, 50, false)();
} else {
debounce(show_expanded_info, 500, false)();
}
} else { } else {
$('#expander').hide(); $('#' + settings.revealDivId).hide();
} }
} }
}; };
...@@ -170,16 +177,28 @@ inScroll = false; ...@@ -170,16 +177,28 @@ inScroll = false;
} }
}; };
var initialize_list_peek = function() { $.fn.listPeek = function(options) {
target_top = $('#content').position().top; settings = $.extend({
$('#target').css({top: target_top}); selectedClass: "listPeekSelected",
targetId: "target",
revealDivId: "expander",
timeout: 100,
backgroundColor: "white"
}, 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); horizontalCenter = Math.floor(window.innerWidth/2);
$('#expander').css({top: target_top + $('#target').height()}); $('#' + settings.revealDivId).css({top: target_top + $('#' + settings.targetId).height()});
centerOfHeadline = $('#target').offset().top - $(window).scrollTop() + ($('#target').height() / 2); centerOfHeadline = $('#' + settings.targetId).offset().top - $(window).scrollTop() + ($('#' + settings.targetId).height() / 2);
if (!handlersRegistered) { if (!handlersRegistered) {
register_event_handlers(); register_event_handlers();
} }
set_selected_element(focusedListElement); set_selected_element(focusedListElement);
return this;
}; };
var register_event_handlers = function() { var register_event_handlers = function() {
...@@ -187,7 +206,7 @@ inScroll = false; ...@@ -187,7 +206,7 @@ inScroll = false;
if (scrollListenersEnabled) { if (scrollListenersEnabled) {
scrollInProgress = true; scrollInProgress = true;
// console.log("scrollstart"); // console.log("scrollstart");
$('#expander:visible').slideUp(100); $('#' + settings.revealDivId + ':visible').slideUp(settings.timeout);
} }
}); });
...@@ -196,7 +215,7 @@ inScroll = false; ...@@ -196,7 +215,7 @@ inScroll = false;
if (scrollListenersEnabled) { if (scrollListenersEnabled) {
scrollInProgress = true; scrollInProgress = true;
// console.log("touchmove"); // console.log("touchmove");
$('#expander:visible').hide(); $('#' + settings.revealDivId + ':visible').hide();
} else { } else {
// console.log("scroll registered, but listener disabled"); // console.log("scroll registered, but listener disabled");
} }
...@@ -210,9 +229,9 @@ inScroll = false; ...@@ -210,9 +229,9 @@ inScroll = false;
} }
}); });
$('#studies_list li').click(function() { listElement.children("li").click(function() {
// console.log("click"); // console.log("click");
set_selected_element($(this).get()); set_selected_element($(this).get(), true);
}); });
$(window).resize(function() { $(window).resize(function() {
...@@ -222,7 +241,5 @@ inScroll = false; ...@@ -222,7 +241,5 @@ inScroll = false;
handlersRegistered = true; handlersRegistered = true;
}; };
initialize_list_peek(); }(jQuery));
}());
head.js("http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js") head.js("http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js")
.js("http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js") .js("http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js")
.js("http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js") .js("http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js")
.js("listPeek.js")
.js("studylist_template.js", function() { .js("studylist_template.js", function() {
var jsondata = {}; var jsondata = {};
var build_list = function() { var build_list = function() {
var template = Handlebars.templates.studylist; var template = Handlebars.templates.studylist;
var listhtml = template(jsondata); var listhtml = template(jsondata);
$('#content').html(listhtml); $('#content').html(listhtml);
head.js("listPeek.js"); $('#studies_list').listPeek({
selectedClass: "selected"
});
}; };
var load_data = function() { var load_data = function() {
......
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