Skip to content

Commit 456e7cf

Browse files
qzminskiqzminski
authored
Version for Contao 5.7 (#47)
* Prepare for Contao 5.7 * CS * Rector * Update the code to newest standards * PHPStan fixes * Switch to Stimulus and TomSelect * Downgrade codefog/contao-haste to 5.3 * Fix the extension class not loading YAML files properly * Improve backend assets * CS * Add missing dependencies to composer.json * Rector + CS * Remove Travis * Replace php-coveralls integration in CI workflow * Stylelint + ESlint * Biome * Fix installing deps in CI * Fix installing deps in CI * Fix the unit tests * Fix the "unit-tests" script in composer.json * CS + Rector * Fix unit tests * Remove code coverage stuff * Update PHPUnit configuration: upgrade schema to 12.5, enforce stricter checks * Get rid of old hook definitions * Update the documentation. Change from `tagsSortable` to `isSortable` * Improve the backend widget * Stylelint
1 parent b6a17f0 commit 456e7cf

101 files changed

Lines changed: 7659 additions & 8381 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/ci.yml‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
name: CI
2+
3+
on:
4+
push: ~
5+
pull_request: ~
6+
7+
permissions: read-all
8+
9+
jobs:
10+
ci:
11+
uses: 'terminal42/contao-build-tools/.github/workflows/build-tools.yml@main'
12+
13+
php:
14+
name: PHP ${{ matrix.php-version }}
15+
runs-on: ubuntu-latest
16+
17+
strategy:
18+
matrix:
19+
php-version:
20+
- '8.3'
21+
- '8.4'
22+
- '8.5'
23+
24+
steps:
25+
- name: Checkout
26+
uses: actions/checkout@v4
27+
28+
- name: Setup PHP
29+
uses: shivammathur/setup-php@v2
30+
with:
31+
php-version: ${{ matrix.php-version }}
32+
33+
- name: Install dependencies
34+
run: COMPOSER_MEMORY_LIMIT=-1 composer install --dev --no-interaction
35+
36+
- name: Run tests
37+
run: composer run unit-tests

‎.gitignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,3 @@
44
/build
55
/node_modules
66
/vendor
7-
/yarn.lock

‎.travis.yml‎

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

‎README.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,11 @@
33
[![Version](https://img.shields.io/packagist/v/codefog/tags-bundle)](https://packagist.org/packages/codefog/tags-bundle)
44
[![License](https://img.shields.io/github/license/codefog/tags-bundle)](https://github.com/codefog/tags-bundle/blob/master/LICENSE.txt)
55
[![Downloads](https://img.shields.io/packagist/dm/codefog/tags-bundle)](https://packagist.org/packages/codefog/tags-bundle)
6-
[![Build Status](https://travis-ci.org/codefog/tags-bundle.svg?branch=master)](https://travis-ci.org/codefog/tags-bundle)
7-
[![Coverage Status](https://coveralls.io/repos/github/codefog/tags-bundle/badge.svg?branch=master)](https://coveralls.io/github/codefog/tags-bundle?branch=master)
86

97
Tags Bundle is an extension for the [Contao Open Source CMS](https://contao.org).
108

119
The extension provides the tagging functionality in Contao. Backend widget is powered up by the excellent
12-
UI widget [selectize.js](https://github.com/selectize/selectize.js) that allows to easily manage tags.
10+
UI widget [Tom Select](https://tom-select.js.org/) that allows to easily manage tags.
1311

1412
> **IMPORTANT NOTE:** This project is aimed at the developers and it does not provide tagging
1513
to any of standard Contao features by default!

‎assets/add--dark.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/add.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/tags-widget.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
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(
9+
'codefog--tags-widget',
10+
class extends Controller {
11+
static targets = ['input'];
12+
13+
static values = {
14+
config: {
15+
type: Object,
16+
default: {},
17+
},
18+
};
19+
20+
connect() {
21+
this.tomSelect = new TomSelect(this.inputTarget, this.#getOptions());
22+
}
23+
24+
disconnect() {
25+
this.tomSelect.destroy();
26+
}
27+
28+
add(event) {
29+
this.tomSelect.addItem(event.target.value);
30+
}
31+
32+
remove(event) {
33+
this.tomSelect.removeItem(event.target.value);
34+
}
35+
36+
#getOptions() {
37+
const config = this.configValue;
38+
39+
const options = {
40+
delimiter: ',',
41+
options: config.allTags,
42+
items: config.valueTags,
43+
persist: false,
44+
render: {
45+
// biome-ignore format: long line
46+
option_create: (data, escape) => `<div class="create">${config.addLabel} <strong>${escape(data.input)}</strong>&hellip;</div>`,
47+
// biome-ignore format: long line
48+
item: (data, escape) => `<div>${escape(data.text)}<button type="button" class="cfg-tags-widget__remove" value="${data.value}" aria-label="${config.removeLabel} ${escape(data.text)}" data-action="click->codefog--tags-widget#remove:prevent">${config.removeLabel}</button></div>`,
49+
no_results: () => `<div class="no-results">${config.noResultsLabel}</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+
},
68+
);

‎assets/tags-widget.scss‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
$select-border-radius: var(--border-radius);
2+
$select-color-border: var(--form-border);
3+
$select-color-dropdown-item-active-text: #fff;
4+
$select-color-dropdown-item-active: var(--choices-highlighted);
5+
$select-color-dropdown-item-create-text: var(--text);
6+
$select-color-dropdown: var(--choices-bg-color-dropdown, #fff);
7+
$select-color-input: var(--form-bg);
8+
$select-font-size: inherit;
9+
$select-line-height: 13px;
10+
$select-max-height-dropdown: 300px;
11+
$select-padding-dropdown-item-x: 6px;
12+
$select-padding-dropdown-item-y: 3px;
13+
$select-padding-x: 6px;
14+
$select-padding-y: 5px;
15+
16+
@import '~tom-select/dist/scss/tom-select';
17+
18+
.cfg-tags-widget {
19+
margin-top: 3px;
20+
margin-bottom: 3px;
21+
22+
&__all {
23+
margin-top: 3px;
24+
25+
&-headline {
26+
margin-bottom: 5px;
27+
margin-top: 5px;
28+
font-size: 0.75rem;
29+
}
30+
31+
&-items {
32+
display: flex;
33+
flex-wrap: wrap;
34+
gap: 3px;
35+
}
36+
}
37+
38+
&__tag {
39+
display: block;
40+
padding: 5px 10px 5px 25px;
41+
background: transparent url('./add.svg') no-repeat 6px center;
42+
border: 1px solid var(--form-border);
43+
border-radius: var(--border-radius);
44+
box-sizing: border-box;
45+
font-size: 13px;
46+
cursor: pointer;
47+
transition: background 0.2s ease;
48+
49+
html[data-color-scheme='dark'] & {
50+
background-image: url('./add--dark.svg');
51+
}
52+
53+
&:hover {
54+
color: inherit;
55+
background-color: var(--form-button-hover);
56+
}
57+
58+
&:active {
59+
color: var(--form-button-active);
60+
}
61+
}
62+
63+
&__remove {
64+
position: relative;
65+
display: inline-block;
66+
width: var(--choices-button-dimension, 8px);
67+
margin: 0 calc(var(--choices-button-offset, 8px) * -0.5) 0 var(--choices-button-offset, 8px);
68+
padding-bottom: 2px;
69+
padding-left: calc(var(--choices-button-offset, 8px) * 2);
70+
border: 0;
71+
border-left: 1px solid var(--choices-border);
72+
border-radius: var(--choices-button-border-radius, 0);
73+
background-color: transparent;
74+
background-image: var(
75+
--choices-icon-cross,
76+
url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==')
77+
);
78+
background-position: center;
79+
background-repeat: no-repeat;
80+
background-size: var(--choices-button-dimension, 8px);
81+
opacity: var(--choices-button-opacity, 0.75);
82+
cursor: pointer;
83+
line-height: var(--choices-button-line-height, 1);
84+
text-indent: -9999px;
85+
appearance: none;
86+
87+
html:not([data-color-scheme='dark']) & {
88+
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMjIyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==');
89+
}
90+
91+
&:is(:hover, :focus) {
92+
--choices-button-opacity: var(--choices-button-opacity-hover, 1);
93+
}
94+
95+
&:focus {
96+
box-shadow: 0 0 0 2px var(--choices-highlight-color, #005f75);
97+
}
98+
}
99+
100+
.ts-wrapper {
101+
&.dropdown-active .ts-control {
102+
border-radius: var(--choices-border-radius, 2.5px) var(--choices-border-radius, 2.5px) 0 0;
103+
}
104+
105+
&.multi.has-items .ts-control {
106+
padding-left: 3px;
107+
108+
input {
109+
margin: -3px 4px 0 !important;
110+
}
111+
}
112+
113+
.ts-control {
114+
> div {
115+
margin: 0 3px 3px 0;
116+
padding: 1px 5px 1px 6px;
117+
background-color: var(--choices-bg);
118+
border: 1px solid var(--choices-border);
119+
border-radius: 3px;
120+
color: var(--choices-item-color, #fff);
121+
cursor: auto;
122+
}
123+
124+
input {
125+
color: var(--text);
126+
}
127+
}
128+
129+
.create {
130+
padding-left: 25px !important;
131+
background-image: url('./add.svg');
132+
background-repeat: no-repeat;
133+
background-position: 6px center;
134+
135+
&.active,
136+
html[data-color-scheme='dark'] & {
137+
background-image: url('./add--dark.svg');
138+
}
139+
}
140+
}
141+
142+
.ts-dropdown {
143+
margin-top: -1px;
144+
border: 1px solid var(--choices-keyline-color, #ddd);
145+
border-radius: 0 0 var(--choices-border-radius, 2.5px) var(--choices-border-radius, 2.5px);
146+
box-shadow: none;
147+
overflow: hidden;
148+
149+
* {
150+
font-size: 13px;
151+
}
152+
153+
.no-results {
154+
color: var(--text);
155+
}
156+
157+
[data-selectable] {
158+
&.option {
159+
color: var(--text);
160+
}
161+
162+
&.active {
163+
color: #fff;
164+
}
165+
166+
.highlight {
167+
background-color: var(--orange);
168+
color: #fff;
169+
}
170+
}
171+
}
172+
}

‎composer.json‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,21 @@
1111
}
1212
],
1313
"require": {
14-
"php": "^8.0",
15-
"ext-pdo": "*",
16-
"contao/core-bundle": "^4.13 || ^5.0",
17-
"codefog/contao-haste": "^5.0",
18-
"doctrine/dbal": "^2.12 || ^3.0",
19-
"symfony/config": "^5.4 || ^6.4 || ^7.0"
14+
"php": "^8.3",
15+
"contao/core-bundle": "^5.7",
16+
"codefog/contao-haste": "^5.3",
17+
"doctrine/dbal": "^3.7 || ^4.3",
18+
"symfony/asset": "^7.4 || ^8.0",
19+
"symfony/dependency-injection": "^7.4 || ^8.0",
20+
"symfony/http-foundation": "^7.4 || ^8.0",
21+
"symfony/http-kernel": "^7.4 || ^8.0",
22+
"symfony/config": "^7.4 || ^8.0"
2023
},
2124
"require-dev": {
2225
"contao/manager-plugin": "^2.0",
23-
"contao/easy-coding-standard": "^5.3",
24-
"phpunit/phpunit": "^7.0 || ^9.3",
25-
"contao/test-case": "^4.13",
26-
"php-coveralls/php-coveralls": "^2.2"
26+
"contao/test-case": "^5.7",
27+
"terminal42/contao-build-tools": "dev-main",
28+
"phpunit/phpunit": "^12.5"
2729
},
2830
"conflict": {
2931
"contao/manager-plugin": "<2.0 || >=3.0"
@@ -43,10 +45,15 @@
4345
},
4446
"config": {
4547
"allow-plugins": {
46-
"dealerdirect/phpcodesniffer-composer-installer": true
48+
"contao-components/installer": false,
49+
"contao/manager-plugin": false,
50+
"contao-community-alliance/composer-plugin": false,
51+
"dealerdirect/phpcodesniffer-composer-installer": true,
52+
"php-http/discovery": true,
53+
"terminal42/contao-build-tools": true
4754
}
4855
},
4956
"scripts": {
50-
"cs-fixer": "vendor/bin/ecs check src tests --fix --ansi"
57+
"unit-tests": "@php vendor/bin/phpunit"
5158
}
5259
}

0 commit comments

Comments
 (0)