f86d1a8bead965198c9c7047b178245f9d41f8aa
[Packages/TYPO3.CMS.git] / typo3 / sysext / backend / Resources / Public / JavaScript / FormEngine / Element / TreeToolbar.js
1 /*
2 * This file is part of the TYPO3 CMS project.
3 *
4 * It is free software; you can redistribute it and/or modify it under
5 * the terms of the GNU General Public License, either version 2
6 * of the License, or any later version.
7 *
8 * For the full copyright and license information, please read the
9 * LICENSE.txt file that was distributed with this source code.
10 *
11 * The TYPO3 project - inspiring people to share!
12 */
13
14 /**
15 * Module: TYPO3/CMS/Backend/FormEngine/Element/TreeToolbar
16 */
17 define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/Backend/Tooltip', 'TYPO3/CMS/Backend/FormEngine/Element/SvgTree'], function($, Icons) {
18 'use strict';
19
20 /**
21 * TreeToolbar class
22 *
23 * @constructor
24 * @exports TYPO3/CMS/Backend/FormEngine/Element/TreeToolbar
25 */
26 var TreeToolbar = function () {
27 this.settings = {
28 toolbarSelector: '.tree-toolbar',
29 collapseAllBtn: '.collapse-all-btn',
30 expandAllBtn: '.expand-all-btn',
31 searchInput: '.search-input',
32 toggleHideUnchecked: '.hide-unchecked-btn'
33 };
34
35 /**
36 * jQuery object wrapping the SvgTree
37 *
38 * @type {jQuery}
39 */
40 this.treeWrapper = null;
41
42 /**
43 * SvgTree instance
44 *
45 * @type {SvgTree}
46 */
47 this.tree = null;
48
49 /**
50 * State of the hide unchecked toggle button
51 *
52 * @type {boolean}
53 * @private
54 */
55 this._hideUncheckedState = false;
56
57 /**
58 * Toolbar template
59 *
60 * @type {jQuery}
61 */
62 this.template = $(
63 '<div class="tree-toolbar btn-toolbar">'+
64 '<div class="input-group">' +
65 '<span class="input-group-addon input-group-icon filter"></span>' +
66 '<input type="text" class="form-control search-input" placeholder="' + TYPO3.lang['tcatree.findItem'] + '">' +
67 '</div>' +
68 '<div class="btn-group">' +
69 '<button type="button" data-toggle="tooltip" class="btn btn-default expand-all-btn" title="' + TYPO3.lang['tcatree.expandAll'] + '"></button>' +
70 '<button type="button" data-toggle="tooltip" class="btn btn-default collapse-all-btn" title="' + TYPO3.lang['tcatree.collapseAll'] + '"></button>' +
71 '<button type="button" data-toggle="tooltip" class="btn btn-default hide-unchecked-btn" title="' + TYPO3.lang['tcatree.toggleHideUnchecked'] + '"></button>' +
72 '</div>' +
73 '</div>'
74 )
75 };
76
77 /**
78 * Toolbar initialization
79 *
80 * @param {String} treeSelector
81 * @param {Object} settings
82 */
83 TreeToolbar.prototype.initialize = function (treeSelector, settings) {
84 var me = this;
85 this.treeWrapper = $(treeSelector);
86 if (!this.treeWrapper.data('svgtree-initialized') || typeof this.treeWrapper.data('svgtree') !== 'object') {
87 //both toolbar and tree are loaded independently through require js, so we don't know which is loaded first
88 //in case of toolbar being loaded first, we wait for an event from svgTree
89 this.treeWrapper.on('svgTree.initialized', this.render.bind(me));
90 return;
91 }
92 $.extend(this.settings, settings);
93 this.render();
94 };
95
96 /**
97 * Renders toolbar
98 */
99 TreeToolbar.prototype.render = function () {
100 var me = this;
101 this.tree = this.treeWrapper.data('svgtree');
102 var $toolbar = this.template.clone().insertBefore(this.treeWrapper);
103
104 Icons.getIcon('actions-filter', Icons.sizes.small).done(function(icon) {
105 $toolbar.find('.filter').append(icon);
106 });
107 Icons.getIcon('apps-pagetree-category-expand-all', Icons.sizes.small).done(function(icon) {
108 $toolbar.find('.expand-all-btn').append(icon);
109 });
110 Icons.getIcon('apps-pagetree-category-collapse-all', Icons.sizes.small).done(function(icon) {
111 $toolbar.find('.collapse-all-btn').append(icon);
112 });
113 Icons.getIcon('apps-pagetree-category-toggle-hide-checked', Icons.sizes.small).done(function(icon) {
114 $toolbar.find('.hide-unchecked-btn').append(icon);
115 });
116
117 $toolbar.find(this.settings.collapseAllBtn).on('click', this.collapseAll.bind(this));
118 $toolbar.find(this.settings.expandAllBtn).on('click', this.expandAll.bind(this));
119 $toolbar.find(this.settings.searchInput).on('input', function () {
120 me.search.call(me, this);
121 });
122 $toolbar.find(this.settings.toggleHideUnchecked).on('click', this.toggleHideUnchecked.bind(this));
123 $toolbar.find('[data-toggle="tooltip"]').tooltip();
124 };
125
126 /**
127 * Collapse children of root node
128 */
129 TreeToolbar.prototype.collapseAll = function () {
130 this.tree.collapseAll();
131 };
132
133 /**
134 * Expand all nodes
135 */
136 TreeToolbar.prototype.expandAll = function () {
137 this.tree.expandAll();
138 };
139
140 /**
141 * Find node by name
142 *
143 * @param {HTMLElement} input
144 */
145 TreeToolbar.prototype.search = function (input) {
146 var me = this,
147 name = $(input).val();
148
149 this.tree.nodes[0].open = false;
150 this.tree.nodes.forEach(function (node) {
151 var regex = new RegExp(name, 'i');
152 if (regex.test(node.name)) {
153 me.showParents(node);
154 node.open = true;
155 node.hidden = false;
156 } else {
157 node.hidden = true;
158 node.open = false;
159 }
160 });
161 this.tree.prepareDataForVisibleNodes();
162 this.tree.update();
163 };
164
165 /**
166 * Show only checked items
167 *
168 * @param {HTMLElement} input
169 */
170 TreeToolbar.prototype.toggleHideUnchecked = function (input) {
171 var me = this;
172
173 this._hideUncheckedState = !this._hideUncheckedState;
174
175 if (this._hideUncheckedState) {
176 this.tree.nodes.forEach(function (node) {
177 if (node.checked) {
178 me.showParents(node);
179 node.open = true;
180 node.hidden = false;
181 } else {
182 node.hidden = true;
183 node.open = false;
184 }
185 });
186 } else {
187 this.tree.nodes.forEach(function (node) {
188 node.hidden = false;
189 });
190 }
191 this.tree.prepareDataForVisibleNodes();
192 this.tree.update();
193 };
194
195 /**
196 * Finds and show all parents of node
197 *
198 * @param {Node} node
199 * @returns {Boolean}
200 */
201 TreeToolbar.prototype.showParents = function (node) {
202 if (node.parents.length === 0) {
203 return true;
204 }
205
206 var parent = this.tree.nodes[node.parents[0]];
207 parent.hidden = false;
208 //expand parent node
209 parent.open = true;
210 this.showParents(parent);
211 };
212
213 return TreeToolbar;
214 });