Документация InstantCMS

для администраторов и разработчиков

Инструменты пользователя

Инструменты сайта


en:dev:templates:css-js

Linking CSS and Javascript files

Introduction

All CSS and JavaScript files in the templates has to be linked via special methods (functions). Accordingly, all Compression Options will be taken into account and the possibility of duplicate linking of the same files will be eliminated.

It is worth noting that the paths to the files in all listed methods need to be linked without the initial slash and relative to the InstantCMS file tree root. However, it is also worth mentioning that if you are going to link inherited templates later, the path to the linked files should be formed via special methods.

All templates are linked in the methods (functions) of the cmsTemplate template engine class, that is why the $this context is available in each template. The objects of other system classes are available either via the controller property of the template (for example, $this→controller→cms_user, according to the work with system classes and objects), or via explicitly declared objects (for example, $core = cmsCore::getInstance();).

Linking CSS files

The main CSS file of a controller, if there is one at the path /templates/TEMPLATE_TITLE/controllers/CONTROLLER_TITLE/styles.css, is linked automatically, you just need to create it.

The following methods of CSS linking are available in the template:

$this->getCSSTag($path_to_file);

Returns the CSS file’s HTML linking code. There is one parameter to which the file path is passed. This method does nothing but returns the HTML linking code.

$this->insertCSS($path_to_file);

Types the CSS file’s HTML linking code. There is one parameter to which the file path is passed. This method does nothing but outputs the HTML linking code. The main difference from the $this→getCSSTag($path_to_file); method is that the HTML linking code is typed at once. The files that are linked in this way do not participate in compression and minification of CSS files.

$this->addMainCSS($path_to_file);

Adds the CSS file to the head section of the page above other references to CSS styles. The files that are linked in this way participate in compression and minification of CSS files.

$this->addCSS($path_to_file, $allow_merge);

Adds the CSS file to the end of the list of references to CSS styles. The files that are linked in this way participate in compression and minification of CSS files, if the $allow_merge second parameter is specified in true (default behaviour).

$this->addControllerCSS($path, $cname, $allow_merge);

Searches for a CSS file at the path /templates/TEMPLATE_TITLE/controllers/{$cname}/css/{$path}.css and links it to the end of the list of references to CSS styles, if finds. The files that are linked in this way participate in compression and minification of CSS files, if the $allow_merge third parameter is specified in true (default behaviour). The controller’s title is specified in the $cname variable. If it is not passed, the current context’s controller is used.

The method searches for a specified file in the currently selected template first, if it does not find, the one that is located at the similar path of the default template is linked.

$this->addCSSFromContext($path_to_file);

Depending on the request context, this method either executes the $this→insertCSS($path_to_file); method (in case of an AJAX request), or executes the $this→addCSS($path_to_file, $allow_merge); method (in case of an ordinary request).

Linking JavaScript files

The following methods of linking JavaScript files are available in the template:

$this->getJSTag($path_to_file, $comment);

Returns the JavaScript file’s HTML linking code. The path to the file is passed to the $path_to_file parameter, you can comment the reference in the $comment parameter. This method does nothing but returns the HTML linking code.

$this->insertJS($path_to_file, $comment);

Types the JavaScript file’s HTML linking code. This method does nothing but outputs the HTML linking code. The main difference of the $this→getJSTag($path_to_file, $comment); method is that the HTML linking code is typed at once. The files that are linked in this way do nor participate in compression and minification of JavaScript files.

$this->addMainJS($path_to_file, $comment);

Adds the JavaScript file to the head section of the page above other references to JavaScript files. The files that are linked in this way participate in compression and minification of JavaScript files.

$this->addJS($path_to_file, $comment, $allow_merge);

Adds the JavaScript file to the end of the list of references to JavaScript files. The files that are linked in this way participate in compression and minification of JavaScript files, if the $allow_merge third parameter is specified in true (default behaviour).

$this->addControllerJS($path, $cname, $comment, $allow_merge);

Searches for a JavaScript file at the path /templates/TEMPLATE_TITLE/controllers/{$cname}/js/{$path}.js and links it to the end of the list of references to JavaScript files, if finds. The files that are linked in this way participate in compression and minification of JavaScript files, if the $allow_merge fourth parameter is specified in true (default behaviour). The controller’s title is specified in the $cname variable. If it is not passed, the current context’s controller is used.

$this->addJSFromContext($path_to_file, $comment);

Depending on the context request, this method either executes the $this→insertJS($path_to_file, $comment); method (in case of an AJAX request) or executes the $this→addJS($path_to_file, $comment, $allow_merge); method (in case of an ordinary request).

$this->getLangJS($phrases);

This method does not link any files and will be helpful to output the language constants in a convenient way. To the $phrases parameter you can pass:

  • Language constant title;
  • An array of language constant titles;
  • Specify an unlimited number of incoming parameters of the method where each parameter is the constant’s title.

Please note that you should pass not the constant (i.e. something that is stored in it) but its title, for example:

<script>
    <?php echo $this->getLangJS('LANG_CP_WIDGET_DELETE_CONFIRM', 'LANG_HIDE', 'LANG_SHOW'); ?>
</script>

this will be equal to the following:

<script>
    <?php echo $this->getLangJS(array('LANG_CP_WIDGET_DELETE_CONFIRM', 'LANG_HIDE', 'LANG_SHOW')); ?>
</script>

On the page, the result will be the following:

<script>
    var LANG_CP_WIDGET_DELETE_CONFIRM = 'Delete widget?';
    var LANG_HIDE = 'Hide';
    var LANG_SHOW = 'Show';
</script>

Back to Section Contents

en/dev/templates/css-js.txt · Последнее изменение: 21.03.2017 15:34 — murlysja