You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+2Lines changed: 2 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,6 +13,7 @@
13
13
*[Quick Actions API](docs/quick_actions.md)
14
14
*[API References](docs/api_ref.md)
15
15
*[Customization](docs/customization.md)
16
+
*[Sample](sample/README.md)
16
17
#
17
18
18
19
CC Everywhere SDK is an easy-to-integrate, customizable, all-in-one JavaScript library that brings CC Express (CCX) capabilities to all applications. Designed to support web (and in the future, mobile) platforms, over time it will include live template generation and other modular building blocks for content-first, task-based creative tooling drawn from CCX.
@@ -54,6 +55,7 @@ After the user launches the CCX editor component upon any user interaction you s
54
55
* Reverse Video
55
56
* Trim Video
56
57
58
+
Read more about the Quick Actions API [here](docs/quick_actions.md).
-[NativeExportButton: Render a Native Button](#nativeexportbutton-render-a-native-button)
24
23
-[Example](#example)
25
24
-[ModalParams](#modalparams)
@@ -179,7 +178,7 @@ An Asset type has three properties:
179
178
180
179
| Property | Value(s)
181
180
|:-- | :--
182
-
| type | 'image' or 'video'
181
+
| type | 'image'
183
182
| dataType | 'base64'
184
183
| data | string (base 64 representation of output)
185
184
@@ -188,7 +187,7 @@ An Asset type has three properties:
188
187
An OutputAsset type has an additional property, and 2 optional properties.
189
188
| Property | Value(s)
190
189
|:-- | :--
191
-
| type | 'image' or 'video'
190
+
| type | 'image'
192
191
| dataType | 'base64'
193
192
| data | string (base 64 representation of output)
194
193
| fileType | 'jpeg', 'pdf', 'png', 'mp4'
@@ -261,38 +260,22 @@ Allows you to specify the project ID the target application (CCX Editor Componen
261
260
262
261
---
263
262
## ExportOption
264
-
This interface describes the base object for export buttons and groups. Allows you to define export buttons and groups for a Quick Action. All the properties are optional.
263
+
Allows you to define export buttons and groups for a Quick Action. All the properties are optional. Must be specified in [QuickActionsInputParams](#quickactioninputparams) - it can be an empty array.
265
264
266
265
267
266
### ExportButton
268
-
This interface describes the base object that is used to render a button once the quick action has completed the action.
267
+
This interface describes the base object that is used to render a button once the quick action has completed the action.
268
+
269
269
| Property | Value | Description
270
270
| :-- | :--|:--
271
271
|optionType| "button" | QA renders single standalone button
272
-
|label| string | Export label name
272
+
|[label](#label)| string | Export label name
273
273
|variant | "cta"/"primary"/"secondary" | Defines the [style](https://spectrum.adobe.com/page/button/) of a button.
274
-
| buttonType | 'custom' or 'native' | Type of export button ([Custom](#customexportbutton-custom-button-clicks)/[Native](#nativeexportbutton-render-a-native-button))
274
+
| buttonType | 'native' | Type of export button ([Native](#nativeexportbutton-render-a-native-button))
275
275
| optionType | 'button' | Type of ExportOption
276
276
277
-
### ExportButtonGroup
278
-
This interface describes the object that is used to render a group of buttons which will be shown as a drop down under a parent button.
|variant | "cta"/"primary"/"secondary" | Defines the [style](https://spectrum.adobe.com/page/button/) of a button.
284
-
| buttons | array of [ExportButton](#export-button) | List of buttons under a dropdown menu
285
-
286
-
287
-
### CustomExportButton: Custom Button Clicks
288
-
289
-
This interface describes an object that is used to render a custom button once the quick action has completed the action. On button click, the id will be passed back in the `onPublish` callback, along with the asset data.
290
-
| Property | Value | Description
291
-
| :-- | :--|:--
292
-
|id| string | ID of the export button
293
-
|label| string | Localized text of the export button
294
-
|target | 'Host' | Used to render a custom button. Currently only 'Host'.
295
-
| buttonType | 'custom' | Type of button
277
+
#### __label__
278
+
"label" defaults to "Customize" when the target is "Editor" and "Download" when the target is "Download".
296
279
297
280
### NativeExportButton: Render a Native Button
298
281
@@ -303,29 +286,16 @@ This interface describes an object that is used to render a native button once t
303
286
| | 'new' | QA handles button click in a new tab/window
304
287
|target | 'Download' | On click will download the asset
305
288
| | 'Editor' | On click will open the asset in CCX
306
-
| buttonType | 'custom' | Type of button
289
+
| buttonType | 'native' | Type of button
307
290
308
291
### Example
309
292
```
310
293
const exportOptions = [
311
-
// EXPORT BUTTON GROUP
312
-
{
313
-
label: 'Open In',
314
-
optionType: 'group',
315
-
variant: 'cta',
316
-
buttons: [
317
-
{
318
-
target: "Editor",
319
-
label: "Express",
320
-
buttonType: "native",
321
-
optionType: "button"
322
-
},]
323
-
},
324
-
/** target: allows the Quick Task to determine type of export */
294
+
295
+
** target: allows the Quick Task to determine type of export */
325
296
{
326
-
target: 'Host',
327
-
id: '@id/random',
328
-
label: 'Save in Your App',
297
+
// Customize in Express button
298
+
target: 'Editor',
329
299
variant: 'cta',
330
300
optionType: 'button',
331
301
buttonType: 'custom'
@@ -364,15 +334,16 @@ Allows you to specify the asset and export buttons/groups you want to perform a
Copy file name to clipboardExpand all lines: docs/create_project.md
+53-51Lines changed: 53 additions & 51 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,17 +1,18 @@
1
1
# Creating a Project
2
2
## Table of Contents
3
-
*[Overview](README.md)
3
+
*[Overview](../README.md)
4
4
* Get Started
5
-
*[Configuration](docs/configuration.md)
6
-
*[Local Development](docs/local_dev.md)
7
-
*[Quick Start](docs/quickstart.md)
5
+
*[Configuration](configuration.md)
6
+
*[Local Development](local_dev.md)
7
+
*[Quick Start](quickstart.md)
8
8
* SDK Components
9
9
* CCX Editor Component
10
-
*[Create Project API](docs/create_project.md)
11
-
*[Open Project API](docs/edit_project.md)
12
-
*[Quick Actions API](docs/quick_actions.md)
13
-
*[API References](docs/api_ref.md)
14
-
*[Customization](docs/customization.md)
10
+
*[Create Project API](create_project.md)
11
+
*[Open Project API](edit_project.md)
12
+
*[Quick Actions API](quick_actions.md)
13
+
*[API References](api_ref.md)
14
+
*[Customization](customization.md)
15
+
*[Sample](../sample/README.md)
15
16
#
16
17
## Create Project in CCX Editor: Create Project API
17
18
Users can launch a new project in a CCX editor, using the Create Project API. The CCEverywhere Object exposes this API with the `createDesign()` method.
@@ -26,7 +27,7 @@ This function creates a new design using CCEverywhere and takes an object of par
26
27
*[modalParams](api_ref.md#modalparams): determines size of CCX editor modal
console.error('Error received is', err.toString());
101
-
},
102
-
};
87
+
createButton.onclick = () => {
88
+
const createDesignCallback = {
89
+
onCancel: () => {},
90
+
onPublish: (publishParams) => {
91
+
/* User clicked "Save"
92
+
Save image data to render in sample
93
+
Save projectId for editing later */
94
+
const localData = {
95
+
project: publishParams.projectId,
96
+
image: publishParams.asset.data
97
+
};
98
+
imageContainer.src = localData.image;
99
+
projectId = localData.project;
100
+
},
101
+
onError: (err) => {
102
+
console.error('Error received is', err.toString());
103
+
},
104
+
};
103
105
104
-
ccEverywhere.createDesign(
105
-
{
106
-
callbacks: createDesignCallback
107
-
}
108
-
);
109
-
}
106
+
ccEverywhere.createDesign(
107
+
{
108
+
callbacks: createDesignCallback
109
+
}
110
+
);
111
+
}
110
112
</script>
111
113
</body>
112
114
</html>
113
115
```
114
116
__Notes__:
115
117
- When `onPublish` is called, we save the project ID in a global variable `projectId` so we can use it to modify the same project later.
116
-
- "savedDesign" is the ID of an image element, and its source tag is updated to reflect user's project creations and edits. "createDesign" is the ID of a button element, and click events on this button launch the editor.
118
+
- "imageContainer" is the ID of an image element, and its source tag is updated to reflect user's project creations and edits. "create-project-button" is the ID of a button element, and click events on this button launch the editor.
117
119
118
120
119
121
Now that you have created a project and rendered the final design onto your own page, let's explore the [Open Project API](edit_project.md) to see how you can launch the editor to make changes to existing projects.
0 commit comments