diff --git a/README.md b/README.md index b401ad5..3c3f11a 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # UIkit 3 Tabs -![Version](https://img.shields.io/badge/VERSION-1.2.0-0366d6.svg?style=for-the-badge) +![Version](https://img.shields.io/badge/VERSION-1.3.0-0366d6.svg?style=for-the-badge) ![Joomla](https://img.shields.io/badge/joomla-3.7+-1A3867.svg?style=for-the-badge) ![Php](https://img.shields.io/badge/php-5.6+-8892BF.svg?style=for-the-badge) diff --git a/README.ru.md b/README.ru.md index 1aba343..1e58cd2 100644 --- a/README.ru.md +++ b/README.ru.md @@ -1,6 +1,6 @@ # UIkit 3 Tabs -![Version](https://img.shields.io/badge/VERSION-1.2.0-0366d6.svg?style=for-the-badge) +![Version](https://img.shields.io/badge/VERSION-1.3.0-0366d6.svg?style=for-the-badge) ![Joomla](https://img.shields.io/badge/joomla-3.7+-1A3867.svg?style=for-the-badge) ![Php](https://img.shields.io/badge/php-5.6+-8892BF.svg?style=for-the-badge) diff --git a/assets/moduktabs.js b/assets/moduktabs.js new file mode 100644 index 0000000..ce6212d --- /dev/null +++ b/assets/moduktabs.js @@ -0,0 +1,46 @@ +/** + * @package Joomla.Plugin + * @subpackage Content.uk3tabs + * @copyright Copyright (C) Aleksey A. Morozov. All rights reserved. + * @license GNU General Public License version 3 or later; see http://www.gnu.org/licenses/gpl-3.0.txt + */ + +document.addEventListener('DOMContentLoaded', function () { + + function modUkTabs_showTab() + { + let anchor = window.location.hash.replace('#', ''); + let tab = document.getElementById(anchor); + if (tab && tab.parentElement.classList.contains('mod_uk_tabs') == true) { + if (tab.classList.contains('uk-open')) { + return; + } + const index = (Array.prototype.slice.call(tab.parentElement.childNodes).indexOf(tab) + 1) / 2 - 1; + UIkit.tab(tab.parentElement).show(index); + } + } + + document.body.onclick = function(event) { + setTimeout(() => { + let anchor = window.location.hash.replace('#', ''); + let tab = document.getElementById(anchor); + if (tab && tab.parentElement.classList.contains('mod_uk_tabs')) { + if (event.target.parentElement.parentElement == tab.parentElement) { + return; + } + event.preventDefault(); + const index = (Array.prototype.slice.call(tab.parentElement.childNodes).indexOf(tab) + 1) / 2 - 1; + UIkit.tab(tab.parentElement).show(index); + } + }, 100); + }; + + window.addEventListener('hashchange', function() { + setTimeout(() => { + modUkTabs_showTab(); + }, 100); + }) + + modUkTabs_showTab(); + +}); diff --git a/languages/en-GB/en-GB.mod_uk_tabs.ini b/language/en-GB/en-GB.mod_uk_tabs.ini similarity index 94% rename from languages/en-GB/en-GB.mod_uk_tabs.ini rename to language/en-GB/en-GB.mod_uk_tabs.ini index 5d24255..3626901 100644 --- a/languages/en-GB/en-GB.mod_uk_tabs.ini +++ b/language/en-GB/en-GB.mod_uk_tabs.ini @@ -1,40 +1,40 @@ -; @package mod_uk_tabs -; @copyright Copyright (C) 2019 Aleksey A. Morozov (AlekVolsk). All rights reserved. -; @license GNU General Public License version 3 or later; see http://www.gnu.org/licenses/gpl-3.0.txt - -MOD_UK_TABS="UIkit 3 Tabs" -MOD_UK_TABS_XML_DESCRIPTION="Content tabs based on the UIkit 3 framework
Warning! The module does not contain scripts and framework styles, connect them yourself in your template (it is assumed that your template is already based on this framework).

