JS and CSS Assets

Working with Assets in the Admin
To make Asset management easier in the Admin, we have provided a few arrays, that you can append your assets to. We have JS and CSS arrays, as well as convention based, and full path arrays.
Javascript Assets
We have two options for working with Javascript in the admin.
jsAppendList
This expects the name of the js file ( without the .js extension ) which is located in the ContentBox includes/js folder. This is a simple convention based approach, so you can easily just append a file, for example arrayAppend( jsAppendList, 'dragula' ) to load /includes/js/dragula.js
jsFullAppendList
This expects the full path of the js file ( including the .js extension ), including the location. This is useful, because you may be using grunt or gulp to compile files, store them in different locations, or actually link out to a CDN for some of your scripts.
For example:
arrayAppend( jsFullAppendList, '/includes/js/dragula.js' );
arrayAppend( jsFullAppendList, 'https://code.jquery.com/jquery-3.1.1.min.js' );
How the JS is output
Inside of /modules/contentbox-admin/layouts/inc/HTMLBodyEnd.cfm you will see the following code.
<cfloop list="#event.getValue( "jsAppendList", "", true )#" index="js">
    <script src="#prc.cbroot#/includes/js/#js#.js"></script>
</cfloop>
<cfloop list="#event.getValue( "jsFullAppendList", "", true )#" index="js">
    <script src="#js#"></script>
</cfloop>
CSS Assets
We have two options for working with CSS in the admin.
cssAppendList
This expects the name of the CSS file ( without the .css extension ) which is located in the ContentBox includes/css folder. This is a simple convention based approach, so you can easily just append a file, for example arrayAppend( cssAppendList, 'dragula' ) to load /includes/css/dragula.css
cssFullAppendList
This expects the full path of the css file ( including the .css extension ), including the location. This is useful, because you may be using grunt or gulp to compile files, store them in different locations, or actually link out to a CDN for some of your scripts.
For example:
arrayAppend( cssFullAppendList, '/includes/css/dragula.css' );
arrayAppend( cssFullAppendList, 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
How the CSS is output
Inside of /modules/contentbox-admin/layouts/inc/HTMLHead.cfm you will see the following code.
<cfloop list="#event.getValue( "cssAppendList", "", true )#" index="css">
    <cfset addAsset( "#prc.cbroot#/includes/css/#css#.css" )>
</cfloop>
<cfloop list="#event.getValue( "cssFullAppendList", "", true )#" index="css">
    <cfset addAsset( "#css#" )>
</cfloop>
File Structure
Customizing Views
Last modified 4yr ago