dummy app: added visibility toggle example

open-datakit · Sep 24, 2022 · 7b659c3 · 7b659c3
1 parent 617e147
commit 7b659c3
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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}}