Question

For a project of mine I would like to extend twitter bootstrap modal window capabilities.

I would like my modal window to get the functionality of Java CardLayout.
For those who don’t know, the CardLayout allows a container (in our case, the modal window), to accept multiple card childeren (in our case, div’s). Each child gets an index, and container initially displays the child with index ‘0’. The CardLayout interface contains function as “previous(), next(), first(), last()” wich change the displayed card according to their index.

This is a template of the HTML that I would like to use to generate a “card modal” with 4 “Cards” :

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

<div class="modal hide" id="myModal">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <div class="modal-card" card-index="0">
            This is the initial state
        </div>
        <div class="modal-card" card-index="1">
            This is the Step 1
        </div>
        <div class="modal-card" card-index="2">
            This is the Step 2
        </div>
        <div class="modal-card" card-index="3">
            This is the final State
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" card-change="previous">Previous</a>
        <a href="#" class="btn" card-change="next">Next</a>
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div> 

Since I am quite new to JS, I would like as an exercise to try to make it as generic and reusable as possible.
Ideal situation would be to have a card-modal.js file that I could toss in my project JS folder to be able to create one of those anytime I want.

I am hesitating between two directions :
– Extend the Modal class (using coffeescript “extends” keyword) since after all a CardModal “IS A” Modal.
– Create a separate class that would only deal with the response to give to those previous/next buttons.

Is there any difference about the initialization for those two options ? (What would the developer have to write to actually start the required objects)

I am just looking for a “How would you do it answer” from a more experienced developer. So extra points awarded for actually showing “why is this solution better than this one”.

Answer 1

JavaScript has a function-prototype based inheritance model; this is different from ‘traditional’ class based inheritance models you’d see in Python/Java/etc. It’s also, in absolute terms, harder to use and learn (IMHO). That’s why frameworks and compilers (like CoffeeScript) have their own built in class inheritance systems.

The downside to these ad-hoc JS class inheritance systems is that they, in general, aren’t cross compatible with other JS inheritance systems. In this particular instance the Modal class, I can see from the source code, is not a CoffeeScript class. As such, I would highly recommend against trying to extend it with CoffeeScript—that way lies madness.

I recommend you go with your option #2—build the functionality to toggle through prev/next separately. You should develop your CardLayout as standalone Javascript/jQuery which expects to be given a <div class="card-container"> element which contains N <div class="card" > elements such that no matter where the card-container element lives in the DOM you can create it with setupCardLayout($('.card-container')).

Then all you have to do to integrate it with Bootstrap Modal is just listen for the event for when the modal is shown

$('#id-of-modal').on 'shown', ()->
    setupCardLayout($(this))