1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
${this.showLogo_ ? html`
<div id="logo"></div>
` : ''}
${this.showDoodle_ ? html`
<div id="doodle" title="${this.doodle_!.description}">
<div id="imageDoodle" ?hidden="${!this.imageDoodle_}"
tabindex="${this.imageDoodleTabIndex_}" @click="${this.onImageClick_}"
@keydown="${this.onImageKeydown_}">
<div id="imageContainer">
<!-- The static image is always visible and the animated image is
stacked on top of the static image so that there is no flicker
when starting the animation. -->
<img id="image" src="${this.imageUrl_}" @load="${this.onImageLoad_}">
<ntp-iframe id="animation" src="${this.animationUrl_}"
?hidden="${!this.showAnimation_}">
</ntp-iframe>
</div>
<cr-button id="shareButton" title="$i18n{shareDoodle}"
@click="${this.onShareButtonClick_}">
<div id="shareButtonIcon"></div>
</cr-button>
</div>
${this.iframeUrl_ ? html`
<ntp-iframe id="iframe" src="${this.iframeUrl_}" ?expanded="${this.expanded_}"
allow="autoplay; clipboard-write">
</ntp-iframe>
` : ''}
</div>
` : ''}
${this.showShareDialog_ ? html`
<ntp-doodle-share-dialog .title="${this.doodle_!.description}"
.url="${this.doodle_!.image!.shareUrl}"
@close="${this.onShareDialogClose_}" @share="${this.onShare_}">
</ntp-doodle-share-dialog>
` : ''}
|