" - -MOD_UK_TABS_CLASS="General tabs class" -MOD_UK_TABS_TITLE_CLASS="Title class (general for each element)" -MOD_UK_TABS_TITLE_TYPE="Title content" -MOD_UK_TABS_TITLE_TYPE_1="Text only" -MOD_UK_TABS_TITLE_TYPE_2="Image only" -MOD_UK_TABS_TITLE_TYPE_3="Image + text" -MOD_UK_TABS_TITLE_TYPE_DESC="What will be displayed in the title. If the image is not specified, but the selected option is «Image only», the text is displayed." -MOD_UK_TABS_TITLE_IMG_WIDTH="Width title image, px" -MOD_UK_TABS_POSITION="Tabs position" -MOD_UK_TABS_POSITION_TOP="Top" -MOD_UK_TABS_POSITION_BOTTOM="Bottom" -MOD_UK_TABS_POSITION_LEFT="Left" -MOD_UK_TABS_POSITION_RIGHT="Right" -MOD_UK_TABS_ALIGNMENT="Tabs alignment" -MOD_UK_TABS_ALIGN_LEFT="Left (top for vertical positioning)" -MOD_UK_TABS_ALIGN_RIGHT="Right (bottom for vertical positioning)" -MOD_UK_TABS_ALIGN_CENTER="Center" -MOD_UK_TABS_ALIGN_JUSTYFY="Justify" -MOD_UK_TABS_ALIGN_WIDTH="Full width (only for horizontal positioning)" -MOD_UK_TABS_ACTIVE="Index of the element to open initially" -MOD_UK_TABS_ACTIVE_DESC="Count of elements starts with 0." -MOD_UK_TABS_CONTENT_CLASS="Content class (general for each element)" -MOD_UK_TABS_SWIPING="Swiping" -MOD_UK_TABS_SWIPING_DESC="Swiping content on devices that support touch-control." -MOD_UK_TABS_MEDIA="Mobile mode" -MOD_UK_TABS_MEDIA_DESC="The width of the screen at which the mobile tab mode will be activated. Specified in pixels or by a special UIkit suffix: @s, @m, @l." - -COM_MODULES_ELS_FIELDSET_LABEL="Elements" -MOD_UK_TABS_FORM_TITLE="Title" -MOD_UK_TABS_FORM_TITLE_IMAGE="Title image" -MOD_UK_TABS_FORM_CONTENT="Content" -MOD_UK_TABS_FORM_TITLE_CLASS="Additional title class" -MOD_UK_TABS_FORM_CONTENT_CLASS="Additional content class" +; @package mod_uk_tabs +; @copyright Copyright (C) Aleksey A. Morozov (AlekVolsk). All rights reserved. +; @license GNU General Public License version 3 or later; see http://www.gnu.org/licenses/gpl-3.0.txt + +MOD_UK_TABS="UIkit 3 Tabs" +MOD_UK_TABS_XML_DESCRIPTION="Content tabs based on the UIkit 3 framework
Warning! The module does not contain scripts and framework styles, connect them yourself in your template (it is assumed that your template is already based on this framework).

