Panorama/Events

From Valve Developer Community
Jump to: navigation, search
简体中文

Panorama events are a way to communicate information between multiple panels. There are many different event types, some of which are generally useful and some that are only useful on specific Panels. Most places that accept javascript functions will also accept events.

Here's a simple example to demonstrate how to use events:

.DemoButton
{
    width: 50px;
    height: 50px;
    background-color: black;
}
.Toggled
{
    background-color: blue;
}
/* Using events */
<Button class="DemoButton" onactivate="ToggleStyle( Toggled )" />
 
/* Using javascript */
<Button class="DemoButton" onactivate="$.ToggleStyle( 'Toggled' )" />

Multiple events can be fired at the same time by using a semicolon between them:

<Button class="DemoButton" onactivate="ToggleStyle( Toggled ); AddStyle( HasBeenActivated )" />

Some events can take other events as parameters:

<!-- Toggle the style after 0.5 seconds -->
<Button class="DemoButton" onactivate="AsyncEvent( 0.5, ToggleStyle( Toggled ) )" />

Event Routing

Events are always fired on a specific Panel; however, they are not always handled directly by that Panel. Events are handled using the following algorithm:

  1. The panel the event was fired on gets the first shot at handling the event.
  2. If the event was not handled by the panel, then walk up the parents of the Panel giving each a chance to handle the event.
  3. If none of the parents handled the event, then call registered "unhandled event handlers" to see if they can handle the event.

This behavior is often useful if an event is fired on a specific child but you want a parent to handle it. For example:

<Panel id="Scroller" style="flow-children: down; overflow: squish scroll;">
  <Label text="Imagine a bunch of lines of text here." />
  <Label text="Enough to require a scrollbar." />
  <Label text="..." />
  <Button id="ScrollToTopButton" onactivate="ScrollToTop()">
    <Label text="Scroll to Top" />
  </Button>
</Panel>

In this example, even though the ScrollToTop() event is fired on the #ScrollToTopButton, the parent #Scroller is the one that actually handles it.

Panel Events

Panel events are a special type of event whose first parameter is optionally the ID of the panel you want the event to fire on. This allows an event to easily modify properties off of some other panel.

Some examples:

<Panel id="Controls">
  <!-- AddStyle will add the "Clicked" class to Control1. Though AddStyle is a panel event, this version is not using the optional first parameter. -->
  <Button id="Control1" onactivate="AddStyle( Clicked )" />
 
  <!-- AddStyle will add the "Clicked" class to the #Controls panel. -->
  <Button id="Control2" onactivate="AddStyle( Controls, Clicked )" />
 
  <!-- AddStyle will add the "Clicked" class to the #SomeOtherPanel panel, even though it's not in the button's parent hierarchy. -->
  <Button id="Control3" onactivate="AddStyle( SomeOtherPanel, Clicked )" />
</Panel>
<Panel id="SomeOtherPanel" />

Note that panel events will only correctly find panels by ID within the same layout (xml) file.

To set panel events through javascript, you can use a combination of the Panel.SetPanelEvent and the $.DispatchEvent functions:

myPanel.SetPanelEvent(
  "onmouseover", 
  function(){
    $.DispatchEvent("DOTAShowTextTooltip", myPanel, "This is my tooltip!");
  }
)

Default Event Attributes

Panorama supports a number of attributes that will automatically fire events (or javascript) when the user interacts with them. Most of these attributes match the standard HTML5 attributes, though there are some panorama-specific additions and some HTML5 attributes that are not supported.

Attribute Description
onload Panel has finished loading
onactivate Panel has been activated, either via the mouse, keyboard, or controller.
onmouseactivate Panel has been activated by the mouse.
oncontextmenu User right clicked on the panel, or used the context menu key on their keyboard.
onfocus Panel gained keyboard focus.
ondescendantfocus One of the panel's descendants gained keyboard focus.
onblur Panel lost keyboard focus.
ondescendantblur One of the panel's descendants lost keyboard focus.
oncancel User hit the ESC key.
onmouseover Mouse started hovering over this panel.
onmouseout Mouse stopped hovering over this panel.
ondblclick User double clicked on this panel.
onmoveup User tried to move up from this panel (arrow key up).
onmovedown User tried to move down from this panel (arrow key down).
onmoveleft User tried to move left from this panel (arrow key left).
onmoveright User tried to move right from this panel (arrow key right).
ontabforward User tried to tab forward from this panel.
ontabbackward User tried to tab backward (Shift+Tab) from this panel.
onselect Panel gained :selected.
ondeselect Panel lost :selected.
onscrolledtobottom Panel was scrolled entirely to the bottom.
onscrolledtorightedge Panel was scrolled entirely to the right edge.

Event List

Generated using dump_panorama_events on 8/16/2015.

