@keepeek/keepicker-react v1.11.0
Integration
Steps to use the Keepicker
Import the JavaScript file registering kpk-keepicker web component:
<head>
<script
async
src="https://cdn.jsdelivr.net/npm/@keepeek/keepicker-react@1/dist/index.js"
></script>
</head>
Add the web component tag in the DOM:
<body>
<kpk-keepicker
id="keepicker"
keycloak-client-id="XXX"
api-endpoint="XXX"
data-locale="FR"
ui-locale="FR"
></kpk-keepicker>
</body>
Add a callback that will be triggered when selecting an asset:
<script>
document
.querySelector("#keepicker")
.addEventListener("kpk-insert", (event) => {
console.log(event.detail);
});
document
.querySelector("#keepicker")
.addEventListener("kpk-insert-link", (event) => {
console.log(event.detail);
});
</script>
Use the events to insert content
Keepicker events are triggered for all asset types: pictures, videos, audio files, documents and other assets. Below are some examples of event content.
Event for a picture
kpk-insert
event detail will contain the following JSON content for a picture:
{
"element": {
"id": 123,
"title": {
"id": "title",
"type": "TEXT",
"name": "Title",
"value": "Media title"
},
"originalFileName": "123.jpg",
"previewUrl": "https://keepeek.com/previewUrl.jpg",
"fields": [
{
"id": "title",
"type": "TEXT",
"name": "Title",
"value": "Media title"
},
{ "id": "...", "type": "...", "name": "...", "value": "..." }
],
"permalinks": [
{
"title": "whr",
"description": "...",
"url": "https://keepeek.com/permanentPreviewUrl.jpg"
},
{
"title": "...",
"description": "...",
"url": "..."
}
],
"...": "..."
}
}
To get a picture, use the following code:
const url = event.detail.element.permalinks.find(
(permalink) => permalink.title === "whr"
)?.url;
Event for a video
kpk-insert
event detail will contain the following JSON content for a video:
{
"element": {
"id": 123,
"title": {
"id": "title",
"type": "TEXT",
"name": "Title",
"value": "Media title"
},
"previewUrl": "https://keepeek.com/previewUrl.jpg",
"fields": [
{
"id": "title",
"type": "TEXT",
"name": "Title",
"value": "Media title"
},
{
"id": "...",
"type": "...",
"name": "...",
"value": "..."
}
],
"mediaType": "video/mp4",
"permalinks": [
{
"title": "preview",
"description": "...",
"url": "https://keepeek.com/permanentPreviewVideo.mp4"
},
{
"title": "...",
"description": "...",
"url": "..."
}
],
"...": "..."
}
}
To get preview video, use the following code:
const url = event.detail.element.permalinks.find(
(permalink) => permalink.title === "preview"
)?.url;
Event for a generated picture
kpk-insert-link
event detail will contain the following JSON content for a generated picture:
{
"element": {
"id": 123,
"title": {
"id": "title",
"type": "TEXT",
"name": "Title",
"value": "Media title"
},
"fields": [
{
"id": "title",
"type": "TEXT",
"name": "Title",
"value": "Media title"
},
{
"id": "...",
"type": "...",
"name": "...",
"value": "..."
}
],
"permalinks": [
{
"title": "...",
"description": "...",
"url": "..."
}
],
"...": "..."
},
"link": "https://keepeek.com/generatedPictureUrl.jpg"
}
To get generated picture, use the following code:
const url = event.detail.link;
Examples
React
function App() {
const ref = useRef();
useEffect(() => {
if (ref && ref.current) {
const currentRef = ref.current;
const handleInsert = (event) => console.log(event.detail.element);
currentRef.addEventListener("kpk-insert", handleInsert);
return () => {
currentRef.removeEventListener("kpk-insert", handleInsert);
};
}
}, []);
return (
<div className="App">
<kpk-keepicker
ref={ref}
keycloak-client-id="XXX"
api-endpoint="XXX"
data-locale="FR"
ui-locale="FR"
></kpk-keepicker>
</div>
);
}
Drupal form
To integrate component in a form, add a container:
$form['container']['picker'] = [
'#type' => 'container',
'#attributes' => array('id'=>'kpk-keepicker-container'),
];
Add a behaviour to mount web component:
Drupal.behaviors.addKeepickerWebComponentMarkup = {
attach: function (context) {
if (context.id === "node-article-edit-form") {
document.querySelector("#kpk-keepicker-container").innerHTML =
'<kpk-keepicker id="keepicker" keycloak-client-id="XXX" api-endpoint="XXX" data-locale="FR" ui-locale="FR"></kpk-keepicker>';
document
.querySelector("#keepicker")
.addEventListener("kpk-insert", (event) => {
document.querySelector(".keepicker-url").value =
event.detail.element.previewUrl;
});
}
},
};
List of attributes
Name | Mandatory | Type | Default value | Description |
---|---|---|---|---|
api-endpoint | no | String | API EndpointIf not provided, the user will need to enter the Keepeek instance URL to connect | |
keycloak-client-id | no | String | Default Keepicker Client ID | Keycloak Client ID |
keycloak-idp | no | String | FR | Keycloak IDP to add a SSO button |
data-locale | no | String | FR | Data locale |
ui-locale | no | String | FR | Interface locale |
List of events
Name | Description |
---|---|
kpk-insert | Event dispached when inserting one element |
kpk-insert-link | Event dispached when inserting a generated picture |
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
12 months ago
12 months ago
1 year ago
12 months ago
1 year ago
1 year ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
10 months ago
10 months ago
11 months ago
11 months ago
10 months ago
10 months ago
10 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago