alexander-schranz · February 14, 2023 13:01
diff --git a/base.html.twig b/base.html.twig
 <!DOCTYPE html>
 <html lang="{{ app.request.locale|split('_')[0] }}">
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {#-
        Various Tools should be used to validate HTML, Accessibility, Structured Data and speed of the site:
            - HTML Validation:
                - https://validator.w3.org/
            - Speed and more:
                - https://web.dev/measure/
            - Browsers Dev Tools
                - Accessibility Tree View
            - Schema.org Validator:
                - https://validator.schema.org/
                - https://search.google.com/test/rich-results
            - Firefox Extensions:
                - https://addons.mozilla.org/de/firefox/addon/landmarks/
                - https://addons.mozilla.org/de/firefox/addon/axe-devtools/
            - Chrome Extensions:
                - https://chrome.google.com/webstore/detail/landmark-navigation-via-k/ddpokpbjopmeeiiolheejjpkonlkklgp
                - https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd
    -#}

    {%- block meta -%}
        {{- include('app/organisms/meta/meta-seo.html.twig') -}}
        {{- include('app/organisms/meta/meta-og.html.twig') -}}
        {{- include('app/organisms/meta/meta-icons.html.twig') -}}
        {{- include('app/organisms/meta/meta-pagination.html.twig') -}}
    {%- endblock -%}

    {% block style %}
        {% set assetCss = asset('build/website/app.css') %}

        {% do preload(assetCss, {as: 'style'}) %}

        {{ encore_entry_link_tags('app', null, 'website') }}
    {% endblock %}
 </head>
 <body>

    {{ include('app/organisms/base/menu.html.twig') }}

    <main class="{% block mainClass %}{% endblock %}">
        {% block content %}{% endblock %}
    </main>

    {{ include('app/organisms/base/footer.html.twig') }}


    {% block javascripts %}
        {{ encore_entry_script_tags('app', null, 'website', {
            id: 'main-script',
            'data-components': get_components(),
        }) }}
    {% endblock %}
 </body>
 </html>
diff --git a/components___carousel.js b/components___carousel.js
 export default class Carousel {
    async initialize(el) {
        const {
            default: slick,
        } = await import('../lib/slick'); // lazy load slick only when used

        slick(el, {
            infinite: true,
            autoplay: false,
            speed: 300,
            dots: true,
            arrows: false,
        });
    }
 }
diff --git a/lib___slick.js b/lib___slick.js
 import $ from 'jquery';
 import 'slick-carousel';
 import passiveEvents from '@sulu/web/packages/services/passive-events/passive-events';

 /**
 * @param {Element} [el] The given element.
 * @param {Object} [options] The slick options.
 */
 export default function(el, options) {
    // Before we do anything: One-fits-all solution to bind passive event listeners, if possible, to improve performance
    // Source: https://github.com/kenwheeler/slick/pull/3422/files
    const func = EventTarget.prototype.addEventListener;
    EventTarget.prototype.addEventListener = function(...args) {
        if (['scroll', 'touchmove', 'touchstart'].includes(args[0])) {
            args[2] = passiveEvents ? {
                passive: false,
            } : false;
        }

        func.call(this, ...args);
    };

    return $(el).slick(options);
 }
diff --git a/main.js b/main.js
 import web from '@sulu/web';
 import '../css/main.scss';

 web.registerComponent('carousel', Carousel);

 web.startComponents(
    JSON.parse(document.getElementById('main-script').getAttribute('data-components'))
 );
	<!DOCTYPE html>
	<html lang="{{ app.request.locale\|split('_')[0] }}">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	{#-
	Various Tools should be used to validate HTML, Accessibility, Structured Data and speed of the site:
	- HTML Validation:
	- https://validator.w3.org/
	- Speed and more:
	- https://web.dev/measure/
	- Browsers Dev Tools
	- Accessibility Tree View
	- Schema.org Validator:
	- https://validator.schema.org/
	- https://search.google.com/test/rich-results
	- Firefox Extensions:
	- https://addons.mozilla.org/de/firefox/addon/landmarks/
	- https://addons.mozilla.org/de/firefox/addon/axe-devtools/
	- Chrome Extensions:
	- https://chrome.google.com/webstore/detail/landmark-navigation-via-k/ddpokpbjopmeeiiolheejjpkonlkklgp
	- https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd
	-#}

	{%- block meta -%}
	{{- include('app/organisms/meta/meta-seo.html.twig') -}}
	{{- include('app/organisms/meta/meta-og.html.twig') -}}
	{{- include('app/organisms/meta/meta-icons.html.twig') -}}
	{{- include('app/organisms/meta/meta-pagination.html.twig') -}}
	{%- endblock -%}

	{% block style %}
	{% set assetCss = asset('build/website/app.css') %}

	{% do preload(assetCss, {as: 'style'}) %}

	{{ encore_entry_link_tags('app', null, 'website') }}
	{% endblock %}
	</head>
	<body>

	{{ include('app/organisms/base/menu.html.twig') }}

	<main class="{% block mainClass %}{% endblock %}">
	{% block content %}{% endblock %}
	</main>

	{{ include('app/organisms/base/footer.html.twig') }}


	{% block javascripts %}
	{{ encore_entry_script_tags('app', null, 'website', {
	id: 'main-script',
	'data-components': get_components(),
	}) }}
	{% endblock %}
	</body>
	</html>
	export default class Carousel {
	async initialize(el) {
	const {
	default: slick,
	} = await import('../lib/slick'); // lazy load slick only when used

	slick(el, {
	infinite: true,
	autoplay: false,
	speed: 300,
	dots: true,
	arrows: false,
	});
	}
	}
	import $ from 'jquery';
	import 'slick-carousel';
	import passiveEvents from '@sulu/web/packages/services/passive-events/passive-events';

	/**
	* @param {Element} [el] The given element.
	* @param {Object} [options] The slick options.
	*/
	export default function(el, options) {
	// Before we do anything: One-fits-all solution to bind passive event listeners, if possible, to improve performance
	// Source: https://github.com/kenwheeler/slick/pull/3422/files
	const func = EventTarget.prototype.addEventListener;
	EventTarget.prototype.addEventListener = function(...args) {
	if (['scroll', 'touchmove', 'touchstart'].includes(args[0])) {
	args[2] = passiveEvents ? {
	passive: false,
	} : false;
	}

	func.call(this, ...args);
	};

	return $(el).slick(options);
	}
	import web from '@sulu/web';
	import '../css/main.scss';

	web.registerComponent('carousel', Carousel);

	web.startComponents(
	JSON.parse(document.getElementById('main-script').getAttribute('data-components'))
	);