├── README.md
├── example.gif
├── example_with_tabs.gif
└── js
    └── aclips
        └── ui-selector
            ├── config.php
            └── script.js


/README.md:
--------------------------------------------------------------------------------
 1 | # bitrix-ui.entity-selector-wrapper
 2 | Расширение для лёгкого использования ui.entity-selector на статичных списках
 3 | 
 4 | ## Использования
 5 | 
 6 | Размещаем расширение в папке local/ (local/js/aclips/ui-selector)
 7 | 
 8 | ```
 9 | <?php \Bitrix\Main\UI\Extension::load('aclips.ui-selector') ?>
10 | 
11 | <select id='my_select'>
12 |     <option value='1'>Option 1</option>  
13 |     <option value='2'>Option 2</option>  
14 |     <option value='3'>Option 3</option>  
15 |     <option selected value='4'>Option 4</option>  
16 |     <option value='5'>Option 5</option>  
17 | </select>
18 | 
19 | <script type="text/javascript">
20 | 
21 |     BX.ready(function () {
22 |         BX.Plugin.UiSelector.createTagSelector('my_select') // or BX.Plugin.UiSelector.createTagSelector(document.getElementById('my_select'))
23 |     })
24 | </script>
25 | ```
26 | 
27 | Результат
28 | 
29 | ![Результат](https://github.com/aclips/bitrix-ui.entity-selector-wrapper/blob/main/example.gif)
30 | 
31 | Вариант использования с табами
32 | 
33 | ```
34 | <?php \Bitrix\Main\UI\Extension::load('aclips.ui-selector') ?>
35 | 
36 | <select id='my_select'>
37 |     <option data-tab='tab_1' value='1'>Option 1</option>  
38 |     <option data-tab='tab_2' value='2'>Option 2</option>  
39 |     <option data-tab='tab_3' value='3'>Option 3</option>  
40 |     <option data-tab='tab_4' selected value='4'>Option 4</option>  
41 |     <option data-tab='tab_4' value='5'>Option 5</option>  
42 | </select>
43 | 
44 | <script type="text/javascript">
45 | 
46 |     BX.ready(function () {
47 |         BX.Plugin.UiSelector.createTagSelector('my_select', {
48 |             tabs: [
49 |                 {id: 'tab_1', title: 'Tab 1', itemOrder: {title: 'asc'}},
50 |                 {id: 'tab_2', title: 'Tab 2', itemOrder: {title: 'asc'}},
51 |                 {id: 'tab_3', title: 'Tab 3', itemOrder: {title: 'asc'}},
52 |                 {id: 'tab_4', title: 'Tab 4', itemOrder: {title: 'asc'}}
53 |             ]
54 |         })
55 |     })
56 | </script>
57 | ```
58 | 
59 | Результат с табами
60 | 
61 | ![Результат с табами](https://github.com/aclips/bitrix-ui.entity-selector-wrapper/blob/main/example_with_tabs.gif)
62 | 
63 | 


--------------------------------------------------------------------------------
/example.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aclips/bitrix-ui.entity-selector-wrapper/f9aa48175bc7ab42d59dbdf39bae9f925ef0f9c8/example.gif


--------------------------------------------------------------------------------
/example_with_tabs.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aclips/bitrix-ui.entity-selector-wrapper/f9aa48175bc7ab42d59dbdf39bae9f925ef0f9c8/example_with_tabs.gif


--------------------------------------------------------------------------------
/js/aclips/ui-selector/config.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) {
 4 |     die();
 5 | }
 6 | 
 7 | return [
 8 |     "js" => [
 9 |         "./script.js",
10 |     ],
11 |     "rel" => [
12 |         "ui.entity-selector"
13 |     ]
14 | ];
15 | 


--------------------------------------------------------------------------------
/js/aclips/ui-selector/script.js:
--------------------------------------------------------------------------------
  1 | BX.namespace('Plugin.UiSelector')
  2 | 
  3 | /**
  4 |  * Плагин для создания объекта TagSelector на базе статического списка
  5 |  * @type {{createTagSelector: BX.Plugin.UiSelector.createTagSelector, renderTagSelector: BX.Plugin.UiSelector.renderTagSelector}}
  6 |  */
  7 | BX.Plugin.UiSelector = {
  8 |     /**
  9 |      * {HTMLElement|String} container HTML element or its ID ("select" tag only) select
 10 |      * {{}} params
 11 |      */
 12 |     createTagSelector: function (select, params) {
 13 |         let target
 14 |         let tabs = [{id: 'base', title: 'Элементы', itemOrder: {title: 'asc'}}]
 15 | 
 16 |         if (typeof params == 'object') {
 17 |             if (params.tabs) {
 18 |                 tabs = params.tabs
 19 |             }
 20 |         }
 21 | 
 22 |         if (typeof select === 'string') {
 23 |             target = document.getElementById(select)
 24 |             if (!target) {
 25 |                 throw new Error('Container parameter is not valid ID.')
 26 |             }
 27 |         } else {
 28 |             target = select;
 29 |         }
 30 | 
 31 |         if (target.type != 'select-one' && target.type != 'select-multiple') {
 32 |             throw new Error('Container must be Select')
 33 |         }
 34 | 
 35 |         let options = target.options
 36 |         let items = []
 37 | 
 38 |         for (let option of options) {
 39 |             if (!option.value) {
 40 |                 continue
 41 |             }
 42 | 
 43 |             let tab = 'base'
 44 | 
 45 |             let datatTab = option.getAttribute('data-tab')
 46 | 
 47 |             if (datatTab) {
 48 |                 tab = datatTab
 49 |             }
 50 | 
 51 |             let label = option.text
 52 | 
 53 |             if (tabs.length > 1) {
 54 |                 let optionTab = tabs.find(e => e.id == tab)
 55 | 
 56 |                 if (optionTab) {
 57 |                     label = optionTab.title + ': ' + label
 58 |                 }
 59 |             }
 60 | 
 61 |             items.push({
 62 |                 id: option.value,
 63 |                 title: label,
 64 |                 entityId: 'main',
 65 |                 tabs: tab,
 66 |                 selected: option.selected
 67 |             })
 68 |         }
 69 | 
 70 |         let config = {
 71 |             node: target,
 72 |             multiple: target.type == 'select-multiple',
 73 |             items: items,
 74 |             tabs: tabs,
 75 |         }
 76 | 
 77 | 
 78 |         this.renderTagSelector(config)
 79 |     },
 80 |     /**
 81 |      * @param {HTMLElement} config.node
 82 |      * @param {boolean} config.multiple
 83 |      * @param {[]} config.items
 84 |      */
 85 |     renderTagSelector: function (config) {
 86 | 
 87 |         config.node.style.display = 'none'
 88 | 
 89 |         const tagSelector = new BX.UI.EntitySelector.TagSelector({
 90 |             multiple: config.multiple,
 91 |             dialogOptions: {
 92 |                 multiple: config.multiple,
 93 |                 items: config.items,
 94 |                 selectedItems: config.items.filter(e => e.selected),
 95 |                 dropdownMode: true,
 96 |                 enableSearch: false,
 97 |                 compactView: false,
 98 |                 tabs: config.tabs,
 99 |             },
100 |             events: {
101 |                 onBeforeTagAdd: function (event) {
102 |                     const {tag} = event.getData();
103 | 
104 |                     if(config.multiple){
105 |                         let options = config.node.querySelectorAll('option[value="'+tag.getId()+'"]')
106 | 
107 |                         if(options.length > 0) {
108 |                             options[0].selected = true
109 |                         }
110 |                     } else {
111 |                         config.node.value = tag.getId()
112 |                     }
113 | 
114 |                     config.node.dispatchEvent(new Event('change'))
115 |                 },
116 |                 onBeforeTagRemove: function (event) {
117 |                     if(config.multiple){
118 | 
119 |                         const {tag} = event.getData();
120 | 
121 |                         let options = config.node.querySelectorAll('option[value="'+tag.getId()+'"]')
122 | 
123 |                         if(options.length > 0) {
124 |                             options[0].selected = false
125 |                         }
126 |                     } else {
127 |                         config.node.value = null
128 |                     }
129 | 
130 |                     config.node.dispatchEvent(new Event('change'))
131 |                 },
132 |             }
133 |         });
134 | 
135 |         tagSelector.renderTo(config.node.parentNode);
136 |     }
137 | }
138 | 


--------------------------------------------------------------------------------