github.com/web-platform-tests/wpt.fyi@v0.0.0-20240530210107-70cf978996f1/webapp/components/display-logo.js (about) 1 /** 2 * Copyright 2018 The WPT Dashboard Project. All rights reserved. 3 * Use of this source code is governed by a BSD-style license that can be 4 * found in the LICENSE file. 5 */ 6 7 import '../node_modules/@polymer/paper-tooltip/paper-tooltip.js'; 8 import '../node_modules/@polymer/polymer/lib/elements/dom-if.js'; 9 import { html, PolymerElement } from '../node_modules/@polymer/polymer/polymer-element.js'; 10 import { ProductInfo, Platforms, Sources } from './product-info.js'; 11 12 class DisplayLogo extends ProductInfo(PolymerElement) { 13 static get template() { 14 return html` 15 <style> 16 :host { 17 --browser-size: 32px; 18 --source-size: 16px; 19 } 20 .icon { 21 /*Avoid (unwanted) space between images.*/ 22 font-size: 0; 23 } 24 img.browser { 25 height: var(--browser-size); 26 width: var(--browser-size); 27 } 28 img.source, 29 img.platform { 30 height: var(--source-size); 31 width: var(--source-size); 32 margin-top: var(--browser-size); 33 } 34 :host([overlap]) img.source { 35 margin-left: calc(-0.5 * var(--source-size)); 36 } 37 :host([overlap]) img.platform { 38 margin-right: calc(-0.5 * var(--source-size)); 39 } 40 .small { 41 --browser-size: 24px; 42 --source-size: 12px; 43 } 44 </style> 45 46 <div class\$="icon [[containerClass(small)]]"> 47 <template is="dom-if" if="[[platform]]" restamp> 48 <img class="platform" src="/static/[[platform]].svg" alt="[[platform]] logo"> 49 </template> 50 <img class="browser" 51 src="[[displayLogo(product.browser_name, product.labels)]]" 52 alt="[[product.browser_name]] [[product.labels]] logo"> 53 <template is="dom-if" if="[[source]]" restamp> 54 <img class="source" src="/static/[[source]].svg" alt="[[source]] logo"> 55 </template> 56 </div> 57 `; 58 } 59 60 static get is() { 61 return 'display-logo'; 62 } 63 64 static get properties() { 65 return { 66 small: { 67 type: Boolean, 68 value: false, 69 }, 70 product: { 71 type: Object, /* { 72 browser_name: String, 73 os_name: String, 74 labels: Array|Set, 75 }*/ 76 value: {} 77 }, 78 showSource: { 79 type: Boolean, 80 value: false 81 }, 82 source: { 83 computed: 'computeSource(product, showSource)', 84 }, 85 showPlatform: { 86 type: Boolean, 87 value: false 88 }, 89 platform: { 90 computed: 'computePlatform(product, showPlatform)', 91 }, 92 overlap: { 93 type: Boolean, 94 reflectToAttribute: true, 95 } 96 }; 97 } 98 99 containerClass(small) { 100 return small ? 'small' : ''; 101 } 102 103 computeSource(product, showSource) { 104 if (!showSource || !product.labels) { 105 return ''; 106 } 107 return product.labels.find(s => Sources.has(s)); 108 } 109 110 computePlatform(product, showPlatform) { 111 if (!showPlatform || !Platforms.has(product.os_name)) { 112 return ''; 113 } 114 return product.os_name; 115 } 116 } 117 118 window.customElements.define(DisplayLogo.is, DisplayLogo); 119 120 export { DisplayLogo };