Skip to content

Commit db93eed

Browse files
qzminskiqzminski
committed
Switch to Stimulus and TomSelect
1 parent 82e6f3d commit db93eed

33 files changed

Lines changed: 255 additions & 7032 deletions

‎assets/tags-widget.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import './tags-widget.scss';
2+
3+
import {Application, Controller} from '@hotwired/stimulus';
4+
import TomSelect from 'tom-select';
5+
6+
const application = Application.start();
7+
application.debug = process.env.NODE_ENV === 'development';
8+
application.register('codefog--tags-widget', class extends Controller {
9+
static targets = ['input']
10+
11+
static values = {
12+
config: {
13+
type: Object,
14+
default: {},
15+
}
16+
}
17+
18+
connect() {
19+
this.tomSelect = new TomSelect(this.inputTarget, this.#getOptions())
20+
21+
// TODO: remove items on click
22+
}
23+
24+
disconnect() {
25+
this.tomSelect.destroy()
26+
}
27+
28+
select(event) {
29+
this.tomSelect.addItem(event.target.value)
30+
}
31+
32+
#getOptions() {
33+
let config = {};
34+
35+
try {
36+
config = JSON.parse(this.configValue);
37+
} catch {
38+
console.error(`Could not parse JSON options for Tags widget: ${this.configValue}`);
39+
40+
return {};
41+
}
42+
43+
const options = {
44+
delimiter: ',',
45+
options: config.allTags,
46+
items: config.valueTags,
47+
persist: false,
48+
render: {
49+
option_create: (data, escape) => `<div class="create">${config.addLabel} <strong>${escape(data.input)}</strong>&hellip;</div>`,
50+
}
51+
};
52+
53+
if (config.allowCreate) {
54+
options.create = input => ({ value: input, text: input });
55+
}
56+
57+
if (config.maxItems) {
58+
options.maxItems = config.maxItems;
59+
}
60+
61+
if (config.sortable) {
62+
options.plugins = ['drag_drop'];
63+
}
64+
65+
return options;
66+
}
67+
});

