From 7b659c30b40fad3e29034e87c18843fedddbe7fd Mon Sep 17 00:00:00 2001
From: James Wilmot <jameswilmot2000@gmail.com>
Date: Sat, 24 Sep 2022 17:08:34 +1000
Subject: [PATCH] dummy app: added visibility toggle example

---
 tests/dummy/app/controllers/application.ts | 11 +++++++----
 tests/dummy/app/styles/app.css             | 11 +++++++++++
 tests/dummy/app/templates/application.hbs  | 23 +++++++++++++++++++++-
 3 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/tests/dummy/app/controllers/application.ts b/tests/dummy/app/controllers/application.ts
index 5323e1b..78d03c3 100644
--- a/tests/dummy/app/controllers/application.ts
+++ b/tests/dummy/app/controllers/application.ts
@@ -19,6 +19,7 @@ export default class Application extends Controller {
   @tracked specType: string;
   @tracked config: object;
   @tracked data: DataRecord;
+  @tracked isVisible: boolean;
 
   constructor() {
     super(...arguments);
@@ -27,14 +28,16 @@ export default class Application extends Controller {
     this.specType = SPEC_TYPE;
     this.config = CONFIG;
     this.data = DATA_1;
+
+    this.isVisible = false;
   }
 
   @action updateData() {
     this.data = DATA_2;
-    // TODO: Hack to workaround tracked property not being fired by this.data
-    // change
-    this.specType = '';
-    this.specType = 'vega';
+  }
+  
+  @action toggleVisibility() {
+    this.isVisible = !this.isVisible;
   }
 }
 
diff --git a/tests/dummy/app/styles/app.css b/tests/dummy/app/styles/app.css
index e69de29..5e9fcd3 100644
--- a/tests/dummy/app/styles/app.css
+++ b/tests/dummy/app/styles/app.css
@@ -0,0 +1,11 @@
+[aria-hidden="true"] {
+  margin: -1px;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+}
+
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
index 6324e9c..e98c7b0 100644
--- a/tests/dummy/app/templates/application.hbs
+++ b/tests/dummy/app/templates/application.hbs
@@ -12,9 +12,30 @@
 </div>
 
 <div>
-  <button {{on "click" this.updateData}}>
+  <button type="button" {{on "click" this.updateData}}>
     Update data
   </button>
 </div>
 
+<br>
+<div>
+  <button type="button" {{on "click" this.toggleVisibility}}>
+    Toggle visibility
+  </button>
+</div>
+
+<div aria-hidden={{if this.isVisible "false" "true"}}>
+  <div
+    {{vega
+      specType=this.specType
+      spec=this.spec
+      data=this.data
+      config=this.config
+      isVisible=this.isVisible
+    }}
+    style="height: 100%; min-height: 400px; max-height: 100%;"
+  >
+  </div>
+</div>
+
 {{outlet}}