mirror of
https://github.com/nasa/openmct.git
synced 2024-12-19 13:17:53 +00:00
[Search] Moved search menu to a template
Created a search-menu template and corresponding controller. Moved functions out of SearchController to SearchMenuController. The two controllers share information through ngModel.
This commit is contained in:
slhale
parent
e159b7a15d
commit
083932e902
@ -13,7 +13,12 @@
|
||||
{
|
||||
"key": "SearchController",
|
||||
"implementation": "controllers/SearchController.js",
|
||||
"depends": [ "$scope", "searchService", "types[]" ]
|
||||
"depends": [ "$scope", "searchService" ]
|
||||
},
|
||||
{
|
||||
"key": "SearchMenuController",
|
||||
"implementation": "controllers/SearchMenuController.js",
|
||||
"depends": [ "$scope", "types[]" ]
|
||||
},
|
||||
{
|
||||
"key": "SearchItemController",
|
||||
@ -31,6 +36,10 @@
|
||||
"key": "search",
|
||||
"templateUrl": "templates/search.html",
|
||||
"uses": [ "control" ]
|
||||
},
|
||||
{
|
||||
"key": "search-menu",
|
||||
"templateUrl": "templates/search-menu.html"
|
||||
}
|
||||
],
|
||||
"representations": [
|
||||
|
||||
71
platform/search/res/templates/search-menu.html
Normal file
71
platform/search/res/templates/search-menu.html
Normal file
@ -0,0 +1,71 @@
|
||||
<!--
|
||||
Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
as represented by the Administrator of the National Aeronautics and Space
|
||||
Administration. All rights reserved.
|
||||
|
||||
Open MCT Web is licensed under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
http://www.apache.org/licenses/LICENSE-2.0.
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
License for the specific language governing permissions and limitations
|
||||
under the License.
|
||||
|
||||
Open MCT Web includes source code licensed under additional open source
|
||||
licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
|
||||
<div ng-controller="SearchMenuController as controller">
|
||||
|
||||
<div class="menu dropdown search-menu">
|
||||
|
||||
<ul>
|
||||
<!-- First element is special - it's a reset option -->
|
||||
<li class="search-menu-item special"
|
||||
title="Select all filters."
|
||||
ng-click="ngModel.checkAll = !ngModel.checkAll; controller.checkAll()">
|
||||
|
||||
<label class="checkbox custom search-menu-checkbox">
|
||||
<input type="checkbox"
|
||||
class="checkbox"
|
||||
ng-model="ngModel.checkAll"
|
||||
ng-change="controller.checkAll()" />
|
||||
<em></em>
|
||||
</label>
|
||||
|
||||
<span class="search-menu-label">
|
||||
ALL
|
||||
</span>
|
||||
|
||||
</li>
|
||||
|
||||
<!-- The filter options, by type -->
|
||||
<li class="search-menu-item"
|
||||
ng-repeat="type in ngModel.types"
|
||||
ng-click="ngModel.checked[type.key] = !ngModel.checked[type.key]; controller.updateOptions()">
|
||||
|
||||
<label class="checkbox custom search-menu-checkbox">
|
||||
<input type="checkbox"
|
||||
class="checkbox"
|
||||
ng-model="ngModel.checked[type.key]"
|
||||
ng-change="controller.updateOptions()" />
|
||||
<em></em>
|
||||
</label>
|
||||
|
||||
<span class="ui-symbol search-menu-glyph">
|
||||
{{ type.glyph }}
|
||||
</span>
|
||||
|
||||
<span class="search-menu-label">
|
||||
{{ type.name }}
|
||||
</span>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -58,71 +58,26 @@
|
||||
</a>
|
||||
|
||||
<!-- Menu -->
|
||||
<div class="menu-element search-menu-holder"
|
||||
ng-class="{off: !toggle.isActive()}"
|
||||
ng-click="toggle.setState(true)">
|
||||
|
||||
<div class="menu dropdown search-menu">
|
||||
|
||||
<ul>
|
||||
<!-- First element is special - it's a reset option -->
|
||||
<li class="search-menu-item special"
|
||||
title="Select all filters."
|
||||
ng-click="ngModel.checkAll = !ngModel.checkAll; controller.checkAll()">
|
||||
|
||||
<label class="checkbox custom search-menu-checkbox">
|
||||
<input type="checkbox"
|
||||
class="checkbox"
|
||||
ng-model="ngModel.checkAll"
|
||||
ng-change="controller.checkAll()" />
|
||||
<em></em>
|
||||
</label>
|
||||
|
||||
<span class="search-menu-label">
|
||||
ALL
|
||||
</span>
|
||||
|
||||
</li>
|
||||
|
||||
<!-- The filter options, by type -->
|
||||
<li class="search-menu-item"
|
||||
ng-repeat="type in types"
|
||||
ng-click="ngModel.checked[type.key] = !ngModel.checked[type.key]; controller.updateOptions()">
|
||||
|
||||
<label class="checkbox custom search-menu-checkbox">
|
||||
<input type="checkbox"
|
||||
class="checkbox"
|
||||
ng-model="ngModel.checked[type.key]"
|
||||
ng-change="controller.updateOptions()" />
|
||||
<em></em>
|
||||
</label>
|
||||
|
||||
<span class="ui-symbol search-menu-glyph">
|
||||
{{ type.glyph }}
|
||||
</span>
|
||||
|
||||
<span class="search-menu-label">
|
||||
{{ type.name }}
|
||||
</span>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mct-include key="'search-menu'"
|
||||
class="menu-element search-menu-holder"
|
||||
ng-class="{off: !toggle.isActive()}"
|
||||
ng-model="ngModel"
|
||||
ng-click="toggle.setState(true)">
|
||||
</mct-include>
|
||||
</div>
|
||||
|
||||
<!-- Active filter display -->
|
||||
<div class="active-filter-display"
|
||||
ng-class="{off: filtersString === '' || filtersString === undefined || !ngModel.search}">
|
||||
ng-class="{off: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}"
|
||||
ng-controller="SearchMenuController as menuController">
|
||||
|
||||
<a class="ui-symbol clear-filters-icon"
|
||||
ng-click="ngModel.checkAll = true; controller.checkAll()">
|
||||
ng-click="ngModel.checkAll = true; menuController.checkAll()">
|
||||
x
|
||||
</a>
|
||||
|
||||
<div class="filter-options">
|
||||
Filtered by: {{ filtersString }}
|
||||
Filtered by: {{ ngModel.filtersString }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -37,26 +37,32 @@ define(function () {
|
||||
fullResults = {hits: []};
|
||||
|
||||
// Scope variables are:
|
||||
// results, an array of searchResult objects
|
||||
// types, an array of type objects
|
||||
// loading, whether search() is loading
|
||||
// filtersString, a string list of what filters on the results are active
|
||||
// ngModel.input, the text of the search query
|
||||
// ngModel.search, a boolean of whether to display search or the tree
|
||||
// ngModel.checked, a dictionary of which type filter options are checked
|
||||
// ngModel.checkAll, a boolean of whether all of the types in ngModel.checked are checked
|
||||
$scope.types = [];
|
||||
$scope.ngModel.checked = {};
|
||||
$scope.filtersString = '';
|
||||
// Variables used only in SearchController:
|
||||
// results, an array of searchResult objects
|
||||
// loading, whether search() is loading
|
||||
// ngModel.input, the text of the search query
|
||||
// ngModel.search, a boolean of whether to display search or the tree
|
||||
// Variables used also in SearchMenuController:
|
||||
// ngModel.filter, the function filter defined below
|
||||
// ngModel.types, an array of type objects
|
||||
// ngModel.checked, a dictionary of which type filter options are checked
|
||||
// ngModel.checkAll, a boolean of whether all of the types in ngModel.checked are checked
|
||||
// ngModel.filtersString, a string list of what filters on the results are active
|
||||
$scope.results = [];
|
||||
$scope.loading = false;
|
||||
|
||||
|
||||
// Filters searchResult objects by type. Allows types that are
|
||||
// checked. (ngModel.checked['typekey'] === true)
|
||||
// If hits is not provided, will use fullResults.hits
|
||||
function filter(hits) {
|
||||
var newResults = [],
|
||||
i = 0;
|
||||
|
||||
if (!hits) {
|
||||
hits = fullResults.hits;
|
||||
}
|
||||
|
||||
// If checkAll is checked, search everything no matter what the other
|
||||
// checkboxes' statuses are. Otherwise filter the search by types.
|
||||
if ($scope.ngModel.checkAll) {
|
||||
@ -71,9 +77,13 @@ define(function () {
|
||||
}
|
||||
}
|
||||
|
||||
$scope.results = newResults;
|
||||
return newResults;
|
||||
}
|
||||
|
||||
// Make function accessible from SearchMenuController
|
||||
$scope.ngModel.filter = filter;
|
||||
|
||||
// For documentation, see search below
|
||||
function search(maxResults) {
|
||||
var inputText = $scope.ngModel.input;
|
||||
@ -111,86 +121,6 @@ define(function () {
|
||||
});
|
||||
}
|
||||
|
||||
// For documentation, see updateOptions below
|
||||
function updateOptions() {
|
||||
var type,
|
||||
i;
|
||||
|
||||
// Update all-checked status
|
||||
if ($scope.ngModel.checkAll) {
|
||||
for (type in $scope.ngModel.checked) {
|
||||
if ($scope.ngModel.checked[type]) {
|
||||
$scope.ngModel.checkAll = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update the current filters string
|
||||
$scope.filtersString = '';
|
||||
if ($scope.ngModel.checkAll !== true) {
|
||||
for (i = 0; i < types.length; i += 1) {
|
||||
// If the type key corresponds to a checked option...
|
||||
if ($scope.ngModel.checked[types[i].key]) {
|
||||
// ... add it to the string list of current filter options
|
||||
if ($scope.filtersString === '') {
|
||||
$scope.filtersString += types[i].name;
|
||||
} else {
|
||||
$scope.filtersString += ', ' + types[i].name;
|
||||
}
|
||||
}
|
||||
}
|
||||
// If there's still nothing in the filters string, there are no
|
||||
// filters selected
|
||||
if ($scope.filtersString === '') {
|
||||
$scope.filtersString = 'NONE';
|
||||
}
|
||||
}
|
||||
|
||||
// Re-filter results
|
||||
$scope.results = filter(fullResults.hits);
|
||||
}
|
||||
|
||||
// For documentation, see checkAll below
|
||||
function checkAll() {
|
||||
var type;
|
||||
|
||||
// If model's checkAll has just been checked, reset everything else
|
||||
// to default view, and behave as if there are no filters (default)
|
||||
if ($scope.ngModel.checkAll) {
|
||||
// Uncheck everything else
|
||||
for (type in $scope.ngModel.checked) {
|
||||
$scope.ngModel.checked[type] = false;
|
||||
}
|
||||
|
||||
// Reset filter display
|
||||
$scope.filtersString = '';
|
||||
|
||||
// Re-filter results
|
||||
$scope.results = filter(fullResults.hits);
|
||||
} else {
|
||||
// If model's checkAll has just been UNchecked, set filters to none
|
||||
|
||||
for (type in $scope.ngModel.checked) {
|
||||
$scope.ngModel.checked[type] = false;
|
||||
}
|
||||
$scope.filtersString = 'NONE';
|
||||
|
||||
// Re-filter results
|
||||
$scope.results = filter(fullResults.hits);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// On initialization, fill the scope's types with type keys
|
||||
types.forEach(function (type) {
|
||||
// We only want some types, the ones that are probably human readable
|
||||
if (type.key && type.name) {
|
||||
$scope.types.push(type);
|
||||
$scope.ngModel.checked[type.key] = false;
|
||||
}
|
||||
});
|
||||
$scope.ngModel.checkAll = true;
|
||||
|
||||
return {
|
||||
/**
|
||||
* Search the filetree. Assumes that any search text will
|
||||
@ -235,21 +165,7 @@ define(function () {
|
||||
// Otherwise just take from what we already have
|
||||
$scope.results = filter(fullResults.hits);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Updates the status of the checked options. Updates the filtersString
|
||||
* with which options are checked. Re-filters the search results after.
|
||||
* Not intended to be called by checkAll when it is toggled.
|
||||
*/
|
||||
updateOptions: updateOptions,
|
||||
|
||||
/**
|
||||
* Handles the search and filter options for when checkAll has been
|
||||
* toggled. This is a special case, compared to the other search
|
||||
* menu options, so is intended to be called instead of updateOptions.
|
||||
*/
|
||||
checkAll: checkAll
|
||||
}
|
||||
};
|
||||
}
|
||||
return SearchController;
|
||||
|
||||
139
platform/search/src/controllers/SearchMenuController.js
Normal file
139
platform/search/src/controllers/SearchMenuController.js
Normal file
@ -0,0 +1,139 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT Web includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/*global define*/
|
||||
|
||||
/**
|
||||
* Module defining SearchMenuController. Created by shale on 08/17/2015.
|
||||
*/
|
||||
define(function () {
|
||||
"use strict";
|
||||
|
||||
function SearchMenuController($scope, types) {
|
||||
|
||||
// Model variables are:
|
||||
// ngModel.filter, the function filter defined in SearchController
|
||||
// ngModel.types, an array of type objects
|
||||
// ngModel.checked, a dictionary of which type filter options are checked
|
||||
// ngModel.checkAll, a boolean of whether all of the types in ngModel.checked are checked
|
||||
// ngModel.filtersString, a string list of what filters on the results are active
|
||||
$scope.ngModel.types = [];
|
||||
$scope.ngModel.checked = {};
|
||||
$scope.ngModel.checkAll = true;
|
||||
$scope.ngModel.filtersString = '';
|
||||
|
||||
// On initialization, fill the scope's types with type keys
|
||||
types.forEach(function (type) {
|
||||
// We only want some types, the ones that are probably human readable
|
||||
if (type.key && type.name) {
|
||||
$scope.ngModel.types.push(type);
|
||||
$scope.ngModel.checked[type.key] = false;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// For documentation, see updateOptions below
|
||||
function updateOptions() {
|
||||
var type,
|
||||
i;
|
||||
|
||||
// Update all-checked status
|
||||
if ($scope.ngModel.checkAll) {
|
||||
for (type in $scope.ngModel.checked) {
|
||||
if ($scope.ngModel.checked[type]) {
|
||||
$scope.ngModel.checkAll = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update the current filters string
|
||||
$scope.ngModel.filtersString = '';
|
||||
if ($scope.ngModel.checkAll !== true) {
|
||||
for (i = 0; i < $scope.ngModel.types.length; i += 1) {
|
||||
// If the type key corresponds to a checked option...
|
||||
if ($scope.ngModel.checked[$scope.ngModel.types[i].key]) {
|
||||
// ... add it to the string list of current filter options
|
||||
if ($scope.ngModel.filtersString === '') {
|
||||
$scope.ngModel.filtersString += $scope.ngModel.types[i].name;
|
||||
} else {
|
||||
$scope.ngModel.filtersString += ', ' + $scope.ngModel.types[i].name;
|
||||
}
|
||||
}
|
||||
}
|
||||
// If there's still nothing in the filters string, there are no
|
||||
// filters selected
|
||||
if ($scope.ngModel.filtersString === '') {
|
||||
$scope.ngModel.filtersString = 'NONE';
|
||||
}
|
||||
}
|
||||
|
||||
// Re-filter results
|
||||
$scope.ngModel.filter();
|
||||
}
|
||||
|
||||
// For documentation, see checkAll below
|
||||
function checkAll() {
|
||||
var type;
|
||||
|
||||
// If model's checkAll has just been checked, reset everything else
|
||||
// to default view, and behave as if there are no filters (default)
|
||||
if ($scope.ngModel.checkAll) {
|
||||
// Uncheck everything else
|
||||
for (type in $scope.ngModel.checked) {
|
||||
$scope.ngModel.checked[type] = false;
|
||||
}
|
||||
|
||||
// Reset filter display
|
||||
$scope.ngModel.filtersString = '';
|
||||
|
||||
// Re-filter results
|
||||
$scope.ngModel.filter();
|
||||
} else {
|
||||
// If model's checkAll has just been UNchecked, set filters to none
|
||||
|
||||
for (type in $scope.ngModel.checked) {
|
||||
$scope.ngModel.checked[type] = false;
|
||||
}
|
||||
$scope.ngModel.filtersString = 'NONE';
|
||||
|
||||
// Re-filter results
|
||||
$scope.ngModel.filter();
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
/**
|
||||
* Updates the status of the checked options. Updates the filtersString
|
||||
* with which options are checked. Re-filters the search results after.
|
||||
* Not intended to be called by checkAll when it is toggled.
|
||||
*/
|
||||
updateOptions: updateOptions,
|
||||
|
||||
/**
|
||||
* Handles the search and filter options for when checkAll has been
|
||||
* toggled. This is a special case, compared to the other search
|
||||
* menu options, so is intended to be called instead of updateOptions.
|
||||
*/
|
||||
checkAll: checkAll
|
||||
};
|
||||
}
|
||||
return SearchMenuController;
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user