Commit 16e687ef authored by Kjetil Thuen's avatar Kjetil Thuen

Made it possible for all settings parameters to be functions.

parent 783bfb8a
ListEntryInfo ListEntryInfo
============= =============
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. 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 plugin will add one or two DOM elements after your list. The first acts as the sight scope, and will always be added. It will initially be positioned over the first list entry. 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 its not already present. The plugin will add one or two DOM elements after your list. The first acts as
the sight scope, and will always be added. It will initially be positioned over
the first list entry. 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 its not already present.
Installation 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 > npm install grunt-cli -g
...@@ -26,29 +35,50 @@ The package will be in the `dist` directory which you can copy to your app. ...@@ -26,29 +35,50 @@ The package will be in the `dist` directory which you can copy to your app.
Usage 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({parameters}) $("#my-list").listEntryInfo({parameters})
``` ```
The parameters object is a javascript object containing several optional parameters to modify the behaviour of the plugin. They are: The parameters object is a javascript object containing several optional
parameters to modify the behaviour of the plugin. All the parameters can be
functions or static values. They are:
* `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 that populates the revealDiv with a given
string and then slides it into view is passed as the second argument. If you do
not want to alter the DOM yourself, you need to call this function with the
html snippet you want displayed. 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 that populates the revealDiv with a given string and then slides it into view is passed as the second argument. If you do not want to alter the DOM yourself, you need to call this function with the html snippet you want displayed. The default function just puts the given id into the DOM element:
``` ```
function(id, displayCallbackFunc){displayCallbackFunc("<p><strong>" + id + "</strong> selected.</p>");} function(id, displayCallbackFunc){displayCallbackFunc("<p><strong>" + id + "</strong> selected.</p>");}
``` ```
* `selectedClass`: The class to append to the selected list element. For styling. The default value is "listEntryInfoSelected".
* `sightScopeId`: The DOM id of the scope area. The element must be created by the plugin. If an element with the given id already exists, the plugin initialisation will fail silently. The default value is "listSightScope". * `selectedClass`: The class to append to the selected list element. For
styling. The default value is "listEntryInfoSelected".
* `sightScopeId`: The DOM id of the scope area. The element must be created by
the plugin. If an element with the given id already exists, the plugin
initialisation will fail silently. The default value is "listSightScope".
* `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". * `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. * `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 * `rememberLastSelected`: Whether the plugin should store the last selected
listentry in session storage (requires html5 compliant browser). If the plugin listentry in session storage (requires html5 compliant browser). If the plugin
...@@ -59,6 +89,8 @@ function(id, displayCallbackFunc){displayCallbackFunc("<p><strong>" + id + "</st ...@@ -59,6 +89,8 @@ function(id, displayCallbackFunc){displayCallbackFunc("<p><strong>" + id + "</st
initalelement value is set, but no list element is found with the given id, 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. 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. 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. See the file `example.html` for example usage.
This diff is collapsed.
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