@keepeek/keepicker-react 1.6.0 → 1.8.0

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