https://humans-of.ai/certificate/certificate.js

1const showCert = (users) => {
2  const user = window.location.hash.substr(1);
3  if(user==='' || user==='#') return cert.cert = {};
4  fetch('https://humans-of.ai/certificate/certificates/' + user + '.json')
5    .then((response)=>{
6      return response.json();
7    })
8    .then((data)=> {
9      // add cert data
10      cert.cert = data;
11      // add prev/next/random
12      // calc PREV
13      // let p = 0;
14      // let n = 0;
15      // for (var i = 0; i < users.length; i++) {
16      //   if(users[i]===user) {
17      //     p = i-1;
18      //     n = i+1;
19      //     break;
20      //   }
21      // }
22      // cert.prev = '#' + ((p>=0) ? users[p] : users[users.length-1]);
23      // cert.next = '#' + ((n<users.length) ? users[n] : users[0]);
24      // cert.random = '#' + users[Math.floor(Math.random() * users.length)];
25    })
26    .catch(() => {
27      console.log('Error fetching user. Not found?');
28      cert.cert = {};
29    });
30}
31
32// Active certificate
33let cert = new Vue({
34  el: '#flex-container',
35  data: {
36    cert: {},
37    prev: '#',
38    next: '#',
39    random: '#'
40  },
41  methods: {
42    count: (photos) => {
43      if(!photos) return '';
44      return photos.length;
45    },
46    countWord: (photos) => {
47      if(!photos) return '';
48      if(photos.length===1) return 'photo';
49      if(photos.length>1) return 'photos'
50    },
51    buildURL: (file) => {
52      return 'https://f003.backblazeb2.com/file/humansofai/coco/' + file;
53    },
54    flickrURL: (user, file) => {
55      return ['https://www.flickr.com/photos', user, file].join('/');
56    },
57    slideshowLink: (user) => {
58      return 'https://humans-of.ai/slideshow/#' + user;
59    }
60  }
61});
62
63
64Vue.component('author', {
65  props: ['author'],
66  template: `
67    <li><a v-bind:href="hash(author)">{{author}}</a></li>
68  `,
69  methods: {
70    hash: (user) => {
71      return '#' + user;
72    }
73  }
74});
75
76// User List
77fetch('https://humans-of.ai/certificate/users.json')
78  .then((response)=>{
79    return response.json();
80  })
81  .then((data)=>{
82    
83    // show certificate, it applicable
84    showCert(data);
85    // listen to hash change
86    window.onhashchange = function() { 
87      showCert(data);
88    };
89    // format number with , separator; then update total count
90    let ct = String(data.length);
91        ct = ct.slice(0, ct.length-3) + ',' + ct.slice(ct.length-3, ct.length);
92    document.getElementById('total-count').innerHTML = ct + '+';
93
94    // fill array over time
95    let x = 0, inc = 1000;
96        x += inc; // bc. first batch is auto applied
97    let query = '';
98
99    let search = new Vue({
100      el: '#search',
101      data: {
102        //authors: data,
103        search: '',
104        //results: []
105      }
106    });
107
108    // render panels
109    let humans = new Vue({
110      el: '#humans',
111      data: {
112        authors: data.slice(0,inc)
113      },
114      computed: {
115        authorsFiltered: function() {
116          return this.authors.filter((author)=> {
117            return author.toLowerCase().slice(0,search.search.length) === search.search.toLowerCase();
118          });
119        }
120      }
121    });
122    
123    // add values over time
124    let adder = setInterval(() => {
125      for (var i = x; i < x+inc; i++) {
126        if(i>=data.length) {
127          clearInterval(adder);
128          break;
129        }
130        humans.authors.push(data.slice(i,i+1)[0]);
131      }
132      x+=inc;
133    }, 1);
134    
135  });