Split app.js into individual scripts

assets/app.js

@@ -8,7 +8,6 @@
 // any CSS you import will output into a single css file (app.css in this case)
 import './styles/app.scss';
 
-const $ = require('jquery');
 // start the Stimulus application
 require('bootstrap');
 
@@ -18,27 +17,32 @@ import '@fortawesome/fontawesome-free/js/solid'
 import '@fortawesome/fontawesome-free/js/regular'
 import '@fortawesome/fontawesome-free/js/brands'
 
-// Friendly captcha
-import { WidgetInstance } from 'friendly-challenge';
+// Cookie-consent
+import 'cookie-notice/dist/cookie.notice.min';
 
-function doneCallback(solution) {
-    $('#registration_form_captcha_solution').val(solution);
-}
+new cookieNoticeJS({
+    // Position for the cookie-notifier (default=bottom)
+    'cookieNoticePosition': 'bottom',
 
-const element = document.querySelector('#captcha');
-const options = {
-    doneCallback: doneCallback,
-    sitekey: 'FCMVL79DP1G5K1K0',
-}
-const widget = new WidgetInstance(element, options);
-widget.start()
+    // The message will be shown again in X days
+    'expiresIn': 365,
 
-// Dsiplay Filename when uploading
-document.querySelector('.custom-file-input').addEventListener('change', function (e) {
-    var fileName = document.getElementById('offer_form_photo').files[0].name;
-    var nextSibling = e.target.nextElementSibling
-    nextSibling.innerText = fileName
-})
+    // Specify a custom font family and size in pixels
+    'fontFamily': 'inherit',
+    'fontSize': '.9rem',
 
-// Cookie-consent
-import 'cookie-notice/dist/cookie.notice.min.js'
+    // Dismiss button background color
+    'buttonBgColor': '#343a40',
+
+    // Dismiss button text color
+    'buttonTextColor': '#fff',
+
+    // Notice background color
+    'noticeBgColor': '#000',
+
+    // Notice text color
+    'noticeTextColor': '#fff',
+
+    // Print debug output to the console (default=false)
+    'debug': false
+});

assets/captcha.js

@@ -0,0 +1,15 @@
+// Friendly captcha
+import { WidgetInstance } from 'friendly-challenge';
+const $ = require('jquery');
+
+function doneCallback(solution) {
+    $('#registration_form_captcha_solution').val(solution);
+}
+
+const element = document.querySelector('#captcha');
+const options = {
+    doneCallback: doneCallback,
+    sitekey: 'FCMVL79DP1G5K1K0',
+}
+const widget = new WidgetInstance(element, options);
+widget.start()

assets/fileUpload.js

@@ -0,0 +1,5 @@
+const $ = require('jquery');
+
+$( ".custom-file-input" ).change(function() {
+   $(".custom-file-label").html(($(".custom-file-input").prop("files")[0]["name"]));
+});

templates/app/new_offer.html.twig

@@ -1,6 +1,10 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}New Offer{% endblock %} 
+{% block title %}New Offer{% endblock %}
+
+{% block javascripts %}
+	{{ encore_entry_script_tags('fileUpload') }}
+{% endblock %}
 
 {% block body %}
     {% for message in app.flashes('error') %}

templates/registration/register.html.twig

@@ -7,6 +7,10 @@
 <meta name="description" content="Register for pflänz.li" />
 {% endblock %}
 
+{% block javascripts %}
+	{{ encore_entry_script_tags('captcha') }}
+{% endblock %}
+
 {% block body %}
 	{% for flashError in app.flashes('verify_email_error') %}
 		<div class="alert alert-danger" role="alert">{{ flashError }}</div>

webpack.config.js

@@ -21,6 +21,8 @@ Encore
      * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
      */
     .addEntry('app', './assets/app.js')
+    .addEntry('captcha', './assets/captcha.js')
+    .addEntry('fileUpload', './assets/fileUpload.js')
 
     // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
     .enableStimulusBridge('./assets/controllers.json')