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.
Event List
Generated using dump_panorama_events on 2024-03-20.
| 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 | 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".
