fix(app): fix geometry demo code

HSF · Nov 18, 2020 · 4ffbd9b · 4ffbd9b
1 parent 8f91dbd
commit 4ffbd9b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 11 deletions.
diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/geometry/geometry.component.html b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/geometry/geometry.component.html
@@ -1,13 +1,12 @@
 <app-nav></app-nav>
-<app-experiment-info  experimentTagline="Geometry Demo">
-    <div>
-        <p>
-        Try opening the console and typing:
-<!--
-    {{ var parameters = { ModuleName: "Module 3", Xdim: 10., Ydim: 1., Zdim: 45, NumPhiEl: 64, NumZEl: 10, Radius: 105, MinZ: -250, MaxZ: 250, TiltAngle: 0.3, PhiOffset: 0.0, Colour: 0xffff00, EdgeColour: 0x449458 };}}        
-    {{window.EventDisplay.buildGeometryFromParameters(parameters)}}
--->
-    </p>
-    </div>
-</app-experiment-info>
+<div class="demo-info">
+  <p><b>Geometry Demo</b></p>
+  <p>Try opening the console and typing:</p>
+  <code id="geometryCode">
+    {{'var parameters = { ModuleName: "Module 3", Xdim: 10., Ydim: 1., Zdim: 45, NumPhiEl: 64, NumZEl: 10, Radius: 105, MinZ: -250, MaxZ: 250, TiltAngle: 0.3, PhiOffset: 0.0, Colour: 0xffff00, EdgeColour: 0x449458 };\
+    window.EventDisplay.buildGeometryFromParameters(parameters);'}}
+  </code>
+  <p class="copy-code" (click)="copyCode()"><b>Copy</b></p>
+</div>
+
 <div id="eventDisplay"></div>
diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/geometry/geometry.component.scss b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/geometry/geometry.component.scss
@@ -0,0 +1,18 @@
+.demo-info {
+  position: absolute;
+  top: 5rem;
+  left: 1rem;
+  font-size: 0.8rem;
+  color: var(--phoenix-text-color-secondary);
+  width: 20rem;
+  max-width: 40%;
+
+  code {
+    color: var(--phoenix-text-color-secondary);
+    cursor: text;
+  }
+
+  .copy-code {
+    cursor: pointer;
+  }
+}
diff --git a/packages/phoenix-ng/projects/phoenix-app/src/app/sections/geometry/geometry.component.ts b/packages/phoenix-ng/projects/phoenix-app/src/app/sections/geometry/geometry.component.ts
@@ -16,4 +16,14 @@ export class GeometryComponent implements OnInit {
     this.eventDisplay.buildGeometryFromParameters(parameters);
   }
 
+  copyCode() {
+    const code = document.getElementById('geometryCode').textContent.trim();
+    const inputElement = document.createElement('input');
+    document.body.appendChild(inputElement);
+    inputElement.value = code;
+    inputElement.select();
+    document.execCommand('copy');
+    document.body.removeChild(inputElement);
+  }
+
 }