Skip to content

GitLab

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

Added storing of last selected element. 

Will store last selected in session storage if enebled on init. Also, it
is now possible to explicitly set a list entry to initially focus.
parent 52f006ef
Hide whitespace changes
Inline Side-by-side
Showing with 112 additions and 76 deletions
README.md
View file @ d5482482
......@@ -50,6 +50,15 @@ function(id, displayCallbackFunc){displayCallbackFunc("<p><strong>" + id + "</st
* `timeout`: How long to wait after scrolling has stopped before calling the callback function. In milliseconds. Default value is 100.
* `rememberLastSelected`: Whether the plugin should store the last selected
listentry in session storage (requires html5 compliant browser). If the plugin
is reinitialized at a later point, it will automatically scroll the stored
listentry into the sight scope. Set to false by default.
* `initialElement`: The id of an element to initially select. If the
initalelement value is set, but no list element is found with the given id, the
first element of the list will be selected. The default value is undefined.
Both the sight scope and "further information" area are divs that can be styled from your own CSS. Their default ids are "listSightScope" and "selectedEntryItemInfoInfo", but both of these can be overridden.
See the file `example.html` for example usage.
example.html
View file @ d5482482
......@@ -214,7 +214,7 @@
$(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});
});
}
</script>
......
src/jquery.listentryinfo.js
View file @ d5482482
/*global window, document, $, sessionStorage */
(function ($) {
"use strict";
var settings = {};
var peekedList = null;
var horizontalCenter = Math.floor(window.innerWidth/2),
var settings = {},
peekedList = null,
horizontalCenter = Math.floor(window.innerWidth/2),
centerOfHeadline = 0,
focusedListElement = null,
targetTop = 0,
......@@ -11,62 +13,6 @@
scrollInProgress = false,
handlersRegistered = false;
$.fn.listEntryInfo = function(options) {
settings = $.extend({
selectedClass: "listEntryInfoSelected",
sightScopeId: "listSightScope",
itemInfoDivId: "selectedEntryItemInfo",
timeout: 100,
extendedInfoFunc: function(id){defaultPopulateRevealDivFunc("<p><strong>" + id + "</strong> selected</p>");}
}, options );
peekedList = this;
if (typeof peekedList.position() !== 'object') {
console.log("Unable to find list element");
return;
}
if ($("#" + settings.sightScopeId).length !== 0) {
console.log("Target element already exists");
return;
}
targetTop = peekedList.position().top;
$('<div></div>').attr('id', settings.sightScopeId).css({
width: '100%',
left: 0,
'min-height': '1em',
'z-index': '-2',
padding: '0px',
position: 'fixed',
top: targetTop
}).insertAfter(peekedList);
if ($("#" + settings.itemInfoDivId).length === 0) {
$('<div></div>').attr('id', settings.itemInfoDivId).css({
position: 'fixed',
width: '70%',
left: '15%',
'z-index': 2,
display: 'none',
'max-height': '70%',
top: targetTop + $('#' + settings.sightScopeId).height()
}).insertAfter(peekedList);
}
horizontalCenter = Math.floor(window.innerWidth/2);
centerOfHeadline = $('#' + settings.sightScopeId).offset().top - $(window).scrollTop() + ($('#' + settings.sightScopeId).height() / 2);
if (!handlersRegistered) {
registerEventHandlers();
}
resetGeometry();
return this;
};
var debounce = function (func, threshold, execAsap) {
var timeout;
......@@ -89,6 +35,8 @@
};
};
var defaultPopulateRevealDivFunc = function (content) {
if (content !== null) {
$('#' + settings.itemInfoDivId).html(content);
......@@ -100,7 +48,10 @@
var listElem = peekedList.children("li." + settings.selectedClass),
details,
heightDiff,
marginDiff;
marginDiff,
tarTop,
listTop,
scrollVal;
scrollListenersEnabled = false;
......@@ -111,9 +62,9 @@
$('#' + settings.sightScopeId).animate({height: listElem.height(),'margin-top': marginDiff + 'px'}, 'fast');
}
var tarTop = $('#' + settings.sightScopeId).position().top;
var listTop = listElem.offset().top;
var scrollVal = listTop - tarTop - marginDiff;
tarTop = $('#' + settings.sightScopeId).position().top;
listTop = listElem.offset().top;
scrollVal = listTop - tarTop - marginDiff;
$('body').animate({scrollTop: scrollVal}, 'fast', function() {
scrollInProgress = false;
......@@ -123,18 +74,32 @@
settings.extendedInfoFunc(listElem.attr('id'), defaultPopulateRevealDivFunc);
};
var setSelectedElement = function (element, asap) {
var listElem,
sessionStorageKey = peekedList.attr('id') + '_lastSelected';
if (!element) {
element = peekedList.children('li:first-child').get();
if (typeof(sessionStorage) !== "undefined" && settings.rememberLastSelected && sessionStorage[sessionStorageKey]) {
element = $('li[id=\'' + sessionStorage[sessionStorageKey] + '\']').get();
} else if (settings.initialElement) {
element = $('li[id=\'' + settings.initialElement + '\']').get();
if (element.length < 1) {
element = peekedList.children('li:first-child').get();
}
}
}
if (element) {
var listElem = $(element).closest('li');
listElem = $(element).closest('li');
if (listElem.is("LI") && listElem !== focusedListElement) {
$('#' + settings.itemInfoDivId + ':visible').slideUp(settings.timeout);
peekedList.children('li').removeClass(settings.selectedClass);
listElem.addClass(settings.selectedClass);
focusedListElement = listElem;
if (typeof(sessionStorage) !=="undefined" && settings.rememberLastSelected) {
sessionStorage[peekedList.attr('id') + '_lastSelected'] = listElem.attr('id');
}
if (asap) {
debounce(showExpandedInfo, 50, false)();
} else {
......@@ -146,12 +111,9 @@
}
};
var findAndSelectElement = function() {
var newFocusedListElement = document.elementFromPoint(horizontalCenter, centerOfHeadline);
//TODO: Handle overshooting the list. Move target to bottom or top.
if (newFocusedListElement !== focusedListElement) {
setSelectedElement(newFocusedListElement);
}
var computeSightScopeOffset = function () {
return peekedList.position().top;
// return parseInt(peekedList.position().top, 10) + 400;
};
var resetGeometry = function() {
......@@ -180,6 +142,14 @@
}
};
var findAndSelectElement = function() {
var newFocusedListElement = document.elementFromPoint(horizontalCenter, centerOfHeadline);
//TODO: Handle overshooting the list. Move target to bottom or top.
if (newFocusedListElement !== focusedListElement) {
setSelectedElement(newFocusedListElement);
}
};
var registerEventHandlers = function() {
$(window).bind('scrollstart', function(){
if (scrollListenersEnabled) {
......@@ -213,6 +183,67 @@
handlersRegistered = true;
};
$.fn.listEntryInfo = function(options) {
settings = $.extend({
selectedClass: "listEntryInfoSelected",
sightScopeId: "listSightScope",
itemInfoDivId: "selectedEntryItemInfo",
relativeTo: "list",
initialOffset: "200px",
minTopDistance: "200px",
minBottomDistance: "200px",
rememberLastSelected: false,
initialElement: undefined,
timeout: 100,
extendedInfoFunc: function(id){defaultPopulateRevealDivFunc("<p><strong>" + id + "</strong> selected</p>");}
}, options );
peekedList = this;
if (typeof peekedList.position() !== 'object') {
console.log("Unable to find list element");
return;
}
if ($("#" + settings.sightScopeId).length !== 0) {
console.log("Target element already exists");
return;
}
$('<div></div>').attr('id', settings.sightScopeId).css({
width: '100%',
left: 0,
'min-height': '1em',
'z-index': '-2',
padding: '0px',
position: 'absolute',
top: computeSightScopeOffset() + "px",
}).insertAfter(peekedList);
if ($("#" + settings.itemInfoDivId).length === 0) {
$('<div></div>').attr('id', settings.itemInfoDivId).css({
position: 'absolute',
width: '70%',
left: '15%',
'z-index': 2,
display: 'none',
'max-height': '70%',
top: computeSightScopeOffset() + $('#' + settings.sightScopeId).height() + "px",
}).insertAfter(peekedList);
}
horizontalCenter = Math.floor(window.innerWidth/2);
centerOfHeadline = $('#' + settings.sightScopeId).offset().top - $(window).scrollTop() + ($('#' + settings.sightScopeId).height() / 2);
if (!handlersRegistered) {
registerEventHandlers();
}
resetGeometry();
return this;
};
}(jQuery));
/*
......@@ -230,10 +261,8 @@ inScroll = false;
special.scrollstart = {
setup: function() {
var timer,
handler = function(evt) {
var _self = this,
_args = arguments;
......@@ -264,10 +293,8 @@ inScroll = false;
special.scrollstop = {
latency: 100,
setup: function() {
var timer,
handler = function(evt) {
var _self = this,
_args = arguments;
......
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