Add new widget opening and title update

examples/hello-world-lit-js/demo.js

@@ -17,4 +17,3 @@ openWidgets.init({
     uuid: process.env.UUID,
   },
 });
-``

examples/hello-world-lit-js/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "lit": "^2.0.2",
-    "sdkwidgets": "^1.0.13"
+    "sdkwidgets": "^1.0.14"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",

examples/hello-world-lit-js/src/HelloWorld.js

@@ -1,6 +1,9 @@
-import { html, css, LitElement } from 'lit';
+import {html, css, LitElement} from 'lit';
 
 export class HelloWorld extends LitElement {
+  widgetTitle = 'Hello world';
+  newWidgetName = 'hello-world-new';
+
   static get styles() {
     return css`
       :host {
@@ -13,37 +16,41 @@ export class HelloWorld extends LitElement {
 
   static get properties() {
     return {
-      counter: { type: Number },
-      user: {type: Object },
+      counter: {type: Number},
+      user: {type: Object},
       api: {type: Object},
-      theme: {type: Object}
+      theme: {type: Object},
+      data: {type: Object},
     };
   }
 
   constructor() {
     super();
     this.counter = 5;
-    this.user = {}
-    this.theme = {}
-    this.api = {}
+    this.user = {};
+    this.theme = {};
+    this.api = {};
+    this.data = {};
   }
 
   __increment() {
     this.counter += 1;
 
-    console.log("increment", this.api, this.user, this.counter)
+    console.log('increment', this.api, this.user, this.counter);
+
+    console.log('api', this.api);
 
-    console.log("api", this.api)
+    console.log('theme', this.theme);
 
-    console.log("theme", this.theme)
+    console.log('data', this.data);
   }
 
   __fullScreen() {
-    this.api.openFullScreen({title: 'Full screen title'})
+    this.api.openFullScreen({title: 'Full screen title'});
   }
 
   __closeFullScreen() {
-    this.api.closeFullScreen()
+    this.api.closeFullScreen();
   }
 
   async __getLocation() {
@@ -58,20 +65,34 @@ export class HelloWorld extends LitElement {
     console.log('QR Code: ', qrCode);
   }
 
+  __openNewWidget() {
+    const opened = this.api.openNewWidget({
+      name: this.newWidgetName,
+      data: {
+        some: 'data',
+      },
+    });
+    console.log('Opened new widget: ', opened);
+  }
+
+  __setTitle() {
+    this.api.setTitle({title: this.widgetTitle});
+  }
+
   render() {
-    if (!this.user || !this.user.id)
-      return html`<div>Empty User</div>`;
+    if (!this.user || !this.user.id) return html` <div>Empty User</div>`;
 
     return html`
       <h2>Hello, User #${this.user.id}!</h2>
       <h5>Balance: ${this.user.coins}!</h5>
       <h5>Counter: ${this.counter}!</h5>
-      <button @click=${this.__increment}>Increment</button>
-      <button @click=${this.__fullScreen}>Full Screen</button>
-      <button @click=${this.__closeFullScreen}>Close Full Screen</button>
-      <button @click=${this.__getLocation}>Get Location</button>
-      <button @click=${this.__getQrCode}>Get QR Code</button>
+      <button @click="${this.__increment}">Increment</button>
+      <button @click="${this.__fullScreen}">Full Screen</button>
+      <button @click="${this.__closeFullScreen}">Close Full Screen</button>
+      <button @click="${this.__getLocation}">Get Location</button>
+      <button @click="${this.__getQrCode}">Get QR Code</button>
+      <button @click="${this.__openNewWidget}">Open new widget</button>
+      <button @click="${this.__setTitle}">Set widget title</button>
     `;
   }
 }
-

examples/hello-world-lit-js/widget.js

@@ -1,3 +1,13 @@
-import { HelloWorld } from './src/HelloWorld.js';
+import {HelloWorld} from './src/HelloWorld.js';
+
+class HelloWorldNew extends HelloWorld {
+  widgetTitle = 'Hello world new';
+  newWidgetName = 'hello-world';
+
+  constructor() {
+    super();
+  }
+}
 
 window.customElements.define('hello-world', HelloWorld);
+window.customElements.define('hello-world-new', HelloWorldNew);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdkwidgets",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Changers City SDK allows partners to build their own interactive UI widgets which can be embedded inside  Changers City app.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -11,6 +11,7 @@
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack --watch",
     "build": "tsc && webpack",
     "format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\"",
     "lint": "tslint -p tsconfig.json",

src/dev/.gitignore

@@ -0,0 +1 @@
+config.js

src/dev/hello-world.js

@@ -0,0 +1,191 @@
+'use strict';
+
+(function () {
+  class HelloWorld extends HTMLElement {
+    widgetTitle = 'Hello world';
+    newWidgetName = 'hello-world-new';
+
+    constructor() {
+      // establish prototype chain
+      super();
+
+      // attaches shadow tree and returns shadow root reference
+      // https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow
+      const shadow = this.attachShadow({mode: 'open'});
+
+      this._user = {};
+      this._api = {};
+      this._theme = {};
+      this._data = {};
+      this._counter = 0;
+
+      // creating a container for the editable-list component
+      const container = document.createElement('div');
+
+      // creating the inner HTML of the editable list element
+      container.innerHTML = `
+        <h2>Hello, User #<span class='user-id'>${this.userId}</span>!</h2>
+        <h5>Balance: <span class='balance'>${this.balance}</span></h5>
+        <h5>Counter: <span class='counter'>${this.counter}</span></h5>
+        <button class='increment'>increment</button>
+        <button class='open-full-screen'>Open full screen</button>
+        <button class='close-full-screen'>Close full screen</button>
+        <br/>
+        <button class='location'>Get current location</button>
+        <button class='qr-code'>Scan QR code</button>
+        <button class='open-new-widget'>Open new widget</button>
+        <button class='set-title'>Set widget title</button>
+      `;
+
+      // appending the container to the shadow DOM
+      shadow.appendChild(container);
+    }
+
+    // fires after the element has been attached to the DOM
+    connectedCallback() {
+      console.log(
+        'connectedCallback',
+        '\nshadowRoot:',
+        this.shadowRoot,
+        '\nthis:',
+        this,
+        '\nuser:',
+        this.user,
+        '\ntheme:',
+        this.theme,
+        '\ndata:',
+        this.data,
+      );
+
+      const incrementButton = this.shadowRoot.querySelector('.increment');
+
+      let self = this;
+
+      incrementButton.addEventListener(
+        'click',
+        function (e) {
+          self._counter++;
+          self.update();
+        },
+        false,
+      );
+
+      const openFullScreenButton =
+        this.shadowRoot.querySelector('.open-full-screen');
+      openFullScreenButton.addEventListener('click', () =>
+        self.api.openFullScreen({title: 'Full screen title'}),
+      );
+
+      const closeFullScreenButton =
+        this.shadowRoot.querySelector('.close-full-screen');
+      closeFullScreenButton.addEventListener('click', () =>
+        self.api.closeFullScreen(),
+      );
+
+      const locationButton = this.shadowRoot.querySelector('.location');
+      locationButton.addEventListener('click', async () => {
+        console.log('Getting location ....');
+        const currentLocation = await self.api.getCurrentLocation();
+        console.log('Current location: ', currentLocation);
+      });
+
+      const qrCodeButton = this.shadowRoot.querySelector('.qr-code');
+      qrCodeButton.addEventListener('click', async () => {
+        console.log('Scanning QR code ...');
+        const qrCode = await self.api.scanQRCode();
+        console.log('QR Code: ', qrCode);
+      });
+
+      const openWidgetButton =
+        this.shadowRoot.querySelector('.open-new-widget');
+      openWidgetButton.addEventListener('click', () => {
+        const opened = self.api.openNewWidget({
+          name: this.newWidgetName,
+          data: {
+            some: 'data',
+          },
+        });
+        console.log('Opened new widget: ', opened);
+      });
+
+      const setTitleButton = this.shadowRoot.querySelector('.set-title');
+      setTitleButton.addEventListener('click', () => {
+        self.api.setTitle({
+          title: this.widgetTitle,
+        });
+      });
+    }
+
+    update() {
+      var counterElement = this.shadowRoot.querySelector('.counter');
+      counterElement.innerHTML = this.counter;
+
+      var userIdElement = this.shadowRoot.querySelector('.user-id');
+      userIdElement.innerHTML = this.userId;
+
+      var balanceElement = this.shadowRoot.querySelector('.balance');
+      balanceElement.innerHTML = this.balance;
+    }
+
+    set user(value) {
+      this._user = value;
+      this.update();
+    }
+
+    get user() {
+      return this._user;
+    }
+
+    set theme(value) {
+      this._theme = value;
+      this.update();
+    }
+
+    get theme() {
+      return this._theme;
+    }
+
+    set data(value) {
+      this._data = value;
+      this.update();
+    }
+
+    get data() {
+      return this._data;
+    }
+
+    set api(value) {
+      this._api = value;
+      this.update();
+    }
+
+    get api() {
+      return this._api;
+    }
+
+    get userId() {
+      return this._user.id;
+    }
+
+    get balance() {
+      return this._user.coins;
+    }
+
+    get counter() {
+      return this._counter;
+    }
+  }
+
+  class HelloWorldNew extends HelloWorld {
+    widgetTitle = 'Hello world new';
+    newWidgetName = 'hello-world';
+
+    constructor() {
+      super();
+    }
+  }
+
+  // let the browser know about the custom element
+  customElements.define('hello-world', HelloWorld);
+  customElements.define('hello-world-new', HelloWorldNew);
+})();

src/dev/index.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang='en-GB'>
+<head>
+  <meta charset='utf-8'>
+  <style>
+      body {
+          background: #fafafa;
+      }
+  </style>
+  <script src='./config.js'></script>
+  <script src='./hello-world.js'></script>
+  <link href='../../dist/open-widgets.css' rel='stylesheet'>
+  <script src='../../dist/open-widgets.js'></script>
+</head>
+<body>
+<div id='root'></div>
+</body>
+<script>
+  window.openWidgets.init({
+    root: document.getElementById('root'),
+    widgets: [
+      {
+        name: 'hello-world',
+        position: 'after-tree-planting',
+      },
+      {
+        name: 'hello-world',
+        position: 'after-token',
+      },
+      {
+        name: 'hello-world-new',
+      },
+    ],
+    authData: {
+      app: 'sdksample',
+      clientId: 19,
+      clientSecret: 'secret',
+      env: 'stage',
+      uuid: 'uuid',
+      ...config?.authData || {},
+    },
+  });
+</script>
+</html>