chrome/browser/resources/ntp4/menu_button.js - chromium/src - Git at Google

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

 // NOTE: This file depends on ui.js (or the autogenerated ui.m.js module
 // version). These files and all files that depend on them are deprecated, and
 // should only be used by legacy UIs that have not yet been updated to new
 // patterns. Use Web Components in any new code.

 import {assert} from 'chrome://resources/js/assert_ts.js';
 import {EventTracker} from 'chrome://resources/js/event_tracker.js';
 import {isWindows} from 'chrome://resources/js/platform.js';

 import {Menu} from './menu.js';
 import {MenuItem} from './menu_item.js';
 import {AnchorType, positionPopupAroundElement} from './position_util.js';
 import {decorate, define as crUiDefine} from './ui.js';


 /**
  * Enum for type of hide. Delayed is used when called by clicking on a
  * checkable menu item.
  * @enum {number}
  */
 export const HideType = {
   INSTANT: 0,
   DELAYED: 1,
 };

 /** @const */

 /**
  * Creates a new menu button element.
  * @param {Object=} opt_propertyBag Optional properties.
  * @constructor
  * @extends {HTMLButtonElement}
  * @implements {EventListener}
  */
 export const MenuButton = crUiDefine('button');

 MenuButton.prototype = {
   __proto__: HTMLButtonElement.prototype,

   /**
    * Initializes the menu button.
    */
   decorate() {
     // Listen to the touch events on the document so that we can handle it
     // before cancelled by other UI components.
     this.ownerDocument.addEventListener('touchstart', this);
     this.addEventListener('mousedown', this);
     this.addEventListener('keydown', this);
     this.addEventListener('dblclick', this);
     this.addEventListener('blur', this);

     // Adding the 'custom-appearance' class prevents widgets.css from changing
     // the appearance of this element.
     this.classList.add('custom-appearance');
     this.classList.add('menu-button');  // For styles in menu_button.css.

     let menu;
     if ((menu = this.getAttribute('menu'))) {
       this.menu = menu;
     }

     // An event tracker for events we only connect to while the menu is
     // displayed.
     this.showingEvents_ = new EventTracker();

     this.anchorType = AnchorType.BELOW;
     this.invertLeftRight = false;
   },

   /**
    * The menu associated with the menu button.
    * @type {Menu}
    */
   get menu() {
     return this.menu_;
   },
   set menu(menu) {
     if (typeof menu === 'string' && menu[0] === '#') {
       menu = this.ownerDocument.getElementById(menu.slice(1));
       assert(menu);
       decorate(menu, Menu);
     }

     this.menu_ = menu;
     if (menu) {
       if (menu.id) {
         this.setAttribute('menu', '#' + menu.id);
       }
     }
   },

   /**
    * Whether to show the menu on press of the Up or Down arrow keys.
    */
   respondToArrowKeys: true,

   /**
    * Checks if the menu should be closed based on the target of a mouse click
    * or a touch event target.
    * @param {Event} e The event object.
    * @return {boolean}
    * @private
    */
   shouldDismissMenu_(e) {
     // The menu is dismissed when clicking outside the menu.
     // The button is excluded here because it should toggle show/hide the
     // menu and handled separately.
     return e.target instanceof Node && !this.contains(e.target) &&
         !this.menu.contains(e.target);
   },

   /**
    * Handles event callbacks.
    * @param {Event} e The event object.
    */
   handleEvent(e) {
     if (!this.menu) {
       return;
     }

     switch (e.type) {
       case 'touchstart':
         // Touch on the menu button itself is ignored to avoid that the menu
         // opened again by the mousedown event following the touch events.
         if (this.shouldDismissMenu_(e)) {
           this.hideMenuWithoutTakingFocus_();
         }
         break;
       case 'mousedown':
         if (e.currentTarget === this.ownerDocument) {
           if (this.shouldDismissMenu_(e)) {
             this.hideMenuWithoutTakingFocus_();
           } else {
             e.preventDefault();
           }
         } else {
           if (this.isMenuShown()) {
             this.hideMenuWithoutTakingFocus_();
           } else if (e.button === 0) {  // Only show the menu when using left
                                         // mouse button.
             this.showMenu(false, {x: e.screenX, y: e.screenY});

             // Prevent the button from stealing focus on mousedown.
             e.preventDefault();
           }
         }

         // Hide the focus ring on mouse click.
         this.classList.add('using-mouse');
         break;
       case 'keydown':
         this.handleKeyDown(e);
         // If the menu is visible we let it handle all the keyboard events.
         if (this.isMenuShown() && e.currentTarget === this.ownerDocument) {
           this.menu.handleKeyDown(e);
           e.preventDefault();
           e.stopPropagation();
         }

         // Show the focus ring on keypress.
         this.classList.remove('using-mouse');
         break;
       case 'focus':
         if (this.shouldDismissMenu_(e)) {
           this.hideMenu();
           // Show the focus ring on focus - if it's come from a mouse event,
           // the focus ring will be hidden in the mousedown event handler,
           // executed after this.
           this.classList.remove('using-mouse');
         }
         break;
       case 'blur':
         // No need to hide the focus ring anymore, without having focus.
         this.classList.remove('using-mouse');
         break;
       case 'activate':
         const hideDelayed = e.target instanceof MenuItem && e.target.checkable;
         const hideType = hideDelayed ? HideType.DELAYED : HideType.INSTANT;
         if (e.originalEvent instanceof MouseEvent ||
             e.originalEvent instanceof TouchEvent) {
           this.hideMenuWithoutTakingFocus_(hideType);
         } else {
           // Keyboard. Take focus to continue keyboard operation.
           this.hideMenu(hideType);
         }
         break;
       case 'scroll':
         if (!(e.target === this.menu || this.menu.contains(e.target))) {
           this.hideMenu();
         }
         break;
       case 'popstate':
       case 'resize':
         this.hideMenu();
         break;
       case 'contextmenu':
         if ((!this.menu || !this.menu.contains(e.target)) &&
             (!this.hideTimestamp_ || Date.now() - this.hideTimestamp_ > 50)) {
           this.showMenu(true, {x: e.screenX, y: e.screenY});
         }
         e.preventDefault();
         // Don't allow elements further up in the DOM to show their menus.
         e.stopPropagation();
         break;
       case 'dblclick':
         // Don't allow double click events to propagate.
         e.preventDefault();
         e.stopPropagation();
         break;
     }
   },

   /**
    * Shows the menu.
    * @param {boolean} shouldSetFocus Whether to set focus on the
    *     selected menu item.
    * @param {{x: number, y: number}=} opt_mousePos The position of the mouse
    *     when shown (in screen coordinates).
    */
   showMenu(shouldSetFocus, opt_mousePos) {
     this.hideMenu();

     this.menu.updateCommands(this);

     const event = new UIEvent(
         'menushow', {bubbles: true, cancelable: true, view: window});
     if (!this.dispatchEvent(event)) {
       return;
     }

     this.menu.show(opt_mousePos);

     this.setAttribute('menu-shown', '');

     // When the menu is shown we steal all keyboard events.
     const doc = this.ownerDocument;
     const win = doc.defaultView;
     this.showingEvents_.add(doc, 'keydown', this, true);
     this.showingEvents_.add(doc, 'mousedown', this, true);
     this.showingEvents_.add(doc, 'focus', this, true);
     this.showingEvents_.add(doc, 'scroll', this, true);
     this.showingEvents_.add(win, 'popstate', this);
     this.showingEvents_.add(win, 'resize', this);
     this.showingEvents_.add(this.menu, 'contextmenu', this);
     this.showingEvents_.add(this.menu, 'activate', this);
     this.positionMenu_();

     if (shouldSetFocus) {
       this.menu.focusSelectedItem();
     }
   },

   /**
    * Hides the menu. If your menu can go out of scope, make sure to call this
    * first.
    * @param {HideType=} opt_hideType Type of hide.
    *     default: HideType.INSTANT.
    */
   hideMenu(opt_hideType) {
     this.hideMenuInternal_(true, opt_hideType);
   },

   /**
    * Hides the menu. If your menu can go out of scope, make sure to call this
    * first.
    * @param {HideType=} opt_hideType Type of hide.
    *     default: HideType.INSTANT.
    */
   hideMenuWithoutTakingFocus_(opt_hideType) {
     this.hideMenuInternal_(false, opt_hideType);
   },

   /**
    * Hides the menu. If your menu can go out of scope, make sure to call this
    * first.
    * @param {boolean} shouldTakeFocus Moves the focus to the button if true.
    * @param {HideType=} opt_hideType Type of hide.
    *     default: HideType.INSTANT.
    */
   hideMenuInternal_(shouldTakeFocus, opt_hideType) {
     if (!this.isMenuShown()) {
       return;
     }

     this.removeAttribute('menu-shown');
     if (opt_hideType === HideType.DELAYED) {
       this.menu.classList.add('hide-delayed');
     } else {
       this.menu.classList.remove('hide-delayed');
     }
     this.menu.hide();

     this.showingEvents_.removeAll();
     if (shouldTakeFocus) {
       this.focus();
     }

     const event = new UIEvent(
         'menuhide', {bubbles: true, cancelable: false, view: window});
     this.dispatchEvent(event);

     // On windows we might hide the menu in a right mouse button up and if
     // that is the case we wait some short period before we allow the menu
     // to be shown again.
     this.hideTimestamp_ = isWindows ? Date.now() : 0;
   },

   /**
    * Whether the menu is shown.
    */
   isMenuShown() {
     return this.hasAttribute('menu-shown');
   },

   /**
    * Positions the menu below the menu button. At this point we do not use any
    * advanced positioning logic to ensure the menu fits in the viewport.
    * @private
    */
   positionMenu_() {
     positionPopupAroundElement(
         this, this.menu, this.anchorType, this.invertLeftRight);
   },

   /**
    * Handles the keydown event for the menu button.
    */
   handleKeyDown(e) {
     switch (e.key) {
       case 'ArrowDown':
       case 'ArrowUp':
         if (!this.respondToArrowKeys) {
           break;
         }
       case 'Enter':
       case ' ':
         if (!this.isMenuShown()) {
           this.showMenu(true);
         }
         e.preventDefault();
         break;
       case 'Escape':
       case 'Tab':
         this.hideMenu();
         break;
     }
   },
 };
	// Copyright 2012 The Chromium Authors
	// Use of this source code is governed by a BSD-style license that can be
	// found in the LICENSE file.

	// NOTE: This file depends on ui.js (or the autogenerated ui.m.js module
	// version). These files and all files that depend on them are deprecated, and
	// should only be used by legacy UIs that have not yet been updated to new
	// patterns. Use Web Components in any new code.

	import {assert} from 'chrome://resources/js/assert_ts.js';
	import {EventTracker} from 'chrome://resources/js/event_tracker.js';
	import {isWindows} from 'chrome://resources/js/platform.js';

	import {Menu} from './menu.js';
	import {MenuItem} from './menu_item.js';
	import {AnchorType, positionPopupAroundElement} from './position_util.js';
	import {decorate, define as crUiDefine} from './ui.js';


	/**
	* Enum for type of hide. Delayed is used when called by clicking on a
	* checkable menu item.
	* @enum {number}
	*/
	export const HideType = {
	INSTANT: 0,
	DELAYED: 1,
	};

	/** @const */

	/**
	* Creates a new menu button element.
	* @param {Object=} opt_propertyBag Optional properties.
	* @constructor
	* @extends {HTMLButtonElement}
	* @implements {EventListener}
	*/
	export const MenuButton = crUiDefine('button');

	MenuButton.prototype = {
	__proto__: HTMLButtonElement.prototype,

	/**
	* Initializes the menu button.
	*/
	decorate() {
	// Listen to the touch events on the document so that we can handle it
	// before cancelled by other UI components.
	this.ownerDocument.addEventListener('touchstart', this);
	this.addEventListener('mousedown', this);
	this.addEventListener('keydown', this);
	this.addEventListener('dblclick', this);
	this.addEventListener('blur', this);

	// Adding the 'custom-appearance' class prevents widgets.css from changing
	// the appearance of this element.
	this.classList.add('custom-appearance');
	this.classList.add('menu-button'); // For styles in menu_button.css.

	let menu;
	if ((menu = this.getAttribute('menu'))) {
	this.menu = menu;
	}

	// An event tracker for events we only connect to while the menu is
	// displayed.
	this.showingEvents_ = new EventTracker();

	this.anchorType = AnchorType.BELOW;
	this.invertLeftRight = false;
	},

	/**
	* The menu associated with the menu button.
	* @type {Menu}
	*/
	get menu() {
	return this.menu_;
	},
	set menu(menu) {
	if (typeof menu === 'string' && menu[0] === '#') {
	menu = this.ownerDocument.getElementById(menu.slice(1));
	assert(menu);
	decorate(menu, Menu);
	}

	this.menu_ = menu;
	if (menu) {
	if (menu.id) {
	this.setAttribute('menu', '#' + menu.id);
	}
	}
	},

	/**
	* Whether to show the menu on press of the Up or Down arrow keys.
	*/
	respondToArrowKeys: true,

	/**
	* Checks if the menu should be closed based on the target of a mouse click
	* or a touch event target.
	* @param {Event} e The event object.
	* @return {boolean}
	* @private
	*/
	shouldDismissMenu_(e) {
	// The menu is dismissed when clicking outside the menu.
	// The button is excluded here because it should toggle show/hide the
	// menu and handled separately.
	return e.target instanceof Node && !this.contains(e.target) &&
	!this.menu.contains(e.target);
	},

	/**
	* Handles event callbacks.
	* @param {Event} e The event object.
	*/
	handleEvent(e) {
	if (!this.menu) {
	return;
	}

	switch (e.type) {
	case 'touchstart':
	// Touch on the menu button itself is ignored to avoid that the menu
	// opened again by the mousedown event following the touch events.
	if (this.shouldDismissMenu_(e)) {
	this.hideMenuWithoutTakingFocus_();
	}
	break;
	case 'mousedown':
	if (e.currentTarget === this.ownerDocument) {
	if (this.shouldDismissMenu_(e)) {
	this.hideMenuWithoutTakingFocus_();
	} else {
	e.preventDefault();
	}
	} else {
	if (this.isMenuShown()) {
	this.hideMenuWithoutTakingFocus_();
	} else if (e.button === 0) { // Only show the menu when using left
	// mouse button.
	this.showMenu(false, {x: e.screenX, y: e.screenY});

	// Prevent the button from stealing focus on mousedown.
	e.preventDefault();
	}
	}

	// Hide the focus ring on mouse click.
	this.classList.add('using-mouse');
	break;
	case 'keydown':
	this.handleKeyDown(e);
	// If the menu is visible we let it handle all the keyboard events.
	if (this.isMenuShown() && e.currentTarget === this.ownerDocument) {
	this.menu.handleKeyDown(e);
	e.preventDefault();
	e.stopPropagation();
	}

	// Show the focus ring on keypress.
	this.classList.remove('using-mouse');
	break;
	case 'focus':
	if (this.shouldDismissMenu_(e)) {
	this.hideMenu();
	// Show the focus ring on focus - if it's come from a mouse event,
	// the focus ring will be hidden in the mousedown event handler,
	// executed after this.
	this.classList.remove('using-mouse');
	}
	break;
	case 'blur':
	// No need to hide the focus ring anymore, without having focus.
	this.classList.remove('using-mouse');
	break;
	case 'activate':
	const hideDelayed = e.target instanceof MenuItem && e.target.checkable;
	const hideType = hideDelayed ? HideType.DELAYED : HideType.INSTANT;
	if (e.originalEvent instanceof MouseEvent \|\|
	e.originalEvent instanceof TouchEvent) {
	this.hideMenuWithoutTakingFocus_(hideType);
	} else {
	// Keyboard. Take focus to continue keyboard operation.
	this.hideMenu(hideType);
	}
	break;
	case 'scroll':
	if (!(e.target === this.menu \|\| this.menu.contains(e.target))) {
	this.hideMenu();
	}
	break;
	case 'popstate':
	case 'resize':
	this.hideMenu();
	break;
	case 'contextmenu':
	if ((!this.menu \|\| !this.menu.contains(e.target)) &&
	(!this.hideTimestamp_ \|\| Date.now() - this.hideTimestamp_ > 50)) {
	this.showMenu(true, {x: e.screenX, y: e.screenY});
	}
	e.preventDefault();
	// Don't allow elements further up in the DOM to show their menus.
	e.stopPropagation();
	break;
	case 'dblclick':
	// Don't allow double click events to propagate.
	e.preventDefault();
	e.stopPropagation();
	break;
	}
	},

	/**
	* Shows the menu.
	* @param {boolean} shouldSetFocus Whether to set focus on the
	* selected menu item.
	* @param {{x: number, y: number}=} opt_mousePos The position of the mouse
	* when shown (in screen coordinates).
	*/
	showMenu(shouldSetFocus, opt_mousePos) {
	this.hideMenu();

	this.menu.updateCommands(this);

	const event = new UIEvent(
	'menushow', {bubbles: true, cancelable: true, view: window});
	if (!this.dispatchEvent(event)) {
	return;
	}

	this.menu.show(opt_mousePos);

	this.setAttribute('menu-shown', '');

	// When the menu is shown we steal all keyboard events.
	const doc = this.ownerDocument;
	const win = doc.defaultView;
	this.showingEvents_.add(doc, 'keydown', this, true);
	this.showingEvents_.add(doc, 'mousedown', this, true);
	this.showingEvents_.add(doc, 'focus', this, true);
	this.showingEvents_.add(doc, 'scroll', this, true);
	this.showingEvents_.add(win, 'popstate', this);
	this.showingEvents_.add(win, 'resize', this);
	this.showingEvents_.add(this.menu, 'contextmenu', this);
	this.showingEvents_.add(this.menu, 'activate', this);
	this.positionMenu_();

	if (shouldSetFocus) {
	this.menu.focusSelectedItem();
	}
	},

	/**
	* Hides the menu. If your menu can go out of scope, make sure to call this
	* first.
	* @param {HideType=} opt_hideType Type of hide.
	* default: HideType.INSTANT.
	*/
	hideMenu(opt_hideType) {
	this.hideMenuInternal_(true, opt_hideType);
	},

	/**
	* Hides the menu. If your menu can go out of scope, make sure to call this
	* first.
	* @param {HideType=} opt_hideType Type of hide.
	* default: HideType.INSTANT.
	*/
	hideMenuWithoutTakingFocus_(opt_hideType) {
	this.hideMenuInternal_(false, opt_hideType);
	},

	/**
	* Hides the menu. If your menu can go out of scope, make sure to call this
	* first.
	* @param {boolean} shouldTakeFocus Moves the focus to the button if true.
	* @param {HideType=} opt_hideType Type of hide.
	* default: HideType.INSTANT.
	*/
	hideMenuInternal_(shouldTakeFocus, opt_hideType) {
	if (!this.isMenuShown()) {
	return;
	}

	this.removeAttribute('menu-shown');
	if (opt_hideType === HideType.DELAYED) {
	this.menu.classList.add('hide-delayed');
	} else {
	this.menu.classList.remove('hide-delayed');
	}
	this.menu.hide();

	this.showingEvents_.removeAll();
	if (shouldTakeFocus) {
	this.focus();
	}

	const event = new UIEvent(
	'menuhide', {bubbles: true, cancelable: false, view: window});
	this.dispatchEvent(event);

	// On windows we might hide the menu in a right mouse button up and if
	// that is the case we wait some short period before we allow the menu
	// to be shown again.
	this.hideTimestamp_ = isWindows ? Date.now() : 0;
	},

	/**
	* Whether the menu is shown.
	*/
	isMenuShown() {
	return this.hasAttribute('menu-shown');
	},

	/**
	* Positions the menu below the menu button. At this point we do not use any
	* advanced positioning logic to ensure the menu fits in the viewport.
	* @private
	*/
	positionMenu_() {
	positionPopupAroundElement(
	this, this.menu, this.anchorType, this.invertLeftRight);
	},

	/**
	* Handles the keydown event for the menu button.
	*/
	handleKeyDown(e) {
	switch (e.key) {
	case 'ArrowDown':
	case 'ArrowUp':
	if (!this.respondToArrowKeys) {
	break;
	}
	case 'Enter':
	case ' ':
	if (!this.isMenuShown()) {
	this.showMenu(true);
	}
	e.preventDefault();
	break;
	case 'Escape':
	case 'Tab':
	this.hideMenu();
	break;
	}
	},
	};