Commit dd0670d4 authored by Kjetil Thuen's avatar Kjetil Thuen

Moved functionality into a jQuery plugin

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