.. ==================================================
.. FOR YOUR INFORMATION
.. --------------------------------------------------
.. -*- coding: utf-8 -*- with BOM.

.. include:: ../Includes.txt


.. _configuration:

Configuration Reference
=======================

The plugin is configured via the ``settings`` poperty inside the :ref:`USER <cobj-user>` cObject representing the plugin. Here you can find the possible settings.

Target group: **Administrators**


.. _configuration-typoscript:

TypoScript Reference
--------------------

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

.. code-block:: typoscript

  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
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

.. container:: 

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


.. _cssjsasyncloader_settings:

CssJsAsyncLoader settings structure
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


.. ### BEGIN~OF~TABLE ###

.. container:: table-row

   Property
         (1 / 2 / 3 /...)

   Data type
         :ref:`cssjsasyncloader_resource`

   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)

.. container:: table-row

   Property
         base_href

   Data type
         :ref:`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)

.. container:: table-row

   Property
         temp_file_age

   Data type
         :ref:`data-type-int`

   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)

.. container:: table-row

   Property
         temp_folder

   Data type
         :ref:`data-type-int`

   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)


.. ###### END~OF~TABLE ######

.. _cssjsasyncloader_resource:

CssJsAsyncLoader resource structure
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


.. ### BEGIN~OF~TABLE ###

.. container:: table-row

   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)

.. container:: table-row

   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)

.. container:: table-row

   Property
         minify 

   Data type
         :ref:`data-type-int`

   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. :ref:`developer`.

         **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)



.. ###### END~OF~TABLE ######