@keepeek/keepicker-react 1.1.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.
- package/README.md +120 -0
- package/dist/index.js +2 -0
- package/dist/license.txt +97 -0
- package/package.json +163 -0
package/README.md
ADDED
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
# Integration
|
|
2
|
+
|
|
3
|
+
## Steps to use the Keepicker
|
|
4
|
+
|
|
5
|
+
1 - Import the JavaScript file registering kpk-keepicker web component :
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<head>
|
|
9
|
+
<script async src="keepicker.js"></script>
|
|
10
|
+
</head>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
2 - Add the web component tag in the DOM :
|
|
14
|
+
|
|
15
|
+
```html
|
|
16
|
+
<body>
|
|
17
|
+
<kpk-keepicker
|
|
18
|
+
id="keepicker"
|
|
19
|
+
keycloak-url="XXX"
|
|
20
|
+
keycloak-realm="XXX"
|
|
21
|
+
keycloak-client-id="XXX"
|
|
22
|
+
api-endpoint="XXX"
|
|
23
|
+
data-locale="FR"
|
|
24
|
+
ui-locale="FR"
|
|
25
|
+
></kpk-keepicker>
|
|
26
|
+
</body>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
3 - Add a callback that will be triggered when selecting an asset :
|
|
30
|
+
|
|
31
|
+
```html
|
|
32
|
+
<script>
|
|
33
|
+
document
|
|
34
|
+
.querySelector("#keepicker")
|
|
35
|
+
.addEventListener("kpk-insert", (event) => {
|
|
36
|
+
console.log(event.detail.element);
|
|
37
|
+
});
|
|
38
|
+
</script>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Examples
|
|
42
|
+
|
|
43
|
+
### React
|
|
44
|
+
|
|
45
|
+
```jsx
|
|
46
|
+
function App() {
|
|
47
|
+
const ref = useRef();
|
|
48
|
+
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
if (ref && ref.current) {
|
|
51
|
+
const currentRef = ref.current;
|
|
52
|
+
const handleInsert = (event) => console.log(event.detail.element);
|
|
53
|
+
currentRef.addEventListener("kpk-insert", handleInsert);
|
|
54
|
+
return () => {
|
|
55
|
+
currentRef.removeEventListener("kpk-insert", handleInsert);
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
}, []);
|
|
59
|
+
return (
|
|
60
|
+
<div className="App">
|
|
61
|
+
<kpk-keepicker
|
|
62
|
+
ref={ref}
|
|
63
|
+
keycloak-url="XXX"
|
|
64
|
+
keycloak-realm="XXX"
|
|
65
|
+
keycloak-client-id="XXX"
|
|
66
|
+
api-endpoint="XXX"
|
|
67
|
+
data-locale="FR"
|
|
68
|
+
ui-locale="FR"
|
|
69
|
+
></kpk-keepicker>
|
|
70
|
+
</div>
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### Drupal form
|
|
76
|
+
|
|
77
|
+
To integrate component in a form, add a container :
|
|
78
|
+
|
|
79
|
+
```jsx
|
|
80
|
+
$form['container']['picker'] = [
|
|
81
|
+
'#type' => 'container',
|
|
82
|
+
'#attributes' => array('id'=>'kpk-keepicker-container'),
|
|
83
|
+
];
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
Add a behaviour to mount web component :
|
|
87
|
+
|
|
88
|
+
```jsx
|
|
89
|
+
Drupal.behaviors.addKeepickerWebComponentMarkup = {
|
|
90
|
+
attach: function (context) {
|
|
91
|
+
if (context.id === "node-article-edit-form") {
|
|
92
|
+
document.querySelector("#kpk-keepicker-container").innerHTML =
|
|
93
|
+
'<kpk-keepicker id="keepicker" keycloak-url="XXX" keycloak-realm="XXX" keycloak-client-id="XXX" api-endpoint="XXX" data-locale="FR" ui-locale="FR"></kpk-keepicker>';
|
|
94
|
+
document
|
|
95
|
+
.querySelector("#keepicker")
|
|
96
|
+
.addEventListener("kpk-insert", (event) => {
|
|
97
|
+
document.querySelector(".keepicker-url").value =
|
|
98
|
+
event.detail.element.previewUrl;
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
};
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
## List of attributes
|
|
106
|
+
|
|
107
|
+
| Name | Madatory | Type | Default value | Description |
|
|
108
|
+
| ------------------ | -------- | ------ | ------------- | ------------------ |
|
|
109
|
+
| keycloak-url | yes | String | | Keycloak URL |
|
|
110
|
+
| keycloak-realm | yes | String | | Keycloak Realm |
|
|
111
|
+
| keycloak-client-id | yes | String | | Keycloak Client ID |
|
|
112
|
+
| api-endpoint | yes | String | | API Endpoint |
|
|
113
|
+
| data-locale | no | String | FR | Data locale |
|
|
114
|
+
| ui-locale | no | String | FR | Interface locale |
|
|
115
|
+
|
|
116
|
+
## List of events
|
|
117
|
+
|
|
118
|
+
| Name | Description |
|
|
119
|
+
| ---------- | ------------------------------------------ |
|
|
120
|
+
| kpk-insert | Event dispached when inserting one element |
|