v.2.0.0 added sublayouts for frontend. Color for standart baloon

WebTolk · Sep 17, 2024 · 766edff · 766edff
1 parent 69cba20
commit 766edff
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 747 deletions.
diff --git a/.gitignore b/.gitignore
diff --git a/language/en-GB/plg_fields_wtyandexmap.ini b/language/en-GB/plg_fields_wtyandexmap.ini
@@ -23,4 +23,8 @@ PLG_WTYANDEXMAP_PARAMS_PLACEMARK_ICON_CODE_LABEL="Icon code"
 PLG_WTYANDEXMAP_PARAMS_PLACEMARK_ICON_CODE_DESC="Icon code from <a href=\"https://yandex.ru/dev/maps/jsapi/doc/2.1/ref/reference/option.presetStorage.html \" target=\"_blank\">Yandex.maps JS API documentation</a>"
 PLG_WTYANDEXMAP_PARAMS_DONT_SHOW_IN_CATEGORY_LABEL="Don't show in categories"
 PLG_WTYANDEXMAP_PARAMS_DONT_SHOW_IN_CATEGORY_DESC="The map will not be displayed on category pages (where <code>$view=category</code> is present in the url)"
-PLG_WTYANDEXMAP_ERROR_THERE_IS_NO_API_KEY = "<strong>WT Yandex Map field:</strong> There is no Yandex.Map API key."
+PLG_WTYANDEXMAP_ERROR_THERE_IS_NO_API_KEY = "<strong>WT Yandex Map field:</strong> There is no Yandex.Map API key."
+PLG_WTYANDEXMAP_PARAMS_MARKER_LAYOUT_LABEL = "Marker layout"
+PLG_WTYANDEXMAP_PARAMS_MARKER_LAYOUT_DESC = "Layouts are located in the <code>plugins/fields/wtyandexmap/tmpl/markers</code> folder. Copy and modify the file to suit your needs, then specify it in the field settings."
+PLG_WTYANDEXMAP_PARAMS_MARKER_COLOR_LABEL = "Marker color"
+PLG_WTYANDEXMAP_PARAMS_MARKER_COLOR_DESC = "RGB or verbal color indication: for example <code>red</code> or <code>#FF0000</code>"
diff --git a/language/en-GB/plg_fields_wtyandexmap.sys.ini b/language/en-GB/plg_fields_wtyandexmap.sys.ini
@@ -1,16 +1,16 @@
-; @package    Fields - WT Yandex Map
-; @version    2.0.0
-; @author     Sergey Tolkachyov
-; @сopyright  Copyright (c) 2022 - 2024 Sergey Tolkachyov. All rights reserved.
+; @package    Fields - WT Yandex Map
+; @version    2.0.0
+; @author     Sergey Tolkachyov
+; @сopyright  Copyright (c) 2022 - 2024 Sergey Tolkachyov. All rights reserved.
 ; @license    GNU/GPL license: https://www.gnu.org/copyleft/gpl.html
