BSE - постройка бассейнов и установка водных сооружений

Подготовка к работе

1. Установка требуемых пакетов: npm i;
2. Сборка версии разработки, запуск сервера и открытие сайта в браузере: npm run serve;
3. Сборка версии разработки: npm run dev;
4. Сборка итоговой версии: npm run build;
5. Деплой проекта на GitHub: npm run deploy.

Структура и содержимое

Свайпер (SwiperJS) + Слайдер (кастомный)

1. установить библиотеку свайпера npm i swiper;
2. добавить библиотеку компонента Slider (src/js/components/slider);
3. создать DOM-структуру свайпера и слайдера (с соответствующими наименованиями классов) - см. элемент panelMainProjects.js;
4. после обновления содержимого страницы запустить скрипты синхронизации свайпера и слайдера startSwiperSliderSynchro().

Компонент кнопки Button

Порядок установки:

1. обязательно требуется установка плагина redom;

2. исходники - js/components/button, включающие файлы скрипта button.js и стилей SASS button.sass;

3. параметры создания объекта кнопки включают:

   • id - уникальный ключ создаваемого DOM-элемента (на уникальность не проверяется, т.к. подразумевается, что DOM-дерево еще не загружено);
   • classNames - массив имен классов, которые следует приписать DOM-элементу, по умолчанию пустой [];
   • type - тип создаваемой кнопки, по умолчанию button;
   • caption - текстовое содержание кнопки при наличии;
   • svg - путь к svg-иконке при наличии (берется из iconPath, получаемый через import iconPath from './iconName.svg');
   • callbackClick - обработчик нажатия на кнопку (по умолчанию html-код созданного DOM-элемента выводится в консоль);

4. конструктор объекта возвращает созданный DOM-элемент для последующего добавления его в дерево;

5. пример создания кнопки для отправки сообщения:

   import Button from '../components/Button/button';
   import icon from '../icons/icon.svg';
   
   const btn = new Button({
     id: '#send-message-btn',
     classNames: ['btn', 'messages__btn'],
     type: 'submit',
     caption: 'Отправить сообщение',
     svg: icon,
     callbackClick: sendMessage,
   });

6. важные замечания:

   • стили компоненты подключаются непосредственно по технологии CSS-in-JS, поэтому эти стили будут заведомо приоритетными по отношению к стилям, добавленным через main.sass;

   • чтобы не использовать !important для кастомизации встроенных стилей кнопки, требуется указывать составные стили для классов, назначаемых кнопке через параметр classNames, например:

     • через стандартный тег кнопки:

       button.btn {}
       button.messages__btn {}

     • через класс компоненты, заданный по умолчанию:

       .button.btn {}
       .button.messages__btn {}

     • с использованием стандартного кастомного класса кнопки для приложения (в примере из п.4 это класс .btn) -- передавать в списке classNames комбинацию классов, первым из которых будет стандартный класс, а остальными конкректные классы для текущего контекста выполнения:

       .btn.messages__btn {}

   • можно упростить предыдущий способ, отредактировав файл button.js, убрав из него импорт стилей button.sass - вместо этого стили нужно добавить в основной файл со стилями main.sass, и тогда проблема с составными стилями аннулируется:

     @import './js/components/Button/button.sass';