Skip to content

Commit 76bc6cf

Browse files
olivier3lancolivier3lanc
committed
[FEAT] v0.2.0 + doc
1 parent 68a9fd1 commit 76bc6cf

File tree

9 files changed

+1028
-241
lines changed

9 files changed

+1028
-241
lines changed

‎README.md‎

Lines changed: 432 additions & 0 deletions
Large diffs are not rendered by default.

‎content/example-custom-file-template.md‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
---
2+
title: Template fichier personnalisé
3+
description: Personnalisation de la présentation de la sélection des fichiers
4+
layout: libdoc/page-split
5+
category: Exemples
6+
order: 40
7+
---
8+
9+
```html
10+
<label for="first">Template fichier nommé "foo"</label>
11+
<input type="file" id="first" multiple>
12+
<div data-cpreview="first" data-cpreview-template-file="foo" class="c-dis m-flex m-gap-3 m-wrap"></div>
13+
```
14+
{:.playground title="Template fichier personnalisé"}
15+
16+
Quand l'attribut `data-cpreview-template-file="TOKEN_TEMPLATE_FILE"` est renseigné, cPreview invoque `cPreviewTemplates[TOKEN_TEMPLATE_FILE]` et l'utilise pour générer le HTML du template fichiers sélectionnés.
17+
18+
Pour ajouter un template de fichiers, ajouter une méthode dans l'objet `cPreviewTemplates.file[TOKEN_NOM_DU NOUVEAU_TEMPLATE]`, sur la base de l'exemple suivant:
19+
20+
```javascript
21+
// cPreview Templates optionnels
22+
let cPreviewTemplates = {
23+
file: {
24+
/**
25+
* CUSTOM TEMPLATE FOR FILE ITEM
26+
* @param {Object} data
27+
* @param {Object} data.el_target_container DOM element if the file item
28+
* @param {Object} data.e Reader onload event
29+
* @param {Object} data.el_file File List element
30+
*/
31+
foo: function(data) {
32+
// Create blob
33+
const blob_url = URL.createObjectURL(data.el_file);
34+
// Create thumb item
35+
const el_item = document.createElement('div');
36+
el_item.setAttribute('class', 'c-dis m-flex m-column m-main-space-between m-gap-3 c-dim m-o-hidden');
37+
el_item.setAttribute('m-w-4t', 'md,lg,xl');
38+
el_item.setAttribute('m-w-6t', 'sm');
39+
el_item.setAttribute('m-w-100', 'xs');
40+
// Get optional current language
41+
const current_lang = data.el_target_container.dataset.cpreviewI18n;
42+
43+
el_item.innerHTML = `
44+
<picture class="
45+
c-dis m-flex m-main-center m-cross-center
46+
c-dim m-w-100 m-o-hidden"></picture>
47+
<ul class="
48+
c-dis m-flex m-column
49+
c-dim m-m-0 m-p-0
50+
c-txt m-fs-4
51+
c-skin m-ls-none main-data">
52+
<li class="
53+
c-dis m-flex m-main-space-between m-gap-3
54+
c-dim m-order--1">
55+
${cPreview.getLanguageString('file_name', current_lang) || 'File name'}
56+
<strong class="c-txt m-ff-lead-500 m-ta-right m-wb-break-word">
57+
${data.el_file.name}
58+
</strong>
59+
</li>
60+
<li class="
61+
c-dis m-flex m-main-space-between m-gap-3
62+
c-dim m-order--1">
63+
${cPreview.getLanguageString('file_size', current_lang) || 'File size'}
64+
<strong class="c-txt m-ff-lead-500 m-ta-right m-wb-break-word">
65+
${cPreview.formatBytes(data.e.loaded, null, current_lang)}
66+
</strong>
67+
</li>
68+
<li class="
69+
c-dis m-flex m-main-space-between m-gap-3
70+
c-dim m-order--1">
71+
${cPreview.getLanguageString('file_type', current_lang) || 'File type'}
72+
<strong class="c-txt m-ff-lead-500 m-ta-right m-wb-break-word">
73+
${data.el_file.type}
74+
</strong>
75+
</li>
76+
<li class="c-dis m-flex m-main-space-between m-gap-3">
77+
<span onclick="cPreview.remove(this, '${data.el_file.name}')"
78+
class="c-skin m-c-support-danger-500 m-cur-pointer">
79+
${cPreview.getLanguageString('remove', current_lang) || 'Remove'}
80+
</span>
81+
</li>
82+
</ul>`;
83+
data.el_target_container.appendChild(el_item);
84+
const el_picture = el_item.querySelector('picture');
85+
el_picture.innerHTML = '';
86+
// If file is an image or video
87+
if (data.el_file.type.indexOf('image/') == 0 || data.el_file.type.indexOf('video/') == 0) {
88+
el_picture.innerHTML = `
89+
<div class="
90+
c-dim m-order--1 m-m-6 m-p-3
91+
c-skin m-brad-3"></div>`;
92+
// Create thumb image item
93+
let el_image = document.createElement('img');
94+
if (data.el_file.type.indexOf('video/') == 0) {
95+
el_image = document.createElement('video');
96+
el_image.setAttribute('controls', 'true')
97+
}
98+
// el_image.src = data.e.target.result;
99+
el_image.src = blob_url;
100+
const loading = setInterval(() => {
101+
// console.log('attempt', data.el_file.name);
102+
if ((el_image.naturalWidth > 0 && el_image.naturalHeight > 0) || data.el_file.type == 'image/svg+xml' || data.el_file.type.indexOf('video/') == 0) {
103+
104+
const image_definition = el_image.naturalWidth * el_image.naturalHeight;
105+
let image_definition_status_class = 'c-skin m-c-support-success-400';
106+
if (image_definition < 5000000) {
107+
image_definition_status_class = 'u-c-support-warning-400';
108+
}
109+
el_image.classList.add('c-dim', 'm-w-100', 'm-h-auto');
110+
el_image.setAttribute('alt', data.el_file.name);
111+
el_picture.innerHTML = '';
112+
el_picture.appendChild(el_image);
113+
el_item.querySelector('.main-data').insertAdjacentHTML(
114+
'beforeend',
115+
`
116+
<li class="
117+
c-dis m-flex m-main-space-between m-gap-3
118+
c-dim m-order--1
119+
${image_definition_status_class}">
120+
${cPreview.getLanguageString('definition', current_lang) || 'Definition'}
121+
<strong class="c-txt m-ff-lead-500 m-ta-right">
122+
<span>${el_image.naturalWidth || el_image.videoWidth}</span> x <span>${el_image.naturalHeight || el_image.videoHeight}</span> px
123+
</strong>
124+
</li>
125+
`
126+
);
127+
clearInterval(loading);
128+
}
129+
}, 500);
130+
} else {
131+
if (data.el_file.type == 'application/pdf' || data.el_file.type == 'text/html' || data.el_file.type == 'text/plain') {
132+
el_picture.setAttribute('class', 'c-dis m-flex m-main-center m-cross-center c-dim m-w-100 m-o-hidden c-skin m-c-primary-500 m-bc-primary-100 m-brad-1');
133+
el_picture.innerHTML = `<iframe src="${blob_url}" class="c-dim m-w-100 c-skin m-b-0" height="200"></iframe>`;
134+
} else {
135+
el_picture.setAttribute('class', 'c-dis m-flex m-main-center m-cross-center c-dim m-w-100 m-o-hidden m-pt-6 m-pb-6 c-skin m-c-primary-500 m-bc-primary-100 m-brad-1');
136+
el_picture.innerHTML = `<span class="c-txt m-fs-10">↥</span>`;
137+
}
138+
}
139+
},
140+
/**
141+
* DEFAULT TEMPLATE FOR FILE ITEM
142+
* @param {Object} data
143+
* @param {Object} data.el_target_container DOM element if the file item
144+
* @param {Object} data.e Reader onload event
145+
* @param {Object} data.el_file File List element
146+
*/
147+
default: function(data) {
148+
// Create thumb item
149+
const el_item = document.createElement('div');
150+
const current_lang = data.el_target_container.dataset.cpreviewI18n;
151+
el_item.innerHTML = `
152+
<ul>
153+
<li>${cPreview.getLanguageString('file_name', current_lang) || 'File name'}: ${data.el_file.name}</li>
154+
<li>${cPreview.getLanguageString('file_size', current_lang) || 'File size'}: ${cPreview.formatBytes(data.e.loaded, current_lang)}</li>
155+
<li>${cPreview.getLanguageString('file_type', current_lang) || 'File type'}: ${data.el_file.type}</li>
156+
<li>
157+
<button onclick="cPreview.remove(this, '${data.el_file.name}')">
158+
${cPreview.getLanguageString('remove', current_lang) || 'Remove'}
159+
</button>
160+
</li>
161+
</ul>`;
162+
// Insert file markup
163+
data.el_target_container.appendChild(el_item);
164+
}
165+
}
166+
}
167+
```
168+

‎content/example-custom-reset-template.md‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
---
2+
title: Template reset personnalisé
3+
description: Exemple avec un template personnalisé de retrait de tous les fichiers
4+
layout: libdoc/page-split
5+
category: Exemples
6+
order: 30
7+
---
8+
9+
```html
10+
<label for="first">Template reset nommé "foo"</label>
11+
<input type="file" id="first" multiple>
12+
<div data-cpreview="first"
13+
data-cpreview-template-reset="foo"></div>
14+
<hr>
15+
<label for="second">Template reset nommé "minimal"</label>
16+
<input type="file" id="second" multiple>
17+
<div data-cpreview="second"
18+
data-cpreview-template-reset="minimal"></div>
19+
<hr>
20+
<label for="second">Cas template reset inexistant "foobar"</label>
21+
<input type="file" id="third" multiple>
22+
<div data-cpreview="third"
23+
data-cpreview-template-reset="foobar"></div>
24+
```
25+
{:.playground title="Template reset personnalisé"}
26+
27+
Quand l'attribut `data-cpreview-template-reset="TOKEN_TEMPLATE_RESET"` est renseigné, cPreview invoque `cPreviewTemplates[TOKEN_TEMPLATE_RESET]` et l'utilise pour générer le HTML du template réinitialisation / retrait de tous les fichiers sélectionnés.
28+
29+
Pour ajouter un template de réinitialisation, ajouter une méthode dans l'objet `cPreviewTemplates.reset[TOKEN_NOM_DU NOUVEAU_TEMPLATE]`, sur la base de l'exemple suivant:
30+
31+
```javascript
32+
// cPreview Templates optionnels
33+
let cPreviewTemplates = {
34+
reset: {
35+
/**
36+
* CUSTOM TEMPLATE FOR "REMOVE ALL" FILES BUTTON
37+
* @param {Object} data
38+
* @param {Object} data.el_target_container DOM element if the file item
39+
* @param {String} data.id input type file id to reset
40+
*/
41+
foo: function(data) {
42+
const current_lang = data.el_target_container.dataset.cPreviewI18n;
43+
data.el_target_container.insertAdjacentHTML(
44+
'beforeend',
45+
`<nav class="c-dim m-w-100">
46+
<button class="
47+
c-dis m-flex m-cross-center m-gap-2
48+
c-dim m-p-3 m-pl-4 m-pr-4
49+
c-skin m-b-0 m-brad-1 m-bc-support-danger-100 m-c-support-danger-500 m-cur-pointer"
50+
onclick="cPreview.reset('${data.id}')">
51+
&times;
52+
${cPreview.getLanguageString('remove_all', current_lang) || 'Remove all'}
53+
</button>
54+
</nav>`
55+
);
56+
},
57+
// MINIMAL
58+
// Just an example
59+
minimal: function(data) {
60+
const current_lang = data.el_target_container.dataset.cPreviewI18n;
61+
data.el_target_container.insertAdjacentHTML(
62+
'beforeend',
63+
`<nav>
64+
<button onclick="cPreview.reset('${data.id}')">
65+
&times;
66+
${cPreview.getLanguageString('remove_all', current_lang) || 'Remove all'}
67+
</button>
68+
</nav>`
69+
);
70+
},
71+
/**
72+
* DEFAULT TEMPLATE FOR REMOVE ALL FILES BUTTON
73+
* @param {Object} data
74+
* @param {Object} data.el_target_container DOM element if the file item
75+
* @param {String} data.id input type file id to reset
76+
*/
77+
default: function(data) {
78+
const current_lang = data.el_target_container.dataset.cpreviewI18n;
79+
data.el_target_container.insertAdjacentHTML(
80+
'beforeend',
81+
`<nav style="width:100%"><button onclick="cPreview.reset('${data.id}')">${cPreview.getLanguageString('remove_all', current_lang) || 'Remove all'}</button></nav>`
82+
);
83+
}
84+
}
85+
}
86+
```
87+

‎content/example-i18n.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
title: Langues
3+
description: Exemple avec langue personnalisée
4+
layout: libdoc/page-split
5+
category: Exemples
6+
order: 20
7+
---
8+
9+
```html
10+
<input type="file" id="first" multiple>
11+
<div data-cpreview="first"
12+
data-cpreview-i18n="fr"></div>
13+
```
14+
{:.playground title="Exemple avec langue personnalisée"}
15+
16+
Quand l'attribut `data-cpreview-i18n="TOKEN_LANGUAGE"` est renseigné, cPreview invoque `cPreviewI18n[TOKEN_LANGUAGE][TOKEN_STRING]` pour en obtenir la chaine de caractères de la langue spécifiée. Si elle n'existe pas, la valeur par défaut (anglais) est affichée.
17+
18+
Pour ajouter les traductions, ajouter un object JS nommé `cPreviewI18n` contenant les tokens des chaines de caractères suivants:
19+
20+
```javascript
21+
// Objet langues optionnel
22+
const cPreviewI18n = {
23+
fr: {
24+
file_name: "Nom du fichier",
25+
file_size: "Taille du fichier",
26+
file_type: "Type de fichier",
27+
remove: "Retirer",
28+
remove_all: "Tout retirer",
29+
definition: "Définition Lxh en pixels",
30+
bytes_0: "Octets",
31+
bytes_1: "Ko",
32+
bytes_2: "Mo",
33+
bytes_3: "Go",
34+
bytes_4: "To",
35+
bytes_5: "Po",
36+
bytes_6: "Eo",
37+
bytes_7: "Zo",
38+
bytes_8: "Yo"
39+
},
40+
en: {
41+
file_name: "File name",
42+
file_size: "File size",
43+
file_type: "File type",
44+
remove: "Remove",
45+
remove_all: "Remove all",
46+
definition: "Definition WxH in pixels",
47+
bytes_0: "Bytes",
48+
bytes_1: "KB",
49+
bytes_2: "MB",
50+
bytes_3: "GB",
51+
bytes_4: "TB",
52+
bytes_5: "PB",
53+
bytes_6: "EB",
54+
bytes_7: "ZB",
55+
bytes_8: "YB"
56+
}
57+
}
58+
```
59+

‎content/index.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
permalink: index.html
44
unlisted: true
55
---
6-
<input type="file" id="test" onchange="cPreview.update(this)" multiple>
6+
<input type="file" id="test" multiple>
77
<div data-cpreview="test"></div>
88

9-
<input type="file" id="test2" onchange="cPreview.update(this)" multiple>
9+
<input type="file" id="test2" multiple>
1010
<div data-cpreview="test2" data-cpreview-i18n="fr"></div>
1111

1212
<div class="c-dis m-flex
@@ -19,7 +19,6 @@
1919
c-dim m-w-100 m-h-100
2020
c-pos m-absolute m-top-0 m-left-0
2121
c-skin m-cur-pointer"
22-
onchange="cPreview.update(this)"
2322
accept="image/*;capture=camera"
2423
multiple>
2524

‎content/simple-example.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
title: Exemple simple
3+
description: Exemple d'usage le plus simple
4+
layout: libdoc/page-split
5+
category: Exemples
6+
order: 10
7+
---
8+
9+
```html
10+
<input type="file" id="first" multiple>
11+
<div data-cpreview="first"></div>
12+
```
13+
{:.playground title="Exemple d'usage le plus simple"}

‎ui/js/c-preview-i18n.js‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,32 @@ const cPreviewI18n = {
66
file_type: "Type de fichier",
77
remove: "Retirer",
88
remove_all: "Tout retirer",
9-
definition: "Définition Lxh en pixels"
9+
definition: "Définition Lxh en pixels",
10+
bytes_0: "Octets",
11+
bytes_1: "Ko",
12+
bytes_2: "Mo",
13+
bytes_3: "Go",
14+
bytes_4: "To",
15+
bytes_5: "Po",
16+
bytes_6: "Eo",
17+
bytes_7: "Zo",
18+
bytes_8: "Yo"
1019
},
1120
en: {
1221
file_name: "File name",
1322
file_size: "File size",
1423
file_type: "File type",
1524
remove: "Remove",
1625
remove_all: "Remove all",
17-
definition: "Definition WxH in pixels"
26+
definition: "Definition WxH in pixels",
27+
bytes_0: "Bytes",
28+
bytes_1: "KB",
29+
bytes_2: "MB",
30+
bytes_3: "GB",
31+
bytes_4: "TB",
32+
bytes_5: "PB",
33+
bytes_6: "EB",
34+
bytes_7: "ZB",
35+
bytes_8: "YB"
1836
}
1937
}

0 commit comments

Comments
 (0)