make search family tabs collapse into dropdown
Project: http://git-wip-us.apache.org/repos/asf/incubator-blur/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-blur/commit/99007ced Tree: http://git-wip-us.apache.org/repos/asf/incubator-blur/tree/99007ced Diff: http://git-wip-us.apache.org/repos/asf/incubator-blur/diff/99007ced Branch: refs/heads/master Commit: 99007cedd06b22e14b3762d8a9ae7385a54a6900 Parents: 374a609 Author: Andrew Avenoso <[email protected]> Authored: Thu Sep 11 22:27:04 2014 -0400 Committer: Andrew Avenoso <[email protected]> Committed: Thu Sep 11 22:27:04 2014 -0400 ---------------------------------------------------------------------- blur-console/src/main/webapp/.jshintrc | 3 +- blur-console/src/main/webapp/Gruntfile.js | 5 +- .../src/main/webapp/js/blurconsole.search.js | 7 +- .../webapp/js/utils/bootstrap.onelinetabs.js | 90 ++++++++++++++++++++ .../src/main/webapp/views/search.tpl.html | 10 ++- 5 files changed, 106 insertions(+), 9 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-blur/blob/99007ced/blur-console/src/main/webapp/.jshintrc ---------------------------------------------------------------------- diff --git a/blur-console/src/main/webapp/.jshintrc b/blur-console/src/main/webapp/.jshintrc index c9d0f8f..1a9df9e 100644 --- a/blur-console/src/main/webapp/.jshintrc +++ b/blur-console/src/main/webapp/.jshintrc @@ -17,5 +17,6 @@ "strict": true, "trailing": true, "smarttabs": true, - "jquery": true + "jquery": true, + "eqnull": true } http://git-wip-us.apache.org/repos/asf/incubator-blur/blob/99007ced/blur-console/src/main/webapp/Gruntfile.js ---------------------------------------------------------------------- diff --git a/blur-console/src/main/webapp/Gruntfile.js b/blur-console/src/main/webapp/Gruntfile.js index bc46261..f3c794d 100644 --- a/blur-console/src/main/webapp/Gruntfile.js +++ b/blur-console/src/main/webapp/Gruntfile.js @@ -37,6 +37,7 @@ module.exports = function (grunt) { 'libs/bootstrap/js/popover.js', 'libs/bootstrap/js/collapse.js', 'libs/bootstrap/js/tab.js', + 'libs/bootstrap/js/dropdown.js', 'libs/flot/jquery.flot.js', 'libs/flot/jquery.flot.pie.js', 'libs/flot/jquery.flot.categories.js', @@ -83,6 +84,8 @@ module.exports = function (grunt) { options: { sourceMap: true, sourceMapIncludeSources: true, +// mangle: false, +// beautify: true, banner:'/*\n<%= banner %>\n*/', // compress: { // drop_console: true @@ -97,7 +100,7 @@ module.exports = function (grunt) { // Make sure code styles are up to par and there are no obvious mistakes jshint: { options: { - jshintrc: true, + jshintrc: true }, development: { src: ['js/**/*\.js', '!js/utils/**/*\.js'] http://git-wip-us.apache.org/repos/asf/incubator-blur/blob/99007ced/blur-console/src/main/webapp/js/blurconsole.search.js ---------------------------------------------------------------------- diff --git a/blur-console/src/main/webapp/js/blurconsole.search.js b/blur-console/src/main/webapp/js/blurconsole.search.js index b1417b3..b2f7485 100644 --- a/blur-console/src/main/webapp/js/blurconsole.search.js +++ b/blur-console/src/main/webapp/js/blurconsole.search.js @@ -250,7 +250,7 @@ blurconsole.search = (function () { var user = $('#user'); if (user.length > 0) { var names = blurconsole.auth.getSecurityNames(); - if(names === null || names.length <= 1) { + if(names == null || names.length <= 1) { user.closest('.form-group').remove(); } else { user.append('<option value=""></option>'); @@ -381,6 +381,7 @@ blurconsole.search = (function () { familyMarkup += '</div>'; jqueryMap.$resultsHolder.html(familyMarkup); + jqueryMap.$resultsHolder.find('ul.nav-tabs').onelinetabs(); } function _drawFetchHolder() { @@ -409,13 +410,13 @@ blurconsole.search = (function () { jqueryMap.$countHolder.html('<small>Found ' + blurconsole.utils.formatNumber(blurconsole.model.search.getTotal()) + ' total results</small>'); //jqueryMap.$facetTrigger.show(); - if (typeof families !== 'undefined' && families !== null) { + if (families != null) { $.each(families, function(i, fam) { var famResults = results[fam], famId = '#' + blurconsole.browserUtils.cleanId(fam), famHolder = stateMap.$currentDisplay === 'fetch' ? $(famId + ' .panel-body') : $(famId); - if (typeof famResults === 'undefined' || famResults.length === 0) { + if (famResults == null || famResults.length === 0) { famHolder.html('<div class="alert alert-info">No Data Found</div>'); } else { var table; http://git-wip-us.apache.org/repos/asf/incubator-blur/blob/99007ced/blur-console/src/main/webapp/js/utils/bootstrap.onelinetabs.js ---------------------------------------------------------------------- diff --git a/blur-console/src/main/webapp/js/utils/bootstrap.onelinetabs.js b/blur-console/src/main/webapp/js/utils/bootstrap.onelinetabs.js new file mode 100644 index 0000000..10db395 --- /dev/null +++ b/blur-console/src/main/webapp/js/utils/bootstrap.onelinetabs.js @@ -0,0 +1,90 @@ +/* + +Licensed to the Apache Software Foundation (ASF) under one +or more contributor license agreements. See the NOTICE file +distributed with this work for additional information +regarding copyright ownership. The ASF licenses this file +to you 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. + */ + ++function ($) { + 'use strict'; + + // ONELINETABS CLASS DEFINITION + // ====================== + var OneLineTabs = function (element, options) { + $(window) + .on('resize.bs.tabs.oneline', $.proxy(this.resize, this)) + this.$element = $(element) + this.resize(); + } + + OneLineTabs.prototype.resize = function () { + var dropdown = this.$element.find('>li.dropdown'); + if(dropdown.length > 0) { + this.$element.append(dropdown.find('li')); + dropdown.remove(); + } + var lis = this.$element.find('>li:not(.dropdown)'); + if(lis.length > 0) { + var first_top = $(lis[0]).position().top; + var last_top = $(lis[lis.length-1]).position().top; + if(first_top === last_top) { + return; // no collapsing needed + } + // add dropdown + this.$element.append('<li class="dropdown"><a id="myTabDrop1" data-toggle="dropdown" class="dropdown-toggle" href="#">More <span class="caret"></span></a><ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"></ul></li>'); + dropdown = this.$element.find('>li.dropdown'); + var dropdown_ul = dropdown.find('ul'); + var i = 1; // skip first one + while(i < lis.length && $(lis[i]).position().top === first_top) { + i++; + } + i--; + if($(lis[i]).width() < dropdown.width()) { + i--; + } + while(i < lis.length) { + dropdown_ul.append(lis[i]); + i++; + } + } + } + + // ONELINETABS PLUGIN DEFINITION + // ======================= + function Plugin(option) { + return this.each(function () { + var $this = $(this) + var data = $this.data('bs.onelinetabs') + var options = typeof option == 'object' && option + + if (!data) $this.data('bs.onelinetabs', (data = new OneLineTabs(this, options))) + if (typeof option == 'string') data[option]() + }) + } + + var old = $.fn.onelinetabs + + $.fn.onelinetabs = Plugin + $.fn.onelinetabs.Constructor = OneLineTabs + + // ONELINETABS NO CONFLICT + // ================= + $.fn.onelinetabs.noConflict = function () { + $.fn.onelinetabs = old + return this + } + +}(jQuery); http://git-wip-us.apache.org/repos/asf/incubator-blur/blob/99007ced/blur-console/src/main/webapp/views/search.tpl.html ---------------------------------------------------------------------- diff --git a/blur-console/src/main/webapp/views/search.tpl.html b/blur-console/src/main/webapp/views/search.tpl.html index 7eadbbc..7efbccf 100644 --- a/blur-console/src/main/webapp/views/search.tpl.html +++ b/blur-console/src/main/webapp/views/search.tpl.html @@ -35,10 +35,12 @@ under the License. <option value="" id="statusOption">Loading Tables....</option> </select> </div> - <button class="btn btn-default" type="button" id="searchOptionsTrigger"> - <i class="glyphicon glyphicon-cog"></i> - </button> - <span id="searchOptionsDisplay"></span> + <div class="col-xs-1"> + <button class="btn btn-default" type="button" id="searchOptionsTrigger"> + <i class="glyphicon glyphicon-cog"></i> + </button> + </div> + <div id="searchOptionsDisplay" class="col-xs-3"></div> </div> <div id="resultInfo" class="row"> <div id="resultCount" class="col-xs-2"></div>
