Commit 29320b85 authored by Kjetil Thuen's avatar Kjetil Thuen

Renamed some stuff for clarity

parent 15301391
ListEntryInfo
=============
This is a jQuery plugin that will place a "target-area" over a given html list,
and present further information (or perform some other action) on whatever list
element is currently under the target.
This is a jQuery plugin that will place a fixed "sight scope" over a given html list, and present further information (or perform some other action) on whatever list element is currently under the sight scope. The plugin will scroll the page so that one element is always positioned perfectly within the sight scope.
The target and "further information" area are both divs that should be styled
from your own CSS. Their default ids are "listPeakTargetArea" and
"listPeakRevealArea", but both of these can be overridden.
The plugin will add one or two DOM elements after your list. The first acts as the sight scope, and will always be added. The other one is an element that holds the expanded information relating to the selected list element. The second will only be added to the DOM if needed.
Installation
------------
If you want to build the ListEntryInfo plugin yourself, you need
[npm](https://npmjs.org) and [Grunt](http://gruntjs.com). Assuming npm is
installed, first install Grunt and dependencies like this:
If you want to build the ListEntryInfo plugin yourself, you need [npm](https://npmjs.org) and [Grunt](http://gruntjs.com). Assuming npm is installed, first install Grunt and dependencies like this:
```
> npm install grunt-cli -g
......@@ -32,32 +26,30 @@ The package will be in the `dist` directory which you can copy to your app.
Usage
-----
ListEntryInfo can be included in your project using Bower by mentioning
[The ListEntryInfo git repo](https://prosjekt.nsd.uib.no/gitlab/kjetil/listentryinfoplugin.git)
in your `bower.json` file.
ListEntryInfo can be included in your project using Bower by mentioning [The ListEntryInfo git repo](https://prosjekt.nsd.uib.no/gitlab/kjetil/listentryinfoplugin.git) in your `bower.json` file.
To enrich a html list with the EntryInfo functionallity, call the plugin like
any other jQuery plugin:
To enrich a html list with the EntryInfo functionallity, call the plugin like any other jQuery plugin:
```
$("#my-list").listEntryInfo(arguments-object)
```
The arguments object is a javascript object containing several optional
arguments to modify the behaviour of the plugin. They are:
The arguments object is a javascript object containing several optional arguments to modify the behaviour of the plugin. They are:
* `extendedInfoFunc`: The function to be called when a list entry has focus. The function should accept an DOM id as its argument and either directly manipulate the DOM or call some function that does so. For convenience, a function, `defaultPopulateRevealDivFunc` that populates the revealDiv with a given string and then slides it into view. The default function just puts the given id into the DOM element:
* `extendedInfoFunc`: The function to be called when a list entry has focus. The function should take a DOM id, build some html and then somehow manipulate the DOM. For convenience, a function, `defaultPopulateRevealDivFunc` that populates the revealDiv with a given string and then slides it into view is provided. The default function just puts the given id into the DOM element:
```
function(id){defaultPopulateRevealDivFunc("<strong>" + id + "</strong>");}
```
* `selectedClass`: The class to append to the selected list element. For styling. The default value is "listPeekSelected".
* `selectedClass`: The class to append to the selected list element. For styling. The default value is "listEntryInfoSelected".
* `targetId`: The DOM id of the target area. The element must be created by the plugin. If and element with the given id already exists, the plugin initialisation will fail silently. The default value is "listPeekTargetArea".
* `sightScopeId`: The DOM id of the target area. The element must be created by the plugin. If and element with the given id already exists, the plugin initialisation will fail silently. The default value is "listSightScope".
* `revealDivId`: The DOM id of the div holding the extended info. The element will be created if it does not already exist. If you use your own element you can place it wherever you want. If the plugin needs to create the element, it will create a div right after the target area. The element will be hidden and shown depending on whether a list element is focused or not. The default value is "listPeekRevealArea".
* `itemInfoDivId`: The DOM id of the div holding the extended info. The element will be created if it does not already exist. If you use your own element you can place it wherever you want. If the plugin determines that it needs to create the element, it will create a DIV right after the target area. The element will be hidden and shown depending on whether a list element is focused or not. The default value is "selectedEntryItemInfo".
* `timeout`: How long to wait after scrolling has stopped before calling the callback function. In milliseconds. Default value is 100.
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.
......@@ -21,7 +21,7 @@
border-bottom: 1px solid #5f5a49;
}
ul li.listPeekSelected {
ul li.listEntryInfoSelected {
color: #eee;
}
......@@ -30,11 +30,11 @@
the target and info divs. If needed, you can pass other ids in the
arguments object
*/
#listPeekTargetArea {
#listSightScope {
background-color: rgba(0,0,0,1);
}
#listPeekRevealArea {
#selectedEntryItemInfo {
background-color: rgba(0,0,0,1);
padding: 0em 1em 1em 1em;
color: white;
......
......@@ -13,9 +13,9 @@
$.fn.listEntryInfo = function(options) {
settings = $.extend({
selectedClass: "listPeekSelected",
targetId: "listPeekTargetArea",
revealDivId: "listPeekRevealArea",
selectedClass: "listEntryInfoSelected",
sightScopeId: "listSightScope",
itemInfoDivId: "selectedEntryItemInfo",
timeout: 100,
extendedInfoFunc: function(id){defaultPopulateRevealDivFunc("<strong>" + id + "</strong>");}
}, options );
......@@ -27,14 +27,14 @@
return;
}
if ($("#" + settings.targetId).length !== 0) {
if ($("#" + settings.sightScopeId).length !== 0) {
console.log("Target element already exists");
return;
}
targetTop = peekedList.position().top;
$('<div></div>').attr('id', settings.targetId).css({
$('<div></div>').attr('id', settings.sightScopeId).css({
width: '100%',
left: 0,
'min-height': '1em',
......@@ -44,20 +44,20 @@
top: targetTop
}).insertAfter(peekedList);
if ($("#" + settings.revealDivId).length === 0) {
$('<div></div>').attr('id', settings.revealDivId).css({
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.targetId).height()
top: targetTop + $('#' + settings.sightScopeId).height()
}).insertAfter(peekedList);
}
horizontalCenter = Math.floor(window.innerWidth/2);
centerOfHeadline = $('#' + settings.targetId).offset().top - $(window).scrollTop() + ($('#' + settings.targetId).height() / 2);
centerOfHeadline = $('#' + settings.sightScopeId).offset().top - $(window).scrollTop() + ($('#' + settings.sightScopeId).height() / 2);
if (!handlersRegistered) {
registerEventHandlers();
}
......@@ -91,8 +91,8 @@
var defaultPopulateRevealDivFunc = function (content) {
if (content !== null) {
$('#' + settings.revealDivId).html(content);
$('#' + settings.revealDivId).slideDown('fast', function() {
$('#' + settings.itemInfoDivId).html(content);
$('#' + settings.itemInfoDivId).slideDown('fast', function() {
scrollListenersEnabled = true;
});
}
......@@ -106,14 +106,14 @@
scrollListenersEnabled = false;
heightDiff = $('#' + settings.targetId).height() - listElem.height();
marginDiff = parseInt($('#' + settings.targetId).css('margin-top'), 0) + heightDiff;
heightDiff = $('#' + settings.sightScopeId).height() - listElem.height();
marginDiff = parseInt($('#' + settings.sightScopeId).css('margin-top'), 0) + heightDiff;
if (heightDiff !== 0) {
$('#' + settings.targetId).animate({height: listElem.height(),'margin-top': marginDiff + 'px'}, 'fast');
$('#' + settings.sightScopeId).animate({height: listElem.height(),'margin-top': marginDiff + 'px'}, 'fast');
}
var tarTop = $('#' + settings.targetId).position().top;
var tarTop = $('#' + settings.sightScopeId).position().top;
var listTop = listElem.offset().top;
var scrollVal = listTop - tarTop - marginDiff;
......@@ -131,7 +131,7 @@
if (element) {
var listElem = $(element).closest('li');
if (listElem.is("LI") && listElem !== focusedListElement) {
$('#' + settings.revealDivId + ':visible').slideUp(settings.timeout);
$('#' + settings.itemInfoDivId + ':visible').slideUp(settings.timeout);
peekedList.children('li').removeClass(settings.selectedClass);
listElem.addClass(settings.selectedClass);
focusedListElement = listElem;
......@@ -141,7 +141,7 @@
debounce(showExpandedInfo, 500, false)();
}
} else {
$('#' + settings.revealDivId).hide();
$('#' + settings.itemInfoDivId).hide();
}
}
};
......@@ -173,7 +173,7 @@
bodyHeight = $('body').outerHeight();
viewPortHeight = $(window).height();
distanceFromListEndToBodyEnd = bodyHeight - targetTop - listHeight;
distanceFromTargetToViewportEnd = viewPortHeight - targetTop - $('#' + settings.targetId).height();
distanceFromTargetToViewportEnd = viewPortHeight - targetTop - $('#' + settings.sightScopeId).height();
if (distanceFromListEndToBodyEnd < distanceFromTargetToViewportEnd) {
peekedList.css("padding-bottom", "+=" + (distanceFromTargetToViewportEnd - distanceFromListEndToBodyEnd));
......@@ -184,7 +184,7 @@
$(window).bind('scrollstart', function(){
if (scrollListenersEnabled) {
scrollInProgress = true;
$('#' + settings.revealDivId + ':visible').slideUp(settings.timeout);
$('#' + settings.itemInfoDivId + ':visible').slideUp(settings.timeout);
}
});
......@@ -192,11 +192,8 @@
//IOS specific touch event
if (scrollListenersEnabled) {
scrollInProgress = true;
$('#' + settings.revealDivId + ':visible').hide();
} else {
// console.log("scroll registered, but listener disabled");
$('#' + settings.itemInfoDivId + ':visible').hide();
}
});
$(window).bind('scrollstop', function(e){
......
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