All files / sp-tab-container ViewModel.js

86.21% Statements 25/29
75% Branches 12/16
100% Functions 7/7
86.21% Lines 25/29

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124        1x                 1x                                   9x 1x     8x 1x       7x 11x     7x 1x   6x     7x                                 4x               2x 2x   2x                         2x 1x   1x               1x 1x 1x                     4x 1x   3x          
import DefineMap from 'can-define/map/map';
import DefineList from 'can-define/list/list';
import Page from '../sp-tab-page/ViewModel';
 
const PageList = DefineList.extend('NavPageList', {
    '#': Page
});
 
/**
 * A `<sp-tab-container />` component's ViewModel
 * @class ViewModel
 * @memberof sp-tab-container
 */
const ViewModel = DefineMap.extend('NavContainer', {
    /** @lends sp-tab-container.ViewModel.prototype */
    /**
     * An array of pages currently displayed in this sp-tab-container
     * @memberof sp-tab-container.ViewModel.prototype
     * @type {Array<sp-tab-page.ViewModel>}
     */
    pages: {Default: PageList},
    /**
     * The currently active page
     * @type {sp-tab-page.ViewModel}
     * @memberof sp-tab-container.ViewModel.prototype
     */
    activePage: {
        get () {
 
            let active;
 
            if (!this.pages.length) {
                return null;
            }
            
            if (this.activeId === null) {
                return null;
            }
 
            // lookup active page id
            active = this.pages.filter((p) => {
                return p.pageId === this.activeId;
            });
 
            if (active.length) {
                active = active[0];
            } else {
                active = this.pages[0];
            }
 
            return active;
        }
    },
    /**
     * The id of the page that is currently active. This value should be
     * set to change the activePage
     * @memberof sp-tab-container.ViewModel.prototype
     * @type {String}
     */
    activeId: 'string',
    /**
     *  When a `<sp-tab-page>` element is inserted into the document, it calls this
     *  method to add the page's scope to thepages array.
     *  @param {sp-tab-page.ViewModel} page the page view model that was added
     *
     */
    addPage (page) {
        this.pages.push(page);
    },
    /**
     * When a `<page>` element is removed from the document, it calls this
     * method to remove the page's scope from the pages array.
     * @param {sp-tab-page.ViewModel} page the page view model to remove
     */
    removePage (page) {
        var pages = this.pages;
        pages.splice(pages.indexOf(page), 1);
        // if the page was active, make the first item active
        Iif (page === this.active) {
            if (pages.length) {
                this.activeId = pages[0].pageId;
            } else {
                this.activeId = null;
            }
        }
    },
    /**
     * Sets a page to the currently selected/active page
     * @param {sp-tab-page.ViewModel} page The page to set as the active page
     */
    makeActive (page) {
        if (page === this.activePage) {
            return;
        }
        this.activeId = page.pageId;
    },
    /**
     * Used by nav containers that might need to toggle pages, rather than just
     * activate them (accordion)
     * @param {sp-tab-page.ViewModel} page the page to toggle
     */
    toggle (page) {
        Eif (page === this.activePage) {
            this.activeId = null;
            return;
        }
      
        this.activeId = page.pageId;
    },
    /**
     * Used to check whether the current page is the active page
     * @param {sp-tab-page.ViewModel} page The page to check whether is active
     * @return {Boolean} whether or not the page is active
     */
    isActive (page) {
        if (!page) {
            return false;
        }
        return page === this.activePage;
    }
});
 
export default ViewModel;