<head>
<script
async
src="https://cdn.jsdelivr.net/npm/@keepeek/keepicker-react@1/dist/index.js"
></script>
</head>
<body>
<kpk-keepicker
id="keepicker"
keycloak-client-id="XXX"
api-endpoint="XXX"
data-locale="FR"
ui-locale="FR"
></kpk-keepicker>
</body>
<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>
Keepicker events are triggered for all asset types: pictures, videos, audio files, documents and other assets. Below are some examples of event content.
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;
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;
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;
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>
);
}
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;
});
}
},
};
Name | Mandatory | Type | Default value | Description |
---|---|---|---|---|
api-endpoint | no | String | API Endpoint If 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 |
Name | Description |
---|---|
kpk-insert | Event dispached when inserting one element |
kpk-insert-link | Event dispached when inserting a generated picture |