Spookie/assets/app.js

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you import will output into a single css file (app.css in this case)
import 'fork-awesome/scss/fork-awesome.scss'
import './styles/app.scss'
import $ from 'jquery'
import 'bootstrap'

// Dropzone stuff move to component
import {Dropzone} from 'dropzone'

// TODO handle error (Chapter 26)
const formElement = $('#dropzoneForm')
if (formElement) {
    const previewContent = $('#preview-content').html()
    console.log(previewContent)
    const dropzone = new Dropzone('#dropzoneForm', {
        acceptedFiles: '.jpg, .jpeg, .png',
        maxFiles: 1,
        init: function () {
            this.hiddenFileInput.removeAttribute('multiple')
            this.on('maxfilesexceeded', (file) => {
                this.removeAllFiles()
                this.addFile(file)
            })
            this.on('error', (file, data) => {
                console.log('error');
                if (data.detail) {
                    this.emit('error', file, data.detail)
                }

            })
        }
    })
    console.log('filename', previewContent)
    const mockFile = { name: previewContent }
    console.log('file', mockFile)
    dropzone.displayExistingFile(mockFile)
}

// End Dropzone stuff move to component

//import './js/index'
// needed for legacy code
//global.$ = $

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
    console.log('🎉 Dark mode is supported')
}

$(document).ready(() => {
    console.log('ready')
    $('#toggleSidebar').on('click', () => {
        const toggleIcon = $('#toggleIcon')
        toggleIcon.toggleClass('fa fa-lg fa-fw fa-caret-square-o-left')
        toggleIcon.toggleClass('fa fa-lg fa-fw fa-caret-square-o-right')
        $('#sidebar').toggleClass('active')
    })
})

// start the Stimulus application
//import './bootstrap'