From 94c0e1b25d64275ebefe6559ef80cef5c427447b Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Wed, 4 Jan 2017 17:41:47 -0200
Subject: [PATCH] LT-115: Closing the sub tools popup when clicking outside

---
 .../toolbarSectionButton.html                 |  7 ++--
 .../toolbarSectionButton.js                   | 38 +++++++++++++++----
 .../toolbarSectionButton.styl                 |  1 +
 .../toolbarSectionTools.js                    | 23 +++++++++++
 4 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html
index ea0989cd6..6e6e01441 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html
+++ b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html
@@ -2,13 +2,14 @@
     {{#if this.buttonTemplateName}}
         {{>UI.dynamic template=this.buttonTemplateName data=this}}
     {{else}}
-        <div id="{{this.id}}"
+        <div id="{{this.id}}" tabindex="1"
             class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} {{#if or this.disabled (disableButton)}}disabled{{/if}} {{#if this.subTools}}expandable{{/if}}"
-            title="{{#if this.tooltipTitle}}{{this.tooltipTitle}}{{else}}{{this.title}}{{/if}}">
+            title="{{this.tooltipTitle}}">
+            <div class="focus-holder" tabindex="1"></div>
             <div class="svgContainer">
                 {{#if this.svgLink}}
                 <svg>
-                    <use xlink:href={{this.svgLink}}></use>
+                    <use xlink:href={{svgLink}}></use>
                 </svg>
                 {{else}}
                 <i class={{iconClasses}}></i>
diff --git a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js
index ca8ff88f9..b015269ab 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js
+++ b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js
@@ -3,20 +3,42 @@ import { Template } from 'meteor/templating';
 import { Session } from 'meteor/session';
 import { _ } from 'meteor/underscore';
 
-Template.toolbarSectionButton.helpers({
-    activeClass() {
+Template.toolbarSectionButton.onCreated(() => {
+    const instance = Template.instance();
+
+    instance.isActive = activeToolId => {
         // TODO: Find a way to prevent the 'flash' after a click, but before this helper runs
         const instance = Template.instance();
         const subTools = instance.data.subTools;
         const currentId = instance.data.id;
-        const activeId = Session.get('ToolManagerActiveTool');
-        const isCurrentTool = currentId === activeId;
-        const isSubTool = subTools && _.findWhere(subTools, { id: activeId });
+        const isCurrentTool = currentId === activeToolId;
+        const isSubTool = subTools && _.findWhere(subTools, { id: activeToolId });
 
         // Check if the current tool or a sub tool is the active one
-        if (isCurrentTool || isSubTool) {
-            // Return the active class
-            return 'active';
+        return isCurrentTool || isSubTool;
+    };
+});
+
+Template.toolbarSectionButton.helpers({
+    activeClass() {
+        const instance = Template.instance();
+        const activeToolId = Session.get('ToolManagerActiveTool');
+        const isActive = instance.isActive(activeToolId);
+        return isActive ? 'active' : '';
+    },
+
+    svgLink() {
+        const instance = Template.instance();
+        const subTools = instance.data.subTools;
+        const defaultSvgLink = instance.data.svgLink;
+        const activeToolId = Session.get('ToolManagerActiveTool');
+        const currentId = instance.data.id;
+
+        if (subTools && activeToolId !== currentId && instance.isActive(activeToolId)) {
+            const subTool = _.findWhere(subTools, { id: activeToolId });
+            return subTool ? subTool.svgLink : defaultSvgLink;
+        } else {
+            return defaultSvgLink;
         }
     },
 
diff --git a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl
index f8c3d1933..0fa5079cc 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl
+++ b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl
@@ -7,6 +7,7 @@
   cursor: pointer
   display: inline-block
   min-width: 30px
+  outline: none
   position: relative
   text-align: center
 
diff --git a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.js b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.js
index b7dd1f6aa..00c4f68cf 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.js
+++ b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.js
@@ -1,9 +1,32 @@
 import { Template } from 'meteor/templating';
+import { Meteor } from 'meteor/meteor';
 
 Template.toolbarSectionTools.events({
     'click .expandable'(event, instance) {
         const $target = $(event.currentTarget);
         const isExpanded = $target.hasClass('expanded');
         $target.toggleClass('expanded', !isExpanded);
+    },
+
+    'focusout .expandable'(event, instance) {
+        const target = event.target;
+        const currentTarget = event.currentTarget;
+
+        // Postpone the execution to be able to get the focused element
+        Meteor.defer(() => {
+            const $focused = $(':focus');
+            const $expandable = $(currentTarget).closest('.expandable');
+            const focusInside = $expandable.find(':focus').length;
+
+            // Check if the expandable lost the focus
+            if (!$focused.length || !focusInside) {
+                // Stop here if focus is going from subtool to expandable tool
+                if (currentTarget !== target && $focused[0] === currentTarget) {
+                    return;
+                }
+
+                $expandable.removeClass('expanded');
+            }
+        });
     }
 });