ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-19 13:17:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Search] Moved search menu to a template

Browse Source 
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 2015-08-17 12:34:50 -07:00
parent e159b7a15d
commit 083932e902
5 changed files with 252 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
platform/search/bundle.json
View File

@ -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
View 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>

65
platform/search/res/templates/search.html
View File

@ -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>

128
platform/search/src/controllers/SearchController.js
View File

@ -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
View 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;
});