На данном этапе мы добавим к нашему фону мерцающие звезды. Это будет выполнено с применением программных аргументов, которые создаются функцией fcf.argProg().

Перед нами стоит задача расположить хаотично звезды на фоне и рассинхранизировать анимацию мерцания звезд. Для этого создадим программный аргумент stars (массив параметров звезд) и обычный аргумент starsCount, который будет хранить количество звезд.

Изменим файл шаблона :templates/blocks/planet.tmpl

... //~ARGUMENTS { fcfStyleInner: fcf.argVal("display: block; overflow: hidden; width: @{{args.width}}@; height: @{{args.height}}@"), width: "100%", height: "300px", starsCount: 100, stars: fcf.argProg(), } ...

Теперь создадим файл обработки хуков используя fcfmngr или плагины. В котором будем формировать аргумент stars.

$ cd [PROJECT_DIRECTORY]/templates/blocks $ fcfmngr create hooks planet

И изменим свойство hooksProgrammableArgument, добавив код формирования информации о наших звездах.

Файл :templates/blocks/planet.hooks.js

... // // Object of hooks for programmatically populated arguments. The function can be asynchronous // hooksProgrammableArgument: { // // Hook of the assembly of a programmatically populated argument created by the fcf.argProg() method with the name ARG_NAME // The function can be asynchronous // @result Returns the value of an argument or a Promise object // stars: (a_taskInfo) => { let stars = []; for(let i = 0; i < a_taskInfo.args.starsCount; ++i) { stars.push({ left: 100*Math.random(), top: 100*Math.random(), duration: 2+8*Math.random(), delay: 2*Math.random(), }); } return stars; }, }, ...

Теперь аргумент stars содержит массив с информацией о каждой звезде. Мы не указывали starsCount в зависимостях аргумента stars, несмотря на то, что его сборка явно зависит от этого значения. Так как, последовательность сборки аргументов шаблона по умолчанию соответствует очередности:

1. Системные аргументы (начинающиеся с префикса fcf)
2. URL аргументы
3. Аргументы - значения
4. Аргументы - шаблоны
5. Программные аргументы

Если бы организация аргументов и их взаимосвязи были другими, возможно нам бы пришлось добавить зависимость при объявлении аргумента в опции fcf.argProg() (параметр dependencies).

Теперь давайте отобразим наши данные. Используя конструкцию кода Javascript for в конструкции %{{ }}%.

Файл :templates/blocks/planet.tmpl

... //~TEMPLATE <div class="planet-container"> <div class="star-container"> %{{ for(let i = 0; i < args.stars.length; ++i) { }}% <div class="star" style="left:@{{args.stars[i].left}}@%; top: @{{args.stars[i].top}}@%; animation-duration: @{{args.stars[i].duration}}@s; animation-delay: @{{args.stars[i].delay}}@s;"></div> %{{ } }}% </div> <div class="planet-sun-container"> <div class="planet-sun-container-item"> <div class="planet-sun"></div> </div> </div> </div> ...

Как видно из выдержки измененного файла, наш массив stars содержит параметры стилей каждой звезды, которая является обычным DOM элементов.

Теперь посмотрим в браузере на результат нашей работы.

Одной из основных задач программных аргументов, является задача разгрузить логику шаблонов, что бы все вычисления оставались в отдельных модулях, а за формирования HTML отвечал простой и читабельный код.