Як вивести стиль css чи JavaScript з модуля один раз. Конфлікти при копіюванні модуля.

Коли ми розробляємо модулі для Joomla, ми завжди повинні враховувати можливість їхнього багаторазового використання на одній сторінці. 

Щоб позбутися дублювання CSS та JS, ми застосуємо метод "статичних прапорців" (static flags). Це дозволить вивести стилі лише один раз, а скрипти зробити унікальними для кожного екземпляра. Таким чином ми маємо розділити стилі та скрипти на статичні, які відносяться до загальних елементів і не мають дублюватись, та унікальні які відносяться до кожного модуля. Унікальні класи ми розділяємо додавши до класу id модуля: $module->id

<?php
// Унікальний ID модуля для селекторів
$modId = $module->id;
/**
* 1. ОПТИМІЗАЦІЯ СТИЛІВ (Виводяться лише один раз)
*/
static $useGallStylesLoaded = false;
if (!$useGallStylesLoaded) {
$style = "
.usegall-grid { ... }
";
$doc->addStyleDeclaration($style);
$useGallStylesLoaded = true;
}
// Індивідуальні налаштування розмірів для кожного модуля
$customSize = "
#usegall-{$modId} div { ... } // наприклад #usegall-10 div
#usegall-".$modId." img { width: ... ; height: ... ; } // результат #usegall-10 img
";
$doc->addStyleDeclaration($customSize); ?>
<div id="usegall-<?php echo $modId; ?>" class="mod-usegall">
<div class="usegall-grid">
<?php foreach ($images as $index => $img) : ?>
<div class="usegall-item">
<img src="/<?php echo $img->folder . '/' . htmlspecialchars($img->name, ENT_COMPAT, 'UTF-8'); ?>">
</div>
<?php endforeach; ?>
</div>
</div>

Аналогічно у випадку з JavaScript використовуємо <?php echo $modId; ?> для підтримки унікальності класу для кожного дублікату модуля:

<script>
(function() {
 ... 
overlay.addEventListener('click', function(e) { if (e.target === this) closeLightbox_<?php echo $modId; ?>(); });
document.addEventListener('keydown', function(e) {
if (overlay.style.display === 'flex') {
if (e.key === 'ArrowRight') nextImg_<?php echo $modId; ?>();
if (e.key === 'ArrowLeft') prevImg_<?php echo $modId; ?>();
if (e.key === 'Escape') closeLightbox_<?php echo $modId; ?>();
}
});
})();
</script>

На що звернути увагу:

  1. Запобігання дублюванню CSS: Використовуємо конструкцію static $useGallStylesLoaded. Тепер, скільки б модулів ви не вивели, загальні стилі додадуться в <head> лише один раз. Це значно полегшує сторінку.
  2. Унікальні JS функції: Назви функцій тепер мають прифікс _<?php echo $modId; ?>. Наприклад: closeLightbox_3(). Це гарантує, що клік на одному модулі не вплине на іншого.
  3. Ізоляція скриптів: Обгорнули основний скрипт в анонімну функцію (function() { ... })();. Це створює локальну область видимості для змінних currentIndex та images, щоб вони не перетиналися між модулями.
  4. Унікальні ID для елементів: Навіть ID для самої картинки в попапі тепер унікальний: usegall-full-img-<?php echo $modId; ?>.
  5. Контроль розмірів: Стилі для ширини та висоти (width, height) винесені окремо, оскільки вони можуть бути різними для кожного модуля.