Open stroke dropdown on click instead of focus

Author: cdauth

app/shared/ui/pattern-player/pattern-player.html

@@ -36,7 +36,15 @@
 				</td>
 				<td ng-repeat="(i,a) in utils.getNumber(pattern.length*pattern.time) track by $index" class="stroke" ng-class="getStrokeClass(i)">
 					<span ng-if="!editable" class="stroke-inner" uib-tooltip="{{config.strokesDescription[pattern[instrumentKey][i]]}}">{{config.strokes[pattern[instrumentKey][i]] || ' '}}</span>
-					<a ng-if="editable && !strokeDropdownOpen" href="javascript:" tabindex="0" class="stroke-inner" uib-tooltip="{{config.strokesDescription[pattern[instrumentKey][i]]}}" uib-popover-template="'app/shared/ui/pattern-player/pattern-player-stroke-dropdown.html'" popover-placement="bottom" popover-trigger="focus">{{config.strokes[pattern[instrumentKey][i]] || ' '}}</a>
+					<a ng-if="editable"
+						href="javascript:" class="stroke-inner"
+						uib-tooltip="{{config.strokesDescription[pattern[instrumentKey][i]]}}"
+						uib-popover-template="'app/shared/ui/pattern-player/pattern-player-stroke-dropdown.html'"
+						popover-placement="bottom" popover-trigger="manual"
+						popover-is-open="currentStrokeDropdown[0] == instrumentKey && currentStrokeDropdown[1] == i"
+						ng-click="clickStroke(instrumentKey, i)">
+						{{config.strokes[pattern[instrumentKey][i]] || ' '}}
+					</a>
 				</td>
 			</tr>
 		</tbody>

app/shared/ui/pattern-player/pattern-player.js

@@ -11,7 +11,7 @@ angular.module("beatbox")
 			transclude: true
 		};
 	})
-	.controller("bbPatternController", function($scope, $element, bbPlayer, bbConfig, bbUtils, ng) {
+	.controller("bbPatternController", function($scope, $element, bbPlayer, bbConfig, bbUtils, ng, $) {
 		$scope.config = bbConfig;
 		$scope.utils = bbUtils;
 
@@ -138,4 +138,26 @@ angular.module("beatbox")
 				ng.copy($scope.originalPattern, $scope.pattern);
 			});
 		};
+
+		$scope.clickStroke = function(instrumentKey, i) {
+			if(ng.equals($scope.currentStrokeDropdown, [ instrumentKey, i ]))
+				$scope.currentStrokeDropdown = null;
+			else
+				$scope.currentStrokeDropdown = [ instrumentKey, i ];
+		};
+
+		var clickHandler = function(e) {
+			var el = $(e.target);
+			if(el.closest(".stroke-inner").length == 0 && $scope.currentStrokeDropdown != null ) {
+				$scope.$apply(function() {
+					$scope.currentStrokeDropdown = null;
+				});
+			}
+		};
+
+		$(document).click(clickHandler);
+
+		$scope.$on("$destroy", function() {
+			$(document).off("click", clickHandler);
+		});
 	});