feat: minimalist passage rendering impl

Author: evaneus

packages/passage/.gitignore

@@ -0,0 +1 @@
+lib

packages/passage/.npmignore

@@ -0,0 +1,2 @@
+src
+demo

packages/passage/demo/.gitignore

@@ -0,0 +1 @@
+.pie

packages/passage/demo/config.js

@@ -0,0 +1,29 @@
+module.exports = {
+  elements: {
+    'passage-element': '..'
+  },
+  models: [
+    {
+      id: '1',
+      element: 'passage-element',
+      mode: 'view',
+      title: 'Ineskeen Road, July Evening',
+      content: `The bicycles go by in twos and threes -<br/> 
+      There's a dance in Billy Brennan's barn tonight,<br/>
+      And there's the half-talk code of mysteries<br/>
+      And the wink-and-elbow language of delight.<br/>
+      Half-past eight and there is not a spot<br/>
+      Upon a mile of road, no shadow thrown<br/>
+      That might turn out a man or woman, not<br/>
+      A footfall tapping secrecies of stone. <br/>
+      <p/>
+      I have what every poet hates in spite<br/>
+      Of all the solemn talk of contemplation.<br/>
+      Oh, Alexander Selkirk knew the plight<br/>
+      Of being king and government and nation.<br/>
+      A road, a mile of kingdom. I am king<br/>
+      Of banks and stones and every blooming thing.<br/>
+      `
+    }
+  ]
+};

packages/passage/demo/index.html

@@ -0,0 +1 @@
+<passage-element pie-id="1"></passage-element>

packages/passage/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@pie-ui/passage",
+  "version": "1.0.0",
+  "description": "Element for rendering passage content",
+  "author": "pie framework developers",
+  "keywords": [
+    "pie",
+    "pie-ui",
+    "custom-element"
+  ],
+  "main": "lib/index.js",
+  "repository": "pie-framework/pie-ui",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "@pie-framework/pie-player-events": "^0.1.0"
+  }
+}

packages/passage/src/__tests__/index.test.js

@@ -0,0 +1,51 @@
+import { SessionChangedEvent } from '@pie-framework/pie-player-events';
+
+const defaultModel = {
+  title: 'title',
+  content: 'content',
+};
+
+const defaultSession = { id: 1 };
+
+
+describe('passage', () => {
+  let Def;
+  let el;
+
+  beforeAll(() => {
+    Def = require('../index').default;
+  });
+
+  beforeEach(() => {
+    el = new Def();
+    el.connectedCallback();
+    el.tagName = 'passage-element';
+    el.model = defaultModel;
+    el.session = defaultSession;
+  });
+
+  describe('model', () => {
+    it('should have set the model', () => {
+      expect(el._model).toEqual(defaultModel);
+    });
+  });
+
+  it('should have set the session', () => {
+    expect(el._session).toEqual(defaultSession);
+  });
+
+  describe('session', () => {
+    const dispatchesSessionEvent = (key, value) => {
+      it(`${key} dispatches session changed event`, () => {
+        const session = {id: key, value};
+        el.dispatchSessionChanged(session, key);
+
+        expect(el.dispatchEvent).toBeCalledWith(
+          new SessionChangedEvent('passage-element', false)
+        );
+        expect(el._session.value[key]).toEqual(session);
+      });
+    };
+
+  });
+});

packages/passage/src/index.js

@@ -0,0 +1,86 @@
+import { ModelSetEvent } from '@pie-framework/pie-player-events';
+
+export default class PiePassage extends HTMLElement {
+  constructor() {
+    super();
+    this._model = {
+      title: '',
+      content: ''
+    };
+    this._session = null;
+  }
+
+
+  containerStyle =  `
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-flex-wrap: nowrap;
+    -ms-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+    -webkit-justify-content: flex-start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    -webkit-align-content: stretch;
+    -ms-flex-line-pack: stretch;
+    align-content: stretch;
+    -webkit-align-items: flex-start;
+    -ms-flex-align: start;
+    align-items: flex-start;
+  `;
+
+  titleStyle = `
+    -webkit-order: 0;
+    -ms-flex-order: 0;
+    order: 0;
+    -webkit-flex: 0 1 auto;
+    -ms-flex: 0 1 auto;
+    flex: 0 1 auto;
+    -webkit-align-self: stretch;
+    -ms-flex-item-align: stretch;
+    align-self: stretch;
+  `;
+
+  contentStyle = `
+    -webkit-order: 0;
+    -ms-flex-order: 0;
+    order: 0;
+    -webkit-flex: 1 1 auto;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    -webkit-align-self: stretch;
+    -ms-flex-item-align: stretch;
+    align-self: stretch;
+  `;
+  set model(s) {
+    this._model = s;
+    this.dispatchEvent(
+      new ModelSetEvent(
+        this.tagName.toLowerCase(),
+        this._session,
+        !!this._model
+      )
+    );
+    this._render();
+  }
+
+  set session(s) {
+    this._session = s;
+  }
+
+  connectedCallback() {
+    this._render();
+  }
+
+  _render() {
+    this.innerHTML = `
+      <div style="${this.containerStyle}">
+        <h2 style="${this.titleStyle}">${this._model.title}</h2>
+        <divs tyle="${this.contentStyle}">${this._model.content}</div>
+      </div>
+    `;
+  }
+}