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 };