Combining aui-Tabview combined with aui-Pagination

Question

I'm using AlloyUI components within a YUI script and am trying to combine aui-tabview (Pills) with aui-pagination such that clicking on each tab(pill) updates the pagination from the contents/nodelist for each tab. For example, if there are 7 items in the nodelist for tab-2 then I should get 7 pagination buttons, 6 items for tab-3 should show 6 pagination buttons, etc. I cannot get these two components to integrate. Any help would be gratefully received.

Here is my code:

<div id="myTab">
  <ul class="nav nav-pills">
    <li class="active"><a href="#view-all">View all</a></li>
    <li><a href="#beauty">Beauty</a></li>
    <li><a href="#days-out">Days out</a></li>
    <li><a href="#holidays">Holidays</a></li>
  </ul>

  <div class="products tab-content">
    <div id="beauty" class="tab-pane">
      <div>some content</div>
      <div>some more content</div>
      <div>more content</div>
      <div>a few words</div>
    </div>
    <div id="days-out" class="tab-pane">
      <div>some content</div>
      <div>some more content</div>
      <div>more content</div>
      <div>a few words</div>
    </div>
    <div id="holidays" class="tab-pane">
      <div>some content</div>
      <div>some more content</div>
      <div>more content</div>
      <div>a few words</div>
    </div>
  </div>
</div>

    <script>
        YUI({
        }).use('node', 'node-base', 'event', 'transition', 'anim', 'aui-tabview', 'aui-pagination', function(Y) {
            new Y.TabView(
                {
                    srcNode: '#myTab',
                    type: 'pills'
                }
            ).render();

            Y.one(".nav.nav-pills").delegate('click', function(e) {
                var id = Y.one(e.currentTarget);
                var href = id.get('href');
                var arr = href.split("#");
                var target = arr[1];
                var pages = Y.all('#' +target + " > div");
                var total_rows = pages._nodes.length;
                Y.log(total_rows);

                new Y.Pagination(
                    {
                        page: 1,
                        total: total_rows,
                        boundingBox: '#pagination',
                        circular: false,
                        contentBox: '#pagination .pagination-content',
                        on: {
                            changeRequest: function(event) {
                                var instance = this,
                                    current = event.currentTarget,
                                    state = event.state,
                                    lastState = event.lastState;
                                if (lastState) {
                                    pages.item(lastState.page - 1).setStyle('display', 'none');
                                }
                                pages.item(state.page - 1).setStyle('display', 'block');
                            }
                        },
                        after: {
                            changeRequest: function(event) {
                                // goto top
                                a = new Y.Anim(
                                    {
                                        node: 'body',
                                        to: {scrollTop: 0},
                                        duration: 0.4,
                                        easing: Y.Easing.easeOut
                                    }
                                );
                                a.run();
                            }
                        },
                        strings: {
                            next: '&raquo;',
                            prev: '&laquo;'
                        }
                    }
                ).render();

            }, 'a');   
        }
        );
    </script>

score 0 · Accepted Answer · answered May 23 '14 at 09:48

Since I've received no answer to the above posting, I've been left with a few days to mull it over and come up with the following solution. Any additions or improvements welcome.

<script>
YUI({}).ready('node', 'event', 'transition', 'anim', 'aui-tabview', 'aui-pagination', function(Y) {

var tabs = '';
var setup = '';
var tabTargetID = '';

tabs = new Y.TabView(
    {
        srcNode: '#myTab',
        type: 'pills'
    }
).render();

setup = {
    contentId: function() {
        if (tabTargetID !== '') {
            var content = tabTargetID;
        } else {
            var id = tabs.getActiveTab();
            var href = id.one('a').get('href');
            var arr = href.split("#");
            var content = '#' + arr[1];
        }
        return content;
    },
    pages: function() {
        return Y.all(setup.contentId() + " > div");
    },
    currentTabPageTotal: function() {
        return setup.pages()._nodes.length;
    }
};

var pages = setup.pages();
var pg = new Y.Pagination(
    {
        page: 1,
        total: setup.currentTabPageTotal(),
        boundingBox: '#pagination',
        circular: false,
        contentBox: '#pagination > ul',
        offset: 1,
        on: {
            changeRequest: function(e) {
                var instance = this,
                    state = e.state,
                    lastState = e.lastState;

                // Set the pagination links active state
                Y.all('.pagination > ul > li:not(.pagination-control)').removeClass('active');
                var pg_links = Y.all(".pagination > ul > li:not(.pagination-control)");
                pg_links.item(state.page - 1).addClass('active');

                // Hide all but the focussed tabs 1st paginated page
                pages.setStyles({display: 'none', opacity: '0'});
                pages.item(state.page - 1).setStyle('display', 'block')
                    .transition({
                        opacity: {value: 1, duration: 1}
                    });
            }
        },
        after: {
            changeRequest: function(e) {
                // goto top
                a = new Y.Anim(
                    {
                        node: 'body',
                        to: {scrollTop: 0},
                        duration: 0.4,
                        easing: Y.Easing.easeOut
                    }
                );
                a.run();
            }
        },
        strings: {
            next: '&raquo;',
            prev: '&laquo;'
        }
    }
).render();

tabs.on('selectionChange', function(e) {

    var tabIndex = tabs.indexOf(e.newVal);
    var tabContents = Y.all(".tab-content > div");
    var tabTarget = Y.one(tabContents.item(tabIndex));
    tabTargetID = '#' + tabTarget.get('id');
    pages = setup.pages();

    // Hide all but the focussed tabs 1st paginated content
    Y.all(tabTargetID + ' > div').setStyles({display: 'none', opacity: '0'});
    Y.one(tabTargetID + ' > div').setStyles({display: 'block'})
        .transition({
            opacity: {value: 1, duration: 1}
        });

    // For the focussed Tab, build the pagination links with x number of links and set to 1st page
    pg.setAttrs({page: 1, total: setup.currentTabPageTotal()});

    // Highlight the 1st pagination link
    Y.all('.pagination > ul > li:not(.pagination-control)').removeClass('active');
    Y.one('.pagination > ul > li:not(.pagination-control)').addClass('active');

});
});
</script>

Combining aui-Tabview combined with aui-Pagination

1 Answers1