https://nshaibu.github.io/assets/js/projects.js

1(function ($) {
2    let GITHUP_API = `https://api.github.com/repos/nshaibu/`;
3
4    let GITHUP_REPO_NAMES = ["QBox", "shortcutVirusRemover", 
5                            "ChatClient", "ConcurrentServer",
6                            "TrimLabelImg", "PostfixExpressionAndEvaluation",
7                            "Invoice-Management-System", "Market", "CVParser"
8                        ];
9
10    class Paginator {
11        //My Custom Repo And Post Paginator (html5up.net)
12
13        constructor(repos=[], num_on_page=10) {
14            this.repos = repos;
15            this.current_page = 1;
16            this.paginated = false;
17            this.repo_per_page = num_on_page;
18            this.pages = []
19        }
20
21        paginate() {
22            if (this.paginated) return;
23
24            let count = 0, repo_name;
25            let repo_name_array = []
26            let repos = this.repos.map(x => x)
27
28            for (let index=1; index <= this.repo_per_page; index++) {
29                count = this.repo_per_page
30                repo_name_array = []
31                while (count > 0) {
32                    try {
33                        repo_name = repos.shift();
34                        if (repo_name)
35                            repo_name_array.push(repo_name);
36                    } catch (e) {
37                        console.log(e);
38                        break;
39                    }
40                    count -= 1;
41                }
42                this.pages.push({"page_id": index, "repos": repo_name_array});
43                if (repos.length === 0) break;
44            }
45
46            this.paginated = true;
47        }
48
49        page(page_num) {
50            let res = this.pages.filter(x => x.page_id === page_num);
51            return (res.length) ? res[0]:null;
52        }
53
54        goto(page_num) {
55             if (page_num <= this.pages.length && page_num > 0) {
56                 this.current_page = page_num;
57                 return this.page(page_num)
58             }
59             return null
60        }
61
62        next() {
63            if (this.current_page >= this.pages.length){
64                this.current_page = 1;
65                return this.page(this.current_page);
66            } 
67            this.current_page += 1;
68            return this.page(this.current_page)
69        }
70
71        previous() { 
72            if (this.current_page <= 1)
73                return this.page(this.current_page);
74            this.current_page -= 1; 
75            return this.page(this.current_page)
76        }
77
78        static getGitHuhRepo(repoName, callback) {
79            $.get({
80                url: GITHUP_API + repoName,
81                success: (data) => callback(data),
82                dataType: 'json'
83            })
84            .fail(function(error) {
85                console.log(error);
86            });
87        }
88    }
89
90    let paginator = new Paginator(repos=GITHUP_REPO_NAMES, 6);
91    paginator.paginate();
92    window.paginator = paginator;
93
94    function drawProjectRepo(repoData){
95        if (repoData === null) return;
96
97        let repo = `
98        <article>
99			<header>
100				<span class="date">${repoData.created_at}</span>
101				<h2><a href="#">${repoData.name}</a></h2>
102			</header>
103			<p>${repoData.description}</p>
104			<ul class="actions special">
105				<li><a href="${repoData.html_url}" target="_blank" class="button">More</a></li>
106			</ul>
107        </article>`;
108        $(repo).appendTo("#js-projects-section");
109    }
110    
111    let firstPageObject = paginator.goto(1);
112    
113
114    if (firstPageObject) {
115        $('#js-projects-section>article').remove();
116        firstPageObject.repos.forEach(function(name) {
117            Paginator.getGitHuhRepo(name, function (data) {drawProjectRepo(data);});
118        });
119
120        $('#js-prev-pagination-btn').click(function (event) {
121            let btn = $(event.target);
122            let pageObject = paginator.previous();
123            if (pageObject) {
124                $('#js-projects-section>article').remove();
125                pageObject.repos.forEach(function (name) {
126                    Paginator.getGitHuhRepo(name, function (data) {drawProjectRepo(data);});
127                });
128            }
129        });
130
131        $('#js-next-pagination-btn').click(function (event) {
132            let btn = $(event.target);
133            let pageObject = paginator.next();
134            if (pageObject) {
135                $('#js-projects-section>article').remove();
136                pageObject.repos.forEach(function (name) {
137                    Paginator.getGitHuhRepo(name, function (data) {drawProjectRepo(data);});
138                });
139            }
140        });
141    }
142
143}(jQuery));