JavaScript file folder asset
The JS file folder asset lets you create a folder of JS file assets that you can merge, minify, and serve as a single, packaged file.
Once created, you can configure the settings of the JS file folder on its associated asset screens. These screens are often the same as (or similar to) those for a standard page. Read the Asset screens documentation for more information about the different common screens in this asset.
This chapter describes the Details screen, which is different for a JS file folder.
Details screen
The Details screen for a JS file folder lets you configure the general settings of the asset and link associate JS file assets.
Read the Asset details screen documentation for general information about the status, future status, and thumbnail sections of this screen.
The details section of the Details screen lets you configure the JS file folder asset’s general settings.
The fields available in this section are as follows:
- Title
-
The friendly name for the JS file folder. By default, this will be the title that was specified when the JS file folder was created.
To change the title:
-
Enter a new value in this field.
-
Select Save.
-
- File name
-
The name of the JS file folder. By default, this will be the title that was specified when the asset was first created. It includes the file extension.
To change the name of the file:
-
Enter a new value in this field.
-
Select Save.
-
- Last updated
-
The date that the contents of the JS file folder were last updated (when the merged file was last regenerated).
- Allow unrestricted access
-
The default setting of this field is
Yes.
Matrix will use different URL styles depending various settings.
The following table shows some combinations:
| JS file folder status | Public read access | Allow unrestricted access setting | Result |
|---|---|---|---|
Under construction |
Yes |
Yes |
A human-readable URL will be used. |
Live |
Yes |
Yes |
A static URL will be used. |
Not applicable |
Not applicable |
No |
A human-readable URL will be used. |
Linked files
You can select the associated JS file and JS design file assets the JS file folder asset in the linking section of the Details screen.
In the linked files field, select the JS file assets to link to the JS file folder.
To select additional JS files and JS design file assets:
-
Click the More… button.
-
Selected more JS files.
-
Select Save.
| The files selected in this section will be linked to the JS file folder as notice links and will not be displayed in the asset tree. |
You can use the keyword replacement %asset_file_list% to print the content of the JS file folder’s linked file.
This keyword can also be used in a global context with the following format: %globals_asset_file_list:[ASSETID]%.
Minification
The minification settings of the Details screen allow you to determine how the linked JS file and JS design file assets are merged and whether or not the code will be minified.
The fields available are as follows:
- Compiler
-
Select the compiler to use for the merging and minification of linked JS file assets.
The options available include:- Merge without minification
-
The linked JS file assets will be merged without minification.
- Basic minification
-
The linked JS file and JS design file assets will be merged using basic minification.
- Closure compiler
-
This option uses the Closure Compiler tool to merge and minify the linked JS File assets. The Closure Compiler tool must first be configured within the screen for this option to work.
- Closure compiler - create source map
-
This option uses the Closure Compiler tool to merge and minify the linked JS file assets, while also creating an associated JavaScript Source Map file.
- Auto regenerate file
-
This field lets you specify whether the JS file folder’s merged file will be automatically regenerated when any of the linked files are modified.
- Regenerate file
-
This field lets you regenerate the JS file folder’s merged file manually. For example, if the content of a linked JS file asset has been modified.
To regenerate the JS file folder’s merged file:
-
Select this checkbox.
-
Select Save.
-
JavaScript source maps
If you are using the Closure compiler - create source map option in the JS file folder’s minification settings, a JavaScript source map will be created for the merged/minified content. You can view this content on the source map files screen.
This source map is used to retrieve information on the individual JS files associated with the JS file folder. When you first create a JS file folder asset or are not using the Closure compiler - create source map option, the source maps screen will be empty:
When the Closure compiler - create source map option has been used, the source map file section of the source map files screen will display the content of the source map file. The associated JS file content will be displayed in the source JS files section.
When a JS file folder has generated a source map file, you can use your browser’s developer tools to parse the source map and view the asset’s JS file content.
Example
The following example shows merging two JS Files using the Closure Compiler minification tool on the JS File Folder asset.
/**
* Function to return average of two number
*
* @param int a
* @param int b
*/function average(a,b)
{
return (a+b)/2;
}//end average()/**
* Function to print current date
*
*/function showDate()
{
var d = new Date();
alert(d.getDate());
}//end showDate()function average(a,b){return(a+b)/2};function showDate(){alert((new Date).getDate())};
//# sourceMappingURL=js_file_folder.min.js.map