" + +MOD_UK_TABS_CLASS="General tabs class" +MOD_UK_TABS_TITLE_CLASS="Title class (general for each element)" +MOD_UK_TABS_TITLE_TYPE="Title content" +MOD_UK_TABS_TITLE_TYPE_1="Text only" +MOD_UK_TABS_TITLE_TYPE_2="Image only" +MOD_UK_TABS_TITLE_TYPE_3="Image + text" +MOD_UK_TABS_TITLE_TYPE_DESC="What will be displayed in the title. If the image is not specified, but the selected option is «Image only», the text is displayed." +MOD_UK_TABS_TITLE_IMG_WIDTH="Width title image, px" +MOD_UK_TABS_POSITION="Tabs position" +MOD_UK_TABS_POSITION_TOP="Top" +MOD_UK_TABS_POSITION_BOTTOM="Bottom" +MOD_UK_TABS_POSITION_LEFT="Left" +MOD_UK_TABS_POSITION_RIGHT="Right" +MOD_UK_TABS_ALIGNMENT="Tabs alignment" +MOD_UK_TABS_ALIGN_LEFT="Left (top for vertical positioning)" +MOD_UK_TABS_ALIGN_RIGHT="Right (bottom for vertical positioning)" +MOD_UK_TABS_ALIGN_CENTER="Center" +MOD_UK_TABS_ALIGN_JUSTYFY="Justify" +MOD_UK_TABS_ALIGN_WIDTH="Full width (only for horizontal positioning)" +MOD_UK_TABS_ACTIVE="Index of the element to open initially" +MOD_UK_TABS_ACTIVE_DESC="Count of elements starts with 0." +MOD_UK_TABS_CONTENT_CLASS="Content class (general for each element)" +MOD_UK_TABS_SWIPING="Swiping" +MOD_UK_TABS_SWIPING_DESC="Swiping content on devices that support touch-control." +MOD_UK_TABS_MEDIA="Mobile mode" +MOD_UK_TABS_MEDIA_DESC="The width of the screen at which the mobile tab mode will be activated. Specified in pixels or by a special UIkit suffix: @s, @m, @l." + +COM_MODULES_ELS_FIELDSET_LABEL="Elements" +MOD_UK_TABS_FORM_TITLE="Title" +MOD_UK_TABS_FORM_TITLE_IMAGE="Title image" +MOD_UK_TABS_FORM_CONTENT="Content" +MOD_UK_TABS_FORM_TITLE_CLASS="Additional title class" +MOD_UK_TABS_FORM_CONTENT_CLASS="Additional content class" diff --git a/languages/en-GB/en-GB.mod_uk_tabs.sys.ini b/language/en-GB/en-GB.mod_uk_tabs.sys.ini similarity index 82% rename from languages/en-GB/en-GB.mod_uk_tabs.sys.ini rename to language/en-GB/en-GB.mod_uk_tabs.sys.ini index 07d36fb..fc8d59e 100644 --- a/languages/en-GB/en-GB.mod_uk_tabs.sys.ini +++ b/language/en-GB/en-GB.mod_uk_tabs.sys.ini @@ -1,6 +1,6 @@ -; @package mod_uk_tabs -; @copyright Copyright (C) 2019 Aleksey A. Morozov (AlekVolsk). All rights reserved. -; @license GNU General Public License version 3 or later; see http://www.gnu.org/licenses/gpl-3.0.txt - -MOD_UK_TABS="UIkit 3 Tabs" -MOD_UK_TABS_XML_DESCRIPTION="Content tabs based on the UIkit 3 framework
Warning! The module does not contain scripts and framework styles, connect them yourself in your template (it is assumed that your template is already based on this framework).

" +; @package mod_uk_tabs +; @copyright Copyright (C) Aleksey A. Morozov (AlekVolsk). All rights reserved. +; @license GNU General Public License version 3 or later; see http://www.gnu.org/licenses/gpl-3.0.txt + +MOD_UK_TABS="UIkit 3 Tabs" +MOD_UK_TABS_XML_DESCRIPTION="Content tabs based on the UIkit 3 framework
Warning! The module does not contain scripts and framework styles, connect them yourself in your template (it is assumed that your template is already based on this framework).

" diff --git a/languages/ru-RU/ru-RU.mod_uk_tabs.ini b/language/ru-RU/ru-RU.mod_uk_tabs.ini similarity index 96% rename from languages/ru-RU/ru-RU.mod_uk_tabs.ini rename to language/ru-RU/ru-RU.mod_uk_tabs.ini index 9d6765e..b3ccd19 100644 --- a/languages/ru-RU/ru-RU.mod_uk_tabs.ini +++ b/language/ru-RU/ru-RU.mod_uk_tabs.ini @@ -1,40 +1,40 @@ -; @package mod_uk_tabs -; @copyright Copyright (C) 2019 Aleksey A. Morozov (AlekVolsk). All rights reserved. -; @license GNU General Public License version 3 or later; see http://www.gnu.org/licenses/gpl-3.0.txt - -MOD_UK_TABS="UIkit 3 Tabs" -MOD_UK_TABS_XML_DESCRIPTION="Табы контента, основанные на фреймворке UIkit 3
Внимание! Модуль не содержит скриптов и стилей фреймворка, подключите их самостоятельно в вашем шаблоне (подразумевается, что ваш шаблон уже основан на данном фреймворке).

