Docs - images/documents title generation - update for CSP compliant examples

- Add helpful intro content, insure formatting of Python/JS is consistent
- Avoid inline scripts, instead ensure the example shows external script usage
pull/12537/head
Aayushman Singh 2024-10-30 16:41:32 +05:30 zatwierdzone przez LB (Ben Johnston)
rodzic 7f6e7d4062
commit 71a735476c
2 zmienionych plików z 102 dodań i 87 usunięć

Wyświetl plik

@ -32,30 +32,34 @@ See MDN for more information about [custom JavaScript events](https://developer.
## Code examples
For each example below, create the specified external JavaScript file in your apps static directory, such as `static/js/`, and reference it in the `wagtail_hooks.py` file.
### Adding the file extension to the start of the title
```python
# wagtail_hooks.py
from django.utils.safestring import mark_safe
from django.templatetags.static import static
from django.utils.html import format_html
from wagtail import hooks
@hooks.register("insert_global_admin_js")
def get_global_admin_js():
return mark_safe(
"""
<script>
window.addEventListener('DOMContentLoaded', function () {
document.addEventListener('wagtail:documents-upload', function(event) {
var extension = (event.detail.filename.match(/\.([^.]*?)(?=\?|#|$)/) || [''])[1];
var newTitle = '(' + extension.toUpperCase() + ') ' + (event.detail.data.title || '');
event.detail.data.title = newTitle;
});
script_url = static('js/title_with_extension.js')
return format_html('<script src="{}"></script>', script_url)
```
```javascript
// title_with_extension.js
window.addEventListener('DOMContentLoaded', function () {
document.addEventListener('wagtail:documents-upload', function (event) {
const extension = (event.detail.filename.match(
/\.([^.]*?)(?=\?|#|$)/,
) || [''])[1];
const newTitle = `(${extension.toUpperCase()}) ${event.detail.data.title || ''}`;
event.detail.data.title = newTitle;
});
</script>
"""
)
});
```
### Changing generated titles on the page editor only to remove dashes/underscores
@ -64,50 +68,55 @@ Use the [`insert_editor_js` hook](insert_editor_js) instead so that this script
```python
# wagtail_hooks.py
from django.utils.safestring import mark_safe
from django.templatetags.static import static
from django.utils.html import format_html
from wagtail import hooks
@hooks.register("insert_editor_js")
def get_global_admin_js():
return mark_safe(
"""
<script>
window.addEventListener('DOMContentLoaded', function () {
document.addEventListener('wagtail:documents-upload', function(event) {
// replace dashes/underscores with a space
var newTitle = (event.detail.data.title || '').replace(/(\s|_|-)/g, " ");
event.detail.data.title = newTitle;
});
def get_editor_js():
script_url = static('js/remove_dashes_underscores.js')
return format_html('<script src="{}"></script>', script_url)
```
```javascript
// remove_dashes_underscores.js
window.addEventListener('DOMContentLoaded', function () {
document.addEventListener('wagtail:documents-upload', function (event) {
// Replace dashes/underscores with a space
const newTitle = (event.detail.data.title || '').replace(
/(\s|_|-)/g,
' ',
);
event.detail.data.title = newTitle;
});
</script>
"""
)
});
```
### Stopping pre-filling of title based on filename
```python
# wagtail_hooks.py
from django.utils.safestring import mark_safe
from django.templatetags.static import static
from django.utils.html import format_html
from wagtail import hooks
@hooks.register("insert_global_admin_js")
def get_global_admin_js():
return mark_safe(
"""
<script>
window.addEventListener('DOMContentLoaded', function () {
document.addEventListener('wagtail:documents-upload', function(event) {
// will stop title pre-fill on single file uploads
// will set the multiple upload title to the filename (with extension)
event.preventDefault();
});
});
</script>
"""
)
def insert_stop_prefill_js():
script_url = static('js/stop_title_prefill.js')
return format_html('<script src="{}"></script>', script_url)
```
Save the following code as static/js/stop_title_prefill.js
```javascript
// stop_title_prefill.js
window.addEventListener('DOMContentLoaded', function () {
document.addEventListener('wagtail:documents-upload', function (event) {
// Will stop title pre-fill on single file uploads
// Will set the multiple upload title to the filename (with extension)
event.preventDefault();
});
});
```

Wyświetl plik

@ -32,29 +32,33 @@ See MDN for more information about [custom JavaScript events](https://developer.
## Code examples
For each example below, create the specified external JavaScript file in your apps static directory, such as `static/js/`, and reference it in the `wagtail_hooks.py` file.
### Removing any url unsafe characters from the title
```python
# wagtail_hooks.py
from django.utils.safestring import mark_safe
from django.templatetags.static import static
from django.utils.html import format_html
from wagtail import hooks
@hooks.register("insert_global_admin_js")
def get_global_admin_js():
return mark_safe(
"""
<script>
window.addEventListener('DOMContentLoaded', function () {
document.addEventListener('wagtail:images-upload', function(event) {
var newTitle = (event.detail.data.title || '').replace(/[^a-zA-Z0-9\s-]/g, "");
event.detail.data.title = newTitle;
});
script_url = static('js/wagtail_admin.js')
return format_html('<script src="{}"></script>', script_url)
```
```javascript
window.addEventListener('DOMContentLoaded', function () {
document.addEventListener('wagtail:images-upload', function (event) {
const newTitle = (event.detail.data.title || '').replace(
/[^a-zA-Z0-9\s-]/g,
'',
);
event.detail.data.title = newTitle;
});
</script>
"""
)
});
```
### Changing generated titles on the page editor only to remove dashes/underscores
@ -63,50 +67,52 @@ Use the [`insert_editor_js` hook](insert_editor_js) instead so that this script
```python
# wagtail_hooks.py
from django.utils.safestring import mark_safe
from django.templatetags.static import static
from django.utils.html import format_html
from wagtail import hooks
@hooks.register("insert_editor_js")
def get_global_admin_js():
return mark_safe(
"""
<script>
window.addEventListener('DOMContentLoaded', function () {
document.addEventListener('wagtail:images-upload', function(event) {
// replace dashes/underscores with a space
var newTitle = (event.detail.data.title || '').replace(/(\s|_|-)/g, " ");
event.detail.data.title = newTitle;
});
def insert_remove_dashes_underscores_js():
script_url = static('js/remove_dashes_underscores.js')
return format_html('<script src="{}"></script>', script_url)
```
```javascript
window.addEventListener('DOMContentLoaded', function () {
document.addEventListener('wagtail:images-upload', function (event) {
// Replace dashes/underscores with a space
const newTitle = (event.detail.data.title || '').replace(
/(\s|_|-)/g,
' ',
);
event.detail.data.title = newTitle;
});
</script>
"""
)
});
```
### Stopping pre-filling of title based on filename
```python
# wagtail_hooks.py
from django.utils.safestring import mark_safe
from django.templatetags.static import static
from django.utils.html import format_html
from wagtail import hooks
@hooks.register("insert_global_admin_js")
def get_global_admin_js():
return mark_safe(
"""
<script>
window.addEventListener('DOMContentLoaded', function () {
document.addEventListener('wagtail:images-upload', function(event) {
// will stop title pre-fill on single file uploads
// will set the multiple upload title to the filename (with extension)
event.preventDefault();
});
});
</script>
"""
)
script_url = static('js/stop_prefill.js')
return format_html('<script src="{}"></script>', script_url)
```
```javascript
window.addEventListener('DOMContentLoaded', function () {
document.addEventListener('wagtail:images-upload', function (event) {
// Stop title pre-fill on single file uploads
// Set the multiple upload title to the filename (with extension)
event.preventDefault();
});
});
```