This article relates to the game "Dota 2". Click here for more information.
This article relates to the SDK/Workshop Tools for "Dota 2 Workshop Tools". Click here for more information.
This article's documentation is for Source 2. Click here for more information.

Events

From Valve Developer Community
Jump to: navigation, search
English (en)中文 (zh)Translate (Translate)

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 2024-03-20.

Event Panel Event Description
AddStyle(panoramasymbol class) Yes Add a CSS class to a panel.
AddStyleAfterDelay(panoramasymbol class, float pre-delay) Yes Add a CSS class to a panel after a specified delay.
AddStyleToEachChild(panoramasymbol class) Yes Add a CSS class to all children of this panel.
AddTimedStyle(panoramasymbol class, float duration, float pre-delay) Yes Add a class for a specified duration, with optional pre-delay; clears existing timers when called with same class.
AsyncEvent(float delay, event eventToFire) No Fire another event after a delay (in seconds).
DOTADisplayDashboardTip(string string, string optional string) No Tip to display, panel to attach to (default 'DefaultTipAttachment')
DOTAHideAbilityTooltip() Yes Hide the ability tooltip
DOTAHideBuffTooltip() Yes Hide the buff tooltip
DOTAHideDroppedItemTooltip() Yes Hide the dropped item tooltip
DOTAHideEconItemTooltip() Yes Hide the econ item tooltip.
DOTAHideProfileCardBattleCupTooltip() Yes Hide the profile card / battle cup tooltip.
DOTAHideProfileCardTooltip() Yes Hide the profile card tooltip.
DOTAHideRankTierTooltip() Yes Hide the rank tier tooltip.
DOTAHideRuneTooltip() Yes Hide the rune tooltip
DOTAHideTextTooltip() Yes Hide the text tooltip
DOTAHideTI10EventGameTooltip() Yes Hide the ti10 event game tooltip
DOTAHideTitleImageTextTooltip() Yes Hide the title image text tooltip.
DOTAHideTitleTextTooltip() Yes Hide the title text tooltip.
DOTALiveStreamUpcoming(uint32 time) Yes Notify change in RTime32 we expect the stream to start
DOTALiveStreamVideoLive(bool isLive) Yes Notify change in stream state (we detected the stream going live)
DOTALiveStreamVideoPlaying(bool isShowingVideo) Yes Notify change in video state (is it pointing at a live stream page or not)
DOTAShowAbilityInventoryItemTooltip(int32 entityIndex, int32 inventorySlot) Yes Show tooltip for an item in the entityIndex NPC's inventory.
DOTAShowAbilityShopItemTooltip(string abilityName, string guideName, int32 entityIndex) Yes Show tooltip for an item in the entityIndex NPC's shop.
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.
DOTAShowAbilityTooltipForGuide(string abilityName, string guideName) Yes Show an ability tooltip annotated with a particular guide's info.
DOTAShowAbilityTooltipForHero(string abilityName, int32 heroid, bool) Yes Show an ability tooltip for the specified hero.
DOTAShowAbilityTooltipForLevel(string abilityName, int32) Yes Show an ability tooltip for a specific level.
DOTAShowBuffTooltip(int32 entityIndex, int32 buffSerial, bool bOnEnemy) Yes Show a buff tooltip for the specified entityIndex + buff serial.
DOTAShowEconItemTooltip(class item_definition_index_t itemDef, class style_index_t 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.
DOTAShowProfileCardBattleCupTooltip(uint64 steamID) Yes Show the battle cup portion of the user's profile card, if it exists
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.
DOTAShowRankTierTooltip(uint64 steamID) Yes Show the rank tier tooltip for a user
DOTAShowRuneTooltip(int32 X, int32 Y, int32 RuneType) Yes Show a rune tooltip in the X Y location for the rune type
DOTAShowTextTooltip(string text) Yes Show a tooltip with the given text.
DOTAShowTextTooltipStyled(string text, panoramasymbol style) Yes Show a tooltip with the given text. Also apply a CSS class named "style" to allow custom styling.
DOTAShowTI10EventGameTooltip(struct TI10EventGameTooltipInfo_t const * __ptr64 X) Yes Show a ti10 event game tooltip
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, panoramasymbol 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, panoramasymbol style) Yes Show a tooltip with the given title and text. Also apply a CSS class named "style" to allow custom styling.
DropInputFocus() Yes Drop focus entirely from the window containing this panel.
IfHasClassEvent(panoramasymbol 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(panoramasymbol 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(panoramasymbol class) Yes Remove a CSS class from a panel.
RemoveStyleAfterDelay(panoramasymbol class, float pre-delay) Yes Remove a CSS class from a panel after a specified delay.
RemoveStyleFromEachChild(panoramasymbol 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.
SetPanelEnabled(bool enabled) Yes Sets whether the given panel is enabled
SetPanelSelected(bool selected) Yes Set whether this panel is :selected.
SwitchStyle(panoramasymbol slot, panoramasymbol class) Yes Switch which class the panel has for a given attribute slot. Allows easily changing between multiple states.
TogglePanelSelected() Yes Toggle whether this panel is :selected.
ToggleStyle(panoramasymbol class) Yes Toggle whether a panel has the given CSS class.
TriggerStyle(panoramasymbol class) Yes Remove then immediately add back a CSS class from a panel. Useful to re-trigger events like animations or sound effects.

Warning: Display title "Events" overrides earlier display title "Panorama/Events".