99define ( [
1010 'jquery' ,
1111 'jquery/ui' ,
12- 'jquery/jstree/jquery.jstree'
12+ 'jquery/jstree/jquery.jstree' ,
13+ 'mage/translate'
1314] , function ( $ ) {
1415 'use strict' ;
1516
17+ // jscs:disable requireCamelCaseOrUpperCaseIdentifiers
1618 $ . widget ( 'mage.rolesTree' , {
1719 options : {
1820 treeInitData : { } ,
@@ -26,9 +28,7 @@ define([
2628 this . element . jstree ( {
2729 plugins : [ 'checkbox' ] ,
2830 checkbox : {
29- // jscs:disable requireCamelCaseOrUpperCaseIdentifiers
3031 three_state : false ,
31- // jscs:enable requireCamelCaseOrUpperCaseIdentifiers
3232 visible : this . options . checkboxVisible ,
3333 cascade : 'undetermined'
3434 } ,
@@ -40,13 +40,66 @@ define([
4040 }
4141 } ) ;
4242 this . _bind ( ) ;
43+ this . _createButtons ( ) ;
44+ } ,
45+
46+ _createButtons : function ( ) {
47+ const $tree = $ . jstree . reference ( this . element ) ,
48+ collapseAllButton = document . createElement ( 'button' ) ,
49+ expandAllButton = document . createElement ( 'button' ) ,
50+ expandUsedButton = document . createElement ( 'button' ) ,
51+ parent = this . element [ 0 ] ,
52+ ul = this . element . find ( 'ul' ) [ 0 ] ;
53+
54+ collapseAllButton . innerText = $ . mage . __ ( 'Collapse all' ) ;
55+ collapseAllButton . addEventListener ( 'click' , function ( ) {
56+ $tree . close_all ( ) ;
57+ } ) ;
58+
59+ expandAllButton . innerText = $ . mage . __ ( 'Expand all' ) ;
60+ expandAllButton . addEventListener ( 'click' , function ( ) {
61+ $tree . open_all ( ) ;
62+ } ) ;
63+
64+ expandUsedButton . innerText = $ . mage . __ ( 'Expand selected' ) ;
65+ expandUsedButton . addEventListener ( 'click' , function ( ) {
66+ const hasOpened = [ ] ;
67+
68+ $tree . get_checked ( true ) . forEach ( function ( node ) {
69+ $tree . open_node ( node ) ;
70+ hasOpened . push ( node . id ) ;
71+ for ( let i = 0 ; i < node . parents . length - 1 ; i ++ ) {
72+ const id = node . parents [ i ] ;
73+
74+ if ( ! hasOpened . includes ( id ) ) {
75+ $tree . open_node ( $tree . get_node ( id ) ) ;
76+ hasOpened . push ( id ) ;
77+ }
78+ }
79+ } ) ;
80+ } ) ;
81+
82+ this . buttons = [
83+ collapseAllButton ,
84+ expandAllButton ,
85+ expandUsedButton
86+ ] ;
87+
88+ this . buttons . forEach ( function ( button ) {
89+ button . type = 'button' ;
90+ parent . insertBefore ( button , ul ) ;
91+ } ) ;
4392 } ,
4493
4594 /**
4695 * @private
4796 */
4897 _destroy : function ( ) {
4998 this . element . jstree ( 'destroy' ) ;
99+
100+ this . buttons . forEach ( function ( element ) {
101+ element . parentNode . removeChild ( element ) ;
102+ } ) ;
50103 } ,
51104
52105 /**
@@ -64,7 +117,6 @@ define([
64117 * @private
65118 */
66119 _selectChildNodes : function ( event , selected ) {
67- // jscs:disable requireCamelCaseOrUpperCaseIdentifiers
68120 selected . instance . open_node ( selected . node ) ;
69121 selected . node . children . each ( function ( id ) {
70122 var selector = '[id="' + id + '"]' ;
@@ -73,7 +125,6 @@ define([
73125 selected . instance . get_node ( $ ( selector ) , false )
74126 ) ;
75127 } ) ;
76- // jscs:enable requireCamelCaseOrUpperCaseIdentifiers
77128 } ,
78129
79130 /**
0 commit comments