#49 | Tree AutoExpand

app/sc_ext/Application.ts

@@ -28,6 +28,7 @@ if (SitecoreExtensions.Context.IsValid()) {
         var toggleRibbon = new Modules.ToggleRibbon.ToggleRibbonModule('Toggle Ribbon', 'Toggle Ribbon in Experience Editor', wrapper.getModuleOptions('Toggle Ribbon'));
         var databaseSelector = new Modules.DatabaseSelector.DatabaseSelectorModule('Database Selector', 'Change your context database', wrapper.getModuleOptions('Database Selector'));
         var goToDatasource = new Modules.GoToDatasource.GoToDatasourceModule('Go To Datasource', 'Navigate to a datasource item.', wrapper.getModuleOptions('Go To Datasource'));
+        var treeAutoExpand = new Modules.TreeAutoExpand.TreeAutoExpandModule('Tree Auto Expand', 'Automatically expand tree deeply if there is only one child.', wrapper.getModuleOptions('Tree Auto Expand'));
 
 
         scExtManager.addModule(sectionSwitchesModule);
@@ -42,6 +43,7 @@ if (SitecoreExtensions.Context.IsValid()) {
         scExtManager.addModule(toggleRibbon);
         scExtManager.addModule(databaseSelector);
         scExtManager.addModule(goToDatasource);
+        scExtManager.addModule(treeAutoExpand);
 
         scExtManager.initModules();
 

app/sc_ext/_all.ts

@@ -42,6 +42,7 @@
 /// <reference path='modules/toggleRibbon/_all.ts'/>
 /// <reference path='modules/treelistField/_all.ts'/>
 /// <reference path='modules/treeScope/_all.ts'/>
+/// <reference path='modules/treeAutoExpand/_all.ts'/>
 
 
 // Status

app/sc_ext/modules/treeAutoExpand/TreeAutoExpandModule.ts

@@ -0,0 +1,50 @@
+/// <reference path='../../_all.ts'/>
+
+namespace SitecoreExtensions.Modules.TreeAutoExpand {
+    export class TreeAutoExpandModule extends ModuleBase implements ISitecoreExtensionsModule {
+
+        constructor(name: string, description: string, rawOptions: Options.ModuleOptionsBase) {
+            super(name, description, rawOptions);
+        }
+
+        canExecute(): boolean {
+            return this.options.enabled && Context.Location() == Enums.Location.ContentEditor;
+        }
+
+        initialize(): void {
+            this.addTreeNodeHandlers('scContentTree');
+        }
+
+        addTreeNodeHandlers(className: string): void {
+            var nodes = document.getElementsByClassName(className);
+            for (var i = 0; i < nodes.length; i++) {
+                nodes[i].addEventListener('click', (evt: MouseEvent) => {
+                    setTimeout(() => {
+                        this.expandSubTree(evt);
+                    }, 10);
+                });
+            }
+        }
+
+        expandSubTree(evt: MouseEvent): void {
+            let glyphId = evt.srcElement.id;
+            let icon = new TreeNodeGlyph(glyphId);
+
+            if (icon.isExpandable()) {
+                HTMLHelpers.postponeAction(_ => { return this.predicate(glyphId); }, _ => { this.action(glyphId); }, 100, 10);
+            }
+        }
+
+        private predicate(glyphId: string): boolean {
+            return new TreeNodeGlyph(glyphId).isExpanded();
+        }
+
+        private action(glyphId: string): void {
+            let icon = new TreeNodeGlyph(glyphId);
+            let childNodeds = icon.getChildren();
+            if (childNodeds.length == 1) {
+                (childNodeds[0].querySelector(".scContentTreeNodeGlyph") as HTMLImageElement).click();
+            }
+        }
+    }
+}

app/sc_ext/modules/treeAutoExpand/TreeNodeGlyph.ts

@@ -0,0 +1,31 @@
+/// <reference path='../../_all.ts'/>
+
+namespace SitecoreExtensions.Modules.TreeAutoExpand {
+    export class TreeNodeGlyph {
+        private iconExpanded: string = "/sitecore/shell/themes/standard/images/treemenu_expanded.png";
+        private iconNonExpand: string = "/sitecore/shell/themes/standard/images/noexpand15x15.gif";
+        private iconCollapsed: string = "sitecore/shell/themes/standard/images/treemenu_collapsed.png";
+        private treeNodeGlyphElement: HTMLImageElement;
+
+        constructor(elementId: string) {
+            this.treeNodeGlyphElement = document.getElementById(elementId) as HTMLImageElement;
+        }
+
+        isExpanded(): boolean {
+            let isExpanded = this.treeNodeGlyphElement.src.endsWith(this.iconExpanded);
+            return isExpanded;
+        }
+
+        isExpandable(): boolean {
+            if (this.treeNodeGlyphElement && this.treeNodeGlyphElement.src) {
+                return !this.treeNodeGlyphElement.src.endsWith(this.iconNonExpand) && !this.treeNodeGlyphElement.src.endsWith(this.iconCollapsed);
+            } else {
+                return false;
+            }
+        }
+
+        getChildren() {
+            return this.treeNodeGlyphElement.parentElement.querySelectorAll(".scContentTreeNode");
+        }
+    }
+}

app/sc_ext/modules/treeAutoExpand/_all.ts

@@ -0,0 +1,4 @@
+/// <reference path='../../_all.ts'/>
+
+/// <reference path='TreeAutoExpandModule.ts'/>
+/// <reference path='TreeNodeGlyph.ts'/>