├── LICENSE.txt
├── README.md
├── css
    └── style.css
├── docs
    ├── CHANGELOG.md
    └── CONTRIBUTING.md
├── favicon.ico
├── img
    ├── gif
    │   └── searching.gif
    ├── logo_70.png
    └── logo_sm.png
├── index.html
├── js
    └── main.js
├── lib
    └── index.d.ts
├── package.json
├── searchAreaControl
    ├── css
    │   └── sac-style.css
    └── searchAreaControl.js
└── test.html


/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2017, Ioannis Kapantzakis
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in
11 | all copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 | THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | [![npm version](https://badge.fury.io/js/searchareacontrol.svg)](https://badge.fury.io/js/searchareacontrol)
  2 | 
  3 | # SearchAreaControl
  4 | 
  5 | SearchAreaControl is a complete jQuery plugin that let's you **display**, **search** and **select** multiple items of a tree data structure.
  6 | 
  7 | Github **<a href="https://github.com/kapantzak/SearchAreaControl">repo</a>**
  8 | 
  9 | Visit the demo page **<a href="https://kapantzak.github.io/SearchAreaControl/">here</a>**
 10 | 
 11 | #### Table Of Contents
 12 | 
 13 | 
 14 | - [Dependencies](#dependencies)
 15 | - [Installation](#installation)
 16 | - [Initialization](#initialization)
 17 | - [Options](#options)
 18 | - [Methods](#methods)
 19 | - [Events](#events)
 20 | - [Contributing](#contributing)
 21 | - [Changelog](#changelog)
 22 | 
 23 | 
 24 | ## Dependencies
 25 | 
 26 | In order to start using SearchAreaControl you have to include **jQuery** first.
 27 | 
 28 | ## Installation
 29 | 
 30 | Include the `.css` and `.js` file and you're ready to use it!
 31 | 
 32 | **CSS**
 33 | 
 34 |     <link rel="stylesheet" href="path-to-plugin-folder/css/sac-style.css" />
 35 |     
 36 | **jQuery**
 37 | 
 38 |     <script src="path-to-plugin-folder/searchAreaControl.js"></script>
 39 | 
 40 | ### NPM
 41 | You can install SearchAreaControl via npm like this:
 42 | 
 43 |     npm install searchareacontrol
 44 | 
 45 | ### Typescript
 46 | Typescript declaration file is included in the package and it will be automatically available after `npm install`.
 47 | 
 48 | 
 49 | ## Initialization
 50 | 
 51 | All you need to do in order to initialize the SearchAreaControl plugin is a simple HTML element (button, span, div or anything):
 52 | 
 53 | **HTML**
 54 | 
 55 |     <button id="myButton" type="button" />
 56 | 
 57 | **jQuery**
 58 | 
 59 |     $('#myButton').searchAreaControl();
 60 | 
 61 | ## Options
 62 | 
 63 | You can pass a variety of options in order to customize the behaviour and appearance of the control like this:
 64 | 
 65 |     $('#myButton').searchAreaControl({
 66 | 		multiSelect: false
 67 |     });
 68 | 
 69 | #### The available options are listed bellow
 70 | 
 71 | ### data
 72 | Provides the data that are going to be displayed.
 73 | > - Type: `array`
 74 | > - Deafult: An empty array
 75 | 
 76 | You have to pass an array of objects of type `IData`:
 77 | 
 78 |     interface IData {
 79 | 	    code?: string,
 80 | 	    name: string,
 81 | 	    attributes?: IDataAttributes,
 82 | 	    nodeExpanded?: boolean,
 83 | 		nodeSelected?: boolean,
 84 | 	    children?: IData[]
 85 |     }
 86 | 
 87 | - `code`: If provided, it will be appended before the node's name followed by a dot (code.name)
 88 | - `name`: The node's name
 89 | - `attributes`: An object of type `IDataAttributes` (`{ [key: string]: any }`)
 90 | - `nodeExpanded`: Set it to `false` if you want the specific node to be collapsed (hidden children)
 91 | - `nodeSelected`: Set it to `true` if you want to set this node as `selected` on load
 92 | - `children`: An array of objects of type `IData`
 93 | 
 94 | 
 95 | ### multiSelect
 96 | Set to `false` if you want to be able to select only one item at time
 97 | > - Type: `boolean`
 98 | > - Default: `true`
 99 | 
100 | ### collapseNodes
101 | Set to `true` if you want the user to be able to expand or collapse every node that has one or more children nodes
102 | > - Type: `boolean`
103 | > - Default: `false`
104 | 
105 | ### allNodesExpanded
106 | Set to `false` if you want the nodes to be collapsed on load (You have to set `collapseNodes: true` in order for this option to take effect)
107 | > - Type: `boolean`
108 | > - Default: `true`
109 | 
110 | ### columns
111 | Set the number of columns that the data will be rendered.
112 | > - Type: `number`
113 | > - Default: `2`
114 | 
115 | ### selectionByAttribute
116 | Set the attribute that you want to select upon. The plugin will search for this attribute to match with the provided search string to filter all the items of the `data` array.
117 | > - Type: `string`
118 | > - Deafult: `'data-id'`
119 | 
120 | ### allNodesSelected
121 | Set all nodes to be selected on load. Nodes are not selected by default.
122 | > - Type: `boolean`
123 | > - Default: `false`
124 | 
125 | ### selectedNodes
126 | Set pre-selected nodes providing array of attributes values. The plugin will try to select nodes found by attribute provided by `selectionByAttribute` option. So, if no `selectionByAttribute` option is provided, and the developer sets `selectedNodes: ['10']`, the plugin will try to find the node that has the default attribute `data-id` equal to `'10'` and select it.
127 | > - Type: `array`
128 | > - Default: An empty array
129 | 
130 | ### locales
131 | Set the localization key to use in order to display localized text
132 | > - Type: `string`
133 | > - Default: `'en'`
134 | 
135 | ### localeData
136 | Provide additional localization keys to support other languages or to customize an existing one
137 | > - Type: `object` | `array`
138 | > - Default: `null`
139 | 
140 | In order to customize the `'Search'` key for the English translation:
141 | 
142 |     $('#myButton').searchAreaControl({
143 | 		localeData: {
144 |            'el': {
145 |               'Search': 'Custom search text'
146 |            }
147 |         }
148 |     });
149 | 
150 | Currently, the plugin supports the following languages **by default**:
151 | 
152 | -  English (`en`)
153 | -  Greek (`el`)
154 | -  Portuguese-Brazillian (`ptbr`)
155 | 
156 | 
157 | ### modallHeader.text
158 | The text that is going to be displayed in the modal header.
159 | > - Type: `string`
160 | > - Deafult: `'Search'`
161 | 
162 | ### modallHeader.className
163 | An optional custom class name for the modal header element.
164 | > - Type: `string`
165 | > - Deafult: `empty string`
166 | 
167 | ### modallHeader.visible
168 | Show or hide the modal header element.
169 | > - Type: `boolean`
170 | > - Deafult: `true`
171 | 
172 | ### searchBox.enabled
173 | Enable or disable the seacrbox functionality.
174 | > - Type: `boolean`
175 | > - Deafult: `true`
176 | 
177 | ### searchBox.minCharactersSearch
178 | Set the minimum characters typed in the searchbox without start searching for matches.
179 | > - Type: `number`
180 | > - Deafult: `2`
181 | 
182 | ### searchBox.searchBoxClass
183 | An optional custom class name for the searchbox element.
184 | > - Type: `string`
185 | > - Deafult: `empty string`
186 | 
187 | ### searchBox.searchBoxPlaceholder
188 | The placeholder to be displayed in the searchbox.
189 | > - Type: `string`
190 | > - Deafult: `empty string`
191 | 
192 | ### searchBox.showSelectedItemsBox
193 | Show the number of selected items. 
194 | > - Type: `boolean`
195 | > - Deafult: `true`
196 | 
197 | ### searchBox.selectedItemsLabelVisible
198 | Show or hide the selected items number element.  
199 | > - Type: `boolean`
200 | > - Deafult: `true`
201 | 
202 | ### searchBox.selectedItemsLabelText
203 | Set the label text to be displayed before the selected items number. (You have to set `searchBox.selectedItemsLabelVisible` to `true`)
204 | > - Type: `string`
205 | > - Deafult: `'Selected items'`
206 | 
207 | ### searchBox.hideNotFound
208 | If `true`, the items that do not match the searching criteria are going to be hidden.  
209 | > - Type: `boolean`
210 | > - Deafult: `true`
211 | 
212 | ### searchBox.searchType
213 | This option receives an object with 3 properties, `startsWith`, `existsIn` and `regExp`. These are the 3 different options that the user can select to perform the search functionality.
214 | 
215 | If `startsWith` is selected, the plugin will try to find only those items that their description **starts with** the search term.
216 | 
217 | If `existsIn` is selected, the plugin will try to find any item that it's description **contains** the search term.
218 | 
219 | If `regExp` is selected, the plugin will try to match all the nodes with the provided **regular expression**.
220 | 
221 | All these options accept an object with two properties, `text` and `selected`.
222 | 
223 | This is the **default object** (`existsIn` is the default selected option) the plugin will use unless user provides anything different.
224 | 
225 |     searchType: {
226 | 	    startsWith: {
227 |             text: 'Starts with',
228 |             selected: false
229 |         },
230 |         existsIn: {
231 |             text: 'Exists in',
232 |             selected: true
233 |         },
234 | 		regExp: {
235 |             text: 'Regular expression',
236 |             selected: false
237 |         }
238 |     }
239 | 
240 | 
241 | #### searchBox.searchType.startsWith
242 | This property sets the text and selected state of the `starts with` filter option
243 | 
244 | ##### searchBox.searchType.startsWith.text
245 | Set the text of the `startsWith` option.
246 | > - Type: `string`,
247 | > - Default: `'Starts with'`
248 | 
249 | ##### searchBox.searchType.startsWith.selected
250 | If `true`, this option is loaded as the selected option.
251 | > - Type: `boolean`,
252 | > - Default: `false`
253 | 
254 | #### searchBox.searchType.existsIn
255 | This property sets the text and selected state of the `exists in` filter option
256 | 
257 | ##### searchBox.searchType.existsIn.text
258 | Set the text of the `existsIn` option.
259 | > - Type: `string`,
260 | > - Default: `'Exists in'`
261 | 
262 | ##### searchBox.searchType.existsIn.selected
263 | If `true`, this option is loaded as the selected option.
264 | > - Type: `boolean`,
265 | > - Default: `true`
266 | 
267 | #### searchBox.searchType.regExp
268 | This property sets the text and selected state of the `regExp` filter option
269 | 
270 | ##### searchBox.searchType.regExp.text
271 | Set the text of the `regExp` option.
272 | > - Type: `string`,
273 | > - Default: `'Regular expression'`
274 | 
275 | ##### searchBox.searchType.regExp.selected
276 | If `true`, this option is loaded as the selected option.
277 | > - Type: `boolean`,
278 | > - Default: `false`
279 | 
280 | ### popupDimensions
281 | This option sets the modal element dimensions and accepts an array of objects with the following properties:
282 | 
283 | #### width
284 | Set the modal width. Provide a valid css value.
285 | > - Type: `string`
286 | > - Default: `700px`
287 | 
288 | #### left
289 | Set the modal `left` css rule. Provide a valid css value.
290 | > - Type: `string`
291 | > - Default: `50%`
292 | 
293 | #### marginLeft
294 | Set the modal `margin-left` css rule. Provide a valid css value.
295 | > - Type: `string`
296 | > - Default: `-350px`
297 | 
298 | The default dimensions object provides one window width **breakpoint**. This means that, up to `768px`, the popup width will be `95%` of the window width. For window width, greater than 768px, the popup width becomes `700px`.
299 | 
300 | Feel free to provide your own breakpoints. Just **remember** to provide an object for `max` key.
301 | 
302 | 	popupDimensions: {
303 |         768: {
304 |             width: '95%',
305 |             left: '2.5%',
306 |             marginLeft: '0'
307 |         },
308 |         'max': {
309 |             width: '700px',
310 |             left: '50%',
311 |             marginLeft: '-350px'
312 |         }            
313 |     }
314 | 
315 | ### mainButton
316 | Control the main button behaviour by providing an object with the following properties:
317 | 
318 | #### mainButton.defaultText
319 | Set the default button text.
320 | > - Type: `string`
321 | > - Default: `'Items'`
322 | 
323 | #### mainButton.className
324 | Set custom class name to main button
325 | > - Type: `string`
326 | > - Default: `empty string`
327 | 
328 | #### mainButton.defaultNoneText
329 | Set the default button text to be displayed when no item is selected.
330 | > - Type: `string`
331 | > - Default: `'None'`
332 | 
333 | #### mainButton.defaultAllText
334 | Set the default button text to be displayed when all items are selected.
335 | > - Type: `string`
336 | > - Default: `'All'`
337 | 
338 | #### mainButton.showAllText
339 | If `true`, show the `defaultAllText` if all items are selected.
340 | > - Type: `boolean`
341 | > - Default: `true`
342 | 
343 | #### mainButton.maxSelectedViewText
344 | Each time the user selects an item, the plugin updates main button's text with the selected items descriptions. Set the maximum number of selected items you want to display as text.
345 | > - Type: `number`
346 | > - Default: `1`
347 | 
348 | ### popupButtons
349 | This option controls the modal buttons appearance and behaviour. It accepts an object of type `IPopupButtonsCollection` representing the popup buttons:
350 | 
351 |     interface IPopupButtonsCollection {
352 |         selectAll?: IPopupButton,
353 |         diselectAll?: IPopupButton,
354 |         invertSelection?: IPopupButton,
355 |         close?: IPopupButton,
356 |         cancel?: IPopupButton
357 |     }
358 | 
359 | #### SelectAll button
360 | Selects all available nodes in the popup.
361 | > - Default text: `'Select all'`
362 | > - Default class: `'btn btn-success'`
363 | > - Visible by default: `true`
364 | > - Default callback: `null`,
365 | > - Default index: `0` 
366 | 
367 | #### DiselectAll button
368 | Diselects all available nodes in the popup.
369 | > - Default text: `'Diselect all'`
370 | > - Default class: `'btn btn-default'`
371 | > - Visible by default: `true`
372 | > - Default callback: `null`,
373 | > - Default index: `1`
374 | 
375 | #### InvertSelection button
376 | Inverts the current selection for each node in the popup.
377 | > - Default text: `'Invert selection'`
378 | > - Default class: `'btn btn-default'`
379 | > - Visible by default: `true`
380 | > - Default callback: `null`,
381 | > - Default index: `2`
382 | 
383 | #### Close button
384 | Closes the popup applying the new selection.
385 | > - Default text: `'Close'`
386 | > - Default class: `'btn btn-default'`
387 | > - Visible by default: `true`
388 | > - Default callback: `null`,
389 | > - Default index: `3`
390 | 
391 | #### Cancel button
392 | Closes the popup **without** applying the new selection.
393 | > - Default text: `'Cancel'`
394 | > - Default class: `'btn btn-default'`
395 | > - Visible by default: `false`
396 | > - Default callback: `null`,
397 | > - Default index: `4`
398 | 
399 | #### Select highlighted button
400 | Selects all elements found after a search. If no element is found (highlighted), the button is not visible.
401 | > - Default text: `'Select highlighted'`
402 | > - Default class: `'btn btn-default'`
403 | > - Visible by default: `false`
404 | > - Default callback: `null`,
405 | > - Default index: `5`
406 | 
407 | Each button is an object of type `IPopupButton`
408 | 
409 | 	interface IPopupButton {
410 | 	    text?: string,
411 | 	    className?: string,
412 | 	    visible?: boolean,
413 | 	    callback?: any,
414 | 	    index?: number
415 | 	}
416 | 
417 | #### IPopupButton.text
418 | Set the button text
419 | > - Type:`string`
420 | 
421 | #### IPopupButton.className
422 | Set the button class name (Bootstrap classes by default)
423 | 
424 | #### IPopupButton.visible
425 | Set the visibility of the button
426 | > - Type:`boolean`
427 | 
428 | #### IPopupButton.callback
429 | Provide an optional function name to call on button `click`
430 | > - Type:`function'
431 | 
432 | #### IPopupButton.index
433 | Provide an optional function name to call on button `click`
434 | 
435 | ***Note that, if you decide to change a button's index, you have to change other buttons' indexes too, in order not to end up with multiple buttons with the same index.***
436 | 
437 | 
438 | ## Methods
439 | 
440 | **SearchAreaControl** provides a set of usefull methods to call. 
441 | 
442 | You can call a method like this:
443 | 
444 |     elem.searchAreaControl('methodName'[,parameters])
445 | 
446 | ### getData()
447 | Get the control's datasource object (array).
448 | > - Parameters: `none`
449 | > - Returns: `array`
450 | 
451 | ### setSelectedNodes(allSelected,collection,byAttribute)
452 | Provide a collection of attributes (`selectionByAttribute`) to be selected, or set `allSelected` to `true` to select all available items.
453 | Provide an optional `byAttribute` parameter to indicate the attribute to select. If not provided, the plugin will try to search `selectionByAttribute` option value.
454 | > - Parameters: `allSelected [boolean]`, `collection [array]`, `byAttribute [string] Optional`
455 | > - Returns: `void`
456 | 
457 | ### clearSelection()
458 | Clear selected items.
459 | > - Parameters: `none`
460 | > - Returns: `void`
461 | 
462 | ### getSelectedNodes()
463 | Get an object with two properties, `selectedAll` (`boolean`: All items are selected) and `selectedNodes` (`array`: Array of selected objects)
464 | > - Parameters: `none`
465 | > - Returns: `object`
466 | 
467 | ### getSelectedByAttribute("attributeName")
468 | Get an array of specific attribute values of the selected items. If `attributeName` is not provided, the plugin will try to search selected node by `selectionByAttribute` option.
469 | > - Parameters: `attributeName [string]` Optional
470 | > - Returns: `array`
471 | 
472 | ### setDisabledNodes(collection,diselectDisabled,byAttribute)
473 | Set disabled nodes specifying a collection of node attribute values (by default `selectionByAttribute` attribute).
474 | Set `diselectDisabled` to true if you want to diselect the nodes to be disabled.
475 | Provide an optional `byAttribute` parameter to indicate the attribute to select. If not provided, the plugin will try to search `selectionByAttribute` option value.
476 | > - Parameters: `collection [array]`, `diselectDisabled [boolean]` `byAttribute [string] Optional`
477 | > - Returns: `void`
478 | 
479 | ### enableAllNodes()
480 | Enable all nodes
481 | > - Parameters: `none`
482 | > - Returns: `void`
483 | 
484 | ### disableAllNodes()
485 | Disable all nodes
486 | > - Parameters: `none`
487 | > - Returns: `void`
488 | 
489 | ### getDisabled()
490 | Get disabled state of main button
491 | > - Parameters: `none`
492 | > - Returns: `boolean`
493 | 
494 | ### setDisabled(disable)
495 | Toggle main button disabled state
496 | > - Parameters: `disable [boolean]`
497 | > - Returns: `void`
498 | 
499 | ### getPopup()
500 | Get the popup jQuery object
501 | > - Parameters: `none`
502 | > - Returns: `jQuery object`
503 | 
504 | ### updateDatasource(data)
505 | Update the datasource
506 | > - Parameters: `data [object]`
507 | > - Returns: `void`
508 | 
509 | ### setLocale(locale)
510 | Update the selected localization key and re-initialize the plugin
511 | > - Parameters: `locale [string]`
512 | > - Returns: `void`
513 | 
514 | ### destroy()
515 | Destroy the plugin instance
516 | > - Parameters: `none`
517 | > - Returns: `void`
518 | 
519 | ## Examples
520 | 
521 | ### Call setSelectedNodes() method
522 | 
523 | Let's say you want to select the items (nodes) that have the `selectionByAttribute` attribute equal to `1` or `2`:
524 | 
525 |     elem.searchAreaControl('setSelectedNodes', false, [1,2]);
526 | 
527 | If you wanted to select all items:
528 | 
529 |     elem.searchAreaControl('setSelectedNodes', true, null);
530 | 
531 | ## Events
532 | 
533 | There is a list of useful custom events that get triggered during the plugin lifecycle. Every custom event has the prefix `searchareacontrol` on its name.
534 | 
535 | You can listen to any of these custom events like this:
536 | 
537 |     $(document).on('<event_name>', function(event, data) {
538 |        console.log(data);
539 |     });
540 | 
541 | ### searchareacontrol.beforeinit
542 | 
543 | Gets raised before initialization process starts. Returns the target element as parameter.
544 | 
545 | ### searchareacontrol.afterinit
546 | 
547 | Gets raised as soon as the initialization process gets finished. Returns the target element as parameter.
548 | 
549 | ### searchareacontrol.beforebuildpopup
550 | 
551 | Gets raised before the popup window starts get built. Returns the target element as parameter.
552 | 
553 | ### searchareacontrol.beforeinitsearcharea
554 | 
555 | Gets raised before the search area starts get built. Returns the target element as parameter.
556 | 
557 | ### searchareacontrol.popup.beforeshow
558 | 
559 | Gets raised before the popup window strats to open. Returns an object with two properties:
560 | 
561 |     {
562 |        element: <the target element>,
563 |        popup: <the popup window>
564 |     }
565 | 
566 | ### searchareacontrol.popup.beforehide
567 | 
568 | Gets raised before the popup window strats to hide. Returns an object with two properties:
569 | 
570 |     {
571 |        element: <the target element>,
572 |        popup: <the popup window>
573 |     }
574 | 
575 | ### searchareacontrol.popup.shown
576 | 
577 | Gets raised after the popup window is shown. Returns an object with two properties:
578 | 
579 |     {
580 |        element: <the target element>,
581 |        popup: <the popup window>
582 |     }
583 | 
584 | ### searchareacontrol.popup.hidden
585 | 
586 | Gets raised when the popup window gets hidden. Returns the same object as `searchareacontrol.popup.shown` does.
587 | 
588 | ### searchareacontrol.button.click
589 | 
590 | Gets raised on any popup button click. Returns an object with two properties:
591 | 
592 |     {
593 |        element: <the target element>,
594 |        buttonKey: <the button name>
595 |     }
596 | 
597 | ### searchareacontrol.selectedNodesChanged
598 | 
599 | Gets raised every time the selection gets changed. Returns an object with 3 properties:
600 | 
601 |     {
602 |        element: <the target element>,
603 |        selectedAll: <boolean>,
604 | 	   selectedNodes: <Array of nodes> 
605 |     }
606 | 
607 | ## Contributing
608 | 
609 | If you would like to contribute, please check the **[CONTRIBUTING](https://github.com/kapantzak/SearchAreaControl/blob/master/docs/CONTRIBUTING.md "CONTRIBUTING")** file
610 | 
611 | ## Changelog
612 | Checkout the **[CHANGELOG](https://github.com/kapantzak/SearchAreaControl/blob/master/docs/CHANGELOG.md "CHANGELOG")** file


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: 'Montserrat', sans-serif;
 3 | }
 4 | 
 5 | p {
 6 |     font-size: 16px;
 7 |     line-height: 1.65;
 8 | }
 9 | 
10 | .nowrap {
11 |     white-space: nowrap;
12 | }
13 | 
14 | .custom-text-info {
15 |     font-size: 0.9em;
16 | }
17 | 
18 | .marginLeft-sm { margin-left:5px }
19 | .marginLeft-md { margin-left:15px }
20 | 
21 | #mainLogo {
22 |     height:45px;
23 | }
24 | 
25 | #gitHub {
26 |     position: relative;
27 |     top:5px;    
28 | }
29 | 
30 | .gif-holder {
31 |     margin-bottom: 30px;
32 |     text-align: center; 
33 | }
34 | 
35 | .gif-holder img {
36 |     width:100%;  
37 |     max-width: 771px;  
38 | }
39 | 
40 | .demo-panel,
41 | .table-panel {
42 |     margin: 30px 0;
43 | }
44 | 
45 | .demo-panel-title {
46 |     color:#777;
47 | }
48 | 
49 | #footer {
50 |     position: relative;
51 |     background-color: #333;
52 |     color:#fafafa;
53 |     margin-top: 40px;
54 |     padding: 40px 0;
55 |     text-align: center;
56 | }
57 | 
58 | #kapa_logo {
59 |     position: absolute;
60 |     height: 36px;
61 |     right: 10px;
62 |     top: 50%;
63 |     margin-top: -18px;
64 | }
65 | 
66 | @media (max-width: 768px) {
67 |     #mainLogo {
68 |         height: 5vw;
69 |     }
70 |     #mainTitleText {
71 |         font-size: 16px;
72 |         font-size: 4vw;
73 |     }    
74 | }
75 | 
76 | @media (max-width: 1400px) {    
77 |     #mainTitleSecondaryText {
78 |         display: none;
79 |     }
80 | }


--------------------------------------------------------------------------------
/docs/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # Change Log
  2 | 
  3 | ## [Unreleased]
  4 | 
  5 | ## [v2.8.6] - 2020-05-05
  6 | ### Fixed
  7 | - Changes `_getListItem()` check for `selectedItems`
  8 | 
  9 | ## [v2.8.5] - 2020-03-26
 10 | ### Fixed
 11 | - Changes `_getListItem()` check for `selectedItems`
 12 | 
 13 | ## [v2.8.4] - 2020-03-09
 14 | ### Fixed
 15 | - Prevent diselecting selected item after closing popup (when `multiSelect === false`)
 16 | 
 17 | ## [v2.8.3] - 2019-05-31
 18 | ### Changed
 19 | - Get popup id from new uuid
 20 | 
 21 | ## [v2.8.2] - 2019-04-25
 22 | ### Fixed
 23 | - Disable body scrolling when popup is visible (Fix)
 24 | 
 25 | ## [v2.8.1] - 2019-04-24
 26 | ### Fixed
 27 | - Fixed version number in `package.json`
 28 | 
 29 | ## [v2.8.0] - 2019-04-24
 30 | ### Added
 31 | - Added popup id to button (data-popupid)
 32 | 
 33 | ### Fixed
 34 | - Disable body scrolling when popup is visible
 35 | 
 36 | ## [v2.7.0] - 2019-03-12
 37 | ### Added
 38 | - Russian language
 39 | 
 40 | ## [v2.6.0] - 2019-01-03
 41 | ### Added
 42 | - New option (`IOptions`) property `allNodesSelected`
 43 | 
 44 | ## [v2.5.3] - 2018-11-16
 45 | ### Changed
 46 | - Search method: **Ignore accents** on search
 47 | 
 48 | ## [v2.5.2] - 2018-11-16
 49 | ### Changed
 50 | - Search method: [Starts with] and [Exists in] are **case insensitive**
 51 | 
 52 | ## [v2.5.1] - 2018-03-22
 53 | ### Fixed
 54 | - Issue 68: Bootstrap modal ([https://github.com/kapantzak/SearchAreaControl/issues/68](https://github.com/kapantzak/SearchAreaControl/issues/68))
 55 | - Typescript declaration file `IData.nodeExpanded`
 56 | 
 57 | ### Added
 58 | - New `IData` property `nodeSelected`
 59 | 
 60 | ### Changed
 61 | - README (`IData` documentation)
 62 | 
 63 | ## [v2.5.0] - 2018-03-20
 64 | ### Added
 65 | - New popup button `Select highlighted`
 66 | 
 67 | ### Changed
 68 | - (Typescript declaration file) Added new `selectHighlighted` property to the `IPopupButtonsCollection` interface
 69 | - README (`IPopupButton` documentation)
 70 | 
 71 | ## [v2.4.1] - 2018-03-12
 72 | ### Fixed
 73 | - Small viewport css
 74 | 
 75 | ## [v2.4.0] - 2018-03-02
 76 | ### Added
 77 | - Property `index` in `IPopupButton`
 78 | 
 79 | ### Changed
 80 | - README (`IPopupButton` documentation)
 81 | 
 82 | ## [v2.3.2] - 2018-02-08
 83 | ### Changed
 84 | - css style (collapse / expand arrows)
 85 | 
 86 | ## [v2.3.1] - 2018-02-08
 87 | ### Fixed
 88 | - When `collapseNodes: true`, nodes with empty array still got an expand/collapse arrow
 89 | 
 90 | ### Changed
 91 | - README: Changed `data` option markup
 92 | 
 93 | ## [v2.3.0] - 2018-02-08
 94 | ### Added
 95 | - New option `collapseNodes`
 96 | - New option `allNodesExpanded`
 97 | 
 98 | ### Changed
 99 | - Added new property `nodeExpanded` to `IData` interface
100 | - README: Added new options documentation and changed `data` option
101 | 
102 | ## [v2.2.0] - 2018-02-01
103 | ### Added
104 | - New option `mainButton.className` to provide custom class to main button
105 | - New popup button `cancel` (Closes the popup without applying selection)
106 | 
107 | ## [v2.1.3] - 2017-11-20
108 | ### Changed
109 | - README (Contributing)
110 | 
111 | ## [v2.1.2] - 2017-11-20
112 | ### Added
113 | - CONTRIBUTING.md
114 | 
115 | ### Changed
116 | - README (table of contents / npm package version / languages supported by default)
117 | - Moved CHANGELOG.md to `docs` folder
118 | 
119 | ## [v2.1.1] - 2017-11-17
120 | 
121 | ### Fixed
122 | - Fixed Typescript declaration file: set `selectedNodes: string[],` option as optional `selectedNodes?: string[],` 
123 | 
124 | ## [v2.1.0] - 2017-11-17
125 | 
126 | ### Added
127 | - Localization for portuguese-brazilian (`ptbr`)
128 | - New option `selectedNodes` to pre-select one or more nodes
129 | 
130 | ### Changed
131 | - Event `searchareacontrol.afterinit` fires 10ms later
132 | 
133 | ## [v2.0.0] - 2017-11-14
134 | 
135 | ### Added
136 | - Localization functionality (English (`en`) and Greek (`el`))
137 | 
138 | ### BREAKING CHANGE
139 | - Name of option `modallHeader` has changed to `modalHeader`
140 | 
141 | ## [v1.6.0] - 2017-11-09
142 | 
143 | ### Added
144 | 
145 | - Event `searchareacontrol.popup.beforeshow`
146 | - Event `searchareacontrol.popup.beforehide`
147 | 
148 | ## [v1.5.1] - 2017-11-04
149 | 
150 | ### Changed
151 | - README (Added documentation)
152 | 
153 | ## [v1.5.0] - 2017-11-04
154 | 
155 | ### Added
156 | - Regular expression search
157 | 
158 | ### Changed
159 | - `searchareacontrol.selectedNodesChanged` event returns object with 3 properties (`element`, `selectedAll`, `selectedNodes`)
160 | 
161 | ## [v1.4.2] - 2017-10-23
162 | 
163 | ### Fixed
164 | - Typescript declaration file
165 | - Search box selected nodes span
166 | 
167 | ## [v1.4.1] - 2017-10-23
168 | 
169 | ### Fixed
170 | - Typescript declaration file
171 | 
172 | ## [v1.4.0] - 2017-10-22
173 | 
174 | ### Added
175 | - Typescript declaration file
176 | - `searchareacontrol.selectedNodesChanged` event
177 | 
178 | ### Changed
179 | - `getSelectedByAttribute` method's parameter gets **optional**
180 | - README (Added NPM section and new event)
181 | 
182 | ## [v1.3.6] - 2017-10-09
183 | 
184 | ### Fixed
185 | - Corrected type error
186 |  
187 | ## [v1.3.5] - 2017-10-09
188 | 
189 | ### Fixed
190 | - IE11 Error in 'strict mode': *Assignment to read-only properties is not allowed in strict mode* for `classList` change (=> .style.cssText) 
191 | 
192 | ## [v1.3.4] - 2017-08-29
193 | 
194 | ### Added
195 | - getPopup() method: Returns the jQuery object instance of the specific popup element
196 | - setDisabledNodes(collection, diselectDisabled, byAttribute): Disables specified nodes
197 | - enableAllNodes(): Enables all nodes
198 | - disableAllNodes(): Disbales all nodes
199 | 
200 | ### Changed
201 | - setSelectedNodes(allSelected, collection, byAttribute): New optional parameter `byAttribute`
202 | - Removed 'group' property from plugin data format
203 | 
204 | ## [v1.3.3] - 2017-08-25
205 | 
206 | ### Fixed
207 | - updateDatasource() method: Updates datasource and rebuilds popup
208 | 
209 | ## [v1.3.2] - 2017-08-03
210 | 
211 | ### Added
212 | - CHANGELOG file
213 | - Custom events
214 | 
215 | ### Changed
216 | - README (Added events section)
217 | 
218 | ## [v1.3.1] - 2017-08-02
219 | 
220 | ### Changed
221 | - Options: popupDimensions object (multiple window width breakpoints)
222 | 
223 | ## [v1.3.0] - 2017-08-01
224 | 
225 | ### Added
226 | - Test page (test.html)
227 | 
228 | ### Fixed
229 | - Mixed data for multiple plugin instances
230 | 
231 | 
232 | [Unreleased]: https://github.com/kapantzak/SearchAreaControl/compare/master...develop
233 | [v2.8.6]: https://github.com/kapantzak/SearchAreaControl/compare/v2.8.5...v2.8.6
234 | [v2.8.5]: https://github.com/kapantzak/SearchAreaControl/compare/v2.8.4...v2.8.5
235 | [v2.8.4]: https://github.com/kapantzak/SearchAreaControl/compare/v2.8.3...v2.8.4
236 | [v2.8.3]: https://github.com/kapantzak/SearchAreaControl/compare/v2.8.2...v2.8.3
237 | [v2.8.2]: https://github.com/kapantzak/SearchAreaControl/compare/v2.8.1...v2.8.2
238 | [v2.8.1]: https://github.com/kapantzak/SearchAreaControl/compare/v2.8.0...v2.8.1
239 | [v2.8.0]: https://github.com/kapantzak/SearchAreaControl/compare/v2.7.0...v2.8.0
240 | [v2.7.0]: https://github.com/kapantzak/SearchAreaControl/compare/v2.6.0...v2.7.0
241 | [v2.6.0]: https://github.com/kapantzak/SearchAreaControl/compare/v2.5.3...v2.6.0
242 | [v2.5.3]: https://github.com/kapantzak/SearchAreaControl/compare/v2.5.2...v2.5.3
243 | [v2.5.2]: https://github.com/kapantzak/SearchAreaControl/compare/v2.5.1...v2.5.2
244 | [v2.5.1]: https://github.com/kapantzak/SearchAreaControl/compare/v2.5.0...v2.5.1
245 | [v2.5.0]: https://github.com/kapantzak/SearchAreaControl/compare/v2.4.1...v2.5.0
246 | [v2.4.1]: https://github.com/kapantzak/SearchAreaControl/compare/v2.4.0...v2.4.1
247 | [v2.4.0]: https://github.com/kapantzak/SearchAreaControl/compare/v2.3.2...v2.4.0
248 | [v2.3.2]: https://github.com/kapantzak/SearchAreaControl/compare/v2.3.1...v2.3.2
249 | [v2.3.1]: https://github.com/kapantzak/SearchAreaControl/compare/v2.3.0...v2.3.1
250 | [v2.3.0]: https://github.com/kapantzak/SearchAreaControl/compare/v2.2.0...v2.3.0
251 | [v2.2.0]: https://github.com/kapantzak/SearchAreaControl/compare/v2.1.3...v2.2.0
252 | [v2.1.3]: https://github.com/kapantzak/SearchAreaControl/compare/v2.1.2...v2.1.3
253 | [v2.1.2]: https://github.com/kapantzak/SearchAreaControl/compare/v2.1.1...v2.1.2
254 | [v2.1.1]: https://github.com/kapantzak/SearchAreaControl/compare/v2.1.0...v2.1.1
255 | [v2.1.0]: https://github.com/kapantzak/SearchAreaControl/compare/v2.0.0...v2.1.0
256 | [v2.0.0]: https://github.com/kapantzak/SearchAreaControl/compare/v1.6.0...v2.0.0
257 | [v1.6.0]: https://github.com/kapantzak/SearchAreaControl/compare/v1.5.1...v1.6.0
258 | [v1.5.1]: https://github.com/kapantzak/SearchAreaControl/compare/v1.5.0...v1.5.1
259 | [v1.5.0]: https://github.com/kapantzak/SearchAreaControl/compare/v1.4.2...v1.5.0
260 | [v1.4.2]: https://github.com/kapantzak/SearchAreaControl/compare/v1.4.1...v1.4.2
261 | [v1.4.1]: https://github.com/kapantzak/SearchAreaControl/compare/v1.4.0...v1.4.1
262 | [v1.4.0]: https://github.com/kapantzak/SearchAreaControl/compare/v1.3.6...v1.4.0
263 | [v1.3.6]: https://github.com/kapantzak/SearchAreaControl/compare/v1.3.5...v1.3.6
264 | [v1.3.5]: https://github.com/kapantzak/SearchAreaControl/compare/v1.3.4...v1.3.5
265 | [v1.3.4]: https://github.com/kapantzak/SearchAreaControl/compare/v1.3.3...v1.3.4
266 | [v1.3.3]: https://github.com/kapantzak/SearchAreaControl/compare/v1.3.2...v1.3.3
267 | [v1.3.2]: https://github.com/kapantzak/SearchAreaControl/compare/v1.3.1...v1.3.2
268 | [v1.3.1]: https://github.com/kapantzak/SearchAreaControl/compare/v1.3.0...v1.3.1
269 | [v1.3.0]: https://github.com/kapantzak/SearchAreaControl/compare/v1.2.2...v1.3.0


--------------------------------------------------------------------------------
/docs/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # How to contribute
 2 | 
 3 | Everyone who wants to contribute to this project is realy welcome. Please read the following steps if you want to contribute to this project.
 4 | 
 5 | ## Steps
 6 | 1. **[Fork](https://help.github.com/articles/fork-a-repo/ "Fork")** the project
 7 | 2. **[Clone](https://help.github.com/articles/cloning-a-repository/ "Clone")** the forked project on your machine
 8 | 3. Create **one branch for each** seperate issue (if more than one exists)
 9 | 4. **TEST** the code before commiting your changes
10 | 4. Commit with meaningful messages
11 | 5. Create a **[Pull Request](https://help.github.com/articles/about-pull-requests/)**
12 | 
13 | ## Some useful resources
14 | - [https://akrabat.com/the-beginners-guide-to-contributing-to-a-github-project/](https://akrabat.com/the-beginners-guide-to-contributing-to-a-github-project/)
15 | - [https://opensource.guide/how-to-contribute/](https://opensource.guide/how-to-contribute/)


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kapantzak/SearchAreaControl/22b998cf3580aad4d1f6b3772930b060bea2845f/favicon.ico


--------------------------------------------------------------------------------
/img/gif/searching.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kapantzak/SearchAreaControl/22b998cf3580aad4d1f6b3772930b060bea2845f/img/gif/searching.gif


--------------------------------------------------------------------------------
/img/logo_70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kapantzak/SearchAreaControl/22b998cf3580aad4d1f6b3772930b060bea2845f/img/logo_70.png


--------------------------------------------------------------------------------
/img/logo_sm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kapantzak/SearchAreaControl/22b998cf3580aad4d1f6b3772930b060bea2845f/img/logo_sm.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html class="no-js" lang="">
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <meta http-equiv="x-ua-compatible" content="ie=edge">
  6 |         <link href="favicon.ico" rel="icon" type="image/x-icon" />
  7 |         <title>SearchAreaControl - jQuery plugin</title>
  8 |         <meta name="description" content="">
  9 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 10 |         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 11 |         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 12 |         <link rel="stylesheet" href="css/style.css">
 13 |         <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
 14 |         <link rel="stylesheet" href="searchAreaControl/css/sac-style.css" />
 15 | 
 16 |     </head>
 17 |     <body>
 18 | 
 19 |         <div class="container-fluid">
 20 |             <div class="row">                
 21 |                 <div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 col-xs-12">
 22 | 
 23 |                     <div class="page-header">                      
 24 |                         <h1><img id="mainLogo" src="img/logo_70.png" /><span id="mainTitleText" class="marginLeft-md">SearchAreaControl</span> <small id="mainTitleSecondaryText">jQuery plugin</small><a id="gitHub" href="https://github.com/kapantzak/SearchAreaControl" class="btn btn-primary pull-right"><i class="fa fa-github"></i><span class="marginLeft-sm">Github</span></a></h1>
 25 |                     </div>                    
 26 | 
 27 |                     <p><strong>SearchAreaControl</strong> is a complete jQuery plugin that let's you <mark>display</mark>, <mark>search</mark> and <mark>select</mark> multiple items of a tree data structure.</p>
 28 | 
 29 |                     <div class="row">
 30 |                       <div class="gif-holder col-xs-12">
 31 |                         <img src="img/gif/searching.gif" alt="demo" />
 32 |                       </div>
 33 |                     </div>
 34 | 
 35 |                     <p>In order to user <strong>SearchAreaControl</strong> plugin you have to include jQuery before the plugin's script. Then, you can initialize the plugin providing the appropriate data and any custom options.</p>
 36 |                     <p>The plugin accepts a specific format of data. It actually accepts an array of <strong>nested</strong> objects (every object can hold an array of children objects) that produce a group of <a href="https://en.wikipedia.org/wiki/Tree_(data_structure)" target="_blank">tree data structures</a>.</p>
 37 |                     
 38 |                     <div class="panel-group demo-panel" id="accordion" role="tablist" aria-multiselectable="true">
 39 |                         <div class="panel panel-default">
 40 |                             <div class="panel-heading" role="tab" id="headingTwo">
 41 |                                 <h4 class="panel-title"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><i class="fa fa-code"></i><span class="marginLeft-sm">View the data used for this demo</span></a></h4>
 42 |                             </div>
 43 |                             <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
 44 |                                 <div class="panel-body">
 45 |                                     <p>
 46 |                                         <pre>var myData = [
 47 |   {
 48 |     "code": null,
 49 |     "group": null,
 50 |     "name": "Economy car",
 51 |     "attributes": {
 52 |       "data-id": "1"
 53 |     },
 54 |     "children": [
 55 |       {
 56 |         "code": null,
 57 |         "group": null,
 58 |         "name": "Microcar",
 59 |         "attributes": {
 60 |           "data-id": "11"
 61 |         },
 62 |         "children": null
 63 |       },
 64 |       {
 65 |         "code": null,
 66 |         "group": null,
 67 |         "name": "Hatchbacks",
 68 |         "attributes": {
 69 |           "data-id": "12"
 70 |         },
 71 |         "children": [
 72 |           {
 73 |             "code": null,
 74 |             "group": null,
 75 |             "name": "Ultracompact car",
 76 |             "attributes": {
 77 |               "data-id": "121"
 78 |             },
 79 |             "children": null
 80 |           },
 81 |           {
 82 |             "code": null,
 83 |             "group": null,
 84 |             "name": "City car",
 85 |             "attributes": {
 86 |               "data-id": "122"
 87 |             },
 88 |             "children": null
 89 |           },
 90 |           {
 91 |             "code": null,
 92 |             "group": null,
 93 |             "name": "Supermini/subcompact car",
 94 |             "attributes": {
 95 |               "data-id": "123"
 96 |             },
 97 |             "children": null
 98 |           }
 99 |         ]
100 |       }      
101 |     ]
102 |   },
103 |   {
104 |     "code": null,
105 |     "group": null,
106 |     "name": "Family car",
107 |     "attributes": {
108 |       "data-id": "2"
109 |     },
110 |     "children": [
111 |       {
112 |         "code": null,
113 |         "group": null,
114 |         "name": "Small family car/compact car",
115 |         "attributes": {
116 |           "data-id": "21"
117 |         },
118 |         "children": null
119 |       },
120 |       {
121 |         "code": null,
122 |         "group": null,
123 |         "name": "	Large family / mid-size",
124 |         "attributes": {
125 |           "data-id": "22"
126 |         },
127 |         "children": null
128 |       }
129 |     ]
130 |   },
131 |   {
132 |     "code": null,
133 |     "group": null,
134 |     "name": "Saloons / sedans",
135 |     "attributes": {
136 |       "data-id": "3"
137 |     },
138 |     "children": [
139 |       {
140 |         "code": null,
141 |         "group": null,
142 |         "name": "Large family / mid-size",
143 |         "attributes": {
144 |           "data-id": "31"
145 |         },
146 |         "children": null
147 |       },
148 |       {
149 |         "code": null,
150 |         "group": null,
151 |         "name": "Full size / large",
152 |         "attributes": {
153 |           "data-id": "32"
154 |         },
155 |         "children": null
156 |       },
157 | {
158 |         "code": null,
159 |         "group": null,
160 |         "name": "Crossover SUV",
161 |         "attributes": {
162 |           "data-id": "33"
163 |         },
164 |         "children": null
165 |       },
166 |       {
167 |         "code": null,
168 |         "group": null,
169 |         "name": "Minivans / MPVs",
170 |         "attributes": {
171 |           "data-id": "34"
172 |         },
173 |         "children": null
174 |       }
175 |     ]
176 |   },
177 |   {
178 |     "code": null,
179 |     "group": null,
180 |     "name": "Luxury vehicle",
181 |     "attributes": {
182 |       "data-id": "4"
183 |     },
184 |     "children": [
185 |       {
186 |         "code": null,
187 |         "group": null,
188 |         "name": "Compact executive",
189 |         "attributes": {
190 |           "data-id": "41"
191 |         },
192 |         "children": null
193 |       },
194 |       {
195 |         "code": null,
196 |         "group": null,
197 |         "name": "Executive / mid-luxury",
198 |         "attributes": {
199 |           "data-id": "42"
200 |         },
201 |         "children": null
202 |       },
203 |       {
204 |         "code": null,
205 |         "group": null,
206 |         "name": "Full-size luxury / Grand saloon",
207 |         "attributes": {
208 |           "data-id": "43"
209 |         },
210 |         "children": null
211 |       },
212 |       {
213 |         "code": null,
214 |         "group": null,
215 |         "name": "Estate cars / station wagons",
216 |         "attributes": {
217 |           "data-id": "44"
218 |         },
219 |         "children": null
220 |       }
221 |     ]
222 |   },
223 |   {
224 |     "code": null,
225 |     "group": null,
226 |     "name": "Sports cars",
227 |     "attributes": {
228 |       "data-id": "5"
229 |     },
230 |     "children": [
231 |       {
232 |         "code": null,
233 |         "group": null,
234 |         "name": "Hot hatch",
235 |         "attributes": {
236 |           "data-id": "51"
237 |         },
238 |         "children": null
239 |       },
240 |       {
241 |         "code": null,
242 |         "group": null,
243 |         "name": "Sports saloon / sports sedan",
244 |         "attributes": {
245 |           "data-id": "52"
246 |         },
247 |         "children": null
248 |       },
249 |       {
250 |         "code": null,
251 |         "group": null,
252 |         "name": "Sports car",
253 |         "attributes": {
254 |           "data-id": "53"
255 |         },
256 |         "children": null
257 |       },
258 |       {
259 |         "code": null,
260 |         "group": null,
261 |         "name": "Grand tourer",
262 |         "attributes": {
263 |           "data-id": "54"
264 |         },
265 |         "children": null
266 |       },
267 |       {
268 |         "code": null,
269 |         "group": null,
270 |         "name": "Supercar",
271 |         "attributes": {
272 |           "data-id": "55"
273 |         },
274 |         "children": null
275 |       },
276 |       {
277 |         "code": null,
278 |         "group": null,
279 |         "name": "Muscle car",
280 |         "attributes": {
281 |           "data-id": "56"
282 |         },
283 |         "children": null
284 |       },
285 |       {
286 |         "code": null,
287 |         "group": null,
288 |         "name": "Pony car",
289 |         "attributes": {
290 |           "data-id": "57"
291 |         },
292 |         "children": null
293 |       },
294 |       {
295 |         "code": null,
296 |         "group": null,
297 |         "name": "Convertible",
298 |         "attributes": {
299 |           "data-id": "58"
300 |         },
301 |         "children": null
302 |       }
303 |     ]
304 |   },
305 |   {
306 |     "code": null,
307 |     "group": null,
308 |     "name": "Off-roaders",
309 |     "attributes": {
310 |       "data-id": "6"
311 |     },
312 |     "children": [
313 |       {
314 |         "code": null,
315 |         "group": null,
316 |         "name": "Sport utility vehicle",
317 |         "attributes": {
318 |           "data-id": "61"
319 |         },
320 |         "children": null
321 |       }
322 |     ]
323 |   },
324 |   {
325 |     "code": null,
326 |     "group": null,
327 |     "name": "Commercial vehicle",
328 |     "attributes": {
329 |       "data-id": "7"
330 |     },
331 |     "children": [
332 |       {
333 |         "code": null,
334 |         "group": null,
335 |         "name": "Van",
336 |         "attributes": {
337 |           "data-id": "71"
338 |         },
339 |         "children": null
340 |       }
341 |     ]
342 |   }
343 | ];</pre>
344 |                                     </p>
345 |                                     <p class="custom-text-info"><em>Source: <a href="https://en.wikipedia.org/wiki/Car_classification#Microcar" target="_blank">https://en.wikipedia.org/wiki/Car_classification#Microcar</a></em></p>
346 |                                 </div>
347 |                             </div>
348 |                         </div>
349 |                     </div>
350 | 
351 |                     <div class="panel panel-default demo-panel">
352 |                         <div class="panel-body">
353 |                             <h5 class="demo-panel-title">Simple usage</h5>
354 |                             <p>
355 | <pre>$('#myButton').searchAreaControl({ 
356 |     data: myData,
357 |     mainButton: {
358 |         defaultText: 'Cars'
359 |     } 
360 | });</pre>
361 |                             </p>
362 |                             <p><button id="myButton" class="btn btn-success" type="button"></button></p>                            
363 |                         </div>
364 |                     </div>
365 | 
366 |                     <p>Now, let's use <code>setSelectedNodes</code> method to initialize the plugin with a selected node. We actually initialize the plugin first, and then call the appropriate method.</p>
367 | 
368 |                     <div class="panel panel-default demo-panel">
369 |                         <div class="panel-body">
370 |                             <h5 class="demo-panel-title">Select node</h5>
371 |                             <p>
372 | <pre>var btn = $('#myButton');
373 | 
374 | // Initialize plugin
375 | btn.searchAreaControl({ 
376 |     data: myData,
377 |     mainButton: {
378 |         defaultText: 'Cars'
379 |     } 
380 | });
381 | 
382 | // Call "setSelectedNodes" method to select one node by "data-id" attribute
383 | btn.searchAreaControl('setSelectedNodes', false, [55]);</pre>
384 |                             </p>
385 |                             <p>
386 |                                 <button id="myButton2" class="btn btn-success" type="button"></button>                                
387 |                             </p>                            
388 |                         </div>
389 |                     </div>
390 | 
391 |                     <p>There are several methods available to use in order to perform various tasks.</p>
392 | 
393 |                     <div class="panel panel-default demo-panel">
394 |                         <div class="panel-body">
395 |                             <h5 class="demo-panel-title">Examples</h5>                            
396 |                             
397 |                             <!-- setSelectedNodes -->
398 |                             <div class="panel panel-default">                        
399 |                                 <div class="panel-heading"><code>setSelectedNodes()</code></div>
400 |                                 <div class="panel-body">
401 |                                     <p>Select one or more nodes.</p>
402 |                                     <p><button id="myButton3" class="btn btn-success" type="button"></button></p>
403 | <pre>$(document).on('click', '#setSelectedNodes_button', function() {      
404 |     $('#myButton').searchAreaControl('setSelectedNodes',false,[57]);
405 | });</pre>
406 |                                     <p><button id="selectPony" class="btn btn-default marginLeft-sm" type="button">Select Pony car!</button></p>
407 |                                 </div>
408 |                             </div>
409 | 
410 |                             <!-- getSelectedByAttribute -->
411 |                             <div class="panel panel-default">                        
412 |                                 <div class="panel-heading"><code>getSelectedByAttribute()</code></div>
413 |                                 <div class="panel-body">
414 |                                     <p>You can use <code>getSelectedByAttribute()</code> method to get the selected nodes by specific attribute. Here, we can use the <code>data-id</code> attribute.</p>
415 |                                     <p><button id="myButton4" class="btn btn-success" type="button"></button></p>
416 | <pre>$(document).on('click', '#getSelectedByAttribute_button', function() {      
417 |     var selected = $('#myButton').searchAreaControl('getSelectedByAttribute','data-id');
418 | });</pre>
419 |                                     <p><button id="getSelectedByAttribute" class="btn btn-default marginLeft-sm" type="button">getSelectedByAttribute()</button></p>
420 |                                     <p>
421 |                                         <div class="well well-sm">
422 |                                             <samp id="getSelectedByAttribute_result"></samp>
423 |                                         </div>                                        
424 |                                     </p>
425 |                                 </div>
426 |                             </div> 
427 |                             
428 |                             <!-- setDisabled -->
429 |                             <div class="panel panel-default">                        
430 |                                 <div class="panel-heading"><code>setDisabled()</code></div>
431 |                                 <div class="panel-body">
432 |                                     <p>You can use <code>setDisabled()</code> to enable or disable the button.</p>
433 |                                     <p><button id="myButton5" class="btn btn-success" type="button"></button></p>
434 | <pre>$(document).on('click', '#setDisabled_button', function() {          
435 |     $('#myButton').searchAreaControl('setDisabled',true);
436 | });</pre>
437 |                                     <p>
438 |                                         <button id="setDisabled" class="btn btn-danger marginLeft-sm" type="button">Disable button</button>
439 |                                         <button id="setEnabled" class="btn btn-success marginLeft-sm" type="button">Enable button</button>
440 |                                     </p>                                    
441 |                                 </div>
442 |                             </div> 
443 | 
444 |                         </div>
445 |                     </div>
446 | 
447 |                     <p>There is a number of options you can provide in order to customize the appearance and behaviour of the plugin.</p>
448 |                     <p>The following table demonstate some of them. For a complete list of all the available options view the <a href="https://github.com/kapantzak/SearchAreaControl" target="_blank">README</a>.</p>
449 | 
450 |                     <div class="panel panel-default table-panel">                        
451 |                         <div class="panel-heading">Options</div>
452 |                         <table class="table">
453 |                             <thead>
454 |                                 <tr>
455 |                                     <th>Name</th>
456 |                                     <th>Type</th>
457 |                                     <th>Default value</th>
458 |                                     <th>Description</th>
459 |                                 </tr>
460 |                             </thead>
461 |                             <tbody>
462 |                                 <tr>
463 |                                     <td>data</td>
464 |                                     <td class="nowrap"><code>object</code></td>
465 |                                     <td class="nowrap"><code>[]</code></td>
466 |                                     <td>Provides the data that are going to be displayed</td>
467 |                                 </tr>
468 |                                 <tr>
469 |                                     <td>multiSelect</td>
470 |                                     <td class="nowrap"><code>boolean</code></td>
471 |                                     <td class="nowrap"><code>true</code></td>
472 |                                     <td>Set to false if you want to be able to select only one item at time</td>
473 |                                 </tr>
474 |                                 <tr>
475 |                                     <td>columns</td>
476 |                                     <td class="nowrap"><code>number</code></td>
477 |                                     <td class="nowrap"><code>2</code></td>
478 |                                     <td>Set the number of columns that the data will be rendered</td>
479 |                                 </tr>
480 |                                 <tr>
481 |                                     <td>selectionByAttribute</td>
482 |                                     <td class="nowrap"><code>string</code></td>
483 |                                     <td class="nowrap"><code>'data-id'</code></td>
484 |                                     <td>Set the attribute that you want to select upon. The plugin will search for this attribute to match with the provided search string to filter all the items of the data array</td>
485 |                                 </tr>
486 |                                 <tr>
487 |                                     <td>modallHeader.text</td>
488 |                                     <td class="nowrap"><code>string</code></td>
489 |                                     <td class="nowrap"><code>'Search'</code></td>
490 |                                     <td>The text that is going to be displayed in the modal header</td>
491 |                                 </tr>
492 |                                 <tr>
493 |                                     <td>mainButton.defaultText</td>
494 |                                     <td class="nowrap"><code>string</code></td>
495 |                                     <td class="nowrap"><code>'Items'</code></td>
496 |                                     <td>Set the default button text</td>
497 |                                 </tr>
498 |                             </tbody>
499 |                         </table>
500 |                     </div>
501 | 
502 |                     <p>We have already seen some of the available methods in action.</p>
503 |                     <p>The following table demonstate some of them. For a complete list of all the available methods view the <a href="https://github.com/kapantzak/SearchAreaControl" target="_blank">README</a>.</p>
504 | 
505 |                     <div class="panel panel-default table-panel">                        
506 |                         <div class="panel-heading">Methods</div>
507 |                         <table class="table">
508 |                             <thead>
509 |                                 <tr>
510 |                                     <th>Name</th>
511 |                                     <th>Parameters</th>
512 |                                     <th>Return</th>
513 |                                     <th>Description</th>
514 |                                 </tr>
515 |                             </thead>
516 |                             <tbody>
517 |                                 <tr>
518 |                                     <td>getData()</td>
519 |                                     <td class="nowrap">no</td>
520 |                                     <td class="nowrap"><code>array</code></td>
521 |                                     <td>Get the control's datasource object (array)</td>
522 |                                 </tr>
523 |                                 <tr>
524 |                                     <td>clearSelection()</td>
525 |                                     <td class="nowrap">no</td>
526 |                                     <td class="nowrap"><code>void</code></td>
527 |                                     <td>Clear selected items</td>
528 |                                 </tr>
529 |                                 <tr>
530 |                                     <td>getSelectedNodes()</td>
531 |                                     <td class="nowrap">no</td>
532 |                                     <td class="nowrap"><code>object</code></td>
533 |                                     <td>Get an object with two properties, <code>selectedAll</code> (boolean: All items are selected) and <code>selectedNodes</code> (array: Array of selected objects)</td>
534 |                                 </tr>
535 |                                 <tr>
536 |                                     <td>updateDatasource(data)</td>
537 |                                     <td class="nowrap"><code>data [object]</code></td>
538 |                                     <td class="nowrap"><code>void</code></td>
539 |                                     <td>Update the datasource</td>
540 |                                 </tr>
541 |                                 <tr>
542 |                                     <td>destroy()</td>
543 |                                     <td class="nowrap">no</td>
544 |                                     <td class="nowrap"><code>void</code></td>
545 |                                     <td>Destroy the plugin</td>
546 |                                 </tr>                                
547 |                             </tbody>
548 |                         </table>
549 |                     </div>
550 |                     
551 |                 </div>
552 |        
553 |             </div>  
554 |             
555 |             <div id="footer" class="row">
556 |                 <div class="container-fluid">
557 |                     <img id="kapa_logo" src="img/logo_sm.png" alt="logo">
558 |                     <i>Developed by <a href="mailto:kapantzak@gmail.com" title="kapantzak@gmail.com">John Kapantzakis</a> (c) 2017</i><br>
559 |                     <i>Released under the <a href="LICENSE.txt" target="_blank">MIT License</a></i>			
560 |                 </div>
561 |             </div>
562 | 
563 |         </div>     
564 | 
565 |         <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
566 |         <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
567 |         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
568 |         <script src="searchAreaControl/searchAreaControl.js"></script>
569 |         <script src="js/main.js"></script>
570 |     </body>
571 | </html>
572 | 


--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | var data = [
  3 |   {
  4 |     "code": null,    
  5 |     "name": "Economy car",
  6 |     "nodeExpanded": false,
  7 |     "attributes": {
  8 |       "data-id": "1"
  9 |     },
 10 |     "children": [
 11 |       {
 12 |         "code": null,        
 13 |         "name": "Microcar",
 14 |         "nodeSelected": true,
 15 |         "attributes": {
 16 |           "data-id": "11"
 17 |         },
 18 |         "children": []
 19 |       },
 20 |       {
 21 |         "code": null,        
 22 |         "name": "Hatchbacks",
 23 |         "attributes": {
 24 |           "data-id": "12"
 25 |         },
 26 |         "children": [
 27 |           {
 28 |             "code": null,            
 29 |             "name": "Ultracompact car",
 30 |             "nodeSelected": true,
 31 |             "attributes": {
 32 |               "data-id": "121"
 33 |             },
 34 |             "children": null
 35 |           },
 36 |           {
 37 |             "code": null,            
 38 |             "name": "City car",
 39 |             "attributes": {
 40 |               "data-id": "122"
 41 |             },
 42 |             "children": null
 43 |           },
 44 |           {
 45 |             "code": null,            
 46 |             "name": "Supermini/subcompact car",
 47 |             "attributes": {
 48 |               "data-id": "123"
 49 |             },
 50 |             "children": null
 51 |           }
 52 |         ]
 53 |       }      
 54 |     ]
 55 |   },
 56 |   {
 57 |     "code": null,    
 58 |     "name": "Family car",
 59 |     "attributes": {
 60 |       "data-id": "2"
 61 |     },
 62 |     "children": [
 63 |       {
 64 |         "code": null,        
 65 |         "name": "Small family car/compact car",
 66 |         "nodeSelected": true,
 67 |         "attributes": {
 68 |           "data-id": "21"
 69 |         },
 70 |         "children": null
 71 |       },
 72 |       {
 73 |         "code": null,        
 74 |         "name": "	Large family / mid-size",
 75 |         "attributes": {
 76 |           "data-id": "22"
 77 |         },
 78 |         "children": null
 79 |       }
 80 |     ]
 81 |   },
 82 |   {
 83 |     "code": null,    
 84 |     "name": "Saloons / sedans",
 85 |     "attributes": {
 86 |       "data-id": "3"
 87 |     },
 88 |     "children": [
 89 |       {
 90 |         "code": null,        
 91 |         "name": "Large family / mid-size",
 92 |         "attributes": {
 93 |           "data-id": "31"
 94 |         },
 95 |         "children": null
 96 |       },
 97 |       {
 98 |         "code": null,
 99 |         "name": "Full size / large",
100 |         "attributes": {
101 |           "data-id": "32"
102 |         },
103 |         "children": null
104 |       },
105 |       {
106 |         "code": null,
107 |         "name": "Crossover SUV",
108 |         "attributes": {
109 |           "data-id": "33"
110 |         },
111 |         "children": null
112 |       },
113 |       {
114 |         "code": null,
115 |         "name": "Minivans / MPVs",
116 |         "attributes": {
117 |           "data-id": "34"
118 |         },
119 |         "children": null
120 |       }
121 |     ]
122 |   },
123 |   {
124 |     "code": null,
125 |     "name": "Luxury vehicle",
126 |     "attributes": {
127 |       "data-id": "4"
128 |     },
129 |     "children": [
130 |       {
131 |         "code": null,
132 |         "name": "Compact executive",
133 |         "attributes": {
134 |           "data-id": "41"
135 |         },
136 |         "children": null
137 |       },
138 |       {
139 |         "code": null,
140 |         "name": "Executive / mid-luxury",
141 |         "attributes": {
142 |           "data-id": "42"
143 |         },
144 |         "children": null
145 |       },
146 |       {
147 |         "code": null,
148 |         "name": "Full-size luxury / Grand saloon",
149 |         "attributes": {
150 |           "data-id": "43"
151 |         },
152 |         "children": null
153 |       },
154 |       {
155 |         "code": null,
156 |         "name": "Estate cars / station wagons",
157 |         "attributes": {
158 |           "data-id": "44"
159 |         },
160 |         "children": null
161 |       },
162 |       {
163 |         "code": null,
164 |         "name": "Compact executive",
165 |         "attributes": {
166 |           "data-id": "45"
167 |         },
168 |         "children": null
169 |       },
170 |       {
171 |         "code": null,
172 |         "name": "Executive / mid-luxury",
173 |         "attributes": {
174 |           "data-id": "46"
175 |         },
176 |         "children": null
177 |       },
178 |       {
179 |         "code": null,
180 |         "name": "Full-size luxury / Grand saloon",
181 |         "attributes": {
182 |           "data-id": "47"
183 |         },
184 |         "children": null
185 |       },
186 |       {
187 |         "code": null,
188 |         "name": "Estate cars / station wagons",
189 |         "attributes": {
190 |           "data-id": "48"
191 |         },
192 |         "children": null
193 |       },
194 |       {
195 |         "code": null,
196 |         "name": "Compact executive",
197 |         "attributes": {
198 |           "data-id": "49"
199 |         },
200 |         "children": null
201 |       },
202 |       {
203 |         "code": null,
204 |         "name": "Executive / mid-luxury",
205 |         "attributes": {
206 |           "data-id": "50"
207 |         },
208 |         "children": null
209 |       },
210 |       {
211 |         "code": null,
212 |         "name": "Full-size luxury / Grand saloon",
213 |         "attributes": {
214 |           "data-id": "51"
215 |         },
216 |         "children": null
217 |       },
218 |       {
219 |         "code": null,
220 |         "name": "Estate cars / station wagons",
221 |         "attributes": {
222 |           "data-id": "52"
223 |         },
224 |         "children": null
225 |       },
226 |       {
227 |         "code": null,
228 |         "name": "Compact executive",
229 |         "attributes": {
230 |           "data-id": "53"
231 |         },
232 |         "children": null
233 |       },
234 |       {
235 |         "code": null,
236 |         "name": "Executive / mid-luxury",
237 |         "attributes": {
238 |           "data-id": "54"
239 |         },
240 |         "children": null
241 |       },
242 |       {
243 |         "code": null,
244 |         "name": "Full-size luxury / Grand saloon",
245 |         "attributes": {
246 |           "data-id": "55"
247 |         },
248 |         "children": null
249 |       },
250 |       {
251 |         "code": null,
252 |         "name": "Estate cars / station wagons",
253 |         "attributes": {
254 |           "data-id": "56"
255 |         },
256 |         "children": null
257 |       },
258 |       {
259 |         "code": null,
260 |         "name": "Compact executive",
261 |         "attributes": {
262 |           "data-id": "57"
263 |         },
264 |         "children": null
265 |       },
266 |       {
267 |         "code": null,
268 |         "name": "Executive / mid-luxury",
269 |         "attributes": {
270 |           "data-id": "58"
271 |         },
272 |         "children": null
273 |       },
274 |       {
275 |         "code": null,
276 |         "name": "Full-size luxury / Grand saloon",
277 |         "attributes": {
278 |           "data-id": "59"
279 |         },
280 |         "children": null
281 |       },
282 |       {
283 |         "code": null,
284 |         "name": "Estate cars / station wagons",
285 |         "attributes": {
286 |           "data-id": "60"
287 |         },
288 |         "children": null
289 |       }
290 |     ]
291 |   },
292 |   {
293 |     "code": null,
294 |     "name": "Sports cars",
295 |     "attributes": {
296 |       "data-id": "5"
297 |     },
298 |     "children": [
299 |       {
300 |         "code": null,
301 |         "name": "Hot hatch",
302 |         "attributes": {
303 |           "data-id": "51"
304 |         },
305 |         "children": null
306 |       },
307 |       {
308 |         "code": null,
309 |         "name": "Sports saloon / sports sedan",
310 |         "attributes": {
311 |           "data-id": "52"
312 |         },
313 |         "children": null
314 |       },
315 |       {
316 |         "code": null,
317 |         "name": "Sports car",
318 |         "attributes": {
319 |           "data-id": "53"
320 |         },
321 |         "children": null
322 |       },
323 |       {
324 |         "code": null,
325 |         "name": "Grand tourer",
326 |         "attributes": {
327 |           "data-id": "54"
328 |         },
329 |         "children": null
330 |       },
331 |       {
332 |         "code": null,
333 |         "name": "Supercar",
334 |         "attributes": {
335 |           "data-id": "55"
336 |         },
337 |         "children": null
338 |       },
339 |       {
340 |         "code": null,
341 |         "name": "Muscle car",
342 |         "attributes": {
343 |           "data-id": "56"
344 |         },
345 |         "children": null
346 |       },
347 |       {
348 |         "code": null,
349 |         "name": "Pony car",
350 |         "attributes": {
351 |           "data-id": "57"
352 |         },
353 |         "children": null
354 |       },
355 |       {
356 |         "code": null,
357 |         "name": "Convertible",
358 |         "attributes": {
359 |           "data-id": "58"
360 |         },
361 |         "children": null
362 |       }
363 |     ]
364 |   },
365 |   {
366 |     "code": null,
367 |     "name": "Off-roaders",
368 |     "attributes": {
369 |       "data-id": "6"
370 |     },
371 |     "children": [
372 |       {
373 |         "code": null,
374 |         "name": "Sport utility vehicle",
375 |         "attributes": {
376 |           "data-id": "61"
377 |         },
378 |         "children": null
379 |       }
380 |     ]
381 |   },
382 |   {
383 |     "code": null,
384 |     "name": "Commercial vehicle",
385 |     "attributes": {
386 |       "data-id": "7"
387 |     },
388 |     "children": [
389 |       {
390 |         "code": null,
391 |         "name": "Van",
392 |         "attributes": {
393 |           "data-id": "71"
394 |         },
395 |         "children": null
396 |       }
397 |     ]
398 |   }
399 | ];
400 | 
401 | var data2 = [
402 |   {
403 |     "code": null,
404 |     "name": "Test category 1",
405 |     "attributes": {
406 |       "data-id": "1"
407 |     },
408 |     "children": [
409 |       {
410 |         "code": null,
411 |         "name": "Test 11",
412 |         "attributes": {
413 |           "data-id": "11"
414 |         },
415 |         "children": null
416 |       },
417 |       {
418 |         "code": null,
419 |         "name": "Test 12",
420 |         "attributes": {
421 |           "data-id": "12"
422 |         },
423 |         "children": [
424 |           {
425 |             "code": null,
426 |             "name": "Test121",
427 |             "attributes": {
428 |               "data-id": "121"
429 |             },
430 |             "children": null
431 |           },
432 |           {
433 |             "code": null,
434 |             "name": "Test 122",
435 |             "attributes": {
436 |               "data-id": "122"
437 |             },
438 |             "children": null
439 |           },
440 |           {
441 |             "code": null,
442 |             "name": "Test 123",
443 |             "attributes": {
444 |               "data-id": "123"
445 |             },
446 |             "children": null
447 |           }
448 |         ]
449 |       }      
450 |     ]
451 |   },
452 |   {
453 |     "code": null,
454 |     "name": "Test category 2",
455 |     "attributes": {
456 |       "data-id": "2"
457 |     },
458 |     "children": [
459 |       {
460 |         "code": null,
461 |         "name": "Test 21",
462 |         "attributes": {
463 |           "data-id": "21"
464 |         },
465 |         "children": null
466 |       },
467 |       {
468 |         "code": null,
469 |         "name": "Test 22",
470 |         "attributes": {
471 |           "data-id": "22"
472 |         },
473 |         "children": null
474 |       }
475 |     ]
476 |   },
477 |   {
478 |     "code": null,
479 |     "name": "Test category 3",
480 |     "attributes": {
481 |       "data-id": "3"
482 |     },
483 |     "children": [
484 |       {
485 |         "code": null,
486 |         "name": "Test 31",
487 |         "attributes": {
488 |           "data-id": "31"
489 |         },
490 |         "children": null
491 |       },
492 |       {
493 |         "code": null,
494 |         "name": "Test 32",
495 |         "attributes": {
496 |           "data-id": "32"
497 |         },
498 |         "children": null
499 |       },
500 |       {
501 |         "code": null,
502 |         "name": "Test 33",
503 |         "attributes": {
504 |           "data-id": "33"
505 |         },
506 |         "children": null
507 |       },
508 |       {
509 |         "code": null,
510 |         "name": "Test 34",
511 |         "attributes": {
512 |           "data-id": "34"
513 |         },
514 |         "children": null
515 |       }
516 |     ]
517 |   }  
518 | ];
519 | 
520 | $(document).ready(function() {
521 |   
522 |     $('#myButton').searchAreaControl({        
523 |         data: data,
524 |         mainButton: {
525 |             defaultText: 'Cars'
526 |         }
527 |     });
528 |       
529 |     var btn2 = $('#myButton2');
530 |     btn2.searchAreaControl({        
531 |         data: data,
532 |         mainButton: {
533 |             defaultText: 'Cars'
534 |         }
535 |     });
536 |     btn2.searchAreaControl('setSelectedNodes', false, [55]);
537 |         
538 |     $('#myButton3').searchAreaControl({        
539 |         data: data,
540 |         mainButton: {
541 |             defaultText: 'Cars',
542 |             showAllText: true
543 |         }
544 |     });
545 | 
546 |     $('#myButton4').searchAreaControl({        
547 |         data: data,
548 |         mainButton: {
549 |             defaultText: 'Cars'
550 |         }
551 |     });
552 | 
553 |     $('#myButton5').searchAreaControl({        
554 |         data: data,
555 |         mainButton: {
556 |             defaultText: 'Cars'
557 |         }
558 |     });
559 | 
560 | 
561 |     // TEST ====================================================== //
562 | 
563 |     $('#btn1').searchAreaControl({        
564 |         data: data,
565 |         collapseNodes: true,        
566 |         //allNodesExpanded: false,
567 |         mainButton: {
568 |             defaultText: 'Cars',
569 |             className: 'btn btn-success'
570 |         },        
571 |         localeData: {
572 |           'en': {
573 |             'Search': 'Search custom'
574 |           }
575 |         },
576 |         searchBox: {          
577 |           searchType: {
578 |               startsWith: {
579 |                   text: 'Starts with',
580 |                   selected: false
581 |               },
582 |               existsIn: {
583 |                   text: 'Exists in',
584 |                   selected: false
585 |               },
586 |               regExp: {
587 |                   text: 'Regular expression',
588 |                   selected: true
589 |               }
590 |           }
591 |       },
592 |       popupButtons: {        
593 |         selectHighlighted: {
594 |           visible: true
595 |         }
596 |       }
597 |     });
598 | 
599 |     $('#btn2').searchAreaControl({        
600 |         data: data2,
601 |         //selectedNodes: ['11','121'],      
602 |         allNodesSelected: true,  
603 |         mainButton: {
604 |             defaultText: 'Data 2'
605 |         }
606 |     });
607 | 
608 |     $('#btn3').searchAreaControl({        
609 |       data: data2,      
610 |       mainButton: {
611 |           defaultText: 'Data 2'
612 |       }
613 |   });
614 | });
615 | 
616 | $(document).on('click', '#selectPony', function() {      
617 |     $('#myButton3').searchAreaControl('setSelectedNodes',false,[57]);
618 | });
619 | 
620 | $(document).on('click', '#getSelectedByAttribute', function() {
621 |     var selected = $('#myButton4').searchAreaControl('getSelectedByAttribute','data-id');
622 |     var result = (selected.length > 0) ? '[' + selected.join(',') + ']' : '[]';
623 |     $('#getSelectedByAttribute_result').html(result);
624 | });
625 | 
626 | $(document).on('click', '#setDisabled', function() {      
627 |     $('#myButton5').searchAreaControl('setDisabled',true);
628 | });
629 | 
630 | $(document).on('click', '#setEnabled', function() {      
631 |     $('#myButton5').searchAreaControl('setDisabled',false);
632 | });
633 | 
634 | // TEST ================================================================================ //
635 | 
636 | $(document).on('click', '#updateDatasource_btn1', function() {
637 |   $('#btn1').searchAreaControl('updateDatasource', data2);
638 | });
639 | 
640 | $(document).on('click', '#getPopup', function() {
641 |   var popup1 = $('#btn1').searchAreaControl('getPopup');
642 |   console.log(popup1);
643 |   //popup1.find('.sac-header-holder').css('border', '1px solid red');
644 | });
645 | 
646 | $(document).on('click', '#setDisbaledNodes', function() {
647 |   $('#btn1').searchAreaControl('setDisabledNodes', [21,22], true);
648 | });
649 | 
650 | $(document).on('click', '#enableAll', function() {
651 |   $('#btn1').searchAreaControl('enableAllNodes');
652 | });
653 | 
654 | $(document).on('click', '#destroy_btn1', function() {
655 |   $('#btn1').searchAreaControl('destroy');
656 | });
657 | 
658 | $(document).on('click', '#getSelectedByAttribute_btn1', function() {
659 |     var selectedObj = $('#btn1').searchAreaControl('getSelectedNodes');
660 |     console.log(selectedObj);
661 |     var selected = $('#btn1').searchAreaControl('getSelectedByAttribute');
662 |     var result = (selected.length > 0) ? '[' + selected.join(',') + ']' : '[]';
663 |     alert(result);
664 | });
665 | 
666 | $(document).on('click', '#destroy_btn2', function() {
667 |   $('#btn2').searchAreaControl('destroy');
668 | });
669 | 
670 | $(document).on('click', '#setSelectedNodes2', function() {
671 |   $('#btn2').searchAreaControl('setSelectedNodes', false, [31,32], 'data-id');
672 | });
673 | 
674 | $(document).on('click', '#getSelectedByAttribute_btn2', function() {
675 |     var selected = $('#btn2').searchAreaControl('getSelectedByAttribute','data-id');
676 |     var result = (selected.length > 0) ? '[' + selected.join(',') + ']' : '[]';
677 |     alert(result);
678 | });
679 | 
680 | $(document).on('searchareacontrol.beforeinit', function(e,data) {
681 |   console.log(data);
682 | });
683 | 
684 | $(document).on('searchareacontrol.afterinit', function(e,data) {
685 |   console.log(data);
686 | });
687 | 
688 | $(document).on('searchareacontrol.popup.shown', function(e,data) {
689 |   console.log(data);
690 | });
691 | 
692 | $(document).on('searchareacontrol.popup.hidden', function(e,data) {
693 |   console.log(data);
694 | });
695 | 
696 | $(document).on('searchareacontrol.button.click', function(e,data) {
697 |   console.log(data);
698 | });
699 | 
700 | $(document).on('searchareacontrol.selectedNodesChanged', function(e,data) {
701 |   console.log(data);
702 | });
703 | 
704 | $(document).on('searchareacontrol.popup.beforeshow', function(e,data) {  
705 |   console.log('searchareacontrol.popup.beforeshow');
706 | });
707 | 
708 | $(document).on('searchareacontrol.popup.beforehide', function(e,data) {  
709 |   console.log('searchareacontrol.popup.beforehide');
710 | });
711 | 
712 | $(document).on('click', '#setLocale', function() {
713 |   $('#btn2').searchAreaControl('setLocale', 'el');
714 | });
715 | 
716 | $(document).on('click', '#btnModal', function() {
717 |   $('#myModal').modal('show');
718 | });


--------------------------------------------------------------------------------
/lib/index.d.ts:
--------------------------------------------------------------------------------
  1 | // Type definitions for SearchAreaControl plugin
  2 | // Project: SearchAreaControl
  3 | // Definitions by: John Kapantzakis <https://github.com/kapantzak>
  4 | 
  5 | /// <reference types="jquery"/>
  6 | 
  7 | export interface SearchAreaControl {    
  8 |     version: string;
  9 | }
 10 | 
 11 | export as namespace SAC;
 12 | 
 13 | export interface IOptions {
 14 |     modalHeader?: IModalHeader,
 15 |     data?: IData[],
 16 |     multiSelect?: boolean,
 17 |     collapseNodes?: boolean,
 18 |     allNodesExpanded?: boolean,
 19 |     columns?: number,
 20 |     selectionByAttribute?: string,
 21 |     allNodesSelected?: boolean,
 22 |     selectedNodes?: string[],
 23 |     locales?: string,
 24 |     localeData?: any,
 25 |     searchBox?: ISearchBox,
 26 |     popupDimensions?: IPopupDimensionsCollection,
 27 |     mainButton?: IMainButton,
 28 |     popupButtons?: IPopupButtonsCollection
 29 | }
 30 | 
 31 | export interface IModalHeader {
 32 |     text?: string,
 33 |     className?: string,
 34 |     visible?: boolean
 35 | }
 36 | 
 37 | export interface IData {
 38 |     code?: string,
 39 |     name: string,
 40 |     attributes?: IDataAttributes,
 41 |     nodeExpanded?: boolean,
 42 |     nodeSelected?: boolean,
 43 |     children?: IData[]
 44 | }
 45 | 
 46 | export interface IDataAttributes {
 47 |     [key: string]: any
 48 | }
 49 | 
 50 | export interface ISearchBox {
 51 |     enabled?: boolean,
 52 |     minCharactersSearch?: number,
 53 |     searchBoxClass?: string,
 54 |     searchBoxPlaceholder?: string,
 55 |     showSelectedItemsBox?: boolean,
 56 |     selectedItemsLabelVisible?: boolean,
 57 |     selectedItemsLabelText?: string,
 58 |     hideNotFound?: boolean,
 59 |     searchType?: ISearchTypeCollection        
 60 | }
 61 | 
 62 | export interface ISearchTypeCollection {
 63 |     startsWith?: ISearchType,
 64 |     existsIn?: ISearchType,
 65 |     regExp?: ISearchType
 66 | }
 67 | 
 68 | export interface ISearchType {
 69 |     text?: string,
 70 |     selected?: boolean
 71 | }
 72 | 
 73 | export interface IPopupDimensionsCollection {
 74 |     [key: string]: IPopupDimensions
 75 | }
 76 | 
 77 | export interface IPopupDimensions {
 78 |     width?: string,
 79 |     left?: string,
 80 |     marginLeft?: string
 81 | }
 82 | 
 83 | export interface IMainButton {
 84 |     defaultText?: string,
 85 |     className?: string,
 86 |     defaultNoneText?: string,
 87 |     defaultAllText?: string,
 88 |     showAllText?: boolean,
 89 |     maxSelectedViewText?: number
 90 | }
 91 | 
 92 | export interface IPopupButtonsCollection {
 93 |     selectAll?: IPopupButton,
 94 |     diselectAll?: IPopupButton,
 95 |     invertSelection?: IPopupButton,
 96 |     close?: IPopupButton,
 97 |     cancel?: IPopupButton,
 98 |     selectHighlighted?: IPopupButton
 99 | }
100 | 
101 | export interface IPopupButton {
102 |     text?: string,
103 |     className?: string,
104 |     visible?: boolean,
105 |     callback?: any,
106 |     index?: number
107 | }
108 | 
109 | export interface ISelectedNodesObject {
110 |     selectedAll: boolean,
111 |     selectedNodes: ISelectedNodes[]
112 | }
113 | 
114 | export interface ISelectedNodes {
115 |     text: string,
116 |     attributes: INodeAttributes
117 | }
118 | 
119 | export interface INodeAttributes {
120 |     [key: string]: any
121 | }
122 | 
123 | declare global {
124 |     interface JQuery {
125 | 
126 |         /**
127 |          * Get the control's datasource object (array)
128 |          */
129 |         searchAreaControl(method: 'getData'): IData[];
130 | 
131 |         /**
132 |          * Provide a collection of attributes (selectionByAttribute) to be selected, or set allSelected to true to select all available items. Provide an optional byAttribute parameter to indicate the attribute to select. If not provided, the plugin will try to search selectionByAttribute option value.
133 |          */
134 |         searchAreaControl(method: 'setSelectedNodes', allSelected: boolean, collection: Array<any>, byAttribute?: string): void;
135 | 
136 |         /**
137 |          * Clear selected items.
138 |          */
139 |         searchAreaControl(method: 'clearSelection'): void;
140 | 
141 |         /**
142 |          * Get an object of type ISelectedNodesObject
143 |          */
144 |         searchAreaControl(method: 'getSelectedNodes'): ISelectedNodesObject;
145 | 
146 |         /**
147 |          * Get an array of specific attribute values of the selected items. If attributeName is not provided, the plugin will try to search selected node by selectionByAttribute option
148 |          */
149 |         searchAreaControl(method: 'getSelectedByAttribute', attributeName?: string): Array<any>;
150 | 
151 |         /**
152 |          * Set disabled nodes specifying a collection of node attribute values (by default selectionByAttribute attribute). Set diselectDisabled to true if you want to diselect the nodes to be disabled. Provide an optional byAttribute parameter to indicate the attribute to select. If not provided, the plugin will try to search selectionByAttribute option value.
153 |          */
154 |         searchAreaControl(method: 'setDisabledNodes', collection: Array<any>, diselectDisabled: boolean, byAttribute?: string): void;
155 | 
156 |         /**
157 |          * Enable all nodes
158 |          */
159 |         searchAreaControl(method: 'enableAllNodes'): void;
160 | 
161 |         /**
162 |          * Disable all nodes
163 |          */
164 |         searchAreaControl(method: 'disableAllNodes'): void;
165 | 
166 |         /**
167 |          * Get disabled state of main button
168 |          */
169 |         searchAreaControl(method: 'getDisabled'): boolean;
170 | 
171 |         /**
172 |          * Toggle main button disabled state
173 |          */
174 |         searchAreaControl(method: 'setDisabled', disable: boolean): void;
175 | 
176 |         /**
177 |          * Get the popup jQuery object
178 |          */
179 |         searchAreaControl(method: 'getPopup'): JQuery;
180 | 
181 |         /**
182 |          * Update the datasource
183 |          */
184 |         searchAreaControl(method: 'updateDatasource', data: IData[]): void;
185 | 
186 |         /**
187 |          * Set new locale and re-init plugin
188 |          */
189 |         searchAreaControl(method: 'setLocale', locale: string): void;
190 | 
191 |         /**
192 |          * Destroy the plugin instance
193 |          */
194 |         searchAreaControl(method: 'destroy'): void;
195 | 
196 |         /**
197 |          * Generic method function
198 |          */
199 |         searchAreaControl(method?: IOptions | string, arg1?: any, arg2?: any, arg3?: any): void;
200 |     }
201 | 
202 |     interface JQueryStatic {
203 |         SearchAreaControl: SearchAreaControl;
204 |     }
205 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "searchareacontrol",
 3 |   "version": "2.8.6",
 4 |   "description": "A jQuery plugin used to display, search and select multiple items",
 5 |   "main": "searchAreaControl/searchAreaControl.js",
 6 |   "types": "lib/index.d.ts",
 7 |   "scripts": {
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/kapantzak/SearchAreaControl.git"
13 |   },
14 |   "keywords": [
15 |     "jquery-plugin",
16 |     "ecosystem:jquery",
17 |     "multiselect"
18 |   ],
19 |   "dependencies": {
20 |     "@types/jquery": "*"
21 |   },
22 |   "author": "John Kapantzakis",
23 |   "license": "MIT",
24 |   "bugs": {
25 |     "url": "https://github.com/kapantzak/SearchAreaControl/issues"
26 |   },
27 |   "homepage": "https://github.com/kapantzak/SearchAreaControl#readme"
28 | }
29 | 


--------------------------------------------------------------------------------
/searchAreaControl/css/sac-style.css:
--------------------------------------------------------------------------------
  1 | body.sac-noscroll {
  2 |     overflow: hidden !important;
  3 | }
  4 | 
  5 | .sac-popup-overlay {
  6 |     position: fixed;        
  7 |     top:0;
  8 |     left:0;
  9 |     right:0;
 10 |     bottom:0;
 11 |     z-index: 9995;
 12 |     background-color: rgba(0,0,0,0.8);    
 13 | }
 14 | 
 15 | .sac-popup {
 16 |     position: fixed;    
 17 |     top:100px;
 18 |     padding: 15px;
 19 |     box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
 20 |     transform: scale(0.9);
 21 |     opacity: 0;
 22 |     transition: all 150ms ease-in-out;
 23 |     border-radius: 4px;
 24 |     z-index: 9999;
 25 |     background-color: #fafafa;
 26 | }
 27 | 
 28 | .sac-popup.sac-popup-visible {
 29 |     opacity: 1;
 30 |     transform: scale(1);
 31 | }
 32 | 
 33 | .sac-header-holder {
 34 |     width:100%;   
 35 |     margin-bottom: 15px; 
 36 | }
 37 | 
 38 | .sac-header-h1 {
 39 |     margin: 0;
 40 |     font-size: 1.6em;
 41 |     margin-bottom: 20px;
 42 | }
 43 | 
 44 | /* Input area */
 45 | .sac-input-holder {
 46 |     width: 100%;    
 47 |     margin-bottom: 15px;
 48 | }
 49 | 
 50 | .sac-input-elem {
 51 |     width: 200px;
 52 |     height: 32px;
 53 |     border: 1px solid #d8d8d8;
 54 |     padding: 5px;
 55 |     box-sizing: border-box;
 56 | }
 57 | 
 58 | .sac-input-elem-last {
 59 |     border-top-right-radius: 4px;
 60 |     border-bottom-right-radius: 4px;
 61 | }
 62 | 
 63 | .sac-seacrh-combo-type {
 64 |     height: 32px;
 65 |     border: 1px solid #d8d8d8;
 66 |     padding: 5px;
 67 |     background-color: #f1f1f1;
 68 |     border-right: none;
 69 |     border-top-left-radius: 4px;
 70 |     border-bottom-left-radius: 4px;
 71 |     box-sizing: border-box;
 72 | }
 73 | 
 74 | /* List area */
 75 | .sac-popup .sac-ul {
 76 |     margin: 0;
 77 |     padding: 0;
 78 | }
 79 | 
 80 | .sac-popup .sac-ul > li {
 81 |     list-style: none;   
 82 |     padding-left: 5px;
 83 | }
 84 | 
 85 | .sac-cols-holder {
 86 |     width: 100%;
 87 |     float: left;
 88 |     overflow-y: auto;
 89 |     padding: 15px 5px;
 90 |     max-height: 50vh;
 91 |     border: 1px solid #d8d8d8;
 92 |     border-radius: 4px;
 93 |     box-sizing: border-box;
 94 | }
 95 | 
 96 | .sac-popup .sac-column-div > .sac-ul { 
 97 |     width:100%;
 98 |     float: left;
 99 | }
100 | 
101 | .sac-popup .sac-column-div > .sac-ul > li {
102 |     width: 100%;
103 |     float: left;    
104 |     padding-left: 0;
105 |     padding-top: 10px;
106 | }
107 | 
108 | .sa_holder:not(.sac-searching) > .sac-ul > li {
109 |     display: inline-block;
110 | }
111 | 
112 | .sac-popup .sac-column-div > .sac-ul > li > .sac-node-name { 
113 |     font-weight: bold;    
114 | }
115 | 
116 | .sac-popup .sac-column-div > .sac-ul { font-size: 18px }
117 | .sac-ul { font-size: 0.85em; line-height: 1.5 }
118 | 
119 | .sac-node-name {
120 |     padding: 5px 10px;  
121 |     position:relative;
122 |     cursor:pointer;    
123 | }
124 | 
125 | ul:not(.sac-ul-top) .sac-node-name:hover { text-decoration:underline }
126 | 
127 | ul:not(.sac-ul-top) .sac-node-name.sa-selected-item:before,
128 | .sac-node-selected:before {
129 |     content: "\e013";
130 |     font-family: 'Glyphicons Halflings';
131 |     position:absolute;    
132 |     color:#13a562;
133 | }
134 | 
135 | .sac-nodes-fixed ul:not(.sac-ul-top) .sac-node-name.sa-selected-item:before,
136 | .sac-nodes-fixed .sac-node-selected:before {    
137 |     left:-10px;    
138 | }
139 | 
140 | .sac-nodes-collapse ul:not(.sac-ul-top) .sac-node-name.sa-selected-item:before,
141 | .sac-nodes-collapse .sac-node-selected:before {    
142 |     right:-10px;
143 | }
144 | 
145 | .toggleNodeCollapse {
146 |     cursor: pointer;    
147 |     padding-right: 3px;
148 | }
149 | 
150 | .toggleNodeCollapse > .fa-caret-right,
151 | .sac-node-collapsed > .toggleNodeCollapse > .fa-caret-down {
152 |     display: none;
153 | }
154 | 
155 | .sac-node-collapsed > .toggleNodeCollapse > .fa-caret-right {
156 |     display: inline-block;
157 | }
158 | 
159 | .sac-node-collapsed > .sac-ul {
160 |     display: none
161 | }
162 | 
163 | .sac-custom-numSpan {
164 |     height: 32px;
165 |     display: inline-block;
166 |     padding: 5px 10px;
167 |     border: 1px solid #d8d8d8;
168 |     border-left: none;
169 |     border-top-right-radius: 4px;
170 |     border-bottom-right-radius: 4px;
171 |     box-sizing: border-box;
172 | }
173 | 
174 | .sac-custom-numSpan-num {
175 |     display: inline-block;
176 |     width:50px;    
177 |     padding-left: 5px;
178 |     font-weight:bold;
179 |     text-align: center;
180 | }
181 | 
182 | .multiSelectMaxItemsMsg { display:none }
183 | .modalSelectedItemsMax .multiSelectMaxItemsMsg { display:block }
184 | 
185 | /* Selected node --------------------------------------------------------------- */
186 | 
187 | /* .sac-node-selected:before {
188 |     content: "\e013";
189 |     font-family: 'Glyphicons Halflings';
190 |     position:absolute;
191 |     left:-10px;
192 |     color:#13a562;
193 | } */
194 | 
195 | /* Disabled node --------------------------------------------------------------- */
196 | 
197 | .sac-node-name.sac-node-disabled {
198 |     cursor: not-allowed;
199 |     opacity: 0.5;
200 |     pointer-events: none;
201 | }
202 | 
203 | /* Footer ---------------------------------------------------------------------- */
204 | 
205 | .sac-footer {
206 |     width:100%;
207 |     float: left;
208 |     margin-top: 25px;
209 | }
210 | 
211 | .sac-footer button {
212 |     margin-right: 5px;
213 | }
214 | 
215 | /* Searching classes ----------------------------------------------------------- */
216 | 
217 | .sac-found-item > span { background-color: yellowgreen }
218 | .sac-searching.sac-searching-hide-not-found li { display: none }
219 | .sac-searching.sac-searching-hide-not-found .sac-found-category, 
220 | .sac-searching.sac-searching-hide-not-found .sac-found-category li { display: block }
221 | 
222 | /* Helpers --------------------------------------------------------------------- */
223 | .sac-pull-left { float: left }
224 | 
225 | .sac-noselect {
226 |   -webkit-touch-callout: none; /* iOS Safari */
227 |     -webkit-user-select: none; /* Safari */
228 |      -khtml-user-select: none; /* Konqueror HTML */
229 |        -moz-user-select: none; /* Firefox */
230 |         -ms-user-select: none; /* Internet Explorer/Edge */
231 |             user-select: none; /* Non-prefixed version, currently
232 |                                   supported by Chrome and Opera */
233 | }
234 | 


--------------------------------------------------------------------------------
/searchAreaControl/searchAreaControl.js:
--------------------------------------------------------------------------------
   1 | ; (function ($, window, document, undefined) {
   2 | 
   3 |     var pluginName = 'searchAreaControl';
   4 | 
   5 |     function Plugin(element, options) {
   6 |         this.el = element;
   7 |         this.$el = $(element);
   8 |         this.opt = $.extend(true, {}, $.fn[pluginName].defaults, options);
   9 |         this.locales = $.extend(true, {}, $.fn[pluginName].locales, this.opt.localeData);
  10 |         this.rootClassName = 'elem-searchAreaControl';
  11 |         this.popupID = null;
  12 |         this.init();
  13 | 
  14 |         // Trigger 'searchareacontrol.afterinit' event
  15 |         var thisEl = this.$el;
  16 |         setTimeout(function () {
  17 |             thisEl.trigger('searchareacontrol.afterinit', [{ element: this.$el }]);
  18 |         }, 10);
  19 |     }
  20 | 
  21 |     Plugin.prototype = {
  22 | 
  23 |         init: function () {
  24 |             var $that = this;
  25 | 
  26 |             this.$el.trigger('searchareacontrol.beforeinit', [{ element: this.$el }]);
  27 | 
  28 |             this.$el.html(this._localize(this.opt.mainButton.defaultText));
  29 |             this._setData_DataSource(this.opt.data);
  30 | 
  31 |             // Add root class
  32 |             this.$el.addClass(this.rootClassName);
  33 | 
  34 |             // Add main button class name, if provided
  35 |             var mainButtonClassName = this.opt.mainButton.className;
  36 |             if (mainButtonClassName.length > 0) {
  37 |                 this.$el.addClass(mainButtonClassName);
  38 |             }
  39 | 
  40 |             this.$el.trigger('searchareacontrol.beforebuildpopup', [{ element: this.$el }]);
  41 |             this._buildPopup(pluginName);
  42 | 
  43 |             this.$el.trigger('searchareacontrol.beforeinitsearcharea', [{ element: this.$el }]);
  44 |             this._initSearchArea();
  45 | 
  46 |             this.$el.on('click', function () {
  47 |                 $that.$el.trigger('searchareacontrol.popup.beforeshow', [{ element: $that.$el }]);
  48 |                 $that._togglePopup(true);
  49 |             });
  50 |         },
  51 | 
  52 |         /**
  53 |          * Build popup overlay and popup HTML markup
  54 |          */
  55 |         _buildPopup: function (pluginName) {
  56 |             var thisPopupID = (this.popupID !== null) ? this.popupID : this._getNewPopupID(pluginName);
  57 |             var dimensions = this._getPopupDimensions();
  58 |             var popup = $('<div id="' + thisPopupID + '_overlay" class="sac-popup-overlay" style="display:none;"><div id="' + thisPopupID + '" class="sac-popup" style="' + dimensions + '"></div></div>');
  59 |             $('body').append(popup);
  60 |             this.$el.attr('data-popupid', thisPopupID);
  61 |         },
  62 | 
  63 |         /**
  64 |          * Get popup dimensions
  65 |          */
  66 |         _getPopupDimensions: function () {
  67 |             var w = $(window).width();
  68 |             var dimensions = this.opt.popupDimensions;
  69 |             var dimensionsObj = dimensions.max;
  70 |             for (var d in dimensions) {
  71 |                 if (!isNaN(d) && w < parseInt(d)) {
  72 |                     dimensionsObj = dimensions[d];
  73 |                 }
  74 |             }
  75 |             var style = 'width:' + dimensionsObj.width + ';';
  76 |             style += 'left:' + dimensionsObj.left + ';';
  77 |             style += 'margin-left:' + dimensionsObj.marginLeft + ';';
  78 |             return style;
  79 |         },
  80 | 
  81 |         /**
  82 |          * Recalculate and update popup dimensions
  83 |          */
  84 |         _updatePopupDimensions: function () {
  85 |             var popup = $('#' + this.popupID);
  86 |             if (popup && popup.length > 0) {
  87 |                 var dimensions = this._getPopupDimensions();
  88 |                 popup.attr('style', dimensions);
  89 |             }
  90 |         },
  91 | 
  92 |         /**
  93 |          * Get unique popup id
  94 |          */
  95 |         _getNewPopupID: function (pluginName) {
  96 |             var thisPopupID = pluginName + '_Popup_' + (this._uuidv4());
  97 |             this.popupID = thisPopupID;
  98 |             return this.popupID;
  99 |         },
 100 | 
 101 |         _uuidv4: function () {
 102 |             return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
 103 |                 var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
 104 |                 return v.toString(16);
 105 |             });
 106 |         },
 107 | 
 108 |         _toggleBodyScrolling: function (scroll) {
 109 |             var body = $('body');
 110 |             if (scroll === true) {
 111 |                 body.removeClass('sac-noscroll');
 112 |             } else {
 113 |                 body.addClass('sac-noscroll');
 114 |             }
 115 |         },
 116 | 
 117 |         // Data: DataSource ----------------------------------------------------------------- //
 118 | 
 119 |         /**
 120 |          * Store datasource in memory
 121 |          */
 122 |         _setData_DataSource: function (data) {
 123 |             $.data(this, pluginName + '_data', data);
 124 |         },
 125 | 
 126 |         /**
 127 |          * Get stored datasource
 128 |          */
 129 |         _getData_DataSource: function () {
 130 |             var data = $.data(this, pluginName + '_data');
 131 |             return (data) ? data : null;
 132 |         },
 133 | 
 134 |         // Data: SelectedNodes -------------------------------------------------------------- //
 135 | 
 136 |         /**
 137 |          * Store selected nodes object in memory
 138 |          */
 139 |         _setData_SelectedNodes: function (data) {
 140 |             $.data(this, pluginName + '_selectedNodes', data);
 141 |         },
 142 | 
 143 |         /**
 144 |          * Get stored selected nodes object
 145 |          */
 146 |         _getData_SelectedNodes: function () {
 147 |             var data = $.data(this, pluginName + '_selectedNodes');
 148 |             return (data) ? data : null;
 149 |         },
 150 | 
 151 |         /**
 152 |          * Store selected nodes object on popup show
 153 |          */
 154 |         _setData_SelectedNodesOnPopupShow: function (data) {
 155 |             $.data(this, pluginName + '_selectedNodesOnPopupShow', data);
 156 |         },
 157 | 
 158 |         /**
 159 |          * Get the selected nodes object when the popup was opened
 160 |          */
 161 |         _getData_SelectedNodesOnPopupShow: function () {
 162 |             var data = $.data(this, pluginName + '_selectedNodesOnPopupShow');
 163 |             return (data) ? data : null;
 164 |         },
 165 | 
 166 |         // SEARCH AREA (start) ============================================================== //
 167 | 
 168 |         /**
 169 |          * Toggle popup visibility state
 170 |          */
 171 |         _togglePopup: function (show) {
 172 |             var popup = $('#' + this.popupID);
 173 |             if (popup && popup.length > 0) {
 174 |                 var overlay = popup.closest('.sac-popup-overlay');
 175 |                 if (show === true) {
 176 |                     this._toggleBodyScrolling(false);
 177 |                     this._updatePopupDimensions();
 178 |                     overlay.show();
 179 |                     popup.addClass('sac-popup-visible');
 180 |                     this._setSearchBoxDimensions();
 181 | 
 182 |                     // Update selected nodes on popup show object
 183 |                     var selectedNodes = this._getSelectedNodes();
 184 |                     this._setData_SelectedNodesOnPopupShow(selectedNodes);
 185 | 
 186 |                     // Check for highlighted nodes on popup show
 187 |                     this._checkForHighlightedNodes();
 188 | 
 189 |                     // Remove Bootstrap's custom event listener
 190 |                     $(document).off('focusin.modal');
 191 | 
 192 |                     this.$el.trigger('searchareacontrol.popup.shown', [{ element: this.$el, popup: popup }]);
 193 |                 } else {
 194 |                     overlay.hide();
 195 |                     popup.removeClass('sac-popup-visible');
 196 |                     this._toggleBodyScrolling(true);
 197 |                     this.$el.trigger('searchareacontrol.popup.hidden', [{ element: this.$el, popup: popup }]);
 198 |                 }
 199 |             }
 200 |         },
 201 | 
 202 |         /**
 203 |          * Initialize searchArea functionality
 204 |          */
 205 |         _initSearchArea: function () {
 206 |             if (this.opt.modalHeader.visible === true) {
 207 |                 this._buildHeader();
 208 |             }
 209 |             if (this.opt.searchBox.enabled === true) {
 210 |                 this._buildSearchBox();
 211 |                 this._addSearchBoxEventListeners();
 212 |             }
 213 |             this._buildContent();
 214 |             this._buildPopupButtons();
 215 |             this._addEventListeners();
 216 |             this._applySelection();
 217 |         },
 218 | 
 219 |         /**
 220 |          * Build modal header
 221 |          */
 222 |         _buildHeader: function () {
 223 |             var popup = $('#' + this.popupID);
 224 |             if (popup && popup.length > 0) {
 225 |                 var headerOpt = this.opt.modalHeader;
 226 |                 var headerMarkup = '<div class="sac-header-holder ' + headerOpt.className + '"><h1 class="sac-header-h1">' + this._localize(headerOpt.text) + '</h1></div>';
 227 |                 var header = $(headerMarkup);
 228 |                 popup.append(header);
 229 |             }
 230 |         },
 231 | 
 232 |         /**
 233 |         *   Build searchBox and searchBox holder and append to popup 
 234 |         */
 235 |         _buildSearchBox: function () {
 236 |             var popup = $('#' + this.popupID);
 237 |             if (popup && popup.length > 0) {
 238 | 
 239 |                 var searchBoxHolder = document.createElement('div');
 240 |                 searchBoxHolder.className = 'sac-input-holder';
 241 | 
 242 |                 // Search type
 243 |                 var comboOpts = this.opt.searchBox.searchType;
 244 |                 var combo = document.createElement('select');
 245 |                 combo.className = 'sac-seacrh-combo-type';
 246 | 
 247 |                 var opt_startsWith = document.createElement('option');
 248 |                 opt_startsWith.setAttribute('value', '0');
 249 |                 opt_startsWith.innerHTML = this._localize(comboOpts.startsWith.text);
 250 | 
 251 |                 var opt_existsIn = document.createElement('option');
 252 |                 opt_existsIn.setAttribute('value', '1');
 253 |                 opt_existsIn.innerHTML = this._localize(comboOpts.existsIn.text);
 254 | 
 255 |                 var opt_regExp = document.createElement('option');
 256 |                 opt_regExp.setAttribute('value', '2');
 257 |                 opt_regExp.innerHTML = this._localize(comboOpts.regExp.text);
 258 | 
 259 |                 if (comboOpts.existsIn.selected === true) {
 260 |                     opt_existsIn.setAttribute('selected', 'selected');
 261 |                 } else if (comboOpts.regExp.selected === true) {
 262 |                     opt_regExp.setAttribute('selected', 'selected');
 263 |                 } else {
 264 |                     opt_startsWith.setAttribute('selected', 'selected');
 265 |                 }
 266 | 
 267 |                 combo.appendChild(opt_startsWith);
 268 |                 combo.appendChild(opt_existsIn);
 269 |                 combo.appendChild(opt_regExp);
 270 |                 searchBoxHolder.appendChild(combo);
 271 | 
 272 |                 // Search box
 273 |                 var searchBox = document.createElement('input');
 274 |                 searchBox.type = 'text';
 275 |                 searchBox.name = 'searchInput';
 276 |                 var hiddenNumClass = (this.opt.searchBox.showSelectedItemsBox === true) ? '' : ' sac-input-elem-last ';
 277 |                 searchBox.className = 'sac-input-elem ' + hiddenNumClass + this.opt.searchBox.searchBoxClass;
 278 |                 searchBox.setAttribute('placeholder', this.opt.searchBox.searchBoxPlaceholder);
 279 |                 searchBoxHolder.appendChild(searchBox);
 280 | 
 281 |                 // Selected nodes num
 282 |                 if (this.opt.searchBox.showSelectedItemsBox) {
 283 |                     var numSpan = $('<span class="sac-custom-numSpan"></span>');
 284 |                     var numSpanTxt = $('<span class="sac-custom-numSpan-txt">' + this._localize(this.opt.searchBox.selectedItemsLabelText) + '</span>');
 285 |                     var numSpanNum = $('<span class="sac-custom-numSpan-num">0</span>');
 286 |                     if (this.opt.searchBox.selectedItemsLabelVisible === true) {
 287 |                         numSpan.append(numSpanTxt);
 288 |                     }
 289 |                     numSpan.append(numSpanNum);
 290 |                     $(searchBoxHolder).append(numSpan);
 291 |                 }
 292 |                 popup.append($(searchBoxHolder));
 293 |             }
 294 |         },
 295 | 
 296 |         _setSearchBoxDimensions: function () {
 297 |             var popup = $('#' + this.popupID);
 298 |             if (popup && popup.length > 0) {
 299 |                 var inputHolder = popup.find('.sac-input-holder');
 300 |                 var inputHolder_w = inputHolder.outerWidth();
 301 |                 var searchTypeCombo = popup.find('.sac-seacrh-combo-type');
 302 |                 var searchTypeCombo_w = searchTypeCombo.outerWidth();
 303 |                 var selectedNum = popup.find('.sac-custom-numSpan');
 304 |                 var selectedNum_w = selectedNum.outerWidth();
 305 |                 var searchInput = popup.find('.sac-input-elem');
 306 |                 var searchInput_w = inputHolder_w - (searchTypeCombo_w + selectedNum_w) - 2;
 307 |                 searchInput.css('width', searchInput_w + 'px');
 308 |             }
 309 |         },
 310 | 
 311 |         /**
 312 |         *   Build content
 313 |         */
 314 |         _buildContent: function () {
 315 |             var $that = this;
 316 |             var popup = $('#' + this.popupID);
 317 |             if (popup && popup.length > 0) {
 318 | 
 319 |                 // Split data array to the number of columns parts
 320 |                 var dataLen = this.opt.data.length;
 321 |                 var optCols = this.opt.columns;
 322 |                 var addition = (dataLen % optCols > 0) ? 1 : 0;
 323 |                 var chunk = parseInt(dataLen / optCols) + addition;
 324 | 
 325 |                 var colsHolder = document.createElement('div');
 326 |                 var collapseClass = (this.opt.collapseNodes === true) ? 'sac-nodes-collapse' : 'sac-nodes-fixed';
 327 |                 colsHolder.className = 'sac-cols-holder ' + collapseClass;
 328 | 
 329 |                 var i, counter;
 330 |                 for (i = 0, counter = 1; i < dataLen; i += chunk, counter++) {
 331 | 
 332 |                     var dataPart = this.opt.data.slice(i, i + chunk);
 333 |                     var colDivWidth = 100 / this.opt.columns;
 334 |                     var colDivStyle = 'width:' + colDivWidth + '%';
 335 | 
 336 |                     if (dataPart.length > 0) {
 337 |                         // Create column div
 338 |                         var col = document.createElement('div');
 339 |                         col.setAttribute('id', 'sa_col_' + counter);
 340 |                         col.setAttribute('style', colDivStyle);
 341 |                         col.className = 'sac-column-div sac-pull-left';
 342 | 
 343 |                         // Create the top level ul
 344 |                         var ul = document.createElement('ul');
 345 |                         ul.className = 'sac-ul sac-ul-top';
 346 | 
 347 |                         // Append children
 348 |                         $.each(dataPart, function (i, node) {
 349 |                             var child = $that._getListItem({
 350 |                                 opt: this.opt,
 351 |                                 node: node
 352 |                             });
 353 |                             // Append children to top level ul
 354 |                             ul.appendChild(child);
 355 |                         });
 356 | 
 357 |                         col.appendChild(ul);
 358 |                         colsHolder.appendChild(col);
 359 |                     }
 360 | 
 361 |                 }
 362 | 
 363 |                 popup.append($(colsHolder));
 364 |             }
 365 |         },
 366 | 
 367 |         /**
 368 |          * Get list item
 369 |          * @param {object} obj Node object
 370 |          */
 371 |         _getListItem: function (obj) {
 372 |             var $that = this;
 373 |             if (obj) {
 374 |                 var opt = obj.opt;
 375 |                 var node = obj.node;
 376 | 
 377 |                 var code = node.code;
 378 |                 var name = node.name;
 379 |                 var attributes = node.attributes;
 380 |                 var nodeExpanded = node.nodeExpanded;
 381 |                 var nodeSelected = node.nodeSelected;
 382 |                 var children = node.children;
 383 | 
 384 |                 var li = document.createElement('li');
 385 |                 var arrow = $('<span class="toggleNodeCollapse"><i class="fa fa-caret-right"></i><i class="fa fa-caret-down"></i></span>');
 386 |                 var liSpan = document.createElement('span');
 387 | 
 388 |                 if ($that.opt.collapseNodes === true && ($that.opt.allNodesExpanded === false || nodeExpanded === false)) {
 389 |                     li.className = 'sac-node-collapsed';
 390 |                 }
 391 | 
 392 |                 // Set li's name
 393 |                 if (name) {
 394 |                     var liName = (code) ? code + '.' + name : name;
 395 |                     liSpan.innerHTML = liName;
 396 |                 }
 397 |                 // Set li's attributes
 398 |                 var itemSelected = false;
 399 |                 if (attributes) {
 400 |                     for (var key in attributes) {
 401 |                         if (
 402 |                             key == $that.opt.selectionByAttribute &&
 403 |                             (
 404 |                                 $that.opt.allNodesSelected === true ||
 405 |                                 ($that.opt.selectedNodes || []).indexOf(attributes[key]) !== -1 ||
 406 |                                 (($that.opt.selectedNodes || {}).selectedItems || []).indexOf(attributes[key]) !== -1
 407 |                             )
 408 |                         ) {
 409 |                             itemSelected = true;
 410 |                         }
 411 |                         liSpan.setAttribute(key, attributes[key]);
 412 |                     }
 413 |                 }
 414 |                 var selClass = (itemSelected === true || nodeSelected === true) ? 'sac-node-selected' : '';
 415 |                 liSpan.className = 'sac-node-name sac-noselect ' + selClass;
 416 | 
 417 |                 if (children && Array.isArray(children) && children.length > 0 && $that.opt.collapseNodes === true) {
 418 |                     li.appendChild(arrow[0]);
 419 |                 }
 420 |                 li.appendChild(liSpan);
 421 | 
 422 |                 // Get children
 423 |                 if (children) {
 424 |                     // Create ul
 425 |                     var c_ul = document.createElement('ul');
 426 |                     c_ul.className = 'sac-ul';
 427 | 
 428 |                     // Append children
 429 |                     $.each(children, function (i, childObj) {
 430 |                         var childItem = $that._getListItem({
 431 |                             opt: opt,
 432 |                             node: childObj
 433 |                         });
 434 |                         c_ul.appendChild(childItem);
 435 |                         li.appendChild(c_ul);
 436 |                     });
 437 |                 }
 438 |                 return li;
 439 |             }
 440 |         },
 441 | 
 442 |         /**
 443 |          * Build popup buttons
 444 |          */
 445 |         _buildPopupButtons: function () {
 446 |             var $that = this;
 447 |             var popup = $('#' + this.popupID);
 448 |             if (popup && popup.length > 0) {
 449 |                 var footer = $('<div class="sac-footer"></div>');
 450 |                 popup.append(footer);
 451 | 
 452 |                 var buttons = this.opt.popupButtons;
 453 |                 var $footer = popup.find('.sac-footer');
 454 | 
 455 |                 this._appendDefaultButtons($footer);
 456 |             }
 457 |         },
 458 | 
 459 |         /**
 460 |          * Append default buttons in footer
 461 |          * @param {object} $footer jQuery footer object
 462 |          */
 463 |         _appendDefaultButtons: function ($footer) {
 464 |             var $that = this;
 465 |             var buttons = this.opt.popupButtons;
 466 | 
 467 |             var btnArr = [];
 468 |             for (var btn in buttons) {
 469 |                 if (buttons[btn].visible === true) {
 470 |                     var thisBtn = buttons[btn];
 471 |                     var btnObj = {
 472 |                         text: thisBtn.text,
 473 |                         className: thisBtn.className,
 474 |                         visible: thisBtn.visible,
 475 |                         callback: thisBtn.callback,
 476 |                         index: thisBtn.index,
 477 |                         key: btn
 478 |                     };
 479 |                     btnArr.push(btnObj);
 480 |                 }
 481 |             }
 482 | 
 483 |             var indexArr = btnArr.map(function (b) { return b.index; });
 484 |             indexArr.sort();
 485 | 
 486 |             for (var i in indexArr) {
 487 |                 var btnKey = btnArr.filter(function (b) { return b.index === indexArr[i]; })[0].key;
 488 |                 var btnObj = buttons[btnKey];
 489 |                 $footer.append($that._getDefaultButton(btnKey, btnObj));
 490 |             }
 491 |         },
 492 | 
 493 |         /**
 494 |          * Add event listeners on nodes
 495 |          */
 496 |         _addEventListeners: function () {
 497 |             var $that = this;
 498 |             var popup = $('#' + this.popupID);
 499 |             if (popup && popup.length > 0) {
 500 | 
 501 |                 // Node
 502 |                 popup.find('.sac-ul')
 503 |                     .not('.sac-ul-top')
 504 |                     .children('li')
 505 |                     .find('.sac-node-name')
 506 |                     .on('click', function () {
 507 |                         var thisNode = $(this);
 508 |                         if (!thisNode.hasClass('sac-node-disabled')) {
 509 |                             if ($that.opt.multiSelect === false) {
 510 |                                 popup.find('.sac-node-name').not(this).removeClass('sac-node-selected');
 511 |                             }
 512 |                             thisNode.toggleClass('sac-node-selected');
 513 |                             $that._applySelection();
 514 |                         }
 515 |                     });
 516 | 
 517 |                 // Node parent
 518 |                 if (this.opt.multiSelect === true) {
 519 |                     popup.find('.sac-ul.sac-ul-top')
 520 |                         .children('li')
 521 |                         .children('.sac-node-name')
 522 |                         .on('click', function () {
 523 |                             var that = $(this);
 524 |                             var par = that.closest('li');
 525 |                             var parChildren = par.find('.sac-node-name').not(that).not('.sac-node-disabled');
 526 |                             var parSelectedChildren = parChildren.filter('.sac-node-selected');
 527 |                             var parChildrenNum = parChildren.length;
 528 |                             var parSelectedChildrenNum = parSelectedChildren.length;
 529 |                             if (parChildrenNum === parSelectedChildrenNum) {
 530 |                                 parChildren.removeClass('sac-node-selected');
 531 |                             } else {
 532 |                                 parChildren.addClass('sac-node-selected');
 533 |                             }
 534 |                             $that._applySelection();
 535 |                         });
 536 |                 }
 537 | 
 538 |                 // Node collapse
 539 |                 if (this.opt.collapseNodes === true) {
 540 |                     popup.find('.toggleNodeCollapse').on('click', function () {
 541 |                         $(this).closest('li').toggleClass('sac-node-collapsed');
 542 |                     });
 543 |                 }
 544 |             }
 545 |         },
 546 | 
 547 |         /**
 548 |          * Add event listeners on search input
 549 |          */
 550 |         _addSearchBoxEventListeners: function () {
 551 |             var $that = this;
 552 |             var popup = $('#' + this.popupID);
 553 |             if (popup && popup.length > 0) {
 554 | 
 555 |                 var input = popup.find('.sac-input-elem');
 556 | 
 557 |                 // Search type combo
 558 |                 popup.find('.sac-seacrh-combo-type').on('change', function () {
 559 |                     $that._searchNodes(input.val());
 560 |                 });
 561 | 
 562 |                 // Search box input
 563 |                 input.on('input', function () {
 564 |                     var inp = $(this);
 565 |                     var val = inp.val();
 566 |                     $that._searchNodes(val);
 567 |                 });
 568 |             }
 569 |         },
 570 | 
 571 |         /**
 572 |          * Perform search for given value
 573 |          * @param {string} val Value to search for
 574 |          */
 575 |         _searchNodes: function (val) {
 576 |             var $that = this;
 577 |             var popup = $('#' + this.popupID);
 578 |             if (popup && popup.length > 0) {
 579 |                 var searchType = popup.find('.sac-seacrh-combo-type').val();
 580 | 
 581 |                 // Reset classes
 582 |                 popup.find('li').removeClass('sac-found-category sac-found-item');
 583 |                 popup.find('.sac-node-name').removeClass('sac-found-item');
 584 | 
 585 |                 var valLen = val.length;
 586 |                 if (valLen > 0) {
 587 |                     popup.addClass('sac-searching');
 588 |                     if ($that.opt.searchBox.hideNotFound === true) {
 589 |                         popup.addClass('sac-searching-hide-not-found');
 590 |                     }
 591 | 
 592 |                     var valWithoutAccents = $that._removeAccents(val);
 593 |                     var regExp = new RegExp(valWithoutAccents);
 594 |                     if (searchType == '0') {
 595 |                         var regVal = '^' + valWithoutAccents;
 596 |                         regExp = new RegExp(regVal, 'i');
 597 |                     } else if (searchType == '1') {
 598 |                         regExp = new RegExp(valWithoutAccents, 'i');
 599 |                     }
 600 |                     popup.find('.sac-node-name').each(function () {
 601 |                         var elem = $(this);
 602 |                         var textWithoutAccents = $that._removeAccents(elem.text());
 603 |                         var elemFound = regExp.test(textWithoutAccents);
 604 |                         if (elemFound) {
 605 |                             var fItem = elem.closest('li');
 606 |                             fItem.addClass('sac-found-item');
 607 |                             $that._foundParentNodes(elem);
 608 |                         }
 609 |                     });
 610 |                 } else {
 611 |                     popup.removeClass('sac-searching sac-searching-hide-not-found');
 612 |                 }
 613 |                 $that._checkForHighlightedNodes();
 614 |             }
 615 |         },
 616 | 
 617 |         _removeAccents: function (str) {
 618 |             if (str && str.length > 0) {
 619 |                 var accents = 'ΆάΈέΉήΊίΌόΎύΏώΪϊΫϋΐΰÀÁÂÃÄÅàáâãäåÒÓÔÕÕÖØòóôõöøÈÉÊËèéêëðÇçÐÌÍÎÏìíîïÙÚÛÜùúûüÑñŠšŸÿýŽž';
 620 |                 var accentsOut = "ΑαΕεΗηΙιΟοΥυΩωΙιΥυιυAAAAAAaaaaaaOOOOOOOooooooEEEEeeeeoCcDIIIIiiiiUUUUuuuuNnSsYyyZz";
 621 |                 str = str.split('');
 622 |                 var strLen = str.length;
 623 |                 var i, x;
 624 |                 for (i = 0; i < strLen; i++) {
 625 |                     if ((x = accents.indexOf(str[i])) != -1) {
 626 |                         str[i] = accentsOut[x];
 627 |                     }
 628 |                 }
 629 |                 return str.join('');
 630 |             }
 631 |             return str;
 632 |         },
 633 | 
 634 |         /**
 635 |          * Check for hightlighted nodes and toogle button's visibility
 636 |          */
 637 |         _checkForHighlightedNodes: function () {
 638 |             var nodes = this._getHighlightedNodes();
 639 |             this._toggleSelectHighlightedButtonVisibility(nodes !== null && nodes.length > 0);
 640 |         },
 641 | 
 642 |         /**
 643 |          * Toogle select highlighted button visibility
 644 |          */
 645 |         _toggleSelectHighlightedButtonVisibility: function (show) {
 646 |             var $that = this;
 647 |             var popup = $('#' + this.popupID);
 648 |             if (popup && popup.length > 0) {
 649 |                 var btn = popup.find('.sac-btn-popup-selectHighlighted');
 650 |                 if (show === true) {
 651 |                     btn.show();
 652 |                 } else {
 653 |                     btn.hide();
 654 |                 }
 655 |             }
 656 |         },
 657 | 
 658 |         /**
 659 |          * Find parent nodes and indicate as found items
 660 |          * @param {object} elem jQuery node object
 661 |          */
 662 |         _foundParentNodes: function (elem) {
 663 |             var $that = this;
 664 |             if (elem) {
 665 |                 var parUl = elem.closest('ul');
 666 |                 if (parUl.hasClass('sac-ul-top')) {
 667 |                     elem.closest('li').addClass('sac-found-category');
 668 |                 }
 669 |                 var parNode = parUl.closest('li');
 670 |                 parNode.addClass('sac-found-category');
 671 |                 var upperParent = parNode.closest('ul').closest('li');
 672 |                 if (upperParent && upperParent.length > 0) {
 673 |                     $that._foundParentNodes(parNode);
 674 |                 }
 675 |             }
 676 |         },
 677 | 
 678 |         /**
 679 |          * Get button from options
 680 |          * @param {string} key Button name
 681 |          * @param {object} btn Options button object
 682 |          */
 683 |         _getDefaultButton: function (key, btn) {
 684 |             var $that = this;
 685 |             var hiddenOnSingleSelection = ['selectAll', 'diselectAll', 'invertSelection'];
 686 |             var button = null;
 687 | 
 688 |             if (this.opt.multiSelect === true || (this.opt.multiSelect === false && hiddenOnSingleSelection.indexOf(key) === -1)) {
 689 |                 var btnClass = 'sac-btn-popup-' + key;
 690 |                 button = $('<button id="btn_' + this.popupID + '_' + key + '" class="' + btn.className + ' ' + btnClass + '" type="button">' + $that._localize(btn.text) + '</button>');
 691 |                 button.on('click', function () {
 692 |                     switch (key) {
 693 |                         case 'selectAll':
 694 |                             $that._selectAll();
 695 |                             $that._applySelection();
 696 |                             break;
 697 |                         case 'diselectAll':
 698 |                             $that._diselectAll();
 699 |                             $that._applySelection();
 700 |                             break;
 701 |                         case 'invertSelection':
 702 |                             $that._invertSelection()
 703 |                             $that._applySelection();
 704 |                             break;
 705 |                         case 'close':
 706 |                             $that._closePopup();
 707 |                             break;
 708 |                         case 'cancel':
 709 |                             $that._resetSelection();
 710 |                             $that._closePopup();
 711 |                             break;
 712 |                         case 'selectHighlighted':
 713 |                             $that._selectHighlighted();
 714 |                             $that._applySelection();
 715 |                             break;
 716 |                     }
 717 |                     if (btn.callback && typeof btn.callback === 'function') {
 718 |                         btn.callback();
 719 |                     }
 720 |                     $that.$el.trigger('searchareacontrol.button.click', [{ element: $that.$el, buttonKey: key }]);
 721 |                 });
 722 |             }
 723 |             return button;
 724 |         },
 725 | 
 726 |         /**
 727 |          * Get an array of selected nodes
 728 |          */
 729 |         _getSelectedNodes: function () {
 730 |             var selectedNodes = [];
 731 |             var popup = $('#' + this.popupID);
 732 |             var allNodes = this._getAllNodes();
 733 |             if (popup && popup.length > 0 && allNodes !== null) {
 734 |                 allNodes.filter('.sac-node-selected').each(function () {
 735 |                     var node = $(this);
 736 |                     var attributes = {};
 737 |                     Array.prototype.slice.call(node[0].attributes).forEach(function (item) {
 738 |                         attributes[item.name] = item.value;
 739 |                     });
 740 |                     selectedNodes.push({
 741 |                         text: node.text(),
 742 |                         attributes: attributes
 743 |                     });
 744 |                 });
 745 |             }
 746 |             var selectedAll = (allNodes !== null) ? allNodes.length === selectedNodes.length : false;
 747 |             return {
 748 |                 selectedAll: selectedAll,
 749 |                 selectedNodes: selectedNodes
 750 |             }
 751 |         },
 752 | 
 753 |         /**
 754 |          * Get selected nodes and store data
 755 |          */
 756 |         _applySelection: function () {
 757 |             var selectedNodes = this._getSelectedNodes();
 758 |             this._setData_SelectedNodes(selectedNodes);
 759 |             this._updateMainButton();
 760 |             if (this.opt.searchBox.showSelectedItemsBox === true) {
 761 |                 this._updateSelectedItemsNum();
 762 |             }
 763 |             this.$el.trigger('searchareacontrol.selectedNodesChanged', [{ element: this.$el, selectedNodes: selectedNodes }]);
 764 |         },
 765 | 
 766 |         /**
 767 |          * Update selected items number (if visible)
 768 |          */
 769 |         _updateSelectedItemsNum: function () {
 770 |             var popup = $('#' + this.popupID);
 771 |             if (popup && popup.length > 0) {
 772 |                 var numSpan = popup.find('.sac-custom-numSpan-num');
 773 |                 var selectedNodes = this._getData_SelectedNodes();
 774 |                 var num = 0;
 775 |                 if (selectedNodes && selectedNodes.hasOwnProperty('selectedNodes')) {
 776 |                     num = (Array.isArray(selectedNodes.selectedNodes)) ? selectedNodes.selectedNodes.length : 0;
 777 |                 }
 778 |                 numSpan.html(num);
 779 |             }
 780 |         },
 781 | 
 782 |         /**
 783 |          * Update main button text
 784 |          */
 785 |         _updateMainButton: function () {
 786 |             var selNodesData = this._getData_SelectedNodes();
 787 |             var selectedNodes = (selNodesData.hasOwnProperty('selectedNodes')) ? selNodesData.selectedNodes : [];
 788 |             var mainBtnText = this._localize(this.opt.mainButton.defaultText);
 789 |             if (selectedNodes && Array.isArray(selectedNodes) && selectedNodes.length > 0) {
 790 |                 if (selectedNodes.length <= this.opt.mainButton.maxSelectedViewText) {
 791 |                     mainBtnText = selectedNodes.map(function (node) {
 792 |                         return node.text;
 793 |                     }).join(', ');
 794 |                 } else {
 795 |                     mainBtnText += ' (' + selectedNodes.length + ')';
 796 |                 }
 797 |                 if (this.opt.mainButton.showAllText === true && selNodesData.selectedAll === true) {
 798 |                     mainBtnText = this._localize(this.opt.mainButton.defaultAllText) + ' ' + mainBtnText;
 799 |                 }
 800 |             } else {
 801 |                 mainBtnText += ' (' + this._localize(this.opt.mainButton.defaultNoneText) + ')';
 802 |             }
 803 |             this.$el.html(mainBtnText);
 804 |         },
 805 | 
 806 |         /**
 807 |          * Select all nodes
 808 |          */
 809 |         _selectAll: function () {
 810 |             var nodes = this._getAllNodes();
 811 |             var popup = $('#' + this.popupID);
 812 |             if (popup && popup.length > 0 && nodes !== null) {
 813 |                 if (this.opt.multiSelect === true) {
 814 |                     nodes.not('.sac-node-disabled').addClass('sac-node-selected');
 815 |                 }
 816 |             }
 817 |         },
 818 | 
 819 |         /**
 820 |          * Select highlighted nodes
 821 |          */
 822 |         _selectHighlighted: function () {
 823 |             var nodes = this._getHighlightedNodes();
 824 |             var popup = $('#' + this.popupID);
 825 |             if (popup && popup.length > 0 && nodes !== null) {
 826 |                 if (this.opt.multiSelect === true) {
 827 |                     nodes.not('.sac-node-disabled').addClass('sac-node-selected');
 828 |                 }
 829 |             }
 830 |         },
 831 | 
 832 |         /**
 833 |          * Diselect all nodes
 834 |          */
 835 |         _diselectAll: function () {
 836 |             var nodes = this._getAllNodes();
 837 |             var popup = $('#' + this.popupID);
 838 |             if (popup && popup.length > 0 && nodes !== null) {
 839 |                 nodes.removeClass('sac-node-selected');
 840 |             }
 841 |         },
 842 | 
 843 |         /**
 844 |          * Invert selection
 845 |          */
 846 |         _invertSelection: function () {
 847 |             var nodes = this._getAllNodes();
 848 |             var popup = $('#' + this.popupID);
 849 |             if (popup && popup.length > 0) {
 850 |                 if (this.opt.multiSelect === true && nodes !== null) {
 851 |                     nodes.not('.sac-node-disabled').toggleClass('sac-node-selected');
 852 |                 } else {
 853 |                     console.warn('Unable to perform invertion due to multiSelect option set to false');
 854 |                 }
 855 |             }
 856 |         },
 857 | 
 858 |         /**
 859 |          * Enable all nodes
 860 |          */
 861 |         _enableAll: function () {
 862 |             var nodes = this._getAllNodes();
 863 |             var popup = $('#' + this.popupID);
 864 |             if (popup && popup.length > 0 && nodes !== null) {
 865 |                 nodes.removeClass('sac-node-disabled');
 866 |             }
 867 |         },
 868 | 
 869 |         /**
 870 |          * Disable all nodes
 871 |          */
 872 |         _disableAll: function () {
 873 |             var nodes = this._getAllNodes();
 874 |             var popup = $('#' + this.popupID);
 875 |             if (popup && popup.length > 0 && nodes !== null) {
 876 |                 nodes.addClass('sac-node-disabled');
 877 |             }
 878 |         },
 879 | 
 880 |         /**
 881 |          * Get all nodes
 882 |          */
 883 |         _getAllNodes: function () {
 884 |             var nodes = null;
 885 |             var popup = $('#' + this.popupID);
 886 |             if (popup && popup.length > 0) {
 887 |                 nodes = popup.find('.sac-ul').not('.sac-ul-top').children('li').find('.sac-node-name');
 888 |             }
 889 |             return nodes;
 890 |         },
 891 | 
 892 |         /**
 893 |          * Get highlighted nodes
 894 |          */
 895 |         _getHighlightedNodes: function () {
 896 |             var nodes = null;
 897 |             var popup = $('#' + this.popupID);
 898 |             if (popup && popup.length > 0) {
 899 |                 nodes = popup.find('.sac-ul').not('.sac-ul-top').children('li').filter('.sac-found-item').find('.sac-node-name');
 900 |             }
 901 |             return nodes;
 902 |         },
 903 | 
 904 |         /**
 905 |          * Close popup
 906 |          */
 907 |         _closePopup: function () {
 908 |             this.$el.trigger('searchareacontrol.popup.beforehide', [{ element: this.$el }]);
 909 |             this._togglePopup(false);
 910 |         },
 911 | 
 912 |         /**
 913 |          * Reset selected nodes (Set selection of nodes that were selected when the popup opened)
 914 |          */
 915 |         _resetSelection: function () {
 916 |             var selectedNodesOnPopupShow = this._getData_SelectedNodesOnPopupShow();
 917 |             this._diselectAll();
 918 |             var allSelected = selectedNodesOnPopupShow.selectedAll;
 919 |             var nodes = selectedNodesOnPopupShow.selectedNodes;
 920 |             if (allSelected === true && this.opt.multiSelect === true) {
 921 |                 this._selectAll();
 922 |             } else if (nodes.length > 0) {
 923 |                 var popup = $('#' + this.popupID);
 924 |                 for (var n in nodes) {
 925 |                     var thisNode = nodes[n];
 926 |                     popup.find('.sac-node-name').filter('[' + this.opt.selectionByAttribute + '="' + thisNode.attributes[this.opt.selectionByAttribute] + '"]').addClass('sac-node-selected');
 927 |                 }
 928 |             }
 929 |             this._applySelection();
 930 |         },
 931 | 
 932 |         /**
 933 |          * Localize key
 934 |          */
 935 |         _localize: function (key) {
 936 |             var locale = this.opt.locales;
 937 |             return (this.locales.hasOwnProperty(locale)) ? ((this.locales[locale].hasOwnProperty(key)) ? this.locales[locale][key] : key) : key;
 938 |         },
 939 | 
 940 |         // SEARCH AREA (end) ================================================================ //
 941 | 
 942 |         // PUBLIC METHODS (start) =========================================================== //
 943 | 
 944 |         /**
 945 |          * Get datasource
 946 |          */
 947 |         getData: function () {
 948 |             return this._getData_DataSource();
 949 |         },
 950 | 
 951 |         /**
 952 |          * Set selected nodes
 953 |          * @param {boolean} allSelected
 954 |          * @param {array} collection
 955 |          * @param {string} byAttribute Optional selection by attribute (If not provided, 'selectionByAttribute' option will be selected)
 956 |          */
 957 |         setSelectedNodes: function (allSelected, collection, byAttribute) {
 958 |             var popup = $('#' + this.popupID);
 959 |             var selectByAttribute = (byAttribute) ? byAttribute : this.opt.selectionByAttribute;
 960 |             var allNodes = this._getAllNodes();
 961 |             if (popup && popup.length > 0 && allNodes !== null) {
 962 |                 if (allSelected === true) {
 963 |                     allNodes.addClass('sac-node-selected');
 964 |                 } else if (collection && Array.isArray(collection) && collection.length > 0) {
 965 |                     // Reset selections
 966 |                     this._diselectAll();
 967 |                     for (var item in collection) {
 968 |                         allNodes
 969 |                             .filter('[' + selectByAttribute + '="' + collection[item] + '"]')
 970 |                             .addClass('sac-node-selected');
 971 |                     }
 972 |                 }
 973 |                 this._applySelection();
 974 |             }
 975 |         },
 976 | 
 977 |         /**
 978 |          * Set disabled nodes
 979 |          * @param {array} collection
 980 |          * @param {boolean} diselectDisabled Diselect nodes to be disabled (if they are selected)
 981 |          * @param {string} byAttribute Optional selection by attribute (If not provided, 'selectionByAttribute' option will be selected)
 982 |          */
 983 |         setDisabledNodes: function (collection, diselectDisabled, byAttribute) {
 984 |             var popup = $('#' + this.popupID);
 985 |             var selectByAttribute = (byAttribute) ? byAttribute : this.opt.selectionByAttribute;
 986 |             var allNodes = this._getAllNodes();
 987 |             if (popup && popup.length > 0 && allNodes !== null) {
 988 |                 if (collection && Array.isArray(collection) && collection.length > 0) {
 989 |                     // Enable all
 990 |                     this._enableAll();
 991 |                     for (var item in collection) {
 992 |                         var nodesToDisable = allNodes.filter('[' + selectByAttribute + '="' + collection[item] + '"]');
 993 |                         if (diselectDisabled === true) {
 994 |                             nodesToDisable.removeClass('sac-node-selected');
 995 |                         }
 996 |                         nodesToDisable.addClass('sac-node-disabled');
 997 |                     }
 998 |                 }
 999 |                 this._applySelection();
1000 |             }
1001 |         },
1002 | 
1003 |         /**
1004 |          * Enable all nodes
1005 |          */
1006 |         enableAllNodes: function () {
1007 |             this._enableAll();
1008 |         },
1009 | 
1010 |         /**
1011 |          * Disable all nodes
1012 |          */
1013 |         disableAllNodes: function () {
1014 |             this._disableAll();
1015 |         },
1016 | 
1017 |         /**
1018 |          * Clear selected nodes
1019 |          */
1020 |         clearSelection: function () {
1021 |             this._diselectAll();
1022 |             this._applySelection();
1023 |         },
1024 | 
1025 |         /**
1026 |          * Get stored selected nodes
1027 |          */
1028 |         getSelectedNodes: function () {
1029 |             return this._getData_SelectedNodes();
1030 |         },
1031 | 
1032 |         /**
1033 |          * Get an array of specific attribute values of the selected nodes
1034 |          */
1035 |         getSelectedByAttribute: function (attributeName) {
1036 |             var $that = this;
1037 |             return this._getData_SelectedNodes().selectedNodes.map(function (node) {
1038 |                 var attrSelector = (attributeName) ? attributeName : $that.opt.selectionByAttribute;
1039 |                 return node.attributes[attrSelector];
1040 |             });
1041 |         },
1042 | 
1043 |         /**
1044 |          * Get disabled state of main button
1045 |          */
1046 |         getDisabled: function () {
1047 |             return this.$el.is(':disabled');
1048 |         },
1049 | 
1050 |         /**
1051 |          * Toggle main button disabled state
1052 |          */
1053 |         setDisabled: function (disable) {
1054 |             this.$el.prop('disabled', disable);
1055 |         },
1056 | 
1057 |         /**
1058 |          * Return popup element if exists
1059 |          */
1060 |         getPopup: function () {
1061 |             var popup = $('#' + this.popupID);
1062 |             return (popup && popup.length > 0) ? popup : null;
1063 |         },
1064 | 
1065 |         /**
1066 |          * Update datasource (options and memory)
1067 |          */
1068 |         updateDatasource: function (data) {
1069 |             this.opt.data = data;
1070 |             this._setData_DataSource(data);
1071 |             var popup = $('#' + this.popupID);
1072 |             if (popup && popup.length > 0) {
1073 |                 popup.empty();
1074 |                 this.$el.trigger('searchareacontrol.beforeinitsearcharea', [{ element: this.$el }]);
1075 |                 this._initSearchArea();
1076 |             }
1077 |         },
1078 | 
1079 |         /**
1080 |          * Set new locale and re-init plugin
1081 |          */
1082 |         setLocale: function (locale) {
1083 |             if (locale && typeof locale === 'string' && locale.length > 0) {
1084 |                 this.destroy();
1085 |                 this.opt.locales = locale;
1086 |                 this.init();
1087 |             }
1088 |         },
1089 | 
1090 |         /**
1091 |          * Destroy the plugin
1092 |          */
1093 |         destroy: function () {
1094 |             // Remove button text
1095 |             this.$el.empty();
1096 |             // Remove stored data
1097 |             this.$el.removeData().removeClass(this.rootClassName);
1098 |             // Remove popup
1099 |             var popup = $('#' + this.popupID);
1100 |             if (popup && popup.length > 0) {
1101 |                 popup.closest('.sac-popup-overlay').remove();
1102 |             }
1103 |         }
1104 | 
1105 |         // PUBLIC METHODS (end) ============================================================= //
1106 | 
1107 |     }
1108 | 
1109 |     $.fn[pluginName] = function (options) {
1110 |         var args = arguments;
1111 |         if (options === undefined || typeof options === 'object') {
1112 |             // New plugin instance with chainability
1113 |             return this.each(function () {
1114 |                 if (!$.data(this, 'plugin_' + pluginName)) {
1115 |                     $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
1116 |                 }
1117 |             });
1118 |         } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
1119 |             if ((Array.prototype.slice.call(args, 1).length == 0 && $.inArray(options, $.fn[pluginName].methods) != -1) || $.inArray(options, $.fn[pluginName].getters) != -1) {
1120 |                 // Return method result (no chainability)
1121 |                 var instance = $.data(this[0], 'plugin_' + pluginName);
1122 |                 return instance[options].apply(instance, Array.prototype.slice.call(args, 1));
1123 |             } else {
1124 |                 // Return element (chainability)
1125 |                 return this.each(function () {
1126 |                     var instance = $.data(this, 'plugin_' + pluginName);
1127 |                     if (instance instanceof Plugin && typeof instance[options] === 'function') {
1128 |                         instance[options].apply(instance, Array.prototype.slice.call(args, 1));
1129 |                     }
1130 |                 });
1131 |             }
1132 |         }
1133 |     }
1134 | 
1135 |     /**
1136 |      * Set array of accepted public methods
1137 |      */
1138 |     $.fn[pluginName].methods = [
1139 |         'getData',
1140 |         'setSelectedNodes',
1141 |         'clearSelection',
1142 |         'setDisabled',
1143 |         'updateDatasource',
1144 |         'setDisabledNodes',
1145 |         'enableAllNodes',
1146 |         'disableAllNodes',
1147 |         'setLocale',
1148 |         'destroy'
1149 |     ];
1150 | 
1151 |     /**
1152 |      * Public methods (getters)
1153 |      */
1154 |     $.fn[pluginName].getters = [
1155 |         'getSelectedNodes',
1156 |         'getDisabled',
1157 |         'getSelectedByAttribute',
1158 |         'getPopup'
1159 |     ];
1160 | 
1161 |     $.fn[pluginName].locales = {
1162 |         en: {
1163 |             'Search': 'Search',
1164 |             'Selected items': 'Selected items',
1165 |             'Starts with': 'Starts with',
1166 |             'Exists in': 'Exists in',
1167 |             'Regular expression': 'Regular expression',
1168 |             'Items': 'Items',
1169 |             'None': 'None',
1170 |             'All': 'All',
1171 |             'Select all': 'Select all',
1172 |             'Diselect all': 'Diselect all',
1173 |             'Invert selection': 'Invert selection',
1174 |             'Close': 'Close',
1175 |             'Cancel': 'Cancel',
1176 |             'Select highlighted': 'Select highlighted'
1177 |         },
1178 |         el: {
1179 |             'Search': 'Αναζήτηση',
1180 |             'Selected items': 'Επιλεγμένα αντικείμενα',
1181 |             'Starts with': 'Ξεκινά με',
1182 |             'Exists in': 'Περιέχει',
1183 |             'Regular expression': 'Κανονική έκφραση',
1184 |             'Items': 'Αντικείμενα',
1185 |             'None': 'Κανένα',
1186 |             'All': 'Όλα',
1187 |             'Select all': 'Επιλογή όλων',
1188 |             'Diselect all': 'Αποεπιλογή όλων',
1189 |             'Invert selection': 'Αντιστροφή επιλογής',
1190 |             'Close': 'Κλείσιμο',
1191 |             'Cancel': 'Άκυρο',
1192 |             'Select highlighted': 'Επιλογή επισημασμένων'
1193 |         },
1194 |         ptbr: {
1195 |             'Search': 'Busca',
1196 |             'Selected items': 'Itens Selecionados',
1197 |             'Starts with': 'Começa com',
1198 |             'Exists in': 'Existe em',
1199 |             'Regular expression': 'Expressão regular',
1200 |             'Items': 'Itens',
1201 |             'None': 'Nenhum',
1202 |             'All': 'Tudo',
1203 |             'Select all': 'Selecionar tudo',
1204 |             'Diselect all': 'Deselecionar Tudo',
1205 |             'Invert selection': 'Inverter Seleção',
1206 |             'Close': 'Fechar',
1207 |             'Cancel': 'Cancelar',
1208 |             'Select highlighted': 'Selecionar destacado'
1209 |         },
1210 |         ru: {
1211 |             'Search': 'Поиск',
1212 |             'Selected items': 'Выбранные пункты',
1213 |             'Starts with': 'Начинается с',
1214 |             'Exists in': 'Содержится в',
1215 |             'Regular expression': 'Регулярное выражение',
1216 |             'Items': 'Пункты',
1217 |             'None': 'Не выбрано',
1218 |             'All': 'Все',
1219 |             'Select all': 'Выбрать все',
1220 |             'Diselect all': 'Снять выбор со всех',
1221 |             'Invert selection': 'Инвертировать выбор',
1222 |             'Close': 'Закрыть',
1223 |             'Cancel': 'Отмена',
1224 |             'Select highlighted': 'Выбрать выделенные'
1225 |         }
1226 |     };
1227 | 
1228 |     $.fn[pluginName].defaults = {
1229 |         modalHeader: {
1230 |             text: 'Search',
1231 |             className: '',
1232 |             visible: true
1233 |         },
1234 |         data: [],
1235 |         multiSelect: true,
1236 |         collapseNodes: false,
1237 |         allNodesExpanded: true,
1238 |         columns: 2,
1239 |         selectionByAttribute: 'data-id',
1240 |         allNodesSelected: false,
1241 |         selectedNodes: [],
1242 |         locales: 'en',
1243 |         localeData: null,
1244 |         searchBox: {
1245 |             enabled: true,
1246 |             minCharactersSearch: 2,
1247 |             searchBoxClass: '',
1248 |             searchBoxPlaceholder: '',
1249 |             showSelectedItemsBox: true,
1250 |             selectedItemsLabelVisible: true,
1251 |             selectedItemsLabelText: 'Selected items',
1252 |             hideNotFound: true,
1253 |             searchType: {
1254 |                 startsWith: {
1255 |                     text: 'Starts with',
1256 |                     selected: false
1257 |                 },
1258 |                 existsIn: {
1259 |                     text: 'Exists in',
1260 |                     selected: true
1261 |                 },
1262 |                 regExp: {
1263 |                     text: 'Regular expression',
1264 |                     selected: false
1265 |                 }
1266 |             }
1267 |         },
1268 |         popupDimensions: {
1269 |             '768': {
1270 |                 width: '95%',
1271 |                 left: '2.5%',
1272 |                 marginLeft: '0'
1273 |             },
1274 |             'max': {
1275 |                 width: '700px',
1276 |                 left: '50%',
1277 |                 marginLeft: '-350px'
1278 |             }
1279 |         },
1280 |         mainButton: {
1281 |             defaultText: 'Items',
1282 |             className: '',
1283 |             defaultNoneText: 'None',
1284 |             defaultAllText: 'All',
1285 |             showAllText: true,
1286 |             maxSelectedViewText: 1
1287 |         },
1288 |         popupButtons: {
1289 |             selectAll: {
1290 |                 text: 'Select all',
1291 |                 className: 'btn btn-success',
1292 |                 visible: true,
1293 |                 callback: null,
1294 |                 index: 0
1295 |             },
1296 |             diselectAll: {
1297 |                 text: 'Diselect all',
1298 |                 className: 'btn btn-default',
1299 |                 visible: true,
1300 |                 callback: null,
1301 |                 index: 1
1302 |             },
1303 |             invertSelection: {
1304 |                 text: 'Invert selection',
1305 |                 className: 'btn btn-default',
1306 |                 visible: true,
1307 |                 callback: null,
1308 |                 index: 2
1309 |             },
1310 |             close: {
1311 |                 text: 'Close',
1312 |                 className: 'btn btn-default',
1313 |                 visible: true,
1314 |                 callback: null,
1315 |                 index: 3
1316 |             },
1317 |             cancel: {
1318 |                 text: 'Cancel',
1319 |                 className: 'btn btn-default',
1320 |                 visible: false,
1321 |                 callback: null,
1322 |                 index: 4
1323 |             },
1324 |             selectHighlighted: {
1325 |                 text: 'Select highlighted',
1326 |                 className: 'btn btn-default',
1327 |                 visible: false,
1328 |                 callback: null,
1329 |                 index: 5
1330 |             }
1331 |         }
1332 |     }
1333 | 
1334 | })(jQuery, window, document);
1335 | 


--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html class="no-js" lang="">
 3 |     <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 |         <link href="favicon.ico" rel="icon" type="image/x-icon" />
 7 |         <title>SearchAreaControl - jQuery plugin</title>
 8 |         <meta name="description" content="">
 9 |         <meta name="viewport" content="width=device-width, initial-scale=1">
10 |         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
11 |         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
12 |         <link rel="stylesheet" href="css/style.css">
13 |         <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
14 |         <link rel="stylesheet" href="searchAreaControl/css/sac-style.css" />
15 | 
16 |     </head>
17 |     <body>
18 | 
19 |         <div class="container-fluid" style="height:2000px;">
20 | 
21 |             <div class="row">
22 |                 <div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 col-xs-12">
23 |                     <div class="page-header">                      
24 |                         <h1><img id="mainLogo" src="img/logo_70.png" /><span id="mainTitleText" class="marginLeft-md">SearchAreaControl</span> <small id="mainTitleSecondaryText">jQuery plugin</small><a id="gitHub" href="https://github.com/kapantzak/SearchAreaControl" class="btn btn-primary pull-right"><i class="fa fa-github"></i><span class="marginLeft-sm">Github</span></a></h1>
25 |                     </div>
26 |                     <p>Test page</p>                    
27 | 
28 |                     <p>
29 |                         <button id="btn1" type="button"></button>
30 |                         <button id="getSelectedByAttribute_btn1" class="btn btn-default" type="button">Get selected</button>
31 |                         <button id="destroy_btn1" class="btn btn-danger" type="button">Destroy</button>
32 |                         <button id="updateDatasource_btn1" class="btn btn-default" type="button">Update datasource</button>
33 |                         <button id="getPopup" class="btn btn-default" type="button">Get popup (console)</button>
34 |                         <button id="setDisbaledNodes" class="btn btn-default" type="button">Set disbaled nodes</button>
35 |                         <button id="enableAll" class="btn btn-default" type="button">Enable all nodes</button>
36 |                     </p>
37 | 
38 |                     <p>
39 |                         <button id="btn2" class="btn btn-success" type="button"></button>
40 |                         <button id="getSelectedByAttribute_btn2" class="btn btn-default" type="button">Get selected</button>
41 |                         <button id="destroy_btn2" class="btn btn-danger" type="button">Destroy</button>
42 |                         <button id="setSelectedNodes2" class="btn btn-default" type="button">Set selected nodes</button>
43 |                         <button id="setLocale" class="btn btn-default" type="button">Set locale (el)</button>
44 |                     </p>
45 | 
46 |                     <p>
47 |                         <button id="btnModal" class="btn btn-default" type="button">Bootstrap modal</button>
48 |                     </p>
49 | 
50 |                     <!-- MODAL -->
51 |                     <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
52 |                         <div class="modal-dialog" role="document">
53 |                             <div class="modal-content">
54 |                             <div class="modal-header">
55 |                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
56 |                                 <h4 class="modal-title" id="myModalLabel">Modal title</h4>
57 |                             </div>
58 |                             <div class="modal-body">
59 |                                 <button id="btn3" class="btn btn-success" type="button"></button>
60 |                             </div>
61 |                             <div class="modal-footer">
62 |                                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>                                
63 |                             </div>
64 |                             </div>
65 |                         </div>
66 |                     </div>
67 | 
68 |                 </div>       
69 |             </div>  
70 | 
71 |             <div id="footer" class="row">
72 |                 <div class="container-fluid">
73 |                     <img id="kapa_logo" src="img/logo_sm.png" alt="logo">
74 |                     <i>Developed by <a href="mailto:kapantzak@gmail.com" title="kapantzak@gmail.com">John Kapantzakis</a> (c) 2017</i><br>
75 |                     <i>Released under the <a href="LICENSE.txt" target="_blank">MIT License</a></i>			
76 |                 </div>
77 |             </div>
78 | 
79 |         </div>     
80 | 
81 |         <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
82 |         <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
83 |         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
84 |         <script src="searchAreaControl/searchAreaControl.js"></script>
85 |         <script src="js/main.js"></script>
86 |     </body>
87 | </html>
88 | 


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