Add openFolderWhenInnerSelected

Author: pkempenaers

src/app/component/dropdownTree.controller.js

@@ -58,6 +58,7 @@
 ],
 appendToElement: this.$element.children(),
 foldersOpen: true,
+openFolderWhenInnerSelected: false,
 };
 
 this.settings = angular.extend({}, this.defaultSettings);

src/app/component/dropdownTree.service.js

@@ -11,8 +11,16 @@ export default class DropdownTreeService {
 angular.isArray(option[settings.childrenProperty]);
 }
 
-shouldFolderBeOpen(folder, settings) {
-return settings.foldersOpen;
+shouldFolderBeOpen(folder, settings, selection) {
+// always open when foldersOpen is true
+if (settings.foldersOpen) {
+return settings.foldersOpen;
+}
+// always closed when not open when innerselected
+if (!settings.openFolderWhenInnerSelected) {
+return false;
+}
+return this.hasInnerSelection(folder, settings, selection);
 }
 
 getChildOptions(option, settings) {
@@ -36,6 +44,18 @@ export default class DropdownTreeService {
 return true;
 }
 
+hasInnerSelection(option, settings, selection) {
+if (this.isFolder(option, settings)) {
+return this.getChildOptions(option, settings).some((childOption) => {
+if (selection.indexOf(childOption) >= 0) {
+return true;
+}
+return this.hasInnerSelection(childOption, settings, selection);
+});
+}
+return false;
+}
+
 getSelection(options, settings, searchText) {
 let selection = [];
 

src/app/component/option-row/option-row.controller.js

@@ -6,7 +6,8 @@
 
 this.dropdownTreeService = dropdownTreeService;
 if (this.isFolder()) {
-this.isOpen = this.dropdownTreeService.shouldFolderBeOpen(this.option, this.settings);
+this.isOpen = this.dropdownTreeService
+.shouldFolderBeOpen(this.option, this.settings, this.selectedOptions);
 }
 }
 

src/app/main/main.template.html

@@ -269,6 +269,14 @@ <h3>Settings</h3>
 Defines if all folders should be open by default.
 </td>
 </tr>
+<tr>
+<td>openFolderWhenInnerSelected</td>
+<td>false</td>
+<td>boolean</td>
+<td>
+Only applicable when foldersOpen set to false. Will still open a folder when a child is selected.
+</td>
+</tr>
 </tbody>
 </table>
 </div>