-; @link       https://web-tolk.ru
+; @link       https://web-tolk.ru
 PLG_WTYANDEXMAP = "Fields - WT Yandex Map"
 PLG_WTYANDEXMAP_DESC = "Plugin for creating fields of type <strong>Yandex Maps</strong> in extensions that implement custom fields. The plugin allows you to specify and display labels using the <a href=\"https://yandex.ru/maps/\" target=\"_blank\">Yandex.Maps</a>. To fully work with maps, you need to specify the API key in the plugin settings, which can be obtained in <a href=\"https://developer.tech.yandex.ru\" target=\"=_blank\">Yandex Developer Dashboard</a>"
 PLG_WTYANDEXMAP_AFTER_INSTALL = "Thank you for intalling extension"
 PLG_WTYANDEXMAP_AFTER_DISCOVER_INSTALL = "Thank you for intalling extension"
 PLG_WTYANDEXMAP_AFTER_UPDATE = "Thank you for updating extension"
 PLG_WTYANDEXMAP_MAYBE_INTERESTING = "<h4>It may be interesting</h4><ul class=\"nav nav-tabs nav-stacked list-group\"><li class=\"list-group-item\"><a href=\"https://web-tolk.ru/en/dev/web-assets\" target=\"_blank\" title=\"Go to https://web-tolk.ru\">Joomla 4 & Joomla 5 Web Assets.</a></li><li class=\"list-group-item\"><a href=\"https://web-tolk.ru/en/dev/joomshopping\" target=\"_blank\" title=\"Go to https://web-tolk.ru\">JoomShopping extensions</a></li><li class=\"list-group-item\"><a href=\"https://web-tolk.ru/en/dev/joomla-plugins\" target=\"_blank\" title=\"Go to https://web-tolk.ru\">Joomla plugins</a></li><li class=\"list-group-item\"><a href=\"https://web-tolk.ru/en/dev/joomla-modules\" target=\"_blank\" title=\"Go to https://web-tolk.ru\">Joomla modules</a></li><li class=\"list-group-item\"><a href=\"https://web-tolk.ru/en/dev/components\" target=\"_blank\" title=\"Go to https://web-tolk.ru\">Joomla components</a></li><li class=\"list-group-item\"><a href=\"https://web-tolk.ru/en/dev/joomla-libraries\" target=\"_blank\" title=\"Go to https://web-tolk.ru\">Joomla libraries for developers.</a></li></ul>"
-PLG_WTYANDEXMAP_WHATS_NEW = "<h3>v.2.0.0 What's new?</h3><h4>Joomla 5 ready</h4><p>The plugin has been rewritten for the <strong>Joomla 4</strong>, <strong>Joomla 5</strong>. This means that the extension will work without any problems on <strong>Joomla 6</strong></p><h4>End of Joomla 3 support</h4><p>Removed support for <strong>Joomla 3.x.x</strong> versions.</p>"
+PLG_WTYANDEXMAP_WHATS_NEW = "<h3>v.2.0.0 What's new?</h3><h4>Joomla 5 ready</h4><p>The plugin has been rewritten for the <strong>Joomla 4</strong>, <strong>Joomla 5</strong>. This means that the extension will work without any problems on <strong>Joomla 6</strong></p><h4>End of Joomla 3 support</h4><p>Removed support for <strong>Joomla 3.x.x</strong> versions.</p><h4>Yandex API.Maps 3.0</h4><p>The Yandex API is used.Maps 3.0. To work, you must specify the API key.</p><h4>Backward compatibility</h4><p>The ability to specify an icon for a map marker has been removed. Added the ability to select a standard balloon marker or with a custom layout in the field settings. An example of the layout for the marker is in the file <code>plugins/fields/wtyandexmap/tmpl/markers/custom.php</code>. You can specify your own color for a standard balloon.</p>"
 PLG_WTYANDEXMAP_AFTER_UNINSTALL = "<h2>:(</h2>"
 PLG_WTYANDEXMAP_JOOMLARU_TELEGRAM_CHAT = "Joomla community in Telegram"
 PLG_WTYANDEXMAP_WEBTOLK_TELEGRAM_CHANNEL = "@WebTolkRu in Telegram"

diff --git a/language/ru-RU/plg_fields_wtyandexmap.ini b/language/ru-RU/plg_fields_wtyandexmap.ini
@@ -19,8 +19,10 @@ PLG_WTYANDEXMAP_PARAMS_MAP_WIDTH_LABEL="Ширина карты"
 PLG_WTYANDEXMAP_PARAMS_MAP_WIDTH_DESC="Указывать с единицами измерения, как в CSS - 500px или 95%"
 PLG_WTYANDEXMAP_PARAMS_MAP_HEIGHT_LABEL="Высота карты"
 PLG_WTYANDEXMAP_PARAMS_MAP_HEIGHT_DESC="Указывать с единицами измерения, как в CSS - 500px или 95%"
