Change hostTarget of ContextualMenu to toggle on click (OfficeDev#209)

* Fix context menu toggle on hostTarget click * Change _toggleMenu method in ContextualMenu * Fix contextual menu toggle on hostTarget * Small change to dropdown
FelixSchwarzmeier · Nov 24, 2016 · 4e078a7 · 4e078a7
1 parent 2360030
commit 4e078a7
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/src/components/ContextualMenu/ContextualMenu.ts b/src/components/ContextualMenu/ContextualMenu.ts
@@ -15,6 +15,7 @@ namespace fabric {
     private _hostTarget: Element;
     private _position: string;
     private _host: ContextualHost;
+    private _isOpen: boolean;
 
     constructor(
         container: Element,
@@ -24,6 +25,7 @@ namespace fabric {
       this._container = container;
       this._hostTarget = hostTarget;
       this._position = position ? position : MODAL_POSITION;
+      this._isOpen = false;
       this._setOpener(hostTarget);
       this._init();
     }
@@ -34,6 +36,15 @@ namespace fabric {
 
     private _init(): void {
       this._container.addEventListener("click", this._onContextualMenuClick.bind(this), true);
+      document.addEventListener("click", this._onDocumentClick.bind(this), false);
+    }
+
+    private _onDocumentClick(event: Event): void {
+      const target: HTMLElement = <HTMLElement>event.target;
+      const classList: DOMTokenList = target.classList;
+      if (!this._hostTarget.contains(target) && !classList.contains("ms-ContextualMenu-link")) {
+        this._isOpen = false;
+      }
     }
 
     private _onContextualMenuClick(event: Event): void {
@@ -46,6 +57,7 @@ namespace fabric {
           this._singleSelect(target);
           if (!target.parentElement.classList.contains("ms-ContextualMenu-item--hasMenu")) {
             this._host.disposeModal();
+            this._isOpen = false;
           }
         }
       }
@@ -68,10 +80,15 @@ namespace fabric {
       target.classList.add("is-selected");
     }
 
+    private _toggleMenu(event): void {
+      (!this._isOpen) ? this._openContextMenu(event) : this._host.disposeModal();
+      this._isOpen = !this._isOpen;
+    }
+
     private _setOpener(hostTarget: Element): void {
       hostTarget.addEventListener("click", (event) => {
           event.preventDefault();
-          this._openContextMenu(event);
+          this._toggleMenu(event);
         }
       );
     }

diff --git a/src/components/Dropdown/Dropdown.ts b/src/components/Dropdown/Dropdown.ts
@@ -121,10 +121,11 @@ namespace fabric {
       this._dropdownLabelHelper.textContent = origText;
       if (this._dropdownLabelHelper.offsetHeight > this._newDropdownLabel.offsetHeight) {
         let i = 0;
+        let ellipsis = "...";
+        let newText;
         do {
           i--;
-          let newText = origText.slice(0, i);
-          let ellipsis = "...";
+          newText = origText.slice(0, i);
           this._dropdownLabelHelper.textContent = newText + ellipsis;
         } while (this._dropdownLabelHelper.offsetHeight > this._newDropdownLabel.offsetHeight);
       }