@keepeek/keepicker-react 1.6.0-beta.2 → 1.6.0-beta.20

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.
Files changed (4) hide show
  1. package/README.md +173 -10
  2. package/dist/index.js +2 -2
  3. package/dist/license.txt +10 -2
  4. package/package.json +36 -36
package/README.md CHANGED
@@ -1,8 +1,9 @@
1
1
  # Integration
2
2
 
3
+
3
4
  ## Steps to use the Keepicker
4
5
 
5
- 1 - Import the JavaScript file registering kpk-keepicker web component:
6
+ ### Import the JavaScript file registering kpk-keepicker web component:
6
7
 
7
8
  ```html
8
9
  <head>
@@ -13,7 +14,7 @@
13
14
  </head>
14
15
  ```
15
16
 
16
- 2 - Add the web component tag in the DOM:
17
+ ### Add the web component tag in the DOM:
17
18
 
18
19
  ```html
19
20
  <body>
@@ -27,18 +28,179 @@
27
28
  </body>
28
29
  ```
29
30
 
30
- 3 - Add a callback that will be triggered when selecting an asset:
31
+ ### Add a callback that will be triggered when selecting an asset:
31
32
 
32
33
  ```html
33
34
  <script>
34
35
  document
35
36
  .querySelector("#keepicker")
36
37
  .addEventListener("kpk-insert", (event) => {
37
- console.log(event.detail.element);
38
+ console.log(event.detail);
39
+ });
40
+ document
41
+ .querySelector("#keepicker")
42
+ .addEventListener("kpk-insert-link", (event) => {
43
+ console.log(event.detail);
38
44
  });
39
45
  </script>
40
46
  ```
41
47
 
48
+ ### Use the events to insert content
49
+
50
+ Keepicker events are triggered for all asset types: pictures, videos, audio files, documents and other assets. Below are some examples of event content.
51
+
52
+ #### Event for a picture
53
+
54
+ `kpk-insert` event detail will contain the following JSON content for a picture:
55
+
56
+ ```json
57
+ {
58
+ "element": {
59
+ "id": 123,
60
+ "title": {
61
+ "id": "title",
62
+ "type": "TEXT",
63
+ "name": "Title",
64
+ "value": "Media title"
65
+ },
66
+ "originalFileName": "123.jpg",
67
+ "previewUrl": "https://keepeek.com/previewUrl.jpg",
68
+ "fields": [
69
+ {
70
+ "id": "title",
71
+ "type": "TEXT",
72
+ "name": "Title",
73
+ "value": "Media title"
74
+ },
75
+ { "id": "...", "type": "...", "name": "...", "value": "..." }
76
+ ],
77
+ "permalinks": [
78
+ {
79
+ "title": "whr",
80
+ "description": "...",
81
+ "url": "https://keepeek.com/permanentPreviewUrl.jpg"
82
+ },
83
+ {
84
+ "title": "...",
85
+ "description": "...",
86
+ "url": "..."
87
+ }
88
+ ],
89
+ "...": "..."
90
+ }
91
+ }
92
+ ```
93
+
94
+ To get a picture, use the following code:
95
+
96
+ ```js
97
+ const url = event.detail.element.permalinks.find(
98
+ (permalink) => permalink.title === "whr"
99
+ )?.url;
100
+ ```
101
+
102
+ #### Event for a video
103
+
104
+ `kpk-insert` event detail will contain the following JSON content for a video:
105
+
106
+ ```json
107
+ {
108
+ "element": {
109
+ "id": 123,
110
+ "title": {
111
+ "id": "title",
112
+ "type": "TEXT",
113
+ "name": "Title",
114
+ "value": "Media title"
115
+ },
116
+ "previewUrl": "https://keepeek.com/previewUrl.jpg",
117
+ "fields": [
118
+ {
119
+ "id": "title",
120
+ "type": "TEXT",
121
+ "name": "Title",
122
+ "value": "Media title"
123
+ },
124
+ {
125
+ "id": "...",
126
+ "type": "...",
127
+ "name": "...",
128
+ "value": "..."
129
+ }
130
+ ],
131
+ "mediaType": "video/mp4",
132
+ "permalinks": [
133
+ {
134
+ "title": "preview",
135
+ "description": "...",
136
+ "url": "https://keepeek.com/permanentPreviewVideo.mp4"
137
+ },
138
+ {
139
+ "title": "...",
140
+ "description": "...",
141
+ "url": "..."
142
+ }
143
+ ],
144
+ "...": "..."
145
+ }
146
+ }
147
+ ```
148
+
149
+ To get preview video, use the following code:
150
+
151
+ ```js
152
+ const url = event.detail.element.permalinks.find(
153
+ (permalink) => permalink.title === "preview"
154
+ )?.url;
155
+ ```
156
+
157
+ #### Event for a generated picture
158
+
159
+ `kpk-insert-link` event detail will contain the following JSON content for a generated picture:
160
+
161
+ ```json
162
+ {
163
+ "element": {
164
+ "id": 123,
165
+ "title": {
166
+ "id": "title",
167
+ "type": "TEXT",
168
+ "name": "Title",
169
+ "value": "Media title"
170
+ },
171
+ "fields": [
172
+ {
173
+ "id": "title",
174
+ "type": "TEXT",
175
+ "name": "Title",
176
+ "value": "Media title"
177
+ },
178
+ {
179
+ "id": "...",
180
+ "type": "...",
181
+ "name": "...",
182
+ "value": "..."
183
+ }
184
+ ],
185
+ "permalinks": [
186
+ {
187
+ "title": "...",
188
+ "description": "...",
189
+ "url": "..."
190
+ }
191
+ ],
192
+ "...": "..."
193
+ },
194
+ "link": "https://keepeek.com/generatedPictureUrl.jpg"
195
+ }
196
+ ```
197
+
198
+ To get generated picture, use the following code:
199
+
200
+ ```js
201
+ const url = event.detail.link;
202
+ ```
203
+
42
204
  ## Examples
43
205
 
44
206
  ### React
@@ -103,12 +265,13 @@ Drupal.behaviors.addKeepickerWebComponentMarkup = {
103
265
 
104
266
  ## List of attributes
105
267
 
106
- | Name | Madatory | Type | Default value | Description |
107
- | ------------------ | -------- | ------ | ------------------------------- | ------------------------------------ |
108
- | api-endpoint | yes | String | | API Endpoint |
109
- | keycloak-client-id | no | String | Default Keepicker Client ID | Keycloak Client ID |
110
- | data-locale | no | String | FR | Data locale |
111
- | ui-locale | no | String | FR | Interface locale |
268
+ | Name | Mandatory | Type | Default value | Description |
269
+ | ------------------ | --------- | ------ | --------------------------- | -------------------------------- |
270
+ | api-endpoint | yes | String | | API Endpoint |
271
+ | keycloak-client-id | no | String | Default Keepicker Client ID | Keycloak Client ID |
272
+ | keycloak-idp | no | String | FR | Keycloak IDP to add a SSO button |
273
+ | data-locale | no | String | FR | Data locale |
274
+ | ui-locale | no | String | FR | Interface locale |
112
275
 
113
276
  ## List of events
114
277