-PLG_WTYANDEXMAP_PARAMS_PLACEMARK_ICON_CODE_LABEL="Код иконки"
-PLG_WTYANDEXMAP_PARAMS_PLACEMARK_ICON_CODE_DESC="Код иконки из <a href=\"https://yandex.ru/dev/maps/jsapi/doc/2.1/ref/reference/option.presetStorage.html\" target=\"_blank\">докуменатции JS API Яндекс.карт</a>"
 PLG_WTYANDEXMAP_PARAMS_DONT_SHOW_IN_CATEGORY_LABEL="Не показывать в категориях"
 PLG_WTYANDEXMAP_PARAMS_DONT_SHOW_IN_CATEGORY_DESC="Карта не будет показываться на страницах категорий (там, где в url присутствует <code>$view=category</code>)"
-PLG_WTYANDEXMAP_ERROR_THERE_IS_NO_API_KEY = "<strong>Плагин поля WT Yandex Map:</strong> не указан API ключ Яндекс.Карт."
+PLG_WTYANDEXMAP_ERROR_THERE_IS_NO_API_KEY = "<strong>Плагин поля WT Yandex Map:</strong> не указан API ключ Яндекс.Карт."
+PLG_WTYANDEXMAP_PARAMS_MARKER_LAYOUT_LABEL = "Макет маркера"
+PLG_WTYANDEXMAP_PARAMS_MARKER_LAYOUT_DESC = "Макеты находятся в папке <code>plugins/fields/wtyandexmap/tmpl/markers</code>. Скопируйте и измените файл под свои нужды, затем укажите его в настройках поля."
+PLG_WTYANDEXMAP_PARAMS_MARKER_COLOR_LABEL = "Цвет маркера"
+PLG_WTYANDEXMAP_PARAMS_MARKER_COLOR_DESC = "RGB или словесное указание цвета: например <code>red</code> или <code>#FF0000</code>"
diff --git a/language/ru-RU/plg_fields_wtyandexmap.sys.ini b/language/ru-RU/plg_fields_wtyandexmap.sys.ini
@@ -1,16 +1,16 @@
-; @package    Fields - WT Yandex Map
-; @version    2.0.0
-; @author     Sergey Tolkachyov
-; @сopyright  Copyright (c) 2022 - 2024 Sergey Tolkachyov. All rights reserved.
+; @package    Fields - WT Yandex Map
+; @version    2.0.0
+; @author     Sergey Tolkachyov
+; @сopyright  Copyright (c) 2022 - 2024 Sergey Tolkachyov. All rights reserved.
 ; @license    GNU/GPL license: https://www.gnu.org/copyleft/gpl.html
-; @link       https://web-tolk.ru
+; @link       https://web-tolk.ru
 PLG_WTYANDEXMAP="Поля - WT Yandex Map"
 PLG_WTYANDEXMAP_DESC="Плагин для создания полей типа <strong>Яндекс Карты</strong> в расширениях, в которых реализованы настраиваемые поля. Плагин позволяет указывать и отображать метки с помощью сервиса <a href=\"https://yandex.ru/maps/\" target=\"_blank\">Яндекс.Карты</a>. Для полноценной работы с картами нужно указать в настройках плагина API ключ, который можно получить в <a href=\"https://developer.tech.yandex.ru\" target=\"=_blank\">Кабинете Разработчика Яндекса</a>"
 PLG_WTYANDEXMAP_AFTER_INSTALL = "Спасибо за установку расширения"
 PLG_WTYANDEXMAP_AFTER_DISCOVER_INSTALL = "Спасибо за установку расширения"
 PLG_WTYANDEXMAP_AFTER_UPDATE = "Спасибо за обновление расширения"
 PLG_WTYANDEXMAP_MAYBE_INTERESTING="<h4>Может быть интересно</h4><ul class=\"nav nav-tabs nav-stacked list-group\"><li class=\"list-group-item\"><a href=\"https://web-tolk.ru/dev/web-assets\" target=\"_blank\" title=\"Перейти на https://web-tolk.ru\">Joomla 4 & Joomla 5 Web Assets</a></li><li class=\"list-group-item\"><a href=\"https://web-tolk.ru/dev/joomshopping\" target=\"_blank\" title=\"Перейти на https://web-tolk.ru\">Расширения для JoomShopping</a></li><li class=\"list-group-item\"><a href=\"https://web-tolk.ru/dev/joomla-plugins\" target=\"_blank\" title=\"Перейти на https://web-tolk.ru\">Плагины Joomla</a></li><li class=\"list-group-item\"><a href=\"https://web-tolk.ru/dev/joomla-modules\" target=\"_blank\" title=\"Перейти на https://web-tolk.ru\">Модули Joomla</a></li><li class=\"list-group-item\"><a href=\"https://web-tolk.ru/dev/components\" target=\"_blank\" title=\"Перейти на https://web-tolk.ru\">Компоненты Joomla</a></li><li class=\"list-group-item\"><a href=\"https://web-tolk.ru/dev/biblioteki\" target=\"_blank\" title=\"Перейти на https://web-tolk.ru\">Библиотеки Joomla для разработчиков</a></li></ul>"
