@storyteq/platform-integration 1.0.6 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1694 -0
- package/README.md +65 -33
- package/build/classes/CreateMediaPage.d.ts +3 -0
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -22,17 +22,18 @@ npm i @storyteq/platform-integration
|
|
|
22
22
|
```
|
|
23
23
|
import * as StoryteqPlatform from '@storyteq/platform-integration';
|
|
24
24
|
```
|
|
25
|
+
|
|
25
26
|
### General usage
|
|
26
27
|
|
|
27
28
|
It's important to note that the iframe's dimensions are determined by the parent's dimensions, so usually you need to make sure there's always a height for `#element-to-spawn-into`.
|
|
28
29
|
|
|
29
30
|
Each page's instance provides the following methods;
|
|
30
31
|
|
|
31
|
-
|
|
32
|
+
**on(event: String, callback: Function)**
|
|
32
33
|
|
|
33
34
|
Depending on the context, the callback can contain different or no arguments.
|
|
34
35
|
|
|
35
|
-
|
|
36
|
+
**destroy()**
|
|
36
37
|
|
|
37
38
|
Destroy the currently active page instance.
|
|
38
39
|
|
|
@@ -44,7 +45,8 @@ In order for the generated iframe to load correctly, your domains need to be whi
|
|
|
44
45
|
|
|
45
46
|
### Create media form
|
|
46
47
|
|
|
47
|
-
|
|
48
|
+
**Usage example**
|
|
49
|
+
|
|
48
50
|
```js
|
|
49
51
|
const createMediaPage = new StoryteqPlatform.createMediaPage(
|
|
50
52
|
'#element-to-spawn-into',
|
|
@@ -70,24 +72,25 @@ createMediaPage
|
|
|
70
72
|
|
|
71
73
|
### CRM Analytics page
|
|
72
74
|
|
|
73
|
-
|
|
75
|
+
**Usage example**
|
|
76
|
+
|
|
74
77
|
```js
|
|
75
78
|
const crmAnalyticsPage = new StoryteqPlatform.crmAnalyticsPage(
|
|
76
79
|
'#element-to-spawn-into',
|
|
77
80
|
'AUTH_TOKEN',
|
|
78
81
|
1000, // template ID,
|
|
79
|
-
1000
|
|
82
|
+
1000 // campaign ID,
|
|
80
83
|
);
|
|
81
84
|
|
|
82
|
-
crmAnalyticsPage
|
|
83
|
-
.on('loaded', () => console.log('loaded'));
|
|
85
|
+
crmAnalyticsPage.on('loaded', () => console.log('loaded'));
|
|
84
86
|
```
|
|
85
87
|
|
|
86
88
|
## Create Media form Advanced Configuration Options / UI customization
|
|
87
89
|
|
|
88
90
|
The integration supports additional configuration options that allows you to customize the media creation UI/UX.
|
|
89
91
|
|
|
90
|
-
|
|
92
|
+
**Advanced Configuration Example**
|
|
93
|
+
|
|
91
94
|
```js
|
|
92
95
|
const createMediaPage = new StoryteqPlatform.createMediaPage(
|
|
93
96
|
'#element-to-spawn-into',
|
|
@@ -106,6 +109,9 @@ const createMediaPage = new StoryteqPlatform.createMediaPage(
|
|
|
106
109
|
// creationType: 'batch', // if left empty, it will default to single media create form
|
|
107
110
|
ui: {
|
|
108
111
|
forceMediaPreviewBeforeCreate: 'always',
|
|
112
|
+
theme: {
|
|
113
|
+
primaryColor: '#33bc2c',
|
|
114
|
+
},
|
|
109
115
|
customizationItems: [
|
|
110
116
|
{
|
|
111
117
|
item: 'host_product_name',
|
|
@@ -134,7 +140,7 @@ const createMediaPage = new StoryteqPlatform.createMediaPage(
|
|
|
134
140
|
{
|
|
135
141
|
item: 'full_screen',
|
|
136
142
|
value: true
|
|
137
|
-
|
|
143
|
+
}
|
|
138
144
|
],
|
|
139
145
|
endScreenActions: [
|
|
140
146
|
{
|
|
@@ -159,12 +165,14 @@ createMediaPage
|
|
|
159
165
|
#### General configuration Attributes
|
|
160
166
|
|
|
161
167
|
##### mediaRecreateHash
|
|
168
|
+
|
|
162
169
|
\
|
|
163
|
-
By setting the value of
|
|
170
|
+
By setting the value of `mediaRecreateHash` to a media hash, all parameter values that was used to create this media will be directly applied in the media create form.
|
|
164
171
|
|
|
165
172
|
##### notifications
|
|
173
|
+
|
|
166
174
|
\
|
|
167
|
-
Optional parameter. An array of objects containing two string keys:
|
|
175
|
+
Optional parameter. An array of objects containing two string keys: `type` and `route`. `type` should be set to `'webhook'`, while `route` is the webhook url. When set, each time a media/creative has it's rendering status updated, the media body will be send to the webhook. Example:
|
|
168
176
|
|
|
169
177
|
```js
|
|
170
178
|
notifications: [
|
|
@@ -176,8 +184,9 @@ Optional parameter. An array of objects containing two string keys: ```type``` a
|
|
|
176
184
|
```
|
|
177
185
|
|
|
178
186
|
##### publish
|
|
187
|
+
|
|
179
188
|
\
|
|
180
|
-
Optional parameter. An array of objects containing two string keys:
|
|
189
|
+
Optional parameter. An array of objects containing two string keys: `type` and `variant`. `type` should be set to an connection driver type set up on your Storyteq workspace ie. `'google_drive'`, while `variant` is the desired render output, possible options are `video, image, banner`. Note that the variant must be supported by the publish driver, otherwise upload will fail. Example:
|
|
181
190
|
|
|
182
191
|
```js
|
|
183
192
|
publish: [
|
|
@@ -189,55 +198,78 @@ Optional parameter. An array of objects containing two string keys: ```type``` a
|
|
|
189
198
|
```
|
|
190
199
|
|
|
191
200
|
##### creationType
|
|
201
|
+
|
|
192
202
|
\
|
|
193
|
-
Optional parameter. Leaving it empty will result in spwaning the single media creation form. But by setting
|
|
203
|
+
Optional parameter. Leaving it empty will result in spwaning the single media creation form. But by setting `creationType` to the string value `batch`, you will instead spawn the batch creation form. This form allows you to create several media in one go.
|
|
194
204
|
|
|
195
205
|
#### UI Configuration Attributes
|
|
196
206
|
|
|
197
207
|
##### forceMediaPreviewBeforeCreate
|
|
208
|
+
|
|
198
209
|
\
|
|
199
|
-
For after effects template,
|
|
210
|
+
For after effects template, `forceMediaPreviewBeforeCreate` allows you to enforce the creation of a 'rich preview' before action creation/publishing can be made.
|
|
200
211
|
|
|
201
212
|
| Option (string) | Description |
|
|
202
|
-
|
|
213
|
+
| --------------- | ----------------------------------------------------------------------------------------- |
|
|
203
214
|
| always | Always enforce rich preview before creation, even after changes are applied |
|
|
204
215
|
| on_first_render | Only enforce rich preview once. Changing parameter values will not enforce a new preview. |
|
|
205
216
|
|
|
217
|
+
##### Theme Configuration
|
|
218
|
+
|
|
219
|
+
\
|
|
220
|
+
The `theme` configuration object allows you to define the primary visual aesthetic of the user interface, enabling you to customize its appearance to align with your brand or product preferences.
|
|
221
|
+
|
|
222
|
+
Possible configuration:
|
|
223
|
+
| Attribute | Description | Option(s) |
|
|
224
|
+
|--------------|-------------------------------------------------------------------------------------------|------------------|
|
|
225
|
+
| primaryColor | Specifies the primary color used in UI elements such as headers, buttons, and highlights. | Hex code (string)|
|
|
226
|
+
|
|
227
|
+
Example:
|
|
228
|
+
|
|
229
|
+
```typescript
|
|
230
|
+
theme: {
|
|
231
|
+
primaryColor: '#000000', // Set the primary theme color to black
|
|
232
|
+
}
|
|
233
|
+
```
|
|
234
|
+
|
|
206
235
|
##### customizationItems
|
|
236
|
+
|
|
207
237
|
\
|
|
208
|
-
|
|
238
|
+
`customizationItems` is an array of configuration objects which allow you to customize the general UI.
|
|
209
239
|
\
|
|
210
240
|
Possible configurations:
|
|
211
241
|
|
|
212
|
-
| Attribute
|
|
213
|
-
|
|
214
|
-
| host_product_name
|
|
215
|
-
| media_alias
|
|
216
|
-
| media_alias_plural
|
|
217
|
-
| batch_alias
|
|
218
|
-
| button_media_create
|
|
219
|
-
| end_screen_title
|
|
220
|
-
| end_screen_subtitle
|
|
221
|
-
| color_theme_hex
|
|
222
|
-
| full_screen
|
|
223
|
-
| cancelable
|
|
224
|
-
| show_end_screen_for_batches
|
|
225
|
-
| enable_create_more
|
|
226
|
-
| show_recreate_options_dialog| Show recreate/replace dialog | true/false (defaults to false) |
|
|
242
|
+
| Attribute | Description | Option(s) |
|
|
243
|
+
| ---------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------ |
|
|
244
|
+
| host_product_name | Name of your company/product | Free text (string) |
|
|
245
|
+
| media_alias | Alias of media/creative | Free text (string) |
|
|
246
|
+
| media_alias_plural | Alias of media/creative in plural form | Free text (string) |
|
|
247
|
+
| batch_alias | Alias of batch | Free text (string) |
|
|
248
|
+
| button_media_create | Media create button custom description/text | Free text (string) |
|
|
249
|
+
| end_screen_title | Title of the screen indicating a media or media batch has been created/published | Free text (string) |
|
|
250
|
+
| end_screen_subtitle | Subtitle of the screen indicating a media or media batch has been created/published | Free text (string) |
|
|
251
|
+
| color_theme_hex | Color theme of UI elements such as buttons, loading bars, etc. | Hex code (string) |
|
|
252
|
+
| full_screen | Choice of having the create form cover the whole screen or not | true/false |
|
|
253
|
+
| cancelable | Shows a cancel button on the create media form that will event a 'canceled' event when pressed | true/false (defaults to false) |
|
|
254
|
+
| show_end_screen_for_batches | Showing end screen dialog after creating a batch | true/false (defaults to false) |
|
|
255
|
+
| enable_create_more | Enables the "Create & Add More" button | true/false (defaults to false) |
|
|
256
|
+
| show_recreate_options_dialog | Show recreate/replace dialog | true/false (defaults to false) |
|
|
227
257
|
|
|
228
258
|
#### Create & Add More
|
|
259
|
+
|
|
229
260
|
Create & Add More functionality allows for creating additional assets after an asset has been created without having to re-open the asset create iframe.
|
|
230
261
|
This should not exit the iframe after an asset is created, but have the iframe remain open. This behaviour should differentiate between the regular create asset button, based on the willCreateMore property. willCreateMore is set to true or false in the created message. This separate behavior needs to be built before using the create more action can be fully supported by the integration.
|
|
231
262
|
|
|
232
263
|
##### endScreenActions
|
|
264
|
+
|
|
233
265
|
\
|
|
234
|
-
|
|
266
|
+
`endScreenActions` is an array of configuration objects that allows you to customize the UI of the 'end screen', by adding certain actions.
|
|
235
267
|
The end screen is what appears after you have initiated the creation/publishing of a media or media batch.
|
|
236
268
|
\
|
|
237
269
|
Possible configurations:
|
|
238
270
|
|
|
239
271
|
| Attribute/Action | Description | Option(s) |
|
|
240
|
-
|
|
272
|
+
| -------------------- | -------------------------------------------------------------------------- | --------------------------------- |
|
|
241
273
|
| create_another_media | By including this, a button will appear that allow you to recreate a media | Free text (string, inside button) |
|
|
242
274
|
| create_another_batch | By including this, a button will appear that allow you to recreate a batch | Free text (string, inside button) |
|
|
243
275
|
|
package/build/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","mappings":"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","sources":["webpack://@storyteq/platform-integration/webpack/universalModuleDefinition","webpack://@storyteq/platform-integration/external umd {\"commonjs\":\"lodash-es\",\"commonjs2\":\"lodash-es\",\"amd\":\"lodash-es\",\"root\":\"_\"}","webpack://@storyteq/platform-integration/webpack/bootstrap","webpack://@storyteq/platform-integration/webpack/runtime/define property getters","webpack://@storyteq/platform-integration/webpack/runtime/hasOwnProperty shorthand","webpack://@storyteq/platform-integration/webpack/runtime/make namespace object","webpack://@storyteq/platform-integration/./src/classes/BaseFrameController.ts","webpack://@storyteq/platform-integration/./src/get-frame-url.ts","webpack://@storyteq/platform-integration/./src/classes/CreateMediaPage.ts","webpack://@storyteq/platform-integration/./src/classes/CrmAnalyticsPage.ts"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"lodash-es\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"lodash-es\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"@storyteq/platform-integration\"] = factory(require(\"lodash-es\"));\n\telse\n\t\troot[\"@storyteq/platform-integration\"] = factory(root[\"_\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE__731__) {\nreturn ","module.exports = __WEBPACK_EXTERNAL_MODULE__731__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import { forEach, omit } from 'lodash-es';\nimport { getFrameUrl } from '../get-frame-url';\nimport { OneOf } from '../interfaces/one-of.interface';\n\nexport class BaseFrameController<T extends Array<string>> {\n private _url: URL;\n private _eventListeners: Array<{ event: string; cb: (data: unknown) => void }> = [];\n private _readyForToken = false;\n private _jwtToken: string;\n private _frame: HTMLIFrameElement;\n\n private _readyForTokenCb = () => {\n this._readyForToken = true;\n\n if (this._jwtToken) {\n this.setJwtToken(this._jwtToken);\n this._jwtToken = '';\n }\n };\n\n constructor(\n public readonly spawnElement: string,\n public readonly authToken: string | false,\n uri: string,\n config: string,\n public readonly availableEvents: T,\n extraSearchParams: Record<string, string> = {}\n ) {\n this._url = new URL(uri, getFrameUrl());\n\n const searchParams: Record<string, string> = {\n no_navigation: 'true',\n config: config,\n ...extraSearchParams,\n };\n\n if (authToken) {\n searchParams.auth_token = authToken;\n } else {\n searchParams.auth_via_message = '';\n\n this._eventListeners.push({ event: 'ready_for_token', cb: this._readyForTokenCb });\n }\n\n forEach(searchParams, (value: string, key: string) => {\n this._url.searchParams.set(key, value);\n });\n\n this._init();\n }\n\n private _init(): void {\n if (!['interactive', 'complete'].includes(document.readyState)) {\n document.addEventListener('readystatechange', () => {\n if (['interactive', 'complete'].includes(document.readyState)) this._spawn();\n });\n } else this._spawn();\n }\n\n private _spawn(): void {\n const iframe: HTMLIFrameElement = document.createElement('iframe');\n\n iframe.src = this._url.toString();\n iframe.style.width = '100%';\n iframe.style.height = '100%';\n iframe.style.position = 'absolute';\n iframe.style.border = 'none';\n\n const spawnElement: HTMLElement = document.querySelector(this.spawnElement);\n\n if (!spawnElement) {\n console.error(`[Storyteq platform integration] Failed to find target element ${this.spawnElement}`);\n }\n\n spawnElement.style.position = 'relative';\n spawnElement.appendChild(iframe);\n\n this._frame = iframe;\n\n this._initiatePageListeners();\n }\n\n private _receiveMessage = (e: MessageEvent) => {\n if (e.origin === this._url.origin) {\n try {\n const messagePayload = JSON.parse(e.data);\n\n this._eventListeners.forEach(({ event, cb }) => {\n const eventPayload = omit(messagePayload, ['event']);\n\n if (event === messagePayload.event) cb(eventPayload);\n });\n } catch (error) {\n console.error('[Storyteq platform integration] Failed to parse incoming frame message;', e.data);\n }\n }\n };\n\n private _initiatePageListeners(): void {\n window.addEventListener('message', this._receiveMessage, false);\n }\n\n public on(event: OneOf<T>, cb: (data: unknown) => void): this {\n if (!this.availableEvents.includes(event)) {\n console.error(`[Storyteq platform integration] Trying to listen to unsupported event \"${event}\"`);\n }\n\n this._eventListeners.push({\n event,\n cb,\n });\n\n return this;\n }\n\n public sendMessage(message: any): this {\n this._frame.contentWindow.postMessage(message, { targetOrigin: this._url.origin });\n\n return this;\n }\n\n public setJwtToken(token: string): this {\n if (!this._readyForToken) {\n this._jwtToken = token;\n } else {\n this.sendMessage({ type: 'JWT_TOKEN', token });\n }\n\n return this;\n }\n\n public destroy(): void {\n if (!this._frame) {\n return;\n }\n\n window.removeEventListener('message', this._receiveMessage);\n\n this._eventListeners = [];\n\n try {\n this._frame.parentElement.removeChild(this._frame);\n } catch (error) {}\n }\n}\n","export function getFrameUrl() {\n return window.APP_URL ?? 'https://platform.storyteq.com';\n}\n","import { BaseFrameController } from './BaseFrameController';\n\nexport const AVAILABLE_CREATE_MEDIA_EVENTS: ['loaded', 'created', 'batch-created', 'batch-loaded', 'canceled'] = [\n 'loaded',\n 'created',\n 'batch-created',\n 'batch-loaded',\n 'canceled',\n];\n\nexport interface ICreateMediaConfig {\n creationType?: 'batch' | 'batch-edit' | 'batch-copy';\n batchId?: number;\n publish?: Array<{ type: string; variant?: string; parameters?: Array<string> }>; // Upon rendering completion, publish to this channel\n notifications?: Array<{ type?: string; route?: string }>; // Will send a notification to the target route upon media status change with the full media object\n mediaRecreateHash?: string;\n ui?: {\n customizationItems?: Array<{ item: string; value: string | boolean }>;\n endScreenActions?: Array<{ action: string; value: string }>;\n forceMediaPreviewBeforeCreate?: 'on_first_render' | 'always';\n }; // Customize the UI\n batchUi?: {\n enableNameEdit?: boolean;\n }; // Customize the batch UI\n}\n\nexport class CreateMediaPage extends BaseFrameController<typeof AVAILABLE_CREATE_MEDIA_EVENTS> {\n constructor(\n spawnElement: string,\n STAuthToken: string | false,\n templateId: number,\n companyId: number,\n config: ICreateMediaConfig = {}\n ) {\n const page = `/integration`;\n\n super(spawnElement, STAuthToken, page, JSON.stringify(config), AVAILABLE_CREATE_MEDIA_EVENTS, {\n companyId: `${companyId}`,\n templateId: `${templateId}`,\n });\n }\n}\n","import { BaseFrameController } from './BaseFrameController';\n\nexport class CrmAnalyticsPage extends BaseFrameController<['loaded']> {\n constructor(spawnElement: string, STAuthToken: string | false, templateId: number, campaignId: number, config?) {\n const page = `/campaigns/${campaignId}/templates/${templateId}`;\n\n super(spawnElement, STAuthToken, page, JSON.stringify(config), ['loaded']);\n }\n}\n"],"names":["root","factory","exports","module","require","define","amd","this","__WEBPACK_EXTERNAL_MODULE__731__","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","BaseFrameController","constructor","spawnElement","authToken","uri","config","availableEvents","extraSearchParams","_eventListeners","_readyForToken","_readyForTokenCb","_jwtToken","setJwtToken","_receiveMessage","e","origin","_url","messagePayload","JSON","parse","data","forEach","event","cb","eventPayload","omit","error","console","URL","window","APP_URL","searchParams","no_navigation","auth_token","auth_via_message","push","set","_init","includes","document","readyState","_spawn","addEventListener","iframe","createElement","src","toString","style","width","height","position","border","querySelector","appendChild","_frame","_initiatePageListeners","on","sendMessage","message","contentWindow","postMessage","targetOrigin","token","type","destroy","removeEventListener","parentElement","removeChild","AVAILABLE_CREATE_MEDIA_EVENTS","CreateMediaPage","STAuthToken","templateId","companyId","super","stringify","CrmAnalyticsPage","campaignId"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"index.js","mappings":"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","sources":["webpack://@storyteq/platform-integration/webpack/universalModuleDefinition","webpack://@storyteq/platform-integration/external umd {\"commonjs\":\"lodash-es\",\"commonjs2\":\"lodash-es\",\"amd\":\"lodash-es\",\"root\":\"_\"}","webpack://@storyteq/platform-integration/webpack/bootstrap","webpack://@storyteq/platform-integration/webpack/runtime/define property getters","webpack://@storyteq/platform-integration/webpack/runtime/hasOwnProperty shorthand","webpack://@storyteq/platform-integration/webpack/runtime/make namespace object","webpack://@storyteq/platform-integration/./src/classes/BaseFrameController.ts","webpack://@storyteq/platform-integration/./src/get-frame-url.ts","webpack://@storyteq/platform-integration/./src/classes/CreateMediaPage.ts","webpack://@storyteq/platform-integration/./src/classes/CrmAnalyticsPage.ts"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"lodash-es\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"lodash-es\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"@storyteq/platform-integration\"] = factory(require(\"lodash-es\"));\n\telse\n\t\troot[\"@storyteq/platform-integration\"] = factory(root[\"_\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE__731__) {\nreturn ","module.exports = __WEBPACK_EXTERNAL_MODULE__731__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import { forEach, omit } from 'lodash-es';\nimport { getFrameUrl } from '../get-frame-url';\nimport { OneOf } from '../interfaces/one-of.interface';\n\nexport class BaseFrameController<T extends Array<string>> {\n private _url: URL;\n private _eventListeners: Array<{ event: string; cb: (data: unknown) => void }> = [];\n private _readyForToken = false;\n private _jwtToken: string;\n private _frame: HTMLIFrameElement;\n\n private _readyForTokenCb = () => {\n this._readyForToken = true;\n\n if (this._jwtToken) {\n this.setJwtToken(this._jwtToken);\n this._jwtToken = '';\n }\n };\n\n constructor(\n public readonly spawnElement: string,\n public readonly authToken: string | false,\n uri: string,\n config: string,\n public readonly availableEvents: T,\n extraSearchParams: Record<string, string> = {}\n ) {\n this._url = new URL(uri, getFrameUrl());\n\n const searchParams: Record<string, string> = {\n no_navigation: 'true',\n config: config,\n ...extraSearchParams,\n };\n\n if (authToken) {\n searchParams.auth_token = authToken;\n } else {\n searchParams.auth_via_message = '';\n\n this._eventListeners.push({ event: 'ready_for_token', cb: this._readyForTokenCb });\n }\n\n forEach(searchParams, (value: string, key: string) => {\n this._url.searchParams.set(key, value);\n });\n\n this._init();\n }\n\n private _init(): void {\n if (!['interactive', 'complete'].includes(document.readyState)) {\n document.addEventListener('readystatechange', () => {\n if (['interactive', 'complete'].includes(document.readyState)) this._spawn();\n });\n } else this._spawn();\n }\n\n private _spawn(): void {\n const iframe: HTMLIFrameElement = document.createElement('iframe');\n\n iframe.src = this._url.toString();\n iframe.style.width = '100%';\n iframe.style.height = '100%';\n iframe.style.position = 'absolute';\n iframe.style.border = 'none';\n\n const spawnElement: HTMLElement = document.querySelector(this.spawnElement);\n\n if (!spawnElement) {\n console.error(`[Storyteq platform integration] Failed to find target element ${this.spawnElement}`);\n }\n\n spawnElement.style.position = 'relative';\n spawnElement.appendChild(iframe);\n\n this._frame = iframe;\n\n this._initiatePageListeners();\n }\n\n private _receiveMessage = (e: MessageEvent) => {\n if (e.origin === this._url.origin) {\n try {\n const messagePayload = JSON.parse(e.data);\n\n this._eventListeners.forEach(({ event, cb }) => {\n const eventPayload = omit(messagePayload, ['event']);\n\n if (event === messagePayload.event) cb(eventPayload);\n });\n } catch (error) {\n console.error('[Storyteq platform integration] Failed to parse incoming frame message;', e.data);\n }\n }\n };\n\n private _initiatePageListeners(): void {\n window.addEventListener('message', this._receiveMessage, false);\n }\n\n public on(event: OneOf<T>, cb: (data: unknown) => void): this {\n if (!this.availableEvents.includes(event)) {\n console.error(`[Storyteq platform integration] Trying to listen to unsupported event \"${event}\"`);\n }\n\n this._eventListeners.push({\n event,\n cb,\n });\n\n return this;\n }\n\n public sendMessage(message: any): this {\n this._frame.contentWindow.postMessage(message, { targetOrigin: this._url.origin });\n\n return this;\n }\n\n public setJwtToken(token: string): this {\n if (!this._readyForToken) {\n this._jwtToken = token;\n } else {\n this.sendMessage({ type: 'JWT_TOKEN', token });\n }\n\n return this;\n }\n\n public destroy(): void {\n if (!this._frame) {\n return;\n }\n\n window.removeEventListener('message', this._receiveMessage);\n\n this._eventListeners = [];\n\n try {\n this._frame.parentElement.removeChild(this._frame);\n } catch (error) {}\n }\n}\n","export function getFrameUrl() {\n return window.APP_URL ?? 'https://platform.storyteq.com';\n}\n","import { BaseFrameController } from './BaseFrameController';\n\nexport const AVAILABLE_CREATE_MEDIA_EVENTS: ['loaded', 'created', 'batch-created', 'batch-loaded', 'canceled'] = [\n 'loaded',\n 'created',\n 'batch-created',\n 'batch-loaded',\n 'canceled',\n];\n\nexport interface ICreateMediaConfig {\n creationType?: 'batch' | 'batch-edit' | 'batch-copy';\n batchId?: number;\n publish?: Array<{ type: string; variant?: string; parameters?: Array<string> }>; // Upon rendering completion, publish to this channel\n notifications?: Array<{ type?: string; route?: string }>; // Will send a notification to the target route upon media status change with the full media object\n mediaRecreateHash?: string;\n ui?: {\n customizationItems?: Array<{ item: string; value: string | boolean }>;\n endScreenActions?: Array<{ action: string; value: string }>;\n forceMediaPreviewBeforeCreate?: 'on_first_render' | 'always';\n theme?: {\n primaryColor?: string;\n };\n }; // Customize the UI\n batchUi?: {\n enableNameEdit?: boolean;\n }; // Customize the batch UI\n}\n\nexport class CreateMediaPage extends BaseFrameController<typeof AVAILABLE_CREATE_MEDIA_EVENTS> {\n constructor(\n spawnElement: string,\n STAuthToken: string | false,\n templateId: number,\n companyId: number,\n config: ICreateMediaConfig = {}\n ) {\n const page = `/integration`;\n\n super(spawnElement, STAuthToken, page, JSON.stringify(config), AVAILABLE_CREATE_MEDIA_EVENTS, {\n companyId: `${companyId}`,\n templateId: `${templateId}`,\n });\n }\n}\n","import { BaseFrameController } from './BaseFrameController';\n\nexport class CrmAnalyticsPage extends BaseFrameController<['loaded']> {\n constructor(spawnElement: string, STAuthToken: string | false, templateId: number, campaignId: number, config?) {\n const page = `/campaigns/${campaignId}/templates/${templateId}`;\n\n super(spawnElement, STAuthToken, page, JSON.stringify(config), ['loaded']);\n }\n}\n"],"names":["root","factory","exports","module","require","define","amd","this","__WEBPACK_EXTERNAL_MODULE__731__","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","BaseFrameController","constructor","spawnElement","authToken","uri","config","availableEvents","extraSearchParams","_eventListeners","_readyForToken","_readyForTokenCb","_jwtToken","setJwtToken","_receiveMessage","e","origin","_url","messagePayload","JSON","parse","data","forEach","event","cb","eventPayload","omit","error","console","URL","window","APP_URL","searchParams","no_navigation","auth_token","auth_via_message","push","set","_init","includes","document","readyState","_spawn","addEventListener","iframe","createElement","src","toString","style","width","height","position","border","querySelector","appendChild","_frame","_initiatePageListeners","on","sendMessage","message","contentWindow","postMessage","targetOrigin","token","type","destroy","removeEventListener","parentElement","removeChild","AVAILABLE_CREATE_MEDIA_EVENTS","CreateMediaPage","STAuthToken","templateId","companyId","super","stringify","CrmAnalyticsPage","campaignId"],"sourceRoot":""}
|