From 4e0bb64f566d9188b592e4b561d837accc189526 Mon Sep 17 00:00:00 2001 From: Diana Chaikovska Date: Thu, 17 Nov 2022 15:59:59 +0200 Subject: [PATCH] Migrted from deprecated views API to appViews --- package.json | 10 ++++----- postcss.config.js | 2 +- src/app/index.js | 34 ++++++++++++++++-------------- src/avid_api/entry/EntryWrapper.js | 10 ++++----- src/avid_api/view/ViewWrapper.js | 33 +++++++++++++++-------------- src/index.js | 4 ++-- src/package.json | 2 +- 7 files changed, 48 insertions(+), 47 deletions(-) diff --git a/package.json b/package.json index 731ae80..91e1635 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cloudux-starter-kit", - "version": "2.1.18", + "version": "2.2.2", "description": "Starter kit for UI developers in CloudUX", "main": "build/index.js", "scripts": { @@ -24,14 +24,12 @@ "base64-img": "1.0.4", "cloudux-bootstrap": "0.0.5", "request": "^2.88.0", - "cloudux-starter-kit": "2.1.18", - "mediacentral-publish": "^0.3.2", - "mediacentral-sign": "^0.1.1" + "cloudux-starter-kit": "2.2.2" }, "devDependencies": { "autoprefixer": "9.6.1", "babel-core": "6.26.3", - "babel-eslint": "8.2.6", + "babel-eslint": "9.x", "babel-loader": "7.1.5", "babel-plugin-transform-class-properties": "6.24.1", "babel-plugin-transform-decorators": "6.24.1", @@ -50,7 +48,7 @@ "eslint-plugin-jsx-a11y": "6.2.3", "file-loader": "6.2.0", "html-loader": "0.5.5", - "http-proxy-middleware": "0.18.0", + "http-proxy-middleware": "^2.0.6", "mini-css-extract-plugin": "0.4.4", "node-fetch": "^2.6.1", "postcss-loader": "3.0.0", diff --git a/postcss.config.js b/postcss.config.js index 2e3148f..fec0a2a 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,7 +1,7 @@ module.exports = { plugins: [ require('autoprefixer')({ - browsers: [ + overrideBrowserslist: [ 'last 5 Chrome versions', 'last 5 Safari versions', 'last 2 Firefox versions', diff --git a/src/app/index.js b/src/app/index.js index 14b7aa1..4efbeda 100644 --- a/src/app/index.js +++ b/src/app/index.js @@ -1,5 +1,5 @@ /** - * Copyright 2017 by Avid Technology, Inc. + * Copyright 2022 by Avid Technology, Inc. */ import getAsset from './services/data-providers'; import spinner from './Spinner/Spinner'; @@ -9,16 +9,22 @@ import * as styles from './index.scss'; import 'cloudux-bootstrap/dist/css/cloudux.min.css'; export default class ApplicationContainer { - constructor() { - this.handleDrop = this.handleDrop.bind(this); + render(element) { + const container = document.createElement('div'); + container.id = 'clip-info'; + container.classList.add(styles['clip-info']); + container.addEventListener('dragover', (event) => { + event.preventDefault(); + }); + container.addEventListener('drop', (event) => { + this.handleDrop(event, event.target); + }); + const welcomeMsg = document.createElement('span'); welcomeMsg.innerHTML = getLocalization(l10nData)('welcome-info'); - this.content = document.createElement('div'); - this.content.id = 'clip-info'; - this.content.appendChild(welcomeMsg); - this.content.className = styles['clip-info']; - this.content.ondragover = event => event.preventDefault(); - this.content.ondrop = event => this.handleDrop(event, this.content); + + element.appendChild(container); + container.appendChild(welcomeMsg); } handleDrop(event, element) { @@ -39,7 +45,7 @@ export default class ApplicationContainer { separator.className = styles.separator; const footer = document.createElement('div'); footer.className = styles.footer; - + if (data.hasOwnProperty('thumbnail') && data.thumbnail) { const wrapper = document.createElement('div'); wrapper.className = styles.imageWrapper; @@ -55,7 +61,7 @@ export default class ApplicationContainer { container.appendChild(footer); element.appendChild(container); }) - .catch(error => { + .catch((error) => { const errorSpan = document.createElement('span'); errorSpan.innerHTML = 'Error wrong asset or server unavailable'; @@ -121,7 +127,7 @@ export default class ApplicationContainer { const td2 = document.createElement('div'); td1.className = 'cux-table-cell'; - td1.style.paddingLeft= '8px'; + td1.style.paddingLeft = '8px'; td1.style.width = '20%'; td2.className = 'cux-table-cell'; td1.innerHTML = name; @@ -132,8 +138,4 @@ export default class ApplicationContainer { return tr; } - - returnElement() { - return this.content; - } } diff --git a/src/avid_api/entry/EntryWrapper.js b/src/avid_api/entry/EntryWrapper.js index fedd6c2..a76d7ca 100644 --- a/src/avid_api/entry/EntryWrapper.js +++ b/src/avid_api/entry/EntryWrapper.js @@ -1,5 +1,5 @@ /** - * Copyright 2017 by Avid Technology, Inc. + * Copyright 2022 by Avid Technology, Inc. */ import appConfig from '../../package.json'; @@ -36,10 +36,6 @@ export default class EntryApp { console.log('[ExamplePlugin] onHide'); } - onUnrender() { - console.log('[ExamplePlugin] onUnrender'); - } - onBeforeUnrender() { console.log('[ExamplePlugin] onBeforeUnrender'); } @@ -52,6 +48,10 @@ export default class EntryApp { console.log('[ExamplePlugin] context', context); } + getTitle() { + return this.innerView.getTitle(); + } + get publicScope() { return {}; } diff --git a/src/avid_api/view/ViewWrapper.js b/src/avid_api/view/ViewWrapper.js index 9e9cc7a..a9a685c 100644 --- a/src/avid_api/view/ViewWrapper.js +++ b/src/avid_api/view/ViewWrapper.js @@ -1,5 +1,5 @@ /** - * Copyright 2017 by Avid Technology, Inc. + * Copyright 2022 by Avid Technology, Inc. */ /* eslint-disable */ @@ -7,22 +7,17 @@ import ApplicationContainer from '../../app/index'; // Need to be bcs it is used in main App : export default class ViewWrapper { - createElement() { - this.el = document.createElement('div'); - this.el.style.cssText = 'width: 100%; height: 100%;'; - return Promise.resolve(this.el); - } - - onInit() { - this.pane = new ApplicationContainer({ - contextCallback: function (context) { - this.trigger('contextChange', context); - }.bind(this), - }); + onInit(config, { dispatch }) { + this.trigger = dispatch; + this.state = config.state; } - onRender() { - this.el.appendChild(this.pane.returnElement()); + onRender({ domElement }) { + this.el = document.createElement('div'); + this.el.style.cssText = 'width: 100%; height: 100%;'; + this.pane = new ApplicationContainer(); + this.pane.render(this.el); + domElement.appendChild(this.el); } onDestroy(data) {} @@ -61,7 +56,13 @@ export default class ViewWrapper { return 50; } + getTitle() { + return this.pane && this.pane.getTitle(); + } + get publicScope() { - return {}; + return { + getTitle: this.getTitle.bind(this), + }; } } diff --git a/src/index.js b/src/index.js index 2aef71d..f54c827 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ /** - * Copyright 2018 by Avid Technology, Inc. + * Copyright 2022 by Avid Technology, Inc. */ import appConfig from './package.json'; @@ -12,7 +12,7 @@ const providing = isAdminApp ? 'adminApps' : 'apps'; export const avid = [ { name: `${appConfig.identity.appName}-view`, - provides: ['views'], + provides: ['appViews'], create: () => ViewConfig, }, { diff --git a/src/package.json b/src/package.json index 244c22d..f371133 100644 --- a/src/package.json +++ b/src/package.json @@ -5,7 +5,7 @@ "main": "index.js", "avid": { "format": "amd", - "autoload": true, + "autoload": false, "alias": "your-avid-app-id", "secret": "your-app-secred-from-myavid-com", "features": {