digirati-rolodex
v0.0.2Rolodex
This is a port of a component from the Royal Society: http://styleguide.royalsociety.org/#rolodex for use in an upcoming Royal Society website.
original credits
Script name: Rolodex
Author: Paul Cowtan
Created date: 28/11/2014
Notes: Rolodex widget to display various panels of information selectable from a scrollable list
Installation
You need to include the Javascript on your page:
<script type="application/javascript" src="//unpkg.com/[email protected]/umd/digirati-rolodex.min.js"></script>
You can also include it in your application bundle using npm:
$ npm install digirati-rolodex --save
You can also grab our base CSS implementation as a starting point from here or view the SCSS file in this repository.
Usage
An example of the minimum markup required:
<div class="rolodex">
<div class="rolodex__options">
<ul class="rolodex__choices" data-rolodex>
<li class="rolodex__choice rolodex__choice--selected">
<a href="#a">Choice A</a>
</li>
<li class="rolodex__choice">
<a href="#b">Choice B</a>
</li>
</ul>
</div>
<div class="rolodex__card" id="a">
<h1>Card 1</h1>
</div>
<div class="rolodex__card" id="b">
<h1>Card 2</h1>
</div>
</div>
A complete example with comments:
<!-- The rolodex container can be as large as you want, the options will automatically
translate so that the selected option in vertically in the middle.
There is a requirement that this is positioned relative and a recommendation
to hide overflow.
-->
<div class="rolodex">
<!-- The rolodex options are the list of items that allow you select different cards.
The options container can be positioned anywhere that is required in the X axis.
The Y axis is done automatically depending on what the user has selected using
translations. These can be transitioned for an animation.
-->
<div class="rolodex__options">
<ul class="rolodex__choices" data-rolodex>
<!-- Each choice needs to be a .rolodex__choice with an anchor tag
somewhere inside.
-->
<li class="rolodex__choice">
<!-- The anchor tag needs to point to the ID of the HTML element
that it wants to show.
-->
<a href="#a">Choice A</a>
</li>
<!-- When a choice is chosen by the user, it moves to be in the vertical
center of the rolodex. It is also given a selected class that can
be targeted with classes.
-->
<li class="rolodex__choice rolodex__choice--selected">
<a href="#b">Choice B</a>
</li>
</ul>
</div>
<!-- The cards themselves are very easy. they are simply containers that are stacked
on top of each other.
The best way to style these is to position them absolutely and change their
opacity when selected. This is in the base CSS. This is completely open to
implementation.
-->
<div class="rolodex__card" id="a">
<h1>Card 1</h1>
</div>
<div class="rolodex__card rolodex__card--selected" id="b">
<h1>Card 2</h1>
</div>
<!-- You can also create custom controls that bind to whatever you need.
This first example will default to a click event, and move the rolodex
to the next item (down).
-->
<div class="rolodex__next" data-rolodex-action="next">Next</div>
<!-- This second example defines a custom event "doubleclick" so that only
when the element is double-clicked it will go to the previous item (up)
-->
<div class="rolodex__prev" data-rolodex-action="prev" data-rolodex-on="doubleclick">Prev</div>
</div>