-PLG_WTYANDEXMAP_WHATS_NEW="<h3>v.2.0.0 Что нового?</h3><h4>Joomla 5 ready</h4><p>Плагин переписан под архитектуру <strong>Joomla 4</strong>, <strong>Joomla 5</strong>. Это означает, что расширение будет без проблем работать и на <strong>Joomla 6</strong>.</p><h4>Joomla 3 больше не поддерживается</h4><p>Окончательно убрана поддержка версий <strong>Joomla 3.x.x</strong>.</p>"
+PLG_WTYANDEXMAP_WHATS_NEW="<h3>v.2.0.0 Что нового?</h3><h4>Joomla 5 ready</h4><p>Плагин переписан под архитектуру <strong>Joomla 4</strong>, <strong>Joomla 5</strong>. Это означает, что расширение будет без проблем работать и на <strong>Joomla 6</strong>.</p><h4>Joomla 3 больше не поддерживается</h4><p>Окончательно убрана поддержка версий <strong>Joomla 3.x.x</strong>.</p><h4>API Яндекс.Карт 3.0</h4><p>Используется API Яндекс.Карт 3.0. Для работы необходимо указать API ключ.</p><h4>Обратная совместимость</h4><p>Убрана возможность указать иконку для маркера карты. Добавлена возможность выбора стандартного маркера балуна или с пользовательской вёрсткой в настройках поля. Пример верстки для маркера находится в файле <code>plugins/fields/wtyandexmap/tmpl/markers/custom.php</code>. Для стандартного балуна можно указать свой цвет.</p>"
 PLG_WTYANDEXMAP_AFTER_UNINSTALL="<h2>:(</h2>"
 PLG_WTYANDEXMAP_JOOMLARU_TELEGRAM_CHAT="Joomla сообщество в Телеграм"
 PLG_WTYANDEXMAP_WEBTOLK_TELEGRAM_CHANNEL = "@WebTolkRu в Telegram"

diff --git a/params/wtyandexmap.xml b/params/wtyandexmap.xml
@@ -51,13 +51,6 @@
                    name="map_height"
                    label="PLG_WTYANDEXMAP_PARAMS_MAP_HEIGHT_LABEL"
                    description="PLG_WTYANDEXMAP_PARAMS_MAP_HEIGHT_DESC"/>
-            <field type="text"
-                   name="placemark_icon_code"
-                   label="PLG_WTYANDEXMAP_PARAMS_PLACEMARK_ICON_CODE_LABEL"
-                   description="PLG_WTYANDEXMAP_PARAMS_PLACEMARK_ICON_CODE_DESC"
-                   default="islands#blueDotIcon"
-                   hint="islands#blueDotIcon"/>
-
             <field type="radio"
                    name="dont_show_in_category"
                    label="PLG_WTYANDEXMAP_PARAMS_DONT_SHOW_IN_CATEGORY_LABEL"
@@ -68,6 +61,21 @@
                 <option value="0">JSHOW</option>
                 <option value="1">JHIDE</option>
             </field>
