alhimik1986/yii2_js_view_module

The module allows you insert to your page most used javascript-codes with specified presets.

1.2 2018-08-11 20:30 UTC

Requires

• php: >=5.4.0

MIT

• Nikolay Sidorovich

• module
• yii2
• js_view

README

Вспомогательный модуль для yii2-crud-module. Позволяет подгружать javascript-плагины с заданными параметрами. По своему поведению напоминает виджеты, но отличается тем, что, в отличие от виджета, она не выводит html-код, а только подгружает javascript-файлы и javascript-вьюшку с заданными параметрами.

Рассмотрим на примере календарика datepicker (модуля jquery-ui). Подгружать его через виджеты требует больше кода, а если виджетов (например, таких же однотипных календариков или, вообще, подобных) много, то это может сказаться на производительности. Поэтому приходит мысль задать календарикам один класс (например .ui-datepicker) и проинициировать все элементы командой $('.ui-datepicker').datepicker(); Теперь в голову приходит мысль, что мы не хотим для этого использовать виджет, а хотим проделать это во вьюшке, но тут опять выползает проблема: вьюшку нужно поместить в одно общее место и вызывать ее из разных модулей фреймворка, указывая соответствующие параметры, например, селектор '.ui-datepicker' и параметры календарика { dateFormat: 'dd-mm-yy' }. Так вот, для этого и нужен yii2-js-view-module.

Пример создания собственного js_view

В файле components/JSPlugins.php находятся примеры вызова js-вьюшек, заключенные в комментарий. Большинство из них отсутствют , ибо они были использованы в моем прошлом проекте, но я оставил их, т.к. они служат отличным примером того, как должны вызываться js-вьюшки. Вот пример:

Yii::$app->view->registerJs(alhimik1986\yii2_js_view_module\components\JSPlugins::includePlugins([
	'formatter' => [
		[
			'selector' => '.date-formatter',
			'options' => [
				'pattern' => '{{D9}}.{{M9}}.{{9999}}',
			],
		],
		[
			'selector' => '.credit-card-formatter',
			'options' => [
				'pattern' => '{{9999}}-{{9999}}-{{9999}}-{{9999}}',
			],
		]
	],
	'ajaxTable' => [                                        // Подключить вспомогательные скрипты для поиска в ajax-таблице
		[
			'tbl_selector' => '#ajax-table',                             // Селектор ajax-таблицы для поиска
			'search_url' => \yii\helpers\Url::to(['search']),            // url-адрес, куда отправлять искомые данные
			'search_request_type' => 'post',                             // Тип запроса при поиске в таблице
			'search_on_change_selector' => '.search-on-change',          // Селектор элементов, при изменении или нажатии клавиш которых осуществлять поиск
			'search_on_change_dateSelector' => '.from-date, .to-date',   // Селектор элементов, при изменении которых осуществлять поиск
			'tooltip_selector' => '',                                    // Селектор для всплывающей подсказки при обновлении ajax-таблицы
			'loading_img' => '',                                         // url-адрес индикатора загрузки
			'error_selector' = '#errors',                                // Место, куда будут выводиться нестандартные ошибки валидации
			'ajaxDataCallBack' => 'js:function(data){return data;}',     // Пост-обработка данных для поиска перед отправкой ajax-запроса (например, чтобы втиснуть в поиск диапазон дат from_date и to_date)
			'afterSuccessCallBack' => 'js:function(data){}',             // Дополнительные операции при успешном запросе (в поиске)
		],
	],
]));

Здесь ключи массива: "formatter" и "ajaxTable" - названия файлов вьюшки, они хранятся в папке views/jsPlugins. Значения массива - это параметры, передаваемые в соответствующую вьюшку. Заходим в папку views/jsPlugins, в ней названия вьюшек имеют префикс "_" (нижнее подчеркивание), покаывая этим, что она является частичной. Хороший и простой пример использования виден во вьюшке _formatter.php ПАРАМЕТРЫ, ПЕРЕДАВАЕМЫЕ ВО ВЬЮШКУ ЗАКЛЮЧЕНЫ В ПЕРЕМЕННОЙ "$plugin_params".

Пока есть один недостаток: хранить кастомные вьюшки в папке "vendor" - не совсем правильно, поэтому этот модуль будет лишь вспомогательным модулем для yii2-crud-module.

УСТАНОВКА:

Скачивается с помощью composer. В папке приложения в файле composer.json дописать строчку:

    "require": {
		"alhimik1986/yii2_js_view_module": "^1.0"
    },

или в командой строке ввести:

$ composer require alhimik1986/yii2_js_view_module