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
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111
  112
  113
  114
  115
  116
  117
  118
  119
  120
  121
  122
  123
  124
  125
  126
  127
  128
  129
  130
  131
  132
  133
  134
  135
  136
  137
  138
  139


ash / webui / diagnostics_ui / resources / diagnostics_sticky_banner.ts [blame]

// Copyright 2021 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'chrome://resources/ash/common/cr_elements/icons.html.js';
import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
import './diagnostics_shared.css.js';

import {assert} from 'chrome://resources/js/assert.js';
import {PolymerElementProperties} from 'chrome://resources/polymer/v3_0/polymer/interfaces.js';
import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

import {getTemplate} from './diagnostics_sticky_banner.html.js';

export type ShowCautionBannerEvent = CustomEvent<{message: string}>;

declare global {
  interface HTMLElementEventMap {
    'show-caution-banner': ShowCautionBannerEvent;
    'dismiss-caution-banner': CustomEvent<void>;
  }
}

export class DiagnosticsStickyBannerElement extends PolymerElement {
  static get is(): string {
    return 'diagnostics-sticky-banner';
  }

  static get template(): HTMLTemplateElement {
    return getTemplate();
  }

  static get properties(): PolymerElementProperties {
    return {
      bannerMessage: {
        type: String,
        value: '',
        notify: true,
      },

      scrollingClass: {
        type: String,
        value: '',
      },

      scrollTimerId: {
        type: Number,
        value: -1,
      },
    };
  }

  bannerMessage: string;
  protected scrollingClass: string;
  private scrollTimerId: number;

  override connectedCallback(): void {
    super.connectedCallback();
    window.addEventListener(
        'show-caution-banner',
        (e) => this.showCautionBannerHandler((e as CustomEvent)));
    window.addEventListener(
        'dismiss-caution-banner', this.dismissCautionBannerHandler);
    window.addEventListener('scroll', this.scrollClassHandler);
  }

  override disconnectedCallback(): void {
    super.disconnectedCallback();
    window.removeEventListener(
        'show-caution-banner',
        (e) => this.showCautionBannerHandler((e as CustomEvent)));
    window.removeEventListener(
        'dismiss-caution-banner', this.dismissCautionBannerHandler);
    window.removeEventListener('scroll', this.scrollClassHandler);
  }

  /**
   * Event callback for 'show-caution-banner' which is triggered from routine-
   * section. Event will contain message to display on message property of
   * event found on path `event.detail.message`.
   */
  private showCautionBannerHandler = (e: ShowCautionBannerEvent): void => {
    assert(e.detail.message);
    this.bannerMessage = e.detail.message;
  };

  /**
   * Event callback for 'dismiss-caution-banner' which is triggered from
   * routine-section.
   */
  private dismissCautionBannerHandler = (): void => {
    this.bannerMessage = '';
  };

  /**
   * Event callback for 'scroll'.
   */
  private scrollClassHandler = (): void => {
    this.onScroll();
  };

  /**
   * Event handler for 'scroll' to ensure shadow and elevation of banner is
   * correct while scrolling. Timer is used to clear class after 300ms.
   */
  private onScroll(): void {
    if (!this.bannerMessage) {
      return;
    }

    // Reset timer since we've received another 'scroll' event.
    if (this.scrollTimerId !== -1) {
      this.scrollingClass = 'elevation-2';
      clearTimeout(this.scrollTimerId);
    }

    // Remove box shadow from banner since the user has stopped scrolling
    // for at least 300ms.
    this.scrollTimerId = window.setTimeout(() => this.scrollingClass = '', 300);
  }

  getScrollingClassForTesting(): string {
    return this.scrollingClass;
  }

  getScrollTimerIdForTesting(): number {
    return this.scrollTimerId;
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'diagnostics-sticky-banner': DiagnosticsStickyBannerElement;
  }
}

customElements.define(
    DiagnosticsStickyBannerElement.is, DiagnosticsStickyBannerElement);