// Copyright (c) 2011 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.
// How long to wait to open submenu when mouse hovers.
var SUBMENU_OPEN_DELAY_MS = 200;
// How long to wait to close submenu when mouse left.
var SUBMENU_CLOSE_DELAY_MS = 500;
// Scroll repeat interval.
var SCROLL_INTERVAL_MS = 20;
// Scrolling amount in pixel.
var SCROLL_TICK_PX = 4;
// Regular expression to match/find mnemonic key.
var MNEMONIC_REGEXP = /([^&]*)&(.)(.*)/;
var localStrings = new LocalStrings();
/**
* Sends 'activate' WebUI message.
* @param {number} index The index of menu item to activate in menu model.
* @param {string} mode The activation mode, one of 'close_and_activate', or
* 'activate_no_close'.
* TODO(oshima): change these string to enum numbers once it becomes possible
* to pass number to C++.
*/
function sendActivate(index, mode) {
chrome.send('activate', [String(index), mode]);
}
/**
* MenuItem class.
*/
var MenuItem = cr.ui.define('div');
MenuItem.prototype = {
__proto__ : HTMLDivElement.prototype,
/**
* Decorates the menu item element.
*/
decorate: function() {
this.className = 'menu-item';
},
/**
* Initialize the MenuItem.
* @param {Menu} menu A {@code Menu} object to which this menu item
* will be added to.
* @param {Object} attrs JSON object that represents this menu items
* properties. This is created from menu model in C code. See
* chromeos/views/native_menu_webui.cc.
* @param {Object} model The model object.
*/
init: function(menu, attrs, model) {
// The left icon's width. 0 if no icon.
var leftIconWidth = model.maxIconWidth;
this.menu_ = menu;
this.attrs = attrs;
var attrs = this.attrs;
if (attrs.type == 'separator') {
this.className = 'separator';
} else if (attrs.type == 'command' ||
attrs.type == 'submenu' ||
attrs.type == 'check' ||
attrs.type == 'radio') {
this.initMenuItem_();
this.initPadding_(leftIconWidth);
} else {
// This should not happend.
this.classList.add('disabled');
this.textContent = 'unknown';
}
menu.appendChild(this);
if (!attrs.visible) {
this.classList.add('hidden');
}
},
/**
* Changes the selection state of the menu item.
* @param {boolean} selected True to set the selection, or false
* otherwise.
*/
set selected(selected) {
if (selected) {
this.classList.add('selected');
this.menu_.selectedItem = this;
} else {
this.classList.remove('selected');
}
},
/**
* Activate the menu item.
*/
activate: function() {
if (this.attrs.type == 'submenu') {
this.menu_.openSubmenu(this);
} else if (this.attrs.type != 'separator' &&
this.className.indexOf('selected') >= 0) {
sendActivate(this.menu_.getMenuItemIndexOf(this),
'close_and_activate');
}
},
/**
* Sends open_submenu WebUI message.
*/
sendOpenSubmenuCommand: function() {
chrome.send('open_submenu',
[String(this.menu_.getMenuItemIndexOf(this)),
String(this.getBoundingClientRect().top)]);
},
/**
* Internal method to initiailze the MenuItem.
* @private
*/
initMenuItem_: function() {
var attrs = this.attrs;
this.className = 'menu-item ' + attrs.type;
this.menu_.addHandlers(this, this);
var label = document.createElement('div');
label.className = 'menu-label';
this.menu_.addLabelTo(this, attrs.label, label,
true /* enable mnemonic */);
if (attrs.font) {
label.style.font = attrs.font;
}
this.appendChild(label);
if (attrs.accel) {
var accel = document.createElement('div');
accel.className = 'accelerator';
accel.textContent = attrs.accel;
accel.style.font = attrs.font;
this.appendChild(accel);
}
if (attrs.type == 'submenu') {
// This overrides left-icon's position, but it's OK as submenu
// shoudln't have left-icon.
this.classList.add('right-icon');
this.style.backgroundImage = 'url(' + this.menu_.config_.arrowUrl + ')';
}
},
initPadding_: function(leftIconWidth) {
if (leftIconWidth <= 0) {
this.classList.add('no-icon');
return;
}
this.classList.add('left-icon');
var url;
var attrs = this.attrs;
if (attrs.type == 'radio') {
url = attrs.checked ?
this.menu_.config_.radioOnUrl :
this.menu_.config_.radioOffUrl;
} else if (attrs.icon) {
url = attrs.icon;
} else if (attrs.type == 'check' && attrs.checked) {
url = this.menu_.config_.checkUrl;
}
if (url) {
this.style.backgroundImage = 'url(' + url + ')';
}
// TODO(oshima): figure out how to update left padding in rule.
// 4 is the padding on left side of icon.
var padding =
4 + leftIconWidth + this.menu_.config_.icon_to_label_padding;
this.style.WebkitPaddingStart = padding + 'px';
},
};
/**
* Menu class.
*/
var Menu = cr.ui.define('div');
Menu.prototype = {
__proto__: HTMLDivElement.prototype,
/**
* Configuration object.
* @type {Object}
*/
config_ : null,
/**
* Currently selected menu item.
* @type {MenuItem}
*/
current_ : null,
/**
* Timers for opening/closing submenu.
* @type {number}
*/
openSubmenuTimer_ : 0,
closeSubmenuTimer_ : 0,
/**
* Auto scroll timer.
* @type {number}
*/
scrollTimer_ : 0,
/**
* Pointer to a submenu currently shown, if any.
* @type {MenuItem}
*/
submenuShown_ : null,
/**
* True if this menu is root.
* @type {boolean}
*/
isRoot_ : false,
/**
* Scrollable Viewport.
* @type {HTMLElement}
*/
viewpotr_ : null,
/**
* Total hight of scroll buttons. Used to adjust the height of
* viewport in order to show scroll bottons without scrollbar.
* @type {number}
*/
buttonHeight_ : 0,
/**
* True to enable scroll button.
* @type {boolean}
*/
scrollEnabled : false,
/**
* Decorates the menu element.
*/
decorate: function() {
this.id = 'viewport';
},
/**
* Initialize the menu.
* @param {Object} config Configuration parameters in JSON format.
* See chromeos/views/native_menu_webui.cc for details.
*/
init: function(config) {
// List of menu items
this.items_ = [];
// Map from mnemonic character to item to activate
this.mnemonics_ = {};
this.config_ = config;
this.addEventListener('mouseout', this.onMouseout_.bind(this));
document.addEventListener('keydown', this.onKeydown_.bind(this));
document.addEventListener('keypress', this.onKeypress_.bind(this));
document.addEventListener('mousewheel', this.onMouseWheel_.bind(this));
window.addEventListener('resize', this.onResize_.bind(this));
// Setup scroll events.
var up = document.getElementById('scroll-up');
var down = document.getElementById('scroll-down');
up.addEventListener('mouseout', this.stopScroll_.bind(this));
down.addEventListener('mouseout', this.stopScroll_.bind(this));
var menu = this;
up.addEventListener('mouseover',
function() {
menu.autoScroll_(-SCROLL_TICK_PX);
});
down.addEventListener('mouseover',
function() {
menu.autoScroll_(SCROLL_TICK_PX);
});
this.buttonHeight_ =
up.getBoundingClientRect().height +
down.getBoundingClientRect().height;
},
/**
* Adds a label to {@code targetDiv}. A label may contain
* mnemonic key, preceded by '&'.
* @param {MenuItem} item The menu item to be activated by mnemonic
* key.
* @param {string} label The label string to be added to
* {@code targetDiv}.
* @param {HTMLElement} div The div element the label is added to.
* @param {boolean} enableMnemonic True to enable mnemonic, or false
* to not to interprete mnemonic key. The function removes '&'
* from the label in both cases.
*/
addLabelTo: function(item, label, targetDiv, enableMnemonic) {
var mnemonic = MNEMONIC_REGEXP.exec(label);
if (mnemonic && enableMnemonic) {
var c = mnemonic[2].toLowerCase();
this.mnemonics_[c] = item;
}
if (!mnemonic) {
targetDiv.textContent = label;
} else if (enableMnemonic) {
targetDiv.appendChild(document.createTextNode(mnemonic[1]));
targetDiv.appendChild(document.createElement('span'));
targetDiv.appendChild(document.createTextNode(mnemonic[3]));
targetDiv.childNodes[1].className = 'mnemonic';
targetDiv.childNodes[1].textContent = mnemonic[2];
} else {
targetDiv.textContent = mnemonic.splice(1, 3).join('');
}
},
/**
* Returns the index of the {@code item}.
*/
getMenuItemIndexOf: function(item) {
return this.items_.indexOf(item);
},
/**
* A template method to create an item object. It can be a subclass
* of MenuItem, or any HTMLElement that implements {@code init},
* {@code activate} methods as well as {@code selected} attribute.
* @param {Object} attrs The menu item's properties passed from C++.
*/
createMenuItem: function(attrs) {
return new MenuItem();
},
/**
* Update and display the new model.
*/
updateModel: function(model) {
this.isRoot = model.isRoot;
this.current_ = null;
this.items_ = [];
this.mnemonics_ = {};
this.innerHTML = ''; // remove menu items
for (var i = 0; i < model.items.length; i++) {
var attrs = model.items[i];
var item = this.createMenuItem(attrs);
item.init(this, attrs, model);
this.items_.push(item);
}
this.onResize_();
},
/**
* Highlights the currently selected item, or
* select the 1st selectable item if none is selected.
*/
showSelection: function() {
if (this.current_) {
this.current_.selected = true;
} else {
this.findNextEnabled_(1).selected = true;
}
},
/**
* Add event handlers for the item.
*/
addHandlers: function(item, target) {
var menu = this;
target.addEventListener('mouseover', function(event) {
menu.onMouseover_(event, item);
});
if (item.attrs.enabled) {
target.addEventListener('mouseup', function(event) {
menu.onClick_(event, item);
});
} else {
target.classList.add('disabled');
}
},
/**
* Set the selected item. This controls timers to open/close submenus.
* 1) If the selected menu is submenu, and that submenu is not yet opeend,
* start timer to open. This will not cancel close timer, so
* if there is a submenu opened, it will be closed before new submenu is
* open.
* 2) If the selected menu is submenu, and that submenu is already opened,
* cancel both open/close timer.
* 3) If the selected menu is not submenu, cancel all timers and start
* timer to close submenu.
* This prevents from opening/closing menus while you're actively
* navigating menus. To open submenu, you need to wait a bit, or click
* submenu.
*
* @param {MenuItem} item The selected item.
*/
set selectedItem(item) {
if (this.current_ != item) {
if (this.current_ != null)
this.current_.selected = false;
this.current_ = item;
this.makeSelectedItemVisible_();
}
var menu = this;
if (item.attrs.type == 'submenu') {
if (this.submenuShown_ != item) {
this.openSubmenuTimer_ =
setTimeout(
function() {
menu.openSubmenu(item);
},
SUBMENU_OPEN_DELAY_MS);
} else {
this.cancelSubmenuTimer_();
}
} else if (this.submenuShown_) {
this.cancelSubmenuTimer_();
this.closeSubmenuTimer_ =
setTimeout(
function() {
menu.closeSubmenu_(item);
},
SUBMENU_CLOSE_DELAY_MS);
}
},
/**
* Open submenu {@code item}. It does nothing if the submenu is
* already opened.
* @param {MenuItem} item The submenu item to open.
*/
openSubmenu: function(item) {
this.cancelSubmenuTimer_();
if (this.submenuShown_ != item) {
this.submenuShown_ = item;
item.sendOpenSubmenuCommand();
}
},
/**
* Handle keyboard navigation and activation.
* @private
*/
onKeydown_: function(event) {
switch (event.keyIdentifier) {
case 'Left':
this.moveToParent_();
break;
case 'Right':
this.moveToSubmenu_();
break;
case 'Up':
this.classList.add('mnemonic-enabled');
this.findNextEnabled_(-1).selected = true;
break;
case 'Down':
this.classList.add('mnemonic-enabled');
this.findNextEnabled_(1).selected = true;
break;
case 'U+0009': // tab
break;
case 'U+001B': // escape
chrome.send('close_all', []);
break;
case 'Enter':
case 'U+0020': // space
if (this.current_) {
this.current_.activate();
}
break;
}
},
/**
* Handle mnemonic keys.
* @private
*/
onKeypress_: function(event) {
// Handles mnemonic.
var c = String.fromCharCode(event.keyCode);
var item = this.mnemonics_[c.toLowerCase()];
if (item) {
item.selected = true;
item.activate();
}
},
// Mouse Event handlers
onClick_: function(event, item) {
item.activate();
},
onMouseover_: function(event, item) {
this.cancelSubmenuTimer_();
// Ignore false mouseover event at (0,0) which is
// emitted when opening submenu.
if (item.attrs.enabled && event.clientX != 0 && event.clientY != 0) {
item.selected = true;
}
},
onMouseout_: function(event) {
if (this.current_) {
this.current_.selected = false;
}
},
onResize_: function() {
var up = document.getElementById('scroll-up');
var down = document.getElementById('scroll-down');
// this needs to be < 2 as empty page has height of 1.
if (window.innerHeight < 2) {
// menu window is not visible yet. just hide buttons.
up.classList.add('hidden');
down.classList.add('hidden');
return;
}
// Do not use screen width to determin if we need scroll buttons
// as the max renderer hight can be shorter than actual screen size.
// TODO(oshima): Fix this when we implement transparent renderer.
if (this.scrollHeight > window.innerHeight && this.scrollEnabled) {
this.style.height = (window.innerHeight - this.buttonHeight_) + 'px';
up.classList.remove('hidden');
down.classList.remove('hidden');
} else {
this.style.height = '';
up.classList.add('hidden');
down.classList.add('hidden');
}
},
onMouseWheel_: function(event) {
var delta = event.wheelDelta / 5;
this.scrollTop -= delta;
},
/**
* Closes the submenu.
* a submenu.
* @private
*/
closeSubmenu_: function(item) {
this.submenuShown_ = null;
this.cancelSubmenuTimer_();
chrome.send('close_submenu', []);
},
/**
* Move the selection to parent menu if the current menu is
* a submenu.
* @private
*/
moveToParent_: function() {
if (!this.isRoot) {
if (this.current_) {
this.current_.selected = false;
}
chrome.send('move_to_parent', []);
}
},
/**
* Move the selection to submenu if the currently selected
* menu is a submenu.
* @private
*/
moveToSubmenu_: function () {
var current = this.current_;
if (current && current.attrs.type == 'submenu') {
this.openSubmenu(current);
chrome.send('move_to_submenu', []);
}
},
/**
* Find a next selectable item. If nothing is selected, the 1st
* selectable item will be chosen. Returns null if nothing is
* selectable.
* @param {number} incr Specifies the direction to search, 1 to
* downwards and -1 for upwards.
* @private
*/
findNextEnabled_: function(incr) {
var len = this.items_.length;
var index;
if (this.current_) {
index = this.getMenuItemIndexOf(this.current_);
} else {
index = incr > 0 ? -1 : len;
}
for (var i = 0; i < len; i++) {
index = (index + incr + len) % len;
var item = this.items_[index];
if (item.attrs.enabled && item.attrs.type != 'separator' &&
!item.classList.contains('hidden'))
return item;
}
return null;
},
/**
* Cancels timers to open/close submenus.
* @private
*/
cancelSubmenuTimer_: function() {
clearTimeout(this.openSubmenuTimer_);
this.openSubmenuTimer_ = 0;
clearTimeout(this.closeSubmenuTimer_);
this.closeSubmenuTimer_ = 0;
},
/**
* Starts auto scroll.
* @param {number} tick The number of pixels to scroll.
* @private
*/
autoScroll_: function(tick) {
var previous = this.scrollTop;
this.scrollTop += tick;
var menu = this;
this.scrollTimer_ = setTimeout(
function() {
menu.autoScroll_(tick);
},
SCROLL_INTERVAL_MS);
},
/**
* Stops auto scroll.
* @private
*/
stopScroll_: function () {
clearTimeout(this.scrollTimer_);
this.scrollTimer_ = 0;
},
/**
* Scrolls the viewport to make the selected item visible.
* @private
*/
makeSelectedItemVisible_: function(){
this.current_.scrollIntoViewIfNeeded(false);
},
};
/**
* functions to be called from C++.
*/
function init(config) {
document.getElementById('viewport').init(config);
}
function selectItem() {
document.getElementById('viewport').showSelection();
}
function updateModel(model) {
document.getElementById('viewport').updateModel(model);
}
function modelUpdated() {
chrome.send('model_updated', []);
}
function enableScroll(enabled) {
document.getElementById('viewport').scrollEnabled = enabled;
}