Custom JavaScript

In Enso 3, JS and CSS files for the admin area are provided pre-compiled.

If you want to customise these you can either add additional CSS/JS files or you can publish the source JS and SCSS files and compile them yourself with your own customisations.

Publishing the source files

Assets are published using Artisan:

php artisan vendor:publish --tag enso-assets-source

This will create files in the following directories:

• /resources/js/vendor/enso
• /resources/sass/enso

Make Webpack compile the source

Add the following lines to webpack.mix.js:

mix.js('resources/js/enso.js', 'public/enso/js/enso-admin.js')
   .sass('resources/sass/enso/enso-admin.scss', 'public/enso/css')

You may need to install some extra node packages for this to work. Check vendor/yadda/enso-core/package.json for reference.

Making customisations

At this piont you are free to alter the source files to your liking. You can either edit the files directly in place or make a duplicate and edit that.

When running php artisan vendor:publish --tag enso-assets-source again, your altered files will be preserved unless the --force flag is set. If you created duplicates of the published files to edit then these will need to be cross-referenced with newer versions when upgrading. Alternatively, if you edit the published files directly you can use git diff to compare new versions of published files. This could result in your updates being lost if you blindly git add -A && git commit but your edits could still be found in git history.

Adding a Quill Module

Edit resources/vendor/enso/crud/components/Quill.vue.

Import your module and register it with Quill in the mounted() method.

mounted() {
  Quill.register('modules/counter', function(quill, options) {
    quill.on('text-change', function() {
      var text = quill.getText();

      console.log(text.split(/\s+/).length);
    });
  });

  // ... etc.
}

Add your module to the default config within data().

data() {
  return {
    editor: {},
    defaultConfig: {
      modules: {
        toolbar: [
          ['bold', 'italic', 'underline'],
          [{ list: 'ordered' }, { list: 'bullet' }],
          [{ align: [] }],
        ],
        counter: true,
      },
      theme: 'snow',
    },
  };
},