code.mattcampbell.net articulate / 4fb536269c
Add animated horizontal event scroller Matt Campbell 3 years ago
4444 };
4545
4646 Timeline.prototype.updateEvent = function (lifeEvent) {
47 this.dom.age.textContent = 'At age ' + lifeEvent.age + ', ';
48 this.dom.eventText.textContent = this.person.getFirstName() + ' ' + lifeEvent.content;
49 this.dom.emoji.innerHTML = lifeEvent.emoji || '';
47 var scrollX = lifeEvent.index * -this.circle.width;
48 var transform = 'translate3d(' + scrollX + 'px, 0, 0)';
49 this.dom.eventStrip.style['-webkit-transform'] = transform;
50 this.dom.eventStrip.style['transform'] = transform;
5051 };
5152
5253 Timeline.prototype.clickEvent = function (e) {
7879 return;
7980 }
8081
82 var currentAge = Math.floor(progress * this.person.getAge());
83
8184 this.setState({
8285 progress: progress,
83 elapsed: progress * this.duration
86 elapsed: progress * this.duration,
87 lifeEvent: this.person.getEventForAge(currentAge)
8488 });
8589
8690 this.circle.setState({
9498 this.circle = new Circle(500, 500);
9599
96100 this.dom = {};
97 this.dom.content = DOM.create('div', {'class': 'content'});
98
101
102 /* Horizontal strip of all life events */
103 this.dom.eventStrip = DOM.create('div', {'class': 'event-strip'}, Object.keys(this.person.events).map(function (eventId) {
104 var event = this.person.events[eventId];
105 var emoji = DOM.create('div', {'class': 'emoji'});
106 emoji.innerHTML = event.emoji;
107
108 var eventDom = DOM.create('div', {'class': 'event-container'}, [
109 DOM.create('div', {'class': 'event'}, [
110 DOM.create('strong', {'class': 'age'}, 'At age ' + event.age + ', '),
111 DOM.create('p', this.person.getFirstName() + ' ' + event.content)
112 ]),
113 emoji
114 ]);
115
116 eventDom.style.width = this.circle.width + 'px';
117 return eventDom;
118 }.bind(this)));
119
120 this.dom.eventStrip.style.width = Object.keys(this.person.events).length * this.circle.width + 'px';
121
122 /* Main DOM container */
123 this.dom.content = DOM.create('div', {'class': 'content'}, this.dom.eventStrip);
99124 this.circle.render(this.dom.content);
100
101125 this.dom.button = DOM.create('div', {'class': 'button stop'});
102 this.dom.emoji = DOM.create('div', {'class': 'emoji'});
103 this.dom.age = DOM.create('strong', {'class': 'age'});
104 this.dom.eventText = DOM.create('p');
105 this.dom.currentEvent = DOM.create('div', {'class': 'event'});
106126
107127 parent.appendChild(
108128 DOM(DOM.create('div', {'id': 'timeline'})).append(
114134 )
115135 .append(
116136 DOM(this.dom.content)
117 .append(
118 DOM(this.dom.currentEvent)
119 .append(this.dom.age)
120 .append(this.dom.eventText).node
121 )
122 .append(DOM.create('div', {'class': 'button-container'}, this.dom.button))
123 .append(this.dom.emoji).node
137 .append(DOM.create('div', {'class': 'button-container'}, this.dom.button)).node
124138 ).node
125139 );
126140
127 /* Add event milestone points */
141 /* Event milestone points */
128142 Object.keys(this.person.events).forEach(function (age) {
129143 var progress = age / this.person.getAge();
130144 var emoji = DOM.create('span', {'class': 'emoji'});
22 /* Create collection of events indexed by age for easy lookup */
33 function _indexEvents(events) {
44 var result = {};
5 events.forEach(function (event) {
5 events.forEach(function (event, index) {
6 event.index = index;
67 result[event.age] = event;
78 });
89
5151 margin: 0;
5252}
5353
54#timeline .content > .emoji {
54 #timeline .event-strip {
55 position: relative;
56 width: 5000px;
57 height: 500px;
58 text-align: left;
59 -webkit-transition: all 0.5s ease-in-out;
60 transition: all 0.5s ease-in-out;
61 -webkit-transform: translate3d(0, 0, 0);
62 transform: translate3d(0, 0, 0);
63 }
64
65 #timeline .event-container {
66 position: relative;
67 display: inline-block;
68 width: 500px;
69 height: 500px;
70 text-align: center;
71 vertical-align: top;
72 }
73
74 #timeline .event-container .emoji {
5575 position: absolute;
5676 bottom: 120px;
5777 width: 100%;