chrome/browser/resources/chromeos/switch_access/menu_panel.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.

/**
 * Class to handle the Switch Access menu panel.
 * @constructor
 */
function Panel() {}

// This must be kept in sync with the div ID in menu_panel.html
Panel.MENU_ID = 'switchaccess_menu_actions';
// This must be kept in sync with the class name in menu_panel.css
Panel.FOCUS_CLASS = 'focus';

Panel.readyReceived = false;
Panel.loaded = false;
window.addEventListener('message', Panel.preMessageHandler);

/**
 * Captures messages before the Panel is initialized.
 */
Panel.preMessageHandler = function() {
  Panel.readyReceived = true;
  if (Panel.loaded)
    Panel.sendReady();
  window.removeEventListener('message', Panel.preMessageHandler);
};

/**
 * Initialize the panel and buttons.
 */
Panel.init = function() {
  Panel.loaded = true;
  if (Panel.readyReceived)
    Panel.sendReady();

  let div = document.getElementById(Panel.MENU_ID);
  for (let button of div.children)
    Panel.setupButton(button);
  window.addEventListener('message', Panel.matchMessage);
};

/**
 * Sends a message to the background when both pages are loaded.
 */
Panel.sendReady = function() {
  MessageHandler.sendMessage(MessageHandler.Destination.BACKGROUND, 'ready');
};

/**
 * Adds an event listener to the given button to send a message when clicked.
 * @param {!HTMLElement} button
 */
Panel.setupButton = function(button) {
  let id = button.id;
  button.addEventListener('click', function() {
    MessageHandler.sendMessage(MessageHandler.Destination.BACKGROUND, id);
  }.bind(id));
};

/**
 * Takes the given message and sees if it matches any expected pattern. If
 * it does, extract the parameters and pass them to the appropriate handler.
 * If not, log as an unrecognized action.
 *
 * @param {Object} message
 */
Panel.matchMessage = function(message) {
  if (message.data === 'ready') {
    clearInterval(Panel.handshakeInterval);
    return;
  }
  let matches = message.data.match(MessageHandler.SET_ACTIONS_REGEX);
  if (matches && matches.length === 2) {
    let actions = matches[1].split(',');
    Panel.setActions(actions);
    return;
  }
  matches = message.data.match(MessageHandler.SET_FOCUS_RING_REGEX);
  if (matches && matches.length === 3) {
    let id = matches[1];
    let shouldAdd = matches[2] === 'on';
    Panel.updateStyle(id, Panel.FOCUS_CLASS, shouldAdd);
    return;
  }
  console.log('Action not recognized: ' + message.data);
};

/**
 * Sets which buttons are enabled/disabled, based on |actions|.
 * @param {!Array<string>} actions
 */
Panel.setActions = function(actions) {
  let div = document.getElementById(Panel.MENU_ID);
  for (let button of div.children)
    button.disabled = !actions.includes(button.id);
};

/**
 * Sets the style for the element with the given |id| by toggling
 * |className|.
 * @param {string} id
 * @param {string} className
 * @param {bool} shouldAdd
 */
Panel.updateStyle = function(id, className, shouldAdd) {
  let htmlNode = document.getElementById(id);
  if (shouldAdd)
    htmlNode.classList.add(className);
  else
    htmlNode.classList.remove(className);
};

window.addEventListener('load', Panel.init);