" - -MOD_UK_TABS_CLASS="Общий класс табов" -MOD_UK_TABS_TITLE_CLASS="Класс заголовка (общий для каждого элемента)" -MOD_UK_TABS_TITLE_TYPE="Контент заголовка" -MOD_UK_TABS_TITLE_TYPE_1="Только текст" -MOD_UK_TABS_TITLE_TYPE_2="Только изображение" -MOD_UK_TABS_TITLE_TYPE_3="Изображение + текст" -MOD_UK_TABS_TITLE_TYPE_DESC="Что будет выведено в заголовке. Если изображение не указано, но выбрана опция «Только изображение», будет выведен текст." -MOD_UK_TABS_TITLE_IMG_WIDTH="Ширина изображения в заголовке, px" -MOD_UK_TABS_POSITION="Позиция табов" -MOD_UK_TABS_POSITION_TOP="Сверху" -MOD_UK_TABS_POSITION_BOTTOM="Снизу" -MOD_UK_TABS_POSITION_LEFT="Слева" -MOD_UK_TABS_POSITION_RIGHT="Справа" -MOD_UK_TABS_ALIGNMENT="Выравнивание табов" -MOD_UK_TABS_ALIGN_LEFT="Слева (сверху для вертикального позиционирования)" -MOD_UK_TABS_ALIGN_RIGHT="Справа (снизу для вертикального позиционирования)" -MOD_UK_TABS_ALIGN_CENTER="По центру" -MOD_UK_TABS_ALIGN_JUSTYFY="По ширине" -MOD_UK_TABS_ALIGN_WIDTH="По ширине с заполнением (только для горизонтального позиционирования)" -MOD_UK_TABS_ACTIVE="Номер элемента, открытого по умолчанию" -MOD_UK_TABS_ACTIVE_DESC="Отсчет элементов начинается с 0." -MOD_UK_TABS_CONTENT_CLASS="Класс контента (общий для каждого элемента)" -MOD_UK_TABS_SWIPING="Пролистывание" -MOD_UK_TABS_SWIPING_DESC="Пролистывание контента на устройствах с поддержкой touch-управления" -MOD_UK_TABS_MEDIA="Мобильный режим" -MOD_UK_TABS_MEDIA_DESC="Ширина экрана, при которой будет активирован мобильный режим табов. Указывается в пикселях либо специальным UIkit-суффиксом: @s, @m, @l." - -COM_MODULES_ELS_FIELDSET_LABEL="Элементы" -MOD_UK_TABS_FORM_TITLE="Заголовок" -MOD_UK_TABS_FORM_TITLE_IMAGE="Изображение для заголовка" -MOD_UK_TABS_FORM_CONTENT="Контент" -MOD_UK_TABS_FORM_TITLE_CLASS="Дополнительный класс заголовка" -MOD_UK_TABS_FORM_CONTENT_CLASS="Дополнительный класс блока контента" +; @package mod_uk_tabs +; @copyright Copyright (C) Aleksey A. Morozov (AlekVolsk). All rights reserved. +; @license GNU General Public License version 3 or later; see http://www.gnu.org/licenses/gpl-3.0.txt + +MOD_UK_TABS="UIkit 3 Tabs" +MOD_UK_TABS_XML_DESCRIPTION="Табы контента, основанные на фреймворке UIkit 3
Внимание! Модуль не содержит скриптов и стилей фреймворка, подключите их самостоятельно в вашем шаблоне (подразумевается, что ваш шаблон уже основан на данном фреймворке).

