Skip to content

Commit

Permalink
[search] Reverted previous change to ClickAwayController and introduc…
Browse files Browse the repository at this point in the history
…ed a custom fix to search menu. Fixes #888 (#1109)
  • Loading branch information
akhenry authored and larkin committed Aug 5, 2016
1 parent 4d89de7 commit 0274490
Show file tree
Hide file tree
Showing 6 changed files with 23 additions and 15 deletions.
2 changes: 1 addition & 1 deletion platform/commonUI/general/bundle.js
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ define([
"implementation": ClickAwayController,
"depends": [
"$document",
"$scope"
"$timeout"
]
},
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ define(
* @param $scope the scope in which this controller is active
* @param $document the document element, injected by Angular
*/
function ClickAwayController($document, $scope) {
function ClickAwayController($document, $timeout) {
var self = this;

this.state = false;
Expand All @@ -44,7 +44,7 @@ define(
// `clickaway` action occurs after `toggle` if `toggle` is
// triggered by a click/mouseup.
this.clickaway = function () {
$scope.$apply(function () {
$timeout(function () {
self.deactivate();
});
};
Expand Down
2 changes: 2 additions & 0 deletions platform/commonUI/general/src/controllers/ToggleController.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ define(
*/
function ToggleController() {
this.state = false;

this.setState = this.setState.bind(this);
}

/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,19 +26,18 @@ define(

describe("The click-away controller", function () {
var mockDocument,
mockScope,
mockTimeout,
controller;

beforeEach(function () {
mockDocument = jasmine.createSpyObj(
"$document",
["on", "off"]
);
mockScope = jasmine.createSpyObj('$scope', ['$apply']);

mockTimeout = jasmine.createSpy('timeout');
controller = new ClickAwayController(
mockDocument,
mockScope
mockTimeout
);
});

Expand Down Expand Up @@ -78,15 +77,18 @@ define(
});

it("deactivates and detaches listener on document click", function () {
var callback, apply;
var callback, timeout;
controller.setState(true);
callback = mockDocument.on.mostRecentCall.args[1];
callback();
apply = mockScope.$apply.mostRecentCall.args[0];
apply();
timeout = mockTimeout.mostRecentCall.args[0];
timeout();
expect(controller.isActive()).toEqual(false);
expect(mockDocument.off).toHaveBeenCalledWith("mouseup", callback);
});



});
}
);
4 changes: 2 additions & 2 deletions platform/search/res/templates/search-menu.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,13 @@

<div ng-controller="SearchMenuController as controller">

<div class="menu checkbox-menu">
<div class="menu checkbox-menu"
mct-click-elsewhere="parameters.menuVisible(false)">
<ul>
<!-- First element is special - it's a reset option -->
<li class="search-menu-item special icon-asterisk"
title="Select all filters"
ng-click="ngModel.checkAll = !ngModel.checkAll; controller.checkAll()">

<label class="checkbox custom no-text">
<input type="checkbox"
class="checkbox"
Expand Down
10 changes: 7 additions & 3 deletions platform/search/res/templates/search.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
-->
<div class="l-flex-col flex-elem grows holder holder-search" ng-controller="SearchController as controller">
<div class="search-bar flex-elem"
ng-controller="ClickAwayController as toggle"
ng-controller="ToggleController as toggle"
ng-class="{ holder: !(ngModel.input === '' || ngModel.input === undefined) }">
<input class="search-input"
type="text"
Expand All @@ -30,13 +30,17 @@
<a class="clear-icon clear-input icon-x-in-circle"
ng-class="{show: !(ngModel.input === '' || ngModel.input === undefined)}"
ng-click="ngModel.input = ''; controller.search()"></a>
<a class="menu-icon context-available"
<!-- To prevent double triggering of clicks on click away, render
non-clickable version of the button when menu active-->
<a ng-if="!toggle.isActive()" class="menu-icon context-available"
ng-click="toggle.toggle()"></a>
<a ng-if="toggle.isActive()" class="menu-icon context-available"></a>

<mct-include key="'search-menu'"
class="menu-element search-menu-holder"
ng-class="{off: !toggle.isActive()}"
ng-model="ngModel"
ng-click="toggle.setState(true)">
parameters="{menuVisible: toggle.setState}">
</mct-include>
</div>
<div class="active-filter-display flex-elem holder"
Expand Down

0 comments on commit 0274490

Please sign in to comment.