+            <field type="filelist"
+                   name="marker_layout"
+                   label="PLG_WTYANDEXMAP_PARAMS_MARKER_LAYOUT_LABEL"
+                   description="PLG_WTYANDEXMAP_PARAMS_MARKER_LAYOUT_DESC"
+                   directory="plugins/fields/wtyandexmap/tmpl/markers"
+                   fileFilter="php"
+                   default="default"
+                   stripext="true"
+                   hide_none="true"/>
+            <field type="text"
+                   name="marker_color"
+                   label="PLG_WTYANDEXMAP_PARAMS_MARKER_COLOR_LABEL"
+                   description ="PLG_WTYANDEXMAP_PARAMS_MARKER_COLOR_DESC"
+                   default="red"
+                   showon="marker_layout:"/>
         </fieldset>
     </fields>
 </form>
diff --git a/tmpl/markers/custom.php b/tmpl/markers/custom.php
@@ -0,0 +1,38 @@
+<?php
+/**
+ * @package    Fields - WT Yandex Map
+ * @version       2.0.0
+ * @Author        Sergey Tolkachyov, https://web-tolk.ru
+ * @copyright     Copyright (C) 2024 Sergey Tolkachyov
+ * @license       GNU/GPL http://www.gnu.org/licenses/gpl-3.0.html
+ * @since         1.0.0
+ */
+
+
+defined('_JEXEC') or die;
+
+$field = $this->options->get('field');
+$fieldParams = $this->options->get('field_params');
+$id = $this->options->get('id');
+
+/**
+ * This is an example file. Fill free to copy and modify it as you want
+ *
+ *
+ * You can place any HTML code between <template> </template>
+ * Take care about id attribute. It should be like id="<?php echo $id;?>_marker"
+ */
+
+?>
+<template id="<?php echo $id;?>_marker">
+	<div class="bg-white p-2 border border-danger shadow rounded-5">
+		<svg xmlns="http://www.w3.org/2000/svg" class="plugin-info-img-svg" width="63" height="20">
+		<g>
+			<title>Go to https://web-tolk.ru</title>
+			<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="12" id="svg_3" y="10" x="4" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#0fa2e6">Web</text>
+			<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="12" id="svg_4" y="10" x="30" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#384148">Tolk</text>
+			<text font-weight="bold" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="10" id="svg_4" y="20" x="18" stroke-opacity="null" stroke-width="0" stroke="#ff0000" fill="#ff0000">demo</text>
+		</g>
+		</svg>
+	</div>
+</template>
diff --git a/tmpl/wtyandexmap.php b/tmpl/wtyandexmap.php
@@ -12,6 +12,7 @@
 use Joomla\CMS\Language\Text;
 use Joomla\CMS\WebAsset\WebAssetManager;
 use Joomla\Uri\Uri;
+use Joomla\CMS\Layout\FileLayout;
 
 defined('_JEXEC') or die;
 
@@ -32,7 +33,7 @@
  * $field->state int 1 Published or not
  * $field->access int 1  Access group id
  * $field->created_time string "2024-08-27 12:06:05"
- * $field->created_user_id in 822
+ * $field->created_user_id int 822
  * $field->ordering int 0
  * $field->language string "*" or "en_GB", "ru_RU"
  * $field->fieldparams Joomla\Registry\Registry field params for site: map_center, map_zoom, map_type, map_width, map_height
@@ -61,14 +62,14 @@
 // SEE https://yandex.ru/dev/jsapi30/doc/ru/upgrade/
 //
 //		<script>const defaultMarker = new ymaps3.YMapDefaultMarker({
-//		  title: 'Привет мир!',
-//		  subtitle: 'Добрый и светлый',
+//		  title: 'Hello world!',
+//		  subtitle: 'Kind and bright',
 //		  color: 'blue'
 //		});
 //
 //		const content = document.createElement('div');
 //		const marker = new ymaps3.YMapMarker(content);
-//		content.innerHTML = '<div>Тут может быть все что угодно</div>';
+//		content.innerHTML = '<div>There could be anything here</div>';
 //
 //		const map = new ymaps3.YMap(document.getElementById('map-root'), {
 //		  location: INITIAL_LOCATION
