Register widget in LP

##How to register a card widget in Landing Pages

1. First you define a name in your widget like:

(function($, undefined) {
    $.KBWidget({
        name: 'kbaseFooBar',
        parent: ...

2. You create view layout file in functional-site/views/objects/ with name say foobar.html. Simple layout looks like:

<div class="row">
    <div class="col-md-12">
        <div foobarcards></div>
    </div>
</div>

3. You register controller in functional-site/js/controllers.js that passes parameters parsed from url into widget:

app // on top of the file
    // many already registered controllers
.controller('FooBarDetail', function($scope, $stateParams) {
    $scope.params = {'id': $stateParams.id,
                     'ws': $stateParams.ws};
})

4. Add url parsing rule in initialization function of functional-site/js/app.js recognizing urls pointing to your widget like:

    $stateProvider
    .state('foobar',
        {url: '/foobars/:ws/:id',   // here "foobars" stands for so called "url prefix"
         templateUrl: 'views/objects/foobar.html',
         controller: 'FooBarDetail'});

5. Add directive in functional-site/js/directives/cards.js mapping elements from html layout to visual logic like:

    .directive('foobarcards', function($rootScope) {
        return {
            link: function(scope, element, attrs) {
                if (cardManager) cardManager.destroy();
                cardManager = $(element).KBaseCardLayoutManager({
                    template: "foobar", 
                    data: scope.params
                });
            }
        };
    })

6. Add visual logic into src/widgets/kbaseCardLayoutManager.js (there are more than one place you need to inject in this file):

6.1. Add if-case in showInitialCards: function() {:

            else if (this.options.template.toLowerCase() === "foobar")
                this.showFooBarCards();

6.2. Add showing function invoked from above code:

        showFooBarCards: function() {
            this.addNewCard("kbaseFooBar",  // name of widget
                    {   fooBarID: this.options.data.id,
                        workspaceID: this.options.data.ws,
                        isInCard: true
                    },{ my: "left top",
                        at: "left bottom",
                        of: "#app"
                    }
                );
            return this;
        },

6.3. Add showing code inside registerEvents: function() { that could be triggered from another card (optional):

            $(document).on("showFooBar", function(event, data) {
            	self.addNewCard("kbaseFooBar",
            			{
            				workspaceID: data.workspaceID,
            				fooBarID: data.fooBarID,
            				isInCard: true
            			},
            			{
            				my: "left top",
            				at: "center",
            				of: data.event
            			}
            	);
            });

7. Don't forget to register javascript file with your widget in functional-site/index.html:

        <script src="../src/widgets/path-to-widget/kbaseFooBar.js"></script>

8. Add rule into functional-site/landing_page_map.json for routing to url corresponding to your widget from workspace objects of certain type (let it be KBaseFooBar.FooBar) listed in workspace browser:

    "KBaseFooBar" : {
    	"FooBar" : "foobars"  // here "foobars" corresponds to url prefix from step 4.
    }