Split app.js into individual scripts

This commit is contained in:
Jannis Portmann 2022-01-25 18:27:51 +01:00
parent 304c0d4ba6
commit 42564e085c
6 changed files with 59 additions and 25 deletions

View file

@ -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';
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()
// 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
})
// Cookie-consent
import 'cookie-notice/dist/cookie.notice.min.js'
import 'cookie-notice/dist/cookie.notice.min';
new cookieNoticeJS({
// Position for the cookie-notifier (default=bottom)
'cookieNoticePosition': 'bottom',
// The message will be shown again in X days
'expiresIn': 365,
// Specify a custom font family and size in pixels
'fontFamily': 'inherit',
'fontSize': '.9rem',
// 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
});

15
assets/captcha.js Normal file
View file

@ -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()

5
assets/fileUpload.js Normal file
View file

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

View file

@ -2,6 +2,10 @@
{% block title %}New Offer{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('fileUpload') }}
{% endblock %}
{% block body %}
{% for message in app.flashes('error') %}
<div class="alert alert-error" role="alert">

View file

@ -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>

View file

@ -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')