Hot Towel ccWidgetHeader

Question

I have a simple question regarding the Hot Towel ccWidgetHeader directive, which allows a collapse on a div. Basically, my question is how to default the widget to a collapsed state? Below is my widget:

<!-- List of Parent Categories -->
                <div data-ng-repeat="category in vm.categories">
                    <div class="widget wviolet">
                        <div data-cc-widget-header title="{{category.name}}"
                             allow-collapse="true"></div>
                        <!-- TODO: how to start these collapsed -->
                        <div class="widget-content text-center text-info">
                            <table class="table table-hover table-condensed table-striped table-clickable table-responsive">
                                <thead>
                                    <tr>
                                        <th>Category</th>
                                        <th>Spot Number</th>
                                        <th>Member</th>
                                        <th>Member Website</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr data-ng-repeat="spot in vm.spotList | filter:{parentCategory: category.name}"
                                        data-ng-click="vm.onSpot(spot)">
                                        <td align="left">{{spot.category}}</td>
                                        <td align="left">{{spot.sequence}}</td>
                                        <td align="left">{{spot.companyName}}</td>
                                        <td align="left"><a href="http://{{spot.companyURL}}"><img ng-src="{{spot.companyIcon}}" /></a></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="widget-foot">
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
                <!-- End list of parent categories --> 

Thanks in advance for assistance....

Actually it's the ccWidgetMinimize directive inside the widgetheader.html that does the toggling. The ccWidgetMinimize directive is as follows:

app.directive('ccWidgetMinimize', function () {
    // Usage:
    // <a data-cc-widget-minimize></a>
    // Creates:
    // <a data-cc-widget-minimize="" href="#"><i class="fa fa-chevron-up"></i></a>
    var directive = {
        link: link,
        template: '<i class="fa fa-chevron-up"></i>',
        restrict: 'A'
    };
    return directive;

    function link(scope, element, attrs) {
        //$('body').on('click', '.widget .wminimize', minimize);
        attrs.$set('href', '#');
        attrs.$set('wminimize');
        element.click(minimize);

        function minimize(e) {
            e.preventDefault();
            var $wcontent = element.parent().parent().next('.widget-content');
            var iElement = element.children('i');
            if ($wcontent.is(':visible')) {
                iElement.removeClass('fa fa-chevron-up');
                iElement.addClass('fa fa-chevron-down');
            } else {
                iElement.removeClass('fa fa-chevron-down');
                iElement.addClass('fa fa-chevron-up');
            }
            $wcontent.toggle(500);
        }
    }
});

I'm a directive beginner, any assistance is appreciated.

Answer 1

I have a partial answer, which is to set the content widget div to: hidden="hidden"

This will start with widget content to collapsed. The ccWidgetMinimize starts the icon to up. All I need now is to figure out how to start the icon in the right direction depending on the :visible state of the content widget.

I figured out the start state piece. I created a ccWidgetToggle which sets the element to the proper starting state, based on the :visible property of the content widget. In addition, I reversed the meaning of the up/down arrows; up arrow if the content is collapsed; down arrow if the content is expanded. up means expand; down means collapse. Here is my new directive:

 app.directive('ccWidgetToggle', function () {
    // Usage:
    // <a data-cc-widget-toggle></a>
    var directive = {
        link: link,
        template: '<i></i>',
        restrict: 'A'
    };
    return directive;

    function link(scope, element, attrs) {
        //$('body').on('click', '.widget .wminimize', minimize);
        attrs.$set('href', '#');
        attrs.$set('wminimize');
        element.click(minimize);
        // Start state
        // <i> element in the template
        var iElement = element.children('i');
        var $wcontent = element.parent().parent().next('.widget-content');
        if ($wcontent.is(':visible')) {
            iElement.removeClass('fa fa-chevron-up');
            iElement.addClass('fa fa-chevron-down');
        } else {
            iElement.removeClass('fa fa-chevron-down');
            iElement.addClass('fa fa-chevron-up');
        }

        function minimize(e) {
            e.preventDefault();
            var $wcontent = element.parent().parent().next('.widget-content');
            // <i> element in the template
            var iElement = element.children('i');
            // if content is visible; toggle below is going to make it not visible
            if ($wcontent.is(':visible')) {
                iElement.removeClass('fa fa-chevron-down');
                iElement.addClass('fa fa-chevron-up');
            } else {
                iElement.removeClass('fa fa-chevron-up');
                iElement.addClass('fa fa-chevron-down');
            }

            // toggle visibility
            $wcontent.toggle(500);
        }
    }
});