DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

Configuration Reference¶

The plugin is configured via the settings poperty inside the USER cObject representing the plugin. Here you can find the possible settings.

Target group: Administrators

TypoScript Reference¶

Configure the plugin via the settings parameter, as you can see here.

lib.cssjs_asyncloader = USER
lib.cssjs_asyncloader {
   #load plugin
   userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
   extensionName = CssJsAsyncLoader
   pluginName = Loader
   vendorName = XiTech

   settings {
     # put your settings here
     # ...
   }
}

CssJsAsyncLoader stages - setting properties¶

Property	Data type	Description
jsLib	CssJsAsyncLoader settings structure	These javascript resources are loaded in the first stage, after HTML+DOM is rendered.
cssLib	CssJsAsyncLoader settings structure	These css resources are loaded in the first stage, after HTML+DOM is rendered.
js	CssJsAsyncLoader settings structure	These javascript resources are loaded in the second stage, after the libs are loaded in the first stage.
css	CssJsAsyncLoader settings structure	These css resources are loaded in the second stage, after the libs are loaded in the first stage.
finalJs	CssJsAsyncLoader settings structure	These javascript resources are loaded in the final stage, after all files are loaded in the previous stages.
finalCss	CssJsAsyncLoader settings structure	These css resources are loaded in the final stage, after all files are loaded in the previous stages.

CssJsAsyncLoader settings structure¶

Property

(1 / 2 / 3 /...)

Data type

CssJsAsyncLoader resource structure

Description

For every resource, that should be loaded in the corresponding state, choose a different number. The resources are loaded in the order they are added.

Example:

settings {
  # first jsLib resource
  jsLib.1.inline.general = ...
  jsLib.1.file.general = ...
  # second jsLib resource
  jsLib.2.inline.general = ...
  jsLib.2.file.general = ...

  #first js resource
  js.1.inline.general = ...
  js.1.file.general = ...
}

This loads 2 files in the first stage jsLib and 1 file in the second stage js.

Default

(empty)

Property

base_href

Data type

string

Description

Defines the base folder which should be the root of every relative url in the css resources.

Example:

settings {
  base_href = /webmail/
}

With this setting all relative urls in the css resources will begin with /webmail/.

Default

(empty)

Property

temp_file_age

Data type

integer

Description

Defines the maximal allowed age of the generated resource files in seconds. This parameter prevents, that the tempfolder grows undefinetely. When a file is older than temp_file_age it is considered outdated and will be removed from the CssJsAsyncLoader temporary folder.

Every time a resource file is accessed, its modification timestamp will be set to the current time. So temp_file_age should be set at least to the maximal time between 2 visits to your site.

The default temp_file_age is 6 months (12*3600*365 seconds), if this parameter is not set.

Example:

settings {
  temp_file_age = 86400
}

With this setting all files older than one day are considered outdated, which is a very risky setting.

Default

(empty)

Property

temp_folder

Data type

integer

Description

Defines where to save the generated resource files. It is recommended, that the files are saved within the typo3temp folder structure.

The default temp_folder is typo3temp/css_js_async_loader, if this parameter is not set.

Example:

settings {
  temp_folder = typo3temp/cssjs
}

With this setting the resource files are saved in typo3temp/cssjs.

Default

(empty)

CssJsAsyncLoader resource structure¶

Property

file

Data type

text array

Description

All files inside the file property are merged together and included in the file, that is loaded in the corresponding state.

Example:

settings {
  js.1.file {
     fancybox = fileadmin/fancybox/js/fancybox.js
     patch = fileadmin/templates/js/patch.js
  }
}

This loads 1 javascript file in the second stage js by merging the 2 javascript files together.

Default

(empty)

Property

inline

Data type

text array

Description

Via the inline property all given inline resources are merged together and added to the file, that is loaded in the correspondig state.

Example:

settings {
  css.1.inline {
     general = body{font-size:16px}
     specific = .bold{font-weight:bold}
     tx_calendar < plugin.tx_cal_controller._CSS_DEFAULT_STYLE
  }
}

This loads 1 css file in the second stage css by merging the 2 inline css lines and the default css from the extension cal together.

Default

(empty)

Property

minify

Data type

integer

Description

If the minify property is set to 1, the resulting merged file is also minified.

The minification is only really implemented for css resources. For javascript minification cf. Developer Corner.

Example:

settings {
  css.1 {
    inline {
      general (
        body {
          font-size: 16px;
        }
      )
      specific (
        .bold {
          font-weight: bold;
        }
      )
      tx_calendar < plugin.tx_cal_controller._CSS_DEFAULT_STYLE
    }
    file {
      fancybox = fileadmin/fancybox/fancybox.css
      patch = fileadmin/templates/patch.css
    }
    minify = 1
  }
}

This loads 1 css file in the second stage css by merging the 2 inline css resources, the default css from the extension cal and the 2 css files together and by minifying them furthermore.

Default

(empty)