From c7fac06b6502f33745098d9f854fd1b8e1a6035c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Sun, 25 Feb 2024 19:44:34 +0100 Subject: [PATCH 01/20] Updated dependencies --- composer.lock | 252 ++++++++++----------------------------------- config/bundles.php | 1 - symfony.lock | 3 - 3 files changed, 52 insertions(+), 204 deletions(-) diff --git a/composer.lock b/composer.lock index 2190a059..410a500c 100644 --- a/composer.lock +++ b/composer.lock @@ -4670,16 +4670,16 @@ }, { "name": "omines/datatables-bundle", - "version": "0.8.0", + "version": "0.8.1", "source": { "type": "git", "url": "https://github.com/omines/datatables-bundle.git", - "reference": "d0503e8bd56f5c4b379e930f51f499d0a04d07c1" + "reference": "3d31d1cddac5635803f59b3f7905feb0d4209c80" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/omines/datatables-bundle/zipball/d0503e8bd56f5c4b379e930f51f499d0a04d07c1", - "reference": "d0503e8bd56f5c4b379e930f51f499d0a04d07c1", + "url": "https://api.github.com/repos/omines/datatables-bundle/zipball/3d31d1cddac5635803f59b3f7905feb0d4209c80", + "reference": "3d31d1cddac5635803f59b3f7905feb0d4209c80", "shasum": "" }, "require": { @@ -4691,36 +4691,36 @@ "symfony/translation": "^6.3|^7.0" }, "require-dev": { - "doctrine/common": "^2.6|^3.3", + "doctrine/common": "^3.4.3", "doctrine/doctrine-bundle": "^2.11.1", - "doctrine/orm": "^2.13.1", - "doctrine/persistence": "^3.0.3", + "doctrine/orm": "^2.17.2", + "doctrine/persistence": "^3.2.0", "ext-curl": "*", "ext-json": "*", "ext-mongodb": "*", "ext-pdo_sqlite": "*", "ext-zip": "*", "friendsofphp/php-cs-fixer": "^v3.40.0", - "mongodb/mongodb": "^1.12", + "mongodb/mongodb": "^1.17", "ocramius/package-versions": "^2.8", - "phpoffice/phpspreadsheet": "^1.24.1", - "phpstan/extension-installer": "^1.1", - "phpstan/phpstan": "^1.8.2", - "phpstan/phpstan-doctrine": "^1.3.12", - "phpstan/phpstan-phpunit": "^1.1", - "phpstan/phpstan-symfony": "^1.2.9", - "phpunit/phpunit": "^10.5.1", - "ruflin/elastica": "^6.0|^7.2", - "symfony/browser-kit": "^6.1.3|^7.0", - "symfony/css-selector": "^6.1.3|^7.0", - "symfony/doctrine-bridge": "^6.3|^7.0", - "symfony/dom-crawler": "^6.1.3|^7.0", - "symfony/intl": "^6.1|^7.0", - "symfony/mime": "^6.1.3|^7.0", - "symfony/phpunit-bridge": "^6.3|^7.0", - "symfony/twig-bundle": "^6.1.1|^7.0", - "symfony/var-dumper": "^6.1.3|^7.0", - "symfony/yaml": "^6.1.3|^7.0" + "phpoffice/phpspreadsheet": "^1.29.0 || ^2.0", + "phpstan/extension-installer": "^1.3.1", + "phpstan/phpstan": "^1.10.55", + "phpstan/phpstan-doctrine": "^1.3.54", + "phpstan/phpstan-phpunit": "^1.3.15", + "phpstan/phpstan-symfony": "^1.3.6", + "phpunit/phpunit": "^11.0.3", + "ruflin/elastica": "^6.2|^7.3.1", + "symfony/browser-kit": "^6.3|^7.0", + "symfony/css-selector": "^6.3|^7.0", + "symfony/doctrine-bridge": "^6.3|^7.0.2", + "symfony/dom-crawler": "^6.3|^7.0", + "symfony/intl": "^6.3|^7.0.2", + "symfony/mime": "^6.3|^7.0", + "symfony/phpunit-bridge": "^6.3|^7.0.2", + "symfony/twig-bundle": "^6.3|^7.0", + "symfony/var-dumper": "^6.3|^7.0.2", + "symfony/yaml": "^6.3|^7.0" }, "suggest": { "doctrine/doctrine-bundle": "For integrated access to Doctrine object managers", @@ -4771,7 +4771,7 @@ ], "support": { "issues": "https://github.com/omines/datatables-bundle/issues", - "source": "https://github.com/omines/datatables-bundle/tree/0.8.0" + "source": "https://github.com/omines/datatables-bundle/tree/0.8.1" }, "funding": [ { @@ -4779,7 +4779,7 @@ "type": "github" } ], - "time": "2023-12-05T08:18:04+00:00" + "time": "2024-02-24T22:55:33+00:00" }, { "name": "onelogin/php-saml", @@ -6971,86 +6971,6 @@ ], "time": "2023-12-25T11:42:15+00:00" }, - { - "name": "spomky-labs/cbor-bundle", - "version": "v3.0.0", - "source": { - "type": "git", - "url": "https://github.com/Spomky-Labs/cbor-bundle.git", - "reference": "157ca6ed2f6e957f9e95d71ca86bc67bf42ee79c" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/Spomky-Labs/cbor-bundle/zipball/157ca6ed2f6e957f9e95d71ca86bc67bf42ee79c", - "reference": "157ca6ed2f6e957f9e95d71ca86bc67bf42ee79c", - "shasum": "" - }, - "require": { - "php": ">=8.0", - "spomky-labs/cbor-php": "^3.0", - "symfony/config": "^5.3|^6.0", - "symfony/dependency-injection": "^5.3|^6.0", - "symfony/http-kernel": "^5.3|^6.0" - }, - "require-dev": { - "infection/infection": "^0.25.3", - "phpstan/extension-installer": "^1.1", - "phpstan/phpstan": "^1.0", - "phpstan/phpstan-beberlei-assert": "^1.0", - "phpstan/phpstan-deprecation-rules": "^1.0", - "phpstan/phpstan-phpunit": "^1.0", - "phpstan/phpstan-strict-rules": "^1.0", - "phpunit/phpunit": "^9.0", - "rector/rector": "^0.12.5", - "symfony/framework-bundle": "^5.3|^6.0", - "symfony/phpunit-bridge": "^5.3|^6.0", - "symplify/easy-coding-standard": "^9.4" - }, - "type": "symfony-bundle", - "autoload": { - "psr-4": { - "SpomkyLabs\\CborBundle\\": "src/" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Florent Morselli", - "homepage": "https://github.com/Spomky" - }, - { - "name": "All contributors", - "homepage": "https://github.com/spomky-labs/cbor-bundle/contributors" - } - ], - "description": "CBOR Encoder/Decoder Bundle for Symfony.", - "homepage": "https://github.com/spomky-labs", - "keywords": [ - "Concise Binary Object Representation", - "RFC7049", - "bundle", - "cbor", - "symfony" - ], - "support": { - "issues": "https://github.com/Spomky-Labs/cbor-bundle/issues", - "source": "https://github.com/Spomky-Labs/cbor-bundle/tree/v3.0.0" - }, - "funding": [ - { - "url": "https://github.com/Spomky", - "type": "github" - }, - { - "url": "https://www.patreon.com/FlorentMorselli", - "type": "patreon" - } - ], - "time": "2021-11-23T21:41:00+00:00" - }, { "name": "spomky-labs/cbor-php", "version": "3.0.4", @@ -14037,16 +13957,16 @@ }, { "name": "web-auth/metadata-service", - "version": "4.7.9", + "version": "4.8.0", "source": { "type": "git", "url": "https://github.com/web-auth/webauthn-metadata-service.git", - "reference": "1da1fc6d8055c75af4e46cde169d7b920b8af90a" + "reference": "039e3ce40a06ab12f0090ac410da8e7a07fc2c2b" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/web-auth/webauthn-metadata-service/zipball/1da1fc6d8055c75af4e46cde169d7b920b8af90a", - "reference": "1da1fc6d8055c75af4e46cde169d7b920b8af90a", + "url": "https://api.github.com/repos/web-auth/webauthn-metadata-service/zipball/039e3ce40a06ab12f0090ac410da8e7a07fc2c2b", + "reference": "039e3ce40a06ab12f0090ac410da8e7a07fc2c2b", "shasum": "" }, "require": { @@ -14063,10 +13983,11 @@ "symfony/deprecation-contracts": "^3.2" }, "suggest": { + "phpdocumentor/reflection-docblock": "As of 4.5.x, the phpdocumentor/reflection-docblock component will become mandatory for converting objects such as the Metadata Statement", "psr/clock-implementation": "As of 4.5.x, the PSR Clock implementation will replace lcobucci/clock", "psr/log-implementation": "Recommended to receive logs from the library", - "web-token/jwt-key-mgmt": "Mandatory for fetching Metadata Statement from distant sources", - "web-token/jwt-signature-algorithm-ecdsa": "Mandatory for fetching Metadata Statement from distant sources" + "symfony/serializer": "As of 4.5.x, the symfony/serializer component will become mandatory for converting objects such as the Metadata Statement", + "web-token/jwt-library": "Mandatory for fetching Metadata Statement from distant sources" }, "type": "library", "extra": { @@ -14102,7 +14023,7 @@ "webauthn" ], "support": { - "source": "https://github.com/web-auth/webauthn-metadata-service/tree/4.7.9" + "source": "https://github.com/web-auth/webauthn-metadata-service/tree/4.8.0" }, "funding": [ { @@ -14114,20 +14035,20 @@ "type": "patreon" } ], - "time": "2023-10-07T13:59:48+00:00" + "time": "2024-02-24T09:40:29+00:00" }, { "name": "web-auth/webauthn-lib", - "version": "4.7.9", + "version": "4.8.0", "source": { "type": "git", "url": "https://github.com/web-auth/webauthn-lib.git", - "reference": "03a652042d7b5e919e449954d729ced26ee3c3c2" + "reference": "dee648c4a0971633c9434391c710bd3f244d6aed" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/web-auth/webauthn-lib/zipball/03a652042d7b5e919e449954d729ced26ee3c3c2", - "reference": "03a652042d7b5e919e449954d729ced26ee3c3c2", + "url": "https://api.github.com/repos/web-auth/webauthn-lib/zipball/dee648c4a0971633c9434391c710bd3f244d6aed", + "reference": "dee648c4a0971633c9434391c710bd3f244d6aed", "shasum": "" }, "require": { @@ -14148,10 +14069,7 @@ "suggest": { "psr/log-implementation": "Recommended to receive logs from the library", "symfony/event-dispatcher": "Recommended to use dispatched events", - "web-token/jwt-key-mgmt": "Mandatory for the AndroidSafetyNet Attestation Statement support", - "web-token/jwt-signature-algorithm-ecdsa": "Recommended for the AndroidSafetyNet Attestation Statement support", - "web-token/jwt-signature-algorithm-eddsa": "Recommended for the AndroidSafetyNet Attestation Statement support", - "web-token/jwt-signature-algorithm-rsa": "Mandatory for the AndroidSafetyNet Attestation Statement support" + "web-token/jwt-library": "Mandatory for the AndroidSafetyNet Attestation Statement support" }, "type": "library", "extra": { @@ -14187,7 +14105,7 @@ "webauthn" ], "support": { - "source": "https://github.com/web-auth/webauthn-lib/tree/4.7.9" + "source": "https://github.com/web-auth/webauthn-lib/tree/4.8.0" }, "funding": [ { @@ -14199,39 +14117,38 @@ "type": "patreon" } ], - "time": "2024-02-05T17:20:58+00:00" + "time": "2024-02-23T11:09:26+00:00" }, { "name": "web-auth/webauthn-symfony-bundle", - "version": "4.7.9", + "version": "4.8.0", "source": { "type": "git", "url": "https://github.com/web-auth/webauthn-symfony-bundle.git", - "reference": "f7a677c4063d1266d66dd4ef26833985a6afb4b9" + "reference": "d72050d6ce8cf6d7bd6180de7eb9204d1e4233a2" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/web-auth/webauthn-symfony-bundle/zipball/f7a677c4063d1266d66dd4ef26833985a6afb4b9", - "reference": "f7a677c4063d1266d66dd4ef26833985a6afb4b9", + "url": "https://api.github.com/repos/web-auth/webauthn-symfony-bundle/zipball/d72050d6ce8cf6d7bd6180de7eb9204d1e4233a2", + "reference": "d72050d6ce8cf6d7bd6180de7eb9204d1e4233a2", "shasum": "" }, "require": { "nyholm/psr7": "^1.5", "php": ">=8.1", "psr/event-dispatcher": "^1.0", - "spomky-labs/cbor-bundle": "^3.0", "symfony/config": "^6.1|^7.0", "symfony/dependency-injection": "^6.1|^7.0", "symfony/framework-bundle": "^6.1|^7.0", "symfony/http-client": "^6.1|^7.0", - "symfony/psr-http-message-bridge": "^2.1", + "symfony/psr-http-message-bridge": "^2.1|^6.1|^7.0", "symfony/security-bundle": "^6.1|^7.0", "symfony/security-core": "^6.1|^7.0", "symfony/security-http": "^6.1|^7.0", "symfony/serializer": "^6.1|^7.0", "symfony/validator": "^6.1|^7.0", "web-auth/webauthn-lib": "self.version", - "web-token/jwt-signature": "^3.1" + "web-token/jwt-library": "^3.3" }, "type": "symfony-bundle", "extra": { @@ -14270,7 +14187,7 @@ "webauthn" ], "support": { - "source": "https://github.com/web-auth/webauthn-symfony-bundle/tree/4.7.9" + "source": "https://github.com/web-auth/webauthn-symfony-bundle/tree/4.8.0" }, "funding": [ { @@ -14282,7 +14199,7 @@ "type": "patreon" } ], - "time": "2023-12-08T13:02:43+00:00" + "time": "2024-02-23T11:09:26+00:00" }, { "name": "web-token/jwt-library", @@ -14381,71 +14298,6 @@ ], "time": "2024-02-22T08:15:45+00:00" }, - { - "name": "web-token/jwt-signature", - "version": "3.3.0", - "source": { - "type": "git", - "url": "https://github.com/web-token/jwt-signature.git", - "reference": "eccfd59e658d4118414cf6d14229aa52eec387e7" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/web-token/jwt-signature/zipball/eccfd59e658d4118414cf6d14229aa52eec387e7", - "reference": "eccfd59e658d4118414cf6d14229aa52eec387e7", - "shasum": "" - }, - "require": { - "php": ">=8.1", - "web-token/jwt-library": "^3.3" - }, - "type": "library", - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Florent Morselli", - "homepage": "https://github.com/Spomky" - }, - { - "name": "All contributors", - "homepage": "https://github.com/web-token/jwt-framework/contributors" - } - ], - "description": "[DEPRECATED] Please use web-token/jwt-library instead.", - "homepage": "https://github.com/web-token", - "keywords": [ - "JOSE", - "JWE", - "JWK", - "JWKSet", - "JWS", - "Jot", - "RFC7515", - "RFC7516", - "RFC7517", - "RFC7518", - "RFC7519", - "RFC7520", - "bundle", - "jwa", - "jwt", - "symfony" - ], - "support": { - "source": "https://github.com/web-token/jwt-signature/tree/3.3.0" - }, - "funding": [ - { - "url": "https://www.patreon.com/FlorentMorselli", - "type": "patreon" - } - ], - "abandoned": "web-token/jwt-library", - "time": "2024-02-22T07:19:34+00:00" - }, { "name": "webmozart/assert", "version": "1.11.0", diff --git a/config/bundles.php b/config/bundles.php index 70b10fa5..b78bbc22 100644 --- a/config/bundles.php +++ b/config/bundles.php @@ -24,7 +24,6 @@ return [ Symfony\UX\Turbo\TurboBundle::class => ['all' => true], Jbtronics\TFAWebauthn\TFAWebauthnBundle::class => ['all' => true], Scheb\TwoFactorBundle\SchebTwoFactorBundle::class => ['all' => true], - SpomkyLabs\CborBundle\SpomkyLabsCborBundle::class => ['all' => true], Webauthn\Bundle\WebauthnBundle::class => ['all' => true], Nbgrp\OneloginSamlBundle\NbgrpOneloginSamlBundle::class => ['all' => true], Symfony\UX\StimulusBundle\StimulusBundle::class => ['all' => true], diff --git a/symfony.lock b/symfony.lock index f3f36c9f..278cef71 100644 --- a/symfony.lock +++ b/symfony.lock @@ -453,9 +453,6 @@ "shivas/versioning-bundle": { "version": "3.1.3" }, - "spomky-labs/cbor-bundle": { - "version": "v2.0.3" - }, "symfony/apache-pack": { "version": "1.0", "recipe": { From 60942c825495402a4e6075f5da0b14c92268206a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Tue, 27 Feb 2024 00:08:21 +0100 Subject: [PATCH 02/20] Added very basic livesearch feauture using algolia autocomplete --- .../elements/part_livesearch_controller.js | 77 +++++++++++++++++++ package.json | 3 + templates/homepage.html.twig | 6 ++ yarn.lock | 63 +++++++++++++++ 4 files changed, 149 insertions(+) create mode 100644 assets/controllers/elements/part_livesearch_controller.js diff --git a/assets/controllers/elements/part_livesearch_controller.js b/assets/controllers/elements/part_livesearch_controller.js new file mode 100644 index 00000000..32edecb6 --- /dev/null +++ b/assets/controllers/elements/part_livesearch_controller.js @@ -0,0 +1,77 @@ +/* + * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony). + * + * Copyright (C) 2019 - 2024 Jan Böhmer (https://github.com/jbtronics) + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published + * by the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +import { Controller } from "@hotwired/stimulus"; +import { autocomplete } from '@algolia/autocomplete-js'; +import "@algolia/autocomplete-theme-classic/dist/theme.css"; +import {marked} from "marked"; + +export default class extends Controller { + + _autocomplete; + + connect() { + // The endpoint for searching parts + const base_url = this.element.dataset.autocomplete; + // The URL template for the part detail pages + const part_detail_uri_template = this.element.dataset.detailUrl; + + this._autocomplete = autocomplete({ + container: this.element, + placeholder: "Search for parts", + getSources({ query }) { + return [ + { + sourceId: 'parts', + getItems() { + const url = base_url.replace('__QUERY__', encodeURIComponent(query)); + + return fetch(url) + .then((response) => response.json()); + }, + templates: { + item({item, components, html}) { + const details_url = part_detail_uri_template.replace('__ID__', item.id); + + + return html` + +
+
+ ${item.name} +
+
+
+ ${components.Highlight({hit: item, attribute: 'name'})} +
+
+ ${components.Snippet({hit: item, attribute: 'description'})} +
+
+
+ + `; + }, + }, + }, + ]; + }, + }); + } +} \ No newline at end of file diff --git a/package.json b/package.json index 8a9d78fe..bd0e7701 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,9 @@ "build": "encore production --progress" }, "dependencies": { + "@algolia/autocomplete-js": "^1.17.0", + "@algolia/autocomplete-plugin-redirect-url": "^1.17.0", + "@algolia/autocomplete-theme-classic": "^1.17.0", "@ckeditor/ckeditor5-alignment": "^41.0.0", "@ckeditor/ckeditor5-autoformat": "^41.0.0", "@ckeditor/ckeditor5-basic-styles": "^41.0.0", diff --git a/templates/homepage.html.twig b/templates/homepage.html.twig index 138257c7..f711b227 100644 --- a/templates/homepage.html.twig +++ b/templates/homepage.html.twig @@ -4,6 +4,12 @@ {% block content %} + +
+
+ + {% if is_granted('@system.show_updates') %} {{ nv.new_version_alert(new_version_available, new_version, new_version_url) }} {% endif %} diff --git a/yarn.lock b/yarn.lock index 3edd73be..bf65595e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,59 @@ # yarn lockfile v1 +"@algolia/autocomplete-core@1.17.0": + version "1.17.0" + resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.17.0.tgz#b9e62d9677dc0ee818bb59d917ff58908356a9a0" + integrity sha512-6E4sVb5+fGtSQs9mULlxUH84OWFUVZPMapa5dMCtUc7KyDRLY6+X/dA8xbDA8CX5phdBn1plLUET1B6NZnrZuw== + dependencies: + "@algolia/autocomplete-plugin-algolia-insights" "1.17.0" + "@algolia/autocomplete-shared" "1.17.0" + +"@algolia/autocomplete-js@1.17.0", "@algolia/autocomplete-js@^1.17.0": + version "1.17.0" + resolved "https://registry.yarnpkg.com/@algolia/autocomplete-js/-/autocomplete-js-1.17.0.tgz#91f0ef2232646316a26c79dadbeb2e7791de623c" + integrity sha512-RbD98hXtZOl6VohSAo7kMOFWQHR1x4wWaJFadJradFQ1TAA9hFEyirSIM+yT96UpKkdi08V2EBI+YwZ3/VETvw== + dependencies: + "@algolia/autocomplete-core" "1.17.0" + "@algolia/autocomplete-preset-algolia" "1.17.0" + "@algolia/autocomplete-shared" "1.17.0" + htm "^3.1.1" + preact "^10.13.2" + +"@algolia/autocomplete-plugin-algolia-insights@1.17.0": + version "1.17.0" + resolved "https://registry.yarnpkg.com/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.17.0.tgz#dcec9b03a47375860a9f927816a1275d885ebdff" + integrity sha512-zbWImu+VxBDzUQONEhQXq3OzlipHLEtWbL4Nf/VOb1p1qHG/f96jCegOzzEZVPiQvZpRJnmhCUmsYNHlIBxKWw== + dependencies: + "@algolia/autocomplete-shared" "1.17.0" + +"@algolia/autocomplete-plugin-redirect-url@^1.17.0": + version "1.17.0" + resolved "https://registry.yarnpkg.com/@algolia/autocomplete-plugin-redirect-url/-/autocomplete-plugin-redirect-url-1.17.0.tgz#843a7af551a29e6c5d2a6585c17b7dcff50bee12" + integrity sha512-C/xvPKKM0+uHRvKDi7sE/P8qEtlo9lhDEB2YQJRY9X90osqlqwY4HqRZbauz4wGnHckrG0iqIN+xcCNEFN3Jxg== + dependencies: + "@algolia/autocomplete-core" "1.17.0" + "@algolia/autocomplete-js" "1.17.0" + "@algolia/autocomplete-preset-algolia" "1.17.0" + "@algolia/autocomplete-shared" "1.17.0" + +"@algolia/autocomplete-preset-algolia@1.17.0": + version "1.17.0" + resolved "https://registry.yarnpkg.com/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.17.0.tgz#9d7d9673a922d75dfbedd3119e7ffa76f4c118c6" + integrity sha512-DhTkMs/9BzThhTU2nSTpQxVxHLzaRDZLid4Tf56D8s9IhEGfmzbNuLRmJNzgAOPv1smHtUErndmC+S9QNMDEJA== + dependencies: + "@algolia/autocomplete-shared" "1.17.0" + +"@algolia/autocomplete-shared@1.17.0": + version "1.17.0" + resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.17.0.tgz#7d0a8e504fe555c48df7ae6854d3d6633b0b32f5" + integrity sha512-7su4KH/2q2Fhud2VujUNhCMbIh7yp6wqWR3UuVje5P3kDRhTotPRmg3iRQi48YRYkk9o+airsrLl+rxJ/9FWng== + +"@algolia/autocomplete-theme-classic@^1.17.0": + version "1.17.0" + resolved "https://registry.yarnpkg.com/@algolia/autocomplete-theme-classic/-/autocomplete-theme-classic-1.17.0.tgz#bbd79df8f5240b3ddd3f9cdc9b8273753f15cd25" + integrity sha512-FsW/J/mG1YIPv93/QQ7KxMVNXAiVi9accGgoK2y3zDz58WpVgUug97SUoQzP4I9EMZAZAHQo0QbWXxpqTWkcOA== + "@ampproject/remapping@^2.2.0": version "2.2.1" resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630" @@ -4268,6 +4321,11 @@ hpack.js@^2.1.6: readable-stream "^2.0.1" wbuf "^1.1.0" +htm@^3.1.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/htm/-/htm-3.1.1.tgz#49266582be0dc66ed2235d5ea892307cc0c24b78" + integrity sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ== + html-encoding-sniffer@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3" @@ -5997,6 +6055,11 @@ postcss@^8.2.14, postcss@^8.2.15, postcss@^8.4.12, postcss@^8.4.24, postcss@^8.4 picocolors "^1.0.0" source-map-js "^1.0.2" +preact@^10.13.2: + version "10.19.6" + resolved "https://registry.yarnpkg.com/preact/-/preact-10.19.6.tgz#66007b67aad4d11899f583df1b0116d94a89b8f5" + integrity sha512-gympg+T2Z1fG1unB8NH29yHJwnEaCH37Z32diPDku316OTnRPeMbiRV9kTrfZpocXjdfnWuFUl/Mj4BHaf6gnw== + prelude-ls@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" From 18eb0467eea4c2b65c1fdf947955394efe9480c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Tue, 27 Feb 2024 00:28:17 +0100 Subject: [PATCH 03/20] Integrated algolia autocomplete search into navbar --- .../elements/part_livesearch_controller.js | 17 +++++++++++++++++ templates/_navbar_search.html.twig | 6 ++++-- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/assets/controllers/elements/part_livesearch_controller.js b/assets/controllers/elements/part_livesearch_controller.js index 32edecb6..a1ad936b 100644 --- a/assets/controllers/elements/part_livesearch_controller.js +++ b/assets/controllers/elements/part_livesearch_controller.js @@ -24,6 +24,8 @@ import {marked} from "marked"; export default class extends Controller { + static targets = ["input"]; + _autocomplete; connect() { @@ -32,9 +34,24 @@ export default class extends Controller { // The URL template for the part detail pages const part_detail_uri_template = this.element.dataset.detailUrl; + const that = this; + this._autocomplete = autocomplete({ container: this.element, + panelContainer: document.body, + panelPlacement: 'end', placeholder: "Search for parts", + onSubmit({state, event, ...setters}) { + //Put the current text into each target input field + const input = that.inputTarget; + + if (!input) { + return; + } + + input.value = state.query; + input.form.requestSubmit(); + }, getSources({ query }) { return [ { diff --git a/templates/_navbar_search.html.twig b/templates/_navbar_search.html.twig index f13e5c96..d4452533 100644 --- a/templates/_navbar_search.html.twig +++ b/templates/_navbar_search.html.twig @@ -69,6 +69,8 @@ - - +
+ +
\ No newline at end of file From 4398b8698c6bea527169eac1bab788d7d53159d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Tue, 27 Feb 2024 00:33:48 +0100 Subject: [PATCH 04/20] Set proper darkmode attribute for algolia autocomplete --- assets/controllers/common/darkmode_controller.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/assets/controllers/common/darkmode_controller.js b/assets/controllers/common/darkmode_controller.js index 71111166..c5c15ab8 100644 --- a/assets/controllers/common/darkmode_controller.js +++ b/assets/controllers/common/darkmode_controller.js @@ -91,6 +91,9 @@ export default class extends Controller { _enableDarkmode() { //Add data-bs-theme="dark" to the html tag document.documentElement.setAttribute('data-bs-theme', 'dark'); + + //Add data-theme="dark" to the body tag for algolia autocomplete + document.body.setAttribute('data-theme', 'dark'); } /** @@ -100,6 +103,9 @@ export default class extends Controller { _disableDarkmode() { //Set data-bs-theme to light document.documentElement.setAttribute('data-bs-theme', 'light'); + + //Add data-theme="dark" to the body tag for algolia autocomplete + document.body.setAttribute('data-theme', 'light'); } From a3dcd1a0a80804e9f448058ace486731aa0d685d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Tue, 27 Feb 2024 00:39:38 +0100 Subject: [PATCH 05/20] Added recent searches to search --- assets/controllers/elements/part_livesearch_controller.js | 8 ++++++++ package.json | 2 +- yarn.lock | 6 +++--- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/assets/controllers/elements/part_livesearch_controller.js b/assets/controllers/elements/part_livesearch_controller.js index a1ad936b..338cb775 100644 --- a/assets/controllers/elements/part_livesearch_controller.js +++ b/assets/controllers/elements/part_livesearch_controller.js @@ -20,6 +20,7 @@ import { Controller } from "@hotwired/stimulus"; import { autocomplete } from '@algolia/autocomplete-js'; import "@algolia/autocomplete-theme-classic/dist/theme.css"; +import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches'; import {marked} from "marked"; export default class extends Controller { @@ -36,10 +37,17 @@ export default class extends Controller { const that = this; + const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({ + key: 'RECENT_SEARCH', + limit: 5, + }); + this._autocomplete = autocomplete({ container: this.element, panelContainer: document.body, panelPlacement: 'end', + plugins: [recentSearchesPlugin], + openOnFocus: true, placeholder: "Search for parts", onSubmit({state, event, ...setters}) { //Put the current text into each target input field diff --git a/package.json b/package.json index bd0e7701..bafa31e2 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ }, "dependencies": { "@algolia/autocomplete-js": "^1.17.0", - "@algolia/autocomplete-plugin-redirect-url": "^1.17.0", + "@algolia/autocomplete-plugin-recent-searches": "^1.17.0", "@algolia/autocomplete-theme-classic": "^1.17.0", "@ckeditor/ckeditor5-alignment": "^41.0.0", "@ckeditor/ckeditor5-autoformat": "^41.0.0", diff --git a/yarn.lock b/yarn.lock index bf65595e..ab8b5e62 100644 --- a/yarn.lock +++ b/yarn.lock @@ -28,10 +28,10 @@ dependencies: "@algolia/autocomplete-shared" "1.17.0" -"@algolia/autocomplete-plugin-redirect-url@^1.17.0": +"@algolia/autocomplete-plugin-recent-searches@^1.17.0": version "1.17.0" - resolved "https://registry.yarnpkg.com/@algolia/autocomplete-plugin-redirect-url/-/autocomplete-plugin-redirect-url-1.17.0.tgz#843a7af551a29e6c5d2a6585c17b7dcff50bee12" - integrity sha512-C/xvPKKM0+uHRvKDi7sE/P8qEtlo9lhDEB2YQJRY9X90osqlqwY4HqRZbauz4wGnHckrG0iqIN+xcCNEFN3Jxg== + resolved "https://registry.yarnpkg.com/@algolia/autocomplete-plugin-recent-searches/-/autocomplete-plugin-recent-searches-1.17.0.tgz#ed340649481398feee12a9e7f1bfd66f90e1fbab" + integrity sha512-di5ZEFx0UgK7sR5pxon9NKiFrLL26J5xwL7ihhK4rHrSdRhSvRATr9d8uaShAZIveEUTMd/cZd6C+95Y1YrcdQ== dependencies: "@algolia/autocomplete-core" "1.17.0" "@algolia/autocomplete-js" "1.17.0" From c87f809d12f3c10c1e3dce81a1a8b96fd25d6c7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Tue, 27 Feb 2024 23:02:05 +0100 Subject: [PATCH 06/20] Added header to part livesearch dropdown part results --- assets/controllers/elements/part_livesearch_controller.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/controllers/elements/part_livesearch_controller.js b/assets/controllers/elements/part_livesearch_controller.js index 338cb775..2a78d860 100644 --- a/assets/controllers/elements/part_livesearch_controller.js +++ b/assets/controllers/elements/part_livesearch_controller.js @@ -71,6 +71,10 @@ export default class extends Controller { .then((response) => response.json()); }, templates: { + header({ html }) { + return html`Parts +
`; + }, item({item, components, html}) { const details_url = part_detail_uri_template.replace('__ID__', item.id); From e16aa31ddf3ecf1c1a608716452f7041a84c8e88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Tue, 27 Feb 2024 23:05:24 +0100 Subject: [PATCH 07/20] Fixed z-index of autocomplete dropdown --- .../elements/part_livesearch_controller.js | 1 + .../css/components/autocomplete_bootstrap.css | 27 +++++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 assets/css/components/autocomplete_bootstrap.css diff --git a/assets/controllers/elements/part_livesearch_controller.js b/assets/controllers/elements/part_livesearch_controller.js index 2a78d860..693de5bd 100644 --- a/assets/controllers/elements/part_livesearch_controller.js +++ b/assets/controllers/elements/part_livesearch_controller.js @@ -20,6 +20,7 @@ import { Controller } from "@hotwired/stimulus"; import { autocomplete } from '@algolia/autocomplete-js'; import "@algolia/autocomplete-theme-classic/dist/theme.css"; +import "../../css/components/autocomplete_bootstrap.css"; import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches'; import {marked} from "marked"; diff --git a/assets/css/components/autocomplete_bootstrap.css b/assets/css/components/autocomplete_bootstrap.css new file mode 100644 index 00000000..fd06853e --- /dev/null +++ b/assets/css/components/autocomplete_bootstrap.css @@ -0,0 +1,27 @@ +/* + * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony). + * + * Copyright (C) 2019 - 2024 Jan Böhmer (https://github.com/jbtronics) + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published + * by the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +/*** + * Override some styles from the algolia autocomplete library to harmonize more with the bootstrap theme + */ + +/** Ensure that the autocomplete dropdown is always on top */ +.aa-Panel { + z-index: 1000; +} From c662dcfcd91013cc55347117727e352f638963c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Tue, 27 Feb 2024 23:39:49 +0100 Subject: [PATCH 08/20] Started to make the autocomplete theme more bootstrap like --- .../controllers/common/darkmode_controller.js | 6 -- .../css/components/autocomplete_bootstrap.css | 79 +++++++++++++++++++ 2 files changed, 79 insertions(+), 6 deletions(-) diff --git a/assets/controllers/common/darkmode_controller.js b/assets/controllers/common/darkmode_controller.js index c5c15ab8..71111166 100644 --- a/assets/controllers/common/darkmode_controller.js +++ b/assets/controllers/common/darkmode_controller.js @@ -91,9 +91,6 @@ export default class extends Controller { _enableDarkmode() { //Add data-bs-theme="dark" to the html tag document.documentElement.setAttribute('data-bs-theme', 'dark'); - - //Add data-theme="dark" to the body tag for algolia autocomplete - document.body.setAttribute('data-theme', 'dark'); } /** @@ -103,9 +100,6 @@ export default class extends Controller { _disableDarkmode() { //Set data-bs-theme to light document.documentElement.setAttribute('data-bs-theme', 'light'); - - //Add data-theme="dark" to the body tag for algolia autocomplete - document.body.setAttribute('data-theme', 'light'); } diff --git a/assets/css/components/autocomplete_bootstrap.css b/assets/css/components/autocomplete_bootstrap.css index fd06853e..83a9f79a 100644 --- a/assets/css/components/autocomplete_bootstrap.css +++ b/assets/css/components/autocomplete_bootstrap.css @@ -25,3 +25,82 @@ .aa-Panel { z-index: 1000; } + +/** Use a form definition similar to bootstraps form-control */ +.aa-Form { + background-color: var(--bs-body-bg); + border: var(--bs-border-width) solid var(--bs-border-color); + border-radius: var(--bs-border-radius); + color: var(--bs-body-color); + transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; + +} + +.aa-Form:focus-within { + background-color: var(--bs-body-bg); + border-color: #86b7fe; + box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25); + color: var(--bs-body-color); + outline: 0; +} + +/** Use a panel definition similar to bootstraps dropdown */ +.aa-Panel { + --bs-dropdown-zindex: 1000; + --bs-dropdown-min-width: 10rem; + --bs-dropdown-padding-x: 0; + --bs-dropdown-padding-y: 0.5rem; + --bs-dropdown-spacer: 0.125rem; + --bs-dropdown-font-size: 1rem; + --bs-dropdown-color: var(--bs-body-color); + --bs-dropdown-bg: var(--bs-body-bg); + --bs-dropdown-border-color: var(--bs-border-color-translucent); + --bs-dropdown-border-radius: var(--bs-border-radius); + --bs-dropdown-border-width: var(--bs-border-width); + --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width)); + --bs-dropdown-divider-bg: var(--bs-border-color-translucent); + --bs-dropdown-divider-margin-y: 0.5rem; + --bs-dropdown-box-shadow: var(--bs-box-shadow); + --bs-dropdown-link-color: var(--bs-body-color); + --bs-dropdown-link-hover-color: var(--bs-body-color); + --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg); + --bs-dropdown-link-active-color: #fff; + --bs-dropdown-link-active-bg: #0d6efd; + --bs-dropdown-link-disabled-color: var(--bs-tertiary-color); + --bs-dropdown-item-padding-x: 1rem; + --bs-dropdown-item-padding-y: 0.25rem; + --bs-dropdown-header-color: #6c757d; + --bs-dropdown-header-padding-x: 1rem; + --bs-dropdown-header-padding-y: 0.5rem; + + padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x); + margin: 0; + font-size: var(--bs-dropdown-font-size); + color: var(--bs-dropdown-color); + background-color: var(--bs-dropdown-bg); + background-clip: padding-box; + border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color); + border-radius: var(--bs-dropdown-border-radius); +} + +:root { + /** Font colors */ + --aa-text-color-rgb: var(--bs-body-color-rgb); + --aa-primary-color-rgb: var(--bs-primary-text-emphasis); + --aa-muted-color-rgb: var(--bs-secondary-text-emphasis); + + /** Border colors */ + --aa-panel-border-color-rgb: var(--bs-dropdown-border-color); + --aa-input-border-color-rgb: var(--bs-border-color); + --aa-input-border-color-alpha: 1.0; + + /* Background colors */ + --aa-background-color-rgb: var(--bs-dropdown-bg); + --aa-input-background-color-rgb: var(--bs-body-color); + --aa-selected-color-rgb: var(--bs-dropdown-link-hover-bg); + --aa-description-highlight-background-color-rgb: var(--bs-secondary-bg); + + /** Shadow colors */ + --aa-panel-shadow: var(--bs-dropdown-box-shadow) + +} \ No newline at end of file From 41e45599d494883e64505453c76d7a40dfe301c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Wed, 28 Feb 2024 21:38:11 +0100 Subject: [PATCH 09/20] Use a modified theme for algolia/autocomplete, which plays better with bootstrap --- .../elements/part_livesearch_controller.js | 4 +- .../autocomplete_bootstrap_theme.css | 1119 +++++++++++++++++ 2 files changed, 1121 insertions(+), 2 deletions(-) create mode 100644 assets/css/components/autocomplete_bootstrap_theme.css diff --git a/assets/controllers/elements/part_livesearch_controller.js b/assets/controllers/elements/part_livesearch_controller.js index 693de5bd..b25b3544 100644 --- a/assets/controllers/elements/part_livesearch_controller.js +++ b/assets/controllers/elements/part_livesearch_controller.js @@ -19,8 +19,8 @@ import { Controller } from "@hotwired/stimulus"; import { autocomplete } from '@algolia/autocomplete-js'; -import "@algolia/autocomplete-theme-classic/dist/theme.css"; -import "../../css/components/autocomplete_bootstrap.css"; +//import "@algolia/autocomplete-theme-classic/dist/theme.css"; +import "../../css/components/autocomplete_bootstrap_theme.css"; import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches'; import {marked} from "marked"; diff --git a/assets/css/components/autocomplete_bootstrap_theme.css b/assets/css/components/autocomplete_bootstrap_theme.css new file mode 100644 index 00000000..74d22c59 --- /dev/null +++ b/assets/css/components/autocomplete_bootstrap_theme.css @@ -0,0 +1,1119 @@ +/* + * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony). + * + * Copyright (C) 2019 - 2024 Jan Böhmer (https://github.com/jbtronics) + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published + * by the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +/*** + * This file is based on the autocomplete-theme-classic from Algolia and modifies it to fit better into the bootstrap 5 + * theme of Part-DB. + */ + +/*! @algolia/autocomplete-theme-classic 1.17.0 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */ +/* ----------------*/ +/* 1. CSS Variables*/ +/* 2. Dark Mode*/ +/* 3. Autocomplete*/ +/* 4. Panel*/ +/* 5. Sources*/ +/* 6. Hit Layout*/ +/* 7. Panel Header*/ +/* 8. Panel Footer*/ +/* 9. Detached Mode*/ +/* 10. Gradients*/ +/* 11. Utilities*/ +/* ----------------*/ +/* Note:*/ +/* This theme reflects the markup structure of autocomplete with SCSS indentation.*/ +/* We use the SASS `@at-root` function to keep specificity low.*/ +/* ----------------*/ +/* 1. CSS Variables*/ +/* ----------------*/ +:root { + /* Input*/ + --aa-search-input-height: 44px; + --aa-input-icon-size: 20px; + /* Size and spacing*/ + --aa-base-unit: 16; + --aa-spacing-factor: 1; + --aa-spacing: calc(var(--aa-base-unit) * var(--aa-spacing-factor) * 1px); + --aa-spacing-half: calc(var(--aa-spacing) / 2); + --aa-panel-max-height: 650px; + /* Z-index*/ + --aa-base-z-index: 9999; + /* Font*/ + --aa-font-size: calc(var(--aa-base-unit) * 1px); + --aa-font-family: inherit; + --aa-font-weight-medium: 500; + --aa-font-weight-semibold: 600; + --aa-font-weight-bold: 700; + /* Icons*/ + --aa-icon-size: 20px; + --aa-icon-stroke-width: 1.6; + --aa-icon-color-rgb: 119, 119, 163; + --aa-icon-color-alpha: 1; + --aa-action-icon-size: 20px; + /* Text colors*/ + --aa-text-color-rgb: 38, 38, 39; + --aa-text-color-alpha: 1; + --aa-primary-color-rgb: 62, 52, 211; + --aa-primary-color-alpha: 0.2; + --aa-muted-color-rgb: 128, 126, 163; + --aa-muted-color-alpha: 0.6; + /* Border colors*/ + --aa-panel-border-color-rgb: 128, 126, 163; + --aa-panel-border-color-alpha: 0.3; + --aa-input-border-color-rgb: 128, 126, 163; + --aa-input-border-color-alpha: 0.8; + /* Background colors*/ + --aa-background-color-rgb: 255, 255, 255; + --aa-background-color-alpha: 1; + --aa-input-background-color-rgb: 255, 255, 255; + --aa-input-background-color-alpha: 1; + --aa-selected-color-rgb: 179, 173, 214; + --aa-selected-color-alpha: 0.205; + --aa-description-highlight-background-color-rgb: 245, 223, 77; + --aa-description-highlight-background-color-alpha: 0.5; + /* Detached mode*/ + --aa-detached-media-query: (max-width: 680px); + --aa-detached-modal-media-query: (min-width: 680px); + --aa-detached-modal-max-width: 680px; + --aa-detached-modal-max-height: 500px; + --aa-overlay-color-rgb: 115, 114, 129; + --aa-overlay-color-alpha: 0.4; + /* Shadows*/ + --aa-panel-shadow: 0 0 0 1px rgba(35, 38, 59, .1), + 0 6px 16px -4px rgba(35, 38, 59, .15); + /* Scrollbar*/ + --aa-scrollbar-width: 13px; + --aa-scrollbar-track-background-color-rgb: 234, 234, 234; + --aa-scrollbar-track-background-color-alpha: 1; + --aa-scrollbar-thumb-background-color-rgb: var(--aa-background-color-rgb); + --aa-scrollbar-thumb-background-color-alpha: 1; + /* Touch screens*/ +} +@media (hover: none) and (pointer: coarse) { + :root { + --aa-spacing-factor: 1.2; + --aa-action-icon-size: 22px; + } +} + +/* ----------------*/ +/* 2. Dark Mode*/ +/* ----------------*/ +body { + /* stylelint-disable selector-no-qualifying-type, selector-class-pattern */ + /* stylelint-enable selector-no-qualifying-type, selector-class-pattern */ +} + +/* Reset for `@extend`*/ +.aa-Panel *, .aa-Autocomplete *, +.aa-DetachedFormContainer * { + box-sizing: border-box; +} + +/* Init for `@extend`*/ +.aa-Panel, .aa-Autocomplete, +.aa-DetachedFormContainer { + color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); + color: var(--bs-body-color); + font-family: inherit; + font-weight: normal; + line-height: 1em; + margin: 0; + padding: 0; + text-align: left; +} + +/* ----------------*/ +/* 3. Autocomplete*/ +/* ----------------*/ +.aa-Autocomplete, +.aa-DetachedFormContainer { + /* Search box*/ +} +.aa-Form { + align-items: center; + background-color: var(--bs-body-bg); + border: var(--bs-border-width) solid var(--bs-border-color); + border-radius: var(--bs-border-radius); + color: var(--bs-body-color); + transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; + display: flex; + line-height: 1em; + margin: 0; + position: relative; + width: 100%; +} +.aa-Form:focus-within { + background-color: var(--bs-body-bg); + border-color: #86b7fe; + box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25); + color: var(--bs-body-color); + outline: 0; +} +.aa-InputWrapperPrefix { + align-items: center; + display: flex; + flex-shrink: 0; + height: 44px; + height: var(--aa-search-input-height); + order: 1; + /* Container for search and loading icons*/ +} +.aa-Label, +.aa-LoadingIndicator { + cursor: auto; + cursor: initial; + flex-shrink: 0; + height: 100%; + padding: 0; + text-align: left; +} +.aa-Label svg, +.aa-LoadingIndicator svg { + color: var(--bs-primary-text-emphasis); + height: auto; + max-height: 20px; + max-height: var(--aa-input-icon-size); + stroke-width: 1.6; + stroke-width: var(--aa-icon-stroke-width); + width: 20px; + width: var(--aa-input-icon-size); +} + +.aa-SubmitButton, +.aa-LoadingIndicator { + height: 100%; + padding-left: calc((16 * 1 * 1px) * 0.75 - 1px); + padding-left: calc(calc(16 * 1 * 1px) * 0.75 - 1px); + padding-left: calc(var(--aa-spacing) * 0.75 - 1px); + padding-right: calc((16 * 1 * 1px) / 2); + padding-right: calc(calc(16 * 1 * 1px) / 2); + padding-right: var(--aa-spacing-half); + width: calc((16 * 1 * 1px) * 1.75 + 20px - 1px); + width: calc(calc(16 * 1 * 1px) * 1.75 + 20px - 1px); + width: calc(var(--aa-spacing) * 1.75 + var(--aa-icon-size) - 1px); +} +@media (hover: none) and (pointer: coarse) { + .aa-SubmitButton, + .aa-LoadingIndicator { + padding-left: calc(((16 * 1 * 1px) / 2) / 2 - 1px); + padding-left: calc(calc(calc(16 * 1 * 1px) / 2) / 2 - 1px); + padding-left: calc(var(--aa-spacing-half) / 2 - 1px); + width: calc(20px + (16 * 1 * 1px) * 1.25 - 1px); + width: calc(20px + calc(16 * 1 * 1px) * 1.25 - 1px); + width: calc(var(--aa-icon-size) + var(--aa-spacing) * 1.25 - 1px); + } +} + +.aa-SubmitButton { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: none; + border: 0; + margin: 0; +} + +.aa-LoadingIndicator { + align-items: center; + display: flex; + justify-content: center; +} +.aa-LoadingIndicator[hidden] { + display: none; +} + +.aa-InputWrapper { + order: 3; + position: relative; + width: 100%; + /* Search box input (with placeholder and query)*/ +} +.aa-Input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: none; + border: 0; + color: var(--bs-body-color); + font: inherit; + height: 44px; + height: var(--aa-search-input-height); + padding: 0; + width: 100%; + /* Focus is set and styled on the parent, it isn't necessary here*/ + /* Remove native appearance*/ +} +.aa-Input::-moz-placeholder { + color: var(--bs-secondary-color); + opacity: 1; +} +.aa-Input::placeholder { + color: var(--bs-secondary-color); + opacity: 1; +} +.aa-Input:focus { + box-shadow: none; + outline: none; +} +.aa-Input::-webkit-search-decoration, .aa-Input::-webkit-search-cancel-button, .aa-Input::-webkit-search-results-button, .aa-Input::-webkit-search-results-decoration { + -webkit-appearance: none; + appearance: none; +} + +.aa-InputWrapperSuffix { + align-items: center; + display: flex; + height: 44px; + height: var(--aa-search-input-height); + order: 4; + /* Accelerator to clear the query*/ +} +.aa-ClearButton { + align-items: center; + background: none; + border: 0; + color: var(--bs-secondary-color); + cursor: pointer; + display: flex; + height: 100%; + margin: 0; + padding: 0 calc((16 * 1 * 1px) * 0.8333333333 - 0.5px); + padding: 0 calc(calc(16 * 1 * 1px) * 0.8333333333 - 0.5px); + padding: 0 calc(var(--aa-spacing) * 0.8333333333 - 0.5px); +} +@media (hover: none) and (pointer: coarse) { + .aa-ClearButton { + padding: 0 calc((16 * 1 * 1px) * 0.6666666667 - 0.5px); + padding: 0 calc(calc(16 * 1 * 1px) * 0.6666666667 - 0.5px); + padding: 0 calc(var(--aa-spacing) * 0.6666666667 - 0.5px); + } +} +.aa-ClearButton:hover, .aa-ClearButton:focus { + color: var(--bs-body-color); +} +.aa-ClearButton[hidden] { + display: none; +} +.aa-ClearButton svg { + stroke-width: 1.6; + stroke-width: var(--aa-icon-stroke-width); + width: 20px; + width: var(--aa-icon-size); +} + +/* ----------------*/ +/* 4. Panel*/ +/* ----------------*/ +.aa-Panel { + --bs-dropdown-header-padding-x: 1rem; + --bs-dropdown-header-padding-y: 0.5rem; + --bs-dropdown-font-size: 1rem; + --bs-dropdown-color: var(--bs-body-color); + --bs-dropdown-bg: var(--bs-body-bg); + --bs-dropdown-border-color: var(--bs-border-color-translucent); + --bs-dropdown-border-radius: var(--bs-border-radius); + --bs-dropdown-border-width: var(--bs-border-width); + + z-index: 1000; + + box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1); + overflow: hidden; + position: absolute; + transition: opacity 200ms ease-in, filter 200ms ease-in; + /* When a request isn't resolved yet*/ + + padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x); + margin: 0; + font-size: var(--bs-dropdown-font-size); + color: var(--bs-dropdown-color); + background-color: var(--bs-dropdown-bg); + background-clip: padding-box; + border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color); + border-radius: var(--bs-dropdown-border-radius); +} +@media screen and (prefers-reduced-motion) { + .aa-Panel { + transition: none; + } +} +.aa-Panel button { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: none; + border: 0; + margin: 0; + padding: 0; +} +.aa-PanelLayout { + height: 100%; + margin: 0; + max-height: 650px; + max-height: var(--aa-panel-max-height); + overflow-y: auto; + padding: 0; + position: relative; + text-align: left; +} +.aa-PanelLayoutColumns--twoGolden { + display: grid; + grid-template-columns: 39.2% auto; + overflow: hidden; + padding: 0; +} + +.aa-PanelLayoutColumns--two { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + overflow: hidden; + padding: 0; +} + +.aa-PanelLayoutColumns--three { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + overflow: hidden; + padding: 0; +} + +.aa-Panel--stalled .aa-Source { + filter: grayscale(1); + opacity: 0.8; +} + +.aa-Panel--scrollable { + margin: 0; + max-height: 650px; + max-height: var(--aa-panel-max-height); + overflow-x: hidden; + overflow-y: auto; + padding: calc((16 * 1 * 1px) / 2); + padding: calc(calc(16 * 1 * 1px) / 2); + padding: var(--aa-spacing-half); + scrollbar-color: rgba(255, 255, 255, 1) rgba(234, 234, 234, 1); + scrollbar-color: rgba(var(--aa-scrollbar-thumb-background-color-rgb), var(--aa-scrollbar-thumb-background-color-alpha)) rgba(var(--aa-scrollbar-track-background-color-rgb), var(--aa-scrollbar-track-background-color-alpha)); + scrollbar-width: thin; +} +.aa-Panel--scrollable::-webkit-scrollbar { + width: 13px; + width: var(--aa-scrollbar-width); +} +.aa-Panel--scrollable::-webkit-scrollbar-track { + background-color: rgba(234, 234, 234, 1); + background-color: rgba(var(--aa-scrollbar-track-background-color-rgb), var(--aa-scrollbar-track-background-color-alpha)); +} +.aa-Panel--scrollable::-webkit-scrollbar-thumb { + background-color: rgba(255, 255, 255, 1); + background-color: rgba(var(--aa-scrollbar-thumb-background-color-rgb), var(--aa-scrollbar-thumb-background-color-alpha)); + border-color: rgba(234, 234, 234, 1); + border-color: rgba(var(--aa-scrollbar-track-background-color-rgb), var(--aa-scrollbar-track-background-color-alpha)); + border-radius: 9999px; + border-style: solid; + border-width: 3px 2px 3px 3px; +} + +/* ----------------*/ +/* 5. Sources*/ +/* Each source can be styled independently*/ +/* ----------------*/ +.aa-Source { + margin: 0; + padding: 0; + position: relative; + width: 100%; + /* List of results inside the source*/ + /* Source title*/ + /* See all button*/ +} +.aa-Source:empty { + /* Hide empty section*/ + display: none; +} +.aa-SourceNoResults { + font-size: 1em; + margin: 0; + padding: calc(16 * 1 * 1px); + padding: var(--aa-spacing); +} + +.aa-List { + list-style: none; + margin: 0; + padding: 0; + position: relative; +} + +.aa-SourceHeader { + margin: calc((16 * 1 * 1px) / 2) 0.5em calc((16 * 1 * 1px) / 2) 0; + margin: calc(calc(16 * 1 * 1px) / 2) 0.5em calc(calc(16 * 1 * 1px) / 2) 0; + margin: var(--aa-spacing-half) 0.5em var(--aa-spacing-half) 0; + padding: 0; + position: relative; + /* Hide empty header*/ + /* Title typography*/ + /* Line separator*/ +} +.aa-SourceHeader:empty { + display: none; +} +.aa-SourceHeaderTitle { + background: var(--bs-body-bg); + color: var(--bs-primary-text-emphasis); + display: inline-block; + font-size: 0.8em; + font-weight: 600; + font-weight: var(--aa-font-weight-semibold); + margin: 0; + padding: 0 calc((16 * 1 * 1px) / 2) 0 0; + padding: 0 calc(calc(16 * 1 * 1px) / 2) 0 0; + padding: 0 var(--aa-spacing-half) 0 0; + position: relative; + z-index: 9999; + z-index: var(--aa-base-z-index); +} + +.aa-SourceHeaderLine { + border-bottom: solid 1px var(--bs-primary-text-emphasis); + display: block; + height: 2px; + left: 0; + margin: 0; + opacity: 0.3; + padding: 0; + position: absolute; + right: 0; + top: calc((16 * 1 * 1px) / 2); + top: calc(calc(16 * 1 * 1px) / 2); + top: var(--aa-spacing-half); + z-index: calc(9999 - 1); + z-index: calc(var(--aa-base-z-index) - 1); +} + +.aa-SourceFooterSeeAll { + background: linear-gradient(180deg, var(--bs-body-bg), rgba(128, 126, 163, 0.14)); + border: 1px solid var(--bs-secondary-color); + border-radius: 5px; + box-shadow: inset 0 0 2px #fff, 0 2px 2px -1px rgba(76, 69, 88, 0.15); + color: inherit; + font-size: 0.95em; + font-weight: 500; + padding: 0.475em 1em 0.6em; + -webkit-text-decoration: none; + text-decoration: none; +} +.aa-SourceFooterSeeAll:focus, .aa-SourceFooterSeeAll:hover { + border: 1px solid rgba(62, 52, 211, 1); + border: 1px solid rgba(var(--aa-primary-color-rgb), 1); + color: rgba(62, 52, 211, 1); + color: rgba(var(--aa-primary-color-rgb), 1); +} + +/* ----------------*/ +/* 6. Hit Layout*/ +/* ----------------*/ +.aa-Item { + align-items: center; + border-radius: 3px; + cursor: pointer; + display: grid; + min-height: calc((16 * 1 * 1px) * 2.5); + min-height: calc(calc(16 * 1 * 1px) * 2.5); + min-height: calc(var(--aa-spacing) * 2.5); + padding: calc(((16 * 1 * 1px) / 2) / 2); + padding: calc(calc(calc(16 * 1 * 1px) / 2) / 2); + padding: calc(var(--aa-spacing-half) / 2); + /* When the result is active*/ + /* The result type icon inlined SVG or image*/ + /* wrap hit with url but we don't need to see it*/ + /* Secondary click actions*/ +} +.aa-Item[aria-selected=true] { + background-color: var(--bs-tertiary-bg); +} +.aa-Item[aria-selected=true] .aa-ItemActionButton, +.aa-Item[aria-selected=true] .aa-ActiveOnly { + visibility: visible; +} +.aa-ItemIcon { + align-items: center; + background: var(--bs-body-bg); + border-radius: 3px; + box-shadow: inset 0 0 0 1px rgba(128, 126, 163, 0.3); + box-shadow: inset 0 0 0 1px rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha)); + color: rgba(119, 119, 163, 1); + color: rgba(var(--aa-icon-color-rgb), var(--aa-icon-color-alpha)); + display: flex; + flex-shrink: 0; + font-size: 0.7em; + height: calc(20px + ((16 * 1 * 1px) / 2)); + height: calc(20px + calc(calc(16 * 1 * 1px) / 2)); + height: calc(var(--aa-icon-size) + var(--aa-spacing-half)); + justify-content: center; + overflow: hidden; + stroke-width: 1.6; + stroke-width: var(--aa-icon-stroke-width); + text-align: center; + width: calc(20px + ((16 * 1 * 1px) / 2)); + width: calc(20px + calc(calc(16 * 1 * 1px) / 2)); + width: calc(var(--aa-icon-size) + var(--aa-spacing-half)); +} +.aa-ItemIcon img { + height: auto; + max-height: calc(20px + ((16 * 1 * 1px) / 2) - 8px); + max-height: calc(20px + calc(calc(16 * 1 * 1px) / 2) - 8px); + max-height: calc(var(--aa-icon-size) + var(--aa-spacing-half) - 8px); + max-width: calc(20px + ((16 * 1 * 1px) / 2) - 8px); + max-width: calc(20px + calc(calc(16 * 1 * 1px) / 2) - 8px); + max-width: calc(var(--aa-icon-size) + var(--aa-spacing-half) - 8px); + width: auto; +} +.aa-ItemIcon svg { + height: 20px; + height: var(--aa-icon-size); + width: 20px; + width: var(--aa-icon-size); +} +.aa-ItemIcon--alignTop { + align-self: flex-start; +} + +.aa-ItemIcon--noBorder { + background: none; + box-shadow: none; +} + +.aa-ItemIcon--picture { + height: 96px; + width: 96px; +} +.aa-ItemIcon--picture img { + max-height: 100%; + max-width: 100%; + padding: calc((16 * 1 * 1px) / 2); + padding: calc(calc(16 * 1 * 1px) / 2); + padding: var(--aa-spacing-half); +} + +.aa-ItemContent { + align-items: center; + cursor: pointer; + display: grid; + gap: calc((16 * 1 * 1px) / 2); + gap: calc(calc(16 * 1 * 1px) / 2); + grid-gap: calc((16 * 1 * 1px) / 2); + grid-gap: calc(calc(16 * 1 * 1px) / 2); + grid-gap: var(--aa-spacing-half); + gap: var(--aa-spacing-half); + grid-auto-flow: column; + line-height: 1.25em; + overflow: hidden; +} +.aa-ItemContent:empty { + display: none; +} +.aa-ItemContent mark { + background: none; + color: var(--bs-body-color); + font-style: normal; + font-weight: 700; + font-weight: var(--aa-font-weight-bold); +} +.aa-ItemContent--dual { + display: flex; + flex-direction: column; + justify-content: space-between; + text-align: left; +} +.aa-ItemContent--dual .aa-ItemContentTitle, +.aa-ItemContent--dual .aa-ItemContentSubtitle { + display: block; +} + +.aa-ItemContent--indented { + padding-left: calc(20px + (16 * 1 * 1px)); + padding-left: calc(20px + calc(16 * 1 * 1px)); + padding-left: calc(var(--aa-icon-size) + var(--aa-spacing)); +} + +.aa-ItemContentBody { + display: grid; + gap: calc(((16 * 1 * 1px) / 2) / 2); + gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2); + grid-gap: calc(((16 * 1 * 1px) / 2) / 2); + grid-gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2); + grid-gap: calc(var(--aa-spacing-half) / 2); + gap: calc(var(--aa-spacing-half) / 2); +} + +.aa-ItemContentTitle { + display: inline-block; + margin: 0 0.5em 0 0; + max-width: 100%; + overflow: hidden; + padding: 0; + text-overflow: ellipsis; + white-space: nowrap; +} + +.aa-ItemContentSubtitle { + font-size: 0.92em; +} +.aa-ItemContentSubtitleIcon::before { + border-color: var(--bs-tertiary-color); + border-style: solid; + content: ""; + display: inline-block; + left: 1px; + position: relative; + top: -3px; +} + +.aa-ItemContentSubtitle--inline .aa-ItemContentSubtitleIcon::before { + border-width: 0 0 1.5px; + margin-left: calc((16 * 1 * 1px) / 2); + margin-left: calc(calc(16 * 1 * 1px) / 2); + margin-left: var(--aa-spacing-half); + margin-right: calc(((16 * 1 * 1px) / 2) / 2); + margin-right: calc(calc(calc(16 * 1 * 1px) / 2) / 2); + margin-right: calc(var(--aa-spacing-half) / 2); + width: calc(((16 * 1 * 1px) / 2) + 2px); + width: calc(calc(calc(16 * 1 * 1px) / 2) + 2px); + width: calc(var(--aa-spacing-half) + 2px); +} + +.aa-ItemContentSubtitle--standalone { + align-items: center; + color: var(--bs-body-color); + display: grid; + gap: calc((16 * 1 * 1px) / 2); + gap: calc(calc(16 * 1 * 1px) / 2); + grid-gap: calc((16 * 1 * 1px) / 2); + grid-gap: calc(calc(16 * 1 * 1px) / 2); + grid-gap: var(--aa-spacing-half); + gap: var(--aa-spacing-half); + grid-auto-flow: column; + justify-content: start; +} +.aa-ItemContentSubtitle--standalone .aa-ItemContentSubtitleIcon::before { + border-radius: 0 0 0 3px; + border-width: 0 0 1.5px 1.5px; + height: calc((16 * 1 * 1px) / 2); + height: calc(calc(16 * 1 * 1px) / 2); + height: var(--aa-spacing-half); + width: calc((16 * 1 * 1px) / 2); + width: calc(calc(16 * 1 * 1px) / 2); + width: var(--aa-spacing-half); +} + +.aa-ItemContentSubtitleCategory { + color: var(--bs-secondary-color); + font-weight: 500; +} + +.aa-ItemContentDescription { + color: var(--bs-body-color); + font-size: 0.85em; + max-width: 100%; + overflow-x: hidden; + text-overflow: ellipsis; +} +.aa-ItemContentDescription:empty { + display: none; +} +.aa-ItemContentDescription mark { + background: rgba(245, 223, 77, 0.5); + background: rgba(var(--aa-description-highlight-background-color-rgb), var(--aa-description-highlight-background-color-alpha)); + color: rgba(38, 38, 39, 1); + color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha)); + font-style: normal; + font-weight: 500; + font-weight: var(--aa-font-weight-medium); +} + +.aa-ItemContentDash { + color: var(--bs-secondary-color); + display: none; + opacity: 0.4; +} + +.aa-ItemContentTag { + color: var(--bs-primary-text-emphasis); + border-radius: 3px; + margin: 0 0.4em 0 0; + padding: 0.08em 0.3em; +} + +.aa-ItemWrapper, +.aa-ItemLink { + align-items: center; + color: inherit; + display: grid; + gap: calc(((16 * 1 * 1px) / 2) / 2); + gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2); + grid-gap: calc(((16 * 1 * 1px) / 2) / 2); + grid-gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2); + grid-gap: calc(var(--aa-spacing-half) / 2); + gap: calc(var(--aa-spacing-half) / 2); + grid-auto-flow: column; + justify-content: space-between; + width: 100%; +} + +.aa-ItemLink { + color: inherit; + -webkit-text-decoration: none; + text-decoration: none; +} + +.aa-ItemActions { + display: grid; + grid-auto-flow: column; + height: 100%; + justify-self: end; + margin: 0 calc((16 * 1 * 1px) / -3); + margin: 0 calc(calc(16 * 1 * 1px) / -3); + margin: 0 calc(var(--aa-spacing) / -3); + padding: 0 2px 0 0; +} + +.aa-ItemActionButton { + align-items: center; + background: none; + border: 0; + color: var(--bs-secondary-color); + cursor: pointer; + display: flex; + flex-shrink: 0; + padding: 0; +} +.aa-ItemActionButton:hover svg, .aa-ItemActionButton:focus svg { + color: var(--bs-body-color); +} +@media (hover: none) and (pointer: coarse) { + .aa-ItemActionButton:hover svg, .aa-ItemActionButton:focus svg { + color: inherit; + } +} +.aa-ItemActionButton svg { + color: var(--bs-secondary-color); + margin: 0; + margin: calc(calc(16 * 1 * 1px) / 3); + margin: calc(var(--aa-spacing) / 3); + stroke-width: 1.6; + stroke-width: var(--aa-icon-stroke-width); + width: 20px; + width: var(--aa-action-icon-size); +} + +.aa-ActiveOnly { + visibility: hidden; +} + +/*----------------*/ +/* 7. Panel Header*/ +/*----------------*/ +.aa-PanelHeader { + align-items: center; + background: var(--bs-primary-bg-subtle); + color: #fff; + display: grid; + height: var(--aa-modal-header-height); + margin: 0; + padding: calc((16 * 1 * 1px) / 2) calc(16 * 1 * 1px); + padding: calc(calc(16 * 1 * 1px) / 2) calc(16 * 1 * 1px); + padding: var(--aa-spacing-half) var(--aa-spacing); + position: relative; +} +.aa-PanelHeader::after { + background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); + background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 1), rgba(var(--aa-background-color-rgb), 0)); + bottom: calc(((16 * 1 * 1px) / 2) * -1); + bottom: calc(calc(calc(16 * 1 * 1px) / 2) * -1); + bottom: calc(var(--aa-spacing-half) * -1); + content: ""; + height: calc((16 * 1 * 1px) / 2); + height: calc(calc(16 * 1 * 1px) / 2); + height: var(--aa-spacing-half); + left: 0; + pointer-events: none; + position: absolute; + right: 0; + z-index: 9999; + z-index: var(--aa-base-z-index); +} + +/*----------------*/ +/* 8. Panel Footer*/ +/*----------------*/ +.aa-PanelFooter { + background-color: var(--bs-body-bg); + box-shadow: inset 0 1px 0 var(--bs-dropdown-border-color); + display: flex; + justify-content: space-between; + margin: 0; + padding: calc(16 * 1 * 1px); + padding: var(--aa-spacing); + position: relative; + z-index: 9999; + z-index: var(--aa-base-z-index); +} +.aa-PanelFooter::after { + background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(128, 126, 163, 0.6)); + background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 0), rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha))); + content: ""; + height: calc(16 * 1 * 1px); + height: var(--aa-spacing); + left: 0; + opacity: 0.12; + pointer-events: none; + position: absolute; + right: 0; + top: calc((16 * 1 * 1px) * -1); + top: calc(calc(16 * 1 * 1px) * -1); + top: calc(var(--aa-spacing) * -1); + z-index: calc(9999 - 1); + z-index: calc(var(--aa-base-z-index) - 1); +} + +/*----------------*/ +/* 9. Detached Mode*/ +/*----------------*/ +.aa-DetachedContainer { + background: var(--bs-body-bg); + bottom: 0; + box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1), + 0 6px 16px -4px rgba(35, 38, 59, 0.15); + box-shadow: var(--aa-panel-shadow); + display: flex; + flex-direction: column; + left: 0; + margin: 0; + overflow: hidden; + padding: 0; + position: fixed; + right: 0; + top: 0; + z-index: 9999; + z-index: var(--aa-base-z-index); +} +.aa-DetachedContainer::after { + height: 32px; +} +.aa-DetachedContainer .aa-SourceHeader { + margin: calc((16 * 1 * 1px) / 2) 0 calc((16 * 1 * 1px) / 2) 2px; + margin: calc(calc(16 * 1 * 1px) / 2) 0 calc(calc(16 * 1 * 1px) / 2) 2px; + margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px; +} +.aa-DetachedContainer .aa-Panel { + background-color: var(--bs-body-bg); + border-radius: 0; + box-shadow: none; + flex-grow: 1; + margin: 0; + padding: 0; + position: relative; +} +.aa-DetachedContainer .aa-PanelLayout { + bottom: 0; + box-shadow: none; + left: 0; + margin: 0; + max-height: none; + overflow-y: auto; + position: absolute; + right: 0; + top: 0; + width: 100%; +} +.aa-DetachedFormContainer { + border-bottom: solid 1px rgba(128, 126, 163, 0.3); + border-bottom: solid 1px rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha)); + display: flex; + flex-direction: row; + justify-content: space-between; + margin: 0; + padding: calc((16 * 1 * 1px) / 2); + padding: calc(calc(16 * 1 * 1px) / 2); + padding: var(--aa-spacing-half); +} +.aa-DetachedCancelButton { + background: none; + border: 0; + border-radius: 3px; + color: var(--bs-body-color); + cursor: pointer; + font: inherit; + margin: 0 0 0 calc((16 * 1 * 1px) / 2); + margin: 0 0 0 calc(calc(16 * 1 * 1px) / 2); + margin: 0 0 0 var(--aa-spacing-half); + padding: 0 calc((16 * 1 * 1px) / 2); + padding: 0 calc(calc(16 * 1 * 1px) / 2); + padding: 0 var(--aa-spacing-half); +} +.aa-DetachedCancelButton:hover, .aa-DetachedCancelButton:focus { + box-shadow: inset 0 0 0 1px rgba(128, 126, 163, 0.3); + box-shadow: inset 0 0 0 1px rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha)); +} + +.aa-DetachedContainer--modal { + border-radius: 6px; + bottom: inherit; + height: auto; + margin: 0 auto; + max-width: 680px; + max-width: var(--aa-detached-modal-max-width); + position: absolute; + top: 3%; +} +.aa-DetachedContainer--modal .aa-PanelLayout { + max-height: 500px; + max-height: var(--aa-detached-modal-max-height); + padding-bottom: calc((16 * 1 * 1px) / 2); + padding-bottom: calc(calc(16 * 1 * 1px) / 2); + padding-bottom: var(--aa-spacing-half); + position: static; +} +.aa-DetachedContainer--modal .aa-PanelLayout:empty { + display: none; +} + +/* Search Button*/ +.aa-DetachedSearchButton { + align-items: center; + background-color: var(--bs-body-bg); + border: 1px solid var(--bs-secondary-border-subtle); + border-radius: 3px; + color: var(--bs-secondary-color); + cursor: pointer; + display: flex; + font: inherit; + font-family: inherit; + font-family: var(--aa-font-family); + font-size: calc(16 * 1px); + font-size: var(--aa-font-size); + height: 44px; + height: var(--aa-search-input-height); + margin: 0; + padding: 0 calc(44px / 8); + padding: 0 calc(var(--aa-search-input-height) / 8); + position: relative; + text-align: left; + width: 100%; +} +.aa-DetachedSearchButton:focus { + border-color: var(--bs-primary-border-subtle); + box-shadow: rgba(62, 52, 211, 0.2) 0 0 0 3px, inset rgba(62, 52, 211, 0.2) 0 0 0 2px; + box-shadow: var(--bs-primary-border-subtle) 0 0 0 3px, inset var(--bs-primary-border-subtle) 0 0 0 2px; + outline: currentColor none medium; +} +.aa-DetachedSearchButtonIcon { + align-items: center; + color: var(--bs-primary-text-emphasis); + cursor: auto; + cursor: initial; + display: flex; + flex-shrink: 0; + height: 100%; + justify-content: center; + width: calc(20px + (16 * 1 * 1px)); + width: calc(20px + calc(16 * 1 * 1px)); + width: calc(var(--aa-icon-size) + var(--aa-spacing)); +} + +.aa-DetachedSearchButtonQuery { + color: var(--bs-body-color); + line-height: 1.25em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.aa-DetachedSearchButtonPlaceholder[hidden] { + display: none; +} + +/* Remove scroll on `body`*/ +.aa-Detached { + height: 100vh; + overflow: hidden; +} + +.aa-DetachedOverlay { + background-color: rgba(115, 114, 129, 0.4); + background-color: rgba(var(--aa-overlay-color-rgb), var(--aa-overlay-color-alpha)); + height: 100vh; + left: 0; + margin: 0; + padding: 0; + position: fixed; + right: 0; + top: 0; + z-index: calc(9999 - 1); + z-index: calc(var(--aa-base-z-index) - 1); +} + +/*----------------*/ +/* 10. Gradients*/ +/*----------------*/ +.aa-GradientTop, +.aa-GradientBottom { + height: calc((16 * 1 * 1px) / 2); + height: calc(calc(16 * 1 * 1px) / 2); + height: var(--aa-spacing-half); + left: 0; + pointer-events: none; + position: absolute; + right: 0; + z-index: 9999; + z-index: var(--aa-base-z-index); +} + +.aa-GradientTop { + background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); + background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 1), rgba(var(--aa-background-color-rgb), 0)); + top: 0; +} + +.aa-GradientBottom { + background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); + background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 0), rgba(var(--aa-background-color-rgb), 1)); + border-bottom-left-radius: calc((16 * 1 * 1px) / 4); + border-bottom-left-radius: calc(calc(16 * 1 * 1px) / 4); + border-bottom-left-radius: calc(var(--aa-spacing) / 4); + border-bottom-right-radius: calc((16 * 1 * 1px) / 4); + border-bottom-right-radius: calc(calc(16 * 1 * 1px) / 4); + border-bottom-right-radius: calc(var(--aa-spacing) / 4); + bottom: 0; +} + +/*----------------*/ +/* 11. Utilities*/ +/*----------------*/ +@media (hover: none) and (pointer: coarse) { + .aa-DesktopOnly { + display: none; + } +} + +@media (hover: hover) { + .aa-TouchOnly { + display: none; + } +} \ No newline at end of file From 25a86427491d17ca240ab9c26cb3bf879aae6fab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Wed, 28 Feb 2024 21:41:45 +0100 Subject: [PATCH 10/20] Make algolia autocomplete headers blue in bootstrap theme --- .../components/autocomplete_bootstrap_theme.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/assets/css/components/autocomplete_bootstrap_theme.css b/assets/css/components/autocomplete_bootstrap_theme.css index 74d22c59..62bd9927 100644 --- a/assets/css/components/autocomplete_bootstrap_theme.css +++ b/assets/css/components/autocomplete_bootstrap_theme.css @@ -186,7 +186,7 @@ body { } .aa-Label svg, .aa-LoadingIndicator svg { - color: var(--bs-primary-text-emphasis); + color: rgba(var(--bs-primary-rgb), 1.0); height: auto; max-height: 20px; max-height: var(--aa-input-icon-size); @@ -475,7 +475,7 @@ body { } .aa-SourceHeaderTitle { background: var(--bs-body-bg); - color: var(--bs-primary-text-emphasis); + color: rgba(var(--bs-primary-rgb), 1.0); display: inline-block; font-size: 0.8em; font-weight: 600; @@ -490,7 +490,7 @@ body { } .aa-SourceHeaderLine { - border-bottom: solid 1px var(--bs-primary-text-emphasis); + border-bottom: solid 1px rgba(var(--bs-primary-rgb), 1.0); display: block; height: 2px; left: 0; @@ -520,9 +520,9 @@ body { } .aa-SourceFooterSeeAll:focus, .aa-SourceFooterSeeAll:hover { border: 1px solid rgba(62, 52, 211, 1); - border: 1px solid rgba(var(--aa-primary-color-rgb), 1); + border: 1px solid rgba(var(--bs-primary-rgb), 1); color: rgba(62, 52, 211, 1); - color: rgba(var(--aa-primary-color-rgb), 1); + color: rgba(var(--bs-primary-rgb), 1); } /* ----------------*/ @@ -754,7 +754,7 @@ body { } .aa-ItemContentTag { - color: var(--bs-primary-text-emphasis); + color: rgba(var(--bs-primary-rgb), 1.0);; border-radius: 3px; margin: 0 0.4em 0 0; padding: 0.08em 0.3em; @@ -1025,7 +1025,7 @@ body { } .aa-DetachedSearchButtonIcon { align-items: center; - color: var(--bs-primary-text-emphasis); + color: rgba(var(--bs-primary-rgb), 1.0); cursor: auto; cursor: initial; display: flex; From f70f6c39cefe48e98ebd83a3d6e717e1826e6942 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Wed, 28 Feb 2024 22:00:12 +0100 Subject: [PATCH 11/20] Fixed error that algolia autocomplete input appeared multiple times after a link was clicked --- assets/controllers/elements/part_livesearch_controller.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/controllers/elements/part_livesearch_controller.js b/assets/controllers/elements/part_livesearch_controller.js index b25b3544..51738a30 100644 --- a/assets/controllers/elements/part_livesearch_controller.js +++ b/assets/controllers/elements/part_livesearch_controller.js @@ -30,7 +30,7 @@ export default class extends Controller { _autocomplete; - connect() { + initialize() { // The endpoint for searching parts const base_url = this.element.dataset.autocomplete; // The URL template for the part detail pages @@ -45,7 +45,7 @@ export default class extends Controller { this._autocomplete = autocomplete({ container: this.element, - panelContainer: document.body, + panelContainer: document.getElementById("navbar-frame"), panelPlacement: 'end', plugins: [recentSearchesPlugin], openOnFocus: true, From faa3bea3ab66511d550d6b63ffd73fe0d040d704 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Wed, 28 Feb 2024 22:06:54 +0100 Subject: [PATCH 12/20] Allow to navigate to dropdown entries by keyboard --- .../elements/part_livesearch_controller.js | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/assets/controllers/elements/part_livesearch_controller.js b/assets/controllers/elements/part_livesearch_controller.js index 51738a30..7b717880 100644 --- a/assets/controllers/elements/part_livesearch_controller.js +++ b/assets/controllers/elements/part_livesearch_controller.js @@ -50,6 +50,25 @@ export default class extends Controller { plugins: [recentSearchesPlugin], openOnFocus: true, placeholder: "Search for parts", + + // Use a navigator compatible with turbo: + navigator: { + navigate({ itemUrl }) { + window.Turbo.visit(itemUrl, { action: "advance" }); + }, + navigateNewTab({ itemUrl }) { + const windowReference = window.open(itemUrl, '_blank', 'noopener'); + + if (windowReference) { + windowReference.focus(); + } + }, + navigateNewWindow({ itemUrl }) { + window.open(itemUrl, '_blank', 'noopener'); + }, + }, + + // If the form is submitted, forward the term to the form onSubmit({state, event, ...setters}) { //Put the current text into each target input field const input = that.inputTarget; @@ -61,6 +80,8 @@ export default class extends Controller { input.value = state.query; input.form.requestSubmit(); }, + + getSources({ query }) { return [ { @@ -71,6 +92,9 @@ export default class extends Controller { return fetch(url) .then((response) => response.json()); }, + getItemUrl({ item }) { + return part_detail_uri_template.replace('__ID__', item.id); + }, templates: { header({ html }) { return html`Parts From 746ba398a996bfe34f1694f3de39d04878c0968c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Wed, 28 Feb 2024 22:08:32 +0100 Subject: [PATCH 13/20] Fixed missing dropdown after some link navigations --- .../css/components/autocomplete_bootstrap.css | 106 ------------------ templates/_navbar_search.html.twig | 3 +- 2 files changed, 2 insertions(+), 107 deletions(-) delete mode 100644 assets/css/components/autocomplete_bootstrap.css diff --git a/assets/css/components/autocomplete_bootstrap.css b/assets/css/components/autocomplete_bootstrap.css deleted file mode 100644 index 83a9f79a..00000000 --- a/assets/css/components/autocomplete_bootstrap.css +++ /dev/null @@ -1,106 +0,0 @@ -/* - * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony). - * - * Copyright (C) 2019 - 2024 Jan Böhmer (https://github.com/jbtronics) - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as published - * by the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . - */ - -/*** - * Override some styles from the algolia autocomplete library to harmonize more with the bootstrap theme - */ - -/** Ensure that the autocomplete dropdown is always on top */ -.aa-Panel { - z-index: 1000; -} - -/** Use a form definition similar to bootstraps form-control */ -.aa-Form { - background-color: var(--bs-body-bg); - border: var(--bs-border-width) solid var(--bs-border-color); - border-radius: var(--bs-border-radius); - color: var(--bs-body-color); - transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; - -} - -.aa-Form:focus-within { - background-color: var(--bs-body-bg); - border-color: #86b7fe; - box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25); - color: var(--bs-body-color); - outline: 0; -} - -/** Use a panel definition similar to bootstraps dropdown */ -.aa-Panel { - --bs-dropdown-zindex: 1000; - --bs-dropdown-min-width: 10rem; - --bs-dropdown-padding-x: 0; - --bs-dropdown-padding-y: 0.5rem; - --bs-dropdown-spacer: 0.125rem; - --bs-dropdown-font-size: 1rem; - --bs-dropdown-color: var(--bs-body-color); - --bs-dropdown-bg: var(--bs-body-bg); - --bs-dropdown-border-color: var(--bs-border-color-translucent); - --bs-dropdown-border-radius: var(--bs-border-radius); - --bs-dropdown-border-width: var(--bs-border-width); - --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width)); - --bs-dropdown-divider-bg: var(--bs-border-color-translucent); - --bs-dropdown-divider-margin-y: 0.5rem; - --bs-dropdown-box-shadow: var(--bs-box-shadow); - --bs-dropdown-link-color: var(--bs-body-color); - --bs-dropdown-link-hover-color: var(--bs-body-color); - --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg); - --bs-dropdown-link-active-color: #fff; - --bs-dropdown-link-active-bg: #0d6efd; - --bs-dropdown-link-disabled-color: var(--bs-tertiary-color); - --bs-dropdown-item-padding-x: 1rem; - --bs-dropdown-item-padding-y: 0.25rem; - --bs-dropdown-header-color: #6c757d; - --bs-dropdown-header-padding-x: 1rem; - --bs-dropdown-header-padding-y: 0.5rem; - - padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x); - margin: 0; - font-size: var(--bs-dropdown-font-size); - color: var(--bs-dropdown-color); - background-color: var(--bs-dropdown-bg); - background-clip: padding-box; - border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color); - border-radius: var(--bs-dropdown-border-radius); -} - -:root { - /** Font colors */ - --aa-text-color-rgb: var(--bs-body-color-rgb); - --aa-primary-color-rgb: var(--bs-primary-text-emphasis); - --aa-muted-color-rgb: var(--bs-secondary-text-emphasis); - - /** Border colors */ - --aa-panel-border-color-rgb: var(--bs-dropdown-border-color); - --aa-input-border-color-rgb: var(--bs-border-color); - --aa-input-border-color-alpha: 1.0; - - /* Background colors */ - --aa-background-color-rgb: var(--bs-dropdown-bg); - --aa-input-background-color-rgb: var(--bs-body-color); - --aa-selected-color-rgb: var(--bs-dropdown-link-hover-bg); - --aa-description-highlight-background-color-rgb: var(--bs-secondary-bg); - - /** Shadow colors */ - --aa-panel-shadow: var(--bs-dropdown-box-shadow) - -} \ No newline at end of file diff --git a/templates/_navbar_search.html.twig b/templates/_navbar_search.html.twig index d4452533..1dc2ae36 100644 --- a/templates/_navbar_search.html.twig +++ b/templates/_navbar_search.html.twig @@ -69,7 +69,8 @@
-
From 409dcce3c76adf64d90f42f42888cba8a29d5024 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Thu, 29 Feb 2024 20:39:27 +0100 Subject: [PATCH 14/20] Use correct translations for livesearch field in navbar --- .../elements/part_livesearch_controller.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/assets/controllers/elements/part_livesearch_controller.js b/assets/controllers/elements/part_livesearch_controller.js index 7b717880..5ded2df2 100644 --- a/assets/controllers/elements/part_livesearch_controller.js +++ b/assets/controllers/elements/part_livesearch_controller.js @@ -24,6 +24,12 @@ import "../../css/components/autocomplete_bootstrap_theme.css"; import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches'; import {marked} from "marked"; +import { + trans, + SEARCH_PLACEHOLDER, + SEARCH_SUBMIT +} from '../../translator'; + export default class extends Controller { static targets = ["input"]; @@ -49,7 +55,10 @@ export default class extends Controller { panelPlacement: 'end', plugins: [recentSearchesPlugin], openOnFocus: true, - placeholder: "Search for parts", + placeholder: trans(SEARCH_PLACEHOLDER), + translations: { + submitButtonTitle: trans(SEARCH_SUBMIT) + }, // Use a navigator compatible with turbo: navigator: { From faadd8e9a45ff45c3faf7991e18e393495ff8a7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Thu, 29 Feb 2024 21:53:28 +0100 Subject: [PATCH 15/20] Improved layout for autocomplete dropdown --- .../elements/part_livesearch_controller.js | 17 ++++++++++++----- templates/_navbar_search.html.twig | 1 + 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/assets/controllers/elements/part_livesearch_controller.js b/assets/controllers/elements/part_livesearch_controller.js index 5ded2df2..d5facbea 100644 --- a/assets/controllers/elements/part_livesearch_controller.js +++ b/assets/controllers/elements/part_livesearch_controller.js @@ -27,7 +27,8 @@ import {marked} from "marked"; import { trans, SEARCH_PLACEHOLDER, - SEARCH_SUBMIT + SEARCH_SUBMIT, + STATISTICS_PARTS } from '../../translator'; export default class extends Controller { @@ -42,6 +43,9 @@ export default class extends Controller { // The URL template for the part detail pages const part_detail_uri_template = this.element.dataset.detailUrl; + //The URL of the placeholder picture + const placeholder_image = this.element.dataset.placeholderImage; + const that = this; const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({ @@ -106,25 +110,28 @@ export default class extends Controller { }, templates: { header({ html }) { - return html`Parts + return html`${trans(STATISTICS_PARTS)}
`; }, item({item, components, html}) { const details_url = part_detail_uri_template.replace('__ID__', item.id); - return html`
- ${item.name} + ${item.name}
- ${components.Highlight({hit: item, attribute: 'name'})} + + ${components.Highlight({hit: item, attribute: 'name'})} +
${components.Snippet({hit: item, attribute: 'description'})} + ${item.category ? html`

${item.category}

` : ""} + ${item.footprint ? html`

${item.footprint}

` : ""}
diff --git a/templates/_navbar_search.html.twig b/templates/_navbar_search.html.twig index 1dc2ae36..4b954b62 100644 --- a/templates/_navbar_search.html.twig +++ b/templates/_navbar_search.html.twig @@ -71,6 +71,7 @@ {# It is important that this element has an id field. Otherwise the dropdown panel wont appear after some link clicks #} From e00988047c6289093f0dbb0b04a9f6772885a33b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Thu, 29 Feb 2024 22:20:30 +0100 Subject: [PATCH 16/20] Added highlighting to search results --- .../elements/part_livesearch_controller.js | 38 ++++++++++++++++--- .../autocomplete_bootstrap_theme.css | 3 +- 2 files changed, 35 insertions(+), 6 deletions(-) diff --git a/assets/controllers/elements/part_livesearch_controller.js b/assets/controllers/elements/part_livesearch_controller.js index d5facbea..e79ed641 100644 --- a/assets/controllers/elements/part_livesearch_controller.js +++ b/assets/controllers/elements/part_livesearch_controller.js @@ -37,6 +37,19 @@ export default class extends Controller { _autocomplete; + _highlight = (text, query) => { + if (!text) return text; + if (!query) return text; + + const HIGHLIGHT_PRE_TAG = '__aa-highlight__' + const HIGHLIGHT_POST_TAG = '__/aa-highlight__' + + const escaped = query.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'); + const regex = new RegExp(escaped, 'gi'); + + return text.replace(regex, (match) => `${HIGHLIGHT_PRE_TAG}${match}${HIGHLIGHT_POST_TAG}`); + } + initialize() { // The endpoint for searching parts const base_url = this.element.dataset.autocomplete; @@ -97,13 +110,28 @@ export default class extends Controller { getSources({ query }) { return [ + // The parts source { sourceId: 'parts', getItems() { const url = base_url.replace('__QUERY__', encodeURIComponent(query)); - return fetch(url) - .then((response) => response.json()); + const data = fetch(url) + .then((response) => response.json()) + ; + + //Iterate over all fields besides the id and highlight them + const fields = ["name", "description", "category", "footprint"]; + + data.then((items) => { + items.forEach((item) => { + for (const field of fields) { + item[field] = that._highlight(item[field], query); + } + }); + }); + + return data; }, getItemUrl({ item }) { return part_detail_uri_template.replace('__ID__', item.id); @@ -129,9 +157,9 @@ export default class extends Controller {
- ${components.Snippet({hit: item, attribute: 'description'})} - ${item.category ? html`

${item.category}

` : ""} - ${item.footprint ? html`

${item.footprint}

` : ""} + ${components.Highlight({hit: item, attribute: 'description'})} + ${item.category ? html`

${components.Highlight({hit: item, attribute: 'category'})}

` : ""} + ${item.footprint ? html`

${components.Highlight({hit: item, attribute: 'footprint'})}

` : ""}
diff --git a/assets/css/components/autocomplete_bootstrap_theme.css b/assets/css/components/autocomplete_bootstrap_theme.css index 62bd9927..d86232e5 100644 --- a/assets/css/components/autocomplete_bootstrap_theme.css +++ b/assets/css/components/autocomplete_bootstrap_theme.css @@ -629,9 +629,10 @@ body { display: none; } .aa-ItemContent mark { - background: none; + background: var(--bs-highlight-bg); color: var(--bs-body-color); font-style: normal; + padding: 0; font-weight: 700; font-weight: var(--aa-font-weight-bold); } From 1815162907b602fd651d1426cb0978397c04bb1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Thu, 29 Feb 2024 22:46:19 +0100 Subject: [PATCH 17/20] Added a search bar to homepage --- .../elements/part_livesearch_controller.js | 8 +++- templates/_navbar.html.twig | 5 ++- .../search.macro.html.twig} | 45 +++++++++++++++---- templates/homepage.html.twig | 12 ++--- 4 files changed, 52 insertions(+), 18 deletions(-) rename templates/{_navbar_search.html.twig => components/search.macro.html.twig} (76%) diff --git a/assets/controllers/elements/part_livesearch_controller.js b/assets/controllers/elements/part_livesearch_controller.js index e79ed641..e1350172 100644 --- a/assets/controllers/elements/part_livesearch_controller.js +++ b/assets/controllers/elements/part_livesearch_controller.js @@ -59,6 +59,9 @@ export default class extends Controller { //The URL of the placeholder picture const placeholder_image = this.element.dataset.placeholderImage; + //If the element is in navbar mode, or not + const navbar_mode = this.element.dataset.navbarMode === "true"; + const that = this; const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({ @@ -68,8 +71,9 @@ export default class extends Controller { this._autocomplete = autocomplete({ container: this.element, - panelContainer: document.getElementById("navbar-frame"), - panelPlacement: 'end', + //Place the panel in the navbar, if the element is in navbar mode + panelContainer: navbar_mode ? document.getElementById("navbar-frame") : document.body, + panelPlacement: this.element.dataset.panelPlacement, plugins: [recentSearchesPlugin], openOnFocus: true, placeholder: trans(SEARCH_PLACEHOLDER), diff --git a/templates/_navbar.html.twig b/templates/_navbar.html.twig index 2ae97371..0d775b8d 100644 --- a/templates/_navbar.html.twig +++ b/templates/_navbar.html.twig @@ -1,4 +1,5 @@ {% import "helper.twig" as helper %} +{% import "components/search.macro.html.twig" as search %}