gnome-shell/js/ui/popupMenu.js
Dan Winship f326595202 popupMenu: fix up grab/ungrab handling
Fix the panel menus to avoid unnecessarily bouncing out of modal (bug
634194) and to do a better job of keeping the keyboard focus in the
right place

https://bugzilla.gnome.org/show_bug.cgi?id=618885
2010-12-20 17:43:00 -05:00

1246 lines
41 KiB
JavaScript

/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
const Cairo = imports.cairo;
const Clutter = imports.gi.Clutter;
const Gtk = imports.gi.Gtk;
const Lang = imports.lang;
const Shell = imports.gi.Shell;
const Signals = imports.signals;
const St = imports.gi.St;
const BoxPointer = imports.ui.boxpointer;
const Main = imports.ui.main;
const Params = imports.misc.params;
const Tweener = imports.ui.tweener;
const Gettext = imports.gettext.domain('gnome-shell');
const _ = Gettext.gettext;
const SLIDER_SCROLL_STEP = 0.05; /* Slider scrolling step in % */
function Switch() {
this._init.apply(this, arguments);
}
Switch.prototype = {
_init: function(state) {
this.actor = new St.Bin({ style_class: 'toggle-switch' });
// Translators: this MUST be either "toggle-switch-us"
// (for toggle switches containing the English words
// "ON" and "OFF") or "toggle-switch-intl" (for toggle
// switches containing "◯" and "|"). Other values will
// simply result in invisible toggle switches.
this.actor.add_style_class_name(_("toggle-switch-us"));
this.setToggleState(state);
},
setToggleState: function(state) {
if (state)
this.actor.add_style_pseudo_class('checked');
else
this.actor.remove_style_pseudo_class('checked');
this.state = state;
},
toggle: function() {
this.setToggleState(!this.state);
}
};
function PopupBaseMenuItem(params) {
this._init(params);
}
PopupBaseMenuItem.prototype = {
_init: function (params) {
params = Params.parse (params, { reactive: true,
activate: true,
hover: true });
this.actor = new Shell.GenericContainer({ style_class: 'popup-menu-item',
reactive: params.reactive,
track_hover: params.reactive,
can_focus: params.reactive });
this.actor.connect('get-preferred-width', Lang.bind(this, this._getPreferredWidth));
this.actor.connect('get-preferred-height', Lang.bind(this, this._getPreferredHeight));
this.actor.connect('allocate', Lang.bind(this, this._allocate));
this.actor.connect('style-changed', Lang.bind(this, this._onStyleChanged));
this.actor._delegate = this;
this._children = [];
this._dot = null;
this._columnWidths = null;
this._spacing = 0;
this.active = false;
if (params.reactive && params.activate) {
this.actor.connect('button-release-event', Lang.bind(this, this._onButtonReleaseEvent));
this.actor.connect('key-press-event', Lang.bind(this, this._onKeyPressEvent));
}
if (params.reactive && params.hover)
this.actor.connect('notify::hover', Lang.bind(this, this._onHoverChanged));
if (params.reactive)
this.actor.connect('key-focus-in', Lang.bind(this, this._onKeyFocusIn));
},
_onStyleChanged: function (actor) {
this._spacing = actor.get_theme_node().get_length('spacing');
},
_onButtonReleaseEvent: function (actor, event) {
this.activate(event);
return true;
},
_onKeyPressEvent: function (actor, event) {
let symbol = event.get_key_symbol();
if (symbol == Clutter.KEY_space || symbol == Clutter.KEY_Return) {
this.activate(event);
return true;
}
return false;
},
_onKeyFocusIn: function (actor) {
this.setActive(true);
},
_onHoverChanged: function (actor) {
this.setActive(actor.hover);
},
activate: function (event) {
this.emit('activate', event);
},
setActive: function (active) {
let activeChanged = active != this.active;
if (activeChanged) {
this.active = active;
if (active) {
this.actor.add_style_pseudo_class('active');
this.actor.grab_key_focus();
} else
this.actor.remove_style_pseudo_class('active');
this.emit('active-changed', active);
}
},
destroy: function() {
this.actor.destroy();
this.emit('destroy');
},
// adds an actor to the menu item; @params can contain %span
// (column span; defaults to 1, -1 means "all the remaining width"),
// %expand (defaults to #false), and %align (defaults to
// #St.Align.START)
addActor: function(child, params) {
params = Params.parse(params, { span: 1,
expand: false,
align: St.Align.START });
params.actor = child;
this._children.push(params);
this.actor.connect('destroy', Lang.bind(this, function () { this._removeChild(child); }));
this.actor.add_actor(child);
},
_removeChild: function(child) {
for (let i = 0; i < this._children.length; i++) {
if (this._children[i].actor == child) {
this._children.splice(i, 1);
return;
}
}
},
removeActor: function(child) {
this.actor.remove_actor(child);
this._removeChild(child);
},
setShowDot: function(show) {
if (show) {
if (this._dot)
return;
this._dot = new St.DrawingArea({ style_class: 'popup-menu-item-dot' });
this._dot.connect('repaint', Lang.bind(this, this._onRepaintDot));
this.actor.add_actor(this._dot);
} else {
if (!this._dot)
return;
this._dot.destroy();
this._dot = null;
}
},
_onRepaintDot: function(area) {
let cr = area.get_context();
let [width, height] = area.get_surface_size();
let color = new Clutter.Color();
area.get_theme_node().get_foreground_color(color);
cr.setSourceRGBA (
color.red / 255,
color.green / 255,
color.blue / 255,
color.alpha / 255);
cr.arc(width / 2, height / 2, width / 3, 0, 2 * Math.PI);
cr.fill();
},
getColumnWidths: function() {
let widths = [];
for (let i = 0, col = 0; i < this._children.length; i++) {
let child = this._children[i];
let [min, natural] = child.actor.get_preferred_width(-1);
widths[col++] = natural;
if (child.span > 1) {
for (let j = 1; j < child.span; j++)
widths[col++] = 0;
}
}
return widths;
},
setColumnWidths: function(widths) {
this._columnWidths = widths;
},
_getPreferredWidth: function(actor, forHeight, alloc) {
let width = 0;
if (this._columnWidths) {
for (let i = 0; i < this._columnWidths.length; i++) {
if (i > 0)
width += this._spacing;
width += this._columnWidths[i];
}
} else {
for (let i = 0; i < this._children.length; i++) {
let child = this._children[i];
if (i > 0)
width += this._spacing;
let [min, natural] = child.actor.get_preferred_width(forHeight);
width += natural;
}
}
alloc.min_size = alloc.natural_size = width;
},
_getPreferredHeight: function(actor, forWidth, alloc) {
let height = 0;
for (let i = 0; i < this._children.length; i++) {
let child = this._children[i];
let [min, natural] = child.actor.get_preferred_height(-1);
if (natural > height)
height = natural;
}
alloc.min_size = alloc.natural_size = height;
},
_allocate: function(actor, box, flags) {
let height = box.y2 - box.y1;
if (this._dot) {
let dotBox = new Clutter.ActorBox();
let dotWidth = Math.round(box.x1 / 2);
dotBox.x1 = Math.round(box.x1 / 4);
dotBox.x2 = dotBox.x1 + dotWidth;
dotBox.y1 = Math.round(box.y1 + (height - dotWidth) / 2);
dotBox.y2 = dotBox.y1 + dotWidth;
this._dot.allocate(dotBox, flags);
}
let x = box.x1;
for (let i = 0, col = 0; i < this._children.length; i++) {
let child = this._children[i];
let childBox = new Clutter.ActorBox();
let [minWidth, naturalWidth] = child.actor.get_preferred_width(-1);
let availWidth, extraWidth;
if (this._columnWidths) {
if (child.span == -1)
availWidth = box.x2 - x;
else {
availWidth = 0;
for (let j = 0; j < child.span; j++)
availWidth += this._columnWidths[col++];
}
extraWidth = availWidth - naturalWidth;
} else {
availWidth = naturalWidth;
extraWidth = 0;
}
if (child.expand) {
childBox.x1 = x;
childBox.x2 = x + availWidth;
} else if (child.align === St.Align.CENTER) {
childBox.x1 = x + Math.round(extraWidth / 2);
childBox.x2 = childBox.x1 + naturalWidth;
} else if (child.align === St.Align.END) {
childBox.x2 = x + availWidth;
childBox.x1 = childBox.x2 - naturalWidth;
} else {
childBox.x1 = x;
childBox.x2 = x + naturalWidth;
}
let [minHeight, naturalHeight] = child.actor.get_preferred_height(-1);
childBox.y1 = Math.round(box.y1 + (height - naturalHeight) / 2);
childBox.y2 = childBox.y1 + naturalHeight;
child.actor.allocate(childBox, flags);
x += availWidth + this._spacing;
}
}
};
Signals.addSignalMethods(PopupBaseMenuItem.prototype);
function PopupMenuItem() {
this._init.apply(this, arguments);
}
PopupMenuItem.prototype = {
__proto__: PopupBaseMenuItem.prototype,
_init: function (text, params) {
PopupBaseMenuItem.prototype._init.call(this, params);
this.label = new St.Label({ text: text });
this.addActor(this.label);
}
};
function PopupSeparatorMenuItem() {
this._init();
}
PopupSeparatorMenuItem.prototype = {
__proto__: PopupBaseMenuItem.prototype,
_init: function () {
PopupBaseMenuItem.prototype._init.call(this, { reactive: false });
this._drawingArea = new St.DrawingArea({ style_class: 'popup-separator-menu-item' });
this.addActor(this._drawingArea, { span: -1, expand: true });
this._drawingArea.connect('repaint', Lang.bind(this, this._onRepaint));
},
_onRepaint: function(area) {
let cr = area.get_context();
let themeNode = area.get_theme_node();
let [width, height] = area.get_surface_size();
let margin = themeNode.get_length('-margin-horizontal');
let gradientHeight = themeNode.get_length('-gradient-height');
let startColor = new Clutter.Color();
themeNode.get_color('-gradient-start', startColor);
let endColor = new Clutter.Color();
themeNode.get_color('-gradient-end', endColor);
let gradientWidth = (width - margin * 2);
let gradientOffset = (height - gradientHeight) / 2;
let pattern = new Cairo.LinearGradient(margin, gradientOffset, width - margin, gradientOffset + gradientHeight);
pattern.addColorStopRGBA(0, startColor.red / 255, startColor.green / 255, startColor.blue / 255, startColor.alpha / 255);
pattern.addColorStopRGBA(0.5, endColor.red / 255, endColor.green / 255, endColor.blue / 255, endColor.alpha / 255);
pattern.addColorStopRGBA(1, startColor.red / 255, startColor.green / 255, startColor.blue / 255, startColor.alpha / 255);
cr.setSource(pattern);
cr.rectangle(margin, gradientOffset, gradientWidth, gradientHeight);
cr.fill();
}
};
function PopupSliderMenuItem() {
this._init.apply(this, arguments);
}
PopupSliderMenuItem.prototype = {
__proto__: PopupBaseMenuItem.prototype,
_init: function(value) {
PopupBaseMenuItem.prototype._init.call(this, { activate: false });
this.actor.connect('key-press-event', Lang.bind(this, this._onKeyPressEvent));
if (isNaN(value))
// Avoid spreading NaNs around
throw TypeError('The slider value must be a number');
this._value = Math.max(Math.min(value, 1), 0);
this._slider = new St.DrawingArea({ style_class: 'popup-slider-menu-item', reactive: true });
this.addActor(this._slider, { span: -1, expand: true });
this._slider.connect('repaint', Lang.bind(this, this._sliderRepaint));
this._slider.connect('button-press-event', Lang.bind(this, this._startDragging));
this.actor.connect('scroll-event', Lang.bind(this, this._onScrollEvent));
this._releaseId = this._motionId = 0;
this._dragging = false;
},
setValue: function(value) {
if (isNaN(value))
throw TypeError('The slider value must be a number');
this._value = Math.max(Math.min(value, 1), 0);
this._slider.queue_repaint();
},
_sliderRepaint: function(area) {
let cr = area.get_context();
let themeNode = area.get_theme_node();
let [width, height] = area.get_surface_size();
let handleRadius = themeNode.get_length('-slider-handle-radius');
let sliderWidth = width - 2 * handleRadius;
let sliderHeight = themeNode.get_length('-slider-height');
let sliderBorderWidth = themeNode.get_length('-slider-border-width');
let sliderBorderColor = new Clutter.Color();
themeNode.get_color('-slider-border-color', sliderBorderColor);
let sliderColor = new Clutter.Color();
themeNode.get_color('-slider-background-color', sliderColor);
cr.setSourceRGBA (
sliderColor.red / 255,
sliderColor.green / 255,
sliderColor.blue / 255,
sliderColor.alpha / 255);
cr.rectangle(handleRadius, (height - sliderHeight) / 2, sliderWidth, sliderHeight);
cr.fillPreserve();
cr.setSourceRGBA (
sliderBorderColor.red / 255,
sliderBorderColor.green / 255,
sliderBorderColor.blue / 255,
sliderBorderColor.alpha / 255);
cr.setLineWidth(sliderBorderWidth);
cr.stroke();
let handleY = height / 2;
let handleX = handleRadius + (width - 2 * handleRadius) * this._value;
let color = new Clutter.Color();
themeNode.get_foreground_color(color);
cr.setSourceRGBA (
color.red / 255,
color.green / 255,
color.blue / 255,
color.alpha / 255);
cr.arc(handleX, handleY, handleRadius, 0, 2 * Math.PI);
cr.fill();
},
_startDragging: function(actor, event) {
if (this._dragging) // don't allow two drags at the same time
return;
this._dragging = true;
// FIXME: we should only grab the specific device that originated
// the event, but for some weird reason events are still delivered
// outside the slider if using clutter_grab_pointer_for_device
Clutter.grab_pointer(this._slider);
this._releaseId = this._slider.connect('button-release-event', Lang.bind(this, this._endDragging));
this._motionId = this._slider.connect('motion-event', Lang.bind(this, this._motionEvent));
let absX, absY;
[absX, absY] = event.get_coords();
this._moveHandle(absX, absY);
},
_endDragging: function() {
if (this._dragging) {
this._slider.disconnect(this._releaseId);
this._slider.disconnect(this._motionId);
Clutter.ungrab_pointer();
this._dragging = false;
this.emit('drag-end');
}
return true;
},
_onScrollEvent: function (actor, event) {
let direction = event.get_scroll_direction();
if (direction == Clutter.ScrollDirection.DOWN) {
this._value = Math.max(0, this._value - SLIDER_SCROLL_STEP);
}
else if (direction == Clutter.ScrollDirection.UP) {
this._value = Math.min(1, this._value + SLIDER_SCROLL_STEP);
}
this._slider.queue_repaint();
this.emit('value-changed', this._value);
},
_motionEvent: function(actor, event) {
let absX, absY;
[absX, absY] = event.get_coords();
this._moveHandle(absX, absY)
return true;
},
_moveHandle: function(absX, absY) {
let relX, relY, sliderX, sliderY;
[sliderX, sliderY] = this._slider.get_transformed_position();
relX = absX - sliderX;
relY = absY - sliderY;
let width = this._slider.width;
let handleRadius = this._slider.get_theme_node().get_length('-slider-handle-radius');
let newvalue;
if (relX < handleRadius)
newvalue = 0;
else if (relX > width - handleRadius)
newvalue = 1;
else
newvalue = (relX - handleRadius) / (width - 2 * handleRadius);
this._value = newvalue;
this._slider.queue_repaint();
this.emit('value-changed', this._value);
},
get value() {
return this._value;
},
_onKeyPressEvent: function (actor, event) {
let key = event.get_key_symbol();
if (key == Clutter.KEY_Right || key == Clutter.KEY_Left) {
let delta = key == Clutter.KEY_Right ? 0.1 : -0.1;
this._value = Math.max(0, Math.min(this._value + delta, 1));
this._slider.queue_repaint();
this.emit('value-changed', this._value);
this.emit('drag-end');
return true;
}
return false;
}
}
function PopupSwitchMenuItem() {
this._init.apply(this, arguments);
}
PopupSwitchMenuItem.prototype = {
__proto__: PopupBaseMenuItem.prototype,
_init: function(text, active) {
PopupBaseMenuItem.prototype._init.call(this);
this.label = new St.Label({ text: text });
this._switch = new Switch(active);
this.addActor(this.label);
this.addActor(this._switch.actor, { align: St.Align.END });
this.connect('activate', Lang.bind(this,function(from) {
this.toggle();
}));
},
toggle: function() {
this._switch.toggle();
this.emit('toggled', this._switch.state);
},
get state() {
return this._switch.state;
},
setToggleState: function(state) {
this._switch.setToggleState(state);
}
}
function PopupImageMenuItem(text, iconName) {
this._init(text, iconName);
}
PopupImageMenuItem.prototype = {
__proto__: PopupBaseMenuItem.prototype,
_init: function (text, iconName) {
PopupBaseMenuItem.prototype._init.call(this);
this.label = new St.Label({ text: text });
this.addActor(this.label);
this._icon = new St.Icon({ style_class: 'popup-menu-icon' });
this.addActor(this._icon, { align: St.Align.END });
this.setIcon(iconName);
},
setIcon: function(name) {
this._icon.icon_name = name;
}
};
function mod(a, b) {
return (a + b) % b;
}
function findNextInCycle(items, current, direction) {
let cur;
if (items.length == 0)
return current;
else if (items.length == 1)
return items[0];
if (current)
cur = items.indexOf(current);
else if (direction == 1)
cur = items.length - 1;
else
cur = 0;
return items[mod(cur + direction, items.length)];
}
function PopupMenuBase() {
throw new TypeError('Trying to instantiate abstract class PopupMenuBase');
}
PopupMenuBase.prototype = {
_init: function(sourceActor, styleClass) {
this.sourceActor = sourceActor;
this.box = new St.BoxLayout({ style_class: styleClass,
vertical: true });
this.isOpen = false;
this._activeMenuItem = null;
},
addAction: function(title, callback) {
var menuItem = new PopupMenuItem(title);
this.addMenuItem(menuItem);
menuItem.connect('activate', Lang.bind(this, function (menuItem, event) {
callback(event);
}));
},
addMenuItem: function(menuItem, position) {
if (position == undefined)
this.box.add(menuItem.actor);
else
this.box.insert_actor(menuItem.actor, position);
if (menuItem instanceof PopupSubMenuMenuItem) {
if (position == undefined)
this.box.add(menuItem.menu.actor);
else
this.box.insert_actor(menuItem.menu.actor, position + 1);
menuItem._subMenuActivateId = menuItem.menu.connect('activate', Lang.bind(this, function() {
this.emit('activate');
this.close();
}));
menuItem._subMenuActiveChangeId = menuItem.menu.connect('active-changed', Lang.bind(this, function(submenu, submenuItem) {
if (this._activeMenuItem && this._activeMenuItem != submenuItem)
this._activeMenuItem.setActive(false);
this._activeMenuItem = submenuItem;
this.emit('active-changed', submenuItem);
}));
menuItem._closingId = this.connect('open-state-changed', function(self, open) {
if (!open)
menuItem.menu.immediateClose();
});
}
menuItem._activeChangeId = menuItem.connect('active-changed', Lang.bind(this, function (menuItem, active) {
if (active && this._activeMenuItem != menuItem) {
if (this._activeMenuItem)
this._activeMenuItem.setActive(false);
this._activeMenuItem = menuItem;
this.emit('active-changed', menuItem);
} else if (!active && this._activeMenuItem == menuItem) {
this._activeMenuItem = null;
this.emit('active-changed', null);
}
}));
menuItem._activateId = menuItem.connect('activate', Lang.bind(this, function (menuItem, event) {
this.emit('activate', menuItem);
this.close();
}));
menuItem.connect('destroy', Lang.bind(this, function(emitter) {
menuItem.disconnect(menuItem._activateId);
menuItem.disconnect(menuItem._activeChangeId);
if (menuItem.menu) {
menuItem.menu.disconnect(menuItem._subMenuActivateId);
menuItem.menu.disconnect(menuItem._subMenuActiveChangeId);
this.disconnect(menuItem._closingId);
}
if (menuItem == this._activeMenuItem)
this._activeMenuItem = null;
}));
},
getColumnWidths: function() {
let columnWidths = [];
let items = this.box.get_children();
for (let i = 0; i < items.length; i++) {
if (items[i]._delegate instanceof PopupBaseMenuItem || items[i]._delegate instanceof PopupMenuBase) {
let itemColumnWidths = items[i]._delegate.getColumnWidths();
for (let j = 0; j < itemColumnWidths.length; j++) {
if (j >= columnWidths.length || itemColumnWidths[j] > columnWidths[j])
columnWidths[j] = itemColumnWidths[j];
}
}
}
return columnWidths;
},
setColumnWidths: function(widths) {
let items = this.box.get_children();
for (let i = 0; i < items.length; i++) {
if (items[i]._delegate instanceof PopupBaseMenuItem || items[i]._delegate instanceof PopupMenuBase)
items[i]._delegate.setColumnWidths(widths);
}
},
addActor: function(actor) {
this.box.add(actor);
},
getMenuItems: function() {
return this.box.get_children().map(function (actor) { return actor._delegate; }).filter(function(item) { return item instanceof PopupBaseMenuItem; });
},
removeAll: function() {
let children = this.getMenuItems();
for (let i = 0; i < children.length; i++) {
let item = children[i];
item.destroy();
}
},
activateFirst: function() {
let children = this.box.get_children();
for (let i = 0; i < children.length; i++) {
let actor = children[i];
if (actor._delegate && actor._delegate instanceof PopupBaseMenuItem && actor.visible && actor.reactive) {
actor._delegate.setActive(true);
break;
}
}
},
toggle: function() {
if (this.isOpen)
this.close();
else
this.open();
},
destroy: function() {
this.removeAll();
this.actor.destroy();
this.emit('destroy');
}
};
Signals.addSignalMethods(PopupMenuBase.prototype);
function PopupMenu() {
this._init.apply(this, arguments);
}
PopupMenu.prototype = {
__proto__: PopupMenuBase.prototype,
_init: function(sourceActor, alignment, arrowSide, gap) {
PopupMenuBase.prototype._init.call (this, sourceActor, 'popup-menu-content');
this._alignment = alignment;
this._arrowSide = arrowSide;
this._gap = gap;
this._boxPointer = new BoxPointer.BoxPointer(arrowSide,
{ x_fill: true,
y_fill: true,
x_align: St.Align.START });
this.actor = this._boxPointer.actor;
this.actor._delegate = this;
this.actor.style_class = 'popup-menu-boxpointer';
this._boxWrapper = new Shell.GenericContainer();
this._boxWrapper.connect('get-preferred-width', Lang.bind(this, this._boxGetPreferredWidth));
this._boxWrapper.connect('get-preferred-height', Lang.bind(this, this._boxGetPreferredHeight));
this._boxWrapper.connect('allocate', Lang.bind(this, this._boxAllocate));
this._boxPointer.bin.set_child(this._boxWrapper);
this._boxWrapper.add_actor(this.box);
this.actor.add_style_class_name('popup-menu');
global.focus_manager.add_group(this.actor);
this.actor.reactive = true;
},
_boxGetPreferredWidth: function (actor, forHeight, alloc) {
let columnWidths = this.getColumnWidths();
this.setColumnWidths(columnWidths);
// Now they will request the right sizes
[alloc.min_size, alloc.natural_size] = this.box.get_preferred_width(forHeight);
},
_boxGetPreferredHeight: function (actor, forWidth, alloc) {
[alloc.min_size, alloc.natural_size] = this.box.get_preferred_height(forWidth);
},
_boxAllocate: function (actor, box, flags) {
this.box.allocate(box, flags);
},
setArrowOrigin: function(origin) {
this._boxPointer.setArrowOrigin(origin);
},
open: function() {
if (this.isOpen)
return;
this.isOpen = true;
this._boxPointer.setPosition(this.sourceActor, this._gap, this._alignment);
this._boxPointer.animateAppear();
this.emit('open-state-changed', true);
},
close: function() {
if (!this.isOpen)
return;
if (this._activeMenuItem)
this._activeMenuItem.setActive(false);
this._boxPointer.animateDisappear();
this.isOpen = false;
this.emit('open-state-changed', false);
}
};
function PopupSubMenu() {
this._init.apply(this, arguments);
}
PopupSubMenu.prototype = {
__proto__: PopupMenuBase.prototype,
_init: function(sourceActor, sourceArrow) {
PopupMenuBase.prototype._init.call(this, sourceActor, 'popup-sub-menu');
this._arrow = sourceArrow;
this._arrow.rotation_center_z_gravity = Clutter.Gravity.CENTER;
this.actor = this.box;
this.actor._delegate = this;
this.actor.clip_to_allocation = true;
this.actor.connect('key-press-event', Lang.bind(this, this._onKeyPressEvent));
this.actor.hide();
},
open: function() {
if (this.isOpen)
return;
this.isOpen = true;
let [naturalHeight, minHeight] = this.actor.get_preferred_height(-1);
this.actor.height = 0;
this.actor.show();
this.actor._arrow_rotation = this._arrow.rotation_angle_z;
Tweener.addTween(this.actor,
{ _arrow_rotation: 90,
height: naturalHeight,
time: 0.25,
onUpdateScope: this,
onUpdate: function() {
this._arrow.rotation_angle_z = this.actor._arrow_rotation;
},
onCompleteScope: this,
onComplete: function() {
this.actor.set_height(-1);
this.emit('open-state-changed', true);
}
});
},
close: function() {
if (!this.isOpen)
return;
this.isOpen = false;
if (this._activeMenuItem)
this._activeMenuItem.setActive(false);
this.actor._arrow_rotation = this._arrow.rotation_angle_z;
Tweener.addTween(this.actor,
{ _arrow_rotation: 0,
height: 0,
time: 0.25,
onCompleteScope: this,
onComplete: function() {
this.actor.hide();
this.actor.set_height(-1);
this.emit('open-state-changed', false);
},
onUpdateScope: this,
onUpdate: function() {
this._arrow.rotation_angle_z = this.actor._arrow_rotation;
}
});
},
immediateClose: function() {
if (!this.isOpen)
return;
if (this._activeMenuItem)
this._activeMenuItem.setActive(false);
this._arrow.rotation_angle_z = 0;
this.actor.hide();
this.isOpen = false;
this.emit('open-state-changed', false);
},
_onKeyPressEvent: function(actor, event) {
// Move focus back to parent menu if the user types Left.
if (this.isOpen && event.get_key_symbol() == Clutter.KEY_Left) {
this.close();
this.sourceActor._delegate.setActive(true);
return true;
}
return false;
}
};
function PopupSubMenuMenuItem() {
this._init.apply(this, arguments);
}
PopupSubMenuMenuItem.prototype = {
__proto__: PopupBaseMenuItem.prototype,
_init: function(text) {
PopupBaseMenuItem.prototype._init.call(this);
this.actor.add_style_class_name('popup-submenu-menu-item');
this.label = new St.Label({ text: text });
this.addActor(this.label);
this._triangle = new St.Label({ text: '\u25B8' });
this.addActor(this._triangle, { align: St.Align.END });
this.menu = new PopupSubMenu(this.actor, this._triangle);
this.menu.connect('open-state-changed', Lang.bind(this, this._subMenuOpenStateChanged));
},
_subMenuOpenStateChanged: function(menu, open) {
if (open)
this.actor.add_style_pseudo_class('open');
else
this.actor.remove_style_pseudo_class('open');
},
destroy: function() {
this.menu.destroy();
PopupBaseMenuItem.prototype.destroy.call(this);
},
_onKeyPressEvent: function(actor, event) {
if (event.get_key_symbol() == Clutter.KEY_Right) {
this.menu.open();
this.menu.activateFirst();
return true;
}
return PopupBaseMenuItem.prototype._onKeyPressEvent.call(this, actor, event);
},
activate: function(event) {
this.menu.open();
},
_onButtonReleaseEvent: function(actor) {
this.menu.toggle();
}
};
/* Basic implementation of a menu manager.
* Call addMenu to add menus
*/
function PopupMenuManager(owner) {
this._init(owner);
}
PopupMenuManager.prototype = {
_init: function(owner) {
this._owner = owner;
this.grabbed = false;
this._eventCaptureId = 0;
this._keyPressEventId = 0;
this._enterEventId = 0;
this._leaveEventId = 0;
this._activeMenu = null;
this._menus = [];
this._preGrabInputMode = null;
},
addMenu: function(menu, position) {
let menudata = {
menu: menu,
openStateChangeId: menu.connect('open-state-changed', Lang.bind(this, this._onMenuOpenState)),
destroyId: menu.connect('destroy', Lang.bind(this, this._onMenuDestroy)),
enterId: 0,
focusInId: 0,
focusOutId: 0
};
let source = menu.sourceActor;
if (source) {
menudata.enterId = source.connect('enter-event', Lang.bind(this, function() { this._onMenuSourceEnter(menu); }));
menudata.focusInId = source.connect('key-focus-in', Lang.bind(this, function() { this._onMenuSourceEnter(menu); }));
menudata.focusOutId = source.connect('key-focus-out', Lang.bind(this, function() { this._onKeyFocusOut(menu); }));
}
if (position == undefined)
this._menus.push(menudata);
else
this._menus.splice(position, 0, menudata);
},
removeMenu: function(menu) {
if (menu == this._activeMenu)
this._closeMenu();
let position = this._findMenu(menu);
if (position == -1) // not a menu we manage
return;
let menudata = this._menus[position];
menu.disconnect(menudata.openStateChangeId);
menu.disconnect(menudata.destroyId);
if (menudata.enterId)
menu.sourceActor.disconnect(menudata.enterId);
if (menudata.focusInId)
menu.sourceActor.disconnect(menudata.focusInId);
if (menudata.focusOutId)
menu.sourceActor.disconnect(menudata.focusOutId);
this._menus.splice(position, 1);
},
_grab: function() {
Main.pushModal(this._owner.actor);
this._eventCaptureId = global.stage.connect('captured-event', Lang.bind(this, this._onEventCapture));
this._keyPressEventId = global.stage.connect('key-press-event', Lang.bind(this, this._onKeyPressEvent));
// captured-event doesn't see enter/leave events
this._enterEventId = global.stage.connect('enter-event', Lang.bind(this, this._onEventCapture));
this._leaveEventId = global.stage.connect('leave-event', Lang.bind(this, this._onEventCapture));
this.grabbed = true;
},
_ungrab: function() {
global.stage.disconnect(this._eventCaptureId);
this._eventCaptureId = 0;
global.stage.disconnect(this._keyPressEventId);
this._keyPressEventId = 0;
global.stage.disconnect(this._enterEventId);
this._enterEventId = 0;
global.stage.disconnect(this._leaveEventId);
this._leaveEventId = 0;
this.grabbed = false;
Main.popModal(this._owner.actor);
},
_onMenuOpenState: function(menu, open) {
if (open) {
if (!this.grabbed) {
this._preGrabInputMode = global.stage_input_mode;
this._grab();
}
this._activeMenu = menu;
// if the focus is not already associated with the menu,
// then focus the menu
let focus = global.stage.key_focus;
if (!this._activeMenuContains(focus))
menu.sourceActor.grab_key_focus();
} else if (menu == this._activeMenu) {
let focus = global.stage.key_focus;
let fromActive = this._activeMenuContains(focus);
if (this.grabbed)
this._ungrab();
this._activeMenu = null;
// If keynav was in effect before we grabbed, then we need
// to properly re-establish it after we ungrab. (popModal
// will have unset the focus.) If some part of the menu
// was focused at the time of the ungrab then focus its
// sourceActor. Otherwise just reset the focus to where it
// was right before the ungrab.
if (this._preGrabInputMode == Shell.StageInputMode.FOCUSED) {
global.stage_input_mode = Shell.StageInputMode.FOCUSED;
if (fromActive)
menu.sourceActor.grab_key_focus();
else
focus.grab_key_focus();
}
}
},
// change the currently-open menu without dropping grab
_changeMenu: function(newMenu) {
if (this._activeMenu) {
// _onOpenMenuState will drop the grab if it sees
// this._activeMenu being closed; so clear _activeMenu
// before closing it to keep that from happening
let oldMenu = this._activeMenu;
this._activeMenu = null;
oldMenu.close();
}
newMenu.open();
},
_onMenuSourceEnter: function(menu) {
if (!this.grabbed || menu == this._activeMenu)
return false;
this._changeMenu(menu);
return false;
},
_onKeyFocusOut: function(menu) {
if (!this.grabbed || menu != this._activeMenu)
return;
// We want to close the menu if the focus has moved somewhere
// other than inside the menu or to another menu's sourceActor.
// Unfortunately, when key-focus-out is emitted,
// stage.key_focus will be null. So we have to wait until
// after it emits the key-focus-in as well.
let id = global.stage.connect('notify::key-focus', Lang.bind(this,
function () {
global.stage.disconnect(id);
if (menu != this._activeMenu)
return;
let focus = global.stage.key_focus;
if (!focus || this._activeMenuContains(focus))
return;
if (focus._delegate && this._findMenu(focus._delegate.menu) != -1)
return;
menu.close();
}));
},
_onMenuDestroy: function(menu) {
this.removeMenu(menu);
},
_activeMenuContains: function(actor) {
return this._activeMenu != null
&& (this._activeMenu.actor.contains(actor) ||
(this._activeMenu.sourceActor && this._activeMenu.sourceActor.contains(actor)));
},
_eventIsOnActiveMenu: function(event) {
return this._activeMenuContains(event.get_source());
},
_eventIsOnAnyMenuSource: function(event) {
let src = event.get_source();
for (let i = 0; i < this._menus.length; i++) {
let menu = this._menus[i].menu;
if (menu.sourceActor && menu.sourceActor.contains(src))
return true;
}
return false;
},
_findMenu: function(item) {
for (let i = 0; i < this._menus.length; i++) {
let menudata = this._menus[i];
if (item == menudata.menu)
return i;
}
return -1;
},
_onEventCapture: function(actor, event) {
if (!this.grabbed)
return false;
if (this._owner.menuEventFilter &&
this._owner.menuEventFilter(event))
return true;
let activeMenuContains = this._eventIsOnActiveMenu(event);
let eventType = event.type();
if (eventType == Clutter.EventType.BUTTON_RELEASE) {
if (activeMenuContains) {
return false;
} else {
this._closeMenu();
return true;
}
} else if ((eventType == Clutter.EventType.BUTTON_PRESS && !activeMenuContains)
|| (eventType == Clutter.EventType.KEY_PRESS && event.get_key_symbol() == Clutter.Escape)) {
this._closeMenu();
return true;
} else if (activeMenuContains || this._eventIsOnAnyMenuSource(event)) {
return false;
}
return true;
},
_onKeyPressEvent: function(actor, event) {
if (!this.grabbed || !this._activeMenu)
return false;
if (!this._eventIsOnActiveMenu(event))
return false;
let symbol = event.get_key_symbol();
if (symbol == Clutter.Left || symbol == Clutter.Right) {
let direction = symbol == Clutter.Right ? 1 : -1;
let pos = this._findMenu(this._activeMenu);
let next = this._menus[mod(pos + direction, this._menus.length)].menu;
if (next != this._activeMenu) {
this._changeMenu(next);
next.activateFirst();
}
return true;
}
return false;
},
_closeMenu: function() {
if (this._activeMenu != null)
this._activeMenu.close();
}
};