" + +MOD_UK_TABS_CLASS="Общий класс табов" +MOD_UK_TABS_TITLE_CLASS="Класс заголовка (общий для каждого элемента)" +MOD_UK_TABS_TITLE_TYPE="Контент заголовка" +MOD_UK_TABS_TITLE_TYPE_1="Только текст" +MOD_UK_TABS_TITLE_TYPE_2="Только изображение" +MOD_UK_TABS_TITLE_TYPE_3="Изображение + текст" +MOD_UK_TABS_TITLE_TYPE_DESC="Что будет выведено в заголовке. Если изображение не указано, но выбрана опция «Только изображение», будет выведен текст." +MOD_UK_TABS_TITLE_IMG_WIDTH="Ширина изображения в заголовке, px" +MOD_UK_TABS_POSITION="Позиция табов" +MOD_UK_TABS_POSITION_TOP="Сверху" +MOD_UK_TABS_POSITION_BOTTOM="Снизу" +MOD_UK_TABS_POSITION_LEFT="Слева" +MOD_UK_TABS_POSITION_RIGHT="Справа" +MOD_UK_TABS_ALIGNMENT="Выравнивание табов" +MOD_UK_TABS_ALIGN_LEFT="Слева (сверху для вертикального позиционирования)" +MOD_UK_TABS_ALIGN_RIGHT="Справа (снизу для вертикального позиционирования)" +MOD_UK_TABS_ALIGN_CENTER="По центру" +MOD_UK_TABS_ALIGN_JUSTYFY="По ширине" +MOD_UK_TABS_ALIGN_WIDTH="По ширине с заполнением (только для горизонтального позиционирования)" +MOD_UK_TABS_ACTIVE="Номер элемента, открытого по умолчанию" +MOD_UK_TABS_ACTIVE_DESC="Отсчет элементов начинается с 0." +MOD_UK_TABS_CONTENT_CLASS="Класс контента (общий для каждого элемента)" +MOD_UK_TABS_SWIPING="Пролистывание" +MOD_UK_TABS_SWIPING_DESC="Пролистывание контента на устройствах с поддержкой touch-управления" +MOD_UK_TABS_MEDIA="Мобильный режим" +MOD_UK_TABS_MEDIA_DESC="Ширина экрана, при которой будет активирован мобильный режим табов. Указывается в пикселях либо специальным UIkit-суффиксом: @s, @m, @l." + +COM_MODULES_ELS_FIELDSET_LABEL="Элементы" +MOD_UK_TABS_FORM_TITLE="Заголовок" +MOD_UK_TABS_FORM_TITLE_IMAGE="Изображение для заголовка" +MOD_UK_TABS_FORM_CONTENT="Контент" +MOD_UK_TABS_FORM_TITLE_CLASS="Дополнительный класс заголовка" +MOD_UK_TABS_FORM_CONTENT_CLASS="Дополнительный класс блока контента" diff --git a/languages/ru-RU/ru-RU.mod_uk_tabs.sys.ini b/language/ru-RU/ru-RU.mod_uk_tabs.sys.ini similarity index 86% rename from languages/ru-RU/ru-RU.mod_uk_tabs.sys.ini rename to language/ru-RU/ru-RU.mod_uk_tabs.sys.ini index 3f90632..6320569 100644 --- a/languages/ru-RU/ru-RU.mod_uk_tabs.sys.ini +++ b/language/ru-RU/ru-RU.mod_uk_tabs.sys.ini @@ -1,6 +1,6 @@ -; @package mod_uk_tabs -; @copyright Copyright (C) 2019 Aleksey A. Morozov (AlekVolsk). All rights reserved. -; @license GNU General Public License version 3 or later; see http://www.gnu.org/licenses/gpl-3.0.txt - -MOD_UK_TABS="UIkit 3 Tabs" -MOD_UK_TABS_XML_DESCRIPTION="Табы контента, основанные на фреймворке UIkit 3
Внимание! Модуль не содержит скриптов и стилей фреймворка, подключите их самостоятельно в вашем шаблоне (подразумевается, что ваш шаблон уже основан на данном фреймворке).

