diff --git a/web/pgadmin/browser/static/js/node.ui.js b/web/pgadmin/browser/static/js/node.ui.js index 7115e0770..476fd2ec2 100644 --- a/web/pgadmin/browser/static/js/node.ui.js +++ b/web/pgadmin/browser/static/js/node.ui.js @@ -93,57 +93,6 @@ define([ ); }); - /* Define on demand loading of dropdown items. - * This also requires ajax option of select2 to be set. - * The trick is, ajax: {} will also work even if you're actually not - * using ajax. - */ - $.fn.select2.amd.define('select2/onDemandDataAdapter', [ - 'select2/utils', - 'select2/data/select', - ], function (Utils, SelectAdapter) { - - function onDemandDataAdapter ($element, options) { - this.$element = $element; - this.options = options; - } - Utils.Extend(onDemandDataAdapter, SelectAdapter); - onDemandDataAdapter.prototype.query = function (params, callback) { - var data = []; - var self = this; - if (!params.page) { - params.page = 1; - } - var pageSize = 20; - - var $options = this.$element.children(); - $options.each(function () { - var $option = $(this); - - if (!$option.is('option') && !$option.is('optgroup')) { - return; - } - - var option = self.item($option); - - var matches = self.matches(params, option); - - if (matches !== null) { - data.push(matches); - } - }); - - callback({ - results: data.slice((params.page - 1) * pageSize, params.page * pageSize), - pagination: { - more: data.length >= params.page * pageSize, - }, - }); - }; - - return onDemandDataAdapter; - }); - /* * NodeAjaxOptionsControl * This control will fetch the options required to render the select diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js index 3e0391973..11b504566 100644 --- a/web/pgadmin/static/js/backform.pgadmin.js +++ b/web/pgadmin/static/js/backform.pgadmin.js @@ -10,10 +10,10 @@ define([ 'sources/gettext', 'underscore', 'jquery', 'backbone', 'backform', 'backgrid', 'codemirror', 'sources/sqleditor_utils', - 'sources/keyboard_shortcuts', 'sources/window', + 'sources/keyboard_shortcuts', 'sources/window', 'sources/select2/configure_show_on_scroll', 'spectrum', 'pgadmin.backgrid', 'select2', 'bootstrap.toggle', ], function(gettext, _, $, Backbone, Backform, Backgrid, CodeMirror, - SqlEditorUtils, keyboardShortcuts, pgWindow) { + SqlEditorUtils, keyboardShortcuts, pgWindow, configure_show_on_scroll) { var pgAdmin = (window.pgAdmin = window.pgAdmin || {}), pgBrowser = pgAdmin.Browser; @@ -2190,7 +2190,7 @@ define([ emptyOptions: false, preserveSelectionOrder: false, isDropdownParent: false, - onDemandLoad: true, + showOnScroll: true, }); // Evaluate the disabled, visible, and required option @@ -2249,15 +2249,8 @@ define([ select2Opts.data = data.rawValue; } - /* Set the pgadmin adapter for on demand load. - * Setting empty ajax option will enable infinite scrolling. - */ - if(select2Opts.onDemandLoad) { - select2Opts.dataAdapter = $.fn.select2.amd.require('select2/onDemandDataAdapter'); - if(_.isUndefined(select2Opts.ajax)) { - select2Opts.ajax = {}; - } - } + /* Configure show on scroll if required */ + select2Opts = configure_show_on_scroll.default(select2Opts); this.$sel = this.$el.find('select').select2(select2Opts); diff --git a/web/pgadmin/static/js/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid.pgadmin.js index 5addf34be..2ea0ec90e 100644 --- a/web/pgadmin/static/js/backgrid.pgadmin.js +++ b/web/pgadmin/static/js/backgrid.pgadmin.js @@ -9,11 +9,11 @@ define([ 'sources/gettext', 'underscore', 'jquery', 'backbone', 'backform', 'backgrid', 'alertify', - 'moment', 'bignumber', 'sources/utils', 'sources/keyboard_shortcuts', + 'moment', 'bignumber', 'sources/utils', 'sources/keyboard_shortcuts', 'sources/select2/configure_show_on_scroll', 'bootstrap.datetimepicker', 'backgrid.filter', 'bootstrap.toggle', ], function( gettext, _, $, Backbone, Backform, Backgrid, Alertify, moment, BigNumber, - commonUtils, keyboardShortcuts + commonUtils, keyboardShortcuts, configure_show_on_scroll ) { /* * Add mechanism in backgrid to render different types of cells in @@ -883,7 +883,7 @@ define([ select2_opts = _.extend({ openOnEnter: false, multiple: false, - onDemandLoad: true, + showOnScroll: true, }, self.defaults.select2, (col.select2 || {}) ), @@ -944,12 +944,9 @@ define([ select2_opts['placeholder'] = ''; } - if(select2_opts.onDemandLoad) { - select2_opts.dataAdapter = $.fn.select2.amd.require('select2/onDemandDataAdapter'); - if(_.isUndefined(select2_opts.ajax)) { - select2_opts.ajax = {}; - } - } + /* Configure show on scroll if required */ + select2_opts = configure_show_on_scroll.default(select2_opts); + // Initialize select2 control. this.$sel = this.$select.select2(select2_opts); diff --git a/web/pgadmin/static/js/select2/configure_show_on_scroll.js b/web/pgadmin/static/js/select2/configure_show_on_scroll.js new file mode 100644 index 000000000..c98a41b77 --- /dev/null +++ b/web/pgadmin/static/js/select2/configure_show_on_scroll.js @@ -0,0 +1,101 @@ +import 'select2'; +import $ from 'jquery'; +import _ from 'underscore'; + +export default function (options) { + if(options.showOnScroll) { + let Utils = $.fn.select2.amd.require('select2/utils'); + + /* Define on scroll showing of dropdown items. + * This also requires ajax option of select2 to be set. + * The trick is, ajax: {} will also work even if you're actually not + * using ajax. + */ + let ScrollDataAdapter = function ($element, options) { + this.$element = $element; + this.options = options; + this._dataToConvert = options.get('data') || []; + }; + + let BaseAdapter = null; + if(options.data != null) { + BaseAdapter = $.fn.select2.amd.require('select2/data/array'); + } else { + BaseAdapter = $.fn.select2.amd.require('select2/data/select'); + } + Utils.Extend(ScrollDataAdapter, BaseAdapter); + + ScrollDataAdapter.prototype.query = function (params, callback) { + var data = []; + var self = this; + if (!params.page) { + params.page = 1; + } + var pageSize = 20; + + var $options = this.$element.children(); + $options.each(function () { + var $option = $(this); + + if (!$option.is('option') && !$option.is('optgroup')) { + return; + } + + var option = self.item($option); + + var matches = self.matches(params, option); + + if (matches !== null) { + data.push(matches); + } + }); + + callback({ + results: data.slice((params.page - 1) * pageSize, params.page * pageSize), + pagination: { + more: data.length >= params.page * pageSize, + }, + }); + }; + + if (options.minimumInputLength > 0) { + ScrollDataAdapter = Utils.Decorate( + ScrollDataAdapter, + $.fn.select2.amd.require('select2/data/minimumInputLength') + ); + } + + if (options.maximumInputLength > 0) { + ScrollDataAdapter = Utils.Decorate( + ScrollDataAdapter, + $.fn.select2.amd.require('select2/data/maximumInputLength') + ); + } + + if (options.maximumSelectionLength > 0) { + ScrollDataAdapter = Utils.Decorate( + ScrollDataAdapter, + $.fn.select2.amd.require('select2/data/maximumSelectionLength') + ); + } + + if (options.tags) { + ScrollDataAdapter = Utils.Decorate(ScrollDataAdapter, $.fn.select2.amd.require('select2/data/tags')); + } + + if (options.tokenSeparators != null || options.tokenizer != null) { + ScrollDataAdapter = Utils.Decorate( + ScrollDataAdapter, + $.fn.select2.amd.require('select2/data/tokenizer') + ); + } + + options.dataAdapter = ScrollDataAdapter; + + /* Setting empty ajax option will enable infinite scrolling. */ + if(_.isUndefined(options.ajax)) { + options.ajax = {}; + } + } + return options; +}