-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathattributeEventListeners.html
58 lines (51 loc) · 2.34 KB
/
attributeEventListeners.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
<title>Attribute Event Listeners</title>
<script type="module" src="https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.js"></script>
<script>
// An event raised when the size of the viz is known. You can use this event to perform tasks such as resizing the elements surrounding the Viz object once the object's size has been established.
function handleFirstVizSizeKnown(e) {
let size = e.detail.vizSize;
console.log("---handleFirstVizSizeKnown---");
console.log(e);
console.log("---Size---");
console.log(size);
}
// An event raised when the Viz object first becomes interactive. This is only raised once.
async function handleFirstInteractive(e) {
console.log("---handleFirstInteractive---");
console.log("Viz Embedding Successful!");
}
// An event raised after a tab switch occurs (the active sheet has changed). Guarantees the viz object will be interactive after this.
async function handleTabSwitch(e) {
// Example that shows getting the viz object from the tab switch event.
let viz = e.target;
let name = viz.workbook.activeSheet.name;
console.log("---handleTabSwitch---");
console.log(`Tab switched to ${name}.`);
}
// An event raised when a toolbar button or control becomes available or becomes unavailable.
async function handleToolbarStateChanged(e) {
console.log("---handleToolbarStateChanged---");
console.log(`canRedo: ${e.detail.canRedo}`);
console.log(`canUndo: ${e.detail.canUndo}`);
}
</script>
</head>
<body>
<div>
<div>
<!-- Add event handlers as attributes to tableau-viz -->
<tableau-viz id="tableauViz" src="https://public.tableau.com/views/RegionalSampleWorkbook/Flights"
onFirstVizSizeKnown="handleFirstVizSizeKnown" onFirstInteractive="handleFirstInteractive"
onToolbarStateChanged="handleToolbarStateChanged" onTabSwitched="handleTabSwitch">
</tableau-viz>
</div>
<div>
<h3>Output</h3>
<i> See the console for more information about each event.</i>
</div>
</div>
</body>
</html>