()
| 264 | /* Private Methods |
| 265 | ================================================== */ |
| 266 | _initLayout() { |
| 267 | // Create Layout |
| 268 | this._el.container = DOM.create("div", "tl-timemarker"); |
| 269 | this._el.container.setAttribute('tabindex', '-1'); |
| 270 | |
| 271 | if (this.data.unique_id) { |
| 272 | this._el.container.id = this.data.unique_id + "-marker"; |
| 273 | } |
| 274 | |
| 275 | if (this.data.end_date) { |
| 276 | this.has_end_date = true; |
| 277 | this._el.container.className = 'tl-timemarker tl-timemarker-with-end'; |
| 278 | } |
| 279 | |
| 280 | this._el.timespan = DOM.create("div", "tl-timemarker-timespan", this._el.container); |
| 281 | this._el.timespan_content = DOM.create("div", "tl-timemarker-timespan-content", this._el.timespan); |
| 282 | this._el.content_container = DOM.create("div", "tl-timemarker-content-container", this._el.container); |
| 283 | |
| 284 | this._el.content = DOM.create("div", "tl-timemarker-content", this._el.content_container); |
| 285 | |
| 286 | this._el.line_left = DOM.create("div", "tl-timemarker-line-left", this._el.timespan); |
| 287 | this._el.line_right = DOM.create("div", "tl-timemarker-line-right", this._el.timespan); |
| 288 | |
| 289 | // Thumbnail or Icon |
| 290 | if (this.data.media) { |
| 291 | this._el.media_container = DOM.create("div", "tl-timemarker-media-container", this._el.content); |
| 292 | // ugh. needs an overhaul |
| 293 | var mtd = { url: this.data.media.thumbnail }; |
| 294 | var thumbnail_media_type = (this.data.media.thumbnail) ? lookupMediaType(mtd, true) : null; |
| 295 | if (thumbnail_media_type) { |
| 296 | var thumbnail_media = new thumbnail_media_type.cls(mtd); |
| 297 | thumbnail_media.on("loaded", function () { |
| 298 | this._el.media = DOM.create("img", "tl-timemarker-media", this._el.media_container); |
| 299 | this._el.media.src = thumbnail_media.getImageURL(); |
| 300 | this._el.media.alt = ""; |
| 301 | }.bind(this)); |
| 302 | thumbnail_media.loadMedia(); |
| 303 | } else { |
| 304 | var media_type = lookupMediaType(this.data.media).type; |
| 305 | this._el.media = DOM.create("span", "tl-icon-" + media_type, this._el.media_container); |
| 306 | } |
| 307 | |
| 308 | } |
| 309 | |
| 310 | |
| 311 | // Text |
| 312 | this._el.text = DOM.create("div", "tl-timemarker-text", this._el.content); |
| 313 | this._text = DOM.create("h2", "tl-headline", this._el.text); |
| 314 | if (this.data.text.headline && this.data.text.headline != "") { |
| 315 | this._text.innerHTML = unlinkify(this.data.text.headline); |
| 316 | } else if (this.data.text.text && this.data.text.text != "") { |
| 317 | this._text.innerHTML = unlinkify(this.data.text.text); |
| 318 | } else if (this.data.media && this.data.media.caption && this.data.media.caption != "") { |
| 319 | this._text.innerHTML = unlinkify(this.data.media.caption); |
| 320 | } |
| 321 | |
| 322 | const date = this.getFormattedDate(); |
| 323 | this.ariaLabel = `${this._text.innerHTML}, ${date}`; |
no test coverage detected