Karmen-PWA/source/index.js at main · Call-for-Code/Karmen-PWA · GitHub

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
/* global zuix */

let drawerLayout;
let viewPager;
let topicIndicator;
let topicButtons;

zuix.using('script', './service-worker.js');
zuix.using('style', '//zuixjs.github.io/zkit/css/flex-layout-attribute.min.css');
zuix.using('style', './index.scss');

zuix.$.find('.app-switcher').on('click', function () {
    if (drawerLayout) drawerLayout.open();
});

window.options = {
    drawerLayout: {
        autoHideWidth: -1,
        drawerWidth: 350,
        ready: function () {
            drawerLayout = this;
            const view = zuix.$(this.view());
            view.find('.spamText').on('click', function () {
                if (!drawerLayout) drawerLayout.close();
            });
            this.close();
        }
    },
    headerBar: {
        ready: function () {
            const view = zuix.$(this.view());
            // // handle 'topic' buttons click (goto clicked topic page)
            // topicButtons = view.find('.topics').children().each(function (i, el) {
            //     this.on('click', function (e) {
            //         if (viewPager) viewPager.page(i);
            //     });
            // });
            // open drawer when the profile icon is clicked
            view.find('.app-switcher').on('click', function () {
                if (drawerLayout) drawerLayout.open();
            });
            showPage(1);
        }
    },
    footerBar: {
        ready: function () {
            const view = zuix.$(this.view());
            const buttons = view.find('button');
            buttons.each(function (i, el) {
                // TODO:
                this.on('click', function () {
                    buttons.removeClass('active');
                    this.addClass('active');
                    showPage(i);
                });
            });
        }
    },
    viewPager: {
        enablePaging: true,
        startGap: 36,
        on: {
            'page:change': function (e, page) {
                syncPageIndicator(page);
                // show header/footer
                if (viewPager) {
                    const p = viewPager.get(page.in);
                    zuix.context(p).show();
                }
            }
        },
        ready: function () {
            viewPager = this;
        }
    },
    topicIndicator: {
        enablePaging: true,
        startGap: 36,
        ready: function () {
            topicIndicator = this;
        }
    },
    autoHidingBars: {
        header: 'header-bar',
        footer: 'footer-bar',
        height: 56,
        on: {
            'page:scroll': function (e, data) {
                zuix.componentize();
            }
        }
    },
    content: {
        css: false
    }
};

function syncPageIndicator(page) {
    if (topicButtons) {
        topicButtons.eq(page.out).removeClass('active');
        topicButtons.eq(page.in).addClass('active');
    }
    if (topicIndicator) topicIndicator.page(page.in);
}

function showPage(i) {
    // show header top-box
    zuix.field('header-box')
        .children().hide()
        .eq(i).show();
    // // show header bottom-box
    // zuix.field('header-tools')
    //     .children().hide()
    //     .eq(i).show();
    // show page
    zuix.field('pages')
        .children().hide()
        .eq(i).show();
    if (viewPager) viewPager.refresh();
}

// Turn off debug output
window.zuixNoConsoleOutput = true;