added TomsterPopper component to test keyboard event handling

app/components/tomster-popper.hbs

@@ -0,0 +1,10 @@
+<div id="tomster-popper" class={{if this.isVisible 'show' 'hide'}}>
+  <div id="greeting">
+    {{t "general.greeting" name="Tomster"}}
+  </div>
+  <img
+    src="/assets/images/teaching-tomster.png"
+    alt={{t "general.teachingTomster"}}
+    {{on-key 'ctrl+shift+KeyT' this.popToggle event='keyup'}}
+  />
+</div>

app/components/tomster-popper.js

@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class TomsterPopperComponent extends Component {
+  @tracked isVisible = false;
+
+  @action
+  popToggle() {
+    this.isVisible = !this.isVisible;
+
+    console.log(`tomster says...${this.isVisible ? 'hello' : 'goodbye'}`);
+  }
+}

app/styles/components.scss

@@ -8,3 +8,4 @@
 @import "components/messages";
 @import "components/new-message-input";
 @import "components/ribbon";
+@import "components/tomster-popper";

app/styles/components/tomster-popper.scss

@@ -0,0 +1,62 @@
+#tomster-popper {
+  bottom: -100vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  left: 50%;
+  position: fixed;
+  z-index: 10;
+}
+#tomster-popper.show {
+  animation-duration: 500ms;
+  animation-name: slidein;
+  bottom: -70px;
+  display: flex;
+}
+#tomster-popper.hide {
+  animation-duration: 1s;
+  animation-name: slideout;
+  bottom: -100vw;
+  display: flex;
+}
+#tomster-popper #greeting {
+  background-color: #fff;
+  border: 1px solid #000;
+  border-radius: 5px;
+  bottom: 5px;
+  padding: 5px;
+  position: relative;
+  width: 140px;
+}
+#tomster-popper img {
+  height: 200px;
+  width: 200px;
+}
+
+@keyframes slidein {
+  from {
+    bottom: -100vw;
+    translate: 0 10vw;
+    scale: 50% 50%;
+  }
+
+  to {
+    bottom: -70px;
+    translate: 0 0;
+    scale: 100% 1;
+  }
+}
+
+@keyframes slideout {
+  from {
+    bottom: -70px;
+    translate: 0 0;
+    scale: 100% 1;
+  }
+
+  to {
+    bottom: -100vw;
+    translate: 0 10vw;
+    scale: 50% 50%;
+  }
+}

app/templates/application.hbs

@@ -2,6 +2,8 @@
 <HeadLayout />
 
 <div class="application-wrapper">
+  <TomsterPopper />
+
   <Layout::Ribbon @position="right" @content={{this.env}} />
 
   <header>

config/icons.js

@@ -3,6 +3,7 @@ module.exports = function () {
     'free-solid-svg-icons': [
       'at',
       'book',
+      'check',
       'circle-info',
       'ear-listen',
       'flask',

tests/acceptance/remember-stuff-test.js

@@ -2,6 +2,8 @@ import { module, test } from 'qunit';
 import { click, visit, currentURL } from '@ember/test-helpers';
 import { setupApplicationTest } from 'remember-stuff/tests/helpers';
 import ENV from 'remember-stuff/config/environment';
+// import { triggerKeyEvent } from '@ember/test-helpers';
+// import { elementInView } from '../helpers/intersection-observing';
 
 module('Acceptance | remember stuff', function (hooks) {
   setupApplicationTest(hooks);
@@ -131,4 +133,20 @@ module('Acceptance | remember stuff', function (hooks) {
       assert.dom('footer a.menu-prod').hasText('[Prod]');
     }
   });
+
+  test('see if tomster works', async function (assert) {
+    await visit('/');
+
+    assert.dom('#tomster-popper').exists();
+
+    // TODO
+    // assert.false(elementInView('tomster-popper'));
+
+    // await triggerKeyEvent('.application-wrapper', 'keyup', 84, {
+    //   shiftKey: true,
+    //   ctrlKey: true,
+    // });
+
+    // assert.true(elementInView('tomster-popper'));
+  });
 });

tests/helpers/intersection-observing.js

@@ -0,0 +1,28 @@
+const intersection = (r1, r2) => {
+  const xOverlap = Math.max(0, Math.min(r1.x + r1.w, r2.x + r2.w) - Math.max(r1.x, r2.x));
+  const yOverlap = Math.max(0, Math.min(r1.y + r1.h, r2.y + r2.h) - Math.max(r1.y, r2.y));
+  const overlapArea = xOverlap * yOverlap;
+
+  return overlapArea;
+};
+
+const percentInView = (div) => {
+  const rect = div.getBoundingClientRect();
+
+  const dimension = { x: rect.x, y: rect.y, w: rect.width, h: rect.height };
+  const viewport = { x: 0, y: 0, w: window.innerWidth, h: window.innerHeight };
+  const divsize = dimension.w * dimension.h;
+  const overlap = intersection(dimension, viewport);
+  const percent = overlap / divsize;
+
+  return percent;
+};
+
+export function elementInView(elemId) {
+  console.log(
+    'elementInView?',
+    percentInView(document.getElementById(elemId)),
+    percentInView(document.getElementById(elemId)) > 0,
+  );
+  return percentInView(document.getElementById(elemId)) > 0;
+}

tests/integration/components/tomster-popper-test.js

@@ -0,0 +1,28 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'remember-stuff/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+// import { elementInView } from '../../helpers/intersection-observing';
+
+module('Integration | Component | tomster-popper', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<TomsterPopper />`);
+
+    assert.dom('#tomster-popper').exists();
+
+    // TODO
+    // assert.false(elementInView('tomster-popper'));
+
+    // let tomster = document.querySelector('#tomster-popper');
+    // tomster.classList.add('show');
+
+    // assert.true(elementInView('tomster-popper'));
+
+    // tomster.classList.remove('show');
+    // tomster.classList.add('hide');
+
+    // assert.false(elementInView('tomster-popper'));
+  });
+});

tests/test-helper.js

@@ -4,6 +4,7 @@ import * as QUnit from 'qunit';
 import { setApplication } from '@ember/test-helpers';
 import { setup } from 'qunit-dom';
 import { start } from 'ember-qunit';
+import './helpers/intersection-observing';
 
 setApplication(Application.create(config.APP));
 

translations/en-us.yaml

@@ -90,6 +90,7 @@ general:
   status: Status
   summary: Summary
   sunday: Sunday
+  teachingTomster: Teaching Tomster
   thursday: Thursday
   time: Time
   timezone: Timezone