Repository: atlas Updated Branches: refs/heads/ATLAS-2251 f01e46d73 -> d511b2888
ATLAS-2250: Upgrade JQuery version to 3.* Project: http://git-wip-us.apache.org/repos/asf/atlas/repo Commit: http://git-wip-us.apache.org/repos/asf/atlas/commit/af51fbcf Tree: http://git-wip-us.apache.org/repos/asf/atlas/tree/af51fbcf Diff: http://git-wip-us.apache.org/repos/asf/atlas/diff/af51fbcf Branch: refs/heads/ATLAS-2251 Commit: af51fbcf2d8c94659ed454d78f1b5551c56d052a Parents: 37be53b Author: kevalbhatt <kbh...@apache.org> Authored: Mon Nov 6 19:00:44 2017 +0530 Committer: kevalbhatt <kbh...@apache.org> Committed: Tue Nov 7 17:11:49 2017 +0530 ---------------------------------------------------------------------- 3party-licenses/backgrid-columnmanager-LICENSE | 22 + LICENSE | 3 + dashboardv2/gruntfile.js | 308 +++--- dashboardv2/package.json | 32 +- dashboardv2/public/index.html.tpl | 2 +- .../css/Backgrid.ColumnManager.css | 114 +++ .../js/Backgrid.ColumnManager.js | 960 +++++++++++++++++++ dashboardv2/public/js/main.js | 2 +- 8 files changed, 1276 insertions(+), 167 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/atlas/blob/af51fbcf/3party-licenses/backgrid-columnmanager-LICENSE ---------------------------------------------------------------------- diff --git a/3party-licenses/backgrid-columnmanager-LICENSE b/3party-licenses/backgrid-columnmanager-LICENSE new file mode 100644 index 0000000..0750984 --- /dev/null +++ b/3party-licenses/backgrid-columnmanager-LICENSE @@ -0,0 +1,22 @@ +The MIT License (MIT) + +Copyright (c) 2015 Wilbert van de Ridder + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + http://git-wip-us.apache.org/repos/asf/atlas/blob/af51fbcf/LICENSE ---------------------------------------------------------------------- diff --git a/LICENSE b/LICENSE index 435e340..38ae8ab 100755 --- a/LICENSE +++ b/LICENSE @@ -256,4 +256,7 @@ MIT License. For details, see 3party-licenses/bootstrap-daterangepicker-LICENSE This product bundles jQuery QueryBuilder 2.4.3, which is available under MIT License. For details, see 3party-licenses/jQuery-QueryBuilder-LICENSE + +This product bundles backgrid-columnmanager 0.2.4, which is available under +MIT License. For details, see 3party-licenses/backgrid-columnmanager-LICENSE ======================================================================= http://git-wip-us.apache.org/repos/asf/atlas/blob/af51fbcf/dashboardv2/gruntfile.js ---------------------------------------------------------------------- diff --git a/dashboardv2/gruntfile.js b/dashboardv2/gruntfile.js index ebe665b..ba9ea0f 100644 --- a/dashboardv2/gruntfile.js +++ b/dashboardv2/gruntfile.js @@ -17,16 +17,12 @@ */ 'use strict'; - -var git = require('git-rev'); module.exports = function(grunt) { - var classPathSep = (process.platform === "win32") ? ';' : ':', - gitHash = '', - pkg = grunt.file.readJSON('package.json'), - buildTime = new Date().getTime(), - distPath = 'dist', - libPath = distPath + '/js/libs', + var buildTime = new Date().getTime(), + distPath = './dist/', + libPath = distPath + 'js/libs/', isDashboardDirectory = grunt.file.isDir('public'), + nodeModulePath = './node_modules/', modulesPath = 'public/'; if (!isDashboardDirectory) { modulesPath = '../public/' @@ -58,135 +54,124 @@ module.exports = function(grunt) { base: distPath, // change this to '0.0.0.0' to access the server from outside hostname: '0.0.0.0', - middleware: function(connect, options, defaultMiddleware) { - var proxy = require('grunt-connect-proxy/lib/utils').proxyRequest; - return [ - // Include the proxy first - proxy - ].concat(defaultMiddleware); - + middleware: function(connect, options, middlewares) { + middlewares.unshift(require('grunt-middleware-proxy/lib/Utils').getProxyMiddleware()); + return middlewares; } - }, proxies: [{ context: '/api', // the context of the data service host: '127.0.0.1', port: 21000, // the port that the data service is running on - ws: true, - changeOrigin: false, - https: false, - xforward: false, - //xforward: false + https: false }], }, }, - devUpdate: { - main: { - options: { - updateType: 'force' - } - } - }, - compress: { - release: { - options: { - archive: function() { - return [pkg.name, pkg.version, gitHash].join('_') + '.tgz'; - } - }, - src: ['node_modules/**', 'package.json', 'server.js', 'server/**', 'public/**', '!public/js/**', '!public/modules/**/*.js'] - } - }, npmcopy: { - // Javascript js: { options: { - destPrefix: libPath + destPrefix: libPath, + srcPrefix: nodeModulePath }, files: { - 'jquery/js': 'jquery/dist/jquery.min.js', - 'requirejs': 'requirejs/require.js', - 'requirejs-text': 'requirejs-text/text.js', - 'underscore': 'underscore/underscore-min.js', - 'bootstrap/js': 'bootstrap/dist/js/bootstrap.min.js', - 'backbone': 'backbone/backbone-min.js', - 'backbone-babysitter': 'backbone.babysitter/lib/backbone.babysitter.min.js', - 'backbone-marionette': 'backbone.marionette/lib/backbone.marionette.min.js', - 'backbone-paginator': 'backbone.paginator/lib/backbone.paginator.min.js', - 'backbone-wreqr': 'backbone.wreqr/lib/backbone.wreqr.min.js', - 'backgrid/js': 'backgrid/lib/backgrid.js', - 'backgrid-filter/js': 'backgrid-filter/backgrid-filter.min.js', - 'backgrid-orderable-columns/js': 'backgrid-orderable-columns/backgrid-orderable-columns.js', - 'backgrid-paginator/js': 'backgrid-paginator/backgrid-paginator.min.js', - 'backgrid-sizeable-columns/js': 'backgrid-sizeable-columns/backgrid-sizeable-columns.js', - 'backgrid-columnmanager/js': 'backgrid-columnmanager/src/Backgrid.ColumnManager.js', - 'jquery-asBreadcrumbs/js': 'jquery-asBreadcrumbs/dist/jquery-asBreadcrumbs.min.js', - 'd3': 'd3/d3.min.js', - 'd3/': 'd3-tip/index.js', - 'dagre-d3': 'dagre-d3/dist/dagre-d3.min.js', - 'select2': 'select2/dist/js/select2.full.min.js', - 'backgrid-select-all': 'backgrid-select-all/backgrid-select-all.min.js', - 'moment/js': 'moment/min/moment.min.js', - 'jquery-placeholder/js': 'jquery-placeholder/jquery.placeholder.js', - 'platform': 'platform/platform.js', - 'jQueryQueryBuilder/js': 'jQuery-QueryBuilder/dist/js/query-builder.standalone.min.js', - 'bootstrap-daterangepicker/js': 'bootstrap-daterangepicker/daterangepicker.js', - 'nvd3': 'nvd3/build/nv.d3.min.js', - 'sparkline': 'jquery-sparkline/jquery.sparkline.min.js' + // FileName : {"src":"dest"} + 'jquery.min.js': { 'jquery/dist': 'jquery/js' }, + 'require.js': { 'requirejs': 'requirejs' }, + 'text.js': { 'requirejs-text': 'requirejs-text' }, + 'underscore-min.js': { 'underscore': 'underscore' }, + 'bootstrap.min.js': { 'bootstrap/dist/js': 'bootstrap/js' }, + 'backbone-min.js': { 'backbone': 'backbone' }, + 'backbone.babysitter.min.js': { 'backbone.babysitter/lib': 'backbone-babysitter' }, + 'backbone.marionette.min.js': { 'backbone.marionette/lib': 'backbone-marionette' }, + 'backbone.paginator.min.js': { 'backbone.paginator/lib': 'backbone-paginator' }, + 'backbone.wreqr.min.js': { 'backbone.wreqr/lib': 'backbone-wreqr' }, + 'backgrid.js': { 'backgrid/lib': 'backgrid/js' }, + 'backgrid-filter.min.js': { 'backgrid-filter': 'backgrid-filter/js' }, + 'backgrid-orderable-columns.js': { 'backgrid-orderable-columns': 'backgrid-orderable-columns/js' }, + 'backgrid-paginator.min.js': { 'backgrid-paginator': 'backgrid-paginator/js' }, + 'backgrid-sizeable-columns.js': { 'backgrid-sizeable-columns': 'backgrid-sizeable-columns/js' }, + 'Backgrid.ColumnManager.js': { 'backgrid-columnmanager/src': 'backgrid-columnmanager/js' }, + 'jquery-asBreadcrumbs.min.js': { 'jquery-asBreadcrumbs/dist': 'jquery-asBreadcrumbs/js' }, + 'd3.min.js': { 'd3': 'd3' }, + 'index.js': { 'd3-tip': 'd3/' }, + 'dagre-d3.min.js': { 'dagre-d3/dist': 'dagre-d3' }, + 'select2.full.min.js': { 'select2/dist/js': 'select2' }, + 'backgrid-select-all.min.js': { 'backgrid-select-all': 'backgrid-select-all' }, + 'moment.min.js': { 'moment/min': 'moment/js' }, + 'jquery.placeholder.js': { 'jquery-placeholder': 'jquery-placeholder/js' }, + 'platform.js': { 'platform': 'platform' }, + 'query-builder.standalone.min.js': { 'jQuery-QueryBuilder/dist/js': 'jQueryQueryBuilder/js' }, + 'daterangepicker.js': { 'bootstrap-daterangepicker': 'bootstrap-daterangepicker/js' }, + 'nv.d3.min.js': { 'nvd3/build': 'nvd3' }, + 'jquery.sparkline.min.js': { 'jquery-sparkline': 'sparkline' } } + }, css: { options: { - destPrefix: libPath + destPrefix: libPath, + srcPrefix: nodeModulePath }, files: { - 'bootstrap/css': 'bootstrap/dist/css/bootstrap.min.css', - 'bootstrap/fonts': 'bootstrap/fonts/glyphicons-halflings-regular.woff2', - 'backgrid/css': 'backgrid/lib/backgrid.css', - 'backgrid-filter/css': 'backgrid-filter/backgrid-filter.min.css', - 'backgrid-orderable-columns/css': 'backgrid-orderable-columns/backgrid-orderable-columns.css', - 'backgrid-paginator/css': 'backgrid-paginator/backgrid-paginator.css', - 'backgrid-sizeable-columns/css': 'backgrid-sizeable-columns/backgrid-sizeable-columns.css', - 'backgrid-columnmanager/css': 'backgrid-columnmanager/lib/Backgrid.ColumnManager.css', - 'jquery-asBreadcrumbs/css': 'jquery-asBreadcrumbs/dist/css/asBreadcrumbs.min.css', - 'select2/css': 'select2/dist/css/select2.min.css', - 'backgrid-select-all': 'backgrid-select-all/backgrid-select-all.min.css', - 'font-awesome/css': 'font-awesome/css/font-awesome.min.css', - 'font-awesome/fonts': 'font-awesome/fonts', - 'jQueryQueryBuilder/css': 'jQuery-QueryBuilder/dist/css/query-builder.default.min.css', - 'bootstrap-daterangepicker/css': 'bootstrap-daterangepicker/daterangepicker.css', - 'nvd3/css': 'nvd3/build/nv.d3.min.css' + 'bootstrap.min.css': { 'bootstrap/dist/css': 'bootstrap/css' }, + 'glyphicons-halflings-regular.woff2': { 'bootstrap/fonts': 'bootstrap/fonts' }, + 'backgrid.css': { 'backgrid/lib': 'backgrid/css' }, + 'backgrid-filter.min.css': { 'backgrid-filter': 'backgrid-filter/css' }, + 'backgrid-orderable-columns.css': { 'backgrid-orderable-columns': 'backgrid-orderable-columns/css' }, + 'backgrid-paginator.css': { 'backgrid-paginator': 'backgrid-paginator/css' }, + 'backgrid-sizeable-columns.css': { 'backgrid-sizeable-columns': 'backgrid-sizeable-columns/css' }, + 'Backgrid.ColumnManager.css': { 'backgrid-columnmanager/lib': 'backgrid-columnmanager/css' }, + 'asBreadcrumbs.min.css': { 'jquery-asBreadcrumbs/dist/css': 'jquery-asBreadcrumbs/css' }, + 'select2.min.css': { 'select2/dist/css': 'select2/css' }, + 'backgrid-select-all.min.css': { 'backgrid-select-all': 'backgrid-select-all' }, + 'font-awesome.min.css': { 'font-awesome/css': 'font-awesome/css' }, + '*': { + 'expand': true, + 'dot': true, + 'cwd': nodeModulePath + 'font-awesome', + 'src': ['fonts/*.*'], + 'dest': libPath + 'font-awesome/' + }, + 'query-builder.default.min.css': { 'jQuery-QueryBuilder/dist/css': 'jQueryQueryBuilder/css' }, + 'daterangepicker.css': { 'bootstrap-daterangepicker': 'bootstrap-daterangepicker/css' }, + 'nv.d3.min.css': { 'nvd3/build': 'nvd3/css' } } }, license: { options: { - destPrefix: libPath + destPrefix: libPath, + srcPrefix: nodeModulePath }, files: { - 'jquery': 'jquery/LICENSE.txt', - 'requirejs-text': 'requirejs-text/LICENSE', - 'underscore': 'underscore/LICENSE', - 'bootstrap': 'bootstrap/LICENSE', - 'backbone-babysitter': 'backbone.babysitter/LICENSE.md', - 'backbone-marionette': 'backbone.marionette/license.txt', - 'backbone-paginator': 'backbone.paginator/LICENSE-MIT', - 'backbone-wreqr': 'backbone.wreqr/LICENSE.md', - 'backgrid': 'backgrid/LICENSE-MIT', - 'backgrid-filter': 'backgrid-filter/LICENSE-MIT', - 'backgrid-orderable-columns': 'backgrid-orderable-columns/LICENSE-MIT', - 'backgrid-paginator': 'backgrid-paginator/LICENSE-MIT', - 'backgrid-sizeable-columns': 'backgrid-sizeable-columns/LICENSE-MIT', - 'backgrid-columnmanager': 'backgrid-columnmanager/LICENSE', - 'jquery-asBreadcrumbs': 'jquery-asBreadcrumbs/LICENSE', - 'd3': 'd3/LICENSE', - 'd3/': 'd3-tip/LICENSE', - 'dagre-d3': 'dagre-d3/LICENSE', - 'backgrid-select-all': 'backgrid-select-all/LICENSE-MIT', - 'jquery-placeholder': 'jquery-placeholder/LICENSE.txt', - 'platform/': 'platform/LICENSE', - 'jQueryQueryBuilder/': 'jQuery-QueryBuilder/LICENSE', - 'nvd3/': 'nvd3/LICENSE.md' + 'LICENSE.txt': [ + { 'jquery': 'jquery' }, + { 'jquery-placeholder': 'jquery-placeholder' } + ], + 'LICENSE': [{ 'requirejs-text': 'requirejs-text' }, + { 'underscore': 'underscore' }, + { 'bootstrap': 'bootstrap' }, + { 'backgrid-columnmanager': 'backgrid-columnmanager' }, + { 'jquery-asBreadcrumbs': 'jquery-asBreadcrumbs' }, + { 'd3': 'd3' }, + { 'd3-tip': 'd3/' }, + { 'dagre-d3': 'dagre-d3' }, + { 'platform': 'platform/' }, + { 'jQuery-QueryBuilder': 'jQueryQueryBuilder/' } + ], + 'LICENSE.md': [{ 'backbone.babysitter': 'backbone-babysitter' }, + { 'backbone.wreqr': 'backbone-wreqr' }, + { 'nvd3': 'nvd3/' } + ], + 'license.txt': [{ 'backbone.marionette': 'backbone-marionette' }], + 'LICENSE-MIT': [{ 'backbone.paginator': 'backbone-paginator' }, + { 'backgrid': 'backgrid' }, + { 'backgrid-filter': 'backgrid-filter' }, + { 'backgrid-orderable-columns': 'backgrid-orderable-columns' }, + { 'backgrid-paginator': 'backgrid-paginator' }, + { 'backgrid-sizeable-columns': 'backgrid-sizeable-columns' }, + { 'backgrid-select-all': 'backgrid-select-all' } + ] } } }, @@ -225,14 +210,29 @@ module.exports = function(grunt) { } }, uglify: { - build: { + buildlibs: { + options: { + mangle: true, + compress: true, + beautify: false + }, + files: [{ + expand: true, + cwd: 'dist/js', + src: ['external_lib/**/*.js', 'libs/**/*.js'], + dest: 'dist/js' + }] + }, + buildjs: { options: { - mangle: false + mangle: false, + compress: true, + beautify: true }, files: [{ expand: true, cwd: 'dist/js', - src: '**/*.js', + src: ['**/*.js', '!libs/**', '!external_lib/**'], dest: 'dist/js' }] } @@ -246,7 +246,6 @@ module.exports = function(grunt) { dest: 'dist/css' }] } - }, htmlmin: { build: { @@ -270,16 +269,55 @@ module.exports = function(grunt) { } }, files: { - [distPath + '/index.html']: [modulesPath + '/index.html.tpl'] + [distPath + 'index.html']: [modulesPath + 'index.html.tpl'] } } } }); - grunt.loadNpmTasks('grunt-connect-proxy'); + // Dynamically add copy-task using npmcopy + var npmCopy = grunt.config.get('npmcopy'), + libFiles = [], + createPath = function(options) { + var obj = options.obj, + fileName = options.fileName, + pathPrefix = options.pathPrefix; + if (obj.length) { + for (var i in obj) { + createPath({ + 'obj': obj[i], + 'libFiles': options.libFiles, + 'pathPrefix': pathPrefix, + 'fileName': fileName + }); + } + } else { + key = Object.keys(obj); + options.libFiles.push({ 'src': pathPrefix.srcPrefix + key + "/" + fileName, 'dest': pathPrefix.destPrefix + obj[key] + "/" + fileName }); + } + }; + + for (var key in npmCopy) { + var options = npmCopy[key].options, + files = npmCopy[key].files; + for (var fileName in files) { + if (fileName == "*") { + libFiles.push(files[fileName]); + } else { + createPath({ + 'obj': files[fileName], + 'libFiles': libFiles, + 'pathPrefix': options, + 'fileName': fileName + }); + } + } + }; + grunt.config.set('copy.libs', { files: libFiles }); + grunt.loadNpmTasks('grunt-contrib-connect'); + grunt.loadNpmTasks('grunt-middleware-proxy'); grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.loadNpmTasks('grunt-npmcopy'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-htmlmin'); @@ -287,32 +325,20 @@ module.exports = function(grunt) { require('load-grunt-tasks')(grunt); - grunt.registerTask('default', [ - 'devUpdate', - 'npmcopy:js', - 'npmcopy:css' - ]); - - grunt.registerTask('server', ['clean', 'copy:dist', 'concurrent', 'watch']); - grunt.registerTask('dev', [ 'clean', - 'npmcopy:js', - 'npmcopy:css', - 'npmcopy:license', + 'copy:libs', 'copy:dist', 'sass:dist', 'template', - 'configureProxies:server', + 'setupProxies:server', 'connect:server', 'watch' ]); grunt.registerTask('build', [ 'clean', - 'npmcopy:js', - 'npmcopy:css', - 'npmcopy:license', + 'copy:libs', 'copy:build', 'sass:build', 'template' @@ -320,28 +346,24 @@ module.exports = function(grunt) { grunt.registerTask('dev-minify', [ 'clean', - 'npmcopy:js', - 'npmcopy:css', - 'npmcopy:license', + 'copy:libs', 'copy:dist', 'sass:dist', - 'uglify:build', - 'cssmin:build', + 'uglify', + 'cssmin', 'template', - 'configureProxies:server', + 'setupProxies:server', 'connect:server', 'watch' ]); grunt.registerTask('build-minify', [ 'clean', - 'npmcopy:js', - 'npmcopy:css', - 'npmcopy:license', + 'copy:libs', 'copy:build', 'sass:build', - 'uglify:build', - 'cssmin:build', + 'uglify', + 'cssmin', 'template' ]); }; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/atlas/blob/af51fbcf/dashboardv2/package.json ---------------------------------------------------------------------- diff --git a/dashboardv2/package.json b/dashboardv2/package.json index ab051cf..957e916 100644 --- a/dashboardv2/package.json +++ b/dashboardv2/package.json @@ -21,7 +21,6 @@ "backbone.paginator": "2.0.5", "backbone.wreqr": "1.4.0", "backgrid": "0.3.8", - "backgrid-columnmanager": "0.2.4", "backgrid-filter": "0.3.7", "backgrid-orderable-columns": "0.1.2", "backgrid-paginator": "0.3.9", @@ -34,7 +33,7 @@ "dagre-d3": "0.4.17", "font-awesome": "4.7.0", "jQuery-QueryBuilder": "2.4.3", - "jquery": "2.2.4", + "jquery": "^3.2.1", "jquery-asBreadcrumbs": "0.2.2", "jquery-placeholder": "2.3.1", "jquery-sparkline": "2.4.0", @@ -48,29 +47,18 @@ "underscore": "1.8.3" }, "devDependencies": { - "connect-livereload": "0.5.4", - "git-rev": "0.2.1", - "grunt": "0.4.2", - "grunt-cli": "0.1.11", - "grunt-concurrent": "1.0.0", - "grunt-connect-proxy": "0.2.0", - "grunt-contrib-clean": "0.6.0", - "grunt-contrib-compress": "0.13.0", - "grunt-contrib-connect": "1.0.0", - "grunt-contrib-copy": "0.8.0", + "grunt": "^1.0.1", + "grunt-cli": "^1.2.0", + "grunt-contrib-clean": "^1.1.0", + "grunt-contrib-connect": "^1.0.0", + "grunt-contrib-copy": "^1.0.0", "grunt-contrib-cssmin": "2.0.0", "grunt-contrib-htmlmin": "2.2.0", - "grunt-contrib-jshint": "0.11.0", "grunt-contrib-uglify": "2.1.0", - "grunt-contrib-watch": "0.6.1", - "grunt-dev-update": "1.0.2", - "grunt-nginx": "0.2.2", - "grunt-nodemon": "0.4.0", - "grunt-npmcopy": "0.1.0", - "grunt-sass": "1.1.0", - "grunt-shell": "1.1.1", + "grunt-contrib-watch": "^1.0.0", + "grunt-middleware-proxy": "^1.0.7", + "grunt-sass": "^1.1.0", "grunt-template": "1.0.0", - "load-grunt-tasks": "3.1.0", - "proxit": "0.6.4" + "load-grunt-tasks": "^3.1.0" } } http://git-wip-us.apache.org/repos/asf/atlas/blob/af51fbcf/dashboardv2/public/index.html.tpl ---------------------------------------------------------------------- diff --git a/dashboardv2/public/index.html.tpl b/dashboardv2/public/index.html.tpl index 6b20014..553ca1b 100644 --- a/dashboardv2/public/index.html.tpl +++ b/dashboardv2/public/index.html.tpl @@ -42,7 +42,7 @@ <link rel="stylesheet" href="js/libs/backgrid-paginator/css/backgrid-paginator.css?bust=<%- bust %>"> <link rel="stylesheet" href="js/libs/backgrid-orderable-columns/css/backgrid-orderable-columns.css?bust=<%- bust %>"> <link rel="stylesheet" href="js/libs/backgrid-sizeable-columns/css/backgrid-sizeable-columns.css?bust=<%- bust %>"> - <link rel="stylesheet" href="js/libs/backgrid-columnmanager/css/Backgrid.ColumnManager.css?bust=<%- bust %>"> + <link rel="stylesheet" href="js/external_lib/backgrid-columnmanager/css/Backgrid.ColumnManager.css?bust=<%- bust %>"> <link rel="stylesheet" href="js/libs/select2/css/select2.min.css?bust=<%- bust %>"> <link rel="stylesheet" href="js/libs/bootstrap/css/bootstrap.min.css?bust=<%- bust %>"> <link rel="stylesheet" href="js/libs/jquery-asBreadcrumbs/css/asBreadcrumbs.min.css?bust=<%- bust %>"> http://git-wip-us.apache.org/repos/asf/atlas/blob/af51fbcf/dashboardv2/public/js/external_lib/backgrid-columnmanager/css/Backgrid.ColumnManager.css ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/external_lib/backgrid-columnmanager/css/Backgrid.ColumnManager.css b/dashboardv2/public/js/external_lib/backgrid-columnmanager/css/Backgrid.ColumnManager.css new file mode 100644 index 0000000..89a2446 --- /dev/null +++ b/dashboardv2/public/js/external_lib/backgrid-columnmanager/css/Backgrid.ColumnManager.css @@ -0,0 +1,114 @@ +#control { + margin: 0 0 10px 0; +} + +div.columnmanager-visibilitycontrol { + margin: 0 auto; + position: relative; + width: 50px; +} + +div.columnmanager-visibilitycontrol > button.dropdown-button { + background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb); + background-image: -webkit-gradient(linear,left top,left bottom, + color-stop(0, #ffffff),color-stop(1, #dbdbdb)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#dbdbdb'); + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#dbdbdb')"; + border: 1px solid #fff; + -moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4); + -webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4); + box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4); + text-decoration: none; + text-shadow: #fff 0 1px 0; + color: #597390; + font-weight: bold; +} + +div.columnmanager-visibilitycontrol > button.dropdown-button:hover { + background-image: -moz-linear-gradient(top, #ffffff, #eeeeee); + background-image: -webkit-gradient(linear,left top,left bottom, + color-stop(0, #ffffff),color-stop(1, #eeeeee)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eeeeee'); + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eeeeee')"; + color: #000; +} + +div.columnmanager-visibilitycontrol > button.dropdown-button:active { + background-image: -moz-linear-gradient(top, #dbdbdb, #ffffff); + background-image: -webkit-gradient(linear,left top,left bottom, + color-stop(0, #dbdbdb),color-stop(1, #ffffff)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dbdbdb', EndColorStr='#ffffff'); + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#dbdbdb', EndColorStr='#ffffff')"; + text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5); +} + +div.columnmanager-dropdown-container { + cursor: default; + position: absolute; + z-index: 10; + top: 0; + left: 0; + background: #fff; + border: solid 1px #bbb; + -webkit-box-shadow: #999999 0 1px 3px; + -moz-box-shadow: #999999 0 1px 3px; + box-shadow: #999999 0 1px 3px; + width: 200px; + display: none !important; + min-height: 20px; + max-height: 400px; + font-size: 14px; + line-height: 1.1em; + font-weight: normal; + text-align: left; + color: #444; + text-transform: none; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + background-clip: padding-box; + pointer-events: none; +} + +div.columnmanager-dropdown-container.open { + display: block !important; + pointer-events: auto; +} + +.columnmanager-dropdown-container > li { + list-style-type:none; + padding: 5px 0px 0px 20px; + border-bottom: solid 1px lightgray; + cursor: pointer; +} + +.columnmanager-dropdown-container > li:hover { + background-color: #f0f0f0; +} + +.columnmanager-dropdown-container > li:last-child { + border-bottom: none; +} + +.columnmanager-dropdown-container > li > span.indicator { + width: 20px; + display: inline-block; +} +.columnmanager-dropdown-container > li.visible > span.indicator::before { + content: "â"; + color: blue; +} + +.columnmanager-dropdown-container > li > span.column-label { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + display: inline-block; + width: 150px; + } + +th.columnVisibility { + overflow: visible; +} http://git-wip-us.apache.org/repos/asf/atlas/blob/af51fbcf/dashboardv2/public/js/external_lib/backgrid-columnmanager/js/Backgrid.ColumnManager.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/external_lib/backgrid-columnmanager/js/Backgrid.ColumnManager.js b/dashboardv2/public/js/external_lib/backgrid-columnmanager/js/Backgrid.ColumnManager.js new file mode 100644 index 0000000..a77852f --- /dev/null +++ b/dashboardv2/public/js/external_lib/backgrid-columnmanager/js/Backgrid.ColumnManager.js @@ -0,0 +1,960 @@ +"use strict"; + +/** + * A column manager for backgrid + * + * @module Backgrid.ColumnManager + */ + +// Dependencies +var _ = require("underscore"); +var $ = require("jquery"); +var Backbone = require("backbone"); +var Backgrid = require("backgrid"); + +/** + * Manages visibility of columns. + * + * @class Backgrid.Extension.ColumnManager ColumnManager + * @constructor + * @param {Backgrid.Columns} columns + * @param {Object} [options] + * @param {number} [options.initialColumnCount] Initial amount of columns to show. Default is null (All visible). + * @param {boolean} [options.trackSize] + * @param {boolean} [options.trackOrder] + * @param {boolean} [options.trackVisibility] + * @param {string} [options.stateChecking] can be "strict" or "loose". + * @param {boolean} [options.saveState] + * @param {string} [options.saveStateKey] Storage key. Must be unique for location. Can be left out if this plugin is only used in one place. + * @param {string} [options.saveStateLocation] Can be "localStorage" (default) or "sessionStorage" (be aware, session stored values are lost when window is closed) + * @param {boolean} [options.loadStateOnInit] + * @param {Array} [state] + */ +Backgrid.Extension.ColumnManager = function (columns, options, state) { + // Bind backbone events + _.extend(this, Backbone.Events); + + // Save options and merge with defaults + var defaults = { + initialColumnsVisible: null, + + // State options + trackSize: true, + trackOrder: true, + trackVisibility: true, + stateChecking: "strict", + saveState: false, + saveStateKey: "", + saveStateLocation: "localStorage", + loadStateOnInit: false + }; + this.options = _.extend({}, defaults, options); + this.state = []; + + // Check if columns is instance of Backgrid.Columns + if (columns instanceof Backgrid.Columns) { + // Save columns + this.columns = columns; + + // Add columnManager to columns (instance) + columns.columnManager = this; + this.addManagerToColumns(); + + // Set state if provided + var storedState = (this.options.loadStateOnInit) ? this.loadState() : false; + if (state && this.checkStateValidity(state)) { + this.setState(state, true); + } + else if (storedState) { + this.setState(storedState, true); + } + else { + // If no initial state is provided, adhere to initial column visibility settings + this.setInitialColumnVisibility(); + + // Set current state + this.setState(this.getStateFromColumns()); + } + + // Listen to column events + if (this.options.trackVisibility || this.options.trackSize || this.options.trackOrder) { + //this.stateUpdateHandler = _.bind(this.stateUpdateHandler, this); + var events = "" + + ((this.options.trackVisibility) ? "change:renderable " : "") + + ((this.options.trackSize) ? "resize " : "") + + ((this.options.trackOrder) ? "ordered" : ""); + this.columns.on(events, _.bind(this.stateUpdateHandler, this)); + } + } + else { + // Issue warning + console.error("Backgrid.ColumnManager: options.columns is not an instance of Backgrid.Columns"); + } +}; + +/** + * Loops over all columns and sets the visibility according to provided options. + * + * @method setInitialColumnVisibility + */ +Backgrid.Extension.ColumnManager.prototype.setInitialColumnVisibility = function () { + var self = this; + + // Loop columns and set renderable property according to settings + var initialColumnsVisible = self.options.initialColumnsVisible; + + if (initialColumnsVisible) { + self.columns.each(function (col, index) { + col.set("renderable", (col.get("alwaysVisible")) ? true : index < initialColumnsVisible); + }); + } +}; + +/** + * Loops over all columns and adds the columnManager instance to VisibilityHeaderCell columns. + * + * @method addManagerToColumns + */ +Backgrid.Extension.ColumnManager.prototype.addManagerToColumns = function () { + var self = this; + + self.columns.each(function (col) { + // Look for header cell + if (col.get("headerCell") === Backgrid.Extension.ColumnManager.ColumnVisibilityHeaderCell) { + col.set("headerCell", col.get("headerCell").extend({ + columnManager: self + })); + } + + if (col.get("headerCell") instanceof Backgrid.Extension.ColumnManager.ColumnVisibilityHeaderCell) { + col.get("headerCell").columnManager = self; + } + }); +}; + +/** + * Convenience function to retrieve a column either directly or by its id. + * Returns false if no column is found. + * + * @method getColumn + * @param {string|number|Backgrid.Column} col + * @return {Backgrid.Column|boolean} + */ +Backgrid.Extension.ColumnManager.prototype.getColumn = function (col) { + // If column is a string or number, try to find a column which has that ID + if (_.isNumber(col) || _.isString(col)) { + col = this.columns.get(col); + } + return (col instanceof Backgrid.Column) ? col : false; +}; + +/** + * Hides a column + * + * @method hidecolumn + * @param {string|number|Backgrid.Column} col + */ +Backgrid.Extension.ColumnManager.prototype.hideColumn = function (col) { + // If column is a valid backgrid column, set the renderable property to false + var column = this.getColumn(col); + if (column) { + column.set("renderable", false); + } +}; + +/** + * Shows a column + * + * @method showColumn + * @param {string|number|Backgrid.Column} col + */ +Backgrid.Extension.ColumnManager.prototype.showColumn = function (col) { + // If column is a valid backgrid column, set the renderable property to true + var column = this.getColumn(col); + if (column) { + column.set("renderable", true); + } +}; + +/** + * Toggles a columns' visibility + * + * @method toggleColumnVisibility + * @param {string|number|Backgrid.Column} col + */ +Backgrid.Extension.ColumnManager.prototype.toggleColumnVisibility = function (col) { + // If column is a valid backgrid column, set the renderable property to true + var column = this.getColumn(col); + if (column) { + if (column.get("renderable")) { + this.hideColumn(column); + } + else { + this.showColumn(column); + } + } +}; + +/** + * Returns the managed column collection + * + * @method getColumnCollection + * @return {Backgrid.Columns} + */ +Backgrid.Extension.ColumnManager.prototype.getColumnCollection = function () { + return this.columns; +}; + +/** + * + * @method setState + * @param {Array} state + * @param {boolean} applyState + * @return {boolean} + */ +Backgrid.Extension.ColumnManager.prototype.setState = function (state, applyState) { + var self = this; + + // Filter state + _.filter(state, function(columnState) { + if (!_.has(columnState, "name")) { + return false; + } + + var column = self.columns.findWhere({ + name: state.name + }); + + return typeof column !== "undefined"; + }); + + // Check if state is valid + if (self.checkStateValidity(state) && state !== self.state) { + // Apply and save state + self.state = state; + self.trigger("state-changed", state); + + if (applyState) { + return self.applyStateToColumns(); + } + else { + return self.saveState(); + } + } + return false; +}; + +/** + * @method getState + * @return {Array} + */ +Backgrid.Extension.ColumnManager.prototype.getState = function () { + return this.state; +}; + +/** + * + * @method checkStateValidity + * @return {boolean} + */ +Backgrid.Extension.ColumnManager.prototype.checkStateValidity = function (state) { + // Has to be array + if (!_.isArray(state) && _.isEmpty(state)) { + return false; + } + + function checkValidityColumnState() { + return _.every(state, function(column) { + var valid = true; + + // We require a name key + if (!_.has(column, "name")) { + valid = false; + } + + // If renderable is set, should be boolean + if (_.has(column, "renderable")) { + if (!_.isBoolean(column.renderable)) { + valid = false; + } + } + + // If displayOrder is set, should be a number + if (_.has(column, "displayOrder")) { + if (!_.isNumber(column.displayOrder)) { + valid = false; + } + } + + // If width is set, should be a number or a string + if (_.has(column, "width")) { + if (!_.isNumber(column.width) && !_.isString(column.width)) { + valid = false; + } + } + + return valid; + }); + } + + // Check if state is valid + if (this.options.stateChecking === "loose") { + // At least we require 'name' keys in every objec + return checkValidityColumnState(); + } + else { + // Strict check + // Requires same length and valid name keys. + if (state.length !== this.columns.length && !checkValidityColumnState()) { + return false; + } + + var columnNameKeys = this.columns.map(function (column) { + return column.get("name"); + }); + + var newStateNameKeys = _.map(state, function (column) { + return column.name; + }); + + return columnNameKeys.sort().toString() === newStateNameKeys.sort().toString(); + } +}; + + +/** + * + * @method loadState + * @return {boolean} + */ +Backgrid.Extension.ColumnManager.prototype.loadState = function () { + // Get state from storage + var state = JSON.parse(this.getStorage().getItem(this.getStorageKey())); + if (this.checkStateValidity(state)) { + return state; + } + return false; +}; + +/** + * + * @method saveState + * @param {boolean} [force] Override save settings. + * @return {boolean} + */ +Backgrid.Extension.ColumnManager.prototype.saveState = function (force) { + if (this.options.saveState || force) { + this.getStorage().setItem(this.getStorageKey(), JSON.stringify(this.state)); + this.trigger("state-saved"); + return true; + } + return false; +}; + +/** + * @method getStorage + * @return {boolean|Storage} + * @private + */ +Backgrid.Extension.ColumnManager.prototype.getStorage = function () { + // Check if storage functionality is available + if (typeof Storage !== "undefined") { + return (this.options.saveStateLocation === "sessionStorage") ? sessionStorage : localStorage; + } + else { + console.error("ColMrg: No storage support detected. State won't be saved."); + return false; + } +}; + +/** + * @method getStorageKey + * @return {string} + * @private + */ +Backgrid.Extension.ColumnManager.prototype.getStorageKey = function () { + return (this.options.saveStateKey) ? "backgrid-colmgr-" + this.options.saveStateKey : "backgrid-colmgr"; +}; + +/** + * @method stateUpdateHandler + * @return {boolean} + * @private + */ +Backgrid.Extension.ColumnManager.prototype.stateUpdateHandler = function () { + var state = this.getStateFromColumns(); + return this.setState(state); +}; + +/** + * @method getStateFromColumn + * @return {Array} + */ +Backgrid.Extension.ColumnManager.prototype.getStateFromColumns = function() { + var self = this; + + // Map state from columns + return this.columns.map(function(column) { + var columnState = { + name: column.get("name") + }; + + if (self.options.trackVisibility) { + columnState.renderable = column.get("renderable"); + } + if (self.options.trackOrder) { + columnState.displayOrder = column.get("displayOrder"); + } + if (self.options.trackSize) { + columnState.width = column.get("width"); + } + return columnState; + }); +}; + +/** + * @method applyStateToColumns + * @private + */ +Backgrid.Extension.ColumnManager.prototype.applyStateToColumns = function () { + var self = this; + + // Loop state + var ordered = false; + _.each(this.state, function(columnState) { + // Find column + var column = self.columns.findWhere({ + name: columnState.name + }); + + if (_.has(columnState, "renderable")) { + column.set("renderable", columnState.renderable); + } + if (_.has(columnState, "width")) { + var oldWidth = column.get("width"); + column.set("width", columnState.width, {silent: true}); + if (oldWidth !== columnState.width) { + column.trigger("resize", column, columnState.width, oldWidth); + } + } + + if (_.has(columnState, "displayOrder")) { + if (columnState.displayOrder !== column.get("displayOrder")) { + ordered = true; + } + column.set("displayOrder", columnState.displayOrder, {silent: true}); + } + }); + + if (ordered) { + self.columns.sort(); + self.columns.trigger("ordered"); + } +}; + +////////////////////////////////////////////// +/////////////// UI Controls ////////////////// +////////////////////////////////////////////// + +/** + * A dropdown item view + * + * @class DropDownItemView + * @extends Backbone.View + */ +var DropDownItemView = Backbone.View.extend({ + className: "columnmanager-dropdown-item", + tagName: "li", + + /** + * @method initialize + * @param {object} opts + * @param {Backgrid.Extension.ColumnManager} opts.columnManager ColumnManager instance. + * @param {Backgrid.Column} opts.column A backgrid column. + */ + initialize: function (opts) { + this.columnManager = opts.columnManager; + this.column = opts.column; + this.template = opts.template; + + _.bindAll(this, "render", "toggleVisibility"); + this.column.on("change:renderable", this.render, this); + this.el.addEventListener("click", this.toggleVisibility, true); + }, + + /** + * @method render + * @return {DropDownItemView} + */ + render: function () { + this.$el.empty(); + + this.$el.append(this.template({ + label: this.column.get("label") + })); + + if (this.column.get("renderable")) { + this.$el.addClass((this.column.get("renderable")) ? "visible" : null); + } + else { + this.$el.removeClass("visible"); + } + + return this; + }, + + /** + * Toggles visibility of column. + * + * @method toggleVisibility + * @param {object} e + */ + toggleVisibility: function (e) { + if (e) { + this.stopPropagation(e); + } + this.columnManager.toggleColumnVisibility(this.column); + }, + + /** + * Convenience function to stop event propagation. + * + * @method stopPropagation + * @param {object} e + * @private + */ + stopPropagation: function (e) { + e.stopPropagation(); + e.stopImmediatePropagation(); + e.preventDefault(); + } +}); + + +/** + * Dropdown view container. + * + * @class DropDownView + * @extends Backbone.view + */ +var DropDownView = Backbone.View.extend({ + /** + * @property className + * @type String + * @default "columnmanager-dropdown-container" + */ + className: "columnmanager-dropdown-container", + + /** + * @method initialize + * @param {object} opts + * @param {Backgrid.Extension.ColumnManager} opts.columnManager ColumnManager instance. + * @param {Backbone.View} opts.DropdownItemView View to be used for the items. + * @param {Function} opts.dropdownItemTemplate + */ + initialize: function (opts) { + this.options = opts; + this.columnManager = opts.columnManager; + this.ItemView = (opts.DropdownItemView instanceof Backbone.View) ? opts.DropdownItemView : DropDownItemView; + this.$dropdownButton = opts.$dropdownButton; + + this.on("dropdown:opened", this.open, this); + this.on("dropdown:closed", this.close, this); + this.columnManager.columns.on("add remove", this.render, this); + }, + + /** + * @method render + * @return {DropDownView} + */ + render: function () { + var view = this; + view.$el.empty(); + + // List all columns + this.columnManager.columns.each(function (col) { + if (!col.get("alwaysVisible")) { + view.$el.append(new view.ItemView({ + column: col, + columnManager: view.columnManager, + template: view.options.dropdownItemTemplate + }).render().el); + } + }); + + return this; + }, + + /** + * Opens the dropdown. + * + * @method open + */ + open: function () { + this.$el.addClass("open"); + + // Get button + var $button = this.$dropdownButton; + + // Align + var align; + if (this.options.align === "auto") { + // Determine what alignment fits + var viewPortWidth = document.body.clientWidth || document.body.clientWidth; + align = (($button.offset().left + this.$el.outerWidth()) > viewPortWidth) ? "left" : "right"; + } + else { + align = (this.options.align === "left" || this.options.align === "right") ? + (this.options.align === "right" ? "right" : "left") : "right"; + } + + var offset; + if (align === "left") { + // Align right by default + offset = $button.offset().left + $button.outerWidth() - this.$el.outerWidth(); + this.$el.css("left", offset + "px"); + } + else { + offset = $button.offset().left; + this.$el.css("left", offset + "px"); + } + + // Height position + var offsetHeight = $button.offset().top + $button.outerHeight(); + this.$el.css("top", offsetHeight + "px"); + }, + + /** + * Closes the dropdown. + * + * @method close + */ + close: function () { + this.$el.removeClass("open"); + } +}); + +/** + * UI control which manages visibility of columns. + * Inspired by: https://github.com/kjantzer/backbonejs-dropdown-view. + * + * @class Backgrid.Extension.ColumnManagerVisibilityControl + * @extends Backbone.View + */ +Backgrid.Extension.ColumnManagerVisibilityControl = Backbone.View.extend({ + /** + * @property tagName + * @type String + * @default "div" + */ + tagName: "div", + + /** + * @property className + * @type String + * @default "columnmanager-visibilitycontrol" + */ + className: "columnmanager-visibilitycontrol", + + /** + * @property defaultEvents + * @type Object + */ + defaultEvents: { + "click": "stopPropagation" + }, + + /** + * @property defaultOpts + * @type Object + */ + defaultOpts: { + width: null, + closeOnEsc: true, + closeOnClick: true, + openOnInit: false, + columnManager: null, + + // Button + buttonTemplate: _.template("<button class='dropdown-button'>...</button>"), + + // Container + DropdownView: DropDownView, + dropdownAlign: "auto", + + // Item view + DropdownItemView: DropDownItemView, + dropdownItemTemplate: _.template("<span class='indicator'></span><span class='column-label'><%= label %></span>") + }, + + /** + * @method initialize + * @param {Object} opts + * @param {Backgrid.Extension.ColumnManager} opts.columnManager ColumnManager instance + */ + initialize: function (opts) { + this.options = _.extend({}, this.defaultOpts, opts); + this.events = _.extend({}, this.defaultEvents, this.events || {}); + this.columnManager = opts.columnManager; + + // Option checking + if (!this.columnManager instanceof Backgrid.Extension.ColumnManager) { + console.error("Backgrid.ColumnManager: options.columns is not an instance of Backgrid.Columns"); + } + + // Bind scope to events + _.bindAll(this, "deferClose", "stopDeferClose", "closeOnEsc", "toggle", "render"); + + // UI events + document.body.addEventListener("click", this.deferClose, true); + this.el.addEventListener("click", this.stopDeferClose, true); + if (this.options.closeOnEsc) { + document.body.addEventListener("keyup", this.closeOnEsc, false); + } + this.el.addEventListener("click", this.toggle, false); + + // Create elements + this.setup(); + + // Listen for dropdown view events indicating to open and/or close + this.view.on("dropdown:close", this.close, this); + this.view.on("dropdown:open", this.open, this); + }, + + /** + * @method delayStart + * @private + */ + delayStart: function () { + clearTimeout(this.closeTimeout); + this.delayTimeout = setTimeout(this.open.bind(this), this.options.delay); + }, + + /** + * @method delayEnd + * @private + */ + delayEnd: function () { + clearTimeout(this.delayTimeout); + this.closeTimeout = setTimeout(this.close.bind(this), 300); + }, + + /** + * @method setup + * @private + */ + setup: function () { + // Override element width + if (this.options.width) { + this.$el.width(this.options.width + "px"); + } + + // Create button element + this.$dropdownButton = $(this.options.buttonTemplate()); + + var viewOptions = { + columnManager: this.columnManager, + DropdownItemView: this.options.DropdownItemView, + dropdownItemTemplate: this.options.dropdownItemTemplate, + align: this.options.dropdownAlign, + $dropdownButton: this.$dropdownButton + }; + + // Check if a different childView has been provided, if not, use default dropdown view + this.view = (this.options.DropdownView instanceof Backbone.View) ? + new this.options.DropdownView(viewOptions) : + new DropDownView(viewOptions); + }, + + /** + * @method setup + */ + render: function () { + this.$el.empty(); + + // Render button + this.$el.append(this.$dropdownButton); + + // Render inner view + this.view.render(); // tell the inner view to render itself + $(document.body).append(this.view.el); + return this; + }, + + /** + * Convenience function to stop event propagation + * + * @method stopPropagation + * @param {object} e + * @private + */ + stopPropagation: function (e) { + e.stopPropagation(); + e.stopImmediatePropagation(); + e.preventDefault(); + }, + + /** + * Toggle the dropdown visibility + * + * @method toggle + * @param {object} [e] + */ + toggle: function (e) { + if (this.isOpen !== true) { + this.open(e); + } + else { + this.close(e); + } + }, + + /** + * Open the dropdown + * + * @method open + * @param {object} [e] + */ + open: function (e) { + clearTimeout(this.closeTimeout); + clearTimeout(this.deferCloseTimeout); + + if (e) { + if (e.stopPropagation) { + e.stopPropagation(); + } + if (e.preventDefault) { + e.preventDefault(); + } + e.cancelBubble = true; + } + + // Don't do anything if already open + if (this.isOpen) { + return; + } + + this.isOpen = true; + this.$el.addClass("open"); + this.trigger("dropdown:opened"); + + // Notify child view + this.view.trigger("dropdown:opened"); + }, + + /** + * Close the dropdown + * + * @method close + * @param {object} [e] + */ + close: function (e) { + // Don't do anything if already closed + if (!this.isOpen) { + return; + } + + this.isOpen = false; + this.$el.removeClass("open"); + this.trigger("dropdown:closed"); + + // Notify child view + this.view.trigger("dropdown:closed"); + }, + + /** + * Close the dropdown on esc + * + * @method closeOnEsc + * @param {object} e + * @private + */ + closeOnEsc: function (e) { + if (e.which === 27) { + this.deferClose(); + } + }, + + /** + * @method deferClose + * @private + */ + deferClose: function () { + this.deferCloseTimeout = setTimeout(this.close.bind(this), 0); + }, + + /** + * @method stopDeferClose + * @private + */ + stopDeferClose: function (e) { + clearTimeout(this.deferCloseTimeout); + }, + + /** + * Clean up this control + * + * @method remove + * @chainable + */ + remove: function () { + // Remove event listeners + document.body.removeEventListener("click", this.deferClose); + this.el.removeEventListener("click", this.stopDeferClose); + if (this.options.closeOnEsc) { + document.body.removeEventListener("keyup", this.closeOnEsc); + } + this.el.removeEventListener("click", this.toggle); + + // Remove DOM element + $(this.view.el).remove(); + + // Invoke original backbone methods + return Backbone.View.prototype.remove.apply(this, arguments); + } +}); + +/** + * Backgrid HeaderCell containing ColumnManagerVisibilityControl + * + * @class Backgrid.Extension.ColumnVisibilityHeaderCell + * @extends Backgrid.HeaderCell + */ + +Backgrid.Extension.ColumnManager.ColumnVisibilityHeaderCell = Backgrid.HeaderCell.extend({ + initialize: function (options) { + Backgrid.HeaderCell.prototype.initialize.apply(this, arguments); + + // Add class + this.$el.addClass(this.column.get("name")); + }, + render: function () { + this.$el.empty(); + + // Add control + var colVisibilityControl = this.colVisibilityControl = new Backgrid.Extension.ColumnManagerVisibilityControl({ + columnManager: this.columnManager + }); + + // Add to header + this.$el.html(colVisibilityControl.render().el); + + this.delegateEvents(); + return this; + }, + + /** + * Clean up this cell. + * + * @method remove + * @chainable + */ + remove: function () { + // Remove UI control + this.colVisibilityControl.remove(); + + // Invoke super + /*eslint no-underscore-dangle:0*/ + return Backgrid.HeaderCell.__super__.remove.apply(this, arguments); + } +}); http://git-wip-us.apache.org/repos/asf/atlas/blob/af51fbcf/dashboardv2/public/js/main.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/main.js b/dashboardv2/public/js/main.js index 8e4dce5..f6c0157 100644 --- a/dashboardv2/public/js/main.js +++ b/dashboardv2/public/js/main.js @@ -137,7 +137,7 @@ require.config({ 'backgrid-orderable': 'libs/backgrid-orderable-columns/js/backgrid-orderable-columns', 'backgrid-paginator': 'libs/backgrid-paginator/js/backgrid-paginator.min', 'backgrid-sizeable': 'libs/backgrid-sizeable-columns/js/backgrid-sizeable-columns', - 'backgrid-columnmanager': 'libs/backgrid-columnmanager/js/Backgrid.ColumnManager', + 'backgrid-columnmanager': 'external_lib/backgrid-columnmanager/js/Backgrid.ColumnManager', 'asBreadcrumbs': 'libs/jquery-asBreadcrumbs/js/jquery-asBreadcrumbs.min', 'd3': 'libs/d3/d3.min', 'd3-tip': 'libs/d3/index',