Event Panel Event Description
AddStyle(string class) Yes Add a CSS class to a panel.
AddStyleToEachChild(string class) Yes Add a CSS class to all children of this panel.
AsyncEvent(float delay, event eventToFire) No Fire another event after a delay (in seconds).
DOTAHideAbilityTooltip() Yes Hide the ability tooltip
DOTAHideBuffTooltip() Yes Hide the buff tooltip
DOTAHideEconItemTooltip() Yes Hide the econ item tooltip.
DOTAHideProfileCardTooltip() Yes Hide the profile card tooltip.
DOTAHideTextTooltip() Yes Hide the text tooltip
DOTAHideTitleImageTextTooltip() Yes Hide the title image text tooltip.
DOTAHideTitleTextTooltip() Yes Hide the title text tooltip.
DOTAShowAbilityTooltip(string abilityName) Yes Show an ability tooltip.
DOTAShowAbilityTooltipForEntityIndex(string abilityName, int32 entityIndex) Yes Show an ability tooltip. Level information comes from the entity specified by the entityIndex.
DOTAShowBuffTooltip(int32 entityIndex, int32 buffSerial, bool bOnEnemy) Yes Show a buff tooltip for the specified entityIndex + buff serial.
DOTAShowEconItemTooltip(uint16 itemDef, uint8 styleIndex, int32 heroID) Yes Show the econ item tooltip for a given item, style, and hero. Use 0 for the default style, and -1 for the default hero.
DOTAShowProfileCardTooltip(uint64 steamID, bool useProName) Yes Show a user's profile card. Use pro name determines whether to use their professional team name if applicable.
DOTAShowTextTooltip(string text) Yes Show a tooltip with the given text.
DOTAShowTextTooltipStyled(string text, string style) Yes Show a tooltip with the given text. Also apply a CSS class named "style" to allow custom styling.
DOTAShowTitleImageTextTooltip(string title, string imagePath, string text) Yes Show a tooltip with the given title, image, and text.
DOTAShowTitleImageTextTooltipStyled(string title, string imagePath, string text, string style) Yes Show a tooltip with the given title, image, and text. Also apply a CSS class named "style" to allow custom styling.
DOTAShowTitleTextTooltip(string title, string text) Yes Show a tooltip with the given title and text.
DOTAShowTitleTextTooltipStyled(string title, string text, string style) Yes Show a tooltip with the given title and text. Also apply a CSS class named "style" to allow custom styling.
IfHasClassEvent(string class, event eventToFire) Yes Fire another event if this panel has a given class.
IfHoverOtherEvent(string otherPanelID, event eventToFire) Yes Fire another event if currently hovering over a panel with the given ID.
IfNotHasClassEvent(string class, event eventToFire) Yes Fire another event if this panel does not have a given class.
IfNotHoverOtherEvent(string otherPanelID, event eventToFire) Yes Fire another event if not currently hovering over a panel with the given ID.
MovePanelDown(int32 repeatCount) Yes Move down from the panel. By default, this will change the focus position, but other panel types may implement this differently.
MovePanelLeft(int32 repeatCount) Yes Move left from the panel. By default, this will change the focus position, but other panel types may implement this differently.
MovePanelRight(int32 repeatCount) Yes Move right from the panel. By default, this will change the focus position, but other panel types may implement this differently.
MovePanelUp(int32 repeatCount) Yes Move up from the panel. By default, this will change the focus position, but other panel types may implement this differently.
PageDown() No Scroll the panel down by one page.
PageLeft() No Scroll the panel left by one page.
PagePanelDown() Yes Scroll the panel down by one page.
PagePanelLeft() Yes Scroll the panel left by one page.
PagePanelRight() Yes Scroll the panel left by one page.
PagePanelUp() Yes Scroll the panel up by one page.
PageRight() No Scroll the panel right by one page.
PageUp() No Scroll the panel up by one page.
RemoveStyle(string class) Yes Remove a CSS class from a panel.
RemoveStyleFromEachChild(string class) Yes Remove a CSS class from all children of this panel.
ScrollDown() No Scroll the panel down by one line.
ScrollLeft() No Scroll the panel left by one line.
ScrollPanelDown() Yes Scroll the panel down by one line.
ScrollPanelLeft() Yes Scroll the panel left by one line.
ScrollPanelRight() Yes Scroll the panel right by one line.
ScrollPanelUp() Yes Scroll the panel up by one line.
ScrollRight() No Scroll the panel right by one line.
ScrollToBottom() Yes Scroll this panel to the bottom.
ScrollToTop() Yes Scroll this panel to the top.
ScrollUp() No Scroll the panel up by one line.
SetChildPanelsSelected(bool selected) Yes Set whether any child panels are :selected.
SetInputFocus() Yes Set focus to this panel.
SetPanelSelected(bool selected) Yes Set whether this panel is :selected.
TogglePanelSelected() Yes Toggle whether this panel is :selected.
ToggleStyle(string class) Yes Toggle whether a panel has the given CSS class.