public/backend.css renamed to assets/tags-widget.scss

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
.cfg-tags {
1+
.cfg-tags-widget {
22
padding-top: 5px;
33
position: relative;
44
z-index: 1;
55
}
66

7-
.cfg-tags:has(.selectize-input.input-active.dropdown-active) {
7+
.cfg-tags-widget:has(.selectize-input.input-active.dropdown-active) {
88
z-index: 2;
99
}
1010

11-
.cfg-tags-all {
11+
.cfg-tags-widget-all {
1212
padding: 5px 0 5px 0;
1313
}
1414

15-
.cfg-tags-all span {
15+
.cfg-tags-widget-all span {
1616
display: inline-block;
1717
margin: 0 4px 5px 0;
1818
padding: 5px 10px;
@@ -22,26 +22,26 @@
2222
white-space: nowrap;
2323
}
2424

25-
.cfg-tags-all span:hover {
25+
.cfg-tags-widget-all span:hover {
2626
background: #589b0e !important;
2727
color: #fff;
2828
}
2929

30-
.cfg-tags .selectize-control.multi .selectize-input > div {
30+
.cfg-tags-widget .selectize-control.multi .selectize-input > div {
3131
margin-right: 7px;
3232
padding: 5px 10px;
3333
background: #eaeaea;
3434
border-radius: 3px;
3535
line-height: 1;
3636
}
3737

38-
.cfg-tags .selectize-control.multi .selectize-input > div:hover {
38+
.cfg-tags-widget .selectize-control.multi .selectize-input > div:hover {
3939
background: #c33 !important;
4040
color: #fff;
4141
}
4242

4343
/* Dark scheme */
44-
html[data-color-scheme="dark"] .cfg-tags-all span,
44+
html[data-color-scheme="dark"] .cfg-tags-widget-all span,
4545
html[data-color-scheme="dark"] .selectize-dropdown-header,
4646
html[data-color-scheme="dark"] .selectize-control.single .selectize-input.input-active {
4747
background: #292c32;
@@ -68,7 +68,7 @@ html[data-color-scheme="dark"] .selectize-dropdown .active {
6868
color: #fff;
6969
}
7070

71-
html[data-color-scheme="dark"] .cfg-tags .selectize-control.multi .selectize-input > div {
71+
html[data-color-scheme="dark"] .cfg-tags-widget .selectize-control.multi .selectize-input > div {
7272
background: #292c32;
7373
color: var(--text);
7474
}

‎composer.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"contao/core-bundle": "^5.7",
1616
"codefog/contao-haste": "^5.4",
1717
"doctrine/dbal": "^3.7 || ^4.3",
18+
"symfony/asset": "^7.4 || ^8.0",
1819
"symfony/config": "^7.4 || ^8.0"
1920
},
2021
"require-dev": {

‎config/listener.yml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@ services:
1010
public: true
1111
arguments:
1212
- "@codefog_tags.manager_registry"
13-
- "@request_stack"
14-
- "@contao.routing.scope_matcher"
1513

1614
codefog_tags.listener.data_container.tag:
1715
class: Codefog\TagsBundle\EventListener\DataContainer\TagListener

‎contao/templates/.twig-root‎

Whitespace-only changes.

‎contao/templates/backend/widget/tags.html.twig‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{% set widget_attributes = attrs()
2+
.addClass(['cfg-tags-widget', css_class])
3+
.set('data-controller', 'codefog--tags-widget')
4+
.set('data-codefog--tags-widget-config-value', js_config|json_encode)
5+
%}
6+
7+
{% block widget %}
8+
<div{{ widget_attributes }}>
9+
{% block widget_inner %}
10+
{% if all_tags and not hide_list %}
11+
<div class="cfg-tags-widget-all">
12+
{% for tag in all_tags %}
13+
<button type="button" value="{{ tag.value }}" data-action="click->codefog--tags-widget#select:prevent">{{ tag.text }}</button>
14+
{% endfor %}
15+
</div>
16+
{% endif %}
17+
18+
<input type="text" name="{{ name }}" id="ctrl_{{ id }}" data-codefog--tags-widget-target="input">
19+
{% endblock %}
20+
</div>
21+
{% endblock %}

‎contao/templates/be_cfg_tags_widget.html5‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎package.json‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
2-
"name": "@terminal42/contao-dcawizard",
3-
"description": "DCAWizard for Contao Open Source CMS",
4-
"author": "terminal42 gmbh <info@terminal42.ch>",
5-
"license": "LGPL-3.0-or-later",
2+
"name": "@codefog/contao-tags-bundle",
3+
"description": "Tags bundle for Contao Open Source CMS",
4+
"author": "Codefog <info@codefog.pl>",
5+
"license": "MIT",
66
"scripts": {
77
"dev-server": "encore dev-server",
88
"dev": "encore dev",
@@ -17,6 +17,7 @@
1717
],
1818
"packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610",
1919
"dependencies": {
20-
"@hotwired/stimulus": "^3.2.2"
20+
"@hotwired/stimulus": "^3.2.2",
21+
"tom-select": "^2.5.2"
2122
}
2223
}

‎public/.htaccess‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# Brotli compression
2+
<IfModule mod_brotli.c>
3+
<IfModule mod_filter.c>
4+
AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/css application/json
5+
AddOutputFilterByType BROTLI_COMPRESS application/javascript
6+
AddOutputFilterByType BROTLI_COMPRESS text/xml application/xml text/x-component
7+
AddOutputFilterByType BROTLI_COMPRESS application/xhtml+xml application/rss+xml application/atom+xml
8+
AddOutputFilterByType BROTLI_COMPRESS image/x-icon image/svg+xml
9+
AddOutputFilterByType BROTLI_COMPRESS font/ttf font/opentype font/woff font/woff2
10+
</IfModule>
11+
</IfModule>
12+
13+
# Gzip compression
14+
<IfModule mod_deflate.c>
15+
<IfModule mod_filter.c>
16+
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
17+
AddOutputFilterByType DEFLATE application/javascript
18+
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
19+
AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
20+
AddOutputFilterByType DEFLATE image/x-icon image/svg+xml
21+
AddOutputFilterByType DEFLATE font/ttf font/opentype font/woff font/woff2
22+
</IfModule>
23+
</IfModule>
24+
25+
# Expires headers (for better cache control)
26+
<IfModule mod_expires.c>
27+
ExpiresActive on
28+
ExpiresByType image/gif "access plus 1 year"
29+
ExpiresByType image/png "access plus 1 year"
30+
ExpiresByType image/jpeg "access plus 1 year"
31+
ExpiresByType image/webp "access plus 1 year"
32+
ExpiresByType image/svg+xml "access plus 1 year"
33+
ExpiresByType image/x-icon "access plus 1 year"
34+
ExpiresByType video/ogg "access plus 1 year"
35+
ExpiresByType audio/ogg "access plus 1 year"
36+
ExpiresByType video/mp4 "access plus 1 year"
37+
ExpiresByType video/webm "access plus 1 year"
38+
ExpiresByType text/x-component "access plus 1 year"
39+
ExpiresByType font/opentype "access plus 1 year"
40+
ExpiresByType font/ttf "access plus 1 year"
41+
ExpiresByType font/woff "access plus 1 year"
42+
ExpiresByType font/woff2 "access plus 1 year"
43+
ExpiresByType text/css "access plus 1 year"
44+
ExpiresByType application/javascript "access plus 1 year"
45+
</IfModule>
46+
47+
# Do not cache source map files
48+
<IfModule mod_headers.c>
49+
<FilesMatch "\.map$">
50+
Header set Expires "0"
51+
Header set Cache-Control "no-cache, no-store, must-revalidate, max-age=0, proxy-revalidate, no-transform"
52+
</FilesMatch>
53+
</IfModule>

‎public/backend.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)