" +; @package mod_uk_tabs +; @copyright Copyright (C) Aleksey A. Morozov (AlekVolsk). All rights reserved. +; @license GNU General Public License version 3 or later; see http://www.gnu.org/licenses/gpl-3.0.txt + +MOD_UK_TABS="UIkit 3 Tabs" +MOD_UK_TABS_XML_DESCRIPTION="Табы контента, основанные на фреймворке UIkit 3
Внимание! Модуль не содержит скриптов и стилей фреймворка, подключите их самостоятельно в вашем шаблоне (подразумевается, что ваш шаблон уже основан на данном фреймворке).

" diff --git a/mod_uk_tabs.php b/mod_uk_tabs.php index 74c10db..8f35984 100644 --- a/mod_uk_tabs.php +++ b/mod_uk_tabs.php @@ -1,10 +1,11 @@ addScript('/modules/mod_uk_tabs/assets/moduktabs.js'); require(ModuleHelper::getLayoutPath('mod_uk_tabs', $params->get('layout', 'default'))); } diff --git a/mod_uk_tabs.xml b/mod_uk_tabs.xml index bb7eb1f..b53ea54 100644 --- a/mod_uk_tabs.xml +++ b/mod_uk_tabs.xml @@ -1,18 +1,19 @@ UIkit 3 Tabs - Aleksey A. Morozov (AlekVolsk) - (C) 2019 Aleksey A. Morozov. All rights reserved. - GNU General Public License version 3 or later; see http://www.gnu.org/licenses/gpl-3.0.txt - 1.2.0 - February 2019 + Aleksey A. Morozov (AlekVolsk) + (C) Aleksey A. Morozov. All rights reserved. + GNU General Public License version 3 or later; see http://www.gnu.org/licenses/gpl-3.0.txt + 1.3.0 + July 2021 mod_uk_tabs.php + assets forms tmpl - + en-GB/en-GB.mod_uk_tabs.ini en-GB/en-GB.mod_uk_tabs.sys.ini ru-RU/ru-RU.mod_uk_tabs.ini @@ -20,7 +21,7 @@ - +
@@ -51,11 +52,11 @@
- +
- +
@@ -66,4 +67,4 @@ - \ No newline at end of file + diff --git a/tmpl/default.php b/tmpl/default.php index df5a356..dd7a068 100644 --- a/tmpl/default.php +++ b/tmpl/default.php @@ -1,7 +1,7 @@
    @@ -12,10 +14,11 @@ $i = 0; foreach ($items as $item) { + $tab_id = 'tab-' . OutputFilter::stringURLSafe($item->title); $item_content_class = trim($item->content_class) ? ' ' . trim($item->content_class) : ''; $tab_active = $i == $active ? ' class="uk-active"' : ''; ?> -
  • content; ?>
    • +
  • content); ?>
diff --git a/tmpl/default_right.php b/tmpl/default_right.php index 3df3513..c1ced19 100644 --- a/tmpl/default_right.php +++ b/tmpl/default_right.php @@ -1,10 +1,12 @@
@@ -14,10 +16,11 @@ $i = 0; foreach ($items as $item) { + $tab_id = 'tab-' . OutputFilter::stringURLSafe($item->title); $item_content_class = trim($item->content_class) ? ' ' . trim($item->content_class) : ''; $tab_active = $i == $active ? ' class="uk-active"' : ''; ?> -
  • content; ?>
    • +
  • content); ?>
    • @@ -30,7 +33,7 @@ $item_title_class = trim($item->title_class) ? ' ' . trim($item->title_class) : ''; $tab_active = $i == $active ? ' class="uk-active"' : ''; ?> - > +
  • > title_image . '" alt="' . $item->title . '"' . ((int)$title_img_width ? ' width="' . (int)$title_img_width . '"' : '') . '>'; } else { - echo $item->title; + echo $item->title; } break; case 3: @@ -51,7 +54,7 @@ { echo '' . $item->title . ''; } - echo $item->title; + echo $item->title; } ?> diff --git a/tmpl/default_top.php b/tmpl/default_top.php index 0bba77e..49d5e8d 100644 --- a/tmpl/default_top.php +++ b/tmpl/default_top.php @@ -1,10 +1,12 @@