code.mattcampbell.net articulate / 8d28597263
Make milestones clickable Matt Campbell 3 years ago
5454 return this.buttonClicked(e);
5555 }
5656
57 console.log(e.target);
57 if (e.target && /milestone/.test(e.target.className)) {
58 return this.milestoneClicked(e, e.target);
59 }
5860 };
5961
6062 Timeline.prototype.buttonClicked = function (e) {
6668 } else {
6769 this.pause();
6870 }
71
72 return false;
73 };
74
75 Timeline.prototype.milestoneClicked = function (e, milestone) {
76 var progress = +milestone.dataset.progress;
77 if (isNaN(progress)) {
78 return;
79 }
80
81 this.setState({
82 progress: progress,
83 elapsed: progress * this.duration
84 });
85
86 this.circle.setState({
87 progress: progress
88 });
6989
7090 return false;
7191 };
110130 var emoji = DOM.create('span', {'class': 'emoji'});
111131 emoji.innerHTML = this.person.events[age].emoji || '';
112132
113 var elmt = DOM.create('div', {'class': 'milestone'}, emoji);
133 var elmt = DOM.create('div', {'class': 'milestone', 'data-progress': progress}, emoji);
114134 var point = this.circle.projectPoint(progress);
115135 elmt.style.left = Math.floor(point.x - 7) + 'px';
116136 elmt.style.top = Math.floor(point.y -7) + 'px';
2020
2121.emoji {
2222 font-family: 'emoji';
23 pointer-events: none;
2324}
2425
2526#timeline .content {