Commit 6b5dd201 authored by Kjetil Thuen's avatar Kjetil Thuen

Handle content before list

parent 55adbb30
......@@ -214,7 +214,10 @@
$(document).ready(function() {
build_philosopher_list(philosophers);
// Apply the plugin and pass it the callback to be called for selected elements
$('#philosopherList').listEntryInfo({ extendedInfoFunc: display_philosopher_article});
$('#philosopherList').listEntryInfo({
extendedInfoFunc: display_philosopher_article,
rememberLastSelected: true
});
});
}
</script>
......@@ -227,6 +230,111 @@
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<p>
This demo displays a static list of philosophers of mind, and
fetches their articles from Wikipedia when their list entry
gains focus.
</p>
<ul id="philosopherList"></ul>
</div>
</body>
......
......@@ -35,8 +35,6 @@
};
};
var defaultPopulateRevealDivFunc = function (content) {
if (content !== null) {
$('#' + settings.itemInfoDivId).html(content);
......@@ -44,7 +42,7 @@
}
};
var showExpandedInfo = function() {
var showExpandedInfo = function () {
var listElem = peekedList.children("li." + settings.selectedClass),
details,
heightDiff,
......@@ -64,9 +62,9 @@
tarTop = $('#' + settings.sightScopeId).position().top;
listTop = listElem.offset().top;
scrollVal = listTop - tarTop - marginDiff;
scrollVal = listTop - settings.minTopDistance;
$('body').animate({scrollTop: scrollVal}, 'fast', function() {
$('body').animate({scrollTop: scrollVal}, 'fast', function () {
scrollInProgress = false;
scrollListenersEnabled = true;
});
......@@ -81,9 +79,9 @@
if (!element) {
if (typeof(sessionStorage) !== "undefined" && settings.rememberLastSelected && sessionStorage[sessionStorageKey]) {
element = $('li[id=\'' + sessionStorage[sessionStorageKey] + '\']').get();
element = $('#' + peekedList.attr('id') + ' li[id=\'' + sessionStorage[sessionStorageKey] + '\']').get();
} else if (settings.initialElement) {
element = $('li[id=\'' + settings.initialElement + '\']').get();
element = $('#' + peekedList.attr('id') + ' li[id=\'' + settings.initialElement + '\']').get();
if (element.length < 1) {
element = peekedList.children('li:first-child').get();
}
......@@ -98,8 +96,9 @@
listElem.addClass(settings.selectedClass);
focusedListElement = listElem;
if (typeof(sessionStorage) !=="undefined" && settings.rememberLastSelected) {
sessionStorage[peekedList.attr('id') + '_lastSelected'] = listElem.attr('id');
sessionStorage[sessionStorageKey] = listElem.attr('id');
}
if (asap) {
debounce(showExpandedInfo, 50, false)();
} else {
......@@ -112,11 +111,12 @@
};
var computeSightScopeOffset = function () {
return peekedList.position().top;
// return parseInt(peekedList.position().top, 10) + 400;
var listCoords = peekedList[0].getBoundingClientRect();
var targetCoord = listCoords.top < 0 ? settings.minTopDistance : listCoords.top + settings.minTopDistance;
return targetCoord;
};
var resetGeometry = function() {
var resetGeometry = function () {
var alreadyFocusedListElement,
bodyHeight = 0,
distanceFromListEndToBodyEnd = 0,
......@@ -142,23 +142,22 @@
}
};
var findAndSelectElement = function() {
var newFocusedListElement = document.elementFromPoint(horizontalCenter, centerOfHeadline);
//TODO: Handle overshooting the list. Move target to bottom or top.
if (newFocusedListElement !== focusedListElement) {
var findAndSelectElement = function () {
var newFocusedListElement = $(document.elementFromPoint(horizontalCenter, computeSightScopeOffset())).closest('li');
if (newFocusedListElement.length > 0 && newFocusedListElement.attr('id') !== focusedListElement.attr('id')) {
setSelectedElement(newFocusedListElement);
}
};
var registerEventHandlers = function() {
$(window).bind('scrollstart', function(){
var registerEventHandlers = function () {
$(window).bind('scrollstart', function () {
if (scrollListenersEnabled) {
scrollInProgress = true;
$('#' + settings.itemInfoDivId + ':visible').slideUp(settings.timeout);
}
});
$(window).bind('touchmove', function(){
$(window).bind('touchmove', function () {
//IOS specific touch event
if (scrollListenersEnabled) {
scrollInProgress = true;
......@@ -166,36 +165,35 @@
}
});
$(window).bind('scrollstop', function(e){
$(window).bind('scrollstop', function (e) {
if (scrollInProgress) {
findAndSelectElement();
}
});
peekedList.children("li").click(function() {
peekedList.children("li").click(function () {
setSelectedElement($(this).get(), true);
});
$(window).resize(function() {
$(window).resize(function () {
debounce(resetGeometry, 500, false)();
});
handlersRegistered = true;
};
$.fn.listEntryInfo = function(options) {
$.fn.listEntryInfo = function (options) {
settings = $.extend({
selectedClass: "listEntryInfoSelected",
sightScopeId: "listSightScope",
itemInfoDivId: "selectedEntryItemInfo",
relativeTo: "list",
initialOffset: "200px",
minTopDistance: "200px",
minBottomDistance: "200px",
minTopDistance: "200",
minBottomDistance: "200",
rememberLastSelected: false,
initialElement: undefined,
timeout: 100,
extendedInfoFunc: function(id){defaultPopulateRevealDivFunc("<p><strong>" + id + "</strong> selected</p>");}
extendedInfoFunc: function (id) {defaultPopulateRevealDivFunc("<p><strong>" + id + "</strong> selected</p>");}
}, options );
peekedList = this;
......@@ -216,13 +214,13 @@
'min-height': '1em',
'z-index': '-2',
padding: '0px',
position: 'absolute',
position: 'fixed',
top: computeSightScopeOffset() + "px",
}).insertAfter(peekedList);
if ($("#" + settings.itemInfoDivId).length === 0) {
$('<div></div>').attr('id', settings.itemInfoDivId).css({
position: 'absolute',
position: 'fixed',
width: '70%',
left: '15%',
'z-index': 2,
......@@ -252,7 +250,7 @@
*/
inScroll = false;
(function(){
(function () {
"use strict";
var special = $.event.special,
......@@ -260,9 +258,9 @@ inScroll = false;
uid2 = 'D' + (+new Date() + 1);
special.scrollstart = {
setup: function() {
setup: function () {
var timer,
handler = function(evt) {
handler = function (evt) {
var _self = this,
_args = arguments;
......@@ -274,7 +272,7 @@ inScroll = false;
$(this).trigger(evt.type, _args);
}
timer = setTimeout( function(){
timer = setTimeout(function () {
timer = null;
}, special.scrollstop.latency);
......@@ -285,16 +283,16 @@ inScroll = false;
}
},
teardown: function(){
teardown: function () {
$(this).unbind( 'scroll', $(this).data(uid1) );
}
};
special.scrollstop = {
latency: 100,
setup: function() {
setup: function () {
var timer,
handler = function(evt) {
handler = function (evt) {
var _self = this,
_args = arguments;
......@@ -303,7 +301,7 @@ inScroll = false;
}
if(inScroll) {
timer = setTimeout( function(){
timer = setTimeout( function () {
inScroll = false;
timer = null;
......@@ -317,7 +315,7 @@ inScroll = false;
$(this).bind('scroll', handler).data(uid2, handler);
},
teardown: function() {
teardown: function () {
$(this).unbind( 'scroll', $(this).data(uid2) );
}
};
......
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