digirati-rolodex

Rolodex

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/digirati-rolodex@0.0.1/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>