Dota 2 Workshop Tools/Panorama/Events

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:
The panel the event was fired on gets the first shot at handling the event.
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.
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.
{| class="wikitable"
! 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.
|-
| onvaluechanged
| 
|-
| ontooltiploaded
| 
|-
| ontextentrysubmit
| 
|-
| ontextentrychange
| 
|-
| onpopupsdismissed
| 
|-
| onpagesetupsuccess
| 
|-
| onnotfilled
| 
|-
| onmousemove
| 
|-
| oninputsubmit
| 
|-
| onfindmatchstart
| 
|-
| onfindmatchend
| 
|-
| onfilled
|
|-
| oneconsetloaded
|
|-}
== 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.
Category: Dota 2 Workshop Tools Category: Panorama