@@ -79,7 +80,6 @@
 //		.addChild(marker);</script>
 
 
-
 /**
  * @var string $yandex_map_api_entry_point_free Entry point for free Yandex.Map API version
  * @since 1.0.0
@@ -95,21 +95,21 @@
 $app    = Factory::getApplication();
 $option = $app->getInput()->get('option');
 
-// Если поле не заполнено
+// If the field is empty
 if (empty($field->value))
 {
 	return '';
 }
 
 $view = $app->getInput()->get('view');
 
-// Опция "не показывать в категориях"
+// Don't show in category option
 if ($view == 'category' && $fieldParams->get('dont_show_in_category', 0) == 1)
 {
 	return '';
 }
 
-// Получаем API ключ Яндекс.карт
+// Yandex.Map API key
 
 if (empty($fieldParams->get('yandex_map_api_key')))
 {
@@ -118,7 +118,7 @@
 	return '';
 }
 
-// Подключаем js Яндекс.карт
+// Connect Yandex.Map javascript
 $yandexMapHost = $fieldParams->get('yandex_api_type') === 'free' ? $yandex_map_api_entry_point_free : $yandex_map_api_entry_point_paid;
 $uri           = new Uri($yandexMapHost);
 $uri->setQuery([
@@ -143,6 +143,22 @@
 $layer = $fieldParams->get('map_type') === 'map' ? 'YMapDefaultSchemeLayer' : 'YMapDefaultSatelliteLayer';
 /** @var string $id unique map field id */
 $id = 'plg_field_wtyandexmap_' . $item->id . '_' . $field->id;
+/** @var string $id marker color verbal or RGB */
+$marker_color = $fieldParams->get('marker_color', 'red');
+
+// YMapMarker - with custom HTML in item
+// YMapDefaultMarker - standart placemark
+$marker_layout = $fieldParams->get('marker_layout', 'default');
+
+$marker_type = ($marker_layout == 'default' ? 'YMapDefaultMarker' : 'YMapMarker');
+
+// Include custom marker layout
+if ($marker_layout !== 'default')
+{
+	$layout = new FileLayout($marker_layout, JPATH_SITE . '/plugins/fields/wtyandexmap/tmpl/markers', ['id' => $id, 'field' => $field, 'field_params' => $fieldParams]);
+	echo $layout->render();
+}
+
 
 echo "
 	<div id='{$id}'>
@@ -156,6 +172,7 @@
 	        await ymaps3.ready;
 	        const {YMapZoomControl} = await ymaps3.import('@yandex/ymaps3-controls@0.0.1');
 	        const {YMapDefaultMarker} = await ymaps3.import('@yandex/ymaps3-markers@0.0.1');
+	        const {YMapMarker} = ymaps3;
 
 			const coords = '{$value}';
 			const [y,x] = coords.split(',');
@@ -175,16 +192,34 @@
 	        map.addChild(
                 new ymaps3.YMapControls({position: 'right'}).addChild(new YMapZoomControl())
 	        );
+			";
 
-	        const marker = new YMapDefaultMarker({
-	            coordinates: [x, y],
-				//title: 'Hello World!',
-				//subtitle: '{$value}',
-				//color: 'blue',
-	        });
-			
-	        map.addChild(marker);
+// We need to add a layout for marker
 
-		}
+if ($marker_type == 'YMapDefaultMarker')
+{
+	echo " const markerElement = new {$marker_type}({
+								coordinates: [x, y],
+								//title: 'Hello World!',
+								//subtitle: '{$value}',
+								color: '{$marker_color}',
+							});
+						
+			map.addChild(markerElement);
+			";
+}
+else
+{
+
+	echo "
+					const markerTemplate = document.getElementById('{$id}_marker');
+					const markerElement = document.createElement('div');
+					markerElement.append({$id}_marker.content.cloneNode(true));
+					map.addChild(new YMapMarker({coordinates: [x, y]}, markerElement));
+					";
+
+}
+echo "			
+	}
 	</script>
 	";