digirati-rolodex

    0.0.2 • Public • Published

    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>

    Keywords

    none

    Install

    npm i digirati-rolodex

    DownloadsWeekly Downloads

    5

    Version

    0.0.2

    License

    MIT

    Last publish

    Collaborators

    • stephenwf