chrome/browser/resources/chromeos/assistant_optin/assistant_third_party.js

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

/**
 * @fileoverview Polymer element for displaying material design assistant
 * third party screen.
 *
 * Event 'loading' will be fired when the page is loading/reloading.
 * Event 'loaded' will be fired when the page has been successfully loaded.
 */

/**
 * Name of the screen.
 * @type {string}
 */
const THIRD_PARTY_SCREEN_ID = 'ThirdPartyScreen';

Polymer({
  is: 'assistant-third-party',

  behaviors: [OobeI18nBehavior, OobeDialogHostBehavior],

  properties: {
    /**
     * Buttons are disabled when the page content is loading.
     */
    buttonsDisabled: {
      type: Boolean,
      value: true,
    },
  },

  /**
   * Whether all the setting zippy has been successfully loaded.
   * @type {boolean}
   * @private
   */
  settingZippyLoaded_: false,

  /**
   * Whether all the consent text strings has been successfully loaded.
   * @type {boolean}
   * @private
   */
  consentStringLoaded_: false,

  /**
   * Whether the screen has been shown to the user.
   * @type {boolean}
   * @private
   */
  screenShown_: false,

  /**
   * Sanitizer used to sanitize html snippets.
   * @type {HtmlSanitizer}
   * @private
   */
  sanitizer_: new HtmlSanitizer(),

  /** @private {?assistant.BrowserProxy} */
  browserProxy_: null,

  /** @private {Object} */
  webview_: null,

  /**
   * On-tap event handler for next button.
   *
   * @private
   */
  onNextTap_() {
    if (this.buttonsDisabled) {
      return;
    }
    this.buttonsDisabled = true;
    this.browserProxy_.userActed(THIRD_PARTY_SCREEN_ID, ['next-pressed']);
  },

  /** @override */
  created() {
    this.browserProxy_ = assistant.BrowserProxyImpl.getInstance();
  },

  /**
   * Reset the webview and add load complete handler.
   */
  resetWebview() {
    this.webview_ = document.createElement('webview');
    this.webview_.id = 'overlay-webview';
    this.webview_.classList.add('flex');
    var webviewContainer = this.$['webview-container'];
    this.webview_.onloadstop = function() {
      webviewContainer.classList.remove('overlay-loading');
    };
    this.$$('#overlay-webview').replaceWith(this.webview_);
  },

  /**
   * Click event handler for information links.
   * @param {MouseEvent} e click event.
   */
  urlClickHandler(e) {
    if (e.target.localName !== 'a') {
      return;
    }
    e.preventDefault();
    this.lastFocusedElement = e.target;
    this.showThirdPartyOverlay(e.target.href, e.target.innerText);
  },

  /**
   * Shows third party information links in overlay dialog.
   * @param {string} url URL to show.
   * @param {string} title Title of the dialog.
   */
  showThirdPartyOverlay(url, title) {
    this.$['webview-container'].classList.add('overlay-loading');
    this.webview_.src = url;
    this.$['third-party-overlay'].setTitleAriaLabel(title);
    this.$['third-party-overlay'].showModal();
    this.$['overlay-close-button'].focus();
  },

  /**
   * Hides overlay dialog.
   */
  hideOverlay() {
    this.resetWebview();
    this.$['third-party-overlay'].close();
    if (this.lastFocusedElement) {
      this.lastFocusedElement.focus();
      this.lastFocusedElement = null;
    }
  },

  /**
   * Reloads the page.
   */
  reloadPage() {
    this.fire('loading');
    this.buttonsDisabled = true;
  },

  /**
   * Reload the page with the given consent string text data.
   */
  reloadContent(data) {
    this.$['third-party-dialog'].setAttribute(
        'aria-label', data['thirdPartyTitle']);
    this.$['title-text'].textContent = data['thirdPartyTitle'];
    this.$['next-button'].labelForAria = data['thirdPartyContinueButton'];
    this.$['next-button-text'].textContent = data['thirdPartyContinueButton'];
    this.$['footer-text'].innerHTML =
        this.sanitizer_.sanitizeHtml(data['thirdPartyFooter']);

    this.$['footer-text'].onclick = this.urlClickHandler.bind(this);

    this.consentStringLoaded_ = true;
    if (this.settingZippyLoaded_) {
      this.onPageLoaded();
    }
  },

  /**
   * Add a setting zippy with the provided data.
   */
  addSettingZippy(zippy_data) {
    if (this.settingZippyLoaded_) {
      if (this.consentStringLoaded_) {
        this.onPageLoaded();
      }
      return;
    }

    for (var i in zippy_data) {
      var data = zippy_data[i];
      var zippy = document.createElement('setting-zippy');
      zippy.setAttribute(
          'icon-src',
          'data:text/html;charset=utf-8,' +
              encodeURIComponent(
                  zippy.getWrappedIcon(data['iconUri'], data['title'])));
      zippy.setAttribute('expand-style', true);

      var title = document.createElement('div');
      title.slot = 'title';
      title.innerHTML = this.sanitizer_.sanitizeHtml(data['title']);
      zippy.appendChild(title);

      var description = document.createElement('div');
      description.slot = 'content';
      description.innerHTML = this.sanitizer_.sanitizeHtml(data['description']);
      zippy.appendChild(description);

      var additional = document.createElement('div');
      additional.slot = 'additional';
      additional.innerHTML =
          this.sanitizer_.sanitizeHtml(data['additionalInfo']);
      zippy.appendChild(additional);

      additional.onclick = this.urlClickHandler.bind(this);

      this.$['insertion-point'].appendChild(zippy);
    }

    this.settingZippyLoaded_ = true;
    if (this.consentStringLoaded_) {
      this.onPageLoaded();
    }
  },

  /**
   * Handles event when all the page content has been loaded.
   */
  onPageLoaded() {
    this.fire('loaded');
    this.buttonsDisabled = false;
    this.$['next-button'].focus();
    if (!this.hidden && !this.screenShown_) {
      this.browserProxy_.screenShown(THIRD_PARTY_SCREEN_ID);
      this.screenShown_ = true;
    }
  },

  /**
   * Signal from host to show the screen.
   */
  onShow() {
    this.$['overlay-close-button'].addEventListener(
        'click', this.hideOverlay.bind(this));
    this.resetWebview();

    if (!this.settingZippyLoaded_ || !this.consentStringLoaded_) {
      this.reloadPage();
    } else {
      Polymer.RenderStatus.afterNextRender(
          this, () => this.$['next-button'].focus());
      this.browserProxy_.screenShown(THIRD_PARTY_SCREEN_ID);
      this.screenShown_ = true;
    }
  },
});